Typography

A polymorphic typography component with multiple variants for consistent text styling across your application.

Heading 1

Large page heading

Heading 2

Section heading

Heading 3

Subsection heading

This is a paragraph of text using the Typography component. It provides consistent styling across your application.

This is lead text - slightly larger and more prominent than regular paragraphs.

Large text for emphasis

Small text for fine print

Muted text for secondary information

const code = "inline code block"

import { Card } from "@/components/ui/card"
import { Typography } from "@/components/ui/typography"

export function TypographyDemo() {
  return (
    <Card className="space-y-6 p-6">
      <div className="space-y-2">
        <Typography variant="h1">Heading 1</Typography>
        <Typography variant="muted">Large page heading</Typography>
      </div>

      <div className="space-y-2">
        <Typography variant="h2">Heading 2</Typography>
        <Typography variant="muted">Section heading</Typography>
      </div>

      <div className="space-y-2">
        <Typography variant="h3">Heading 3</Typography>
        <Typography variant="muted">Subsection heading</Typography>
      </div>

      <div className="space-y-2">
        <Typography variant="p">
          This is a paragraph of text using the Typography component. It
          provides consistent styling across your application.
        </Typography>
      </div>

      <div className="space-y-2">
        <Typography variant="lead">
          This is lead text - slightly larger and more prominent than regular
          paragraphs.
        </Typography>
      </div>

      <div className="space-y-2">
        <Typography variant="large">Large text for emphasis</Typography>
      </div>

      <div className="space-y-2">
        <Typography variant="small">Small text for fine print</Typography>
      </div>

      <div className="space-y-2">
        <Typography variant="muted">
          Muted text for secondary information
        </Typography>
      </div>

      <div className="space-y-2">
        <Typography variant="code">const code = "inline code block"</Typography>
      </div>
    </Card>
  )
}

Installation


pnpm dlx shadcn@latest add https://ui.nowts.app/r/typography.json

Usage

The Typography component provides consistent text styling with multiple variants:

import { Typography } from "@/components/ui/typography"
 
export function MyComponent() {
  return (
    <div>
      <Typography variant="h1">Page Title</Typography>
      <Typography variant="lead">
        An introductory paragraph with larger text
      </Typography>
      <Typography variant="p">Regular paragraph text</Typography>
    </div>
  )
}

Variants

Headings

<Typography variant="h1">Heading 1</Typography>
<Typography variant="h2">Heading 2</Typography>
<Typography variant="h3">Heading 3</Typography>

Text

<Typography variant="p">Paragraph</Typography>
<Typography variant="lead">Lead text</Typography>
<Typography variant="large">Large text</Typography>
<Typography variant="small">Small text</Typography>
<Typography variant="muted">Muted text</Typography>

Special

<Typography variant="code">const code = true</Typography>
<Typography variant="quote">A memorable quote</Typography>
<Typography variant="link" as="a" href="/about">Link text</Typography>

Polymorphic

The component is polymorphic and renders the appropriate HTML element by default:

<Typography variant="h1"> {/* renders <h1> */}
<Typography variant="p">  {/* renders <p> */}
<Typography variant="link"> {/* renders <a> */}

You can override the element with the as prop:

<Typography variant="h2" as="h1">
  This is an h1 styled as h2
</Typography>
 
<Typography variant="p" as="div">
  This is a div styled as a paragraph
</Typography>

Custom Styling

Add custom classes with className:

<Typography variant="h1" className="text-blue-500">
  Blue Heading
</Typography>
 
<Typography variant="p" className="text-center">
  Centered paragraph
</Typography>

Props

Prop	Type	Default	Description
variant	string	"p"	Typography variant (h1, h2, h3, p, lead, large, small, muted, code, quote, link)
as	ElementType	-	Override the HTML element
className	string	-	Additional CSS classes
...props	HTMLAttributes	-	Standard HTML attributes

Variants Reference

Variant	Default Element	Description
h1	h1	Large page heading
h2	h2	Section heading
h3	h3	Subsection heading
p	p	Regular paragraph
lead	p	Introductory text
large	p	Emphasized text
small	p	Fine print
muted	p	Secondary text
code	code	Inline code
quote	blockquote	Quotation
link	a	Link text

TanStack Form Blocks

On This Page

Installation Install dependencies Add the component Usage Variants Headings Text Special Polymorphic Custom Styling Props Variants Reference

Build Your SaaS in Days, Not Months

NOW.TS is the Next.js 15 boilerplate with everything you need to launch your SaaS—auth, payments, database, and AI-ready infrastructure.