Quick start
Install liqui and put a glass surface on screen.
liqui is a set of liquid-glass components built on Base UI primitives. Components arrive as source code in your project through the shadcn CLI; only the refraction kernel stays a dependency.
Install
Register the namespace once:
{
"registries": {
"@liqui-design": "https://liqui.design/r/{name}.json"
}
}Then set up the theme and add whatever you need:
npx shadcn@latest add @liqui-design/liqui
npx shadcn@latest add @liqui-design/button@liqui-design/liqui writes the glass design tokens into your globals.css and pulls
in @liqui-design/glass — the SVG filter
registry, displacement-map generator and browser fallbacks. That package is the
one part of liqui you are not meant to edit; everything else lands in your repo
as plain TSX.
@liqui-design/button is a registry item, not an npm package —
@liqui-design here is a key you just defined in your own
components.json, and it resolves through the shadcn CLI. npm i @liqui-design/button will not work. The only thing that comes from npm is
@liqui-design/glass, and the CLI installs it for you.
Prefer not to configure anything? Every component page also gives a direct URL that needs no namespace:
npx shadcn@latest add https://liqui.design/r/button.jsonAlready using shadcn/ui? liqui is built on the same Base UI base
(shadcn init -b base), so your existing components.json, cn() and
Tailwind token setup carry over unchanged.
Use it
import { Button } from '@/components/ui/button';
export default function Page() {
return (
<main className="min-h-dvh bg-[url(/wallpaper.jpg)] bg-cover p-10">
<Button variant="accent">Continue</Button>
</main>
);
}Note the background. Glass refracts what is behind it, so a surface on a flat fill has nothing to show — see Glass before you judge how it looks.
Requirements
- React 18 or 19
- Tailwind CSS v4
- Refraction renders in Chromium; Safari and Firefox fall back to frosted blur automatically