Components

Semantic heading levels (H1-H5) with consistent sizing.

Iconify icon wrapper with size and color variants.

Semantic text component with intent-based styling.

Clickable button for actions and triggers.

Styled anchor element for navigation.

Show the navigation path so users can move up the hierarchy.

Single toggle button with pressed state.

Set of related toggle buttons with multiple selection.

Search input with optional icon and filtering.

File selection trigger with custom styling.

Single-line text field for general data entry.

Input for numeric values with increment and decrement controls.

Enter one-time passcodes with grouped inputs.

Form input specialized for selecting dates.

Form input specialized for selecting times of day.

Dropdown input for choosing one option.

Let users select one or multiple items from a list.

Select a single option from a set of choices.

Text input with a filtered list of options.

Pick multiple options, often displayed as tags or checkmarks.

Binary on/off toggle with a thumb.

Input that lets users add and remove tags.

Adjust a value by dragging a thumb along a track.

Switch between related content panels.

Monthly calendar view for browsing and selecting dates.

Calendar view for selecting a continuous date range.

Pick a single date from a popover calendar.

Pick a start and end date from a popover calendar.

Structured rows and columns with sorting or filtering.

Contextual feedback messages for success, info, warning, or error.

Display a user image, initials, or fallback icon with sizing options.

Small label for counts or status indicators.

Highlight important information with icon, title, and copy.

Content container with header, body, and footer structure.

Linear indicator of task or loading progress.

Loading indicators and spinners.

Circular indicator of task or loading progress.

Placeholder skeletons that show layout while loading.

Container with flexible aspect ratios for images and videos.

Display keyboard shortcuts and key combos.

Horizontal or vertical line to divide content.

Simple table using native HTML for responsive data display.

Display a collection of tags or pills.

Build drag and drop interfaces easily and accessibly.

Accessible modal dialog for confirmations or forms.

Blocking overlay dialog for focused tasks.

Sliding drawer panel from screen edge.

Contextual floating panel anchored to a trigger.

Toggle visibility of a single collapsible content section.

Accordion of collapsible sections with coordinated open state.

Dropdown list of actions triggered by a button.

Vertical navigation rail for sections or tools.

Top navigation bar for primary links and actions.

Base chart wrapper for rendering data visualizations.

Show trends over time with lines filled to the axis.

Compare categories using vertical or horizontal bars.

Plot data points connected by lines to show trends.

Show part-to-whole relationships with pie slices.

Step or milestone tracker showing progress through stages.