'/%3e%3cg%20transform='translate(170%20205)%20scale(0.3606)'%20fill='%23111011'%3e%3cpath%20d='M497%20640H359L248%20320%20122%20640H0L256%200z'/%3e%3cpath%20d='M292.43%20640H200.8L248%20522z'/%3e%3cpath%20d='M335%200h138l111%20320L710%200h122L576%20640z'/%3e%3c/g%3e%3c/svg%3e){kind=small}
Typography
Prose
Styles long-form content you don't control element by element: articles, docs, Markdown, CMS HTML.
Ant Design: Typography
import { Prose } from '@alea/ui';
Examples
Article
Headings, lists, quotes, code, tables and images from any source.
Motion with a system
Fourteen patterns instead of a hundred keyframes. Each one is built from tokens and has a reduced-motion fallback.
What changes
- Overlays pop from their trigger
- Selection glides between items
- Errors nudge once
Motion should explain what changed, never decorate.
.alea-popover[data-entering] { animation: alea-pop var(--alea-motion-duration-base); }| Pattern | Duration |
|---|---|
| Pop | 250 ms |
| Rise | 400 ms |
Props
Prose props
Styles long-form content you don't control element by element: articles, docs, CMS HTML (Tailwind Typography, Chakra Prose).
| Prop | Type | Default | Description |
|---|---|---|---|
childrenrequired | ReactNode | - | Rich content: headings, paragraphs, lists, links, quotes, code, images, tables (from Markdown or a CMS). |
className | string | - | |
size | "sm" | "base" | 'base' | sm (14 px) or base (16 px, default) text. |
Accessibility
- Keep headings in order inside the content; Prose styles them but can't fix a skipped level.
Do and don't
Do
- Wrap CMS or Markdown output in Prose.
Don't
- Don't put interface components inside Prose: it is for reading.