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.

Get started in 30 seconds

npx layoutkit init

Then write layouts that actually make sense:

import { Stack, Center, Row } from "@/components/layout"

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

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

2 words