Components

Displays an action or link with stable loading, success, and error states.

Text input with labels, helper text, leading and trailing adornments, visual variants, and native validation.

A select field that uses your browser and operating system's option picker.

Multi-line text input with labels, descriptions, and automatic resizing.

A binary option presented as a labeled box.

A searchable dropdown that filters options as you type.

File uploads with progress, cancellation, retry, and animated completion.

Numeric input with native validation and composable step controls.

One accessible input, presented as individual code cells.

A group of mutually exclusive options.

Single or multiple selection from a short, known option list.

Single-value and two-handle sliders with keyboard and RTL support.

On/off toggle for system-level settings.

Enter and validate removable tags with keyboard, paste, and form support.

A two-state button that is pressed or unpressed.

A row of toggles with shared selection state.

Composable labels, descriptions, and validation for native and custom form controls.

Native form grouping with legends, descriptions, and disabled semantics.

A native form with submit, status, and error-summary parts that keep SvelteKit actions and remote forms intact.

A styled native label that names a form control.

A composable calendar for choosing a single date.

An editable date field with a calendar popup.

Editable start and end dates with a shared calendar popup.

Choose a start and end date with keyboard navigation and a continuous range highlight.

A trail of links showing the user's position in a hierarchy.

A compact pager that truncates with an ellipsis. Always shows the first and last page so users know how big the data set is.

Switch between mutually-exclusive views with horizontal or vertical tabs and a sliding indicator.

A dialog that interrupts the user to confirm a consequential action.

A right-click menu of actions, sharing the dropdown menu's item set.

A dialog for focused tasks, forms, and details.

A modal panel that slides in from an edge of the screen and can be swiped away.

A menu of actions anchored to a button, for user menus, row actions, and overflow buttons.

A preview card that opens on hover or keyboard focus. Use it for user mentions, link previews, or definitions.

A floating surface anchored to a trigger element.

A modal side panel for navigation, filters, and forms. It slides in from the left or right edge.

Brief explanatory text on hover or focus.

Stacked collapsible sections with single- and multi-open modes.

Surface container for grouping related content.

A single panel that expands and collapses.

Connect related controls with separators and optional labels.

A scroll container with themed scrollbars and optional overflow cues.

Semantic or decorative divider in either orientation.

Display rows and columns with native table semantics.

Notice strips for inline status, confirmation, and warnings.

An image with initials while it loads or when it fails.

Compact labels for status, counts, and tags.

Explain why content is missing and give people a useful next step.

Inline keyboard-shortcut badge.

Show how far along a task is. Determinate with value or indeterminate for unknown duration.

Loading content without flicker or layout shift.

An animated loading indicator for indeterminate work.

Semantic document headings, text, inline code, and interface typography primitives.