Installation

import { Prose } from "@o/pipeline/components/prose";

Usage

Default

import { Prose } from "@o/pipeline/components/prose";

export default function Example() {
  return <Prose />;
}

Comfortable

import { Prose } from "@o/pipeline/components/prose";

export default function Example() {
  return <Prose />;
}

“Unsupported” Elements

The following elements work with Prose, but aren’t styled according to our branding guidelines — use with caution.

• code
• pre
• h4
• dl, dt, and dd
• figure, and figcaption
• img
• video
• table, thead, tr, th, td, and tbody

See OP-2192: Design for (or disable) additional elements within Prose for more details.

Sensible Max Width

By default, Prose, doesn’t impose any width constraints, but it does offer a max-width optimized for legibility.

<Prose maxWidth />

import { Prose } from "@o/pipeline/components/prose";

export default function Example() {
  return <Prose />;
}

Removing Default Color

By default, Prose sets opinionated defaults. This can be overridden where necessary.

<Prose color={false} className="text-cornflower" />

import { Prose } from "@o/pipeline/components/prose";

export default function Example() {
  return <Prose />;
}

Sandboxing

To isolate content from the outer Prose, you can use the unset prop (which uses @tailwindcss/typography’s not-prose class under-the-hood)

import { Prose } from "@o/pipeline/components/prose";

export default function Example() {
  return <Prose />;
}