{"id":32860006,"url":"https://github.com/prodip2416/tailwind-kit","last_synced_at":"2026-05-04T09:34:14.197Z","repository":{"id":320550053,"uuid":"1074318925","full_name":"Prodip2416/tailwind-kit","owner":"Prodip2416","description":"🎨 Modern UI Component Library with 80+ React components built with Tailwind CSS. Copy-paste ready, fully responsive, dark mode support, and drag \u0026 drop functionality. Perfect for rapid prototyping and production apps.","archived":false,"fork":false,"pushed_at":"2025-10-24T11:15:05.000Z","size":927,"stargazers_count":0,"open_issues_count":0,"forks_count":0,"subscribers_count":0,"default_branch":"master","last_synced_at":"2025-10-24T13:07:48.062Z","etag":null,"topics":["frontend","reactjs","responsive-design","tailwindcss","ui","uitoolkit","vitejs"],"latest_commit_sha":null,"homepage":"https://prodip2416.github.io/tailwind-kit/","language":"JavaScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":null,"status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/Prodip2416.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":null,"code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null,"zenodo":null,"notice":null,"maintainers":null,"copyright":null,"agents":null,"dco":null,"cla":null}},"created_at":"2025-10-11T15:02:06.000Z","updated_at":"2025-10-24T11:20:01.000Z","dependencies_parsed_at":"2025-10-24T13:07:49.989Z","dependency_job_id":"52e1aa00-3847-49d7-9a65-81e723a2432f","html_url":"https://github.com/Prodip2416/tailwind-kit","commit_stats":null,"previous_names":["prodip2416/tailwind-kit"],"tags_count":null,"template":false,"template_full_name":null,"purl":"pkg:github/Prodip2416/tailwind-kit","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/Prodip2416%2Ftailwind-kit","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/Prodip2416%2Ftailwind-kit/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/Prodip2416%2Ftailwind-kit/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/Prodip2416%2Ftailwind-kit/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/Prodip2416","download_url":"https://codeload.github.com/Prodip2416/tailwind-kit/tar.gz/refs/heads/master","sbom_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/Prodip2416%2Ftailwind-kit/sbom","scorecard":null,"host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":283393885,"owners_count":26828705,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","status":"online","status_checked_at":"2025-11-08T02:00:06.281Z","response_time":57,"last_error":null,"robots_txt_status":"success","robots_txt_updated_at":"2025-07-24T06:49:26.215Z","robots_txt_url":"https://github.com/robots.txt","online":true,"can_crawl_api":true,"host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["frontend","reactjs","responsive-design","tailwindcss","ui","uitoolkit","vitejs"],"created_at":"2025-11-08T18:01:54.335Z","updated_at":"2026-05-04T09:34:14.182Z","avatar_url":"https://github.com/Prodip2416.png","language":"JavaScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"# 🎨 TailwindKit - Modern UI Component Library\n\n[![React](https://img.shields.io/badge/React-19.1.1-blue.svg)](https://reactjs.org/)\n[![Tailwind CSS](https://img.shields.io/badge/Tailwind%20CSS-3.4.0-38B2AC.svg)](https://tailwindcss.com/)\n[![Vite](https://img.shields.io/badge/Vite-4.5.3-646CFF.svg)](https://vitejs.dev/)\n[![License](https://img.shields.io/badge/License-MIT-green.svg)](LICENSE)\n[![Version](https://img.shields.io/badge/Version-1.0.2-brightgreen.svg)]()\n[![Last Updated](https://img.shields.io/badge/Last%20Updated-Apr%202026-orange.svg)]()\n\nA comprehensive, production-ready collection of **80+ beautiful UI components** built with React and Tailwind CSS. This project provides a complete component library with live previews, interactive demos, code generation, and copy-paste ready components for modern web applications.\n\n## 🌟 Why This Project is Useful\n\n### 🚀 **For Developers**\n- **Rapid Prototyping** - Build UIs 10x faster with pre-built components\n- **Consistent Design** - Maintain design consistency across projects\n- **Copy-Paste Ready** - No complex setup, just copy and use\n- **Production Ready** - Battle-tested components with real-world usage\n- **Learning Resource** - Study modern React patterns and best practices\n\n### 🎨 **For Designers**\n- **Design System** - Complete design system with consistent spacing, colors, and typography\n- **Interactive Prototypes** - See components in action before development\n- **Responsive Examples** - Mobile-first responsive design patterns\n- **Accessibility Focus** - WCAG compliant components out of the box\n\n### 🏢 **For Teams**\n- **Time Saving** - Reduce development time by 60-80%\n- **Quality Assurance** - Pre-tested components reduce bugs\n- **Scalability** - Easy to extend and customize for specific needs\n- **Documentation** - Comprehensive docs with live examples\n\n## 📸 Screenshots\n\n### 🖥️ Component Library Overview\n![TailwindKit - Component Library Overview](./docs/screenshots/overview.png)\n*80+ components organized in 8 categories with live demo and code panel side by side*\n\n### 🌙 Dark Mode + Two-Panel Code View\n![TailwindKit - Dark Mode with JS/TS Toggle](./docs/screenshots/dark-mode-code-panel.png)\n*Every component ships with instant JS/TS code generation and one-click copy*\n\n### 🖱️ Drag \u0026 Drop — Kanban Board\n![TailwindKit - Kanban Board Demo](./docs/screenshots/dragdrop-kanban.gif)\n*Fully interactive Kanban board with drag \u0026 drop reordering built on @dnd-kit*\n\n\u003e 💡 **To add screenshots:** Drop your images into `./docs/screenshots/` matching the filenames above. Use [ShareX](https://getsharex.com/) or [Kap](https://getkap.co/) (macOS) to record GIFs.\n\n---\n\n## ✨ Key Features\n\n- 🎨 **80+ UI Components** - Comprehensive collection of reusable components\n- 🌙 **Dark Mode Support** - Built-in dark/light theme toggle with smooth transitions\n- 📱 **Fully Responsive** - Mobile-first design approach with breakpoint optimization\n- ⚡ **Live Preview** - Interactive component demos with real-time updates\n- 📋 **Code Generation** - Copy-paste ready code snippets with syntax highlighting\n- 🎯 **8 Component Categories** - Organized by functionality and use cases\n- 🚀 **Lightning Fast** - Built with Vite for instant HMR and optimized builds\n- ♿ **Accessible** - WCAG 2.1 AA compliant components with keyboard navigation\n- 🎨 **Highly Customizable** - Easy to modify, extend, and theme\n- 🖱️ **Advanced Interactions** - Drag \u0026 drop, file uploads, and interactive controls\n- 📊 **Rich Components** - Kanban boards, data tables, and complex forms\n- 🔧 **Developer Friendly** - TypeScript ready, ESLint configured, and well-documented\n\n## 🚀 Quick Start\n\n### Prerequisites\n\n- **Node.js** (version 16 or higher) - [Download here](https://nodejs.org/)\n- **npm** or **yarn** package manager\n\n### Installation\n\n1. **Clone the repository**\n   ```bash\n   git clone https://github.com/your-username/tailwind-kit-github.git\n   cd tailwind-kit-github\n   ```\n\n2. **Install dependencies**\n   ```bash\n   npm install\n   # or\n   yarn install\n   ```\n\n3. **Start the development server**\n   ```bash\n   npm run dev\n   # or\n   yarn dev\n   ```\n\n4. **Open your browser**\n   Navigate to `http://localhost:5173` to view the application.\n\n### Build for Production\n\n```bash\nnpm run build\n# or\nyarn build\n```\n\n## 📁 Project Structure\n\n```\ntailwind-kit-github/\n├── 📁 public/                     # Static assets\n│   └── vite.svg                   # Vite logo\n├── 📁 src/\n│   ├── 📁 components/             # Component library (80+ components)\n│   │   ├── 📁 data-display/       # Data visualization components\n│   │   │   ├── 📁 avatar/         # User avatars with fallbacks\n│   │   │   ├── 📁 card/           # Content cards with actions\n│   │   │   ├── 📁 chart/          # Data visualization charts\n│   │   │   ├── 📁 grid/           # Responsive grid layouts\n│   │   │   ├── 📁 list/           # Vertical and horizontal lists\n│   │   │   ├── 📁 stat/           # Statistics and metrics\n│   │   │   ├── 📁 table/          # Sortable data tables\n│   │   │   └── 📁 timeline/       # Event timelines\n│   │   ├── 📁 feedback/           # User feedback components\n│   │   │   ├── 📁 alert/          # Success, error, warning alerts\n│   │   │   ├── 📁 badge/          # Status indicators and labels\n│   │   │   ├── 📁 modal/          # Dialog boxes and overlays\n│   │   │   ├── 📁 popover/        # Contextual information\n│   │   │   ├── 📁 toast/          # Notification messages\n│   │   │   └── 📁 tooltip/        # Hover information displays\n│   │   ├── 📁 forms/              # Form components\n│   │   │   ├── 📁 filters/        # Advanced filtering interfaces\n│   │   │   ├── 📁 multi-step/     # Multi-step form workflows\n│   │   │   ├── 📁 search/         # Search and filter forms\n│   │   │   ├── 📁 validation/     # Form validation examples\n│   │   │   └── 📁 wizards/        # Step-by-step wizards\n│   │   ├── 📁 inputs/             # Input components\n│   │   │   ├── 📁 checkbox/       # Checkbox components\n│   │   │   ├── 📁 date/           # Date and time pickers\n│   │   │   ├── 📁 radio/          # Radio button groups\n│   │   │   ├── 📁 rate/           # Star rating inputs\n│   │   │   ├── 📁 switch/         # Toggle switches\n│   │   │   └── 📁 tree-select/    # Hierarchical selection\n│   │   ├── 📁 layout/             # Layout components\n│   │   │   ├── 📁 container/      # Content containers\n│   │   │   ├── 📁 footer/         # Page footers\n│   │   │   ├── 📁 grid/           # Layout grid systems\n│   │   │   ├── 📁 header/         # Navigation headers\n│   │   │   └── 📁 card/           # Content card layouts\n│   │   ├── 📁 navigation/         # Navigation components\n│   │   │   ├── 📁 breadcrumb/     # Navigation breadcrumbs\n│   │   │   ├── 📁 menu/           # Navigation menus\n│   │   │   ├── 📁 navbar/         # Top navigation bars\n│   │   │   ├── 📁 pagination/     # Page navigation\n│   │   │   └── 📁 tabs/           # Tabbed interfaces\n│   │   ├── 📁 dragdrop/           # Drag \u0026 Drop components\n│   │   │   ├── SortableList.jsx   # Reorderable lists\n│   │   │   ├── DragDropCard.jsx   # Interactive card grids\n│   │   │   ├── FileDropZone.jsx   # File upload zones\n│   │   │   ├── KanbanBoard.jsx    # Project management board\n│   │   │   ├── DragDropElementRenderer.jsx\n│   │   │   ├── DragDropCodeGenerator.jsx\n│   │   │   └── dragdropComponentsData.js\n│   │   ├── 📁 notifications/      # Notification components\n│   │   │   ├── 📁 alerts/         # System alerts\n│   │   │   ├── 📁 loading/        # Loading indicators\n│   │   │   ├── 📁 modals/         # Modal notifications\n│   │   │   ├── 📁 popovers/       # Popover notifications\n│   │   │   ├── 📁 progress/       # Progress indicators\n│   │   │   ├── 📁 toasts/         # Toast notifications\n│   │   │   └── 📁 tooltips/       # Tooltip notifications\n│   │   ├── 📄 Sidebar.jsx         # Main navigation sidebar\n│   │   ├── 📄 TopNav.jsx          # Top navigation bar\n│   │   └── 📄 index.js            # Component exports\n│   ├── 📁 contexts/               # React contexts\n│   │   ├── SidebarContext.jsx     # Sidebar state management\n│   │   └── ThemeContext.jsx       # Theme state management\n│   ├── 📁 pages/                  # Application pages\n│   │   ├── DataDisplay.jsx        # Data display components page\n│   │   ├── DragDrop.jsx           # Drag \u0026 drop components page\n│   │   ├── Feedback.jsx           # Feedback components page\n│   │   ├── Forms.jsx              # Form components page\n│   │   ├── Home.jsx               # Landing page\n│   │   ├── Inputs.jsx             # Input components page\n│   │   ├── Layout.jsx             # Layout components page\n│   │   ├── Navigation.jsx         # Navigation components page\n│   │   ├── Notifications.jsx      # Notification components page\n│   │   └── index.js               # Page exports\n│   ├── 📄 App.jsx                 # Main application component\n│   ├── 📄 main.jsx                # Application entry point\n│   └── 📄 index.css               # Global styles and Tailwind imports\n├── 📁 dist/                       # Production build output\n├── 📄 .gitignore                  # Git ignore rules\n├── 📄 eslint.config.js            # ESLint configuration\n├── 📄 index.html                  # HTML template\n├── 📄 package.json                # Project dependencies and scripts\n├── 📄 postcss.config.js           # PostCSS configuration\n├── 📄 tailwind.config.js          # Tailwind CSS configuration\n├── 📄 vite.config.js              # Vite build configuration\n└── 📄 README.md                   # Project documentation\n```\n\n## 🛠️ Technologies Used\n\n### 🎯 **Core Technologies**\n- **[React 19.1.1](https://reactjs.org/)** - Modern React with hooks and functional components\n- **[Vite 4.5.3](https://vitejs.dev/)** - Lightning-fast build tool and development server\n- **[Tailwind CSS 3.4.0](https://tailwindcss.com/)** - Utility-first CSS framework\n- **[JavaScript ES6+](https://developer.mozilla.org/en-US/docs/Web/JavaScript)** - Modern JavaScript features\n\n### 🎨 **UI \u0026 Styling**\n- **Tailwind CSS** - Utility-first CSS framework with custom configuration\n- **PostCSS** - CSS processing and optimization\n- **Custom CSS** - Component-specific styles and animations\n- **Responsive Design** - Mobile-first approach with breakpoint system\n- **Dark Mode** - Built-in theme switching with CSS variables\n\n### 🚀 **Development Tools**\n- **ESLint** - Code linting and formatting with React-specific rules\n- **Vite HMR** - Hot Module Replacement for instant updates\n- **React Router DOM 7.9.1** - Client-side routing and navigation\n- **Context API** - Global state management for theme and sidebar\n\n### 🖱️ **Drag \u0026 Drop Libraries**\n- **[@dnd-kit/core 6.3.1](https://dndkit.com/)** - Core drag and drop functionality\n- **[@dnd-kit/sortable 10.0.0](https://dndkit.com/)** - Sortable list components\n- **[@dnd-kit/utilities 3.2.2](https://dndkit.com/)** - Utility functions for drag and drop\n- **[react-dropzone 14.3.8](https://react-dropzone.js.org/)** - File drop zone functionality\n\n### ♿ **Accessibility \u0026 Quality**\n- **WCAG 2.1 AA** - Web Content Accessibility Guidelines compliance\n- **Keyboard Navigation** - Full keyboard support for all components\n- **Screen Reader Support** - Proper ARIA labels and semantic HTML\n- **Focus Management** - Visible focus indicators and logical tab order\n- **Color Contrast** - WCAG compliant color combinations\n\n## 🎨 Component Categories\n\n### 📊 **Data Display (8 components)**\n- **Tables** - Sortable, filterable data tables with pagination\n- **Cards** - Content cards with headers, actions, and media\n- **Lists** - Vertical and horizontal lists with various layouts\n- **Grids** - Responsive grid layouts with flexible columns\n- **Charts** - Data visualization components with multiple chart types\n- **Stats** - Statistics and metrics display with trend indicators\n- **Timelines** - Event timelines and progress indicators\n- **Avatars** - User avatars with fallbacks and status indicators\n\n### 💬 **Feedback (6 components)**\n- **Alerts** - Success, error, warning, and info alerts with dismissible options\n- **Badges** - Status indicators, labels, and notification badges\n- **Modals** - Dialog boxes, overlays, and confirmation dialogs\n- **Popovers** - Contextual information displays with positioning\n- **Toasts** - Notification messages with auto-dismiss and actions\n- **Tooltips** - Hover information displays with multiple positions\n\n### 📝 **Forms (5 components)**\n- **Filter Forms** - Advanced filtering interfaces with multiple criteria\n- **Multi-step Forms** - Complex form workflows with progress tracking\n- **Search Forms** - Search and filter interfaces with autocomplete\n- **Validation Forms** - Form validation examples with real-time feedback\n- **Wizards** - Step-by-step form wizards with navigation controls\n\n### ⌨️ **Inputs (16 components)**\n- **Text Inputs** - Text, email, password, and number fields\n- **Checkboxes** - Single and group checkboxes with custom styling\n- **Radio Buttons** - Radio button groups with validation\n- **Date Pickers** - Date and time selection with calendar interface\n- **Selects** - Dropdown selection components with search\n- **Switches** - Toggle switches with smooth animations\n- **Sliders** - Range input components with custom styling\n- **File Uploads** - File selection components with drag \u0026 drop\n- **Star Ratings** - Interactive rating inputs with half-star support\n- **Tree Select** - Hierarchical selection with search and filtering\n\n### 🏗️ **Layout (5 components)**\n- **Containers** - Content containers with responsive widths\n- **Headers** - Navigation headers with branding and actions\n- **Footers** - Page footers with links and information\n- **Grids** - Layout grid systems with flexible columns\n- **Cards** - Content card layouts with various styles\n\n### 🧭 **Navigation (5 components)**\n- **Breadcrumbs** - Navigation breadcrumbs with separators\n- **Menus** - Navigation menus with dropdowns and submenus\n- **Navbars** - Top navigation bars with responsive design\n- **Pagination** - Page navigation with page numbers and controls\n- **Tabs** - Tabbed interfaces with keyboard navigation\n\n### 🔔 **Notifications (7 components)**\n- **Alerts** - System alerts with different severity levels\n- **Loading** - Loading indicators with spinners and progress\n- **Progress** - Progress bars with percentage and status\n- **Toasts** - Toast notifications with positioning and stacking\n- **Tooltips** - Contextual tooltips with rich content\n- **Modals** - Modal notifications with backdrop and focus management\n- **Popovers** - Popover notifications with trigger elements\n\n### 🖱️ **Drag \u0026 Drop (4 components)**\n- **Sortable Lists** - Reorderable list items with keyboard support and drag handles\n- **Drag \u0026 Drop Cards** - Interactive card grids with drag overlay and animations\n- **File Drop Zones** - File upload with drag and drop support, progress, and validation\n- **Kanban Board** - Full-featured project management board with:\n  - Multi-column support with customizable columns\n  - Cross-column dragging with smooth animations\n  - Rich card content (priority, assignee, due date, progress, tags)\n  - Item reordering within columns\n  - Responsive design with mobile support\n  - Statistics and progress tracking\n\n## 🎯 Usage Examples\n\n### Basic Component Usage\n\n```jsx\nimport { Alert } from './components/feedback/alert/Alert';\nimport { Card } from './components/data-display/card/Card';\nimport { StarRating } from './components/inputs/rate/RateInput';\nimport { KanbanBoard } from './components/dragdrop/KanbanBoard';\n\nfunction App() {\n  const columns = [\n    {\n      id: 'todo',\n      title: 'To Do',\n      color: 'bg-red-500',\n      items: [\n        { \n          id: '1', \n          title: 'Task 1', \n          description: 'Description here',\n          priority: 'high',\n          assignee: 'John Doe',\n          dueDate: '2024-01-15',\n          progress: 0,\n          tags: ['urgent', 'frontend']\n        }\n      ]\n    }\n  ];\n\n  return (\n    \u003cdiv\u003e\n      \u003cAlert type=\"success\" title=\"Success!\" message=\"Operation completed successfully\" /\u003e\n      \n      \u003cCard title=\"Welcome\" subtitle=\"Get started with TailwindKit\"\u003e\n        \u003cp\u003eThis is a beautiful card component!\u003c/p\u003e\n        \u003cStarRating \n          value={4} \n          onChange={(rating) =\u003e console.log(rating)}\n          size=\"lg\"\n        /\u003e\n      \u003c/Card\u003e\n\n      \u003cKanbanBoard \n        columns={columns}\n        onReorder={(newColumns) =\u003e console.log(newColumns)}\n        showStats={true}\n        showProgress={true}\n      /\u003e\n    \u003c/div\u003e\n  );\n}\n```\n\n### Dark Mode Support\n\n```jsx\nimport { ThemeProvider } from './contexts/ThemeContext';\n\nfunction App() {\n  return (\n    \u003cThemeProvider\u003e\n      \u003cYourApp /\u003e\n    \u003c/ThemeProvider\u003e\n  );\n}\n```\n\n### Advanced Drag \u0026 Drop\n\n```jsx\nimport { SortableList } from './components/dragdrop/SortableList';\nimport { FileDropZone } from './components/dragdrop/FileDropZone';\n\nfunction App() {\n  const [items, setItems] = useState([\n    { id: '1', content: 'Item 1', status: 'pending' },\n    { id: '2', content: 'Item 2', status: 'completed' }\n  ]);\n\n  const handleFilesAccepted = (acceptedFiles, rejectedFiles) =\u003e {\n    console.log('Files uploaded:', acceptedFiles);\n    if (rejectedFiles.length \u003e 0) {\n      console.log('Rejected files:', rejectedFiles);\n    }\n  };\n\n  return (\n    \u003cdiv\u003e\n      \u003cSortableList \n        items={items}\n        onReorder={setItems}\n        itemClassName=\"p-4 bg-white border rounded-lg shadow-sm hover:shadow-md transition-shadow\"\n        children={(item) =\u003e (\n          \u003cdiv className=\"flex items-center justify-between\"\u003e\n            \u003cspan\u003e{item.content}\u003c/span\u003e\n            \u003cspan className={`px-2 py-1 rounded-full text-xs ${\n              item.status === 'completed' \n                ? 'bg-green-100 text-green-800' \n                : 'bg-yellow-100 text-yellow-800'\n            }`}\u003e\n              {item.status}\n            \u003c/span\u003e\n          \u003c/div\u003e\n        )}\n      /\u003e\n      \n      \u003cFileDropZone\n        onFilesAccepted={handleFilesAccepted}\n        maxFiles={5}\n        maxSize={5 * 1024 * 1024} // 5MB\n        accept={{\n          'image/*': ['.jpeg', '.png', '.gif', '.webp'],\n          'application/pdf': ['.pdf'],\n          'text/*': ['.txt', '.md']\n        }}\n        className=\"border-2 border-dashed border-gray-300 rounded-lg p-8 text-center hover:border-blue-400 transition-colors\"\n      /\u003e\n    \u003c/div\u003e\n  );\n}\n```\n\n## 🎨 Customization\n\n### Tailwind Configuration\n\nThe project uses a custom Tailwind configuration that can be modified in `tailwind.config.js`:\n\n```javascript\nmodule.exports = {\n  content: ['./src/**/*.{js,jsx}'],\n  darkMode: 'class',\n  theme: {\n    extend: {\n      colors: {\n        primary: {\n          50: '#eff6ff',\n          500: '#3b82f6',\n          900: '#1e3a8a',\n        },\n        // Add your custom colors\n      },\n      fontFamily: {\n        sans: ['Inter', 'system-ui', 'sans-serif'],\n      },\n      spacing: {\n        '18': '4.5rem',\n        '88': '22rem',\n      },\n      animation: {\n        'fade-in': 'fadeIn 0.5s ease-in-out',\n        'slide-up': 'slideUp 0.3s ease-out',\n      },\n    },\n  },\n  plugins: [\n    // Add Tailwind plugins here\n  ],\n}\n```\n\n### Component Styling\n\nAll components use Tailwind utility classes and can be easily customized:\n\n```jsx\n\u003cButton \n  className=\"bg-blue-500 hover:bg-blue-600 text-white px-4 py-2 rounded-lg transition-colors focus:outline-none focus:ring-2 focus:ring-blue-500 focus:ring-offset-2\"\n  variant=\"custom\"\n\u003e\n  Custom Button\n\u003c/Button\u003e\n```\n\n### Theme Customization\n\n```jsx\n// Custom theme configuration\nconst customTheme = {\n  colors: {\n    primary: '#your-primary-color',\n    secondary: '#your-secondary-color',\n  },\n  fonts: {\n    heading: 'Your Heading Font',\n    body: 'Your Body Font',\n  },\n  spacing: {\n    // Custom spacing values\n  }\n};\n```\n\n## 🚀 Development\n\n### Available Scripts\n\n- `npm run dev` - Start development server with HMR\n- `npm run build` - Build for production with optimization\n- `npm run preview` - Preview production build locally\n- `npm run lint` - Run ESLint for code quality\n\n### Adding New Components\n\n1. **Create component directory** in appropriate category\n2. **Add component files** (Component.jsx, index.js)\n3. **Update category index.js** to export the component\n4. **Add to main components index.js** for global access\n5. **Create component data file** for documentation\n6. **Add to page renderer** for live preview\n7. **Update routing** if needed\n\n### Code Style Guidelines\n\n- **Functional Components** - Use React hooks and functional components\n- **React Best Practices** - Follow React official guidelines\n- **Tailwind Utility Classes** - Use utility-first approach\n- **Accessibility First** - Include ARIA labels and keyboard support\n- **TypeScript Ready** - Write components that are easy to migrate to TypeScript\n- **Performance** - Use React.memo, useMemo, and useCallback when appropriate\n\n## 📱 Responsive Design\n\nAll components are built with a mobile-first approach:\n\n- **Mobile** - Base styles (default, 320px+)\n- **Tablet** - `sm:` (640px+) and `md:` (768px+) breakpoints\n- **Desktop** - `lg:` (1024px+) and `xl:` (1280px+) breakpoints\n- **Large Desktop** - `2xl:` (1536px+) breakpoint\n\n### Responsive Examples\n\n```jsx\n// Mobile-first responsive design\n\u003cdiv className=\"\n  grid grid-cols-1 gap-4\n  sm:grid-cols-2 sm:gap-6\n  lg:grid-cols-3 lg:gap-8\n  xl:grid-cols-4\n\"\u003e\n  {/* Content */}\n\u003c/div\u003e\n```\n\n## ♿ Accessibility\n\nComponents are built with accessibility as a priority:\n\n- **Keyboard Navigation** - Full keyboard support with logical tab order\n- **Screen Readers** - Proper ARIA labels, roles, and descriptions\n- **Color Contrast** - WCAG AA compliant color combinations\n- **Focus Management** - Visible focus indicators and focus trapping\n- **Semantic HTML** - Proper HTML structure with meaningful elements\n- **Alternative Text** - Alt text for images and icons\n- **Form Labels** - Proper labeling for form inputs\n\n### Accessibility Examples\n\n```jsx\n// Accessible button with proper ARIA attributes\n\u003cbutton\n  className=\"bg-blue-500 text-white px-4 py-2 rounded-lg focus:outline-none focus:ring-2 focus:ring-blue-500 focus:ring-offset-2\"\n  aria-label=\"Close dialog\"\n  aria-describedby=\"dialog-description\"\n\u003e\n  Close\n\u003c/button\u003e\n\n// Accessible form with proper labeling\n\u003cdiv\u003e\n  \u003clabel htmlFor=\"email\" className=\"block text-sm font-medium text-gray-700\"\u003e\n    Email Address\n  \u003c/label\u003e\n  \u003cinput\n    id=\"email\"\n    type=\"email\"\n    className=\"mt-1 block w-full rounded-md border-gray-300 shadow-sm focus:border-blue-500 focus:ring-blue-500\"\n    aria-describedby=\"email-error\"\n    aria-invalid={hasError}\n  /\u003e\n  {hasError \u0026\u0026 (\n    \u003cp id=\"email-error\" className=\"mt-2 text-sm text-red-600\" role=\"alert\"\u003e\n      Please enter a valid email address\n    \u003c/p\u003e\n  )}\n\u003c/div\u003e\n```\n\n## 🌙 Dark Mode\n\nBuilt-in dark mode support with smooth transitions:\n\n- **Theme Toggle** - Switch between light/dark modes\n- **Context Provider** - Global theme state management\n- **CSS Variables** - Dynamic color switching\n- **Component Support** - All components support dark mode\n- **System Preference** - Respects user's system theme preference\n\n### Dark Mode Implementation\n\n```jsx\n// Theme context usage\nimport { useTheme } from './contexts/ThemeContext';\n\nfunction MyComponent() {\n  const { theme, toggleTheme } = useTheme();\n  \n  return (\n    \u003cdiv className=\"bg-white dark:bg-gray-900 text-gray-900 dark:text-white\"\u003e\n      \u003cbutton onClick={toggleTheme}\u003e\n        {theme === 'dark' ? '☀️' : '🌙'}\n      \u003c/button\u003e\n    \u003c/div\u003e\n  );\n}\n```\n\n## 📊 Performance\n\nThe project is optimized for performance:\n\n- **Code Splitting** - Lazy loading of components\n- **Bundle Optimization** - Tree shaking and dead code elimination\n- **Image Optimization** - Optimized assets and lazy loading\n- **Caching** - Proper cache headers and service worker support\n- **Minification** - Minified CSS and JavaScript in production\n\n## 🔧 Browser Support\n\n- **Chrome** - 90+\n- **Firefox** - 88+\n- **Safari** - 14+\n- **Edge** - 90+\n- **Mobile Safari** - 14+\n- **Chrome Mobile** - 90+\n\n## 📄 License\n\nThis project is licensed under the **MIT License** - see the [LICENSE](LICENSE) file for details.\n\n## 🤝 Contributing\n\nWe welcome contributions! Here's how you can help:\n\n1. **Fork the repository**\n2. **Create your feature branch** (`git checkout -b feature/AmazingFeature`)\n3. **Commit your changes** (`git commit -m 'Add some AmazingFeature'`)\n4. **Push to the branch** (`git push origin feature/AmazingFeature`)\n5. **Open a Pull Request**\n\n### Contribution Guidelines\n\n- Follow the existing code style\n- Add tests for new components\n- Update documentation\n- Ensure accessibility compliance\n- Test in multiple browsers\n\n## 📞 Support\n\nIf you have any questions or need help:\n\n- **GitHub Issues** - Open an issue for bugs or feature requests\n- **Documentation** - Check the comprehensive component docs\n- **Examples** - Review the live component examples\n- **Community** - Join our community discussions\n\n## 🚀 Roadmap\n\n\u003e 📄 Full detailed upgrade plans with phases, timelines, and impact analysis → **[FUTURE_PLANS.md](./FUTURE_PLANS.md)**\n\n### Upcoming Features\n\n- [x] **TypeScript Support** - TS code generation added across all menus: Inputs, Notifications, Forms, Navigation, Layout, Feedback, and Drag \u0026 Drop\n- [ ] **Storybook Integration** - Interactive component documentation\n- [ ] **Testing Suite** - Comprehensive test coverage\n- [ ] **Animation Library** - Advanced animations and transitions\n- [ ] **Theme Builder** - Visual theme customization tool\n- [ ] **Component Generator** - CLI tool for generating new components\n- [ ] **Figma Integration** - Design system sync with Figma\n- [ ] **Performance Monitoring** - Built-in performance metrics\n\n### Version History\n\n- **v1.0.2** *(Apr 2026)* - TypeScript code generation for all menus (Forms, Navigation, Layout, Feedback, Drag \u0026 Drop), two-panel demo/code layout across all sections\n- **v1.0.1** *(Apr 2026)* - TypeScript code generation for Inputs \u0026 Notifications, sidebar version bump\n- **v1.0.0** - Initial release with 80+ components, drag \u0026 drop, dark mode, full responsive support\n\n## 🙏 Acknowledgments\n\n- **[React](https://reactjs.org/)** - The web framework that powers this project\n- **[Tailwind CSS](https://tailwindcss.com/)** - The utility-first CSS framework\n- **[Vite](https://vitejs.dev/)** - The lightning-fast build tool\n- **[Heroicons](https://heroicons.com/)** - The beautiful icon library\n- **[@dnd-kit](https://dndkit.com/)** - The accessible drag and drop library\n- **[react-dropzone](https://react-dropzone.js.org/)** - The file upload component\n- **[React Router](https://reactrouter.com/)** - The routing library\n- **Community Contributors** - Everyone who has contributed to this project\n\n## 📈 Statistics\n\n- **80+ Components** - Comprehensive component library\n- **8 Categories** - Well-organized component structure\n- **100% Responsive** - Mobile-first design approach\n- **WCAG AA Compliant** - Accessibility standards met\n- **Zero Dependencies** - No external UI library dependencies\n- **Fast Build** - Optimized for performance\n\n---\n\n\u003cdiv align=\"center\"\u003e\n\n**Made with ❤️ using React and Tailwind CSS**\n\n[⭐ Star this repo](https://github.com/your-username/tailwind-kit-github) | [🐛 Report Bug](https://github.com/your-username/tailwind-kit-github/issues) | [💡 Request Feature](https://github.com/your-username/tailwind-kit-github/issues)\n\n\u003c/div\u003e","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fprodip2416%2Ftailwind-kit","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fprodip2416%2Ftailwind-kit","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fprodip2416%2Ftailwind-kit/lists"}