Stack

The Stack component is a layout component that allows you to stack elements on top of each other. It extends the Column component, so it has all the same alignment and distribution props.

<Stack>
  <Placeholder opacity={500} size={{ width: 600, height: 700 }} />
  <Placeholder opacity={500} size={{ width: 700, height: 600 }} />
</Stack>

Use Cases

The Stack component can be used to create a variety of layouts.

Image Overlay

You can use the Stack component to overlay content on an image.

<Surface size={700} overflow="hidden">
  <Stack justify="end" align="start">
    <Image src="https://picsum.photos/id/12/800/800" size={700} />
    <Box
      size="stretch"
      background={{ color: "surface.base" }}
      opacity={500}
    />
    <IconButton variant="tertiary" icon={Icon.Favorite} margin={200} />
  </Stack>
</Surface>

Limitations

Child Props

Warning

The Stack component clones its children to apply a className to them. This means that if you pass a custom component as a child, it must accept and apply the className prop to its root element.

Reference

Props

The Stack component inherits all of the props from the Column component. It has no unique props.