UI Components
A collection of accessible, reusable, and composable components for building user interfaces.
Basic
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.
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.
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.
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.
Form input component with support for text, password, file, and other HTML input types. Features variants including default, filled, disabled, and invalid states.
Form
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.
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.
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.
Combined input and dropdown for searching and selecting from a list. Supports async search, custom filtering, empty states, and grouped options.
File upload component with drag-and-drop support, file type filtering, and visual feedback for selected files.
Date selection component combining a popover trigger with a calendar. Supports single dates, date ranges, and preset ranges.
Date display and selection calendar component. Supports single date, date range, and multiple date selection modes.
Layout
Groups related buttons together with border-collapse and rounded outer edges. Supports horizontal and vertical orientations. Includes ButtonGroupSeparator and ButtonGroupText sub-components.
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.
Headless collapsible primitive for expand/collapse functionality. No visual styling - compose with Button ghost+icon for trigger and CaretUpDown icon.
Tabbed interface for organizing content into switchable panels. Includes TabsList, TabsTrigger, and TabsContent.
Custom scrollable container with styled scrollbars. Supports both vertical and horizontal scrolling with automatic scrollbar visibility.
Resizable panel groups for draggable layout adjustments. Supports horizontal and vertical resizing with persistent layout.
Embla-based carousel with Figma-matched arrow button styles, spacing, and vertical/horizontal layouts. Supports previous/next navigation and indicator dots.
Navigation
Navigation breadcrumb with BreadcrumbList size prop, CaretRight separator, DotsThree ellipsis for collapsed items, and dropdown support for overflow scenarios.
Navigation component for dividing content into pages. Includes previous/next buttons and page number items.
Toggleable menu for displaying actions or options. Features items with icons, shortcuts, submenus, checkboxes, and radio groups.
Command palette component for keyboard-driven navigation and actions. Supports groups, items, and empty states.
Overlays
Modal dialog window overlaying the page content. Composed of DialogTrigger, DialogContent, DialogHeader, DialogTitle, DialogDescription, and DialogFooter.
Displays a callout for user attention with multiple variants (default, destructive). Includes AlertTitle and AlertDescription for structured content.
Interruptive modal dialog for confirming destructive actions. Focus is trapped and page is inert until user responds.
Floating content panel anchored to a trigger element. Used for dropdown menus, tooltips, and additional information.