Skip to contentShopify logoPolaris

Vertical stack

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

Alpha

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 (
    <SpacingBackground>
      <VerticalStack gap="5">
        <Placeholder height="48px" />
        <Placeholder height="48px" />
        <Placeholder height="48px" />
      </VerticalStack>
    </SpacingBackground>
  );
}

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

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

Props

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

interface VerticalStackProps
children?React.ReactNode
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.

id?string

HTML id attribute.

reverseOrder?boolean

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

Related components

Related resources

  • 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.