Introduction

What you get

• 6 components so far: Button, Dropdown Menu, Tab Bar, Tabs, Toast, Toolbar.
• Each extends the shadcn/ui component of the same name and forwards its props, refs, and events. The primitives still handle semantics, focus, and keyboard input.
• The glass is CSS: a backdrop blur, a tinted fill, and a few highlights. The motion is a spring in plain TypeScript that writes CSS custom properties. There is no animation library, no WebGL, and no React render per frame.

One import away

Install a component, then change where you import it from. The JSX stays the same.

// Before
import { Button } from "@/components/ui/button"

// After
import { Button } from "@/components/ui/liquid/button"

Inspiration

liquidcn is inspired by Apple’s Liquid Glass: the lens that lifts across a tab bar, the swell of a pressed control, the menu that grows out of its button, and the Edit button that turns into a check. Motion lists the principles and the numbers behind them.

Limits

Where the web version differs from Liquid Glass on Apple platforms:

• Refraction of the page behind the glass needs Chromium, the only engine that renders SVG filters in backdrop-filter. Elsewhere the glass keeps its blur without the bend at the rim.
• The lens magnifies a copy of the control’s own labels. The page behind a bar bends at the bar’s rim, but the lens does not magnify it.
• Surfaces fuse where the library knows they meet: a tab bar and its search button, and a menu and its trigger.

Browser support

Current Chrome, Edge, Safari, and Firefox all support backdrop blur. Where it is missing, glass falls back to an opaque fill. Chrome and Edge also bend the backdrop at the rim of bars and toolbars. Pointer events cover mouse, pen, and touch, and every interaction has a keyboard path.