Liquid glass components for React.
A compact glass badge in default and tinted variants, with asChild support for linking.
A glass button in default and destructive variants across four sizes, with asChild support via Radix Slot.
A glass card with header, title, description, action, content and footer parts.
A Radix dialog whose panel is a glass pane over a blurred overlay, with header, footer, title and description parts.
The glass engine behind every surface: the displacement-map generator that bends the backdrop at the rim, the SVG refraction filter, the tuning config for both variants, and the shared CVA variants.
Tracks the pointer and the surface's position in the viewport, then writes the specular lighting inputs straight to the node as CSS custom properties — spring-smoothed, and without costing a React render.
Detects how much of the glass material the browser can actually render and honors prefers-reduced-transparency, so surfaces degrade to blur or to a flat tint instead of breaking.
A text input on a clear glass surface that raises a highlight ring on focus and dims when disabled.
The glass primitive every other component is built on — a refracted rim, a tinted backdrop, and a specular highlight that follows the pointer. Ships regular and clear variants, and flattens automatically when nested.
A Radix sheet that slides in from any of the four sides as a floating, inset glass panel.
Base style for Pane. Installs the shared dependencies and the --pane-* design tokens — blur, saturation, tint, border, highlight and shadow — for light and dark.
A Radix switch whose thumb is a glass pane, moved by a spring rather than a CSS transition.
Radix tabs on a glass list, with a pane indicator that animates between triggers.
A Radix tooltip rendered as a small glass pane, with provider, trigger and content parts.
The cn helper — clsx merged through tailwind-merge. Every Pane component imports it.