Stack

Info:Layout

A vertical flex column with a token-driven gap, the primitive for stacking content.

vstack

column

vertical layout

spacing

flex column

Gap on the space scale

gap is a step (0–8) on the shared --space scale, so vertical rhythm stays consistent with everything else.

gap=1

gap=3

gap=5

Cross-axis alignment

align maps to align-items — how children sit on the horizontal axis of the column.

align=start

align=center

align=end

align=stretch

Main-axis distribution

justify distributes children along the column when it has a fixed height — here, between.

Stack lays its children out in a flex column with a consistent gap drawn from the --space scale. The gap prop (0–8) selects the spacing step, while align and justify control the cross- and main-axis distribution.

It carries no visual chrome of its own (no background, border, or color), so it composes cleanly inside cards, panels, and page shells. An inline flag switches it to an inline-flex column for embedding in running text or alongside other inline boxes.

When to use

How this component composes with the rest of the set.

Pair with Cluster (horizontal) and Grid (two-dimensional); the three layout primitives cover most page scaffolding.

Nest Stacks for sections-within-sections; each level picks its own gap.

Drop any component inside; Stack adds spacing without imposing color or chrome.

Props

4 props, straight from the manifest.

Prop	Type	Default	Bindings	Description
gap	number 0 1 2 3 4 5 6 7 8	4	html svelte astro	Spacing between children, as a step on the `--space` scale (0–8), not a size name like `sm` or `md`; anything else warns and falls back to the default.
align	StackAlign start center end stretch baseline	—	html svelte astro	Cross-axis alignment (`align-items`). Omitted leaves the browser default (stretch).
justify	StackJustify start center end between around evenly	—	html svelte astro	Main-axis distribution (`justify-content`).
inline	boolean	false	html svelte astro	Renders as an inline-flex column instead of a block-level one.

Anatomy

The named parts that make up the component. Created from script it renders a shadow root, where a ::part() handle is reachable from your own stylesheet and the class beside it is internal. Upgraded over server-rendered markup it renders light DOM, where the class is the handle.

root

internal

.xtyle-stack

The flex-column container carrying the gap, align, and justify classes.

--space-4

Tokens & coverage

What the component consumes, checked live against what the algorithm produces.

Success:fully covered

9/9 consumed tokens produced

default register: 311 tokens

Live coverage check against the xtyle-default register (derive(xtyleDefault, { anchors }) → coverComponent(manifest, register)). Every token this component consumes must be a key the algorithm produces.

--space-0

--space-1

--space-2

--space-3

--space-4

--space-5

--space-6

--space-7

--space-8

Slots

default

html

svelte

astro

The children to stack vertically.

Code

Vertical stacking

Children flow top to bottom with a uniform, token-driven gap.

<xtyle-stack gap="4">
	<xtyle-card>First</xtyle-card>
	<xtyle-card>Second</xtyle-card>
	<xtyle-card>Third</xtyle-card>
</xtyle-stack>

<xtyle-stack gap="2" align="center">
	<h2>Centered column</h2>
	<p>Children stack vertically, centered on the cross axis.</p>
</xtyle-stack>

<script lang="ts">
	import { Stack, Card } from "@xtyle/svelte";
</script>

<Stack gap={4}>
	<Card>First</Card>
	<Card>Second</Card>
	<Card>Third</Card>
</Stack>

<Stack gap={2} align="center">
	<h2>Centered column</h2>
	<p>Children stack vertically, centered on the cross axis.</p>
</Stack>

---
import { Stack, Card } from "@xtyle/astro";
---

<Stack gap={4}>
	<Card>First</Card>
	<Card>Second</Card>
	<Card>Third</Card>
</Stack>

<Stack gap={2} align="center">
	<h2>Centered column</h2>
	<p>Children stack vertically, centered on the cross axis.</p>
</Stack>