Components

Vertically stacked collapsible panels for FAQs, settings sections, and progressive disclosure.

A compact pill banner with a highlight badge and directional arrow for product launches and changelogs.

A photo or initials avatar in four sizes (20 / 24 / 32 / 36px) with neutral and blue initial tints - used across tables, breadcrumbs, menus, and the sidebar.

Compact status indicators and semantic labels with optional dot indicators for tables, cards, and navigation items.

Displays the current page hierarchy within a workspace so users can navigate back to parent views.

Interactive button primitive with six semantic variants, four sizes, and built-in loading spinner support.

Groups related action buttons or view toggles into a unified segmented container.

A stepped card switcher for cycling through metric highlights, onboarding steps, or media slides.

Accessible Radix UI checkbox control for forms, bulk table row selection, and filter lists.

Interactive pill tags with optional remove buttons for active filters, multi-select inputs, and categories.

Standardized dismiss button for modals, drawers, alerts, and toast notifications.

Hex color input paired with preset brand swatches for workspace customization and chart series coloring.

Searchable dropdown selector with instant filtering, checkmarks, and optional right-aligned metadata badges.

Keyboard-first Cmd+K search modal with categorized results and shortcut hints.

Right-click contextual action menu with keyboard shortcut labels and destructive item styling.

Inline month calendar grid for selecting single dates or scheduling events.

Popover date-range selector with common analytics reporting presets (Last 7 days, Last 30 days, YTD).

Horizontal structural hairline with an optional centered section label.

Slide-over side panel anchored to the left or right viewport edge for inspecting table rows or forms.

Accessible menu overlay triggered by a button for row actions, profile menus, and quick settings.

Drag-and-drop file upload zone with file size formatting and upload progress bars.

Compact square button designed specifically for toolbar icons, table actions, and navigation controls.

Single-line text input supporting leading/trailing icons and fixed text prefixes or suffixes.

Centered dialog window with backdrop blur, focus trapping, and accessible keyboard dismissal.

Page number navigation bar with previous and next buttons for multi-page tables and lists.

Floating card anchored to a trigger button for quick settings, filters, and inline forms.

Linear and circular progress bars for quota consumption, onboarding completion, and file uploads.

Mutually exclusive card selection group for billing plans, roles, and configuration options.

Native-feeling accessible dropdown menu built on Radix UI Select primitives.

Animated placeholder shapes that preview the layout of cards and tables while data is loading.

Range input control for selecting numeric values or percentages within a defined interval.

Two-state toggle switch built on Radix UI Switch for instant boolean preferences.

Clean, responsive tabular layout with subtle row hover states, avatars, and status badges.

Layered content views supporting Segmented, Underline, and Pill trigger styles.

Multi-line text input with optional automatic height expansion as the user types.

Non-disruptive notification card with semantic status icons (success, info, warning, error).

Compact floating label that appears on hover or keyboard focus to explain icon controls.