Components

Triggers an action with five visual treatments, optional icons, loading state, and fluid layout.

Copies a value to the clipboard from an icon-only or labelled Button, shows a check while copied, and announces it.

Renders an anchor with Stardwst link styling and an opt-in external target.

Groups content into an optionally linked card with image, header, metadata, footer, and layout choices.

Sizes a child within a Columns layout using a fractional span.

Arranges responsive columns with a configurable row gap and cross-axis alignment.

Constrains content width and inline padding, with alignment and fluid options.

Separates related content horizontally or vertically, with an optional label, heading, or control placed at the start, center, or end.

Places items in a fixed or responsive grid with configurable columns, minimum width, and gap.

Builds a page introduction from eyebrow, headline, subheading, body, image, and background slots.

Places items in a row with spacing, alignment, and optional wrapping.

Tops a page with a breadcrumb slot, the page's heading and description, and actions that wrap under the title in a narrow container.

Places items in a vertical sequence with a configurable gap and horizontal alignment.

Shows where a page sits in a hierarchy with a trail of links up to the current page, and optional router links.

Provides a composable action menu with regular or context triggers, checkable items, and submenus.

Builds site navigation with links, triggers, and optional contextual panels.

Moves through pages of results with numbered or compact controls, named landmarks, and optional links per page.

Shows progress through an ordered process with complete, current, and upcoming steps, statuses, and a column on narrow screens.

Switches between related panels on one page with line or tonal tabs, horizontal or vertical, and optional lazy panels.

Presents hierarchical items with selection, expansion, custom node content, and optional lazy children.

Lets people select a value, with controlled, indeterminate, read-only, invalid, and filled states.

Chooses any color as a hex value, typed or picked from an area, hue and opacity sliders, swatches, or the screen.

Suggests options as people type, filtering without regard to case or accents, with one or several values and a form value.

Composes labels, controls, required markers, helper copy, and errors around a form field.

A single-line text control with optional start or end content and a loading state.

Enters a password with a button that shows or hides it, keeping the value, caret, and autofill purpose.

Enters a short code one character per cell, with paste, one-time code autofill, and one form value.

Presents a named set of options for one selection in a vertical or horizontal layout.

Rates something on a short scale of stars, with half stars, keyboard steps, read-only display, and a form value.

Chooses one or more options from a trigger and positioned list, with optional portal rendering.

Selects one or more numeric values with labelled thumbs, descriptions, errors, and custom formatting.

Turns a single setting on or off with controlled and uncontrolled state.

Turns typed or pasted values into removable tags, with limits, validation, and one form value per tag.

A multi-line text control with an optional footer area.

Presses one or several joined options to switch a view, range, or filter, with icon-only options and fluid widths.

Lists events on a record, such as comments and uploads, with who did it, when, and an avatar or icon on a connecting line.

Shows a message in the page with an info, success, warning, or danger status, a title, actions, and an optional dismiss button.

Shows a person or team with a photo, initials, or an icon in a fixed box that never shifts as the photo loads.

Labels status or category in a short static span, with tonal, outlined, and filled treatments, an info, success, warning, or danger status, a dot, and icons.

Pairs a short badge with a message in one capsule, such as an announcement, as static text or one link with an optional status.

Shows code to read or copy, with a title, its language, a copy button, keyboard-scrollable long lines or wrapping, and a highlighting hook.

Says what is empty and what to do next, with a decorative icon, a heading at the level the page needs, and actions.

Frames a decorative icon in tonal, outlined, filled, or elevated treatments, with an optional status tone, to lead into a message or card.

Shows one number with its title, a change with an optional trend arrow and status, and a description, to compose in a Card.

Shows how much of a task is done as a bar or a ring, with formatted value text and an indeterminate state.

Encodes a URL or short value as a named, server-rendered QR image, always black on white with a quiet zone, with an optional centre logo.

Shows that content is loading with a turning ring and a status label for assistive technology.

Styles native tables with header, hover, dense, sticky-header, and numeric columns, and a focusable scroll region.

Shows a value someone chose or applied, such as a filter or topic, with an optional named remove button.

Finds and runs a command by typing its name in a modal search, with groups, icons, shortcut hints, and keyboard navigation.

Shows a modal or non-modal dialog with a trigger, optional portal, and configurable closing and focus behavior.

Shows short notifications from an app-wide store that leave by themselves, with a status, one action, and a dismiss button.

Shows a short text hint for a control on hover or keyboard focus, such as the name of an icon-only button.

Closes a page with a full-width band that holds a heading and one or two actions, side by side or centered.

Answers common questions on native details elements that open with Enter or Space, one at a time or all at once.

Searches and filters a list with an Input, Selects, and view controls, and shows active filters as removable Tags that keep focus in place.

Suggests one next step inside the page's content with a featured icon, a heading, and actions that stack in a narrow column.

Compares plans in equal-height columns with a price in words, a feature list, and one featured plan named by a badge.

Closes a section or a card with a status line or link and end-aligned actions that wrap in source order.

Names a section or a card with a heading at any level, a description, and actions that wrap under it in a narrow column.