The layout toolkitReact 19 · TypeScript · Tailwind CSS 4

Good layouts.
Less guesswork.

Six typed primitives for the space between your components. Stack, Row, Col, Grid, GridItem, and Page give every screen the same vocabulary, from the first toolbar to the whole page frame.

Start building See the patterns
Composition / 001↗
Simple pieces.Endless possibilities.
01 / The big pictureBuilt on Tailwind. Designed for composition.

Why a layout kit

Spacing decisions, made once.

Utility classes are great for one-off tweaks and terrible for consistency. Layout Kit moves the recurring decisions, gap scale, alignment, column counts, and page width, into typed props with sensible defaults.

Typed
A constrained scale
Gap accepts 0 to 12 on the Tailwind scale, columns accept 1 to 12. Invalid values fail at compile time, not in review.
Responsive
Breakpoint maps
gap, align, justify, cols, and span all take { base, sm, md, lg, xl, 2xl } maps. Every generated class is written out, so Tailwind always ships it.
Zero runtime
Just class names
Each primitive renders one element with the right utilities. No context, no measurements, no layout shift.

Your building blocks

Six primitives. A common language.

Start with Stack
01Flex
Stack
Vertical rhythm
02Flex
Row
Horizontal flow
03Flex
Col
Flexible regions
04Grid
Grid
Responsive structure
05Grid
GridItem
Column spans
06Page
Page
The complete frame

Quick start

From import to a page in one file.

Installation guide

Add the registry, pull in the primitives with the shadcn CLI, and place shadcn components inside them.

app/dashboard/page.tsx
import { Grid } from "@/components/ui/grid";
import { Page } from "@/components/ui/page";
import { Stack } from "@/components/ui/stack";
import { Card, CardContent } from "@/components/ui/card";

export function Dashboard() {
  return (
    <Page size="xl">
      <Page.Header title="Dashboard" description="Everything, at a glance." />
      <Page.Body>
        <Stack gap={6}>
          <Grid cols={{ base: 1, sm: 2, lg: 4 }} gap={4}>
            {stats.map((stat) => (
              <Card key={stat.label}>
                <CardContent>{stat.value}</CardContent>
              </Card>
            ))}
          </Grid>
        </Stack>
      </Page.Body>
    </Page>
  );
}

Better together

From primitives to a whole screen.

All patterns

A dashboard built from Page, Stack, Grid, GridItem, Row, and Col. Resize the window to see the column maps respond.

Live

Analytics

Live
Last 30 days across all workspaces.
Revenue+12.4%
$48,920
Active users+3.1%
3,214
Conversion+0.6%
4.8%
Churn−0.3%
1.2%
Sessions
Daily
Top pages
/docs/layout/page12,480
/docs/layout/grid9,912
/8,301
/docs/data-table6,744
/docs/patterns4,120