Vertical stack

Use to display children vertically and horizontally with full width by default. Based on CSS Flexbox.


This component is a work in progress and ready for exploratory usage, with breaking changes expected in minor version updates. Please use with caution. Learn more about our component lifecycles.

Control the vertical space between children using the gap prop.

import React from 'react';
import {VerticalStack} from '@shopify/polaris';

function VerticalStackWithGapExample() {
  return (
      <VerticalStack gap="5">
        <Placeholder height="48px" />
        <Placeholder height="48px" />
        <Placeholder height="48px" />

const SpacingBackground = ({children}: {children: React.ReactNode}) => {
  return (
        background: 'var(--p-color-bg-success-subdued)',
        height: 'auto',

const Placeholder = ({height = 'auto'}) => {
  return (
        background: 'var(--p-color-text-info)',
        padding: '14px var(--p-space-2)',
        height: height,


Want to help make this feature better? Please share your feedback.

interface VerticalStackProps
as?'div' | 'ul' | 'ol' | 'fieldset'

HTML Element type.

Defaults to 'div'.

align?'start' | 'center' | 'end' | 'space-around' | 'space-between' | 'space-evenly'

Vertical alignment of children.

inlineAlign?'start' | 'center' | 'end' | 'baseline' | 'stretch'

Horizontal alignment of children.

gap?T | { [Breakpoint in BreakpointsAlias]?: T; }<SpaceScale>

The spacing between children.


HTML id attribute.


Reverse the render order of child items.

Defaults to false.

Best practices

Stacks should:

  • Not be used for complex or unique arrangements of components
  • Not be used for large-scale page layout

  • VerticalStack props are named following the convention of CSS logical properties, such as 'padding-inline-start' and 'padding-block-start'. Learn more about CSS logicial properties.