---
name: "@tailgrids"
slug: "tailgrids"
description: "A large open-source React component library powered by Tailwind CSS, shipping 100+ free copy-paste components and 500+ premium UI blocks. The free tier covers Accordion, Alert, Avatar, Badge, Button, Card, Carousel, Chart, Checkbox, Combobox, Command, Context Menu, Date Picker, Dialog, Drawer, Dropdown, Input, Menubar, Navigation Menu, OTP Input, Pagination, Popover, and more. Premium blocks cover marketing, dashboards, e-commerce, and AI sections. Uses a custom CLI (npx @tailgrids/cli). Freemium. Use for: React/Next.js/Vite projects needing a broad, Tailwind-native component set with a complementary block library for full-page layouts."
category: "Component library (general)"
tags: ["ai", "auth", "blocks", "buttons", "cards", "charts", "components", "dashboard", "design-system", "e-commerce", "forms", "loaders", "marketing", "media", "navigation", "overlays", "pro-available", "tables"]
framework: "react"
license: "MIT"
author: "Tailgrids"
website: "https://tailgrids.com"
github: "https://github.com/Tailgrids/tailgrids"
registry: "https://tailgrids.com/docs/r/registry.json"
pro: true
pro_url: "https://tailgrids.com/pricing"
github_stars: 1607
component_count: 61
generated_at: "2026-07-28T08:00:50.948Z"
---

# @tailgrids

A large open-source React component library powered by Tailwind CSS, shipping 100+ free copy-paste components and 500+ premium UI blocks. The free tier covers Accordion, Alert, Avatar, Badge, Button, Card, Carousel, Chart, Checkbox, Combobox, Command, Context Menu, Date Picker, Dialog, Drawer, Dropdown, Input, Menubar, Navigation Menu, OTP Input, Pagination, Popover, and more. Premium blocks cover marketing, dashboards, e-commerce, and AI sections. Uses a custom CLI (npx @tailgrids/cli). Freemium. Use for: React/Next.js/Vite projects needing a broad, Tailwind-native component set with a complementary block library for full-page layouts.

## Links

- Website: https://tailgrids.com
- GitHub: https://github.com/Tailgrids/tailgrids
- Registry JSON: https://tailgrids.com/docs/r/registry.json
- Directory page: https://sh4dcn.vercel.app/registry/tailgrids
- This file: https://sh4dcn.vercel.app/md/tailgrids.md
- Pro / pricing: https://tailgrids.com/pricing

## Install

```sh
# add the whole registry (shadcn CLI)
npx shadcn@latest add https://tailgrids.com/docs/r/registry.json
pnpm dlx shadcn@latest add https://tailgrids.com/docs/r/registry.json
bunx shadcn@latest add https://tailgrids.com/docs/r/registry.json
# clone the source repo
git clone https://github.com/Tailgrids/tailgrids.git
# fetch the raw registry index
curl -s https://tailgrids.com/docs/r/registry.json
```

## Components (61)

