Columns

Use Columns to lay out cards or other blocks in a responsive grid. By default, it renders 3 columns and collapses to a single column on small screens.

Basic usage

Docs

Start with the Prose UI documentation.

Visit

Components

Browse the available MDX-ready components.

Open

Styling

Learn how to theme and adjust typography tokens.

Open

<Columns>
  <Card title="Docs" icon="book-open" href="/docs" cta="Visit" arrow="true">...</Card>
  <Card title="Components" icon="panel-left-close" href="/docs/components/overview" cta="Open" arrow="true">...</Card>
  <Card title="Styling" icon="sparkles" href="/docs/styling" cta="Open" arrow="true">...</Card>
</Columns>

Custom column count

Control the number of columns with the columns prop. On narrow viewports, the layout still stacks into a single column.

Two columns

Set columns={2} to force a two-column layout on wider screens.

Responsive stacking

On small screens, the grid collapses to one column automatically.

<Columns columns={2}>
  <Card title="Two columns" icon="divide">...</Card>
  <Card title="Responsive stacking" icon="smartphone">...</Card>
</Columns>