Liquid Glassregistry
ShowcaseGitHub
LIQUID GLASS

shadcn-compatible registry

Components

React components in liquid glass, with real SVG refraction rather than a flat blur. Base UI provides the behavior; the glass is the skin. Install any of them with the shadcn CLI.

Components

Glass Surface

The base primitive: crisp content over a glass surface that frosts the scene behind it, and refracts it on Chromium.

View component →
Components

Glass Card

A glass surface with a border, padding, and an elevation shadow.

View component →
Components

Glass Dialog

A modal dialog: Base UI behavior (focus trap, scroll lock, ARIA) with a frosted glass panel over a dimmed backdrop.

View component →
Components

Glass Tabs

A segmented control: Base UI Tabs with a glass pill that slides under the active label and refracts it.

View component →
Components

Glass Switch

A toggle: Base UI Switch with a real glass thumb. Press it and the track refracts through the glass, a live SVG lens rather than a CSS blur.

View component →
Components

Glass Slider

A slider: Base UI Slider with a real glass thumb. Drag it and the rail refracts through the glass, a live SVG lens rather than a CSS blur.

View component →
Components

Glass Dropdown Menu

A dropdown menu: Base UI Menu (anchored positioning, roving focus, typeahead) with a frosted glass popup.

View component →
Effects

Glass Text

Refract live text through the glyph-shaped glass filter.

View component →
Effects

Glass Shape

Liquid glass clipped to any alpha source: an inline <svg>, <img>, or <canvas>.

View component →
Effects

Glass Lens

A movable refraction lens over live content; the text, grid, and chips beneath it bend in place.

View component →
Effects

Glass Button

Change a glass button’s label and it reshapes to fit, the refraction stretching through the morph.

View component →
Effects

Glass Ripple

A press sends a refraction ripple out from that point, tinted with the palette. No WebGL.

View component →
Effects

Glass QR

A scannable QR rendered by a WebGL shader. Tap the centre for a refraction ripple.

View component →