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"

Setup: installing any component also installs nostalgia-theme (the --os9-* tokens and os9-* utilities) via registryDependencies. To add the theme on its own: npx shadcn@latest add https://nostalgia-ui.com/r/nostalgia-theme.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 element

Semantic Elements

Drop-in equivalents of the shadcn typography styles, each rendering its own semantic element with the OS9 type scale.

RetroH1

Mac OS 9

RetroH2

The Best Internet Software Ever

RetroH3

Sherlock 2

RetroH4

Multiple Users

RetroLead

Nine powerful new features that make your Mac your personal Internet assistant.

RetroLarge

Are you sure?

RetroSmall

Version 9.2.2

RetroMuted

Last modified: Tue, Dec 4, 2001

Prose

Read Me First

Welcome to Mac OS 9. This document covers late-breaking news about your system software.

Installing

Before installing, run Disk First Aid on your startup disk and turn off any third-party extensions with the Shift key held down.

“The best Mac OS ever.” — the box it came in

Requirements

A Macintosh computer with a PowerPC processor
At least 40 MB of physical RAM
Approximately 200 MB of free disk space

Install order

Start up from the Mac OS 9 CD
Open Mac OS Install
Follow the on-screen instructions

© 1983–2001 Apple Computer, Inc. All rights reserved.

Use the `as` prop to change the rendered HTML element. The variant prop controls the visual style independently of the semantic element.

View source Back to overview