How to build an accessible Prose in React
Adds no roles of its own — it styles descendant native elements, so the document semantics of the underlying HTML (headings, lists, code) are preserved for assistive tech
When to use a Prose
- Styling long-form authored content (articles, docs, CMS output)
- Applying readable typography to raw HTML you do not control (markdown pipelines)
- Getting consistent spacing for headings, lists, code, and quotes in one wrapper
When not to use it
- Single typographic elements in app UI — use Heading, Text, or List directly
- Interactive component layouts — Prose only styles flow content
Accessibility
Role generic, verified at WCAG 2.2-AA.
Common mistakes
Avoid: Wrapping app UI (buttons, forms) in <Prose> for spacing
Prefer: Use layout primitives; reserve Prose for authored document content
Prose restyles all descendant HTML, which clobbers component styling and intent
Example
<Prose><h2>Install</h2><p>Run <code>npx cascivo init</code>.</p></Prose>