Display

A decorative ambient ground: a blurred radial mesh of token colours on a masked ::before layer, absolutely positioned under its container's content.

A box that keeps a fixed width-to-height ratio for whatever it wraps — an image, a video, a map.

An audio player with its own controls (seek, play, time, scrubber, mute, volume) — voice replies, recordings, clips.

A person or agent mark: an image with initials as the fallback, in the standard sizes.

An install command in a monospace chip: pick the host from the menu, copy the exact command.

Shown short, copied exact.

A token-styled <img>: fit (object-fit), a Skeleton in a reserved box while it decodes, an accessible ImageOff fallback on error.

Every way to bring brand-ui into a project, one tab strip: pnpm add by archetype, copy-own a registry block, per-host MCP setup, and an agent prompt.

Every agent-facing integration unit as installable rows, with a host selector that swaps every row's copy command at once.

Keyboard key hint, e.g. <Kbd>⌘K</Kbd>.

Wraps query matches inside a string in real <mark> elements, styled with the semantic --highlight token pair (AA-legible ink in every theme).

One player for any file.

The compound media player — root, element, viewport and every control part — for a custom layout the Audio/Video presets do not cover.

A word-sized read-only quantity — a confidence, a share of a ceiling, “4 of 5 signals held”.

A depth plane that scrolls at its own rate.

Color must not be the only signal a guardrail tripped: set aria-valuetext (e.g. "Exceeded — 120 of 100") alongside a non-default variant — it passes straight through to the underlying role="progressbar" element via ...props (Radix's ProgressPrimitive.Root already supports it).

Fades and lifts its content in the first time it scrolls into view — once, never re-hiding.

A scroll container with themed, overlay scrollbars that stay consistent across platforms.

A horizontal or vertical divider between regions of the same surface.

A live spec editor: JSON on the left, what it renders on the right (stacked below 1024 px).

Indeterminate spinner with an accessible label.

A row of token chips (concept §4.5, §5a "Scroll choreography 5"): hovering or focusing one sets data-token-spotlight on <html> and marks every element on the page that resolves to the same colour with data-token-consumer (never an inline style), so a stylesheet can draw the highlight.

A video player: bordered frame, bg-muted letterbox, opaque control bar docked beneath (or overlaid, auto-hiding); also the muted thumbnail.