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"div" | "span" | "main" | "article" | "section" | "form" | "label"Root element.div
gapResponsiveProp<0 | 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | 11 | 12 | 13 | 14 | 15 | 16 | 17 | 18>Gap unit, increments of 4px.-
directionResponsiveProp<Direction>Flexbox `flex-direction`.column
alignResponsiveProp<Align>Flexbox `align-items`.stretch
justifyResponsiveProp<Justify>Flexbox `justify-content`.flex-start
flexReactTextFlexbox `flex`.initial
debugbooleanVisualize the whitespace.-
classNamestringRoot element class name.-
styleCSSPropertiesRoot element inline styles.-

Gap is a unit on a 4px grid scale.

Code Editor

Resize the window to observe changes to the layout.

Code Editor
Code Editor
Code Editor