Skip to content

Stack

Display elements vertically or horizontally on the page.

Note: This component is a work in progress. It is not being fully used across Vercel products.

Props

Props
Name
Type
Description
Default
children*ReactNodeNoStringsElements to lay out.-
as
enum
Root element.div
gapResponsiveProp<0 | 0.25 | 0.5 | 1 | 1.25 | 1.5 | 2 | 2.5 | 3 | 3.5 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | 11 | 12 | 13 | 14 | 15 | 16 | 17 | 18 | 20 | 24 | 25 | 28 | 32 | 36 | 40>Gap unit, increments of 4px.-
directionResponsiveProp<Direction>Flexbox `flex-direction`.column
alignResponsiveProp<Align>Flexbox `align-items`.stretch
justifyResponsiveProp<Justify>Flexbox `justify-content`.flex-start
flexstring | numberFlexbox `flex`.initial
debugbooleanVisualize the whitespace.-
classNamestringRoot element class name.-
styleCSSPropertiesRoot element inline styles.-
roleAriaRole-

Gap

Gap is a unit on a 4px grid scale.

Code Editor

Responsive

Resize the window to observe changes to the layout.

Code Editor

Debug

Code Editor

Nested stacks

Code Editor