ui/components/typography

Typography

Terminal-styled typography wrapper for consistent text styling. Provides variants for body text, prose content, and compact displays, plus semantic h1-h6 headings with sensible default sizing.

Preview

tsx

1 import { Typography } from "@/components/ui/typography";2 3 function DemoLabel({ children }: { children: string }) {4   return (5     <span className="text-xs text-muted-foreground uppercase tracking-wider mb-2 block">6       {children}7     </span>8   );9 }10 11 export default function TypographyDefault() {12   return (13     <div className="space-y-6">14       <div>15         <DemoLabel>default (sm)</DemoLabel>16         <Typography>17           Standard body text for UI labels, descriptions, and general content. Optimized for18           readability at small sizes with relaxed line spacing.19         </Typography>20       </div>21 22       <div>23         <DemoLabel>prose</DemoLabel>24         <Typography as="p" variant="prose">25           Prose variant uses looser line spacing for comfortable reading of longer-form content like26           documentation and articles. Multiple paragraphs flow naturally with consistent vertical27           rhythm.28         </Typography>29       </div>30 31       <div>32         <DemoLabel>compact (xs)</DemoLabel>33         <Typography as="p" variant="compact" size="xs">34           Compact variant uses smaller text with tighter spacing, suitable for secondary35           information, captions, and dense data displays.36         </Typography>37       </div>38 39       <div>40         <DemoLabel>size=base</DemoLabel>41         <Typography size="base">42           Base size text for when you need slightly larger body copy.43         </Typography>44       </div>45 46       <div>47         <DemoLabel>truncate</DemoLabel>48         {/* The border makes the width constraint visible: the text is cut at the box edge. */}49         <div className="max-w-xs border border-border p-2">50           <Typography truncate>51             This text will be truncated with an ellipsis when it overflows its container boundary.52           </Typography>53         </div>54       </div>55 56       <div>57         <DemoLabel>lineClamp=2</DemoLabel>58         <div className="max-w-sm border border-border p-2">59           <Typography lineClamp={2}>60             This text is clamped to two lines. Any content beyond the second line will be hidden61             with an ellipsis. Useful for card descriptions, preview text, and anywhere you need62             controlled text overflow.63           </Typography>64         </div>65       </div>66     </div>67   );68 }69

Installation

$pnpm exec dgadd add ui/typography

[Installs to]src/components/ui/typography[Item]ui/typography

dgadd is not public on npm yet. Until the first release, pack @diffgazer/add from the repository and install that tarball into this app, which is what puts dgadd on pnpm exec.

UI components require Tailwind CSS v4. Local copy mode imports src/styles/styles.css; package mode uses @diffgazer/ui CSS once packages are available.

Usage

tsx

1 import { Typography } from "@/components/ui/typography";2 3 function DemoLabel({ children }: { children: string }) {4   return (5     <span className="text-xs text-muted-foreground uppercase tracking-wider mb-2 block">6       {children}7     </span>8   );9 }10 11 export default function TypographyDefault() {12   return (13     <div className="space-y-6">14       <div>15         <DemoLabel>default (sm)</DemoLabel>16         <Typography>17           Standard body text for UI labels, descriptions, and general content. Optimized for18           readability at small sizes with relaxed line spacing.19         </Typography>20       </div>21 22       <div>23         <DemoLabel>prose</DemoLabel>24         <Typography as="p" variant="prose">25           Prose variant uses looser line spacing for comfortable reading of longer-form content like26           documentation and articles. Multiple paragraphs flow naturally with consistent vertical27           rhythm.28         </Typography>29       </div>30 31       <div>32         <DemoLabel>compact (xs)</DemoLabel>33         <Typography as="p" variant="compact" size="xs">34           Compact variant uses smaller text with tighter spacing, suitable for secondary35           information, captions, and dense data displays.36         </Typography>37       </div>38 39       <div>40         <DemoLabel>size=base</DemoLabel>41         <Typography size="base">42           Base size text for when you need slightly larger body copy.43         </Typography>44       </div>45 46       <div>47         <DemoLabel>truncate</DemoLabel>48         {/* The border makes the width constraint visible: the text is cut at the box edge. */}49         <div className="max-w-xs border border-border p-2">50           <Typography truncate>51             This text will be truncated with an ellipsis when it overflows its container boundary.52           </Typography>53         </div>54       </div>55 56       <div>57         <DemoLabel>lineClamp=2</DemoLabel>58         <div className="max-w-sm border border-border p-2">59           <Typography lineClamp={2}>60             This text is clamped to two lines. Any content beyond the second line will be hidden61             with an ellipsis. Useful for card descriptions, preview text, and anywhere you need62             controlled text overflow.63           </Typography>64         </div>65       </div>66     </div>67   );68 }69

Semantic headings

Pass as="h1" through as="h6" to render semantic heading elements. Each level ships with a sensible default size; pass an explicit size prop to override.

