@cassa/ui-layout
Structural layout primitives — Stack, Grid, Container, Sidebar. Build page structure without writing custom flex/grid CSS.
Import
import { Stack, Grid, Container, Sidebar } from '@cassa/ui-layout'Stack
A flex container with a consistent gap. Defaults to column direction.
Item one
Item two
Item three
Left
Centre
Right
| Prop | Type | Default | Description |
|---|---|---|---|
| direction | "row" | "col" | "col" | Flex direction. |
| gap | 0 | 1 | 2 | 3 | 4 | 6 | 8 | 10 | 12 | 4 | Gap between children (Tailwind gap scale). |
| align | "start" | "center" | "end" | "stretch" | "start" | Cross-axis alignment. |
| justify | "start" | "center" | "end" | "between" | "start" | Main-axis justification. |
Grid
One
Two
Three
Four
Five
Six
| Prop | Type | Default | Description |
|---|---|---|---|
| cols* | 1 | 2 | 3 | 4 | 6 | 12 | — | Number of columns. |
| gap | 2 | 3 | 4 | 6 | 8 | 4 | Gap between cells. |
Container
Centres content with a max-width constraint and responsive horizontal padding.
size="sm" — max-w-screen-sm, centred
| Prop | Type | Default | Description |
|---|---|---|---|
| size | "sm" | "md" | "lg" | "xl" | "full" | "lg" | Max-width constraint. |
Sidebar
Two-column layout: fixed-width sidebar + fluid main content.
Main content area — fluid width