Use Prose.Root to style rich-text blocks with the Operate typographic scale. Set compact for nested content, or use Prose.Exclude to opt out of prose styling.

API

Installation

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

Usage

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

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

Compact

Use the compact scale for nested <Prose /> blocks, such as e-mail, chats or similar rich content.

<Prose.Root compact />

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

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

Inherit surrounding text

Use inherit when prose styling is needed inside an existing text context, such as a table cell.

<Prose.Root inherit />

Sensible max width

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

<Prose.Root maxWidth />

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

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

Removing default color

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

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

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

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

Sandboxing

To isolate content from the outer Prose.Root, wrap it in Prose.Exclude to opt out of prose styling.

<Prose.Root>
  <Prose.Exclude>
    <p>This content is not styled as prose.</p>
  </Prose.Exclude>
</Prose.Root>

Because each .prose element roots its own scope, you can nest a new <Prose.Root /> (or anything that renders one internally, like Editor) inside a <Prose.Exclude /> block: it starts a fresh scope and styles normally, and nesting can continue to any depth (prose → not-prose → prose → …).

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

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

Nesting prose within itself

Unlike @tailwindcss/typography, Prose.Root can be excluded and redefined within itself, infinitely.

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

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

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

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

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

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

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

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

Implementation details

Parity with @tailwindcss/typography

prose.css is a handwritten replacement for the @tailwindcss/typography plugin: every element the plugin’s default theme styled is carried over, including ones we don’t otherwise use (see “Unsupported” elements below). The exception is ol[type] numbering, which never had any visible effect (see below). Not carried over, because nothing in the app ever used them: the color themes (prose-gray, prose-slate, …), prose-invert dark mode, and the consumer-facing prose-*: element variants (e.g. prose-h1:). Style descendants with plain selectors instead ([&_h1]:…).

“Unsupported” elements

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

• code
• pre
• kbd
• h4, h5, and h6
• dl, dt, and dd
• figure, figcaption, and picture
• img
• video
• table, thead, tr, th, td, and tbody
• <p class="lead"> (a larger intro paragraph)

<ol type="A" | "a" | "I" | "i" | "1"> numbering isn’t supported: Slack-style ordered lists always number 1 → a → i by nesting depth.

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

A lead paragraph that introduces the section below.

Heading 4

Heading 5

Heading 6

Press ⌘ K to open the command menu, then a bold link follows.

Term

The definition of the term.

Another term

Its definition.

1. Upper-alpha item
2. Upper-alpha item

1. Lower-alpha item
2. Lower-alpha item

1. Upper-roman item
2. Upper-roman item

1. Lower-roman item
2. Lower-roman item

1. Decimal item
2. Decimal item

Adjacent element resets

Name	Role
Ada with inline code	Engineer
Grace	Admiral
Total	2

---

After an hr
Cell