`as`	Default `size`
`h1`	`3xl`
`h2`	`2xl`
`h3`	`xl`
`h4`	`lg`
`h5`	`base`
`h6`	`sm`

Preview

tsx

1 import type { ReactNode } from "react";2 import { Typography } from "@/components/ui/typography";3 4 function Row({ label, children }: { label: string; children: ReactNode }) {5   return (6     <div className="flex items-baseline gap-4">7       <span className="w-20 shrink-0 text-xs text-muted-foreground uppercase tracking-wider">8         {label}9       </span>10       {children}11     </div>12   );13 }14 15 export default function TypographyHeadings() {16   return (17     <div className="space-y-3">18       <Row label="h1 · 3xl">19         <Typography as="h1">The quick brown fox</Typography>20       </Row>21       <Row label="h2 · 2xl">22         <Typography as="h2">The quick brown fox</Typography>23       </Row>24       <Row label="h3 · xl">25         <Typography as="h3">The quick brown fox</Typography>26       </Row>27       <Row label="h4 · lg">28         <Typography as="h4">The quick brown fox</Typography>29       </Row>30       <Row label="h5 · base">31         <Typography as="h5">The quick brown fox</Typography>32       </Row>33       <Row label="h6 · sm">34         <Typography as="h6">The quick brown fox</Typography>35       </Row>36     </div>37   );38 }39

SectionHeader remains the right primitive for the small, uppercase, tracked section labels common throughout the product surface; reach for Typography when you need general semantic headings outside that pattern.

Weights and colors

weight and color are independent axes on every size. color="accent" reads the theme accent token, so it stays a deliberate highlight in both palettes.

Preview

tsx

1 import { Typography } from "@/components/ui/typography";2 3 export default function TypographyTones() {4   return (5     <div className="space-y-6">6       <div className="space-y-1">7         <span className="text-xs text-muted-foreground uppercase tracking-wider">weight</span>8         <Typography weight="normal">normal — default body weight</Typography>9         <Typography weight="medium">medium — mild emphasis</Typography>10         <Typography weight="semibold">semibold — labels and totals</Typography>11         <Typography weight="bold">bold — headings and alerts</Typography>12       </div>13 14       <div className="space-y-1">15         <span className="text-xs text-muted-foreground uppercase tracking-wider">color</span>16         <Typography color="default">default — primary reading color</Typography>17         <Typography color="muted">muted — secondary information</Typography>18         <Typography color="accent">accent — highlighted value</Typography>19       </div>20     </div>21   );22 }23

API Reference

Typography

Name	Type	Default	Description
as	"div" \| "p" \| "span" \| "h1" \| "h2" \| "h3" \| "h4" \| "h5" \| "h6"	"div"	Rendered HTML element. Use h1-h6 for semantic headings.
variant	"default" \| "prose" \| "compact"	"default"	Line-height token. Default for UI text, prose for long-form, compact for dense info.
size	"xs" \| "sm" \| "base" \| "lg" \| "xl" \| "2xl" \| "3xl"	"sm" (for non-headings); h1=3xl, h2=2xl, h3=xl, h4=lg, h5=base, h6=sm	Font-size token. Explicit value overrides the heading default.
weight	"normal" \| "medium" \| "semibold" \| "bold"	"normal" (for non-headings); h1-h6 auto-default to "bold"	Font-weight token. Explicit value overrides the heading default.
color	"default" \| "muted" \| "accent"	"default"	Text color token. default uses the foreground color, muted uses muted-foreground, accent uses the theme accent.
lineClamp	1 \| 2 \| 3 \| 4 \| 5 \| 6	—	Truncates after the given number of lines with an ellipsis.
truncate	boolean	false	Single-line truncation with ellipsis.
children	ReactNode	—	Text content.

Accessibility

Notes

Variants

Use 'default' for general UI text, 'prose' for longer-form content with wider line-height, and 'compact' for dense secondary information.

Semantic Elements

Use the 'as' prop to render the appropriate HTML element: 'p' for paragraphs, 'span' for inline text, 'div' for block content, and 'h1'-'h6' for semantic headings. Defaults to 'div'.

Heading Defaults

Each heading level has a default size (h1 = 3xl, h2 = 2xl, h3 = xl, h4 = lg, h5 = base, h6 = sm) and auto-defaults to bold weight. Pass explicit 'size' or 'weight' props to override.

Heading Semantics

Only 'as' decides the document outline: 'size' is purely visual and never changes the rendered element. Pick the heading level that follows the surrounding outline, then set 'size' to match the visual hierarchy — never pick 'as' to obtain a size.

Source

Install via CLI: pnpm exec dgadd add ui/typography.

Highlighted source loads after this disclosure opens. Browse the source repository.

Typography

Installation

Usage

Semantic headings

Weights and colors

API Reference

Typography

Accessibility

Notes

Variants

Semantic Elements

Heading Defaults

Heading Semantics

Source

View component source (6 files)