Stacks

Stacks are a simple way to lay out elements in a single direction.

Concepts — The patterns and opinions behind layout primitives.
Flex — For responsive and/or granular layout requirements.
Grid — For two-dimensional layout requirements.

Components

The VStack and HStack are exposed as a convenient way to create a column or row of elements that’s easy parse at a glance.

The props direction, inline, and wrap are not available on stack components.

Vertical stack

The VStack is a thin wrapper around the Flex component, where the direction prop is set to "column".

Horizontal stack

The HStack is a thin wrapper around the Flex component, where the direction prop is set to "row".