Add Glassy UI to your app

Installation

Start with a Tailwind-enabled app initialized for shadcn, then merge this exact top-level mapping into its components.json.

pnpm dlx [email protected] init

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

Then install a component with the pinned CLI version:

pnpm dlx [email protected] add @glassyui/glass-button

Usage

The installed provider module imports its own styles/liquid.css. Whenever an installed component imports the provider module, that stylesheet activates transitively. Glass Button follows that path, so this example needs no separate CSS import or provider wrapper.

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

export default function Page() {
  return <GlassButton>Launch</GlassButton>;
}

Wrap an app or preview area in GlassProvider only when its children need synchronized theme, quality, motion, transparency, and interaction preferences.

import { GlassProvider } from "@/components/glassyui/glass-provider";

export function AppProviders({ children }: { children: React.ReactNode }) {
  return <GlassProvider>{children}</GlassProvider>;
}

Render LiquidFilters only when legacy or global CSS refers to the shared #lg-liquid-refraction SVG filter. Supplied-background surface refraction creates its own filter.

Next steps

Browse the eleven shipped components and inspect each page for its direct registry declarations and complete installed closure.