# Typeset

> 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.

Canonical: https://www.shadcndesign.com/docs/typeset

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](https://ui.shadcn.com/typeset) so your Figma prose and your rendered `.typeset` content match.

## What it is

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.

## Size modes

The `Typeset` variable collection has four size modes — the builder's size knob:

- **14px**
- **15px**
- **16px**
- **18px**

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`.

## Variables

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 |

## Components and text styles

The Typeset page provides markdown components covering the elements you'd expect in prose:

- Headings
- Paragraphs
- Lists (including task lists)
- Blockquote
- Code and preformatted (`code` / `pre`) blocks
- Table
- Horizontal rule
- Figure

There'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.

## Measures

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.

## How it tracks style, theme, and light/dark

Typeset sits on top of the same system as the rest of the kit:

- **Style:** the active `Style` mode influences the prose fonts and scale, so Typeset restyles when you switch styles.
- **Theme:** prose colors reuse your theme's Mode tokens (`foreground`, `muted-foreground`, `border`, and so on), so a theme edit flows through automatically.
- **Light/dark:** switching the `Mode` collection flips prose colors along with everything else.

You set the base size independently with the Typeset mode (14/15/16/18px).

## Exporting and importing with the plugin

The [Figma to shadcn/ui plugin](/plugin) has a dedicated **Typeset** tab with its own Export and Import tabs — see the [plugin Typeset documentation](/docs/plugin-typeset) for the full workflow:

- **Export** produces a `typeset.css` override block (`--typeset-size`, `--typeset-leading`, `--typeset-flow`, and `--typeset-font-*`) from your chosen size mode, including any values you hand-tuned.
- **Import** takes a pasted `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.

<Callout type="info">
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.
</Callout>