---
title: Stack
description: Vertical flex container
visibility: guest
draft: false
---

# Stack

A vertical flex layout that stacks children with consistent spacing. Use it instead of writing `flex flex-col gap-*` manually.

## Basic Usage

:::preview{title="Default stack"}
<x-wirekit::stack>
    <x-wirekit::card><x-wirekit::card.body>First item</x-wirekit::card.body></x-wirekit::card>
    <x-wirekit::card><x-wirekit::card.body>Second item</x-wirekit::card.body></x-wirekit::card>
    <x-wirekit::card><x-wirekit::card.body>Third item</x-wirekit::card.body></x-wirekit::card>
</x-wirekit::stack>
:::

## Gap Sizes

The `gap` prop controls the spacing between children. All values use design tokens.

:::preview{title="Small gap"}
<x-wirekit::stack gap="sm">
    <x-wirekit::card><x-wirekit::card.body>First</x-wirekit::card.body></x-wirekit::card>
    <x-wirekit::card><x-wirekit::card.body>Second</x-wirekit::card.body></x-wirekit::card>
    <x-wirekit::card><x-wirekit::card.body>Third</x-wirekit::card.body></x-wirekit::card>
</x-wirekit::stack>
:::

:::preview{title="Large gap"}
<x-wirekit::stack gap="lg">
    <x-wirekit::card><x-wirekit::card.body>First item</x-wirekit::card.body></x-wirekit::card>
    <x-wirekit::card><x-wirekit::card.body>Second item</x-wirekit::card.body></x-wirekit::card>
</x-wirekit::stack>
:::

:::preview{title="No gap"}
<x-wirekit::stack gap="none">
    <x-wirekit::card><x-wirekit::card.body>One</x-wirekit::card.body></x-wirekit::card>
    <x-wirekit::card><x-wirekit::card.body>Two</x-wirekit::card.body></x-wirekit::card>
    <x-wirekit::card><x-wirekit::card.body>Three</x-wirekit::card.body></x-wirekit::card>
</x-wirekit::stack>
:::

## Alignment

Control the cross-axis alignment of children with the `align` prop.

:::preview{title="Center-aligned stack"}
<x-wirekit::stack align="center" gap="sm">
    <x-wirekit::card><x-wirekit::card.body>Centered</x-wirekit::card.body></x-wirekit::card>
    <x-wirekit::card><x-wirekit::card.body>Items</x-wirekit::card.body></x-wirekit::card>
    <x-wirekit::card><x-wirekit::card.body>Here</x-wirekit::card.body></x-wirekit::card>
</x-wirekit::stack>
:::

## Justification

Control the main-axis distribution with the `justify` prop.

:::preview{title="Center-justified stack"}
<x-wirekit::stack justify="center" gap="md" style="min-height: 200px">
    <x-wirekit::card><x-wirekit::card.body>Vertically centered</x-wirekit::card.body></x-wirekit::card>
</x-wirekit::stack>
:::

## Semantic Elements

Use the `as` prop to render a semantic HTML element.

:::preview{title="Stack as navigation"}
<x-wirekit::stack as="nav" gap="sm">
    <x-wirekit::button intent="neutral" surface="ghost">Home</x-wirekit::button>
    <x-wirekit::button intent="neutral" surface="ghost">About</x-wirekit::button>
    <x-wirekit::button intent="neutral" surface="ghost">Contact</x-wirekit::button>
</x-wirekit::stack>
:::

## Props

| Prop | Type | Default | Description |
| --- | --- | --- | --- |
| `gap` | string | `'md'` | Spacing: `none`, `xs`, `sm`, `md`, `lg`, `xl`, `2xl` |
| `align` | string | `'stretch'` | Cross-axis: `start`, `center`, `end`, `stretch`, `baseline` |
| `justify` | string | `'start'` | Main-axis: `start`, `center`, `end`, `between`, `around`, `evenly` |
| `wrap` | bool | `false` | Allow wrapping |
| `as` | string | `'div'` | HTML element to render |
| `scope` | string\|null | `null` | Scoped personalization name |

## Keyboard Interaction

This component is a layout wrapper. Keyboard interaction is delegated to its children.

## Design Tokens

| Token | Default | Description |
| --- | --- | --- |
| `--space-wk-xs` | `0.25rem` | Extra small gap |
| `--space-wk-sm` | `0.5rem` | Small gap |
| `--space-wk-md` | `1rem` | Medium gap |
| `--space-wk-lg` | `1.5rem` | Large gap |
| `--space-wk-xl` | `2.5rem` | Extra large gap |
| `--space-wk-2xl` | `4rem` | Double extra large gap |

**The rung names are shared with a second ladder, and the values are not.** This prop reads `--space-wk-*`; the tighter `--gap-wk-*` ladder uses the same `xs`…`2xl` labels with different values from `md` up, and WireKit's own components read it for spacing inside a component. Swapping one for the other by name silently re-spaces the container — see [Two spacing ladders, same rung names](/theming/design-tokens#two-spacing-ladders-same-rung-names).