Glass that actually refracts
Liquid glass components for React, built on Base UI. A canvas-generated displacement map driving an SVG filter — not a blur with a white overlay.
Everything above is the component source shadcn add installs. Drag the panel across a line and watch the line bend.
Two of them aren't surfaces
Switch and Slider don't sit on glass — they carry a lens of their own, and it is hidden until you touch them. At rest each is an opaque white pill. Press and hold: it swells past its track, thins to a tenth, and the backdrop bends through it. Drag the slider and watch the rail fatten where it crosses the knob.
press and hold
You own the code
Components arrive as source in your project through the shadcn CLI. Only the refraction kernel — the maths and the browser workarounds — stays a dependency.
Built on Base UI
The same base shadcn/ui uses, so your existing components.json, cn() and Tailwind tokens carry over. Accessibility comes from the primitives, not from us.
Degrades honestly
Refraction is Chromium-only today. Safari and Firefox fall back to frosted blur automatically — no configuration, but do look at both.
Where this came from
liqui started as a collection. Liquid Glass Design gathers liquid glass and glassmorphism references — interfaces, artwork, motion — and every one of them is a picture. A picture is enough to study the material and not nearly enough to ship it: you can copy the tint and the blur out of a screenshot, but the part that makes it glass, the way an edge bends what is behind it, isn't in there to copy.
So the gallery kept the references and this became the other half of it — the same material as components you install, in the browser, over your own background.