Components

A clear, responsive action with quiet secondary states.

A compact button for frequent toolbar actions.

A primary action with a menu of nearby alternatives.

Related actions joined into one surface with hairline dividers: a hover highlight glides between segments, the pressed one answers in place, and an attached menu can close the row.

Separate soft buttons in a quiet tray, with one shared highlight that morphs from button to button as you move, and a pressed state that settles in place.

Icon buttons in a compact group: the one you point at or focus grows to reveal its label while its neighbours slide aside, and an action confirms in place.

Copy a value with immediate confirmation.

A destructive button that morphs into an inline confirmation, a spinner, and a result with undo.

Confirm a destructive action by holding, not tapping.

Reveal row actions with a swipe, or from the same actions in a menu.

A focused list of actions anchored to a trigger.

Secondary actions kept close to the selected object.

Your account, settings, theme, and sign out behind the avatar. Opens as a bottom sheet on phones.

Four smooth ways to move between light and dark appearance.

The next appearance crosses the page like an eclipse.

The next appearance opens from a slim center seam.

The next appearance rises into place.

A single line field with clear labels and useful states.

A multiline field for notes, descriptions, and longer text.

Capture sensitive text with a visible reveal control.

Show how strong a new password is while it is typed.

A recognizable search entry point with clear affordances.

An icon that morphs into a search field with results beneath it.

Rename in place: the text becomes a field without moving.

Enter a bounded number with clear increment controls.

A currency field with live grouping, stable width, rolling digits, and minor-unit output.

A phone field with a country picker, formatting as you type, and E.164 output.

Turn short text values into removable tags.

A textarea with @people and #channel mentions that act as single tokens, with suggestions at the caret.

Record key combinations into key caps, with conflict warnings, Kbd, and a searchable cheatsheet.

A compact choice field with a keyboard friendly menu.

Search and select from a list without leaving the field.

Select several values while keeping the field readable.

A select whose trigger grows into the list, with a gliding highlight and type-ahead.

Filter by a few facets with chips that morph as you pick them.

Selectable option cards with a sliding selection ring, price and description slots, and radio keyboard behavior.

A monthly and yearly switch with a savings badge and prices that roll to the new amount.

A binary choice with a precise, legible state.

Choose one option from a visible set.

A tactile toggle for settings that take effect immediately.

Switch between a small set of related views.

Pick a value or a range on a track that follows your finger.

Browse dates in a clear, compact month view.

Choose a date without losing context.

A range picker that grows from its trigger into two months with presets and a stretching range highlight.

Choose a time with sensible keyboard behavior.

A swatch that grows into a picker with format morphing, eyedropper, saved swatches, and contrast readout.

A lightweight editor with markdown shortcuts, a floating toolbar, a slash menu, and HTML and markdown output.

Smooth ink that thins with speed, with undo, replay, and PNG or SVG export.

A generous target for dropping one or more files.

Switch between related content in the same context.

Show where a page sits in a hierarchy.

Move through a long collection with clear bounds.

A native scroll container with thin overlay scrollbars and edge fades that appear only when content overflows.

Progressively reveal supporting information in place.

Give a dense card more room when requested.

Trade space between panes by dragging the divider between them.

A focused surface for decisions that need attention.

A temporary side surface for focused work.

A sheet that rests at a peek or full height and follows your finger.

A small anchored surface for contextual information.

Preview a person or link on hover or focus without leaving the page.

Short supporting text for unfamiliar controls.

A persistent message that helps people recover or continue.

Brief confirmation for a completed background action.

Stack short results at the edge until you reach for them.

A top banner that rotates messages, counts down, and collapses smoothly when dismissed.

Show how much of a known task is complete.

Reserve space while content is still loading.

Show where a person is in a multi-step flow and what is done.

Show what fills an allowance and how close it is to the limit.

A compact identity marker for people and accounts.

Show a team or set of contributors in a small space.

A small label for status, category, or metadata.

A contained group of related content and actions.

A compact summary for a number that needs context.

A useful next step when there is nothing to show yet.

A multi-series line chart with a gliding crosshair, legend toggles, and paths that morph between ranges.

Compare one measure across days and scrub any bar for its value.

A donut whose arcs morph between datasets, with the active value rolling into the center.

Layered streams on a wiggle baseline that morph between ranges, with a layer you can isolate and read week by week.

A dense time series with an overview strip: drag a window to zoom, resize it by its handles, and read events in place.

A ten by ten unit chart where every cell is one percent, and cells fly to their new group when the data changes.

Before and after on two axes: lines draw in, rank moves sit beside each value, and switching datasets slides every line to its new slope.

Show a compact trend beside a value.

Show a value against a known range.

See a year of activity at a glance, one square per day.

Give changing totals a clear sense of movement.

Overlapping distributions, one ridge per group: hover to lift a ridge and read its quartiles, switch datasets and every curve morphs.

A squarified treemap: click to drill and the tiles grow to fill the view, with a breadcrumb back and metrics that morph every tile.

Compare structured records with sortable columns.

Navigate nested folders and structured content.

Keep collection filters close and easy to reset.

Present code with legible hierarchy and copy access.

A collapsible JSON tree with search, paging for long arrays, and copy value or path.

Follow what happened, newest first, grouped by day.

Threaded comments with replies, reactions, mentions, inline edit, and resolve.

A chat thread with grouped messages, reactions, read receipts, typing, and a composer with attachments.

Drag a divider across two images to see what changed.

Browse a row of slides by dragging, flicking, or arrowing through them.

Review a deck one card at a time, with a throw and an undo.

Reveal a short piece of content with restrained motion.

Bring a section title in as it scrolls into view.

Morph a label into its next state, letter by letter.

Show ongoing work with a calm light across the words.

Text and numbers that spin into their new value on staggered slot machine reels.