Typography

Prose styling for content you did not author element by element — rendered markdown, a CMS body, a changelog. Headings start at h2, since the page already has its h1.

src/components/ui/typography.tsx

About

From the component's own source, where it was written.

Prose styling for content you did not author element by element — rendered markdown, a CMS body, a changelog.

Descendant selectors rather than styled components, because the content arrives as plain HTML from a markdown renderer and there is nothing to swap.

Vertical rhythm is set with space-y-style adjacent-sibling margins rather than a margin on every element. A margin on each one collapses differently depending on what precedes it, which is why prose blocks tend to have too much space after headings and too little between list items.

Headings deliberately start at h2. A prose block is page *content*, and the page already has its h1 — a body that ships its own would give the document two, which is the most common heading-order failure there is.

Install

npx astralyx-ui add typography

Usage

import { Typography } from '@/components/ui/typography'

<Typography dangerouslySetInnerHTML={{ __html: renderedMarkdown }} />

Composer

Change the props and the source below follows.

Configuration in CSS

Tailwind v4 moves configuration into CSS. Define tokens in an @theme block and the utilities are generated from them.

What changes

No tailwind.config.js for tokens
Custom properties inherit through the tree

The token and the class that uses it live in one file.

Props

size

tsx

<Typography size="default">
  {renderedMarkdown}
</Typography>

Examples

Rendered markdown

tsx

<Typography>{renderedMarkdown}</Typography>

API

Generated from the source, so it cannot fall behind the code. One table per exported component, then hooks, functions and types.

`Typography`

Prose styling for content you did not author element by element — rendered markdown, a CMS body, a changelog.

Extends ComponentProps<'div'>.

Prop	Type	Default	Description
size	'sm' \| 'default' \| 'lg'	'default'	Base text size; the scale within the block is relative.

Functions

Function	Signature	Description
PROSE	string	The class string, exported for applying to an element you already control.

Behaviour

Topic	Detail	Description
rhythm	adjacent siblings	Spacing comes from `* + *` rules rather than a margin on every element, which is why prose blocks usually have too much space after headings and too little between list items.
headings	h2 and below	A prose block is page content; shipping its own h1 gives the document two.