Prose
Wrapper that styles raw descendant HTML — headings, lists, code, quotes, tables
Category: display · WCAG 2.2-AA · typography, prose, content, markdown, article
Props
| Prop | Type | Default | Description |
|---|---|---|---|
children | React.ReactNode | — | Authored flow content (headings, paragraphs, lists, code, tables) to style. |
dangerouslySetInnerHTML | { __html: string } | — | Rendered HTML you do not control (CMS, markdown pipelines). Sanitize first. |
className | string | — | Additional CSS class names merged onto the root element. |
Design tokens
--cascivo-font-sans--cascivo-font-mono--cascivo-font-semibold--cascivo-leading-tight--cascivo-leading-relaxed--cascivo-tracking-tight--cascivo-color-text--cascivo-color-text-subtle--cascivo-color-accent--cascivo-color-accent-hover--cascivo-color-surface--cascivo-color-border--cascivo-color-border-strong--cascivo-radius-indicator--cascivo-radius-surface
When to use
- 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
- Single typographic elements in app UI — use Heading, Text, or List directly
- Interactive component layouts — Prose only styles flow content
How to build an accessible Prose in React →
Examples
Authored content
<Prose><h2>Install</h2><p>Run <code>npx cascivo init</code>.</p></Prose>Rendered markdown
The use case: HTML you do not control (CMS, markdown pipelines)
<Prose dangerouslySetInnerHTML={{ __html: html }} />Related components
- Heading — Use Heading/Text directly in app UI; Prose handles authored content