THE FIRST LAYOUT LANGUAGE FOR THE WEB

10 semantic components
that compile to Tailwind CSS.

Zero runtime. Full IntelliSense. Framework-agnostic.
The only layout system that feels like a native language.

View on GitHub
NOW ON NPM

Install as a package

npm install layoutkit-css

Then import and use — auto-complete works out of the box:

import { Stack, Center, Row, Grid } from "layoutkit-css"

<Stack gap="lg" padding="md">
  <Center fill>
    <h1>Hello World</h1>
  </Center>
</Stack>

Requires React 18+ and Tailwind CSS. Works with Next.js, Vite, Remix, and any React framework.

Platform Setup

macOS
# Install Node.js (if needed)
brew install node

# In your React + Tailwind project:
npm install layoutkit-css
Windows
# Install Node.js from https://nodejs.org
# Then in PowerShell or CMD:
npm install layoutkit-css
Linux
# Install Node.js
curl -fsSL https://deb.nodesource.com/setup_20.x | sudo -E bash -
sudo apt install -y nodejs

# In your project:
npm install layoutkit-css

Or scaffold components directly

npx layoutkit init

This copies all 10 components into your project (shadcn-style). You own the source code and can customize freely.

Complete tooling ecosystem

Compiler + Playground
Real-time compilation in your browser
Linter
6 semantic rules for layout quality
ESLint Plugin
Catch layout mistakes during development
HTML Compiler
Works with any framework or vanilla HTML
VS Code Extension
Full IntelliSense and autocomplete
Tailwind Safelist
Auto-generated class preservation
Raw CSS
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
min-height: 100vh;
5 properties
Tailwind
flex flex-col
items-center
justify-center
min-h-screen
4 classes
LayoutKit
<Center fill>
2 words

10 components. Every layout.