Add Liquid Glass to a React app with shadcn

Start with the app you already have

Glassy UI copies React source into a Tailwind CSS 4 app. You can inspect and edit every installed file. There is no Glassy UI runtime package and no account to create.

If your app already has a shadcn components.json, keep it. Otherwise initialize shadcn first:

pnpm dlx shadcn@4.14.1 init

Merge this registry entry into components.json. Keep your existing aliases, style and other registries; this is an addition to that file, not a replacement.

{
  "registries": {
    "@glassyui": "https://glassyui.com/r/{name}.json"
  }
}

Install one component

pnpm dlx shadcn@4.14.1 add @glassyui/glass-button

import { GlassButton } from "@/components/glassyui/glass-button";

export default function Page() {
  return <GlassButton variant="prominent">Explore projects</GlassButton>;
}

The registry resolves shared files and package dependencies. Its provider module imports the glass stylesheet automatically. A provider wrapper is optional for a simple button; add one when you want synchronized preferences across your app.

Reproduce a complete example

Open Glass Scene, Glass Lens, or Glass Dock. Their Usage sections contain the same source that renders the preview, including the artwork. Save that source in the named file, run its example install command, then import its exported component.

A scene composition uses more than the scene renderer: its panels and buttons need installing too. The example command includes those dependencies. This is separate from the command for the primitive alone.

Make it yours

Use className for size, spacing and color. Component defaults sit in a CSS cascade layer, so Tailwind utilities can override them without !. Preserve the accessibility preference rules when editing the source.

Glass needs a backdrop to be visible. CSS frost blurs what is behind a surface; the refractive scene uses the image you supply. A glass panel on a flat background will look quieter than the same panel over a detailed image.

If the CLI cannot resolve @glassyui, check the mapping before changing component code. If an import cannot resolve, check the installed target path against your app aliases. The installation reference explains the shared files and optional provider.