Columns

Installation

pnpm dlx shadcn@latest add https://prototyper-ui.com/r/columns.json

npx shadcn@latest add https://prototyper-ui.com/r/columns.json

yarn dlx shadcn@latest add https://prototyper-ui.com/r/columns.json

bunx --bun shadcn@latest add https://prototyper-ui.com/r/columns.json

This will add the following files to your project:

• components/ui/columns.tsx

Usage

import { Columns, Column } from "@/components/ui/columns";

<Columns count={3} gap={4}>
  <div>Column 1</div>
  <div>Column 2</div>
  <div>Column 3</div>
</Columns>

Columns creates a responsive CSS grid that starts as a single column and expands to count columns above the collapse breakpoint. Use Column for items that need to span multiple grid tracks.

Anatomy

<Columns count={3} gap={4} collapse="md">
  <Column span={2}>Wide column</Column>
  <Column>Normal column</Column>
</Columns>

Examples

Two Columns

Asymmetric Layout

Use Column with span to create uneven splits like a sidebar layout.

Responsive Collapse

Columns collapse to a single column below the collapse breakpoint. Compare md (default) and lg collapse points.

Styling

Data Slots

Use data-slot attributes to target Columns parts in CSS:

Customization Examples

/* Add a border between columns */
[data-slot="column"] + [data-slot="column"] {
  @apply border-l border-border pl-4;
}

<Columns className="rounded-lg bg-muted p-4" count={2} gap={6}>
  Custom styled grid
</Columns>

API Reference

Columns

A responsive grid container.

Extends React.ComponentProps<"div">. All standard div props are forwarded via ...props.

Column

A grid item with optional span control.

Extends React.ComponentProps<"div">. All standard div props are forwarded via ...props.

Accessibility

Keyboard Interactions

Columns is a non-interactive layout container and does not have keyboard interactions.

ARIA Attributes

• Renders as a plain <div> with CSS Grid, no implicit ARIA role.
• No additional ARIA attributes are needed for a grid layout container.

Related