Dev Design Library

TailGrids components

Open-source React UI library built with Tailwind CSS. Production-ready components, blocks, and templates to help you build modern, accessible web apps faster.

Components
61
Framework
React
Stack
React, TypeScript, Tailwind
License
MIT
GitHub stars
1,646
Source
https://github.com/TailGrids/tailgrids
Website
https://tailgrids.com
Install
npx @tailgrids/cli@latest add {name}

All TailGrids components

  • Accordion: Fully accessible accordion component with multiple style variants
  • Alert: A component to display important messages to the user, with support for different variants.
  • Alert Dialog: A modal dialog that interrupts the user with important content and expects a response.
  • Aspect Ratio: Aspect ratio component to maintain the aspect ratio of an element.
  • Avatar: An image element with a fallback for representing a user.
  • Badge: Badge component with multiple colors, sizes, and support for prefix/suffix icons.
  • Breadcrumbs: Breadcrumbs component with multiple variants and support for icons.
  • Button: Button component with multiple variants, sizes, and support for icons.
  • Button Group: A component with multiple buttons grouped together.
  • Calendar: A calendar component with internationalization support.
  • Card: A card component with ultimate flexibility and customization.
  • Carousel: A powerful, flexible carousel component built with Embla Carousel.
  • Chart: A chart component with multiple variants.
  • Checkbox: A checkbox component with label and multiple states.
  • Collapsible: A high-performance context menu component that appears when triggered by a right-click or long-press.
  • Combobox: A combobox component with multiple variants.
  • Command: A command menu component with multiple variants.
  • Context Menu: A context menu component with multiple variants.
  • Date Field: A React date field component that lets users input a date.
  • Date Picker: A component to select a date.
  • Description: A description component that provides additional context or instructions for form fields.
  • Dialog: A dialog component that display a modal overlay above the main page content.
  • Drawer: A drawer component that slides in from the edge of the screen, typically used for navigation or displaying additional content.
  • Dropdown: A dropdown component with multiple variants and support for icons.
  • Field: A collection of components for building accessible and flexible form fields.
  • Hover Card: A hover card component that displays information when the user hovers over an element.
  • Input: An input component with multiple variants and support for icons.
  • Input Group: A flexible and accessible input group component that allows you to combine multiple input elements, such as text inputs, buttons, and…
  • Label: A label component for form fields.
  • Link: A link component with multiple variants.
  • List: A list component with multiple variants.
  • Menubar: A responsive menu bar component that provides a horizontal row of menu triggers, each opening a dropdown menu.
  • Native Select: A native select component with multiple variants.
  • Navigation Menu: A navigation menu component that provides a clear visual structure for the primary links of a website or application.
  • Number Field: A component for entering numeric values with increment and decrement buttons.
  • Otp Input: A component for entering one-time passwords.
  • Overlay: A component for displaying content in a floating container.
  • Pagination: A component for navigating between pages.
  • Popover: A popover component that displays content in a floating container.
  • Progress: A progress bar component with multiple variants.
  • Radio Input: A radio button component with label and multiple states.
  • Range Calendar: A calendar component for selecting a range of dates.
  • Resizable: Accessible resizable panel groups and layouts with keyboard support.
  • Scroll Area: A scroll area component to add scrollbars to an element.
  • Select: A select component with multiple variants.
  • Separator: A separator component to separate content.
  • Sheet: A sheet component that slides in from the edge of the screen, typically used for navigation or displaying additional content.
  • Sidebar: A reusable, responsive, and accessible sidebar component.
  • Skeleton: A component to indicate a loading state.
  • Slider: A slider component to select a value from a range.
  • Social Button: A button component for social media actions.
  • Spinner: A spinner component to indicate a loading state.
  • Table: A table component with multiple variants.
  • Tabs: A tabs component with multiple variants.
  • Text Area: A multiline text input component.
  • Text Field: A wrapper for text inputs.
  • Time Field: A segment-based time input component.
  • Time Picker: A component to select a time.
  • Toast: A toast component for displaying notifications.
  • Toggle: A toggle switch component.
  • Tooltip: A tooltip component.

Browse by category