typography

Philosophy

Typography is a system, not a single component. We ship a set of small, semantic wrappers — TypographyH1, TypographyP, TypographyBlockquote, TypographyList, TypographyTable, etc. — that render native HTML elements with a consistent set of utility classes. Your markup stays semantic, the bundle stays lean, and every className you pass is merged on top of the defaults via cn() so local overrides are trivial.

Installation

npx @gentleduck/cli add typography

npx @gentleduck/cli add typography

Usage

import {
  TypographyH1,
  TypographyP,
  TypographyBlockquote,
  TypographyList,
  TypographyTable,
  TypographyTd,
  TypographyTh,
  TypographyTr,
} from '@/components/ui/typography'

import {
  TypographyH1,
  TypographyP,
  TypographyBlockquote,
  TypographyList,
  TypographyTable,
  TypographyTd,
  TypographyTh,
  TypographyTr,
} from '@/components/ui/typography'

<TypographyH1>The Joke Tax Chronicles</TypographyH1>
<TypographyP>Once upon a time, in a far-off land, there was a very lazy king...</TypographyP>

<TypographyH1>The Joke Tax Chronicles</TypographyH1>
<TypographyP>Once upon a time, in a far-off land, there was a very lazy king...</TypographyP>

Examples

h1

h2

h3

h4

p

blockquote

table

list

Inline code

Lead

Large

Small

Muted

RTL Support

Every Typography* component inherits the RTL styles it needs from Tailwind's rtl: variant. Wrap the composition in an element with dir="rtl" (or set DirectionProvider at app/root level for global RTL/LTR) and the blockquote border, list indent, and table alignment automatically flip.

Motion

Use the Motion* variants for a staggered entrance animation powered by motion. Each component accepts an index prop — the entrance is delayed by index * 0.05s so a full page of typography cascades in from bottom to top with a subtle slide + blur.

API Reference

Typography components

Every base Typography* component is a thin forwardRef wrapper around the matching HTML element that merges a pre-set className with the one you pass in. All accept the native element's props.

Motion variants

Every Motion* variant supports all the props of its base component plus an optional index prop.