Text components

Text

One paragraph of plain or inline-formatted text. Use it for a short line, such as who opened something and when. For longer rich text, use Prose.

<Text muted maxLines={2}>
  Opened by <Bold>Ada</Bold> <Time datetime={openedAt} format="relative" />
</Text>

Prop	Type	Required	Description
`children`	JSX	Yes	Text and inline content: `Bold`, `Italic`, `Strike`, `InlineCode`, `Link`, `Mention`, `Emoji`, `HardBreak`, `Time`, `Duration`, `Icon`, `Badge`, `Status` and `Person`.
`muted`	`boolean`	No	Draw the text in the quieter secondary colour.
`maxLines`	`1 \| 2 \| 3`	No	Clamp after this many lines, with an inline Show more. Agent text always has the full text.
`audience`	`Audience`	No	Limit who sees it.

Without maxLines, text never clamps. A Text inside a Footer is drawn in the footer’s quiet style and holds at most 120 characters. A single text node holds at most 2,000 characters.

Heading

A heading inside the block body. Use it to label a part of a longer block. For the block’s own title, use Header.

<Heading level={2}>Rollout plan</Heading>

Prop	Type	Required	Description
`children`	JSX	Yes	The heading text.
`level`	`1 \| 2 \| 3`	No	Default `2`. Relative to the block, not the page.
`audience`	`Audience`	No	Limit who sees it.

Levels are relative. The block’s header is one heading level, its sections are the next, and a Heading (or a heading inside Prose) sits below those, so it never outranks the block it’s in. level={1} looks like a section title, and levels 2 and 3 look like labels. Heading needs the full width, so it can’t go in a Column. In agent text it becomes a Markdown heading (## Rollout plan).

Prose

Longer rich text with paragraphs, headings, lists, quotes and code. Use it for release notes or an incident write-up.

<Prose>
  <Paragraph>
    The deploy failed on <InlineCode>migrate</InlineCode>. See the{" "}
    <Link href="https://ci.example.com/runs/42">CI run</Link>.
  </Paragraph>
  <UnorderedList>
    <ListItem>Roll back the schema change.</ListItem>
    <ListItem>Re-run the deploy.</ListItem>
  </UnorderedList>
</Prose>

Prop	Type	Required	Description
`children`	JSX	Yes	`Paragraph`, `Heading`, `UnorderedList`, `OrderedList`, `Blockquote` and code blocks.
`audience`	`Audience`	No	Limit who sees it.

The text inside one Prose is capped at 10,000 characters, and it clamps after 12 lines with an inline Show more. Lists nest at most two levels, a quote can’t hold another quote, and headings and code blocks can’t sit inside a list or quote. Prose needs the full width, so it can’t go in a Column. In agent text it becomes Markdown.

Rich text components

These come from the same document runtime as Reintersect replies. All of them work inside Prose, and the inline ones also work inside Text:

Component	Props	Notes
`Paragraph`	`children`	A paragraph inside `Prose`.
`Bold`, `Italic`, `Strike`	`children`	Inline marks. Struck text can’t be a link.
`InlineCode`	`children`	Inline code.
`Link`	`href`, `title?`, `children`	`https:` and `mailto:` links survive validation. Links are always underlined, and they’re the only underlined text.
`Mention`	`type: "person" \| "circle" \| "conversation"` and `id`, or `type: "circle"` and `slug`	Mentions a member, circle or conversation in the workspace.
`Emoji`	`name`	A stored emoji name, such as `"rocket"`.
`HardBreak`	none	A line break inside a paragraph.
`UnorderedList`, `OrderedList`	`children`, `start?` on `OrderedList`	Lists of `ListItem`.
`ListItem`	`children`	One list item.
`Blockquote`	`children`	A quoted passage.

Code

A block of code with optional syntax highlighting. Use it to show a command, a query or a snippet.

<Code language="sql">{"select count(*) from deployments where state = 'failed';"}</Code>

Prop	Type	Required	Description
`children`	`string \| string[]`	Yes	The code.
`language`	`string`	No	A supported highlighting language or alias, such as `ts`, `sql` or `bash`.
`audience`	`Audience`	No	Limit who sees it.

For inline code, use InlineCode inside Text or Paragraph. Like Prose, Code needs the full width and can’t go in a Column.

Quote

A quotation with optional attribution. Use it to show what someone said, such as a customer comment, with who said it and when.

<Quote by="Ada Lovelace" at="2026-10-04T16:20:00Z" href="https://support.example.com/t/981">
  <Paragraph>The export finally works on large workspaces. Thank you!</Paragraph>
</Quote>

Prop	Type	Required	Description
`children`	JSX	Yes	One or more `Paragraph`s.
`by`	`string`	No	Who said it, up to 60 characters.
`at`	`string \| Date`	No	When it was said.
`href`	`string`	No	An `https://` link to the source.
`audience`	`Audience`	No	Limit who sees it.

A long quote clamps after six lines with an inline Show more.

Time

A date or time, shown in each viewer’s time zone and locale. Use it for timestamps instead of formatting dates yourself.

<Time datetime="2026-10-05T09:30:00Z" format="relative" />

Prop	Type	Required	Description
`datetime`	`string \| Date`	Yes	An ISO 8601 timestamp or a `Date`.
`format`	`"relative" \| "date" \| "datetime" \| "time"`	No	How to show it.

Relative times stay current without a re-render, and they count calendar days in the viewer’s time zone: “yesterday”, “3 days ago”, “2 weeks ago” for 14 days, then months and years. A "time" that isn’t today also shows its date. Place Time inline inside Text, Header or Item.

Duration

An elapsed time, such as how long a build took. Use it instead of writing the duration out as text.

<Text>
  Built in <Duration ms={252000} />
</Text>

Prop	Type	Required	Description
`ms`	`number`	Yes	Whole milliseconds, from 0 to about ten years.

Reintersect shows at most two neighbouring units, such as 4m 12s or 3d 4h, and milliseconds under a second, such as 450ms. Agent text uses the same format.

Icon

One icon from the allowlist. Use it inline with text or in a header’s leading slot.

<Header leading={<Icon name="git-pull-request" tone="success" label="Open pull request" />}>
  Add the export button
</Header>

Prop	Type	Required	Description
`name`	`IconName`	Yes	A Lucide icon name or `"app"`.
`label`	`string`	With `tone`	Accessible label, up to 32 characters. Leave it out for decorative icons.
`tone`	`Tone`	No	Colour the icon by meaning. A toned icon needs a `label`, so the meaning reaches screen readers too.

Catalog

Recipes

Text

Heading

Prose

Rich text components

Code

Quote

Time

Duration

Icon

​Text

​Heading

​Prose

​Rich text components

​Code

​Quote

​Time

​Duration

​Icon

Text

Heading

Prose

Rich text components

Code

Quote

Time

Duration

Icon