Stack

Stack

Stack is a vertical flex container by default. Pass direction="row" for horizontal stacks.

<Stack gap={3}>
  <Item />
  <Item />
</Stack>

<Stack direction="row" gap={2} align="center">
  <Avatar />
  <Text>Name</Text>
</Stack>

Install: @helixui/core

import { Stack } from '@helixui/core'

status: stable · since: 0.1.0

Tags: primitive, flex, gap, rhythm

Anatomy

child
  ↕ gap
child
  ↕ gap
child

Layout

• display — flex
• width — auto
• height — auto
• intrinsicSize — flex container; sized by children
• stackable — true
• fullBleed — false

Visual

An opinionated flex container. Default direction is column; pass direction="row" for horizontal. Token-aware gap controls spacing between children.

Props

Name	Type	Default	Description
direction	'row' | 'column'	column	Stack direction. Replaces vapor-ui’s HStack/VStack.
align	'start' | 'center' | 'end' | 'stretch' | 'baseline'	stretch	Cross-axis alignment.
justify	'start' | 'center' | 'end' | 'between' | 'around' | 'evenly'	start	Main-axis alignment.
gap	number | string	4	Gap between children. Numeric → space.N token.
wrap	boolean	false	Allow wrapping.

Tokens used

space.1, space.2, space.3, space.4, space.5, space.6

Accessibility

Notes

• Presentational. Use a semantic element via children.

Composes with

Component	Relation	Note
Flex	alternative	Flex when you need explicit align/justify control.
Grid	alternative	Grid for 2-D layout.
Box	sibling

Prompt examples

These are the AI prompt → JSX mappings used by the helixui prompt DSL and integrations like Cursor / Claude Code.

vertical layout

“vertical stack with 16px gap”

<Stack gap={4}>{children}</Stack>

right-aligned button row

“horizontal stack with right alignment”

<Stack direction="row" justify="end" gap={2}>{buttons}</Stack>

Related

• Flex
• Grid
• Box