# Tailgrids UI

> Open-source React component library built with Tailwind CSS. 600+ reusable components, UI blocks, templates, CLI tooling, theming, and a Figma design system.

This file provides LLM-friendly entry points to documentation and examples.

## Overview

- [Tailgrids UI](https://tailgrids.com): React component library with reusable Tailwind UI components, blocks, and templates for modern web applications.
- [Documentation](https://tailgrids.com/docs): Installation and usage guides.
- [CLI](https://tailgrids.com/docs/cli): `npx @tailgrids/cli@latest init`
- [React Components](https://tailgrids.com/docs/components): Reusable React UI components with examples.
- [UI Blocks](https://tailgrids.com/blocks): Pre-built UI blocks for landing pages, dashboards, ecommerce, and AI apps.
- [Templates](https://tailgrids.com/templates): Ready-to-use React website templates for SaaS, startups, and product sites.
- [Figma](https://tailgrids.com/figma): UI kit and design system for product teams.. 
- [Icons](https://tailgrids.com/icons): Free open-source SVG icons.

## Components

- [Components](https://tailgrids.com/docs/components): Full list of UI components available in component library.
- [Accordion](https://tailgrids.com/docs/components/accordion): Expandable accordion component used to organize collapsible content sections.
- [Alert](https://tailgrids.com/docs/components/alert): Alert component used to display status messages and notifications.
- [Alert Dialog](https://tailgrids.com/docs/components/alert-dialog): Modal dialog component that interrupts the user with important content and expects a response.
- [Aspect Ratio](https://tailgrids.com/docs/components/aspect-ratio): Utility component for maintaining responsive media aspect ratios.
- [Avatar](https://tailgrids.com/docs/components/avatar): Avatar component used to display user profile images and identities.
- [Badge](https://tailgrids.com/docs/components/badge): Badge component used for labels, tags, and status indicators.
- [Breadcrumbs](https://tailgrids.com/docs/components/breadcrumbs): Breadcrumb navigation component used for hierarchical page paths.
- [Button](https://tailgrids.com/docs/components/button): Button component with multiple styles and interaction states.
- [Button Group](https://tailgrids.com/docs/components/button-group): Grouped button component for related actions and controls.
- [Card](https://tailgrids.com/docs/components/card): Card layout component used to organize structured UI content.
- [Carousel](https://tailgrids.com/docs/components/carousel): Carousel component built with Embla Carousel for scrolling through items with horizontal or vertical orientation.
- [Checkbox](https://tailgrids.com/docs/components/checkbox): Checkbox input component used in forms and settings.
- [Collapsible](https://tailgrids.com/docs/components/collapsible): Toggleable collapsible container used to show or hide content.
- [Combobox](https://tailgrids.com/docs/components/combobox): Searchable dropdown input component used to select options.
- [Command](https://tailgrids.com/docs/components/command): Command palette component for search interfaces, keyboard shortcuts, and navigation menus.
- [Context Menu](https://tailgrids.com/docs/components/context-menu): Context menu component triggered by right-click or long-press for contextual actions.
- [Date Picker](https://tailgrids.com/docs/components/date-picker): Date selection component used in forms and scheduling interfaces.
- [Dialog](https://tailgrids.com/docs/components/dialog): Dialog modal component used for confirmations and overlays.
- [Drawer](https://tailgrids.com/docs/components/drawer): Drawer panel component used for slide-in navigation and side panels.
- [Dropdown](https://tailgrids.com/docs/components/dropdown): Dropdown menu component used for contextual actions.
- [Field](https://tailgrids.com/docs/components/field): Form field wrapper component used with labels and inputs.
- [Hover Card](https://tailgrids.com/docs/components/hover-card): Hover card component that displays a preview of content when hovering over a trigger.
- [Input](https://tailgrids.com/docs/components/input): Standard text input component used for forms and data entry.
- [Input Group](https://tailgrids.com/docs/components/input-group): Input group component for adding addons, buttons, and helper text to inputs.
- [Label](https://tailgrids.com/docs/components/label): Label component used with inputs for accessibility.
- [Link](https://tailgrids.com/docs/components/link): Link component used for navigation and routing.
- [List](https://tailgrids.com/docs/components/list): List component used to display grouped items or navigation lists.
- [Menubar](https://tailgrids.com/docs/components/menubar): Horizontal menu bar component with dropdown menus for complex navigation.
- [Native Select](https://tailgrids.com/docs/components/native-select): Styled native select dropdown component for forms.
- [OTP Input](https://tailgrids.com/docs/components/otp-input): One-time password input component used for authentication flows.
- [Pagination](https://tailgrids.com/docs/components/pagination): Pagination component used to navigate large datasets.
- [Popover](https://tailgrids.com/docs/components/popover): Popover overlay component used to display contextual information.
- [Progress](https://tailgrids.com/docs/components/progress): Progress bar component used to indicate loading or completion.
- [Radio Input](https://tailgrids.com/docs/components/radio-input): Radio input component used for single-choice selections.
- [Resizable](https://tailgrids.com/docs/components/resizable): Resizable panel component for creating adjustable layouts with keyboard support.
- [Scroll Area](https://tailgrids.com/docs/components/scroll-area): Scroll area component with custom scrollbars for scrollable content regions.
- [Select](https://tailgrids.com/docs/components/select): Custom dropdown select component used in forms.
- [Separator](https://tailgrids.com/docs/components/separator): Divider component used to separate UI sections.
- [Sheet](https://tailgrids.com/docs/components/sheet): Sheet overlay component used for side panels and dialogs.
- [Skeleton](https://tailgrids.com/docs/components/skeleton): Skeleton loading placeholder used while content is loading.
- [Slider](https://tailgrids.com/docs/components/slider): Range slider component used for numeric selection.
- [Social Button](https://tailgrids.com/docs/components/social-button): Social authentication button component for login flows.
- [Spinner](https://tailgrids.com/docs/components/spinner): Loading spinner component used during asynchronous actions.
- [Table](https://tailgrids.com/docs/components/table): Table component used to display structured tabular data.
- [Tabs](https://tailgrids.com/docs/components/tabs): Tab navigation component used to switch between content sections.
- [Text Area](https://tailgrids.com/docs/components/text-area): Multi-line text input component used for longer content.
- [Time Picker](https://tailgrids.com/docs/components/time-picker): Time selection input component used for scheduling.
- [Toast](https://tailgrids.com/docs/components/toast): Toast notification component used for alerts and updates.
- [Toggle](https://tailgrids.com/docs/components/toggle): Toggle switch component used for binary on/off states.
- [Tooltip](https://tailgrids.com/docs/components/tooltip): Tooltip component used to display contextual hints.

## UI Blocks

### Application
- [Blog Sections](https://tailgrids.com/blocks/blog-sections): Blog layouts for listing articles, updates, and technical posts.
- [Blog Details](https://tailgrids.com/blocks/blog-details): Blog article layouts with readable typography and structured content.
- [Bento Grids](https://tailgrids.com/blocks/bento-grids): Bento-style grid layouts for showcasing features, highlights, and metrics.
- [Cards](https://tailgrids.com/blocks/cards): Card layouts for grouping content, actions, and information.
- [Contact](https://tailgrids.com/blocks/contact): Contact sections with forms and support or sales details.
- [Cookies](https://tailgrids.com/blocks/cookies): Cookie consent banners for privacy preferences and compliance.
- [Error Page](https://tailgrids.com/blocks/error-page): Error and 404 page layouts with clear recovery actions.
- [Mega Menu](https://tailgrids.com/blocks/mega-menu): Large navigation menus for complex product and documentation sites.
- [Modals](https://tailgrids.com/blocks/modals): Modal dialog layouts for confirmations, forms, and overlays.
- [Auth](https://tailgrids.com/blocks/auth): Authentication layouts for login, signup, and verification flows.
- [Gallery](https://tailgrids.com/blocks/gallery): Image gallery layouts for showcasing media collections.
- [Tables](https://tailgrids.com/blocks/tables): Table layouts optimized for dashboards and structured data.
- [Search Modal](https://tailgrids.com/blocks/search-modal): Search overlays for fast in-app search experiences.
- [Paywall](https://tailgrids.com/blocks/paywall): Paywall layouts for gated features or premium content.
- [Notification](https://tailgrids.com/blocks/notification): Notification layouts for alerts and system messages.
- [File Upload](https://tailgrids.com/blocks/file-upload): File upload interfaces with drag-and-drop and progress states.
- [Forms Layout](https://tailgrids.com/blocks/forms-layout): Structured form layouts for collecting user input.

### Marketing
- [About](https://tailgrids.com/blocks/about): About section layouts presenting company or product information.
- [Navbars](https://tailgrids.com/blocks/navbars): Navigation bar layouts for websites and applications.
- [Footers](https://tailgrids.com/blocks/footers): Footer layouts with links, branding, and legal information.
- [Brands](https://tailgrids.com/blocks/brands): Logo showcase layouts for partners and integrations.
- [CTA](https://tailgrids.com/blocks/cta): Call-to-action sections designed to drive conversions.
- [Features and Services](https://tailgrids.com/blocks/features-and-services): Feature listing sections highlighting product capabilities.
- [Hero Area](https://tailgrids.com/blocks/hero-area): Hero sections for landing pages with headline and call to action.
- [Newsletter Forms](https://tailgrids.com/blocks/newsletter-forms): Email subscription forms for newsletters and updates.
- [Portfolio](https://tailgrids.com/blocks/portfolio): Portfolio layouts for projects and case studies.
- [Pricing Tables](https://tailgrids.com/blocks/pricing-tables): Pricing comparison tables for subscription plans.
- [Stats](https://tailgrids.com/blocks/stats): Statistic sections highlighting key metrics and growth data.
- [Teams](https://tailgrids.com/blocks/teams): Team member layouts presenting people and roles.
- [Testimonials](https://tailgrids.com/blocks/testimonials): Testimonial sections displaying customer feedback.

### E-commerce
- [Banner](https://tailgrids.com/blocks/banner): Promotional banners for campaigns and announcements.
- [Checkout](https://tailgrids.com/blocks/checkout): Checkout layouts for completing purchases.
- [E-commerce Navbars](https://tailgrids.com/blocks/e-commerce-navbars): Store navigation bars with categories, search, and cart actions.
- [E-commerce Hero Area](https://tailgrids.com/blocks/e-commerce-hero-area): Hero sections highlighting featured products or campaigns.
- [E-commerce Footer](https://tailgrids.com/blocks/e-commerce-footer): Store footers with navigation, policies, and brand details.
- [Featured Products](https://tailgrids.com/blocks/featured-products): Product highlight sections showcasing key items.
- [Filters](https://tailgrids.com/blocks/filters): Filtering interfaces for refining product listings.
- [Order Summaries](https://tailgrids.com/blocks/order-summaries): Order summary sections displaying items, pricing, and totals.
- [Product Reviews](https://tailgrids.com/blocks/product-reviews): Review layouts showing ratings and customer feedback.
- [Product Carousels](https://tailgrids.com/blocks/product-carousels): Carousel sliders for browsing products horizontally.
- [Product Details](https://tailgrids.com/blocks/product-details): Product detail layouts with images, pricing, and actions.
- [Product Grids](https://tailgrids.com/blocks/product-grids): Grid layouts for browsing products in catalog pages.
- [Product Categories](https://tailgrids.com/blocks/product-categories): Category sections organizing product collections.
- [Quick Views](https://tailgrids.com/blocks/quick-views): Quick preview modals showing product details instantly.
- [Shopping Cart](https://tailgrids.com/blocks/shopping-cart): Shopping cart layouts for reviewing items before checkout.
- [Wishlist](https://tailgrids.com/blocks/wishlist): Wishlist layouts for saving products for later.

### Dashboard
- [Charts](https://tailgrids.com/blocks/charts): Chart sections visualizing analytics and performance data.
- [Chat Boxes](https://tailgrids.com/blocks/chat-boxes): Messaging interfaces for support or real-time chat.
- [Chat List](https://tailgrids.com/blocks/chat-list): Conversation list layouts organizing chats and contacts.
- [Calendars](https://tailgrids.com/blocks/calendars): Calendar views for scheduling and planning.
- [Data Stats](https://tailgrids.com/blocks/data-stats): Dashboard statistic sections displaying key metrics.
- [Drawers](https://tailgrids.com/blocks/drawers): Slide-in drawer panels for filters, settings, or navigation.
- [Horizontal Navbar](https://tailgrids.com/blocks/horizontal-navbar): Horizontal navigation layouts used in dashboards.
- [Maps](https://tailgrids.com/blocks/maps): Map layouts visualizing geographic data.
- [Page Titles](https://tailgrids.com/blocks/page-titles): Page header sections defining context and actions.
- [Steps](https://tailgrids.com/blocks/steps): Stepper layouts guiding users through multi-step workflows.
- [Widget](https://tailgrids.com/blocks/widget): Dashboard widgets displaying focused information modules.
- [Profiles](https://tailgrids.com/blocks/profiles): Profile layouts presenting user or account details.
- [Select Box](https://tailgrids.com/blocks/select-box): Select input layouts for dropdown choices and filters.
- [Setting Pages](https://tailgrids.com/blocks/setting-pages): Settings page layouts organizing preferences and configuration.
- [Sidebar](https://tailgrids.com/blocks/sidebar): Sidebar navigation layouts for dashboards and applications.

### AI
- [AI Sidebar](https://tailgrids.com/blocks/ai-sidebar): Sidebar layouts organizing prompts, chat history, and AI tools.
- [AI Hero](https://tailgrids.com/blocks/ai-hero): Hero sections introducing AI products and copilots.
- [Text Generators](https://tailgrids.com/blocks/text-generators): Interfaces for prompt-based text generation tools.
- [Image Generators](https://tailgrids.com/blocks/image-generators): Interfaces for generating and previewing AI images.
- [Video Generators](https://tailgrids.com/blocks/video-generators): Interfaces for generating and managing AI video content.
- [Code Generators](https://tailgrids.com/blocks/code-generators): Interfaces for AI-assisted coding and development tools.

## Optional

- [Repository](https://github.com/tailgrids/tailgrids): Tailgrids UI GitHub source code and issues.
- [Sitemap](https://tailgrids.com/sitemap.xml): XML sitemap of all indexable pages.
- [Blog](https://tailgrids.com/blog): Tutorials, guides, and updates on Tailgrids UI and Tailwind UI.
- [Roadmap](https://tailgrids.com/roadmap): Upcoming features and planned improvements.
- [Changelog](https://tailgrids.com/docs/changelog): Version history and release updates.