Installation

Pane ships as a shadcn-compatible registry. Install components with the shadcn CLI, or copy the source straight from any component page — both put the same code in your project.

1. Register the Pane namespace

Components reference each other internally (a Button depends on <Pane>, which depends on the glass engine). So the CLI doesn't confuse those with the official shadcn/ui components of the same name, add Pane as a named registry — a one-time step per project — in components.json:

{
  "registries": {
    "@pane": "https://pane.theui.company/r/{name}.json"
  }
}

2. Install a component

npx shadcn@latest add @pane/button

Swap button for any component name on the components pages. The CLI resolves registryDependencies automatically — installing button also pulls in the Pane primitive, the glass engine, and injects the --pane-* CSS variables into your globals.css.

3. Or copy it by hand

Prefer to copy code directly? Open the "Code" tab on any component's preview and paste the file into your project. You'll also need the Pane primitive and the glass engine (lib/glass and the two hooks) that every component depends on.

npm install class-variance-authority clsx tailwind-merge radix-ui lucide-react motion

Requirements

React 19 and Tailwind CSS v4
A build that supports modern CSS — backdrop-filter and, for the full refraction pass, a Chromium-based browser at runtime