# Cubby UI

> A component library built with React 19, TypeScript, Tailwind CSS 4, and Base UI. Copy, paste, and customize accessible components for your Next.js projects.

## Getting Started

- [Forms](https://cubby-ui.dev/docs/getting-started/forms.md): A guide to building forms with Cubby UI components
- [Installation](https://cubby-ui.dev/docs/getting-started/installation.md): How to install and configure Cubby UI in your project
- [Introduction](https://cubby-ui.dev/docs/getting-started/introduction.md): Cubby UI is a collection of primitive and composable components built with React 19, TypeScript, Tailwind CSS 4, and Base UI. Copy, paste, and customize.
- [Surfaces](https://cubby-ui.dev/docs/getting-started/surfaces.md): How Cubby keeps floating UI (popovers, dropdowns, dialogs, sheets) clearly lifted above whatever is behind it, at any nesting depth, in light and dark mode.
- [Theming](https://cubby-ui.dev/docs/getting-started/theming.md): A guide to styling components with our color system.

## Components

### Primitives

- [Accordion](https://cubby-ui.dev/docs/components/accordion.md): Vertically stacked set of interactive headings that reveal or hide associated content sections
- [Alert](https://cubby-ui.dev/docs/components/alert.md): Display important messages and notifications to users with various severity levels
- [Alert Dialog](https://cubby-ui.dev/docs/components/alert-dialog.md): Modal dialog that interrupts the user with important content and requires an action
- [Aspect Ratio](https://cubby-ui.dev/docs/components/aspect-ratio.md): Maintains a consistent width-to-height ratio for responsive content
- [Autocomplete](https://cubby-ui.dev/docs/components/autocomplete.md): Text input with intelligent suggestions and auto-completion functionality
- [Avatar](https://cubby-ui.dev/docs/components/avatar.md): Display user profile images with fallback support and status indicators
- [Badge](https://cubby-ui.dev/docs/components/badge.md): Small count and labeling component for displaying status or metadata
- [Base Drawer](https://cubby-ui.dev/docs/components/base-drawer.md): A swipe-gesture drawer built on Base UI's official Drawer component with snap points, nested stacking, and indent effects
- [Breadcrumbs](https://cubby-ui.dev/docs/components/breadcrumbs.md): Navigation component that shows the current location within a hierarchy
- [Button](https://cubby-ui.dev/docs/components/button.md): Clickable button with various styles and sizes
- [Card](https://cubby-ui.dev/docs/components/card.md): A versatile container component with header and content areas
- [Checkbox](https://cubby-ui.dev/docs/components/checkbox.md): Interactive control for binary choices with checked and unchecked states
- [Checkbox Group](https://cubby-ui.dev/docs/components/checkbox-group.md): Group multiple checkboxes with shared state management and layout options
- [Collapsible](https://cubby-ui.dev/docs/components/collapsible.md): Expandable and collapsible content area with smooth animations
- [Combobox](https://cubby-ui.dev/docs/components/combobox.md): Searchable dropdown for selecting from a list of options with keyboard navigation
- [Context Menu](https://cubby-ui.dev/docs/components/context-menu.md): Right-click menu that displays contextual actions for specific elements
- [Dialog](https://cubby-ui.dev/docs/components/dialog.md): Modal window that overlays content and requires user interaction
- [Dropdown Menu](https://cubby-ui.dev/docs/components/dropdown-menu.md): Toggleable menu for displaying lists of links or actions
- [Field](https://cubby-ui.dev/docs/components/field.md): Form field with automatic label association, validation, and error display
- [Fieldset](https://cubby-ui.dev/docs/components/fieldset.md): Groups related form fields with a shared legend
- [Form](https://cubby-ui.dev/docs/components/form.md): Form wrapper with consolidated error handling and validation
- [Input](https://cubby-ui.dev/docs/components/input.md): Text input field for user data entry with various states and styling
- [Kbd](https://cubby-ui.dev/docs/components/kbd.md): Display keyboard shortcuts and key combinations with proper styling
- [Label](https://cubby-ui.dev/docs/components/label.md): Text label for form inputs and other interactive elements
- [Menubar](https://cubby-ui.dev/docs/components/menubar.md): A row of menus, like an app's File, Edit, and View
- [Meter](https://cubby-ui.dev/docs/components/meter.md): Show a measurement in a known range, colored by how good the reading is
- [Navigation Menu](https://cubby-ui.dev/docs/components/navigation-menu.md): Accessible dropdown navigation menu with support for nested submenus
- [Number Field](https://cubby-ui.dev/docs/components/number-field.md): A numeric input you can type into, step, or drag
- [OTP Field](https://cubby-ui.dev/docs/components/otp-field.md): One-time password input with individual character slots, powered by Base UI
- [Popover](https://cubby-ui.dev/docs/components/popover.md): Floating content that appears relative to a trigger element
- [Preview Card](https://cubby-ui.dev/docs/components/preview-card.md): A card of extra context that opens when you rest on a link
- [Progress](https://cubby-ui.dev/docs/components/progress.md): Show how far a task has gotten, or that it's running when the end is unknown
- [Radio Group](https://cubby-ui.dev/docs/components/radio-group.md): Group of radio buttons for selecting a single option from multiple choices
- [Scroll Area](https://cubby-ui.dev/docs/components/scroll-area.md): Custom scrollable container with styled scrollbars
- [Select](https://cubby-ui.dev/docs/components/select.md): Dropdown selection control for choosing from a list of options
- [Separator](https://cubby-ui.dev/docs/components/separator.md): Visual divider for separating content sections
- [Skeleton](https://cubby-ui.dev/docs/components/skeleton.md): Placeholder loading state showing content structure before it loads
- [Slider](https://cubby-ui.dev/docs/components/slider.md): Interactive control for selecting a value or range from a continuous scale
- [Switch](https://cubby-ui.dev/docs/components/switch.md): Toggle control for binary on/off states with smooth animations
- [Table](https://cubby-ui.dev/docs/components/table.md): Organized display of data in rows and columns with customizable styling
- [Tabs](https://cubby-ui.dev/docs/components/tabs.md): Organize content into multiple panels with tab navigation
- [Textarea](https://cubby-ui.dev/docs/components/textarea.md): Multi-line text input for longer form content
- [Toast](https://cubby-ui.dev/docs/components/toast.md): Brief notification message that appears temporarily
- [Toggle](https://cubby-ui.dev/docs/components/toggle.md): Two-state button for toggling between on and off
- [Toggle Group](https://cubby-ui.dev/docs/components/toggle-group.md): A set of toggles on one shell, with one or several pressed
- [Toolbar](https://cubby-ui.dev/docs/components/toolbar.md): A row of actions and toggles with arrow-key navigation
- [Tooltip](https://cubby-ui.dev/docs/components/tooltip.md): Contextual information that appears on hover or focus

### Composables

- [Button Group](https://cubby-ui.dev/docs/components/button-group.md): A row of related actions on one shared surface (built on Button)
- [Calendar](https://cubby-ui.dev/docs/components/calendar.md): A month grid for picking one date, several dates, or a range
- [Carousel](https://cubby-ui.dev/docs/components/carousel.md): Slideshow component for cycling through content like images or cards
- [Circular Slider](https://cubby-ui.dev/docs/components/circular-slider.md): A radial input you drag around a ring or turn like a knob
- [Code Block](https://cubby-ui.dev/docs/components/code-block.md): A syntax-highlighted code block component with copy functionality and customizable layout
- [Command](https://cubby-ui.dev/docs/components/command.md): Fast, composable command menu for keyboard-first navigation and actions (built on Dialog)
- [Copy Button](https://cubby-ui.dev/docs/components/copy-button.md): A button component for copying text to clipboard with visual feedback (built on Button)
- [Data Table](https://cubby-ui.dev/docs/components/data-table.md): A powerful data table component built on TanStack Table for sorting, filtering, and row selection. (built on Table)
- [Date Picker](https://cubby-ui.dev/docs/components/date-picker.md): A date field that opens a calendar for picking one date (built on Calendar, Popover)
- [Date Range Picker](https://cubby-ui.dev/docs/components/date-range-picker.md): A date field that opens a calendar for picking a start and end date (built on Calendar, Popover)
- [Drawer](https://cubby-ui.dev/docs/components/drawer.md): Swipeable slide-in panel with snap points for mobile-friendly interactions (built on Dialog)
- [Fancy Button](https://cubby-ui.dev/docs/components/fancy-button.md): Stylized button with advanced visual effects and animations (built on Button)
- [Filters](https://cubby-ui.dev/docs/components/filters.md): A filter bar of sentence-like chips with per-field operators and a two-step add menu (built on Combobox, Dropdown Menu, Popover, Scroll Area, Transition Panel, Text Morph, Tooltip, Kbd)
- [Input Group](https://cubby-ui.dev/docs/components/input-group.md): An input or textarea with icons, text, or buttons inside its border (built on Input)
- [Marching Border](https://cubby-ui.dev/docs/components/marching-border.md): Animated dashed border overlay that conforms to its parent's corner radius
- [Pagination](https://cubby-ui.dev/docs/components/pagination.md): Links between the pages of a long list (built on Button)
- [QR Code](https://cubby-ui.dev/docs/components/qr-code.md): From-scratch, zero-dependency QR generator rendered as pure scalable SVG
- [Resizable](https://cubby-ui.dev/docs/components/resizable.md): Adjustable panels with draggable handles for flexible layouts
- [Sheet](https://cubby-ui.dev/docs/components/sheet.md): Sliding panel from screen edge for navigation, forms, or content (built on Dialog)
- [Text Morph](https://cubby-ui.dev/docs/components/text-morph.md): Animates a label from one value to the next, glyph by glyph
- [Timeline](https://cubby-ui.dev/docs/components/timeline.md): Display events in chronological order with visual connection
- [Transition Panel](https://cubby-ui.dev/docs/components/transition-panel.md): Direction-aware animated swap between named views with auto-animated height
- [Tree](https://cubby-ui.dev/docs/components/tree.md): A hierarchical tree view component with support for selection, expansion, checkboxes, and keyboard navigation.

## Hooks

- [useControllableState](https://cubby-ui.dev/docs/hooks/use-controllable-state.md): Merge controlled and uncontrolled state into one value and setter
- [useFuzzyFilter](https://cubby-ui.dev/docs/hooks/use-fuzzy-filter.md): Fuzzy matching hook for filtering and sorting items by relevance
- [useListVirtualizer](https://cubby-ui.dev/docs/hooks/use-list-virtualizer.md): Virtualization hook for rendering large lists efficiently

## Utilities

- [highlightText](https://cubby-ui.dev/docs/utils/highlight-text.md): Utility function to highlight matching text portions in search results
- [Scroll Fade](https://cubby-ui.dev/docs/utils/scroll-fade.md): A CSS utility that fades the edges of any scroll container as you scroll, with no component required.
- [Shimmer](https://cubby-ui.dev/docs/utils/shimmer.md): A CSS utility that sweeps an animated highlight across text for live status and streaming states, with no component required.

## Optional

- [Complete Documentation](https://cubby-ui.dev/llms-full.txt): Full documentation content for all pages combined