Skip to main content
ZStack(children: Component): Component;
ZStack(children: Component[]): Component;
ZStack(props: { alignment?: Alignment }, children: Component[]): Component;

​
Parameters

​
children
Component | Component[]
A single child component or an array of child components to overlay.
​
props
{ alignment?: Alignment }
Configuration options for the depth stack.

​
Support

​
Usage

​
Basic overlay

ZStack([
    Rectangle().fill(Color("blue")),
    Text("Overlay text")
])

​
Layered content

ZStack({ alignment: "center" }, [
    Circle()
        .fill(Color("gray")
        .opacity(0.3))
        .frame({ width: 100, height: 100 }),
    Text("42")
        .font("largeTitle")
        .bold()
])