# Toro UI > Toro UI is a React component library built on Base UI primitives, styled with Tailwind CSS v4. Components are installed into your project via the shadcn CLI — you own the source code. ## Overview - React 19+, Tailwind CSS v4, Next.js 15+ - 50+ accessible components built on @base-ui/react - Styled with class-variance-authority (CVA) and Tailwind utility classes - Theming via CSS custom properties in OKLCH color space - Full TypeScript support with inferred variant types - Component installation: `npx shadcn@latest add ` ## Docs - [Animation](/docs/animation): Adding smooth animations and transitions to Toro UI components. - [Composition](/docs/composition): Building flexible UIs with component composition patterns. - [Customization](/docs/customization): Customizing Toro UI components to match your design system. - [Forms](/docs/forms): Building forms with Toro UI's field system and validation. - [Introduction](/docs): Toro UI is the UI framework for AI agents. - [MCP Server](/docs/mcp-server): Using the Toro UI MCP server for AI-assisted development. - [Principles](/docs/principles): The core principles behind Toro UI. - [Quick Start](/docs/quickstart): Get up and running with Toro UI in minutes. - [Releases](/docs/releases): Changelog and release notes for Toro UI. - [Skills](/docs/skills): AI agent skills for working with Toro UI. - [Styling](/docs/styling): How to style Toro UI components with Tailwind CSS. - [TypeScript](/docs/typescript): TypeScript usage and type safety with Toro UI. - [All Blocks](/docs/blocks): Ready-to-use page sections built with Toro UI components. Copy and paste into your app or install via the shadcn CLI. - [All Components](/docs/components): Accessible, composable, modern and easy to style UI components. - [Templates](/docs/templates): Full-page templates and starter kits to jumpstart your next project. ## Blocks - [CTA](/docs/blocks/cta): Call-to-action sections to drive signups and conversions. - [FAQ](/docs/blocks/faq): Frequently asked questions with expandable answers. - [Feature](/docs/blocks/feature): Feature showcases with icons, images, and descriptions. - [Hero](/docs/blocks/hero): Prominent landing sections with headlines, subtexts, and call-to-action buttons. - [Login](/docs/blocks/login): Authentication forms with email, password, and social sign-in options. - [Pricing](/docs/blocks/pricing): Pricing tables and plan comparison cards for SaaS products. - [Stats](/docs/blocks/stats): Statistic displays with large numbers, labels, and icons. - [Testimonial](/docs/blocks/testimonial): Customer quotes, reviews, and social proof sections. ## Components - [Accordion](/docs/components/accordion): A vertically stacked set of collapsible sections that expand and collapse to reveal content. - [Alert Dialog](/docs/components/alert-dialog): A modal dialog that interrupts the user with important content and expects a response. - [Alert](/docs/components/alert): A static banner that displays a brief, important message to the user. - [Aspect Ratio](/docs/components/aspect-ratio): A container that maintains a specified width-to-height ratio for its content. - [Avatar](/docs/components/avatar): A circular image element with a text or icon fallback, available in multiple sizes. - [Badge](/docs/components/badge): A small, styled label for highlighting status, categories, or counts. - [Breadcrumb](/docs/components/breadcrumb): Displays a hierarchical navigation trail showing the user's current location. - [Button Group](/docs/components/button-group): A container that visually groups related buttons, inputs, and other controls into a single row or column. - [Button](/docs/components/button): Displays a button or a component that looks like a button. - [Calendar](/docs/components/calendar): A date picker calendar with single, multiple, and range selection modes. - [Card](/docs/components/card): A container for grouping related content and actions. - [Carousel](/docs/components/carousel): A scrollable content area with previous/next navigation and keyboard support. - [Chart](/docs/components/chart): Themed chart components built on Recharts with automatic color management and styled tooltips. - [Checkbox](/docs/components/checkbox): A toggle control that allows the user to select or deselect an option. - [Collapsible](/docs/components/collapsible): A component that toggles between expanded and collapsed states to show or hide content. - [Combobox](/docs/components/combobox): An autocomplete input with a filterable dropdown list of options. - [Context Menu](/docs/components/context-menu): A right-click menu that displays a list of actions relevant to the target element. - [Dialog](/docs/components/dialog): A modal dialog that interrupts the user with important content and expects a response. - [Direction](/docs/components/direction): A provider and hook for controlling text and layout direction (LTR/RTL) across the component tree. - [Drawer](/docs/components/drawer): A touch-friendly panel that slides in from any edge of the screen, built on Vaul. - [Dropdown Menu](/docs/components/dropdown-menu): A menu of actions or options triggered by a button, with support for submenus, checkboxes, and radio items. - [Empty](/docs/components/empty): A placeholder state for when there is no data to display, with optional icon, title, description, and actions. - [Field](/docs/components/field): Composable form field primitives for building accessible, consistent form layouts with labels, descriptions, errors, and grouping. - [Hover Card](/docs/components/hover-card): A card that appears when hovering over a trigger element, ideal for showing preview content. - [Input Group](/docs/components/input-group): A container that combines an input with addons, buttons, and text elements for rich input compositions. - [Input OTP](/docs/components/input-otp): A one-time password input with individual character slots, built on input-otp. - [Input](/docs/components/input): A styled text input field with support for all native input types, validation states, and file uploads. - [Item](/docs/components/item): A flexible list item component with media, content, actions, and multiple layout variants. - [Kbd](/docs/components/kbd): A styled keyboard key indicator for displaying keyboard shortcuts and key combinations. - [Label](/docs/components/label): A text label that pairs with form controls, with automatic disabled state handling. - [Menubar](/docs/components/menubar): A horizontal menu bar with dropdown menus, modeled after desktop application menu bars. - [Native Select](/docs/components/native-select): A styled wrapper around the native HTML select element with a custom chevron icon. - [Navigation Menu](/docs/components/navigation-menu): A horizontal navigation component with animated dropdown content panels for site-wide navigation. - [Pagination](/docs/components/pagination): A set of composable components for building page navigation controls. - [Popover](/docs/components/popover): A floating panel anchored to a trigger element, ideal for displaying rich content on demand. - [Progress](/docs/components/progress): A visual indicator showing the completion status of a task or process. - [Radio Group](/docs/components/radio-group): A set of mutually exclusive radio buttons for selecting a single option from a list. - [Resizable](/docs/components/resizable): Draggable panels that can be resized by the user, supporting both horizontal and vertical layouts. - [Scroll Area](/docs/components/scroll-area): A custom scrollable container with styled scrollbars that replace native browser scrollbars. - [Select](/docs/components/select): A dropdown menu for selecting a single value from a list of options. - [Separator](/docs/components/separator): A visual divider that separates content horizontally or vertically. - [Sheet](/docs/components/sheet): A panel that slides in from the edge of the screen, useful for navigation, forms, or detail views. - [Site Header](/docs/components/site-header): A sticky, full-width header with responsive navigation, logo, and actions. - [Skeleton](/docs/components/skeleton): A placeholder loading animation that mimics the shape of content before it loads. - [Slider](/docs/components/slider): A draggable input for selecting a numeric value or range within a bounded interval. - [Sonner](/docs/components/sonner): A toast notification system powered by the Sonner library, themed to match the design system. - [Spinner](/docs/components/spinner): An animated loading indicator rendered as a spinning icon. - [Switch](/docs/components/switch): A toggle control that switches between on and off states. - [Table](/docs/components/table): A set of composable table elements for displaying structured data in rows and columns. - [Tabs](/docs/components/tabs): A tabbed interface for switching between different views or sections of content. - [Textarea](/docs/components/textarea): A multi-line text input field with automatic height sizing. - [Toggle Group](/docs/components/toggle-group): A group of toggle buttons where one or more can be active at a time. - [Toggle](/docs/components/toggle): A two-state button that can be toggled on or off. - [Tooltip](/docs/components/tooltip): A popup that displays informational text when hovering over or focusing an element.