Skip to main content
Material(props?: MaterialProps): Material;

​
Parameters

​
props
MaterialProps
Material configuration. Can be a material type string or a configuration object.

​
Support

​
Usage

​
Basic thin material

Material("thin")

​
Regular material

Material("regular")

​
Custom material with opacity

Material({
    type: "regular",
    opacity: 0.8
})

​
Material with custom blur

Material({
    type: "thick",
    blurRadius: 20
})

​
Material as background

VStack([
    Text("Content over material"),
    Text("Translucent background")
])
.padding()
.background(Material("thin"))
.cornerRadius(12)

​
Different material types

VStack({ spacing: 16 }, [
    Text("Ultra Thin").padding().background(Material("ultraThin")),
    Text("Thin").padding().background(Material("thin")),
    Text("Regular").padding().background(Material("regular")),
    Text("Thick").padding().background(Material("thick"))
])