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 through an extensive collection of production-ready components, blocks, and templates. All featuring a sleek, handcrafted, and pixel-perfect design optimized for exceptional user experience, high performance, accessibility, and consistent UI across projects.
Build human-centered websites, dashboards, SaaS products, landing pages, and internal tools effortlessly, without reinventing the UI from scratch or relying on the generic UI
📦 Installation
Set up Tailgrids in your React project in a few minutes.
Install & Initialize
Run this in your project root:
npx @tailgrids/cli@latest init
This sets up Tailgrids, creates the config and base styles, and installs required dependencies.
Add Styles
Copy the contents of tailgrids.css into your main CSS file, like globals.css or app.css.
Add a Component
Add components using the CLI:
npx @tailgrids/cli@latest add button
Use It
Import and use the component:
import { Button } from "@/components/core/button";
export default function Home() {
return <Button variant="primary">Hello Tailgrids!</Button>;
}
✨ Feature Highlights
Tailgrids is built for real-world production. Every component follows modern UI patterns, feels natural to use, and works seamlessly with React and Tailwind CSS.
- High-quality premium design – Clean, modern, and carefully crafted components that look polished out of the box
- 100+ Essential free UI Components – Buttons, forms, navbars, footers, cards, modals, alerts, dropdowns, and more
- Premium UI Blocks – 500+ React UI blocks and components for applications, dashboards, e-commerce, and AI products
- React + TypeScript first-class support – Fully rebuilt with JSX/TSX in V3
- Powered by Tailwind CSS – Full control and easy customization with utility classes
- Production-ready – Optimized for performance, accessibility (a11y), dark mode, and responsiveness
- Tailgrids CLI – CLI for instant component installation (
npx tailgrids add button) - Modern design tokens with a flexible theme system
- Built-in support for - React, Next.js and all popular React-based frameworks
- Unified free + pro ecosystem with a consistent design language
- Beautiful open-source SVG icon library included
🔗 Useful Links
- Website – https://tailgrids.com
- Documentation – https://tailgrids.com/docs
- Components – https://tailgrids.com/docs/components
- Blocks – https://tailgrids.com/blocks
- Templates – https://tailgrids.com/templates
- Changelog & Updates – https://tailgrids.com/blog
✨ What’s Included
React UI Components
A growing collection of reusable React components covering all common UI needs:
- Buttons, badges, alerts
- Forms, inputs, checkboxes, radios
- Modals, drawers, dropdowns
- Navigation, tabs, pagination
- Tables, lists, cards
- Pricing, testimonials, FAQs
- Authentication and onboarding sections
UI Blocks
Prebuilt UI blocks to speed up development:
- Application UI Blocks and Components
- Dashboards UI Blocks and Components
- Marketing UI Blocks and Components
- E-commerce UI Blocks and Components
- AI UI Blocks and Components
- and more
Templates
Ready-to-use unique React based Tailwind CSS templates that combine components and blocks into complete pages and layouts.
🧠 Built for Developers and Designers
Tailgrids is built for real production teams - developers and designers alike. It ships with a detailed, enterprise-ready Figma design system that designers genuinely enjoy working with.
For developers, Tailgrids focuses on long-term maintainability and a great DX:
- Clean, readable React components
- Utility-first styling with Tailwind CSS
- Easy to customize and extend
- No heavy dependencies
- Works with Vite, Next.js, CRA, and other React setups
Balanced for design and engineering, without compromises.
♿ Accessibility First
Accessibility is not an afterthought.
- Semantic markup
- Keyboard-friendly components
- Proper focus handling
- Screen reader-friendly patterns
- WCAG-aware design decisions
⚡ Performance Optimized
- Minimal CSS overhead
- Tree-shakeable components
- No unnecessary JavaScript
- Tailwind-powered styling for fast builds