Components

Drop-in controls with the blocks already wired.

Each component is a lens with a style, a touch response and — where it needs one — a view already assembled. They take the same LiquidGlassStyle vocabulary, so a component and a hand-built lens can be given the same look.

One page each#

Slider

Self-contained glass, and the callback you should commit on.

Switch

A switch whose handle becomes glass under your thumb.

Button

A lens shaped like a button, with a press that answers.

Floating action button

The circular one, and the extended one.

App bar

A floating capsule with your page running under it.

Tab bar

Tabs in one glass capsule, no scaffold required.

Scaffold

The page that captures itself.

Motion

The moving-glass model under the thumb and the pill, on its own.

Draggable

Drag wiring you do not have to write again.

Sheets

The glass surface you pull up.

Dialogs

An alert on glass, and the presenter that animates it in.

Morph

Glass that measures its child and flows to the new size.

What each one needs#

On Impeller everything refracts the live backdrop and works anywhere with no setup. The difference shows on Skia: some refract your app content and so need an ancestor view, while others supply their own background and work anywhere on both engines.

Component	Skia requirement
`LiquidGlassSlider`	None. Self-contained — it owns its background and refracts its own track.
`LiquidGlassSwitch`	None. Self-contained, same as the slider.
`LiquidGlassScaffold`	None. It is the pipeline — its bars and lenses refract the body on both engines.
`LiquidGlassButton`, `LiquidGlassFab`	An ancestor `LiquidGlassView`; frosted fallback without one.
`LiquidGlassAppBar`	`LiquidGlassView`
`LiquidGlassTabBar`	An ancestor `LiquidGlassView` — or a `LiquidGlassScaffold`, which is what feeds it a page when it floats as a bottom bar. For a standalone bar on Impeller, use `.withImpeller(...)`.
`LiquidGlassSheet`, `LiquidGlassDialog`	An ancestor `LiquidGlassView` — present it from a context inside the view and the route carries the glass scope across on its own.
`LiquidGlassMorph`	An ancestor `LiquidGlassView` — it is a blender under the hood, and the blend rule applies unchanged.
`LiquidGlassMotionPill`, `LiquidGlassDraggable`	Whatever the lens or content they wrap requires.

One vocabulary#

Every component takes a style: of the same LiquidGlassStyle used by a hand-built lens, and the ones you press take a touch:. A look authored once travels across all of them — and across your own lenses — as a single value.

Comments

Comments are GitHub Discussions — reply from either place.