Stack

AI Tip Want to skip the docs? Use the MCP Server

A stack component is a layout primitive used to arrange elements vertically.

View sourceView on npmReport an issue

Usage

Reverse

The order and direction of stack items can be reversed.

Align X

Stack items can be aligned on the horizontal axis.

Align Y

Stack items can be aligned on the vertical axis.

Best Practices

Stack is a specialized layout component for arranging items vertically with consistent spacing. It's a preset of Flex with direction="column", designed for common vertical layouts like form fields, card content, and list items.

Stack should:

  • Be used for simple vertical layouts where items are stacked with consistent spacing.
  • Use Hopper space tokens for the gap property to ensure consistency.
  • Be the default choice for vertical layouts unless you need custom alignment or other flex properties.
  • Keep layouts simple and semantic without unnecessary wrapper elements.

Do's and Don'ts

Do
Use Stack for simple vertical layouts with consistent spacing
Don't
Use Flex with direction='column' when Stack is sufficient
Do
Use `alignY` to adjust vertical alignment of items
Don't
Use `alignItems` which is not supported by `Stack`
Do
Use `alignX` to adjust horizontal alignment of items
Don't
Use `justifyContent` which is not supported by `Stack`

Props

reverse?

Whether or not to reverse the order of the elements.

alignX?

An alias for the css align-items property.

alignY?

An alias for the css justify-content property.

style?
className?
wrap?

Whether to wrap the flex items. The value can also be a boolean.

basis?

An alias for the css flex-basis property.

grow?

An alias for the css flex-grow property.

shrink?

An alias for the css flex-shrink property.

inline?

Whether to display the flex container as an inline element.

Migration Notes

Coming from Orbiter, you should be aware of the following change:

  • The default gap value has been reduced to 1rem / var(--hop-space-stack-md) from 1.25rem. Use UNSAFE_gap="1.25rem" as a temporary measure during the migration to the Hopper design system. This value should eventually be removed to align with the new design standards.