Typeset is the prose and markdown system in the shadcn/ui kit for Figma, mirroring shadcn's typeset.css. It gives long-form content consistent headings, paragraphs, lists, and measures that track your active style and light/dark mode.
Typeset is the kit's system for long-form and markdown content — the paragraphs, headings, lists, quotes, and tables you'd write in an article, a docs page, or an AI-generated response. It mirrors shadcn's typeset.css so your Figma prose and your rendered .typeset content match.
Everyday UI text (labels, buttons, captions) uses the kit's regular text styles. Typeset is different: it styles flowing prose as a unit, with sensible defaults for reading — comfortable line-height, spacing between blocks, and a bounded line length. It ships as a dedicated Typeset page in the kit with ready-made markdown components and a Rich Text composite you can drop content into.
Because Typeset colors reuse the same theme tokens as the rest of the kit, prose follows light/dark and restyles with the active style automatically — no separate theming.
The Typeset variable collection has four size modes — the builder's size knob:
Switching the Typeset mode on a page or frame scales the whole prose system to that base size. Defaults: line-height (leading) 1.75 and block flow (spacing between blocks) 1.25em.
The Typeset collection holds the values that drive the system:
| Variable Group | Purpose |
|---|---|
size/* | The prose type scale for each size mode |
space/* | Block spacing (the flow between paragraphs, headings, lists, and other blocks) |
measure/{60,70,80,90}ch | Line-length caps — the maximum width a column of prose should reach, in characters |
font/* | The fonts used for prose |
The Typeset page provides markdown components covering the elements you'd expect in prose:
code / pre) blocksThere's also a Rich Text composite that combines these into a ready-made article layout.
Under the hood, these use the typeset/* text styles, which bind to the Typeset collection's variables. Apply a typeset/* text style (or use the components) rather than styling prose by hand.
Readable prose has a bounded line length. The kit exposes measure/60ch, measure/70ch, measure/80ch, and measure/90ch as width variables — apply one to a prose container to cap how wide the text runs. In code these map to the .typeset container's measure-* classes.
Typeset sits on top of the same system as the rest of the kit:
Style mode influences the prose fonts and scale, so Typeset restyles when you switch styles.foreground, muted-foreground, border, and so on), so a theme edit flows through automatically.Mode collection flips prose colors along with everything else.You set the base size independently with the Typeset mode (14/15/16/18px).
The Figma to shadcn/ui plugin has a dedicated Typeset tab with its own Export and Import tabs — see the plugin Typeset documentation for the full workflow:
typeset.css override block (--typeset-size, --typeset-leading, --typeset-flow, and --typeset-font-*) from your chosen size mode, including any values you hand-tuned.typeset.css back into the kit — switching or creating size modes and applying leading, flow, and fonts.Typeset export and import run locally and don't consume any AI credits or plugin uses.
When the plugin's AI code generation processes a prose frame, it outputs a .typeset container with the matching measure-* classes — so designed prose becomes correctly structured markup.