LiquiKit

Liquid glass components for React, with physically based refraction. Built on Base UI and distributed as a shadcn registry: the CLI copies the source into your project.

Using it

Add the registry to components.json:

{
  "registries": {
    "@liquikit": "https://liquikit.dev/r/{name}.json"
  }
}

Then add components:

npx shadcn@latest add @liquikit/switch @liquikit/menu

Components land in components/liquikit/, with the refraction engine in components/liquikit/glass/. The glass bends what is around it, so wrap that area in a GlassScope and pass its background as backdrop.

In React Server Components, use the named parts of compound components (MenuRoot, MenuTrigger, MenuPopup…). The Menu.Root form works in client components.

Repository

bun install
bun run dev        # builds the registry, then starts the site on :3000 and Lumen on :3200
bun run build      # registry, Lumen, then a prerendered site in apps/www/dist
bun run typecheck
bun run check      # Biome

The registry is built into apps/www/public/r by shadcn build. Items link to each other by URL, taken from REGISTRY_URL (default https://liquikit.dev/r). To try installs against a local site:

cd apps/www && REGISTRY_URL=http://localhost:3000/r bun run registry:build

Adding a component

1. Add packages/liquikit/src/<name>.tsx (with "use client"), importing the engine from ./glass.
2. Add it to components in scripts/registry.ts with a title and description.
3. Export it from packages/liquikit/src/index.ts to use it on the site.

The engine's design notes are in packages/liquikit/GLASS.md.

Acknowledgements

Refracting the page through a displacement map traced with Snell's law follows Chris Feijoo's Liquid Glass in the Browser: Refraction with CSS and SVG, also given as a talk at BeJS. The slider's lens is fitted to the one in his talk.

License

MIT