ClumpUI brings together the best of modern component libraries into one unified, accessible system — so you don't have to choose just one.

Instead of locking you into a single design language or style guide, ClumpUI offers a growing collection of components inspired by popular libraries like shadcn/ui, Magic UI, Kokonut UI, and more — all ready to use, all in one place.

Think of it as a hub for production-ready components — curated, customizable, and developer-friendly.

• 🎨 200+ Components - Comprehensive collection of UI components
• 📦 One-Click Install - Install components via shadcn CLI
• 🎭 Multiple Styles - Components from various popular libraries
• 🌙 Dark Mode - Full dark/light theme support
• 📱 Responsive - Mobile-first design approach
• ⚡ Fast - Built with Next.js 15 and Turbopack
• 🎯 TypeScript - Full type safety
• 🎨 Tailwind CSS v4 - Modern utility-first CSS
• ♿ Accessible - Built with accessibility in mind
• 🔧 Customizable - Easy to modify and extend

Intelligent interfaces for modern applications

• AI Input Search
• AI Loading States
• AI Prompts
• Voice Interfaces

Animated text effects and typography

• Scroll Text
• Glitch Text
• Matrix Text
• Shimmer Text
• Type Writer
• Dynamic Text

Interactive buttons with engaging animations

• Gradient Button
• Particle Button
• Hold Button
• Social Button
• Command Button
• Switch Button

Versatile card layouts and interactions

• Apple Activity Card
• Card Flip
• Card Stack
• Carousel Cards
• Liquid Glass Card
• Tweet Card

General-purpose UI components

• Bento Grid
• File Upload
• Profile Dropdown
• Background Effects
• Form Components
• Navigation Elements

Make sure you have Node.js 18+ and pnpm installed:

node --version  # Should be 18+
npm install -g pnpm

1. Clone the repository

   git clone https://github.com/amardeeplakshkar/clumpui.git
   cd clumpui

2. Install dependencies

   pnpm install

3. Start the development server

   pnpm dev

4. Open your browser Navigate to http://localhost:3000

1. Install a component

   npx shadcn@latest add https://clumpui.amardeep.space/r/particle-button

2. Use it in your code

   import ParticleButton from "@/components/ui/particle-button"
   
   export default function Page() {
     return <ParticleButton>Click me!</ParticleButton>
   }

1. Copy the component code from the ClumpUI website
2. Create the component file in your project
3. Install any required dependencies
4. Import and use the component

clumpui/
├── app/                          # Next.js App Router
│   ├── (routes)/                # Route groups
│   │   ├── components/          # Component showcase pages
│   │   └── docs/               # Documentation pages
│   ├── registry/[name]/        # Component API endpoints
│   ├── layout.tsx              # Root layout
│   ├── page.tsx                # Homepage
│   └── globals.css             # Global styles
├── components/                   # Application components
│   ├── ui/                     # Base UI components
│   ├── core/                   # App-specific components
│   └── providers/              # Context providers
├── registry/                     # Component registry
│   └── new-york/              # Registry components
├── hooks/                        # Custom React hooks
├── lib/                          # Utility functions
├── config/                       # Configuration files
├── constant/                     # Static content
├── public/                       # Static assets
│   └── r/                      # Generated registry files
├── registry.json                 # Component definitions
└── package.json

# Development
pnpm dev              # Start dev server with Turbopack
pnpm build            # Build for production
pnpm start            # Start production server
pnpm lint             # Run ESLint

# Registry
pnpm registry:build   # Build registry files

1. Create the component

   mkdir registry/new-york/my-component
   touch registry/new-york/my-component/my-component.tsx

2. Implement your component

   // registry/new-york/my-component/my-component.tsx
   export function MyComponent() {
     return (
       <div className="p-4 border rounded-lg">
         <h2>My Component</h2>
       </div>
     )
   }
   
   export default MyComponent

3. Add to registry.json

   {
     "name": "my-component",
     "type": "registry:component",
     "dependencies": [],
     "registryDependencies": [],
     "files": [
       {
         "path": "registry/new-york/my-component/my-component.tsx",
         "type": "registry:component"
       }
     ]
   }

4. Update site configuration Add your component to the appropriate category in config/site.ts

5. Build the registry

   pnpm registry:build

• Follow shadcn/ui patterns and conventions
• Use TypeScript for type safety
• Implement proper accessibility features
• Support both light and dark themes
• Include proper dependencies in registry.json
• Test components thoroughly

ClumpUI uses Tailwind CSS v4 with custom design tokens:

• Theme Support: Full dark/light mode with next-themes
• Custom Properties: Extended CSS variables for theming
• Animations: Framer Motion integration
• Responsive: Mobile-first approach
• Utility Classes: Extensive use of Tailwind utilities

The project uses a comprehensive color system with support for:

• Primary/Secondary colors
• Semantic colors (destructive, muted, accent)
• Chart colors
• Sidebar-specific colors

We welcome contributions! Here's how you can help:

1. Fork the repository
2. Create a feature branch

   git checkout -b feature/amazing-component

3. Make your changes
4. Test thoroughly
5. Submit a pull request

• Ensure components are accessible and responsive
• Follow the existing code style and patterns
• Update documentation as needed
• Test in both light and dark themes
• Add proper TypeScript types

This project is licensed under the MIT License - see the LICENSE file for details.

ClumpUI is built on the shoulders of giants. Special thanks to:

• shadcn/ui - For the incredible component architecture
• Magic UI - For beautiful animated components
• Kokonut UI - For innovative component designs
• Radix UI - For accessible component primitives
• Tailwind CSS - For the utility-first CSS framework
• Framer Motion - For smooth animations

• 🌐 Website: clumpui.amardeep.space
• 🐙 GitHub: amardeeplakshkar/clumpui
• 🐦 Twitter: @amardeepdevs