Overview

Physics-based liquid glass UI components for React. Built on @avenra/liquid-glass with full shadcn registry support.

Browser Support

The liquid glass refraction effect relies on SVG feTurbulence / feDisplacementMap filters and advanced compositing that is currently only fully supported in Chromium-based browsers (Chrome, Edge, Arc, Brave, Opera).

On Firefox, Safari, and other non-Chromium browsers the components automatically fall back to a backdrop-filter: blur() effect so they remain visually coherent — but without the physics-based refraction and specular highlights.

Browser	Liquid glass effect	Fallback
Chrome 90+	✅ Full refraction	—
Edge 90+	✅ Full refraction	—
Arc / Brave / Opera	✅ Full refraction	—
Firefox	⚠️	`backdrop-filter: blur()`
Safari	⚠️	`backdrop-filter: blur()`

Prerequisites

Before adding any liquid glass component, complete the steps below once per project.

Install the package

All components are powered by a single shared engine. Install it once — every component imports from it.

npm install @avenra/liquid-glass

pnpm add @avenra/liquid-glass

yarn add @avenra/liquid-glass

bun add @avenra/liquid-glass

Add the styles to your root layout

The components require a small CSS file bundled with the package. Import it once at the top of your root layout so it applies globally.

app/layout.tsx

import '@avenra/liquid-glass/styles';

export default function RootLayout({ children }: { children: React.ReactNode }) {
  return (
    <html lang="en">
      <body>{children}</body>
    </html>
  );
}

Alternatively, if you prefer to load it via CDN (e.g. in a plain HTML project):

<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@avenra/liquid-glass/styles" />

Skipping this step is the most common cause of components rendering without the glass effect. Make sure the import is in the root layout, not a page or component file.

Register the Avenra registry in `components.json`

To use the short @avenra/ prefix with the shadcn CLI, add the registry entry to your components.json. This lets you add any component with a single command instead of passing the full URL each time.

components.json

{
  "$schema": "https://ui.shadcn.com/schema.json",
  "style": "default",
  "rsc": true,
  "tsx": true,
  "tailwind": { ... },
  "aliases": { ... },
  "registries": {
    "@avenra": "https://avenra.online/r/{name}.json"
  }
}

Once added, you can install any component using the short alias:

npx shadcn@latest add @avenra/liquid-button
npx shadcn@latest add @avenra/liquid-slider
npx shadcn@latest add @avenra/liquid-switch

pnpm dlx shadcn@latest add @avenra/liquid-button
pnpm dlx shadcn@latest add @avenra/liquid-slider
pnpm dlx shadcn@latest add @avenra/liquid-switch

yarn dlx shadcn@latest add @avenra/liquid-button
yarn dlx shadcn@latest add @avenra/liquid-slider
yarn dlx shadcn@latest add @avenra/liquid-switch

bunx shadcn@latest add @avenra/liquid-button
bunx shadcn@latest add @avenra/liquid-slider
bunx shadcn@latest add @avenra/liquid-switch

Components are placed in components/ui/ following the standard shadcn convention.

You can still use the full URL form if you prefer not to modify components.json:

npx shadcn@latest add https://avenra.online/r/liquid-button.json

Available Components

Component	Description
Button	A glass button with refractive bezel and specular highlights.
Slider	A controlled range slider with liquid glass track and thumb.
Switch	A toggle switch with fluid on/off animation and glass effect.

Shared Glass Options

Every component accepts an options prop that maps to GlassOptions — the shared configuration object for the underlying engine. You only need to learn these once; they behave identically across all components.

Option	Type	Default	Description
`bezelWidth`	`number`	`20`	Width of the refractive rim in px.
`glassThickness`	`number`	`80`	Virtual depth affecting lateral ray drift.
`refractiveIndex`	`number`	`1.5`	Index of refraction. Higher = more distortion.
`profile`	`Profile`	`'convexSquircle'`	Bezel height-map profile.
`blur`	`number`	`0.5`	Pre-displacement Gaussian blur stdDeviation.
`saturation`	`number`	`1.3`	Post-displacement colour saturation multiplier.
`specularSlope`	`number`	`0.8`	Specular highlight intensity (0–1).
`filterMode`	`FilterMode`	`'screen'`	SVG blend mode for the specular layer.
`width`	`number`	auto	Override element width in px.
`height`	`number`	auto	Override element height in px.
`radius`	`number \| null`	auto	Corner radius in px. `null` reads from CSS.