Thanks to visit codestin.com
Credit goes to docs.wirekit.app

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
scale string 'space' Which spacing ladder gap names a rung on: space (the default, unchanged) or gap for the tighter --gap-wk-* ladder — see the note under Design Tokens
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. scale="space" (the default) reads --space-wk-*; scale="gap" reads the tighter --gap-wk-* ladder, which uses the same xs…2xl labels with different values from md up and is what WireKit's own components read for spacing inside a component. The rung name alone does not tell you which — gap="md" is 1rem on one ladder and 0.75rem on the other — so changing scale without changing gap re-spaces the container on purpose, and swapping a raw utility for a rung of the same name re-spaces it by accident. See Two spacing ladders, same rung names.

Rung scale="space" (default) scale="gap"
xs 0.25rem 0.25rem
sm 0.5rem 0.5rem
md 1rem 0.75rem
lg 1.5rem 1rem
xl 2.5rem 1.5rem
2xl 4rem 2rem

Updated in WireKit v2.50.0 (2026-09-13)

Was this page helpful?

Thank you for your feedback!

Voting requires cookies or local storage. What we store