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.

• 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.

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

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

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.

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

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

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

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

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