@pane

Base style for Pane. Installs the shared dependencies and the --pane-* design tokens — blur, saturation, tint, border, highlight and shadow — for light and dar…

The cn helper — clsx merged through tailwind-merge. Every Pane component imports it.

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…

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-…

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 i…

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 an…

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 compact glass badge in default and tinted variants, with asChild support for linking.

A text input on a clear glass surface that raises a highlight ring on focus and dims when disabled.

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.

A Radix dialog whose panel is a glass pane over a blurred overlay, with header, footer, title and description parts.

A Radix sheet that slides in from any of the four sides as a floating, inset glass panel.