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

| Resource | Link | |-----------------------|-------------------------------------------| | Website | tailgrids.com | | Documentation | tailgrids.com/docs | | All Components | tailgrids.com/docs/components | | UI Blocks | tailgrids.com/blocks | | Templates | tailgrids.com/templates | | Changelog | tailgrids.com/docs/changelog | | GitHub Repository | TailGrids/tailgrids | | CLI Documentation | Installation Guide |

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

Tailgrids

Install / Use

README