Typography
@sushindustries/uiThe type scale as components: Heading with outline and size separated, the Label eyebrow, the Lead. One decision, made once.
The type scale as four components instead of memorised class names: Heading
(with its outline level and visual size kept separate), Label for the
eyebrow above a section, Lead for the paragraph under a title, and Text
for body copy elsewhere. Reach for these instead of an ad-hoc <p> with a
font-size class.
tanstacktanstack add https://adamjurek.com/r/tanstack/typography.json
shadcnpnpm dlx shadcn@latest add https://adamjurek.com/r/shadcn/typography.jsonWhy it is built this way
The scale itself already lived in atoms, as CSS variables and classes. What
kept going wrong wasn't the scale - it was the reaching for it: every page
re-decided which class a heading takes, and whether the eyebrow above it is a
Label. These four components make that decision once, so a page built from
them can't disagree with the next one about what a title is. as and size
are separate for the same reason: the outline is for screen readers and the
doc aside, and it breaks the moment a page picks h3 just because it wanted
the smaller font.
Install commands are not written here
Anything in packages/ui/registry.ts gets its TanStack and shadcn commands
attached automatically, so there is nothing to keep in sync.
Install
tanstack add https://adamjurek.com/r/tanstack/typography.jsonpnpm dlx shadcn@latest add https://adamjurek.com/r/shadcn/typography.jsonpnpm add @sushindustries/ui @sushindustries/atomsWhat you get
| Version | 0.1.0 |
| Category | content · Text |
| Files | typography.tsx |
| Dependencies | None |
| Also installs | iconIconThe glyph set, generated from a Markdown table where every drawing carries its reason. One component, typed names, no icon font.@sushindustries/ui · content |
| Tags | typography, heading, no-deps |
No runtime dependencies
It brings nothing with it beyond the stylesheet.