Skip to content

ComponentsProse

Components

Prose

Long-form reply text: the cds .prose rules with the reply font, text inset / stop, tables and the streaming word fade.

Assistant reply

v2 reply: serif 15/21 (Source Serif 4), flow .75em = 11.25px. Inside an assistant Message, p / headings get the 4px start inset and the 56px end stop (at a 736px column). Headings in the header weight (serif 520); strong 501; lists 30px start, primary markers; inline code 13.5 mono in primary ink on a 5 % | 7.5 % wash, no border, radius 4; tables open and borderless (message-line rules, 1.5em column gap, rows 37), inset 4px.

Probe content (736px column)

Heading one

Assistant replies are 15/21 in the reply face with bold, italic, a link, inline code, ⌘K, highlighted and deleted text.

Heading two

The block after a heading starts 7.5px below it (.667 flow).

  • Buttons in five variants, three sizes and icon-only
  • Inputs with hint and error states
    • nested list uses a circle marker
  • Toasts and tooltips

Heading three

  1. Install the dependencies
  2. Add the components

A quotation keeps a 4px start border and secondary text.

Heading four

TokenDarkLight
surface-popover#303030#ffffff
text-muted#fff6#0007

A CodeBlock inside Prose keeps its own styles:

bash
pnpm dlx shadcn-vue@latest add button

Text after a rule starts 22.5px below it (2 flow).

Light

Light

Text with code, a link and bold.

  • Marker colour is primary
Dark

Dark

Text with code, a link and bold.

  • Marker colour is primary

Fonts, size, spacing

font="response" is serif by default (V2-3: Source Serif 4, one --font-serif-face token); data-response-font="sans" on an ancestor opts out to sans. size="inherit" takes the surrounding size (thinking text, 14/21); spacing="lg" widens the block flow to 1em.

response (serif default)

Response face

The quick brown fox jumps over the lazy dog.

response under data-response-font=sans

Response face

The quick brown fox jumps over the lazy dog.

font=sans size=inherit (14/21)

Thinking text inherits the 14px body size with a 1.5 line height.

Second paragraph.

spacing=lg

Paragraph one.

Paragraph two, 1em below.

Compact (14/20)

Compact density reply text is 14/20.

Streaming

While streaming, the renderer wraps appended words in span.prose-word; each fades in over 400 ms (none with reduced motion).

Streaming words

Streaming replies fade each new word in, so long answers appear smoothly without the text jumping around as it arrives.