Typography

A polymorphic typography component with 14 semantic variants built with cva. Renders the correct HTML element automatically.

Installation

npx shadcn@latest add https://mksingh.dev/r/typography.json

Usage

import { Typography } from '@/components/ui/typography'

<Typography variant="h1">Hello world</Typography>

Variants

Hero

<Typography variant="hero">The quick brown fox</Typography>

h1 – h4

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

p

<Typography variant="p">The quick brown fox jumps over the lazy dog.</Typography>

lead

<Typography variant="lead">A modal dialog that interrupts the user.</Typography>

large / small / muted / tiny

<Typography variant="large">Are you sure?</Typography>
<Typography variant="small">Email address</Typography>
<Typography variant="muted">Enter your email address to continue.</Typography>
<Typography variant="tiny">Last updated 3 mins ago</Typography>

error

<Typography variant="error">This field is required.</Typography>

blockquote

<Typography variant="blockquote">
    "After all," he said, "everyone enjoys a good joke."
</Typography>

code

<Typography variant="code">@radix-ui/react-alert-dialog</Typography>

typographyVariants

typographyVariants is exported alongside the component so you can apply any typography style directly to any element using cn() — without wrapping in <Typography>.

import { typographyVariants } from '@/components/ui/typography'
import { cn } from '@/lib/utils'

Apply to a native element

<label
    htmlFor="email"
    className={cn(typographyVariants({ variant: 'muted' }))}
>
    Email address
</label>

Extend with extra classes

<p className={cn(typographyVariants({ variant: 'lead' }), 'mt-2 text-center')}>
    Welcome back
</p>

Use with third-party components

<AccordionTrigger className={cn(typographyVariants({ variant: 'h4' }))}>
    Section title
</AccordionTrigger>

API

Prop	Type	Default	Description
`variant`	`TypographyVariant`	`'p'`	Controls the visual style and rendered HTML element
`className`	`string`	—	Additional Tailwind classes merged via `cn()`

Variant → element map

Variant	Rendered element
`hero`, `h1`	`h1`
`h2`	`h2`
`h3`	`h3`
`h4`	`h4`
`p`, `lead`, `muted`	`p`
`large`	`div`
`small`	`small`
`tiny`, `error`	`span`
`blockquote`	`blockquote`
`code`	`code`

MKSingh