https://github.com/TailGrids/tailgrids
TailGrids is an open-source React UI library built with Tailwind CSS. It provides production-ready components, blocks, and templates to help you build modern, accessible web apps faster.
https://github.com/TailGrids/tailgrids
component-library components dark-mode design-system frontend icons nextjs-ui-components react react-components react-tailwindcss react-templates react-ui-library tailwind tailwind-css tailwind-ui tailwindcss ui-components ui-kit ui-library vue-tailwindcss
Last synced: about 1 month ago
JSON representation
TailGrids is an open-source React UI library built with Tailwind CSS. It provides production-ready components, blocks, and templates to help you build modern, accessible web apps faster.
- Host: GitHub
- URL: https://github.com/TailGrids/tailgrids
- Owner: TailGrids
- License: mit
- Created: 2021-12-28T14:13:30.000Z (about 4 years ago)
- Default Branch: main
- Last Pushed: 2026-01-22T18:29:06.000Z (about 2 months ago)
- Last Synced: 2026-01-22T23:25:04.874Z (about 2 months ago)
- Topics: component-library, components, dark-mode, design-system, frontend, icons, nextjs-ui-components, react, react-components, react-tailwindcss, react-templates, react-ui-library, tailwind, tailwind-css, tailwind-ui, tailwindcss, ui-components, ui-kit, ui-library, vue-tailwindcss
- Language: TypeScript
- Homepage: https://tailgrids.com/
- Size: 31.4 MB
- Stars: 1,468
- Watchers: 17
- Forks: 110
- Open Issues: 7
-
Metadata Files:
- Readme: README.md
- License: LICENSE.md
Awesome Lists containing this project
README
# 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.
[](https://tailgrids.com)
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:
```bash
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:
```bash
npx @tailgrids/cli@latest add button
```
---
#### Use It
Import and use the component:
```jsx
import { Button } from "@/components/core/button";
export default function Home() {
return Hello Tailgrids!;
}
```
---
### ✨ 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](https://tailgrids.com)
* **Documentation** – [https://tailgrids.com/docs](https://tailgrids.com/docs)
* **Components** – [https://tailgrids.com/docs/components](https://tailgrids.com/docs/components)
* **Blocks** – [https://tailgrids.com/blocks](https://tailgrids.com/blocks)
* **Templates** – [https://tailgrids.com/templates](https://tailgrids.com/templates)
* **Changelog & Updates** – [https://tailgrids.com/blog](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
---
---