RetroText
Typography component with 8 variants matching the Mac OS 9 type system.
Installation
npx shadcn@latest add "https://nostalgia-ui.com/r/retro-typography.json"
Import
import { RetroText } from "@/components/ui/retro-typography"Typography component with 8 variants matching the Mac OS 9 type system. Uses Charcoal for headings, Geneva for body, Monaco for monospace, and Apple Garamond for editorial/display text.
All Variants
editorial
The quick brown fox jumps over the lazy dog.
Apple Garamond, 24px — for hero text and large display
headline
The quick brown fox jumps over the lazy dog.
Charcoal, 12px, tracked — for section headings and titles
smallHeadline
The quick brown fox jumps over the lazy dog.
Charcoal, 10px, tracked — for smaller headings and labels
body
The quick brown fox jumps over the lazy dog.
Geneva, 10px — default body text
bodySmall
The quick brown fox jumps over the lazy dog.
Geneva, 9px — fine print and secondary text
bodyBold
The quick brown fox jumps over the lazy dog.
Geneva, 9px, bold — emphasized body text
bodySlanted
The quick brown fox jumps over the lazy dog.
Geneva, 9px, italic — quotes and special emphasis
mono
The quick brown fox jumps over the lazy dog.
Monaco, 10px — code, file paths, and technical content
Practical Usage
Welcome to Mac OS 9
About This Macintosh
Built-in Memory: 256 MB. Virtual Memory is on. Largest Unused Block: 180 MB.
System version 9.2.2
/System Folder/System
Custom Elements
Rendered as h3
Rendered as spanRendered as code elementUse the `as` prop to change the rendered HTML element. The variant prop controls the visual style independently of the semantic element.