Stack Props

Name	Type	Default	Description
direction	'horizontal' | 'vertical'	'vertical'	Direction in which children are arranged.
gap	SpacingStep	—	Space between adjacent children.
padding	SpacingStep	—	Padding on every side of the container.
paddingInline	SpacingStep	—	Inline-axis padding. Overrides padding on this axis.
paddingBlock	SpacingStep	—	Block-axis padding. Overrides padding on this axis.
hAlign	StackAlignment	—	Controls horizontal main- or cross-axis alignment according to direction.
vAlign	StackAlignment	—	Controls vertical main- or cross-axis alignment according to direction.
justify	StackMainAlignment	—	Alias for main-axis alignment.
align	StackCrossAlignment	—	Alias for cross-axis alignment.
wrap	'nowrap' | 'wrap' | 'wrap-reverse'	'nowrap'	Controls how children wrap.
width	number | string	—	Container width. Numbers are interpreted as pixels.
height	number | string	—	Container height. Numbers are interpreted as pixels.
maxWidth	number | string	—	Maximum container width.
minHeight	number | string	—	Minimum container height.
isScrollable	boolean	false	Enables automatic overflow scrolling.
as	string | Component	'div'	Root element or Vue component.

SpacingStep accepts these values:

type SpacingStep = 0 | 0.5 | 1 | 1.5 | 2 | 3 | 4 | 5 | 6 | 8 | 10

HStack Props

HStack uses a fixed horizontal direction.

• The component supports shared Stack props.
• The component does not expose direction.
• The table below defines alignment.

Name	Type	Default	Description
hAlign	StackMainAlignment	—	Horizontal main-axis alignment.
vAlign	StackCrossAlignment	'stretch'	Vertical cross-axis alignment.

VStack Props

VStack uses a fixed vertical direction.

• The component supports shared Stack props.
• The component does not expose direction.
• The table below defines alignment.

Name	Type	Default	Description
hAlign	StackCrossAlignment	'stretch'	Horizontal cross-axis alignment.
vAlign	StackMainAlignment	—	Vertical main-axis alignment.

StackItem Props

Name	Type	Default	Description
size	'static' | 'fill'	'static'	Keeps the intrinsic size or fills the remaining space.
crossAlignSelf	'start' | 'center' | 'end' | 'stretch'	—	Overrides cross-axis alignment for this item.
isScrollable	boolean	false	Enables automatic overflow scrolling.
as	string | Component	'div'	Root element or Vue component.

Slots

Stack, HStack, VStack, and StackItem all receive content through the default slot.

Native attributes

The root element receives:

• HTML attributes.
• aria-* attributes.
• data-* attributes.
• class.
• style.
• Native event listeners.