Grid
Flexible column layout: single, two-column, or asymmetric. Optional column divider for key content boundaries.
Installation
Install this component via the shadcn CLI.
npx shadcn@latest add https://baby-baltazar-xi.vercel.app/r/grid.jsonOr install the theme first: npx shadcn@latest add https://baby-baltazar-xi.vercel.app/r/sthlm-theme.json
Preview
Interactive component demo.
Single column
Full width content
Two column
Column A
Column B
Asymmetric + divider
Narrow (1fr)
Wide (2fr)
Usage
How to use this component in your code.
<Grid layout="single">...</Grid>
<Grid layout="two-column">...</Grid>
<Grid layout="asymmetric" showColumnDivider>...</Grid>