UI Component Library

A curated collection of 100+ premium UI components crafted with Tailwind CSS and shadcn/ui for modern React and Next.js applications.

✨ Features

• Tailwind CSS 4.0 - Built with the latest Tailwind CSS features
• shadcn/ui Foundation - Based on the popular shadcn/ui component system
• TypeScript Support - Full TypeScript support for better developer experience
• Dark Mode Ready - All components support light and dark themes
• Framer Motion - Smooth animations and interactions
• Responsive Design - Mobile-first responsive components
• Accessible - Built with accessibility in mind using Radix UI primitives

🚀 Quick Start

Prerequisites

• Node.js 18+
• npm, yarn, or pnpm

Installation

1. Clone the repository

   git clone <repository-url>
   cd ui

2. Install dependencies

   npm install
   # or
   yarn install
   # or
   pnpm install

3. Run the development server

   npm run dev
   # or
   yarn dev
   # or
   pnpm dev

4. Open your browser Navigate to http://localhost:3000 to view the component library.

🛠️ Tech Stack

• Next.js 15 - React framework
• React 19 - UI library
• TypeScript - Type safety
• Tailwind CSS 4 - Styling
• shadcn/ui - Component system
• Radix UI - Accessible primitives
• Framer Motion - Animations
• Lucide React - Icons
• Fumadocs - Documentation

📖 Documentation

The component library includes comprehensive documentation built with Fumadocs. Each component comes with:

• Live Examples - Interactive component demos
• Code Snippets - Copy-paste ready code
• Props Documentation - Complete API reference
• Usage Guidelines - Best practices and examples

🎨 Customization

Theming

All components support theming through CSS variables and Tailwind CSS configuration. The default theme uses a zinc color palette but can be easily customized.

Styling

Components are built with Tailwind CSS and can be customized using:

• Tailwind CSS classes
• CSS variables

Adding New Components

1. Create your component in the appropriate category folder
2. Follow the existing component patterns
3. Add TypeScript interfaces for props
4. Include proper accessibility attributes
5. Add to the documentation

🤝 Contributing

We welcome contributions! Please see our contributing guidelines for details on:

• Code style and conventions
• Component development guidelines
• Documentation standards
• Testing requirements

🙏 Acknowledgments

• shadcn/ui for the component system foundation
• Radix UI for accessible primitives
• Tailwind CSS for the utility-first CSS framework
• Framer Motion for animations
• Lucide for beautiful icons