Primitives
Stack
Children laid out along one axis, spaced by the theme scale
Direction
ABC
ABC
Justify
AB
AB
AB
AB
Usage
import { Stack, Text, Button } from "@gpuixui/primitives";
<Stack direction="column" gap="sm">
<Text role="h3">Danger zone</Text>
<Stack direction="row" gap="sm" justify="end">
<Button variant="outline">Cancel</Button>
<Button variant="destructive">Delete</Button>
</Stack>
</Stack>;API
| Prop | Type | Default | Consequence |
|---|---|---|---|
direction | "row" | "column" | required | the main axis; a stored name this release does not carry paints the column the recipe has always drawn, in the resolver too (stackDirection) |
gap | spacing step | none | distance between children, from spacing |
align | start | center | end | stretch | baseline | stretch | cross-axis alignment |
justify | start | center | end | between | around | runtime default | main-axis distribution |
wrap | boolean | false | allows wrapping to a second line |
grow | boolean | false | takes leftover space on the parent's axis |
fullWidth / fullHeight | boolean | false | 100% on that axis |
ref | Ref<PublicInstance> | — | the painted element, for a measurement, a scroll or a focus call |
aria-id | string | — | the element's author id, exposed as the platform's automation id |
onLayout | (event: EventPayload) => void | — | the painted box after the first paint and each resize |
className | string | — | a Tailwind class string, joined after the recipe so it wins conflicts |
style | StyleDesc | — | merged last |
children | ReactNode | — | content |
testId | string | — | stable locator |
Edit this page on GitHubpackages/primitives/docs/stack.mdx