Free React UI Components Powered by Tailwind CSS

Tailgrids is an open-source React UI component library built with Tailwind CSS. Ship modern web applications faster with an extensive collection of 100+ production-ready, fully customizable, copy-paste friendly components, plus premium UI blocks and templates.

All components feature a sleek, handcrafted, pixel-perfect design optimized for exceptional UX, high performance, accessibility (a11y), dark mode, and responsiveness.

Build human-centered websites, dashboards, SaaS products, landing pages, and internal tools — without reinventing the UI from scratch.

📦 Quick Installation

Set up Tailgrids in your React / Next.js project in seconds.

1. Initialize Tailgrids

npx @tailgrids/cli@latest init

This creates the config, base styles, and installs required dependencies.

2. Add Your First Component

npx @tailgrids/cli@latest add button

3. Use It

import { Button } from "@/components/core/button";

export default function Home() {
  return <Button variant="primary">Hello Tailgrids!</Button>;
}

Full installation guide → Tailgrids Installation Docs

✨ Key Features

• 100+ free React components – Production-ready and actively expanding
• Premium UI Blocks – 500+ ready-to-use sections for apps, dashboards, marketing, e-commerce, and AI
• React + TypeScript first-class support – Fully rebuilt in v3 with clean JSX/TSX
• Powered by Tailwind CSS – 100% customizable with utility classes
• Tailgrids CLI – Instant component installation
• Modern design tokens + flexible theming system
• Built-in accessibility, dark mode, responsive design, and keyboard navigation
• Works with Next.js, Vite, CRA, and all major React frameworks
• No heavy dependencies – Lightweight and maintainable
• Beautiful open-source SVG icon library included

🔗 Essential Links

UI Components

100+ free, production-ready React components — categorized for easy browsing.

All components are fully documented with examples, API references, accessibility notes, and copy-paste code.

Core UI Components

• Accordion
• Alert
• Alert Dialog
• Aspect Ratio
• Avatar
• Badge
• Breadcrumbs
• Button
• Button Group
• Card
• Carousel
• Chart
• Checkbox
• Collapsible
• Command
• Combobox
• Context Menu
• Date Picker
• Dialog
• Drawer
• Dropdown
• Field
• Hover Card
• Input
• Input Group
• Label
• Link
• List
• Menubar
• Native Select
• Navigation Menu
• OTP Input
• Pagination
• Popover
• Progress
• Radio Input
• Resizable
• Scroll Area
• Select
• Separator
• Sheet
• Skeleton
• Slider
• Social Button
• Spinner
• Table
• Tabs
• Text Area
• Time Picker
• Toast
• Toggle
• Tooltip

Browse the full interactive component library → tailgrids.com/docs/components

🧱 UI Blocks & Templates

• UI Blocks – Pre-built sections for dashboards, apps, marketing, e-commerce, and AI products → Explore Blocks

• Templates – Complete, ready-to-use React + Tailwind pages and layouts → Browse Templates

🧠 Built for Developers and Designers

Tailgrids is designed for developers and designers who ship real products:

• Clean, readable, TypeScript-ready React code
• Enterprise-ready Figma design system (available for Pro users)
• Consistent design language across free + premium ecosystem
• Long-term maintainability and excellent developer experience

📄 License

This project is licensed under the MIT License — free for personal and commercial use.

See LICENSE for details.

❤️ Contributing

We welcome contributions! Feel free to:

• Read contribtion guideline
• Submit pull requests
• Share feedback on Discord or GitHub Discussions

Made with ❤️ for the React Tailwind community.

Start building faster today → Get Started