Stack
Versatile utility for seamlessly handling flexbox layouts ensures smooth alignment and responsiveness.
Root
Prop | Type | Default |
|---|---|---|
children | React.ReactNode | |
as | string | div |
divided | boolean | |
animated | boolean | |
className | string | string[] | |
attributes | object | |
overflow | union |
Flex Properties
Prop | Type | Default |
|---|---|---|
direction | union | |
gap | number | |
wrap | boolean | |
align | union | |
justify | union |
Dimension Properties
Prop | Type | Default |
|---|---|---|
height | string | number | |
width | string | number | |
aspectRatio | number | |
maxHeight | string | number | |
maxWidth | string | number | |
minHeight | string | number | |
minWidth | string | number |
Layout Properties
Prop | Type | Default |
|---|---|---|
padding | number | |
paddingTop | number | |
paddingBottom | number | |
paddingStart | number | |
paddingEnd | number | |
paddingInline | number | |
paddingBlock | number | |
bleed | number | |
textAlign | union |
Styling Properties
Prop | Type | Default |
|---|---|---|
backgroundColor | union | |
borderRadius | union | |
borderColor | union |
Position Properties
Prop | Type | Default |
|---|---|---|
position | union | relative |
inset | number | |
insetStart | number | |
insetEnd | number | |
insetTop | number | |
insetBottom | number | |
zIndex | number |
Stack.Item
Prop | Type | Default |
|---|---|---|
gapBefore | number | |
columns | union | |
as | string | div |
grow | string | |
order | number | |
className | string | string[] | |
attributes | object |