Stack

Stack enables layout of its immediate children along the vertical or horizontal axis
  • Experimental
  • Review pending by accessibility team
import {Stack} from '@primer/react-brand'

Examples

Default

Stack is a layout helper component intended for rendering children in a single direction.

Use the direction prop to alternate between vertical and horizontal directions.

Many Stack props - including direction - accept both string and Object values. The former will apply the value across all viewports, while the latter will permit granular control at specific breakpoints. See Responsive below for more details.

Alignment

Stack provides alignItems and justifyContent props for determining the rendering direction on the cross-axis and main-axis respectively.

Use the playground below to experiment with the various options.

Responsive

Passing an Object of a particular shape will allow granular control of direction, gap, alignItems, justifyContent and padding at various supported breakpoints.

Supported breakpoints are narrow, regular and wide.

The Object value does not require all properties be passed, but rather operates on the basis of min-width.

E.g. Providing only narrow will apply that value to all larger breakpoints, but not the other way.

Component props

Stack

NameTypeDefaultDescription
direction'horizontal'
'vertical'
'vertical'Determines layout direction
gap'none'
'condensed'
'normal'
'spacious'
'condensed'Determines gap between items
padding'none'
'condensed'
'normal'
'spacious'
'condensed'Determines padding applied to Stack parent
justifyContent'center'
'flex-start'
'flex-end'
'space-between'
'space-around'
'space-evenly'
Determines rendering on the main-axis
alignItems'center'
'flex-start'
'flex-end'
Determines rendering on the cross-axis