| name | type | description | install |
| --- | --- | --- | --- |
| accordion | registry:ui | Fully accessible accordion component with multiple style variants | `npx shadcn@latest add https://tailgrids.com/docs/r/accordion.json` |
| alert | registry:ui | A component to display important messages to the user, with support for different variants. | `npx shadcn@latest add https://tailgrids.com/docs/r/alert.json` |
| alert-dialog | registry:ui | A modal dialog that interrupts the user with important content and expects a response. | `npx shadcn@latest add https://tailgrids.com/docs/r/alert-dialog.json` |
| aspect-ratio | registry:ui | Aspect ratio component to maintain the aspect ratio of an element. | `npx shadcn@latest add https://tailgrids.com/docs/r/aspect-ratio.json` |
| avatar | registry:ui | An image element with a fallback for representing a user. | `npx shadcn@latest add https://tailgrids.com/docs/r/avatar.json` |
| badge | registry:ui | Badge component with multiple colors, sizes, and support for prefix/suffix icons. | `npx shadcn@latest add https://tailgrids.com/docs/r/badge.json` |
| breadcrumbs | registry:ui | Breadcrumbs component with multiple variants and support for icons. | `npx shadcn@latest add https://tailgrids.com/docs/r/breadcrumbs.json` |
| button | registry:ui | Button component with multiple variants, sizes, and support for icons. | `npx shadcn@latest add https://tailgrids.com/docs/r/button.json` |
| button-group | registry:ui | A component with multiple buttons grouped together. | `npx shadcn@latest add https://tailgrids.com/docs/r/button-group.json` |
| calendar | registry:ui | A calendar component with internationalization support. | `npx shadcn@latest add https://tailgrids.com/docs/r/calendar.json` |
| card | registry:ui | A card component with ultimate flexibility and customization. | `npx shadcn@latest add https://tailgrids.com/docs/r/card.json` |
| carousel | registry:ui | A powerful, flexible carousel component built with Embla Carousel. | `npx shadcn@latest add https://tailgrids.com/docs/r/carousel.json` |
| chart | registry:ui | A chart component with multiple variants. | `npx shadcn@latest add https://tailgrids.com/docs/r/chart.json` |
| checkbox | registry:ui | A checkbox component with label and multiple states. | `npx shadcn@latest add https://tailgrids.com/docs/r/checkbox.json` |
| collapsible | registry:ui | A high-performance context menu component that appears when triggered by a right-click or long-press. | `npx shadcn@latest add https://tailgrids.com/docs/r/collapsible.json` |
| context-menu | registry:ui | A context menu component with multiple variants. | `npx shadcn@latest add https://tailgrids.com/docs/r/context-menu.json` |
| combobox | registry:ui | A combobox component with multiple variants. | `npx shadcn@latest add https://tailgrids.com/docs/r/combobox.json` |
| command | registry:ui | A command menu component with multiple variants. | `npx shadcn@latest add https://tailgrids.com/docs/r/command.json` |
| date-field | registry:ui | A React date field component that lets users input a date. | `npx shadcn@latest add https://tailgrids.com/docs/r/date-field.json` |
| date-picker | registry:ui | A component to select a date. | `npx shadcn@latest add https://tailgrids.com/docs/r/date-picker.json` |
| description | registry:ui | A description component that provides additional context or instructions for form fields. | `npx shadcn@latest add https://tailgrids.com/docs/r/description.json` |
| dialog | registry:ui | A dialog component that display a modal overlay above the main page content. | `npx shadcn@latest add https://tailgrids.com/docs/r/dialog.json` |
| drawer | registry:ui | A drawer component that slides in from the edge of the screen, typically used for navigation or displaying additional content. | `npx shadcn@latest add https://tailgrids.com/docs/r/drawer.json` |
| dropdown | registry:ui | A dropdown component with multiple variants and support for icons. | `npx shadcn@latest add https://tailgrids.com/docs/r/dropdown.json` |
| field | registry:ui | A collection of components for building accessible and flexible form fields. | `npx shadcn@latest add https://tailgrids.com/docs/r/field.json` |
| hover-card | registry:ui | A hover card component that displays information when the user hovers over an element. | `npx shadcn@latest add https://tailgrids.com/docs/r/hover-card.json` |
| input | registry:ui | An input component with multiple variants and support for icons. | `npx shadcn@latest add https://tailgrids.com/docs/r/input.json` |
| input-group | registry:ui | A flexible and accessible input group component that allows you to combine multiple input elements, such as text inputs, buttons, and icons, into a single cohe… | `npx shadcn@latest add https://tailgrids.com/docs/r/input-group.json` |
| label | registry:ui | A label component for form fields. | `npx shadcn@latest add https://tailgrids.com/docs/r/label.json` |
| link | registry:ui | A link component with multiple variants. | `npx shadcn@latest add https://tailgrids.com/docs/r/link.json` |
| list | registry:ui | A list component with multiple variants. | `npx shadcn@latest add https://tailgrids.com/docs/r/list.json` |
| menubar | registry:ui | A responsive menu bar component that provides a horizontal row of menu triggers, each opening a dropdown menu. | `npx shadcn@latest add https://tailgrids.com/docs/r/menubar.json` |
| native-select | registry:ui | A native select component with multiple variants. | `npx shadcn@latest add https://tailgrids.com/docs/r/native-select.json` |
| navigation-menu | registry:ui | A navigation menu component that provides a clear visual structure for the primary links of a website or application. | `npx shadcn@latest add https://tailgrids.com/docs/r/navigation-menu.json` |
| number-field | registry:ui | A component for entering numeric values with increment and decrement buttons. | `npx shadcn@latest add https://tailgrids.com/docs/r/number-field.json` |
| otp-input | registry:ui | A component for entering one-time passwords. | `npx shadcn@latest add https://tailgrids.com/docs/r/otp-input.json` |
| overlay | registry:ui | A component for displaying content in a floating container. | `npx shadcn@latest add https://tailgrids.com/docs/r/overlay.json` |
| pagination | registry:ui | A component for navigating between pages. | `npx shadcn@latest add https://tailgrids.com/docs/r/pagination.json` |
| popover | registry:ui | A popover component that displays content in a floating container. | `npx shadcn@latest add https://tailgrids.com/docs/r/popover.json` |
| progress | registry:ui | A progress bar component with multiple variants. | `npx shadcn@latest add https://tailgrids.com/docs/r/progress.json` |
| radio-input | registry:ui | A radio button component with label and multiple states. | `npx shadcn@latest add https://tailgrids.com/docs/r/radio-input.json` |
| range-calendar | registry:ui | A calendar component for selecting a range of dates. | `npx shadcn@latest add https://tailgrids.com/docs/r/range-calendar.json` |
| resizable | registry:ui | Accessible resizable panel groups and layouts with keyboard support. | `npx shadcn@latest add https://tailgrids.com/docs/r/resizable.json` |
| scroll-area | registry:ui | A scroll area component to add scrollbars to an element. | `npx shadcn@latest add https://tailgrids.com/docs/r/scroll-area.json` |
| select | registry:ui | A select component with multiple variants. | `npx shadcn@latest add https://tailgrids.com/docs/r/select.json` |
| separator | registry:ui | A separator component to separate content. | `npx shadcn@latest add https://tailgrids.com/docs/r/separator.json` |
| sheet | registry:ui | A sheet component that slides in from the edge of the screen, typically used for navigation or displaying additional content. | `npx shadcn@latest add https://tailgrids.com/docs/r/sheet.json` |
| sidebar | registry:ui | A reusable, responsive, and accessible sidebar component. | `npx shadcn@latest add https://tailgrids.com/docs/r/sidebar.json` |
| skeleton | registry:ui | A component to indicate a loading state. | `npx shadcn@latest add https://tailgrids.com/docs/r/skeleton.json` |
| slider | registry:ui | A slider component to select a value from a range. | `npx shadcn@latest add https://tailgrids.com/docs/r/slider.json` |
| social-button | registry:ui | A button component for social media actions. | `npx shadcn@latest add https://tailgrids.com/docs/r/social-button.json` |
| spinner | registry:ui | A spinner component to indicate a loading state. | `npx shadcn@latest add https://tailgrids.com/docs/r/spinner.json` |
| table | registry:ui | A table component with multiple variants. | `npx shadcn@latest add https://tailgrids.com/docs/r/table.json` |
| tabs | registry:ui | A tabs component with multiple variants. | `npx shadcn@latest add https://tailgrids.com/docs/r/tabs.json` |
| text-area | registry:ui | A multiline text input component. | `npx shadcn@latest add https://tailgrids.com/docs/r/text-area.json` |
| text-field | registry:ui | A wrapper for text inputs. | `npx shadcn@latest add https://tailgrids.com/docs/r/text-field.json` |
| time-field | registry:ui | A segment-based time input component. | `npx shadcn@latest add https://tailgrids.com/docs/r/time-field.json` |
| time-picker | registry:ui | A component to select a time. | `npx shadcn@latest add https://tailgrids.com/docs/r/time-picker.json` |
| toast | registry:ui | A toast component for displaying notifications. | `npx shadcn@latest add https://tailgrids.com/docs/r/toast.json` |
| toggle | registry:ui | A toggle switch component. | `npx shadcn@latest add https://tailgrids.com/docs/r/toggle.json` |
| tooltip | registry:ui | A tooltip component. | `npx shadcn@latest add https://tailgrids.com/docs/r/tooltip.json` |

## For AI agents

```text
You are adding components from @tailgrids to a shadcn-compatible project.
1. Read this file (https://sh4dcn.vercel.app/md/tailgrids.md) for the component list.
2. Fetch the machine-readable index: https://tailgrids.com/docs/r/registry.json
3. Install a single component with its install command from the table above.
4. Full structured record: https://sh4dcn.vercel.app/json (library slug: tailgrids).
```