Bardui - Ultimate Tailwind CSS Component Library

undefinedBardui 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

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

🛠️ Tech Stack

undefinedFrontend & Coreundefined

• undefinedFramework: Next.js 16 (App Router, Server Components)
• undefinedLanguage: TypeScript
• undefinedStyling: Tailwind CSS v4, Tailwind Merge
• undefinedAnimations: Framer Motion

undefinedState & Logicundefined

• undefinedState Management: Zustand
• undefinedAuthentication: NextAuth.js
• undefinedData Fetching: Server Actions & Axios

undefinedTools & Integrationsundefined

• undefinedEditor: Monaco Editor
• undefinedPayments: Lemon Squeezy
• undefinedAI: OpenAI & DeepSeek SDKs
• undefinedAnalytics: Vercel Analytics

📦 Getting Started

Prerequisites

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

Installation

1. undefinedClone the repositoryundefined

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

2. undefinedInstall dependenciesundefined

   npm install
   # or
   pnpm install
   

3. undefinedSet up environment variablesundefined
   Copy the example env file and fill in your credentials:

   cp .env.example .env.local
   

4. undefinedRun the development serverundefined

   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

• undefinedWebsite: bardui.com
• undefinedDiscord: Join our Community
• undefinedIssues: GitHub Issues

---

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