Skip to main content
WireKit
Copy for LLM

Stack

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

Basic Usage

Default stack
First item
Second item
Third item 
<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.

Small gap
First
Second
Third 
<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>
Large gap
First item
Second item 
<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>
No gap
One
Two
Three 
<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.

Center-aligned stack
Centered
Items
Here 
<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.

Center-justified stack
Vertically centered 
<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.

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.

Was this page helpful?

Voting requires cookies or local storage. What we store