Stack & Flex

Stack is a vertical Flex; use direction="row" for horizontal. gap is 0-4, 6 or 8. Flex also takes align, justify, wrap and inline.

Left

Props

Stack props
Prop	Type	Default	Description
`direction`	'column' \| 'row'	`'column'`	Main axis.
`gap`	0 \| 1 \| 2 \| 3 \| 4 \| 6 \| 8	`4`	Spacing between children.
`...Flex props`		–	Everything `Flex` accepts.

direction'row' | 'column'
Default: 'row'
Main axis.
gap0 | 1 | 2 | 3 | 4 | 6 | 8
Default: 3
Spacing between children.
align'start' | 'center' | 'end' | 'stretch' | 'baseline'
Cross-axis alignment.
justify'start' | 'center' | 'end' | 'between' | 'around'
Main-axis distribution.
wrapboolean
Default: false
Allow items to wrap.
inlineboolean
Default: false
Use inline-flex.
classNamestring
Default: ''
Extra classes for the root element.
asElementType
Default: 'div'
Element or component to render.
childrenReactNode
Content.
...rest
Any other props are passed to the underlying element.

Flex props
Prop	Type	Default	Description
`direction`	'row' \| 'column'	`'row'`	Main axis.
`gap`	0 \| 1 \| 2 \| 3 \| 4 \| 6 \| 8	`3`	Spacing between children.
`align`	'start' \| 'center' \| 'end' \| 'stretch' \| 'baseline'	–	Cross-axis alignment.
`justify`	'start' \| 'center' \| 'end' \| 'between' \| 'around'	–	Main-axis distribution.
`wrap`	boolean	`false`	Allow items to wrap.
`inline`	boolean	`false`	Use inline-flex.
`className`	string	`''`	Extra classes for the root element.
`as`	ElementType	`'div'`	Element or component to render.
`children`	ReactNode	–	Content.
`...rest`		–	Any other props are passed to the underlying element.