Stack
Lays children out in a vertical column with consistent spacing between items. Stack arranges content; pair it with a Container when the column also needs a max-width or page gutters.
Import
import { Stack } from "@hyzer-labs/ui"Demo
Gap values map to the --hz-space-* tokens (xs 0.5rem → xl 8rem). near and away are the density distances: context-aware values that
tighten inside data-density-shift regions (see the Density tab). The dashed outline
marks the Stack itself.
<Stack gap="none">
<div>Item 1</div>
<div>Item 2</div>
<div>Item 3</div>
</Stack><Stack gap="xs">
<div>Item 1</div>
<div>Item 2</div>
<div>Item 3</div>
</Stack><Stack gap="sm">
<div>Item 1</div>
<div>Item 2</div>
<div>Item 3</div>
</Stack><Stack gap="md">
<div>Item 1</div>
<div>Item 2</div>
<div>Item 3</div>
</Stack><Stack gap="lg">
<div>Item 1</div>
<div>Item 2</div>
<div>Item 3</div>
</Stack><Stack gap="xl">
<div>Item 1</div>
<div>Item 2</div>
<div>Item 3</div>
</Stack><Stack gap="near">
<div>Item 1</div>
<div>Item 2</div>
<div>Item 3</div>
</Stack><Stack gap="away">
<div>Item 1</div>
<div>Item 2</div>
<div>Item 3</div>
</Stack>align maps to align-items. The effect shows when children have
different natural widths. The default stretch makes every child fill the Stack's
width.
<Stack align="start">
<div>Short</div>
<div>Medium width item</div>
</Stack><Stack align="center">
<div>Short</div>
<div>Medium width item</div>
</Stack><Stack align="end">
<div>Short</div>
<div>Medium width item</div>
</Stack><Stack align="stretch">
<div>Short</div>
<div>Medium width item</div>
</Stack><Stack align="baseline">
<div>Short</div>
<div>Medium width item</div>
</Stack>The tinted zone is the Stack; the space between its edge and the items is the padding. padding applies on both axes; paddingInline / paddingBlock override one axis and win where set. The axis names are the
CSS logical properties, so they stay correct in RTL and vertical writing modes. See Spacing & Sizing.
<Stack padding="none">…</Stack>
<Stack paddingInline="none">…</Stack>
<Stack paddingBlock="none">…</Stack><Stack padding="sm">…</Stack>
<Stack paddingInline="sm">…</Stack>
<Stack paddingBlock="sm">…</Stack><Stack padding="md">…</Stack>
<Stack paddingInline="md">…</Stack>
<Stack paddingBlock="md">…</Stack><Stack padding="lg">…</Stack>
<Stack paddingInline="lg">…</Stack>
<Stack paddingBlock="lg">…</Stack><Stack padding="near">…</Stack>
<Stack paddingInline="near">…</Stack>
<Stack paddingBlock="near">…</Stack><Stack padding="away">…</Stack>
<Stack paddingInline="away">…</Stack>
<Stack paddingBlock="away">…</Stack>With gap="near" every Stack below uses the same prop; the spacing
tightens purely from nesting. data-density-shift goes directly on the Stack
(extra attributes forward to the root element), and the shift applies to that Stack's
own gap and everything inside it. See density spacing for the model.
<Stack gap="near">
<div>Top-level: near = 4rem</div>
<Stack gap="near" data-density-shift>
<div>One shift: near = 2rem</div>
<Stack gap="near" data-density-shift>
<div>Two shifts: near = 0.8rem</div>
</Stack>
</Stack>
</Stack>Props
| Name | Type | Default | Note |
|---|---|---|---|
gap | 'none' | 'xs' | 'sm' | 'md' | 'lg' | 'xl' | 'near' | 'away' | 'md' | near/away are the density distances — they tighten inside data-density-shift regions. |
align | 'start' | 'center' | 'end' | 'stretch' | 'baseline' | 'stretch' | Shared LayoutAlign scale (Stack/Cluster/Grid). |
padding | 'none' | 'sm' | 'md' | 'lg' | 'near' | 'away' | 'none' | Both axes. Shared LayoutPadding scale — near/away tighten inside data-density-shift regions. |
paddingInline | 'none' | 'sm' | 'md' | 'lg' | 'near' | 'away' | — | Per-axis override — wins over padding on the inline axis. Same LayoutPadding scale. |
paddingBlock | 'none' | 'sm' | 'md' | 'lg' | 'near' | 'away' | — | Per-axis override — wins over padding on the block axis. Same LayoutPadding scale. |
as | string | 'div' | |
class | string | — | Merged after the hz-stack class. |
children | Snippet | — |
Theme hooks
What this component promises your CSS. The reference theme styles exactly these — from @layer hz-theme, so your unlayered rules win. See Styling Components for the how.
Root class: .hz-stack
Data attributes
| Hook | Values | Styles |
|---|---|---|
data-gap | 'none' | 'xs' | 'sm' | 'md' | 'lg' | 'xl' | 'near' | 'away' | Row gap. Default md. The only layout gap scale with an xl rung. |
data-align | 'start' | 'center' | 'end' | 'stretch' | 'baseline' | align-items. Default stretch. |
data-padding | 'none' | 'sm' | 'md' | 'lg' | 'near' | 'away' | Padding on both axes. Default none. |
Accessibility
Stack is a layout primitive with no ARIA semantics. The reading and focus order follow the DOM order of children.