Stack

Arranges children in a vertical flex column. Control spacing with gap, horizontal alignment with align, and vertical distribution with justify.

Default

First
Second
Third
<Stack>
  <Badge>First</Badge>
  <Badge variant="light">Second</Badge>
  <Badge variant="outline">Third</Badge>
</Stack>

Gap

gap="xs"
B
gap="sm"
B
gap="md"
B
gap="lg"
B
gap="xl"
B
<Stack gap="xs">...</Stack>
<Stack gap="sm">...</Stack>
<Stack gap="md">...</Stack>
<Stack gap="lg">...</Stack>
<Stack gap="xl">...</Stack>

Align

align="flex-start"
B
align="center"
B
align="flex-end"
B
align="stretch"
B
<Stack align="flex-start">...</Stack>
<Stack align="center">...</Stack>
<Stack align="flex-end">...</Stack>
<Stack align="stretch">...</Stack>

Justify

Top
Middle
Bottom
<Stack justify="space-between" style="height: 160px;">
  <Badge>Top</Badge>
  <Badge>Middle</Badge>
  <Badge>Bottom</Badge>
</Stack>

Props

PropTypeDefaultDescription
gap'xs' | 'sm' | 'md' | 'lg' | 'xl'—Space between children
align'stretch' | 'center' | 'flex-start' | 'flex-end' | 'baseline'—Cross-axis alignment (horizontal)
justify'flex-start' | 'flex-end' | 'center' | 'space-between' | 'space-around' | 'space-evenly'—Main-axis distribution (vertical)
componentstring'div'Root HTML element