Components

Columns

Create multi-column layouts for side-by-side content

Columns help you display content side by side in a responsive grid layout.

Two Columns

Left Column

This content appears on the left side. Perfect for comparisons or related content.

Right Column

This content appears on the right side. The columns stack on mobile devices.

<Columns columns={2}>
  <Column>
    **Left Column**
    Content here...
  </Column>
  <Column>
    **Right Column**
    Content here...
  </Column>
</Columns>

Three Columns

Fast

Built on Astro for blazing fast performance.

Flexible

Customize everything with themes and plugins.

Modern

MDX, Tailwind CSS, and React components.

<Columns columns={3}>
  <DocCard title="Fast" href="#">Built on Astro...</DocCard>
  <DocCard title="Flexible" href="#">Customize everything...</DocCard>
  <DocCard title="Modern" href="#">MDX, Tailwind CSS...</DocCard>
</Columns>

Props

Columns

columns2 | 3 | 4default: 2

Number of columns in the grid

classNamestring

Additional CSS classes

Column

classNamestring

Additional CSS classes