Components

Primary interactive element for triggering actions. 5 types (Primary, Secondary, Tertiary, Danger, Warning) across 3 sizes and 6 states.

Compact button containing only an icon. 4 types (Primary, Secondary, Tertiary, Danger) across 3 sizes and 6 states.

Inline and standalone text links with consistent hover and focus states.

Binary switch for enabling/disabling settings with immediate effect.

Selection control for choosing one or more options from a set.

Mutually exclusive selection from a group of options.

Combined button with a primary action and a dropdown for secondary actions.

Grouped set of related buttons with shared border radius and spacing.

One-click copy-to-clipboard button with confirmation feedback.

Mutually exclusive option selector displayed as connected segments.

Tabbed interface for switching between views within the same context.

Range input for selecting a value within a continuous or discrete range.

Action menu triggered from a button with grouped and nested options.

Right-click menu providing contextual actions for targeted elements.

Compact menu for secondary actions, triggered by a "more" icon.

Single-line text field for short-form user input with label, placeholder, and validation.

Multi-line text field for longer-form content entry.

Dropdown selector for choosing a single option from a predefined list.

Specialized text field with search icon, clear button, and optional suggestions.

Wrapper providing consistent label, help text, and error messaging for any input.

Secure text field with show/hide toggle and strength indicator.

Segmented input field for one-time password and verification codes.

Numeric input with increment/decrement controls and range validation.

Specialized input for selecting time values with format control.

Calendar-based date selection with range and preset support.

Combined text input and dropdown with typeahead filtering.

Selection control for choosing multiple options with tag display.

Full panel selection interface for complex option sets with search and grouping.

Text input with @mention support for referencing users or entities.

Prominent message banner for important information, warnings, or errors.

Temporary notification that appears and auto-dismisses at screen edge.

Full-width message bar anchored to top of page for system-level announcements.

Contextual message placed inline near the relevant content area.

Animated loading indicator for indeterminate wait states.

Subtle contextual callout for supplementary information within content.

Aggregated list of form errors with links to each invalid field.

Animated dots indicating content loading or processing.

Horizontal bar showing determinate progress toward completion.

Circular progress indicator for compact determinate feedback.

Small overlay providing supplementary information on hover or focus.

Panel displaying a list of notifications with read/unread states and grouping.

Top-level navigation bar with logo, links, and actions.

Vertical navigation panel with collapsible sections and nested items.

Hierarchical path showing current location within site structure.

Page navigation controls for browsing through paged content.

Mobile-first bottom navigation bar for primary app sections.

Multi-step progress indicator showing current position in a workflow.

Keyboard-driven command palette for quick navigation and actions.

Horizontal bar of filter controls for narrowing displayed content.

Reference panel listing available keyboard shortcuts in the interface.

Accessible skip navigation link for keyboard users to bypass repeated content.

Floating button that scrolls the page back to the top.

Small label for status, counts, or categorization.

Interactive label for categorizing, filtering, or selecting items.

Numeric badge for displaying counts and quantities.

Colored dot or label showing current state of an entity.

User or entity representation as image, initials, or icon.

Overlapping group of avatars showing multiple users.

Two avatars displayed together to show a relationship or collaboration.

Typographic heading component with consistent sizing and optional description.

Single row component for building custom table layouts.

Full-featured table with sorting, filtering, selection, and pagination.

Placeholder shapes that indicate content loading state.

Minimal dot indicator showing unread or new items.

Visual color sample with label and value display.

Card displaying a single metric with label, value, and optional trend.

Key performance indicator card with target tracking and sparkline.

Flexible card for displaying structured data with label-value pairs.

Visual score indicator for accessibility or compliance ratings.

Hierarchical collapsible tree for nested data structures.

Compact inline chart for showing trends within small spaces.

Empty state placeholder for chart containers during loading or no-data scenarios.

Standard line chart for time-series and continuous data visualization.

Vertical bar chart for comparing discrete categories.

Horizontal bar chart for comparisons with long category labels.

Circular chart for showing proportional data with center metric.

Filled line chart emphasizing volume and cumulative values.

Bar chart with stacked segments for part-to-whole comparisons.

Funnel visualization for showing conversion and drop-off stages.

Calendar grid with color-coded cells showing activity density.

Dialog overlay for focused tasks requiring user attention.

Sliding panel from screen edge for secondary content and forms.

Floating content panel anchored to a trigger element.

Collapsible section for progressive disclosure of grouped content.

Guided tour tooltip highlighting features with step progression.

Modal specifically for confirming destructive or important actions.

Bottom-anchored action menu for mobile-first interactions.

Avatar-triggered dropdown with account actions and settings.

Floating panel tracking new user setup steps with progress.

Full-screen overlay for viewing images and media with zoom and navigation.

Versatile container for grouping related content and actions.

Placeholder view for zero-data states with illustration and call-to-action.

Styled quotation block for highlighting cited text.

Syntax-highlighted code display with copy and line numbers.

Monospace text span for inline code references.

Multi-tab code snippet container for showing multiple language examples.

Visual key cap display for documenting keyboard shortcuts.

Styled paragraph with consistent typography and spacing.

Image or icon alongside text content in a horizontal layout.

Key-value pair list for displaying structured information.

Side-by-side or inline diff display for showing text changes.

Structured entry for versioned changes with type badges and descriptions.

Card displaying file information with type icon, size, and actions.

Marketing-style card highlighting a product feature with icon and description.

Quote card with avatar, attribution, and optional rating.

Visual separator for dividing content sections or list items.

Flexbox-based layout primitive for consistent vertical and horizontal spacing.

Responsive column grid for page layout with configurable gaps and spans.

Full page layout shell with header, sidebar, main content, and footer slots.

Two-panel layout with adjustable split ratio for master-detail views.

Structured list row with leading, content, and trailing slots.

Vertical timeline for displaying sequential events or history.

Drag-and-drop reorderable list with handle indicators.

Drag-and-drop file upload area with progress and validation.

Horizontal row of key metrics for dashboard summaries.

Settings row with label, description, and toggle control.

Chronological feed of user or system activity with icons and timestamps.

Plan card showing price, features, and call-to-action for subscription tiers.

Label indicating subscription tier (Free, Pro, Enterprise).

Feature comparison table across subscription tiers.

Meter showing resource consumption against plan limits.

Highlight badge for promoting specific features or capabilities.

Promotional banner with headline, description, and action button.

Card showing a third-party integration with logo, status, and connect action.

Threaded comment display with replies, avatars, and actions.

Site footer with column links, branding, and legal information.

GDPR/privacy consent banner with accept, reject, and preferences.

Dropdown for switching interface language or locale.

Control for toggling between light, dark, and system theme modes.

Bar displaying customer logos, ratings, or trust indicators.

Dismissible top bar for product announcements and promotions.