Display
Typography
Six sizes is the entire scale, and the shortness is the point: every extra size is one more decision, and on a quiet page hierarchy comes from weight and colour long before it comes from size. When in doubt, take the smaller one. The component separates the three things that usually get tangled - size, colour, and element - so a visually small heading can still be an h2 and the document outline survives the design.
npx shadcn@latest add @minflow/typographyWhere to use it
- Everywhere. This is the scale the rest of the library is built on.
- Whenever a heading needs to look smaller than its level - set the element with `as` and the size with `variant`.
- Not as a replacement for semantic HTML: this styles an element, it does not choose one for you.
Variations
The scale
The whole vocabulary in one place, for design review and for deciding which step a new piece of text belongs on.
Tones
Colour as hierarchy. Muted is for anything supporting; the status tones are reserved for status and never used decoratively.