Block stack

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

Block stack component examples

Control the vertical space between children using the gap prop.

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

function BlockStackWithGapExample() {
  return (
      <BlockStack gap="500">
        <Placeholder height="48px" />
        <Placeholder height="48px" />
        <Placeholder height="48px" />

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

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


interface BlockStackProps
as?'div' | 'span' | 'ul' | 'ol' | 'li' | '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; })<T><SpaceScale>

The spacing between children.


HTML id attribute.


Reverse the render order of child items.

Defaults to false.


Aria role.

Best practices

Stacks should:

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

  • BlockStack props are named following the convention of CSS logical properties, such as align="start" vs. align="top" and inlineAlign="end" vs. verticalAlign="right". Learn more about CSS logicial properties.

    On this page