---
name: "@pane"
slug: "pane"
description: "Liquid glass components for React."
category: "Forms"
tags: ["buttons", "cards", "dashboard", "forms", "glassmorphism", "hooks", "loaders", "media", "navigation", "overlays"]
framework: "react"
license: "MIT"
author: "denizisikzero"
website: "https://pane.theui.company"
github: "https://github.com/denizisikzero/pane"
registry: "https://pane.theui.company/r/registry.json"
pro: false
pro_url: null
github_stars: 0
component_count: 31
generated_at: "2026-10-27T06:34:08.542Z"
---

# @pane

Liquid glass components for React.

## Links

- Website: https://pane.theui.company
- GitHub: https://github.com/denizisikzero/pane
- Registry JSON: https://pane.theui.company/r/registry.json
- Directory page: https://sh4dcn.netlify.app/registry/pane
- This file: https://sh4dcn.netlify.app/md/pane.md

## Install

```sh
# add the whole registry (shadcn CLI)
npx shadcn@latest add https://pane.theui.company/r/registry.json
pnpm dlx shadcn@latest add https://pane.theui.company/r/registry.json
bunx shadcn@latest add https://pane.theui.company/r/registry.json
# clone the source repo
git clone https://github.com/denizisikzero/pane.git
# fetch the raw registry index
curl -s https://pane.theui.company/r/registry.json
```

## Components (31)

| name | type | description | install |
| --- | --- | --- | --- |
| pane-style | registry:style | Base style for Pane. Installs the shared dependencies and the --pane-* design tokens — blur, saturation, tint, border, highlight and shadow — for light and dar… | `npx shadcn@latest add https://pane.theui.company/r/pane-style.json` |
| utils | registry:lib | The cn helper — clsx merged through tailwind-merge. Every Pane component imports it. | `npx shadcn@latest add https://pane.theui.company/r/utils.json` |
| glass-core | registry:lib | 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… | `npx shadcn@latest add https://pane.theui.company/r/glass-core.json` |
| use-glass-pointer | registry:hook | 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-… | `npx shadcn@latest add https://pane.theui.company/r/use-glass-pointer.json` |
| use-glass-support | registry:hook | 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… | `npx shadcn@latest add https://pane.theui.company/r/use-glass-support.json` |
| pane | registry:ui | 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… | `npx shadcn@latest add https://pane.theui.company/r/pane.json` |
| button | registry:ui | 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… | `npx shadcn@latest add https://pane.theui.company/r/button.json` |
| card | registry:ui | A glass card with header, title, description, action, content and footer parts. | `npx shadcn@latest add https://pane.theui.company/r/card.json` |
| badge | registry:ui | A compact glass badge in default (plain glass), inverted, prominent (accent) and destructive variants, filled or tinted, with asChild support for linking. | `npx shadcn@latest add https://pane.theui.company/r/badge.json` |
| input | registry:ui | A text input on a glass surface that raises a highlight ring on focus and dims when disabled. | `npx shadcn@latest add https://pane.theui.company/r/input.json` |
| switch | registry:ui | A Radix switch whose thumb is a glass pane, moved by a spring rather than a CSS transition. | `npx shadcn@latest add https://pane.theui.company/r/switch.json` |
| tabs | registry:ui | Radix tabs on a glass list, with a pane indicator that animates between triggers. | `npx shadcn@latest add https://pane.theui.company/r/tabs.json` |
| tooltip | registry:ui | A Radix tooltip rendered as a small glass pane, with provider, trigger and content parts. | `npx shadcn@latest add https://pane.theui.company/r/tooltip.json` |
| dialog | registry:ui | A Radix dialog whose panel is a glass pane over a blurred overlay, with header, footer, title and description parts. | `npx shadcn@latest add https://pane.theui.company/r/dialog.json` |
| sheet | registry:ui | A Radix sheet that slides in from any of the four sides as a floating, inset glass panel. | `npx shadcn@latest add https://pane.theui.company/r/sheet.json` |
| popover | registry:ui | A Radix popover whose content is a blur glass pane, with trigger and anchor parts. | `npx shadcn@latest add https://pane.theui.company/r/popover.json` |
| dropdown-menu | registry:ui | A Radix dropdown menu on a glass pane — items, checkbox and radio items, labels, separators, shortcuts and submenus, highlighted with the nested tint. | `npx shadcn@latest add https://pane.theui.company/r/dropdown-menu.json` |
| select | registry:ui | A Radix select with a glass trigger and a blur glass list that scrolls inside the pane. | `npx shadcn@latest add https://pane.theui.company/r/select.json` |
| slider | registry:ui | A Radix slider on a glass track whose knob swells into bare glass while it is dragged. Supports ranges and vertical orientation. | `npx shadcn@latest add https://pane.theui.company/r/slider.json` |
| toggle-group | registry:ui | A single-choice control on a Radix toggle group, with a glass indicator that springs between segments and always keeps one selected. | `npx shadcn@latest add https://pane.theui.company/r/toggle-group.json` |
| checkbox | registry:ui | A Radix checkbox on a small glass circle that fills with the accent and shows a check when checked. | `npx shadcn@latest add https://pane.theui.company/r/checkbox.json` |
| radio-group | registry:ui | A Radix radio group whose items are glass circles that fill with the accent and show a knob when selected. | `npx shadcn@latest add https://pane.theui.company/r/radio-group.json` |
| textarea | registry:ui | A multi-line text field on a glass surface that grows with its content and raises a highlight ring on focus. | `npx shadcn@latest add https://pane.theui.company/r/textarea.json` |
| progress | registry:ui | A Radix progress bar: a glass track with an accent fill that eases to each new value. | `npx shadcn@latest add https://pane.theui.company/r/progress.json` |
| alert | registry:ui | 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. | `npx shadcn@latest add https://pane.theui.company/r/alert.json` |
| avatar | registry:ui | A Radix avatar in a glass circle, with a fallback, an accent status badge, and overlapping groups with a count. | `npx shadcn@latest add https://pane.theui.company/r/avatar.json` |
| accordion | registry:ui | A Radix accordion whose items share one glass surface, divided by hairlines, with animated open and close. | `npx shadcn@latest add https://pane.theui.company/r/accordion.json` |
| sonner | registry:ui | 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… | `npx shadcn@latest add https://pane.theui.company/r/sonner.json` |
| command | registry:ui | A cmdk command menu on a blur glass panel, with search, groups, shortcuts, and a dialog variant that sits on the Dialog glass. | `npx shadcn@latest add https://pane.theui.company/r/command.json` |
| navigation-menu | registry:ui | A Radix navigation menu with pill triggers and a blur glass viewport that resizes to each open panel. | `npx shadcn@latest add https://pane.theui.company/r/navigation-menu.json` |
| sidebar | registry:ui | 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… | `npx shadcn@latest add https://pane.theui.company/r/sidebar.json` |

## For AI agents

```text
You are adding components from @pane to a shadcn-compatible project.
1. Read this file (https://sh4dcn.netlify.app/md/pane.md) for the component list.
2. Fetch the machine-readable index: https://pane.theui.company/r/registry.json
3. Install a single component with its install command from the table above.
4. Full structured record: https://sh4dcn.netlify.app/json (library slug: pane).
```