Preview

Typography Examples

Heading Variants

Heading 1 - Main Title

Heading 2 - Section Title

Heading 3 - Subsection Title

Heading 4 - Minor Heading

Heading 5 - Small Heading
Heading 6 - Smallest Heading

Text Variants

This is a lead paragraph that stands out and draws attention to important content.

This is a regular body text paragraph that contains the main content of your page.

This is small text used for secondary information or captions.

This is caption text for very small details or metadata.

Installation

<> import.ts
import Typography from "@/components/ui/typography"

Code

<> component.tsx
import Typography from "@/components/ui/typography"

<Typography />

API Reference

Typography

Semantic text component with variants and convenience exports.

<> import.ts
import Typography, { Heading1, Heading2, Heading3, Heading4, Heading5, Heading6, Body, Small, Caption, Lead, TypographyPresets } from "@/components/ui/typography"

Props

PropTypeDefaultDescription
children
React.ReactNode—Text content
className
string""Additional CSS classes
as
"h1" | "h2" | "h3" | "h4" | "h5" | "h6" | "p" | "span" | "div"—HTML tag override
variant
"h1" | "h2" | "h3" | "h4" | "h5" | "h6" | "body" | "small" | "caption" | "lead""body"Typography style
color
"default" | "muted" | "primary" | "secondary" | "destructive""default"Text color
weight
"light" | "normal" | "medium" | "semibold" | "bold""normal"Font weight
align
"left" | "center" | "right" | "justify""left"Text alignment
truncate
booleanfalseSingle-line truncate