Prose

Prose applies the host’s reading typography to whatever rich text it wraps. Headings, paragraphs, lists, links, blockquotes, and code all pick up consistent rhythm, tone, and font from the injected tokens. It owns the styling, not the parsing, so bring your own markdown parser upstream and hand Prose the result. The preview below is the real component from @nimblebrain/synapse/ui, live.

import { Prose } from "@nimblebrain/synapse/ui";

<Prose>
  <h2>Section title</h2>
  <p>A paragraph of body copy.</p>
  <ul>
    <li>First point</li>
    <li>Second point</li>
  </ul>
</Prose>;

Children or HTML

Pass pre-rendered React nodes as children, or a trusted, pre-sanitized HTML string as html, useful when a markdown parser hands you a string. The html path is inserted verbatim, so sanitize upstream; only pass HTML you control.

<Prose html={renderedMarkdownHtml} />

Props

Prose extends HTMLAttributes<HTMLDivElement> (minus children and dangerouslySetInnerHTML), so className, style, id, and other div attributes pass straight through. Provide either html or children, not both.

Prop	Type	Default
html	string	None
children	ReactNode	None
…rest	HTMLAttributes<HTMLDivElement>	None

Related

• Heading: standalone display type outside a prose block.
• Text: a single run of body copy.
• Stack: stack a prose block among other sections.