Components

Pressable action with variants, sizes, loading state and icon slots.

Several buttons drawn as one control — a segmented run, a split action, a toolbar.

Interactive pill — a filter, a tag, or a removable token.

Actions for a piece of content, opened by holding it.

The floating action button — one action pinned over the content, with an optional dial of others behind it.

The list of things you can do to something.

A row that slides aside to reveal the things you can do to it.

A button that stays down, on its own or in a group.

A month of days, for picking one, several, or a range.

Animated checkbox, as a row or a selectable card.

A colour chosen by dragging — a saturation square or a wheel, a hue scale, and opacity.

A text field that filters a list of options as you type.

A calendar behind a button.

A day and a time of day, picked in one panel.

Layout and validation-state kit a form control composes into.

Form state — values, validation and submission — with no form library underneath.

Text field with label, description and error message.

Input with leading and trailing decorators.

Form field label with required, invalid and disabled states.

A field for writing markdown, with a formatting toolbar and a rendered preview.

Numeric field stepped by buttons or typed by hand.

One-time-code field drawn as a row of separate cells.

One question at a time, with progress, validation and a way back.

Single-select list of options.

A row of stars to read or set a score.

Picker shown in a bottom sheet, expanded in place, or floating over the page.

Sign with a finger, and get the result back out as SVG or PNG.

Pick a value, or a span, by dragging a thumb along a track.

Animated on/off toggle.

A field whose value is a list of tokens rather than a string.

Text field that runs to several lines, sized in rows.

A time of day, as a wheel, a clock or a swipeable scale.

Draggable sheet anchored to the bottom of the screen.

Modal dialog with a backdrop and footer actions.

A panel that comes in from an edge of the screen and covers the app until dismissed.

Panel anchored to the element that opened it.

Transient notification queue with swipe to dismiss.

A small label that names the control under your finger.

The trail of links back up the hierarchy to the current page.

Paged navigation over a long result set.

Floating section navigator for a long screen.

A list whose rows can be dragged into a different order.

Stepper for multi-step flows.

Segmented navigation with an animated indicator.

A walkthrough that introduces a screen one control at a time.

A hierarchy you can open a level at a time.

Collapsible sections with single or multiple selection.

Content surface with header, body and footer.

A run of slides, one at a time, dragged with a finger.

Reading direction for everything below it.

Widget shell — a card of rows sitting in a titled tray.

Bento tiles, and the grid that places them.

Row of media, text and actions for lists and settings.

Image frame whose contents move as you scroll.

Fades the edges of a scroll container.

Horizontal or vertical rule between content, optionally labelled.

Elevated container with a variant ladder.

Semantic text presets.

Pan-and-zoom canvas of draggable nodes joined by animated edges.

One number, what it is doing, and the shape it made getting there.

Vector map whose basemap is drawn from your theme tokens.

Rows and columns that stay lined up, with sortable headers.

Vertical sequence of events.

Filled bands over time, stacked or overlaid.

Categories compared by length, grouped or stacked.

Open, high, low and close for a period, drawn as one mark.

Contribution grid with a themed colour ramp and a readout.

A whole broken into parts, counted out in cells.

Animated time series, drawn on the UI thread.

One whole, divided between its parts.

Several measures of one thing, drawn as one shape.

Concentric arcs, each measured against its own target.

Two quantities against each other, to show how they relate.

Status message with a built-in icon.

Compact status label, dot, or notification count.

Placeholder for a list or screen with no content.

Nine loading animations behind one variant prop.

Inline note between conversation turns.

Determinate and indeterminate progress bar.

Shimmer placeholder for loading content.

Indeterminate loading indicator.

File row with upload states, built on Item.

User image with an initials fallback and an optional badge overlay.

Chat turn with avatar, bubble, header and footer.

Scroll behaviour a chat transcript needs.

A social card — author, body, media and the counts underneath, with the votes animated.

A string a camera can read — framed, titled, or folded away behind a button.

Text that resolves word by word as you scroll.

Five ways a piece of text or a number arrives.

A fenced snippet, syntax-coloured and scrolled sideways.

Navigation panel that moves the app aside instead of covering it.

What an agent intends to do, before it does it.

The model's working, shown while it happens and folded away after.

A model's answer, rendered as markdown while it is still arriving.

Animated highlight sweeping across content.

What a voice looks like while an app listens.

Where an answer came from, folded under a count.

One step an agent took, and what it did while it was there.

Dotted orb saying which kind of busy an agent is.