---
name: "@pane"
slug: "pane"
description: "Liquid glass components for React."
category: "Forms"
tags: ["buttons", "cards", "forms", "glassmorphism", "hooks", "navigation", "overlays"]
framework: "react"
license: null
author: null
website: "https://pane.theui.company"
github: null
registry: "https://pane.theui.company/r/registry.json"
pro: false
pro_url: null
github_stars: null
component_count: 15
generated_at: "2026-09-21T01:50:16.753Z"
---

# @pane

Liquid glass components for React.

## Links

- Website: https://pane.theui.company
- Registry JSON: https://pane.theui.company/r/registry.json
- Directory page: https://sh4dcn.vercel.app/registry/pane
- This file: https://sh4dcn.vercel.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
# fetch the raw registry index
curl -s https://pane.theui.company/r/registry.json
```

## Components (15)

| 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 regular an… | `npx shadcn@latest add https://pane.theui.company/r/pane.json` |
| button | registry:ui | A glass button in default and destructive variants across four sizes, with asChild support via Radix Slot. | `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 and tinted variants, with asChild support for linking. | `npx shadcn@latest add https://pane.theui.company/r/badge.json` |
| input | registry:ui | A text input on a clear 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` |

## For AI agents

```text
You are adding components from @pane to a shadcn-compatible project.
1. Read this file (https://sh4dcn.vercel.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.vercel.app/json (library slug: pane).
```