Open Source UI Libraryv1.0

Build Beautiful UIs
Faster Than Ever

Copy-paste ready components, blocks, and templates built with React, Tailwind CSS, and Framer Motion. Stop reinventing the wheel.

React
Next.js
Tailwind CSS
Framer Motion
TypeScript
50+
Components
30+
Blocks
5+
Templates
100%
Open Source
Installation

Get Started in Minutes

Simple setup process. No complex configuration needed.

1

Create your project

Start with a fresh Next.js project with TypeScript and Tailwind CSS

2

Install dependencies

Add the required animation libraries

3

Copy & Paste

Browse our components and copy the code directly into your project

Pro Tip

All components are self-contained with no external dependencies beyond what's listed. Simply copy the code and it works out of the box.

Terminal
$ npx create-next-app@latest my-app --typescript --tailwind --eslint
Zero config
Fast setup
TypeScript
Components

Beautiful Components

50+ ready-to-use components with smooth animations. Just copy, paste, and customize.

Magnetic Button

Buttons that follow your cursor

Motion Number

Animated counting numbers

Card Hover Effects

Interactive hover animations

Animated Tabs

Smooth tab transitions

Interactive & Accessible

Every component is built with accessibility in mind, keyboard navigable, and works seamlessly across all modern browsers.

  • Keyboard navigation
  • Screen reader support
  • Focus management
  • ARIA attributes
Explore all components
Hover me
Or me
Blocks

Ready-to-Use Sections

Complete page sections that work out of the box. Hero sections, pricing tables, footers, and more.

Hero Sections

Eye-catching hero layouts

6

Pricing Tables

Conversion-optimized pricing

6

Headers

Navigation and branding

6

Footers

Professional footer layouts

6

Blog Sections

Content showcase layouts

6

Team Cards

Team member showcases

4

Build Pages in Minutes

Combine blocks like LEGO pieces to create complete, stunning pages. Each block is designed to work seamlessly with others.

ResponsiveDark ModeCustomizableAccessible
Browse All Blocks
Templates

Premium Templates

Complete, production-ready website templates. Start with a solid foundation and customize to your needs.

Preview
$49
View Template

DevStack Pro

Ultimate landing page for developer tools & APIs

Next.jsTypeScriptTailwind
Preview
Free
View Template

NeuralFlow

AI/ML startup landing page template

ReactFramer MotionTailwind
Preview
$39
View Template

LaunchPad

Modern SaaS product launch template

Next.jsshadcn/uiTypeScript
Browse All Templates

Free and premium templates available

Features

Why Choose Our Library?

Built with modern best practices and developer experience in mind.

Lightning Fast

Optimized for performance with minimal bundle size

Fully Customizable

Easy to modify colors, spacing, and animations

Clean Code

Well-structured, readable, and maintainable code

Responsive

Works perfectly on all devices and screen sizes

Dark Mode

Built-in dark mode support for all components

Accessible

WCAG compliant with keyboard navigation support

Open Source

Free to use in personal and commercial projects

Animations

Smooth animations powered by Framer Motion

Open Source & Free

Ready to Build
Something Amazing?

Join thousands of developers using our components to build beautiful, performant web applications. Start for free today.