Stack
Arrange elements with token-based spacing and responsive direction.
Import
import { Stack } from "@puzzle-ui/ui";Direction, alignment, and wrapping
Stack defaults to a column. Alignment maps to CSS properties according to the current direction:
| Direction | alignH | alignV |
|---|---|---|
col | align-items | justify-content |
row | justify-content | align-items |
Resize the preview to see a responsive column become a row.
API
| Prop | Type | Default | Description |
|---|---|---|---|
as | ElementType | "div" | Root element. |
direction | "row" | "col" or responsive object | "col" | Layout direction. |
gap | "0" | "xs" | "sm" | "md" | "lg" | "xl" | "md" | Theme spacing scale. |
alignH, alignV | Axis-dependent alignment | - | Alignment mapped by direction; see the table above. |
wrap | "wrap" | "nowrap" | "wrap-reverse" | "nowrap" | Flex wrapping. |
reverse | boolean | false | Reverse visual direction. |
divider | ReactNode | - | Content inserted between children. |
Main-axis alignment accepts start, center, end, stretch, around, between, evenly; cross-axis alignment accepts start, center, end, stretch. Native props are forwarded. Reversing visual order does not change DOM/keyboard order.
Both alignH and alignV also accept responsive objects, such as
alignH={{ mobile: "start", tablet: "center", desktop: "end" }}.
Each prop changes independently of direction and inherits its last specified
value at larger breakpoints. When direction changes, the mapping to
justify-content and align-items changes with it. Distribution values
(around, between, evenly) belong to alignH in rows and alignV in columns;
use cross-axis values at breakpoints where a prop maps to align-items.