> ## Documentation Index
> Fetch the complete documentation index at: https://developers.reintersect.com/llms.txt
> Use this file to discover all available pages before exploring further.

# Text components

> Text, Heading, Prose, Code, Quote, Time, Duration, Icon and the rich text components.

> Reintersect apps are in developer preview. Names and limits can still change before general
> release.

## 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`.

```tsx theme={null}
<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`.

```tsx theme={null}
<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.

```tsx theme={null}
<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.

```tsx theme={null}
<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.

```tsx theme={null}
<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.

```tsx theme={null}
<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.

```tsx theme={null}
<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.

```tsx theme={null}
<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](/components/overview#icons) 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. |


This documentation is built and hosted on [Mintlify](https://mintlify.com), a developer documentation platform.