TailGrids - Open-source React UI components for web apps
An open-source React UI component library with 100+ production-ready components, blocks, and templates built with Tailwind CSS. Includes a CLI for instant component installation, accessibility-first patterns, and a unified design system for websites, dashboards, and SaaS products.
Fully open-source under the MIT license for personal and commercial use.
Every component is optimized for consistent behavior across all screen sizes.
Add individual components instantly with the Tailgrids CLI tool.
Semantic markup, keyboard navigation, focus handling, and WCAG-aware design throughout.
Built-in dark mode support across all components and blocks.
Tree-shakeable components with minimal CSS overhead and no unnecessary JavaScript.
Prebuilt UI blocks and full-page templates for dashboards, e-commerce, and SaaS.
Enterprise-ready Figma file included for seamless designer-developer collaboration.
Ship accessible React web apps faster with production-ready components
TailGrids is an open-source React UI component library built with Tailwind CSS, designed for developers building web applications, dashboards, and landing pages. It ships with over 100 free core components alongside prebuilt blocks and page templates, all accessible through a dedicated CLI that lets you add individual components directly into your project. The library is written in TypeScript with first-class React support and works seamlessly with Next.js and other React-based frameworks. Whether you're prototyping a SaaS product or assembling an internal tool, TailGrids provides a consistent design system that prioritizes accessibility, performance, and easy customization.
What's included
- 100+ free UI components covering buttons, forms, modals, navigation, cards, alerts, and more
- Prebuilt UI blocks for dashboards, marketing pages, e-commerce, and AI products
- Ready-to-use React page templates combining components and blocks into full layouts
- Tailgrids CLI for adding components individually to your project
- Built-in SVG icon library
- Enterprise-ready Figma design system file
- Flexible design tokens and theming system
Ideal for
- SaaS applications and product dashboards
- Marketing and startup landing pages
- E-commerce storefronts and product pages
- Internal tools and admin interfaces
- Developer portfolios and agency websites
Accessibility
Every component is built with accessibility as a core concern rather than an afterthought. The library uses semantic HTML markup throughout, provides keyboard-friendly interactions with proper focus handling, and follows screen-reader-friendly patterns. Design decisions are made with WCAG guidelines in mind, so components work well for users relying on assistive technologies.
Components included
- Buttons, badges, and alert variants
- Form inputs, checkboxes, radio buttons, and select menus
- Modals, drawers, and dropdown menus
- Navigation bars, tabs, and pagination
- Tables, lists, and data cards
- Pricing tables, testimonial sections, and FAQ blocks
- Authentication and onboarding screens
License & usage
TailGrids core is released under the MIT license, so you can use it freely in both personal and commercial projects. A separate pro tier exists with additional premium blocks and components, but the free version covers all essential UI needs independently.
