Columns

Use Columns when related content should be scanned together, such as choices, comparisons, checklists, or a small grid of cards. Each column must be wrapped in a Column component.

Plan

Define the docs structure, navigation, and first pages.

Publish

Review the changes and publish the site when everything is ready.

<Columns columns={2}>  <Column>   ### Plan   Define the docs structure, navigation, and first pages.   </Column>  <Column>   ### Publish   Review the changes and publish the site when everything is ready.   </Column></Columns>

Structure

Columns accepts either two or three columns. It does not create multiple rows automatically. If you need another row, add another Columns block.

First column

Add Markdown, links, lists, or components.

Second column

Keep each column focused and easy to scan.

Third item

Start a new row with another Columns block.

Fourth item

This keeps layout behavior predictable.

<Columns columns={2}>  <Column>   ### First column   Add Markdown, links, lists, or components.   </Column>  <Column>   ### Second column   Keep each column focused and easy to scan.   </Column></Columns> <Columns columns={2}>  <Column>   ### Third item   Start a new row with another `Columns` block.   </Column>  <Column>   ### Fourth item   This keeps layout behavior predictable.   </Column></Columns>

Three columns

Set columns={3} for compact summaries or groups of similarly sized items.

Write

Create pages using MDX.

Preview

Check the site locally.

Publish

Ship the latest version.

<Columns columns={3}>  <Column>   ### Write   Create pages using MDX.   </Column>  <Column>   ### Preview   Check the site locally.   </Column>  <Column>   ### Publish   Ship the latest version.   </Column></Columns>

Rich content

Columns can contain normal Markdown or other docs components. This is especially useful for placing cards side by side.

Quickstart

Build and publish your first docs site.

Content model

Learn how content, navigation, and configuration fit together.

<Columns columns={2}>  <Column>   <Card    title="Quickstart"    href="/getting-started/quickstart"    icon="lucide:rocket"  >    Build and publish your first docs site.  </Card>   </Column>  <Column>   <Card    title="Content model"    href="/getting-started/content-model"    icon="lucide:blocks"  >    Learn how content, navigation, and configuration fit together.  </Card>   </Column></Columns>

You can also mix components with plain Markdown.

Checklist

Add the page title
Write the introduction
Link to related docs

<Columns columns={2}>  <Column>   ### Checklist   - Add the page title  - Write the introduction  - Link to related docs   </Column>  <Column>   <Callout type="tip" title="Keep columns short">    Columns work best when each item has a similar amount of content.  </Callout>   </Column></Columns>

Responsive behavior

Columns respond to the width of the component, not just the width of the screen. This keeps layouts predictable when the docs content area changes size.

Two-column layouts collapse to one column when the component becomes narrow. Three-column layouts collapse earlier so each column has enough room to remain readable.

Props

Prop	Type	Default	Description
`columns`	`2` or `3`	`2`	Number of columns in the row. The component must contain exactly this many `Column` children.

Column

Column does not accept props. Use it only as a direct child of Columns.