Layout Primitives
Box, Container, Stack, Grid — thin wrappers that turn layout intent into Tailwind classes.
import
{ Box, Container, Stack, Grid } from "@pepulux/ui"Stack
Item 1
Item 2
Item 3
Grid
Col 1
Col 2-3 (span 2)
Col 1-3 (full width)
Container
Centered, max-width sm
Props
| Prop | Type | Default | Description |
|---|---|---|---|
| Stack.direction | "row" | "column" | "row-reverse" | "column-reverse" | "column" | Flex direction |
| Stack.spacing | number | 2 | Gap between children (Tailwind gap-N) |
| Grid.container | boolean | — | Makes this element the grid container |
| Grid.columns | number | 12 | Total grid columns |
| Grid.xs/sm/md/lg | number | — | Column span at each breakpoint |
| Container.maxWidth | "xs" | "sm" | "md" | "lg" | "xl" | "full" | "lg" | Max width constraint |