Version v3 Documentation
You are viewing documentation for an older version.
View latest (v4) documentation →
Typography
Styled text components for building consistent, semantic typography hierarchies across your application, with each component mapping to its corresponding HTML element for proper document structure and accessibility.
H1
The
TypographyH1 component renders an <h1> element with scroll margin, bold weight, and large tracking. Use it for the primary page heading to establish document hierarchy.
Loading example…
H2
The
TypographyH2 component renders an <h2> element with a bottom border separator and semibold weight. Ideal for major section headings that visually divide content areas.
Loading example…
H3
The
TypographyH3 component renders an <h3> element with semibold weight and tighter tracking. Use it for subsection headings within a larger content area.
Loading example…
H4
The
TypographyH4 component renders an <h4> element with semibold weight at default text size. Suitable for minor headings within subsections or card headers.
Loading example…
Paragraph
The
TypographyP component renders a <p> element with leading-7 line height and proper paragraph spacing via [&:not(:first-child)]:mt-6. Use it for body text throughout your content.
Loading example…
Lead
The
TypographyLead component renders a <p> element styled with larger text-xl size and muted foreground color. Perfect for introductory paragraphs or hero descriptions that need more visual weight than body text.
Loading example…
Large
The
TypographyLarge component renders a <div> element with text-lg size and semibold weight. Use it for standalone emphasized phrases or key information that needs to stand out from surrounding content.
Loading example…
Small
The
TypographySmall component renders a <small> element with text-sm size and medium weight. Ideal for form labels, footnotes, or supplementary metadata that should be visually subordinate.
Loading example…
Muted
The
TypographyMuted component renders a <p> element with text-sm size and text-muted-foreground color. Use it for timestamps, disclaimers, or helper text that should recede visually while remaining readable.
Loading example…
Inline Code
The
TypographyInlineCode component renders a <code> element with a muted background, rounded corners, and monospace font. Nest it inside TypographyP or other text components to highlight code references inline.
Loading example…
Blockquote
The
TypographyBlockquote component renders a <blockquote> element with a left border accent and italic styling. Use it for quotations, callouts, or excerpted text that needs visual distinction from surrounding content.
Loading example…
Combined
A real-world composition showing multiple typography components used together to build a complete content section. Combine
TypographyH2, TypographyLead, TypographyP, and TypographyMuted to create well-structured article layouts with clear visual hierarchy.
Loading example…
Custom Styling
Use the
Class parameter on any typography component to apply custom colors, gradients, or other Tailwind utilities. This allows you to create branded or themed text without losing the semantic HTML structure and default spacing.
Loading example…
Available Components
TypographyH1 - Main page heading (h1)
TypographyH2 - Section heading (h2)
TypographyH3 - Subsection heading (h3)
TypographyH4 - Minor heading (h4)
TypographyP - Body paragraph (p)
TypographyLead - Introductory text
TypographyLarge - Emphasized text
TypographySmall - Small supporting text
TypographyMuted - De-emphasized text
TypographyInlineCode - Inline code
TypographyBlockquote - Block quote