Skip to main content
Material(props?: MaterialProps): Material;
​
props
MaterialProps
Material configuration. Can be a material type string or a configuration object.

​
Support

​
Usage

​
As a standalone view

Material can be used directly as a view that fills its frame with a blur effect: 
Material("thin")
    .frame({ width: 200, height: 200 })

​
As a background

Text("Over blurred background")
    .padding(16)
    .background(Material("thin"))
    .cornerRadius(12)

​
Material types comparison

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

​
Custom configuration

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

​
As a foreground style

Text("Frosted Text")
    .font("largeTitle")
    .foregroundStyle(Material("thin"))