Automattic Design System

Components

Stack

A flexible layout component using CSS Flexbox for consistent spacing and alignment. Built on design tokens for predictable spacing values.

import { Stack } from '@wordpress/ui';

View on Storybook

View source on GitHub

PropsPermalink to this section

NameDefaultDescription
direction

"inherit" | "row" | "initial" | "-moz-initial" | "revert" | "revert-layer" | "unset" | "column"

The direction of the stack.

gapundefined

"xs" | "sm" | "md" | "lg" | "xl" | "2xl" | "3xl"

The amount of space between each child element using design system tokens.

align'initial'

AlignItems | undefined

The alignment of the stack items along the cross axis.

justify'initial'

JustifyContent | undefined

The alignment of the stack items along the main axis.

wrap

"inherit" | "wrap" | "initial" | "-moz-initial" | "revert" | "revert-layer" | "unset" | "nowrap"

Whether the stack items should wrap to the next line.

children

ReactNode

The content to be rendered inside the component.

className

string

CSS class name to apply to the element.

style

CSSProperties

CSS style to apply to the element.

render

ComponentRenderFn<HTMLAttributesWithRef<any>> | ReactElement<Record<string, unknown>, string | JSXElementConstructor<any>> | undefined

Replaces the component’s default HTML element using a given React element, or a function that returns a React element.

ExamplesPermalink to this section

DefaultPermalink to this section

const Default = () => <Stack gap="md">{[
        <DemoBox key="demoBox" />,
        <DemoBox variant="lg" key="demoBox-2" />,
        <DemoBox key="demoBox-3" />,
        <DemoBox key="demoBox-4" />,
        <DemoBox variant="lg" key="demoBox-5" />,
        <DemoBox key="demoBox-6" />,
    ]}</Stack>;

NestedPermalink to this section

const Nested = () => <Stack align="center" justify="center">{[
        <DemoBox variant="lg" key="demoBox" />,
        <Stack gap="lg" key="stack">
            <DemoBox />
            <DemoBox />
        </Stack>,
        <DemoBox variant="lg" key="demoBox-2" />,
        <Stack direction="column" key="stack-2">
            <DemoBox />
            <DemoBox />
        </Stack>,
        <DemoBox variant="lg" key="demoBox-3" />,
    ]}</Stack>;