@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 default, b…

A glass button in default (plain glass), inverted, ghost, prominent (accent) and destructive variants, filled or tinted, in shadcn/ui's sizes, with asChild sup…

A glass card with header, title, description, action, content and footer parts.

A compact glass badge in default (plain glass), inverted, prominent (accent) and destructive variants, filled or tinted, with asChild support for linking.

A text input on a 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.

A Radix popover whose content is a blur glass pane, with trigger and anchor parts.

A Radix dropdown menu on a glass pane — items, checkbox and radio items, labels, separators, shortcuts and submenus, highlighted with the nested tint.

A Radix select with a glass trigger and a blur glass list that scrolls inside the pane.

A Radix slider on a glass track whose knob swells into bare glass while it is dragged. Supports ranges and vertical orientation.

A single-choice control on a Radix toggle group, with a glass indicator that springs between segments and always keeps one selected.

A Radix checkbox on a small glass circle that fills with the accent and shows a check when checked.

A Radix radio group whose items are glass circles that fill with the accent and show a knob when selected.

A multi-line text field on a glass surface that grows with its content and raises a highlight ring on focus.

A Radix progress bar: a glass track with an accent fill that eases to each new value.

A callout on a blur glass panel with an optional icon, title and description, in default and destructive variants; a tinted destructive washes the glass in red.

A Radix avatar in a glass circle, with a fallback, an accent status badge, and overlapping groups with a count.

A Radix accordion whose items share one glass surface, divided by hairlines, with animated open and close.

A Sonner toaster whose toasts use the dense glass overlay material, at the top center by default, with icons for each status and the theme taken from next-them…

A cmdk command menu on a blur glass panel, with search, groups, shortcuts, and a dialog variant that sits on the Dialog glass.

A Radix navigation menu with pill triggers and a blur glass viewport that resizes to each open panel.

shadcn/ui's Sidebar API on glass: a collapsible glass panel with groups, menus, badges and sub-menus, a sliding glass pill on the active item, and a sheet on m…