- 🎨 100+ Beautiful Components - Production-ready UI components built with Tailwind CSS
- 📋 Copy & Paste - No installation required, just copy and use
- 🌙 Dark Mode Support - All components work seamlessly in light and dark themes
- 📱 Fully Responsive - Mobile-first design that looks great on all devices
- ⚡ Zero Dependencies - Pure HTML, CSS, and vanilla JavaScript
- 🔍 Advanced Search - Find components quickly with smart filtering
- ❤️ Favorites System - Save your most-used components
- 🎯 Production Ready - Accessible, optimized, and battle-tested
- 🔧 Highly Customizable - Easy to modify colors, spacing, and styling
- 📖 Comprehensive Docs - Detailed usage instructions for every component
Visit kaydui to browse and copy components directly.
```bash git clone https://github.com/abdiwaahid/kaydui.git cd kaydui ```
Download the latest release and extract the files.
- Browse components on kaydui
- Click the "Copy" button on any component
- Paste the HTML into your project
- Ensure Tailwind CSS is included in your project
- Real-time component filtering
- Search by name or tags
- Category-based filtering
- System preference detection
- Manual toggle option
- Persistent theme selection
- All components optimized for both themes
- Mobile-first approach
- Tablet and desktop optimized
- Touch-friendly interactions
- Flexible grid layouts
We welcome contributions! Here's how you can help:
- Fork the repository
- Add your component to corresponding categroy in components folder
- Add appropriate tags and category
- Test in both light and dark modes
- Submit a pull request
```javascript
{
id: "unique-id",
slug: "component-name",
title: "Component Title",
description: "Brief description of the component",
category: "Category Number",
tags: ["tag1", "tag2", "tag3"],
code: <!-- Your component HTML -->,
}
```
- ✅ Use semantic HTML
- ✅ Follow accessibility best practices
- ✅ Test in multiple browsers
- ✅ Ensure mobile responsiveness
- ✅ Include hover and focus states
- ✅ Use consistent naming conventions
This project is licensed under the MIT License - see the LICENSE file for details.
- Tailwind CSS - The utility-first CSS framework
- Heroicons - Beautiful hand-crafted SVG icons
- Our amazing contributors
| Project | Description | Components Used |
|---|---|---|
| TechCorp Dashboard | SaaS analytics platform | Cards, Charts, Navigation |
| EcoShop | E-commerce marketplace | Product cards, Forms, Buttons |
| DevPortfolio | Developer portfolio site | Hero sections, Cards, Contact forms |
Want to showcase your project? Submit it here
- Website: kaydui
- Documentation: kaydui.com/docs
- Twitter: @kaydui
- Discord: Join our community
- Newsletter: Subscribe for updates
- 50+ new components
- React component variants
- Vue.js component variants
- Component builder tool
- Figma design system
- Advanced templates
- Theme customizer
- API for developers
- Mobile app
- Premium components
- Team collaboration features
- Integration with popular frameworks
Join our growing community of developers:
- GitHub Discussions: Share ideas and get help
- Discord Server: Real-time chat with other developers
- Twitter: Follow for updates and tips
- Newsletter: Monthly updates and new components
Found a bug? Please open an issue with:
- Browser and version
- Steps to reproduce
- Expected vs actual behavior
- Screenshots (if applicable)
Have an idea for a new component or feature? Submit a feature request!
Made with ❤️ by the Abdiwaahid
⭐ Star this repo if you find it useful!