Apple iOS 26 glass, in your own codebase

Liquid Glass, copied into your project.

One command drops the component source into your repo — no runtime dependency, no wrapper, no lock-in. Own the file, edit the file. Eleven props cover refraction, depth, dispersion and light.

$
0 runtime deps·React 18+·MIT
refraction · depth · dispersion
Now Playing02:14
01

You own the source

The CLI writes the component into your components folder. Nothing to import from node_modules, nothing to wait on for a fix.

02

Real refraction

A generated displacement map bends the backdrop in a band around the edges, so the glass distorts the page instead of merely blurring it.

03

Channels split at the edge

Red, green and blue are displaced by slightly different amounts and screened back together. That split is the dispersion prop.

04

Masks belong on the layers

A mask on the container would form a backdrop root and blank the effect out, so layerClassName reaches each effect layer instead.

Playground

Every prop, live, starting from the component's own defaults. Switch to Code for the matching JSX.

Liquid Glass

live

Drag the backdrop under the panel and the rim answers — the displacement map is rebuilt from the component's measured size.

ContinueLater
soft drifting light · drag to pan