Bardui - Ultimate Tailwind CSS Component Library

Bardui is a professional, full-stack component library and developer toolkit built for the modern web. With over 1,000+ monthly unique visitors, it serves as a comprehensive resource for developers building beautiful, responsive applications.

Beyond just a component library, Bardui is a complete platform featuring a powerful Component Builder, essential developer tools, and a thriving community.

🚀 Key Features

• 352+ Professional Components: diverse range of copy-paste Tailwind CSS components.
• Full-Stack Architecture: Built with Next.js App Router, Server Actions, and robust state management.
• Interactive Component Builder: Real-time playground powered by Monaco Editor to customize and preview code.
• Developer Tools:
  • 🎨 Palette Generator & Trending Palettes
  • 👁️ Contrast Checker for accessibility
  • 📐 Tailwind Grid Generator
• User Dashboard: Profiles, saved components, and membership management.
• Modern Tech: Leveraging React 19, Tailwind CSS v4, and AI-powered features.
• Dark Mode: Seamless built-in dark/light theme support.

🛠️ Tech Stack

Frontend & Core

• Framework: Next.js 16 (App Router, Server Components)
• Language: TypeScript
• Styling: Tailwind CSS v4, Tailwind Merge
• Animations: Framer Motion

State & Logic

• State Management: Zustand
• Authentication: NextAuth.js
• Data Fetching: Server Actions & Axios

Tools & Integrations

• Editor: Monaco Editor
• Payments: Lemon Squeezy
• AI: OpenAI & DeepSeek SDKs
• Analytics: Vercel Analytics

📦 Getting Started

Prerequisites

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

Installation

1. Clone the repository

   git clone https://github.com/your-username/bardui.git
   cd bardui

2. Install dependencies

   npm install
   # or
   pnpm install

3. Set up environment variables Copy the example env file and fill in your credentials:

   cp .env.example .env.local

4. Run the development server

   npm run dev

Open http://localhost:3000 with your browser to see the result.

📂 Project Structure

bardui/
├── src/
│   ├── app/                 # Next.js App Router pages & layouts
│   ├── components/          # Shared UI components (atomic)
│   ├── features/            # Feature-specific logic & components
│   │   ├── dashboard/       # User dashboard views
│   │   ├── play/            # Component builder playground
│   │   └── tools/           # Dev tools (palette, contrast, etc.)
│   ├── lib/                 # Core utilities & configurations
│   ├── services/            # API services & data fetching
│   ├── styles/              # Global styles & Tailwind config
│   └── types/               # TypeScript definitions
├── public/                  # Static assets
└── package.json             # Dependencies & scripts

🤝 Contributing

We welcome contributions from the community! Whether it's a new component, a bug fix, or a documentation update, your help is appreciated.

1. Fork the project
2. Create your feature branch (git checkout -b feature/AmazingFeature)
3. Commit your changes (git commit -m 'Add some AmazingFeature')
4. Push to the branch (git push origin feature/AmazingFeature)
5. Open a Pull Request

📄 License

Distributed under the MIT License. See LICENSE for more information.

🌐 Community & Support

• Website: bardui.com
• Discord: Join our Community
• Issues: GitHub Issues

---

Made with ❤️ by the [Imran Baitham](https://imrandev.site)