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*	`ReactNodeNoStrings`	Elements to lay out.	-
as	`"div" \| "span" \| "main" \| "article" \| "section" \| "form" \| "label" \| "header" \| "li" \| "a"`	Root element.	`div`
gap	`ResponsiveProp<0 \| 1 \| 2 \| 3 \| 4 \| 5 \| 6 \| 7 \| 8 \| 9 \| 10 \| 11 \| 12 \| 13 \| 14 \| 15 \| 16 \| 17 \| 18>`	Gap unit, increments of 4px.	-
direction	`ResponsiveProp<Direction>`	Flexbox `flex-direction`.	`column`
align	`ResponsiveProp<Align>`	Flexbox `align-items`.	`stretch`
justify	`ResponsiveProp<Justify>`	Flexbox `justify-content`.	`flex-start`
flex	`string \| number`	Flexbox `flex`.	`initial`
debug	`boolean`	Visualize the whitespace.	-
className	`string`	Root element class name.	-
style	`CSSProperties`	Root element inline styles.	-

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

Contact Support Login

Code Editor