Installation

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

Usage

Default

Heading 1

Heading 2

Heading 3

Paragraph with bold, italic, underlined, and ~~strikethrough~~ text.

Paragraph with a link, followed by a horizontal rule.

List item
List item
List item
- List item
- List item
  1. List item
  2. List item
List item

List item
List item
1. List item
2. List item
  - List item
  - List item
List item

Blockquote

Comfortable

Heading 1

Heading 2

Heading 3

Paragraph with bold, italic, underlined, and ~~strikethrough~~ text.

Paragraph with a link, followed by a horizontal rule.

List item
List item
List item
- List item
- List item
  1. List item
  2. List item
List item

List item
List item
1. List item
2. List item
  - List item
  - List item
List item

Blockquote

“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.

Removing Max Width

By default, Prose, sets a max-width optimized for legibility. This can be overridden where necessary.

<Prose maxWidth={false} />

Heading 1

Heading 2

Heading 3

Paragraph with bold, italic, underlined, and ~~strikethrough~~ text.

Paragraph with a link, followed by a horizontal rule.

List item
List item
List item
- List item
- List item
  1. List item
  2. List item
List item

List item
List item
1. List item
2. List item
  - List item
  - List item
List item

Blockquote

Removing Default Color

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

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

Heading 1

Heading 2

Heading 3

Paragraph with bold, italic, underlined, and ~~strikethrough~~ text.

Paragraph with a link, followed by a horizontal rule.

List item
List item
List item
- List item
- List item
  1. List item
  2. List item
List item

List item
List item
1. List item
2. List item
  - List item
  - List item
List item

Blockquote

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)

Warning

Note that you can’t nest new <Prose /> instances within a <Prose unset /> block at this time.

See the @tailwindcss/typography documentation for further reading

Heading 1

Heading 2

Heading 3

Paragraph with bold, italic, underlined, and ~~strikethrough~~ text.

Paragraph with a link, followed by a horizontal rule.

List item
List item
List item
- List item
- List item
  1. List item
  2. List item
List item

List item
List item
1. List item
2. List item
  - List item
  - List item
List item

Blockquote