Foundations

Prose

Rich-text styling wrapper for CMS-rendered semantic markup.

Install

npx shadcn@latest add @alix/prose

Preview

Restructuring notes

Prose styles the semantic tags a CMS renderer has already produced. It does not parse rich text or choose the content model.

Paragraphs follow the body type scale.
Lists, links, and quotes inherit the surrounding surface tokens.

Keep rendering in the CMS adapter and styling in the design system.

Usage

<Prose>
  <PortableText value={page.body} />
</Prose>

Examples

Lists, quotes, and tables

One wrapper styles the full tag set a CMS body emits: nested headings, ordered and unordered lists, inline marks, blockquotes, and tables.

What the first review covers

The opening assessment separates liquidity from solvency so the plan targets the real constraint.

Thirteen-week cash position and covenant headroom.
Operating model and the margin bridge behind it.

Workstream	Owner
Cash and liquidity	Finance lead
Operating model	Performance lead

Liquidity tells you where you are; the operating model tells you how you got there.

<Prose>
  <h3>What the first review covers</h3>
  <p>The opening assessment separates <strong>liquidity</strong> from <em>solvency</em>.</p>
  <ol>
    <li>Thirteen-week cash position and covenant headroom.</li>
    <li>Operating model and the margin bridge behind it.</li>
  </ol>
  <table>…</table>
  <blockquote>
    Liquidity tells you where you are; the operating model tells you how you got there.
  </blockquote>
</Prose>

On a dark surface

Prose keys its links, quotes, and muted text to surface tokens, so dropping it into a navy Container remaps the whole tree for legibility.

Reading a cash crisis

The same styles carry onto the navy anchor. Headings, body, and links all remap to stay legible.

The decisions that stabilise a business are made in the first weeks.

<Container width="md" bgColor="primary" className="p-8">
  <Prose>
    <h3>Reading a cash crisis</h3>
    <p>The same styles carry onto the navy anchor. <a href="/insights">Links</a> remap too.</p>
    <blockquote>The decisions that stabilise a business are made in the first weeks.</blockquote>
  </Prose>
</Container>

When to use it

Use it for

Styling a CMS body field a renderer has already turned into bare semantic tags: Portable Text, a Contentful renderer, an HTML string.
As the rich-text fill for any ReactNode content slot, such as a SectionTitle description.
Long-form editorial bodies where headings, lists, quotes, and tables all need consistent, token-keyed styling.

Reach for something else

Individual headings or paragraphs you author yourself. Use the Text atom, which owns its element and level.
Parsing or rendering rich text. That stays in the consumer's CMS renderer; Prose only styles the output.
UI text inside controls. That is the control's own typography, never content prose.

Props

Prop	Type	Default	Description
children	ReactNode	–	A rendered rich-text tree of semantic tags; Prose styles it but never parses or renders CMS source data.