Add Glassy UI to your app

Installation

Start with a React 19+ app on Tailwind CSS 4. If it does not have a shadcn components.json, initialize it first:

npx shadcn@4.14.1 init

Then add a component. Glassy UI is in the shadcn registry directory, so the CLI finds @glassyui with no setup:

npx shadcn@4.14.1 add @glassyui/glass-button

Each component page has npm, pnpm, yarn and bun commands, and a manual install with every file. Yarn commands need modern Yarn for dlx.

Building with Expo? See Add Glassy UI to an Expo app.

Already using shadcn/ui components? The Glassy UI theme restyles them without code changes: Make a shadcn/ui app glassy with one command.

Usage

Set data-lg-theme="light" or data-lg-theme="dark" on your root element, and update it with your app’s theme switch so glass labels stay readable.

<html lang="en" data-lg-theme="light">
  <body>{children}</body>
</html>

Components import styles/liquid.css themselves, so you need no CSS import or provider:

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

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

Add GlassProvider when components should share theme, quality, motion and transparency preferences. Match defaultTheme to the app’s initial theme.

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

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

Render LiquidFilters only if your own CSS refers to the #lg-liquid-refraction SVG filter. No Glassy UI component needs it.

Next steps

Browse all 38 components.

Follow the step-by-step installation guide, or start from a complete site with a Glassy UI Pro template.