GenUI Primitives

Atomic building blocks used by the runtime to assemble cards, progress states, and decision moments from spec data.

GenUI Primitives

Low-level runtime atoms the agent composes into cards, checklists, action bars, and guided flows.

Developer details

Start from these files when you need to trace the live implementation.

shared/ui/chat/generative-ui/registry.tsx

Card

Tone should scan from the left edge first. Stripe carries the semantic signal; the surface tint only supports it.

Default

Default card content

Accent

Accent tone

Success

Success tone

Warning

Warning tone

Danger

Danger tone

Muted

Muted tone

Compact

Compact padding

Layout

Vertical Stack

Item 1Item 2Item 3

Horizontal Wrap

Tag 1Tag 2Tag 3Tag 4

Content

Heading / xs

Extra Small

Heading / base

Base Heading

Text / accent

Accent emphasis

Text / danger

Error state

When a badge behaves like a filter or selection control, it needs a visible hover lift and a focus ring. Static labels alone do not teach the interaction contract.

default

accent

success

warning

danger

muted

Hover: border and liftFocus-visible: amber ring

default

accent

success

warning

danger

muted

Structured helpers

Use the linear bar for step-based collection or process progress. Reserve the donut artifact for whole-profile completeness.

Checklist

Photos uploaded
Type identified
Materials listed

Warning list

Missing description
No hero image
Location unclear

Progress / 75%

5 of 6 details

Step-based collection progress

Decision controls

Action bar

Choice group