Shadcn Typography
React typography for headings, paragraphs, and lists. Built with TypeScript and Tailwind CSS for Next.js using Base UI — utility classes, no extra component file.
There is no Typography export. These are Tailwind classes on native elements. Use them for a docs page, a marketing block, or any long read.
Looking for a neobrutalism version for shadcn?
Same typography, thicker borders. The NeoBrutalism typography is the kit if you want that look.
Usage
<h1 className="scroll-m-20 text-4xl font-extrabold tracking-tight text-balance">
Taxing Laughter
</h1>Copy the class string onto h1–h4, p, blockquote, ul, or table. Edit it in place.
Composition
No component file. The page is the source.
h1
The page title. One per view.
h2
A section. Border under the line.
h3
A subsection.
h4
The smallest heading.
p
Body copy. leading-7 and a top margin after the first.
blockquote
A quoted line. Border on the start edge.
table
A simple HTML table. Not Table.
list
Disc bullets. Indent with ms-6.
Inline code
A short token in a sentence.
Lead
The first paragraph under a title. Muted, larger.
Large
A callout line. Semibold.
Small
Fine print. Semibold, compact.
Muted
Secondary copy. text-muted-foreground.
RTL
Wrap with DirectionProvider and dir="rtl". Logical classes (ms-6, border-s) flip.
API
There is no component API. Change the class names on the element.
Notes
Do not add a Typography.tsx
These are utilities. A wrapper component would fight every heading that already has its own size.
With other components
Title and body inside
AlertA short notice
MarkdownRendered assistant text
SeparatorSplit two blocks
TableData, not prose
AccordionLong FAQ copy
Questions
Related
Was this page helpful?
Sign in to leave feedback.
Tooltip
React tooltip for hover and focus hints on icon buttons. Built with TypeScript and Tailwind CSS for Next.js using Base UI — sides, shortcuts, and disabled triggers.
Scroll Fade
React scroll fade for overflowing lists and carousels. Built with TypeScript and Tailwind CSS for Next.js using Base UI — mask edges that track the scroll.