Skip to main content
ZStack(children: Component): Component;
ZStack(children: Component[]): Component;
ZStack(props: { alignment?: Alignment }, children: Component[]): Component;
​
children
Component | Component[]
required
A single component or array of components to layer. The last child renders on top.
​
props
object
Configuration options for the stack.

​
Support

​
Usage

​
Basic overlay

ZStack([
    Image({ url: "background.jpg" }),
    Text("Overlay text")
        .foregroundStyle(Color("white"))
        .font("title")
])

​
With alignment

ZStack({ alignment: "bottomTrailing" }, [
    Image({ url: "photo.jpg" })
        .frame({ width: 200, height: 200 }),
    Text("Caption")
        .padding(8)
        .background(Color("black").opacity(0.6))
        .foregroundStyle(Color("white"))
        .cornerRadius(4)
])

​
Badge overlay

ZStack({ alignment: "topTrailing" }, [
    Image({ systemName: "bell" })
        .font("title"),
    Circle()
        .fill(Color("red"))
        .frame({ width: 12, height: 12 })
])

​
Layered backgrounds

ZStack([
    Rectangle().fill(Color("blue")),
    Circle()
        .fill(Color("white").opacity(0.3))
        .frame({ width: 150, height: 150 }),
    Text("Center")
        .foregroundStyle(Color("white"))
])
    .frame({ width: 200, height: 200 })

​
See Also