Typography

A single component that renders the full typographic scale — headings, body text, code, blockquote, and muted variants — using semantic design tokens.

Installation

npx @obi/ui add typography

Preview

Heading 1

Heading 2

Heading 3

Lead paragraph text that introduces the section.

Body paragraph with regular weight and line-height.

Muted helper text for supporting detail.

Usage

import Typography from '@/src/components/Typography/Typography';

export default function Example() {
  return (
    <div className="flex flex-col gap-3">
      <Typography variant="h1">Heading 1</Typography>
      <Typography variant="h2">Heading 2</Typography>
      <Typography variant="h3">Heading 3</Typography>
      <Typography variant="h4">Heading 4</Typography>
      <Typography variant="lead">Lead paragraph text</Typography>
      <Typography variant="p">Body paragraph with normal line height.</Typography>
      <Typography variant="muted">Muted helper text</Typography>
      <Typography variant="small">Small caption text</Typography>
      <Typography variant="code">const x = 42;</Typography>
      <Typography variant="blockquote">A quoted passage from a source.</Typography>
    </div>
  );
}

Props

Name	Type	Default	Description
variant	"h1" \| "h2" \| "h3" \| "h4" \| "p" \| "lead" \| "muted" \| "small" \| "code" \| "blockquote"	—	The typographic style to render.
as	ElementType	derived from variant	Override the rendered HTML element while keeping the variant styles.
className	string	""	Additional classes merged onto the element.