Skip to content
Effects / Glass / Shaders

GlassSurface

client23 kB
@stellaria/nebula-webGlassSurfaceProps

Preview

Props

8
PropTypeDefault

children

ReactNode

className

Composes with the classes `Box` computes instead of replacing them.

string

component

The element it paints.

(ElementType & C)"div"

fallbackSurface

The solid surface painted when the theme has `effects.glass.enabled` off. Not a nicety: on those themes it is the component's entire appearance, so pick the one that belongs where the pane sits rather than leaving the default to decide.

GlassFallbackSurface"overlay"

level

Which step of the theme's `effects.glass` to take: background, border tint and backdrop filter come as a set, so this is one dial and not three. It is read only while the theme keeps glass enabled — with it off, `fallbackSurface` decides everything instead.

GlassLevel"default"

noise

Adds the grain layer over the pane. It also needs the theme's glass enabled — with glass off it paints nothing at all, rather than falling back to grain over the solid surface.

booleanfalse

shadow

Depth of the drop shadow under the pane.

"none" | ShadowLevel"none"

withBorder

Whether the hairline is drawn. Glass leans on its edge to read as a pane at all: without one it blurs into whatever it sits on, which is why this starts on and rarely wants turning off.

booleantrue

Also accepts

On top of its own props, this component forwards these groups.

Style props · 127