Columns
Arrange related documentation content in a responsive grid of cards or plain columns.
<Columns columns={2}>
<Column title="Quickstart" href="/quickstart">
Create your first documentation page.
</Column>
<Column title="Configuration" href="/manage-website/configuration">
Set site-wide options in one file.
</Column>
</Columns>Columns arranges direct Column children in a responsive grid. It is ideal for a compact group of next steps, feature summaries, installation choices, or related guides. A column can be a static content block or a linked card, so the same layout works for explanatory content and navigation.
Responsive behaviour and common uses
All grids use one column on narrow screens. A two-column grid becomes two columns from the sm breakpoint; a three-column grid becomes two columns from sm and three from xl. This lets you use the same MDX source for desktop overview pages and mobile reading without writing breakpoint-specific markup.
Use the default card surface when each column represents an equal destination or self-contained idea. Add href to make an entire card clickable. Use variant="plain" for lighter, editorial layouts where the grid should organise content without introducing a border around every item. A Column can override the variant inherited from Columns.
Only direct Column elements are rendered by Columns. Put regular Markdown, code blocks, or other MDX components inside a Column when you need arbitrary content side by side.
Install
Configure
Choose the content directory and navigation.
Publish
Deploy the generated documentation site.
Build a learning path
Use three concise linked cards to make an overview page feel like a guided journey rather than a flat list of pages.
<Columns columns={3}>
<Column title="Plan" href="/introduction">
Understand the building blocks before changing your site.
</Column>
<Column title="Build" href="/quickstart">
Create a focused first page with MDX and components.
</Column>
<Column title="Publish" href="/deploying/vercel">
Ship the documentation once the preview looks right.
</Column>
</Columns>Properties
The number of columns at the widest supported layout. It defaults to
2. Use 3 for short, equally weighted items; use
2 when cards contain more text.
The default presentation for every child column. It defaults to
card. A child can override this value with its own
variant prop.
Direct Column elements to place in the grid. Non-element
children are ignored, so keep the grid's content inside a
Column.
A Column prop that adds a heading above the column content.
Omit it when the child content already provides its own heading.
A Column prop that changes the column from a div
into an anchor. Use a relative path for another documentation page or a full
URL for an external destination.
A Column prop that overrides the parent grid's variant for one
item. It defaults to the value provided by Columns.