Alpha stack

Use to display elements vertically with items placed directly below the preceding item.


This component and its documentation is in development. There could be breaking changes made to it in a non-major release of Polaris. Please use with caution.

By default, stack is left aligned and stacked items are spaced with 16px in between.

import React from 'react';
import {AlphaStack, Text} from '@shopify/polaris';

function AlphaStackExample() {
  return (
      <Placeholder width="320px" label="Stack child" />
      <Placeholder width="320px" />
      <Placeholder width="320px" />

const Placeholder = ({
  label = '',
  height = 'auto',
  width = 'auto',
  childWidth = 'auto',
}) => {
  return (
        background: '#7B47F1',
        padding: '14px var(--p-space-2)',
        height: height ?? undefined,
        width: width ?? undefined,
          display: 'inline-block',
          background: 'rgba(255, 255, 255, 0.3)',
          color: '#FFFFFF',
          width: childWidth ?? undefined,
        <Text as="h2" variant="bodyMd" fontWeight="medium">


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

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

HTML Element type.

Defaults to 'div'.

align?'start' | 'end' | 'center'

Vertical alignment of children.

Defaults to 'start'.


Toggle children to be full width.

Defaults to false.

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

The spacing between children.

Defaults to '4'.


HTML id attribute.