Skip to content

ComponentsMessage

Components

Message

One transcript turn: a right-aligned user bubble or an assistant stack (status, cards, prose) with its action row.

Turns

User rows sit 24px (compact 20) below the previous turn, right-aligned; assistant rows 8px (6) below. The assistant stack is 20px (16) apart. Hover a row to reveal its actions; focusing anything inside shows them immediately.

User + assistant (736px column)

You said: Can you explain how the kit maps claude.ai's tokens onto shadcn-vue?

Can you explain how the kit maps claude.ai's tokens onto shadcn-vue?

Assistant responded

Thought for 6s

Reka UI provides the headless primitives and accessibility; the kit restyles them with the cds tokens, so every component follows the light and dark palettes and both densities.

Each assistant paragraph keeps a 4px start inset and a stop of up to 56px at the end of a 736px column, which shrinks to 0 on a phone.

You said: And the density scale?

And the density scale?

Assistant responded

Compact density shrinks the control height from 32 to 24px and the type from 15 to 14px; the rhythm follows (24 → 20 between turns).

Light and dark

Light

You said: Short question

Short question

Assistant responded

A short answer with the reply font, 16/24.

Dark

You said: Short question

Short question

Assistant responded

A short answer with the reply font, 16/24.

Text size and streaming

textSize re-sizes the message text through the [data-text-size] scope (v2: sm 14/20 · md 15/21 · lg 16/22); controls inside keep 14/20. A streaming reply sets aria-busy on its content and renders no actions.

textSize="sm"

The quick brown fox jumps over the lazy dog.

textSize="md"

The quick brown fox jumps over the lazy dog.

textSize="lg"

The quick brown fox jumps over the lazy dog.

Streaming

Assistant responded

Still writing this answer…

Kit extras

claude.ai shows no avatars or names; MessageHeader (13/17 muted) and MessageAvatar (24 | 20 circle) are kept for other chat surfaces. A long unbroken word wraps inside the bubble.

Header + avatar, long text
AveryveryverylongwordwithoutanybreaksAveryveryverylongwordwithoutanybreaksAveryveryverylongwordwithoutanybreaksAveryveryverylongwordwithoutanybreaksAveryveryverylongwordwithoutanybreaks
Model A

Header and avatar are optional extras.