Obra shadcn/ui docs

Note about type styles

The typographic styles included in the kit — The typographic styles we included

On purpose, we only provide you with a minimal number of styles. We built it this way so that you can customise the typography to your liking.

Find the Typography collection inside Variables and tweak the theme to customize the look and feel.

Changing the font across the kit

To change the font across the kit, go to the typography variable collection. Under font definitions, you’ll find the following variables:

Variable	Default value
`font-family-sans`	Geist
`font-family-serif`	Geist
`font-family-headings`	References `font-family-sans`
`font-family-body`	References `font-family-sans`
`font-family-monospace`	Geist Mono

Change font-family-sans to update the font globally. Since font-family-headings and font-family-body reference it, they’ll update automatically. You can also override them individually if you want different fonts for headings and body text.

Each individual type style (e.g. heading 1, heading 2, etc.) also has its own variables for font-family, weight, font-size, line-height, spacing, and letter-spacing, so you can fine-tune each style separately.

Exporting type styles as Tailwind 4 utility classes

You can export the type styles from the kit as Tailwind 4 @utility classes using the Obra shadcn/ui Pro CSS Export (Beta) plugin. This gives you ready-to-use utility classes that match your Figma typography settings exactly.