Quick start

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.

It comes out of Liquid Glass Design, a gallery of liquid glass references — this is the part of that collection you can install.

Install

Adding a component is the whole setup:

npx shadcn@latest add https://liqui.design/r/button.json

That writes components/ui/button.tsx into your project, adds the glass design tokens to your globals.css, and installs @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.

Installing more than one? Register the namespace once in components.json and drop the URLs:

components.json

{
  "registries": {
    "@liqui-design": "https://liqui.design/r/{name}.json"
  }
}

npx shadcn@latest add @liqui-design/button @liqui-design/select

@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.

Building your own surfaces on top of LiquiGlass instead? The theme is installable on its own — it is what every component above pulls in:

npx shadcn@latest add https://liqui.design/r/liqui.json

Already 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

Glass

The material, its dials, and where it degrades.

Components

All nine, shown on a real backdrop.

Install

Use it

Requirements

Glass

Components

On this page