Stack

Stack is the default flex host in ViraUI. Reach for it whenever a single axis is enough: page sections, card internals, toolbars, form rows, and nested groups.

Children flow in a column or row. direction, rowGap, and columnGap map to spacing tokens; hAlign / vAlign align from the consumer point of view. Padding props use the same step names as Surface; pass a [start, end] tuple when only one side needs inset.

Prefer expandChildren and fullWidth when a row of actions or a panel shell should fill the main axis. Pass render to swap the default div for a header, nav, section, or other semantic host while keeping the same layout hooks.

When to useCopy Anchor Link

• One flex axis is enough (vertical list, toolbar row, card internals)
• Gaps and padding should stay on the spacing scale
• Nested groups need alignment without custom flex CSS
• The host should be a semantic landmark via render

When not to useCopy Anchor Link

• Fixed tracks, spans, or two-dimensional placement → Grid
• Uneven tile heights in a column wall → Masonry
• Background, border, or radius chrome alone → Surface (nest Stack inside for gaps)
• Long-form heading and block rhythm → Prose

RelatedCopy Anchor Link

• Grid — CSS Grid tracks, spans, and auto-fill
• Masonry — variable-height column walls
• Surface — themed panel chrome around a Stack
• Separator — visual breaks between stacked rows
• Prose — heading-aware article rhythm, not flex gaps

Common examplesCopy Anchor Link

Column listCopy Anchor Link

A vertical card list with token rowGap is the usual screen pattern. Each row is its own nested Stack for media, copy, and a trailing action.

Equal-width rowCopy Anchor Link

direction="row" plus expandChildren grows direct children along the main axis so Cancel, Delete, and Save share the strip evenly. Pair with fullWidth when the stack itself must fill the parent.

Nested paddingCopy Anchor Link

Outer and inner Stacks own section gaps and token padding. Header copy, body controls, and a footer bar stay on the spacing scale without custom flex CSS.

Axis padding tuplesCopy Anchor Link

hPadding / vPadding accept a [start, end] tuple. Use 0 on one side for single-edge inset, or different tokens when start and end should not match. Prefer the tuple over custom paddingBlock* / paddingInline* CSS.

Semantic rootCopy Anchor Link

render swaps the default div for a native landmark while Stack still owns direction, gap, and padding. Useful for page chrome and nested nav clusters.

Ask your agentCopy Anchor Link

Build a vertical list of teammate cards with comfortable spacing — each card has an avatar, name, role, and a Details button on the right.