Stack

Stacks children along one axis with a consistent gap. Defaults to vertical; flip with direction="horizontal".


import { Stack } from '@gg-software/ui';
 
<Stack gap="sm">
    <Button>First</Button>
    <Button>Second</Button>
    <Button>Third</Button>
</Stack>
 
<Stack direction="horizontal" gap="lg" align="center">
    <Button size="sm">A</Button>
    <Button>B</Button>
    <Button size="lg">C</Button>
</Stack>

Props

Prop	Type	Default	Description
`children`	`ReactNode`	—	content rendered inside the component
`as`	`ElementType`	—
`direction`	`"horizontal" \| "vertical"`	`vertical`
`gap`	`SpaceValue`	`md`
`align`	`AlignItems`	—
`justify`	`JustifyContent`	—
`wrap`	`boolean`	`false`
`className`	`string`	—
`style`	`CSSProperties`	—

* required · generated from packages/ui/src/layout/Stack/Stack.tsx