# Glass panel (goodtabs UI)

A larger pane of glass with a header row and a body, for floating controls over imagery.

## Install

```bash
npx shadcn@latest add https://ui.goodtabs.co/r/glass-panel.json
```

Or, with the @goodtabs namespace configured in components.json: `npx shadcn@latest add @goodtabs/glass-panel`

## Usage

```tsx
import { GlassPanel, GlassPanelHeader, GlassPanelTitle, GlassPanelBody } from "@/components/ui/glass-panel"

<GlassPanel>
  <GlassPanelHeader><GlassPanelTitle>Preferences</GlassPanelTitle></GlassPanelHeader>
  <GlassPanelBody>…</GlassPanelBody>
</GlassPanel>
```

## Props

| Prop | Type | Default | Description |
| --- | --- | --- | --- |
| className | `string` |  | Merged onto the glass surface. Keep any rounded class equal to radius 16. |

## When to use

- A floating inspector or player over an image
- A short list of settings on a visual page

## When not to use

- Dense forms or tables, where legibility beats effect
- On a flat background

## Notes for agents

- Glass needs something behind it: it bends and frosts what sits under it, so on a flat background it reads as a grey box
- Radius is 16 on a rounded-2xl pane; the header has a hairline below it
- The panel clips its children, so a focus ring on an inner control must sit inside it

Docs: https://ui.goodtabs.co/components/glass-panel