Hopper

Stack

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

View sourceView on npmReport an issue
AI Tip Want to skip the docs? Use the MCP Server

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.