Components

Clickable button with 6 variants, 5 sizes, loading and disabled states.

Text input with size variants, validation states, and multiple input types.

Multi-line text input with size variants, placeholder, and disabled states.

Dropdown select with compound component pattern and keyboard navigation.

Checkbox with checked, unchecked, and indeterminate states.

Toggle switch with three sizes and disabled state.

One-time password input with auto-advance and paste support.

Status badge with 7 variants including semantic success, warning, and destructive.

Placeholder loading elements with rectangle, circle, and text shapes.

Circular avatar with image support and fallback initials in 5 sizes.

Month-view calendar with date selection and navigation.

Hover-triggered tooltip with configurable delay and placement.

Popup content panel with trigger, controlled/uncontrolled modes.

Toggle content visibility with compound trigger and content.

Modal dialog with compound components: trigger, overlay, content, header, footer.

Dropdown menu with items, separators, labels, and keyboard navigation.

Searchable command palette with groups and keyboard navigation.

Notification toasts with auto-dismiss, hover pause, and 4 variants.

Tabbed interface with keyboard navigation and ARIA support.

Vertically stacked headings that each reveal a section of content.

Password field with a built-in reveal/hide toggle.

Thin rule that visually divides content, horizontal or vertical.

Panel that slides in from any screen edge via a portal with focus management.

IDE-style horizontal file/tab navigation bar.

Styled native select with platform pickers and form semantics.

Search input with debounced search and suggestions dropdown.

Dropdown language selector with single and multi-select.

Version dropdown with "Latest" badge indicator.

Feedback form dialog with trigger button and submit callback.

Inline view/edit toggle for editing text content in place.

Searchable select with text filtering and controlled/uncontrolled modes.

Contenteditable input that detects trigger characters like @ and /.

Accessible form primitives on react-hook-form wiring labels, errors, and ARIA ids.

Flex container joining inputs with addons, icons, and buttons.

Paired country and language selects with built-in option lists.

Styled card surface for building checkout and payment forms.

Single-select group of radio options with keyboard and ARIA support.

Pill-shaped single-select for switching between a small set of options.

Control for selecting a numeric value from a continuous range.

Branded social sign-in buttons for Google, GitHub, Microsoft, and Apple.

Time/date slot selection grid.

Visual rating input with customizable range.

Multi-step form wizard with progress indicators.

To-do list with interactive check states.

Container with header, content, and footer compound components.

Sticky header with navigation links, logo, and action slots.

Vertical navigation panel with sections, items, and collapsed mode.

Breadcrumb trail auto-generated from pathname or manual items.

Site footer with link columns, copyright, and social links.

Mobile tab bar fixed to the bottom of the viewport.

Responsive app layout with collapsible sidebar and sticky header.

Layout container arranging cards into responsive columns.

Compound navigation with hamburger trigger and collapsible link panel.

Lightweight, unstyled wrapper for building page navigation.

Flex panes separated by draggable dividers.

Accessible skip link that jumps straight to the main content.

Composable step indicator for multi-stage flows like checkout and onboarding.

Navigable outline auto-generated from page headings with active highlight.

Section header with title, subtitle, and action buttons.

App page heading with kicker, title, description and trailing actions.

Sequential guide list with status indicators.

Descriptive card highlighting target audiences.

Horizontal bottom bar displaying status information.

Sortable, filterable data table with column definitions.

Vertical list whose rows are each one keyboard-reachable action.

Composable semantic table primitives for cells that hold components.

Stats grid, progress bar, and badge display components.

Composable SVG chart primitives for data visualization.

Responsive multi-series line chart on a shared scale with tooltip and legend.

Stepped conversion funnel with share, continue-rate and drop-off.

Grid display for key metrics, growth rates, and trends.

Progress bar indicating skill or completeness levels.

Visual representation of unit test suite executions.

Circular dial gauge for displaying percentage values.

Vertical sequence flow displaying chronological events.

Video player with custom controls, progress, and fullscreen.

Renders markdown content as styled HTML with prose typography.

Code editor with syntax highlighting and editing support.

Slide presentation viewer with navigation and progress.

Word carousel and typewriter text animation components.

Bordered message block for contextual information, tips, and warnings.

Collapsible expand/collapse panel set for FAQs and disclosure sections.

Styled container for source code with optional header and content blocks.

Monaco-powered side-by-side and inline diff viewer with file sidebar.

Hierarchical view of files and folders (early-stage primitive).

Anchor wrapping an entire card so the whole surface is clickable.

Auto-scrolling banner for brand logos or notices.

Call participant video tile with status overlays.

Grid container for multiple video tiles.

Actions bar for managing audio, video, and screenshare.

Real-time speech-to-text subtitle overlay.

Full conversation transcription list with search.

Voice chat channel grid with speaker focus states.

Floating emoji reaction overlays.

Device setup and test screen before joining calls.

Floating speaker indicator with intensity-driven pulse and mute control.

Canvas audio visualization for live analysers, samples, or intensity streams.

Chat message composer with auto-grow and inline @mention and /command triggers.

Full chat UI with conversations and reply threads; backend-agnostic.

Conversation thread with avatars, relative timestamps, and reactions.

Date picker with calendar dropdown and time selection.

Emoji picker with categories, search, and click-to-select.

Drag and drop file upload zone with file list and validation.

Overlapping avatar stack with overflow badge.

Colored status dots: online, away, busy, offline.

Emoji reaction pills with counts and toggle state.

System status dots with labels and optional pulse animation.

Keyboard shortcut badge display and key listener.

Rich text editor (coming soon).

Drag-and-drop sortable list of items.

Board with columns for task status management.

Mock interactive command line terminal.

Zoomable, pannable layout for diagramming.

Interactive canvas sticky note with customizable colors.

Interactive node-based flowchart editor.

Interactive visualization of relational graphs.

Real-time collaborative cursor indicator overlays.

Overview map overlay for infinite canvas navigation.

Headless Faro-backed telemetry: createTelemetry, child loggers, async spans, React provider/hooks.

PWA install banner with install and dismiss actions.

Watermark overlay and copy/right-click protection.

iPhone, iPad, and device mockup frames for screenshots.

GDPR-style consent banner with per-category opt-in and versioned persistence.

Centered column for empty and zero-result states with inline confirmations.

Feature lists and tier details for subscriptions.

Interactive network node displaying brand metrics.

Mock browser shell for displaying web previews.