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 is the space between items; its values map to the --hz-space-* tokens (xs 0.5rem → xl 8rem). The
tinted zone is the Stack; the space between its edge and the items is the padding. padding applies on both axes; paddingInline and paddingBlock override one axis and win where
set. Both stay correct in RTL and vertical writing modes. near and away are the density distances:
context-aware values that tighten inside data-density-shift regions (see the
Density tab).
<Stack gap="md" padding="md">…</Stack>
<Stack gap="md" paddingInline="md">…</Stack>
<Stack gap="md" paddingBlock="md">…</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="stretch">
<div>Short</div>
<div>Medium width item</div>
</Stack>Every Stack below uses the same gap="away". The spacing tightens
from nesting alone. data-density-shift goes directly on the Stack (extra
attributes forward to the root element). The shift applies to that Stack's own gap and
to everything inside it. See density spacing for the
model.
<Stack gap="away">
<div>Top-level: away = 8rem</div>
<Stack gap="away" data-density-shift>
<div>One shift: away = 4rem</div>
<!-- nest another data-density-shift here and away drops again, to 2rem -->
</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 | — |
Anything not listed above is forwarded as an attribute to the root element (or the native control in form components). So id, data-*, aria-*, and event handlers just work.
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.