Components / Layout

ZStack

ZStack stacks children along the z-axis. Every child sits in the same grid cell and shares the same origin — source order is paint order, so the last child appears on top.

Loading playground…

What it is

A <Box display="grid"> with a one-cell grid template. Every child is wrapped in a display: contents Box assigned to that single cell, so children overlap without claiming layout space beyond the largest one. Sizing comes from the largest child unless you set an explicit width or height on ZStack itself.

The model matches the rest of React: source order is z-order. The last child paints on top.

Install

ZStack is exported from usemotif. No separate install.

example.tsx

import { ZStack } from 'usemotif';

API

ZStack

stable

function ZStack(props: ZStackProps): JSX.Element

childrenReactNode

Children to stack. Each one renders inside an internal cell-assigning wrapper.

…BoxPropsBoxProps

Every prop Box accepts. `display` and `gridTemplateAreas` are managed by ZStack.

Examples

Avatar with a badge overlay:

example.tsx

<ZStack>
<Avatar src={user.avatar} size="lg" />
<Box
  position="absolute"
  bottom={0}
  right={0}
  w={10}
  h={10}
  borderRadius="50%"
  bg="$colors.status.success"
/>
</ZStack>

Image with caption:

example.tsx

<ZStack>
<Image src={cover.src} alt="" />
<Box
  position="absolute"
  bottom={0}
  left={0}
  right={0}
  p="$3"
  bg="rgba(0,0,0,0.5)"
  color="$colors.fg.onAccent"
>
  {caption}
</Box>
</ZStack>