Components

Columns

Place any content side by side in a responsive grid.

Use Columns and Column for multi-column layouts that are not pure card grids. Columns collapse to a single column below 768px. Prefer CardGroup when every child is a Card.

Basic usage#

Install

pnpm install

Run

pnpm dev

<Columns cols={2}>
  <Column>
    **Install**

    ```bash
    pnpm install
    ```
  </Column>
  <Column>
    **Run**

    ```bash
    pnpm dev
    ```
  </Column>
</Columns>

With cards#

Installation

Configure

Write

<Columns cols={3}>
  <Card title="Installation" icon="rocket" href="/docs/installation" />
  <Card title="Configure" icon="settings" href="/docs/configuration" />
  <Card title="Write" icon="book-open" href="/docs/writing-content" />
</Columns>

Properties#

Columns#

Name	Type	Description
cols	1 \| 2 \| 3 \| 4	Number of columns. Clamped to the range 1–4. Default: 2
children	ReactNode	Column content. Prefer wrapping each cell in `Column`.

Column#

Name	Type	Description
children	ReactNode	Content for one column.

Last updated on Aug 8, 2026

Code group Expandable