Layout Kit
Typed React layout primitives for shadcn/ui and Tailwind CSS 4:
Stack, Row, Col, Grid, GridItem, and Page. They ship as a
shadcn registry, so the CLI copies the
source into your project and you own the code.
Use Layout Kit for consistent spacing, responsive grids, and page frames in
dashboards, forms, settings, and detail screens. It arranges your existing UI;
buttons, inputs, routing, and data fetching stay with your application.
For a one-off layout, direct Tailwind utilities may be all you need.
Documentation and live examples: layout.csikie.com
New order} />
} asideWidth="sm">
{stats.map((stat) => (
))}
Installation
Requirements: a shadcn project (components.json and the cn helper),
Tailwind CSS 4, and React 19.
-
Register the namespace in components.json:
{
"registries": {
"@layout-kit": "https://layout.csikie.com/r/{name}.json"
}
}
-
Add everything, or only what you need:
npx shadcn@latest add @layout-kit/layout
npx shadcn@latest add @layout-kit/page @layout-kit/grid
| Item | Contents |
|---|
layout | Every primitive below |
layout-spacing | Shared vocabulary; added automatically as a dependency |
stack | Vertical flex container |
row | Horizontal flex container |
col | Flex child with grow, shrink, and self |
grid | CSS grid with responsive columns |
grid-item | Responsive column span |
page | Page frame: header, actions, body, aside |
Files land in components/ui/ and lib/spacing.ts, with imports rewritten to
your aliases. The primitives depend on @base-ui/react, which the CLI installs.
There is no Layout Kit npm package. Responsive behavior uses CSS media queries,
without JavaScript viewport measurements; React and Base UI still perform rendering.
Review the CLI diff before accepting updates to customized files.
