# Layout Kit

> Build responsive React layouts with typed Stack, Row, Grid, and Page components. Install from the shadcn registry, customize the source, and keep your Tailwind styles.

Layout Kit is an MIT-licensed shadcn registry for React 19, TypeScript, and Tailwind CSS 4. The CLI copies source into your project; layout primitives use @base-ui/react for rendering. It is not an npm package or a complete UI design system.

Maintained by Erik Csiki-Gecse. Source, license, and issues: https://github.com/csikie/layout-kit

## Getting started

- [Introduction](https://layout.csikie.com/): What Layout Kit is and how it fits.
- [Installation](https://layout.csikie.com/docs/installation): Install the primitives from the shadcn registry.
- [Principles](https://layout.csikie.com/docs/principles): The rules the primitives follow.

## Layout primitives

- [Stack](https://layout.csikie.com/docs/layout/stack): Vertical rhythm.
- [Row](https://layout.csikie.com/docs/layout/row): Horizontal flow.
- [Col](https://layout.csikie.com/docs/layout/col): Flexible columns.
- [Grid](https://layout.csikie.com/docs/layout/grid): Responsive structure.
- [GridItem](https://layout.csikie.com/docs/layout/grid-item): Column spans.
- [Page](https://layout.csikie.com/docs/layout/page): The complete frame.

## Patterns

- [Compositions](https://layout.csikie.com/docs/patterns): Full screens built from the primitives.

## Guides

- [Responsive dashboard](https://layout.csikie.com/docs/guides/responsive-dashboard): Build a responsive React dashboard with shadcn cards, a mobile-first Grid, and GridItem column spans.
- [Stack and Row spacing](https://layout.csikie.com/docs/guides/stack-row-spacing): Manage spacing in React with Stack and Row: parent-owned gaps, wrapping, responsive values, and semantic lists.
- [Page with a sidebar](https://layout.csikie.com/docs/guides/page-layout): Compose a React page with a title, actions, and a responsive sidebar while preserving headings and content-first reading order.

## Shared UI

- [Data Table](https://layout.csikie.com/docs/data-table): Client and server tables with one surface.
- [Breadcrumb](https://layout.csikie.com/docs/breadcrumb): Route-aware trails with overflow.