Stack

Flexbox layout component for arranging items vertically or horizontally with consistent spacing. A simple abstraction over common flex patterns.

Vertical Stack

Preview
Item 1
Item 2
Item 3

Horizontal Stack

Preview
Item 1
Item 2
Item 3

Alignment and Justify

Preview
Left
Center
Right

Gap Sizes

Preview

gap="xs"

A
B
C

gap="sm"

A
B
C

gap="lg"

A
B
C

gap="xl"

A
B
C

Props

PropTypeDefaultDescription
direction"vertical" | "horizontal""vertical"Stack layout direction.
gap"none" | "xs" | "sm" | "md" | "lg" | "xl""md"Spacing between items.
align"start" | "center" | "end" | "stretch""stretch"Cross-axis alignment of items.
justify"start" | "center" | "end" | "between" | "around""start"Main-axis distribution of items.
classNamestring-Additional CSS classes.

Accessibility

  • Renders a semantic <div> with flexbox layout
  • Supports ref forwarding for DOM access
  • Passes through all standard HTML attributes including aria-* and role
  • DOM order matches visual order for consistent screen reader navigation