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.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.H3
The
TypographyH3 component renders an <h3> element with semibold weight and tighter tracking. Use it for subsection headings within a larger content area.H4
The
TypographyH4 component renders an <h4> element with semibold weight at default text size. Suitable for minor headings within subsections or card headers.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.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.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.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.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.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.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.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.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.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