Grid
LayoutA responsive grid with explicit column counts.
Grid maps its cols prop to a static Tailwind class so the utility is always present in the build. Children can span multiple columns with col-span-* utilities.
npx shadcn@latest add gridColumns
Pick a column count from the predefined map.
Preview
Live1
2
3
4
5
6
tsx
1<Grid cols={3} gap={4}>2 <Placeholder>1</Placeholder>3 <Placeholder>2</Placeholder>4 <Placeholder>3</Placeholder>5</Grid>
Spans
Use the 12-column grid and span utilities for asymmetric layouts.
Preview
LiveFull width
4
4
4
8
4
tsx
1<Grid cols={12} gap={2}>2 <Placeholder className="col-span-12">Full width</Placeholder>3 <Placeholder className="col-span-4">4</Placeholder>4 <Placeholder className="col-span-8">8</Placeholder>5</Grid>
API reference
All props of the underlying Base UI primitive are forwarded. The table below documents the Shelf-specific props.
| Prop | Type | Description |
|---|---|---|
| cols | "1" | "2" | "3" | "4" | "6" | "12"= "2" | Number of grid columns. |
| gap | "2" | "4" | "6" | "8"= "4" | Spacing between cells. |
| className | string | Override the classes of the grid. |