Typography

We do not ship any typography styles by default. This page is an example of how you can use utility classes to style your text.

<ComponentPreview styleName="radix-nova" name="typography-demo" className="[&_.preview]:h-auto!" hideCode />

h1

<ComponentPreview styleName="radix-nova" name="typography-h1" />

h2

<ComponentPreview styleName="radix-nova" name="typography-h2" />

h3

<ComponentPreview styleName="radix-nova" name="typography-h3" />

h4

<ComponentPreview styleName="radix-nova" name="typography-h4" />

p

<ComponentPreview styleName="radix-nova" name="typography-p" />

blockquote

<ComponentPreview styleName="radix-nova" name="typography-blockquote" />

table

<ComponentPreview styleName="radix-nova" name="typography-table" />

list

<ComponentPreview styleName="radix-nova" name="typography-list" />

Inline code

<ComponentPreview styleName="radix-nova" name="typography-inline-code" />

Lead

<ComponentPreview styleName="radix-nova" name="typography-lead" />

Large

<ComponentPreview styleName="radix-nova" name="typography-large" />

Small

<ComponentPreview styleName="radix-nova" name="typography-small" />

Muted

<ComponentPreview styleName="radix-nova" name="typography-muted" />

RTL

To enable RTL support in shadcn/ui, see the RTL configuration guide.

<ComponentPreview styleName="radix-nova" name="typography-rtl" direction="rtl" className="[&_.preview]:h-auto!" />