Stack

Stack is a vertical flex column with configurable gap, alignment, and justification. It passes class and style attributes through to the root element.

ExamplesCodeUsageChangelog

Basic

Item 1

Item 2

Item 3

Tailwind v4

<Stack>
  <div>Item 1</div>
  <div>Item 2</div>
  <div>Item 3</div>
</Stack>

Gap variants

none

xs

sm

md

lg

xl

Tailwind v4

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

Alignment

Centered

Wider item

Narrow

Tailwind v4

<Stack align="center">
  <div>Centered</div>
  <div>Wider item</div>
  <div>Narrow</div>
</Stack>

Props

Prop	Type	Default	Description
gap	'none' | 'xs' | 'sm' | 'md' | 'lg' | 'xl'	'md'	Space between items
align	'start' | 'center' | 'end' | 'stretch'	'stretch'	Cross-axis alignment (align-items)
justify	'start' | 'center' | 'end' | 'between'	'start'	Main-axis distribution (justify-content)

class and style attributes are forwarded to the root element.