Import
import { Stack, HStack, VStack } from 'styled-system/jsx'Usage
By default, Stack applies flex-direction: column and gap: 8px to its
children.
Loading example...
Horizontal
Use the direction prop to change the direction of the stack.
Loading example...
HStack
Alternatively, you can use the HStack to create a horizontal stack and align
its children horizontally.
Loading example...
VStack
Use the VStack to create a vertical stack and align its children vertically.
Loading example...
Responsive Direction
Loading example...
Props
The Stack component accepts the following utility props in addition to style and factory props:
| Prop | Type | Description |
|---|---|---|
direction | 'row' | 'column' | ResponsiveValue | The direction of the stack. |
gap | CerberusSpacing | The gap between the stack items. |
align | CSSProperties['align-items'] | The alignment of the stack items. |
justify | CSSProperties['justify-content'] | The justification of the stack items. |