UI Components
A collection of accessible, reusable, and composable components for building user interfaces.
Basic
Avatar component with 5 sizes (xs/sm/default/lg/xl), image/fallback/icon types, AvatarBadge for status dots or icons, and AvatarGroup with AvatarGroupCount for displaying multiple avatars.
Badge component with 7 variants (default, secondary, destructive, outline, ghost, link, verified), rounded-full styling, and overflow-clip. Includes BadgeNumber sub-component for circular number badges.
Interactive button component with 6 variants (default, outline, secondary, ghost, destructive, link), 8 sizes (xs, sm, default, lg, icon, icon-xs, icon-sm, icon-lg), loading state with Spinner, and support for icons.
Card container with 2 sizes (default, sm), border + shadow-xs, rounded-xl (14px), and segmented footer with border-t + bg-muted/50. Composed of CardHeader, CardTitle, CardDescription, CardContent, and CardFooter.
Form input component with support for text, password, file, and other HTML input types. Features variants including default, filled, disabled, and invalid states.
Toggle button component with default and outline variants, default/sm/lg sizes, and pressed, hover, focus, and disabled state coverage.
Multi-line text input with default, filled, focus, disabled, and invalid states. Matches Input token styling with flexible height for longer text.
Form
Date display and selection calendar component. Supports single date, date range, and multiple date selection modes.
Checkbox control (size-4, rounded, CheckIcon) plus CheckboxField compound component with label, description, type variants (default/box), control placement (start/end), and invalid state support.
Combined input and dropdown for searching and selecting from a list. Supports async search, custom filtering, empty states, and grouped options.
Date selection component combining a popover trigger with a calendar. Supports single dates, date ranges, and preset ranges.
Form field composition primitives including Field, FieldSet, FieldLegend, FieldGroup, FieldSeparator, FieldError, and FieldTitle. Supports vertical, horizontal, and responsive orientations with invalid and disabled styling hooks.
File upload component with drag-and-drop support, file type filtering, and visual feedback for selected files.
Groups inputs with addons and buttons. Supports inline-start and inline-end addons with icons, text, or buttons. Used for search fields, password inputs with visibility toggle, and URL inputs with protocol prefix.
One-time password input component with configurable length, separators, and slot groups. Commonly used for 2FA verification codes.
Single-select control group with radio items. Features multiple orientations, sizes, and states including disabled.
Dropdown selection component with trigger, value display, and options list. Supports groups, labels, and disabled options.
Layout
Collapsible content panels with 2 variants (basic, border). Features py-3 trigger padding, pb-4 content padding, and CaretDown/Up icons. Border variant adds outer border and rounded styling.
Groups related buttons together with border-collapse and rounded outer edges. Supports horizontal and vertical orientations. Includes ButtonGroupSeparator and ButtonGroupText sub-components.
Embla-based carousel with Figma-matched arrow button styles, spacing, and vertical/horizontal layouts. Supports previous/next navigation and indicator dots.
Recharts-based chart primitives with theme-aware colors, tooltip content, legend content, and Figma-aligned chart token styling.
Headless collapsible primitive for expand/collapse functionality. No visual styling - compose with Button ghost+icon for trigger and CaretUpDown icon.
Resizable panel groups for draggable layout adjustments. Supports horizontal and vertical resizing with persistent layout.
Custom scrollable container with styled scrollbars. Supports both vertical and horizontal scrolling with automatic scrollbar visibility.
Composable table primitives for data display with support for header variants/states and interactive cell states. Includes Table, TableHeader, TableBody, TableRow, TableHead, TableCell, TableFooter, and TableCaption.
Tabbed interface for organizing content into switchable panels. Includes TabsList, TabsTrigger, and TabsContent.
Navigation
Navigation breadcrumb with BreadcrumbList size prop, CaretRight separator, DotsThree ellipsis for collapsed items, and dropdown support for overflow scenarios.
Command palette component for keyboard-driven navigation and actions. Supports groups, items, and empty states.
Toggleable menu for displaying actions or options. Features items with icons, shortcuts, submenus, checkboxes, and radio groups.
Application-style menu bar with persistent triggers. Features multiple menus with items, shortcuts, submenus, checkboxes, and radio groups.
Navigation component for dividing content into pages. Includes previous/next buttons and page number items.
Overlays
Interruptive modal dialog for confirming destructive actions. Focus is trapped and page is inert until user responds.
Modal dialog window overlaying the page content. Composed of DialogTrigger, DialogContent, DialogHeader, DialogTitle, DialogDescription, and DialogFooter.
Dialog-based side sheet with configurable placement (left, right, top, bottom), optional close button, and composition helpers including SheetHeader, SheetFooter, SheetTitle, and SheetDescription.
Floating content panel anchored to a trigger element. Used for dropdown menus, tooltips, and additional information.
Toast notification system using Toaster + toast helpers, with support for title/description layouts, action and cancel buttons, and status icons (success, info, warning, error, loading).
Radix UI tooltip primitive for contextual helper text, with Figma-aligned primary surface styling, visible arrow, side placement, and optional keyboard shortcut content.