This feature is still experimental. “Experimental” means this is an early implementation subject to drastic and breaking changes.


ZStack allows you to stack things along the Z-axis.

import { __experimentalZStack as ZStack } from '@wordpress/components';

function Example() {
    return (
        <ZStack offset={ 20 } isLayered>
            <ExampleImage />
            <ExampleImage />
            <ExampleImage />


isLayered: boolean

Layers children elements on top of each other (first: highest z-index, last: lowest z-index).

  • Required: No
  • Default: true

isReversed: boolean

Reverse the layer ordering (first: lowest z-index, last: highest z-index).

  • Required: No
  • Default: false

offset: number

The amount of space between each child element. Its value is automatically inverted (i.e. from positive to negative, and viceversa) when switching from LTR to RTL.

  • Required: No
  • Default: 0

children: ReactNode

The children to stack.

  • Required: Yes