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.
Glass Surface
The base primitive: crisp content over a glass surface that frosts the scene behind it, and refracts it on Chromium.
View component →Glass Card
A glass surface with a border, padding, and an elevation shadow.
View component →Glass Dialog
A modal dialog: Base UI behavior (focus trap, scroll lock, ARIA) with a frosted glass panel over a dimmed backdrop.
View component →Glass Tabs
A segmented control: Base UI Tabs with a glass pill that slides to the active tab, bending the labels as it goes. Drag the pill and it lands on the nearest tab, or flick it to the next. Tabs take an icon and an accent colour, which the glass picks up.
View component →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 →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 →Glass Dropdown Menu
A dropdown menu: Base UI Menu (anchored positioning, roving focus, typeahead) with a refracting glass popup.
View component →Glass Text
Refract live text through the glyph-shaped glass filter.
View component →Glass Shape
Liquid glass clipped to any alpha source: an inline <svg>, <img>, or <canvas>.
View component →Glass Lens
A movable refraction lens over live content; the text, grid, and chips beneath it bend in place. For lenses that merge with each other, see Glass Group.
View component →Glass Loupe
The iOS text magnifier: press and hold, and a glass capsule floats above the pointer showing the line beneath it, enlarged. Drag straight away and you get an ordinary selection instead.
View component →Glass Group
Two pills in one displacement map. Get them within half the blend distance and the rims join — no seam, because there is only one field to bend. Separate glass surfaces can never do this; the showcase’s Lens stage runs on it.
View component →Glass Button
Change a glass button’s label and it reshapes to fit, the refraction stretching through the morph.
View component →Glass Ripple
A press sends a refraction ripple out from that point, tinted with the palette. No WebGL.
View component →Glass QR
A scannable QR rendered by a WebGL shader. Tap the centre for a refraction ripple.
View component →