Typography
Headings, paragraphs, and typographic styles using the project's font system.
Font Families
Geist Sans
Default Sans Serif (variable)
The quick brown fox jumps over the lazy dog.
font-sans (var(--font-geist-sans))Geist Mono
Monospace (variable)
The quick brown fox jumps over the lazy dog.
font-mono (var(--font-geist-mono))Playfair Display
Display / Serif
The quick brown fox jumps over the lazy dog.
font-display (var(--font-playfair))Inter
Stitch Sans (Inter)
The quick brown fox jumps over the lazy dog.
font-stitch-sans (var(--font-inter))Headings
Heading 1 (Display)
font-display text-4xl font-extrabold tracking-tight lg:text-5xl
Heading 1 (Sans)
text-4xl font-extrabold tracking-tight lg:text-5xl
Heading 2 (Display)
font-display text-3xl font-semibold tracking-tight
Heading 2 (Sans)
text-3xl font-semibold tracking-tight
Heading 3
text-2xl font-semibold tracking-tight
Heading 4
text-xl font-semibold tracking-tight
Body Text
The king, seeing how much happier his subjects were, realized the error of his ways and repealed the joke tax.
leading-7
A modal dialog that interrupts the user with important content and expects a response.
text-xl text-muted-foreground (Lead)
Are you absolutely sure?
text-lg font-semibold (Large)
This is a small text with medium font weight.
text-sm font-medium leading-none
This is a muted text paragraph used for secondary information.
text-sm text-muted-foreground
Elements
"After all," he said, "everyone enjoys a good joke, so it's only fair that they should pay for the privilege."
blockquote (border-l-2 pl-6 italic)
Inline Code
Press ⌘K to open the command menu.