Prose
Content block component for editorial sections — a display heading followed by body paragraphs with line-length constraints. Provides its own @container.
Default
A heading + body paragraphs constrained to 55ch by default. The heading uses text-balance, body text uses text-pretty.
Design systems that start in code stay in code.
The traditional workflow — design in Figma, hand off to engineering, reconcile the drift — creates a translation layer that never stops costing time.
Starting in code means the design system is the production artifact. No translation, no drift, no reconciliation.
Custom Width
Override maxWidth for different contexts. Narrower for focused reads, wider for multi-column layouts.
Narrower constraint.
At 45ch, the reading line is tighter — good for sidebars or focused callouts where you want the reader's eye to move quickly.
Heading Levels
ProseHeading accepts an as prop for semantic heading level flexibility.
As h2 (default)
Body text following an h2 heading.
As h3
Body text following an h3 heading.