# Glass dialog (goodtabs UI)

A dialog panel made of glass over a light scrim, with focus handled by radix.

## Install

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

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

## Usage

```tsx
import { GlassDialog, GlassDialogTrigger, GlassDialogContent, GlassDialogHeader, GlassDialogTitle, GlassDialogDescription } from "@/components/ui/glass-dialog"

<GlassDialog>
  <GlassDialogTrigger>Open</GlassDialogTrigger>
  <GlassDialogContent>
    <GlassDialogHeader>
      <GlassDialogTitle>Title</GlassDialogTitle>
      <GlassDialogDescription>One line.</GlassDialogDescription>
    </GlassDialogHeader>
  </GlassDialogContent>
</GlassDialog>
```

## Props

| Prop | Type | Default | Description |
| --- | --- | --- | --- |
| container | `HTMLElement | null` |  | Mount and position the dialog inside this element, which needs position relative and overflow hidden. Omit it to cover the window. |
| role | `"dialog" | "alertdialog"` | `"dialog"` | Use alertdialog for confirmations. |

## When to use

- Short confirmations and invites over image-heavy screens
- A lightweight modal that should keep the page visible behind it

## When not to use

- Forms with many fields or long text: glass over busy content costs legibility
- Over flat pages, where the plain dialog is calmer

## Notes for agents

- Radix owns focus: it moves in on open, is trapped while open and returns to the trigger. Always include a GlassDialogTitle
- The scrim is black at 30 percent so the glass has something to bend, and the panel is 70 percent background
- Under prefers-reduced-transparency the panel is solid popover. The container prop is for demos and embedded frames; the window is the normal case
- The panel fades in over 100ms and does not animate under reduced motion

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