Text
Body and paragraph typography with size, font, and color variants.
Default
The quick brown fox jumps over the lazy dog.
Sizes
Lead — introductory text that sets context.
Body — the default reading size.
Small — captions, helper text.
Extra small — fine print, labels.
Font Families
Reading font for long-form content.
Interface font for UI elements.
Mono font for code and data.
Colors
Default foreground color.
Muted for secondary information.
Primary for emphasis.
Destructive for errors.
As Span
Inline span text
Props
| Prop | Type | Default | Description |
|---|---|---|---|
| size | "lead" | "body" | "sm" | "xs" | "body" | Font size and line height. |
| font | "reading" | "interface" | "mono" | "reading" | Which font family to use. |
| color | "default" | "muted" | "primary" | "destructive" | "default" | Text color. |
| as | "p" | "span" | "div" | "label" | "p" | HTML element to render. |
| asChild | boolean | false | Render as the child element via Radix Slot. |