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.
npx shadcn@latest add https://liqui.design/r/button.jsondrag me over an edge
Cancel
Continue
Everything above is the component source shadcn add installs. Drag the panel across a line and watch the line bend.
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.