Components

Collapsible content sections with expand/collapse animation.

Contextual feedback messages for user actions. Info, success, warning, error variants.

Confirmation dialog requiring an explicit user decision before a destructive or irreversible action proceeds.

Circular dial input for selecting an angle value between 0 and 360 degrees.

User representation with image or fallback initials.

Status and category indicators. Compact labels for metadata.

Navigation breadcrumb trail showing page hierarchy.

Interactive button with primary, secondary, ghost, and destructive variants. Supports three sizes.

Surface container for grouping related content. Border or shadow elevation.

Scrollable item carousel with previous/next navigation controls and optional auto-play.

Form checkbox input. Single and indeterminate states.

Copy-to-clipboard trigger with transient success feedback shown after copying.

Single expandable section that reveals or hides its content on toggle.

Full-featured colour selection input with hue, saturation, and hex/RGB editing.

Visual swatch displaying a single colour with optional label and copy-on-click behaviour.

Searchable select combining a text input with a filterable dropdown list.

Keyboard-driven command search overlay for quick navigation and action execution.

Right-click triggered contextual menu anchored to the target element.

Feature-rich table with sorting, filtering, pagination, and row selection built in.

Calendar-based date selection input with optional range and time support.

Focus-trapped modal overlay for confirmations and forms.

Slide-out panel overlay from screen edge.

Button-triggered dropdown menu with keyboard navigation.

Inline editable text that toggles between display and input mode on click or focus.

Composable form field wrapper combining a label, input, and validation message.

Drag-and-drop or click-to-browse file upload with progress indication and file list.

Accessible form container with integrated validation state management and submission handling.

Grid-based layout wrapper for arranging form fields in single or multi-column configurations.

Rich preview card that appears on hover over a trigger element, with delay support.

Icon-only button with accessible label. Same variants as Button but square aspect ratio.

Interactive image crop tool with drag-to-reposition and resize handles for selecting a crop region.

Text input field. Supports text, password, number, email types with focus and error states.

Form label with optional required indicator.

Scrollable list of selectable options with single or multiple selection and keyboard navigation.

Standalone vertical menu list for sidebar or panel navigation with optional icons.

Horizontal application menubar with dropdown submenus, following ARIA menubar patterns.

Top-level site navigation with flyout panels and accessible keyboard interaction.

Numeric input with increment/decrement stepper buttons, min/max bounds, and step control.

One-time password input with individual digit slots and automatic focus advancement.

Page navigation controls for paginated data.

Password text field with a visibility toggle to reveal or obscure the entered value.

Multi-slot PIN entry field for numeric or alphanumeric codes with individual character boxes.

Click-triggered rich content overlay anchored to a trigger element.

Determinate progress indicator showing completion percentage.

Generates and displays a QR code image from a URL or text string.

Group of mutually exclusive radio button options with accessible keyboard navigation.

Star or icon rating input allowing users to select a score from a defined range.

Custom-styled scrollable container with thin overlay scrollbars on both axes.

Segmented control for selecting one option from a small set, visually similar to a button group.

Dropdown selection with native select element.

Visual divider. Horizontal and vertical orientations.

Collapsible application sidebar with navigation items, optional header, and footer slot.

Canvas-based freehand signature drawing pad with clear and export actions.

Placeholder loading shimmer for content that hasn't loaded yet.

Range selection input with label and value display.

Animated loading indicator for indeterminate wait states. Accessible with aria-label.

Resizable split-pane layout with a draggable divider between two panels.

Stepped progress indicator showing a sequence of numbered stages with completion states.

Semantic HTML table with styled header, body, and optional footer rows.

Horizontal tab navigation with content panels. Arrow key support.

Freeform multi-value tag entry field with add-on-enter and individual remove controls.

Multi-line text input. Shares input token styling.

Countdown or count-up timer display with start, pause, and reset controls.

Ephemeral feedback notification. Auto-dismissing with aria-live.

Binary on/off switch. Uses role='switch' for accessibility.

Set of related toggle buttons allowing single or multiple selection within the group.

Horizontal action bar grouping related controls with ARIA toolbar role and keyboard navigation.

Hover-triggered informational overlay. Shows on hover, hides on leave.

Step-by-step guided product tour with highlighted targets and popover explanations.

Hierarchical tree structure with expandable nodes, selection, and keyboard navigation.

Semantic text components covering headings, body, caption, and code styles from the type scale.