Map the namespace in components.json:

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

Then add items by name: npx shadcn@4.14.1 add @glassyui/glass-button.

The editable catalogue is registry.json, its source files live in registry/glassyui, and generated install payloads live in public/r.

Keep this repository running and temporarily map the namespace to its loopback server:

{
  "registries": {
    "@glassyui": "http://127.0.0.1:3000/r/{name}.json"
  }
}

Then add an item through that namespace:

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

The registry is the recommended path, because it resolves every required file. To copy source directly, start with a React 19+ and Tailwind CSS 4 app.

1. Install only the package dependencies the components you copy need. The complete set uses:

   pnpm add clsx cmdk \
     @radix-ui/react-accordion \
     @radix-ui/react-avatar \
     @radix-ui/react-checkbox \
     @radix-ui/react-dialog \
     @radix-ui/react-dropdown-menu \
     @radix-ui/react-popover \
     @radix-ui/react-radio-group \
     @radix-ui/react-scroll-area \
     @radix-ui/react-select \
     @radix-ui/react-slider \
     @radix-ui/react-slot \
     @radix-ui/react-switch \
     @radix-ui/react-tabs \
     @radix-ui/react-toast \
     @radix-ui/react-tooltip

2. Import a copy of src/styles/liquid.css once as a global stylesheet. It declares its own cascade layers, so do not wrap it in another @layer.

3. Copy the component files you need from src/components/liquid, then recursively copy every local relative-import dependency those files use, including the provider, preference and internal helper modules.

4. Mount GlassProvider only when the app needs synchronized or persisted preferences. Set data-lg-theme on the root element as above.

5. Mount src/components/liquid/liquid-filters.tsx only for legacy CSS that references url(#lg-liquid-refraction). Refraction of a supplied background creates its own filter for each surface.

Development and formatting

• pnpm dev – start the docs site on 127.0.0.1
• pnpm build – production build
• pnpm start – serve the built site on 0.0.0.0
• pnpm lint – Oxlint anti-slop rules and ESLint with Next.js core web vitals rules
• pnpm format:check <changed-files> – check touched files with the pinned repository formatter

Registry and consumer installs

• pnpm check:registry – verify registry metadata, source files, targets, dependencies, and blocked imports
• pnpm registry:build – regenerate the static item payloads in public/r
• pnpm registry:check-generated – compare generated registry output with public/r
• pnpm smoke:registry-routes – check /r/registry.json and /r/glass-button.json against a running local server
• pnpm check:native-registry – verify the Expo catalogue's import closures, declared packages and public/r/native payloads
• pnpm smoke:expo-consumer http://127.0.0.1:3100 – install every Expo item into a clean copy of the Expo fixture, then type-check and bundle it for iOS, Android and the web
• pnpm smoke:registry-install http://127.0.0.1:3100 – install a transitive item into a clean temporary consumer from a running local production server

Browser and release checks

• pnpm smoke:docs-routes – check the landing, component index, and component docs routes against a running local server
• pnpm smoke:release-ui http://127.0.0.1:3100 – exercise every public demo across the release viewport and preference matrix
• node scripts/smoke-header.mjs http://127.0.0.1:3100 .artifacts/header – verify the header across sizes, themes and browsers, with screenshots
• pnpm smoke:launch http://127.0.0.1:3100 .artifacts/prelaunch/launch – verify demo copying, guides, share cards and the retired template redirects in Chrome
• node scripts/capture-launch-previews.mjs http://127.0.0.1:3000 – refresh the three launch screenshots
• node scripts/build-readme-art.mjs http://127.0.0.1:3000 – redraw this README's lockup, desk and phones in .github/readme, light and dark
• node scripts/capture-share-cards.mjs http://127.0.0.1:3000 [card ...] – photograph every page's link-preview card into public/share; the home and React Native loops are rendered by link-previews/ (public/share/README.md)
• pnpm check:refraction-visuals http://127.0.0.1:3100 – capture deterministic active/plain refraction evidence, enforce edge-focused distortion in Chromium, Firefox and WebKit, read every frame of a Chromium scroll to prove the GlassSurface docs' fixed-wallpaper example never trails its wallpaper, and prove the home page's WebGL pane bends the wallpaper pinned behind it in all three engines
• pnpm check:glass-material http://127.0.0.1:3100 – prove every frosted component blurs a striped backdrop in Chromium, the lens activates, WebKit and Firefox keep the CSS frost, floating text keeps 4.5:1 contrast, and Reduce Transparency beats a consumer tint
• pnpm check:glass-scene http://127.0.0.1:3100 – prove in Chromium, WebKit and Firefox that GlassScene draws glass that lines up with the DOM, bends the backdrop at the rim, merges nearby glass, ignores where the pointer is and steps aside for accessibility settings and a missing or lost WebGL2 context, and that the controls' liquid motion stretches and settles