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

# Layout components

> Stack, Row, Columns, Column and Callout arrange content without exposing pixels.

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

Layout components say how content is grouped, without pixel values. Reintersect picks every gap
from the relationship between siblings, and on narrow screens it stacks columns. See
[What Reintersect decides](/components/overview#what-reintersect-decides).

## Stack

Groups children so they're spaced as one unit. Blocks already stack their direct children, so use
`Stack` when a few pieces belong together and should sit apart from the content around them. A stack
can't hold another stack.

```tsx theme={null}
<Stack>
  <Text>Ada approved.</Text>
  <Text muted>Waiting on Grace.</Text>
</Stack>
```

| Prop | Type | Required | Description |
| - | - | - | - |
| `children` | JSX | Yes | The grouped content. |
| `audience` | `Audience` | No | Limit who sees it. |

## Row

A line of text with a few small buttons at its end. Use it for a sentence that has its own quick
actions, such as a checklist item with **Done** and **Skip**. A row holds one or two `Text` or
`AvatarStack` elements, then up to three `Button` or `Menu` accessories.

```tsx theme={null}
<Row>
  <Text>Update the status page</Text>
  <Button label="Done" icon="check" action={actions.complete.with({ item: "status-page" })} />
  <Button type="link" label="Open" href="https://status.example.com" />
</Row>
```

| Prop | Type | Required | Description |
| - | - | - | - |
| `children` | JSX | Yes | One or two `Text` or `AvatarStack`, then up to three `Button` or `Menu`. |
| `audience` | `Audience` | No | Limit who sees it. |

Buttons in a row are small accessory buttons that line up with the text. They're never primary, and
their labels are unique within the row. A row with only one child renders as that child. To put
badges or a time next to text, place them inline in the `Text`. Agent text joins the children with
spaces.

## Columns and Column

Two or three columns side by side. Use them to place groups of content next to each other, such as
two sets of facts.

```tsx theme={null}
<Columns>
  <Column>
    <Facts>
      <Fact label="Owner">Ada Lovelace</Fact>
      <Fact label="Team">Payments</Fact>
    </Facts>
  </Column>
  <Column>
    <Facts>
      <Fact label="Opened">
        <Time datetime="2026-10-05T09:30:00Z" format="date" />
      </Fact>
      <Fact label="Priority">P1</Fact>
    </Facts>
  </Column>
</Columns>
```

| Prop | Component | Type | Required | Description |
| - | - | - | - | - |
| `children` | `Columns` | `Column` elements | Yes | Two or three columns. |
| `audience` | `Columns` | `Audience` | No | Limit who sees them. |
| `children` | `Column` | JSX | Yes | The column's content. |

Columns sit side by side only when every column gets at least 200px, measured on the `Columns`
itself: 424px for two columns and 648px for three. Below that, they all stack into one column. In a
conversation thread, two columns sit side by side and three stack.

`Columns` go at the block, section, tab or form level. A `Column` can't hold a `Table`, `Chart`,
`Prose`, `Heading` or `Code`, because those need the full width.

## Callout

A highlighted note inside a block. Use it for something viewers should notice, such as a warning that
a deployment is waiting for review.

```tsx theme={null}
<Callout tone="warning" title="Waiting for review">
  <Text>Two approvals are needed before this can ship.</Text>
</Callout>
```

| Prop | Type | Required | Description |
| - | - | - | - |
| `children` | JSX | Yes | `Text`, `Prose` and `MetaList` only. |
| `tone` | `Tone` | No | `neutral`, `info`, `success`, `warning` or `danger`. |
| `icon` | `IconName` | No | Only on a neutral or untoned callout. A toned callout shows its tone's glyph. |
| `title` | `string` | No | A short heading, up to 80 characters. Agent text starts with it. |
| `audience` | `Audience` | No | Limit who sees it. |

A callout holds text only: no buttons, and no callouts inside callouts. When a callout reports an
error, put **Retry** in the block's root `Actions`. Screen readers hear the tone's word, such as
"Warning", before the callout's text.


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