Components
Every component in the Hex UI registry, grouped by category. Click any card to see usage, props, and AI-ready metadata.
Primitives
- Aspect RatioConstrain children to a specific width-to-height ratio (e.g. 16/9 for video, 1/1 for square).
- AvatarA user profile image with a fallback (usually initials) rendered when the image is missing or fails to load. Built on Radix UI Avatar — AvatarFallback accepts a delayMs prop to avoid flashing during fast loads.
- BadgeA small status indicator with multiple style variants. Used for tags, statuses, and categorization.
- ButtonA versatile button component with multiple variants, sizes, and states. Supports icons, loading state, and composition via asChild.
- CheckboxAn accessible checkbox with checked, unchecked, and indeterminate states. Built on Radix UI.
- InputA styled text input with smooth focus transitions, shadow effects, and full HTML input compatibility.
- LabelAn accessible label component built on Radix UI Label primitive. Associates with form controls via htmlFor.
- ProgressA horizontal progress bar showing completion from 0 to 100%. Built on Radix UI Progress.
- Radio GroupA set of mutually exclusive radio options. Built on Radix UI RadioGroup with roving focus and arrow-key navigation.
- Scroll AreaA scrollable region with custom-styled scrollbars that match the design system. Content must be explicitly sized.
- SelectAn accessible dropdown select for choosing one option from a list. Built on Radix UI Select with full keyboard navigation, typeahead, and RTL support.
- SeparatorA visual divider between content sections with horizontal or vertical orientation.
- SkeletonA pulsing placeholder shown while content is loading. Pair with explicit dimensions.
- SliderA range input with draggable thumbs. Supports single value, ranges (two thumbs), custom steps, and full keyboard control.
- SwitchAn accessible toggle switch for instant on/off settings. Built on Radix UI.
- TextareaA styled multi-line text input with smooth focus transitions and shadow effects.
- ToggleA two-state button that stays pressed when toggled on. Used for formatting toolbars (bold/italic) or option toggles.
- Toggle GroupA set of toggles where one or multiple can be pressed. Inherits Toggle's variant/size via context. Useful for alignment/formatting toolbars.
Components
- AccordionA vertically stacked set of collapsible content sections. Built on Radix UI Accordion.
- AlertAn inline notification banner for important messages. Supports default and destructive variants with optional leading icon.
- Alert DialogA modal dialog for destructive confirmations. The user must explicitly accept or cancel — there is no close button. Built on Radix UI AlertDialog.
- BreadcrumbA path trail showing the user's location within a hierarchy, with links back to ancestors and a non-interactive current page.
- CalendarDate grid built on react-day-picker v9. Supports single, multiple, and range selection modes. Keyboard navigable and localizable.
- CardA container component with header, content, and footer sections. Includes subtle shadow and hover effects.
- CollapsibleA single section that can be expanded or collapsed. For multiple independent sections use Accordion with type='multiple'.
- ComboboxSearchable single-select input. Composes Popover + Command (cmdk) + a styled trigger. Pass a list of { value, label } options.
- CommandComposable command menu built on cmdk — search input + filtered list with keyboard navigation. Use as an inline palette or, wrapped in CommandDialog, as a ⌘K-style launcher.
- Context MenuRight-click (or long-press on touch) menu anchored to the trigger region. Same item vocabulary as DropdownMenu.
- Data TableGeneric data-driven table built on TanStack Table + Hex UI Table primitives. Pass columns + data; add sorting/filtering/pagination via TanStack hooks.
- Date PickerDate input composed from Popover + Calendar. Shows the selected date formatted via date-fns, opens a calendar grid on click.
- DialogA modal dialog that interrupts the user with important content. Built on Radix UI with focus trap, escape handling, and scroll lock.
- DrawerBottom-sheet drawer built on vaul. Mobile-native feel: drag-to-dismiss, snap points, body-scale-on-open. Use for quick mobile actions, filters, pickers.
- Dropdown MenuA menu of actions displayed to the user when a trigger is activated. Supports items, checkboxes, radio groups, sub-menus, and keyboard shortcuts.
- FormA form primitive built on react-hook-form + zod. Provides Form/FormField/FormItem/FormLabel/FormControl/FormDescription/FormMessage with automatic aria wiring and error display.
- Hover CardRich floating content revealed on hover or focus. Use when Tooltip is too small and Popover requires a click.
- Input OTPOne-time-password / verification-code entry built on the input-otp library. Renders N character slots with active/caret state and auto-advance on type.
- MenubarDesktop-app style menu bar (File / Edit / View). Horizontal menu strip with nested dropdowns.
- Navigation MenuWebsite-style mega-menu with hover-triggered content panels. Used for marketing/site navigation headers.
- PaginationComposable pagination controls (Pagination / PaginationContent / PaginationItem / PaginationLink / PaginationPrevious / PaginationNext / PaginationEllipsis). Link-based by default — pair with client-side navigation or server params.
- PopoverFloating content anchored to a trigger element. Non-modal by default — clicks outside dismiss it. Use for inline forms, info, or quick actions.
- ResizableDraggable split panes built on react-resizable-panels v4. Horizontal or vertical, with keyboard-accessible handles and persistable layout.
- SheetSide drawer built on Radix Dialog with a directional slide animation. Use for navigation, filters, quick edit, or any off-canvas panel.
- SidebarApp-shell sidebar with collapsible width, context-driven open state, and composable Header/Content/Footer/Item parts. Provider-based so any descendant can toggle it.
- Sonner (Toast)Ephemeral toast notifications via Sonner. Render <Toaster /> once at app root, then call toast() anywhere.
- TableStyled HTML table primitives (Table / TableHeader / TableBody / TableRow / TableHead / TableCell / TableCaption / TableFooter). Low-level building blocks — use DataTable for sorting/filtering/pagination.
- TabsA tabbed interface with accessible keyboard navigation. Built on Radix UI Tabs.
- TooltipA small floating label that reveals on hover or focus. Wrap your app in TooltipProvider, then use Tooltip/TooltipTrigger/TooltipContent per tooltip.