# Typeset

> Export and import typeset.css between the shadcn/ui kit for Figma and your project with the Figma to shadcn/ui plugin.

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

## Typeset export and import

The kit includes a [Typeset system](/docs/typeset) — a prose/markdown scale mirroring shadcn/ui's [typeset.css](https://ui.shadcn.com/typeset). The plugin has a dedicated **Typeset** tab in the main tab bar (next to Manage Variables) with its own **Export** and **Import** tabs. It runs locally and **does not use any AI credits**.

{/* TODO: screenshot of the Typeset tab */}

### Export typeset.css

1. Open the plugin in your kit file and go to the **Typeset** tab.
2. On the **Export** tab, pick a size mode (14px, 15px, 16px, or 18px).
3. Click **Generate typeset.css overrides** and copy the result.

The plugin generates a small `typeset.css` override block containing your knobs: `--typeset-size`, `--typeset-leading`, `--typeset-flow`, and the `--typeset-font-*` families. If you hand-tuned any values away from the standard ramp, the plugin detects those and notes them in the output.

<Callout type="info">
The base `typeset.css` ships with shadcn/ui — this block only carries your overrides. Paste it into your project after the base file.
</Callout>

### Import typeset.css

1. On the **Import** tab, paste a `typeset.css` (or just its `.typeset` block).
2. Click **Apply to Figma**.

The plugin applies it back into the kit: it switches to (or creates) the matching size mode and applies your leading, flow, and font choices.

Because Typeset colors reuse the theme tokens, prose follows light/dark and restyles with the active style automatically. Learn more about the system on the [Typeset page](/docs/typeset).