---
title: Dialog
description: A task done in a panel over the page, with its buttons in the band beneath it.
---

<ComponentPreview name="dialog/overview" height={180}>

```tsx lineNumbers
'use client';

import { Button } from '@/components/panelui/button';
import { Dialog } from '@/components/panelui/dialog';
import { Input } from '@/components/panelui/input';
import { Label } from '@/components/panelui/label';
import { useState } from 'react';

export default function DialogOverview() {
  const [open, setOpen] = useState(false);
  const [name, setName] = useState('Spring launch');

  return (
    <Dialog open={open} onOpenChange={setOpen}>
      <Dialog.Trigger render={<Button variant="outline" />}>Rename board</Dialog.Trigger>
      <Dialog.Content size="sm">
        <Dialog.Header title="Rename board" description="Everyone on the board will see it." />
        <Dialog.Body>
          <form
            id="rename-board"
            className="flex flex-col gap-2"
            onSubmit={(event) => {
              event.preventDefault();
              const next = new FormData(event.currentTarget).get('name');
              if (typeof next === 'string' && next.trim()) setName(next.trim());
              setOpen(false);
            }}
          >
            <Label htmlFor="board-name">
              <Label.Text>Name</Label.Text>
            </Label>
            <Input id="board-name" name="name" defaultValue={name} autoComplete="off" />
          </form>
        </Dialog.Body>
        <Dialog.Footer>
          <Dialog.Close render={<Button variant="secondary" />}>Cancel</Dialog.Close>
          <Button type="submit" form="rename-board">
            Save
          </Button>
        </Dialog.Footer>
      </Dialog.Content>
    </Dialog>
  );
}
```

</ComponentPreview>

Use it for a short task that is done away from the page and then put away: renaming something, inviting people, filling in a few fields.

The task sits in a panel, and `Dialog.Footer` moves out of the panel into the darker band underneath, where its buttons are equal pills. `variant="plain"` is a single surface with the footer ruled off at its foot, for a dense form. A press outside, Escape or the close button in the corner dismiss it.

The dialog is never taller than the screen: the header and footer stay put and `Dialog.Body` scrolls between them. On a screen under 640px wide it rests at the bottom, where a thumb reaches its buttons.

For a yes-or-no question, use [Alert Dialog](/docs/web/components/alert-dialog). For a longer task that keeps the page in view, use [Sheet](/docs/web/components/sheet).

## Installation

<Tabs items={['CLI', 'npm', 'Manual']}>

<Tab value="CLI">

<InstallTabs kind="dlx" packages="shadcn@latest add https://panelui.dev/r/web/dialog.json" />

The source is copied into `components/panelui/`, where you can edit it.

</Tab>

<Tab value="npm">

<InstallTabs kind="add" packages="panelui-web" />

Import from `panelui-web/dialog` instead of `@/components/panelui/dialog`. Tailwind needs one line to read the package's classes, which is on the [installation page](/docs/web/installation#from-npm).

</Tab>

<Tab value="Manual">

<Steps>

<Step>

Install the packages it uses:

<InstallTabs kind="add" packages="@base-ui/react tailwind-variants" />

</Step>

<Step>

Copy the source into `components/panelui/dialog.tsx`:

<RegistrySource name="dialog" />

</Step>

</Steps>

</Tab>

</Tabs>

## Usage

```tsx
import { Dialog } from "@/components/panelui/dialog"
```

```tsx
<Dialog>
  <Dialog.Trigger render={<Button />}>Rename board</Dialog.Trigger>
  <Dialog.Content size="sm">
    <Dialog.Header title="Rename board" description="Everyone on the board sees the new name." />
    <Dialog.Body>
      <Input defaultValue="Spring launch" aria-label="Name" />
    </Dialog.Body>
    <Dialog.Footer>
      <Dialog.Close render={<Button variant="secondary" />}>Cancel</Dialog.Close>
      <Button>Save</Button>
    </Dialog.Footer>
  </Dialog.Content>
</Dialog>
```

## Composition

```tsx
<Dialog>
  <Dialog.Trigger />
  <Dialog.Content>
    <Dialog.Header>
      <Dialog.Title />
      <Dialog.Description />
    </Dialog.Header>
    <Dialog.Body>
      <Dialog.List>
        <Dialog.ListGroup>
          <Dialog.ListItem />
        </Dialog.ListGroup>
      </Dialog.List>
    </Dialog.Body>
    <Dialog.Footer>
      <Dialog.Close />
    </Dialog.Footer>
  </Dialog.Content>
</Dialog>
```

- **`Dialog.Trigger`** — What opens the dialog. Pass your own button as `render`.
- **`Dialog.Content`** — The dialog, over a dimmed page. `variant` is `inset` (a panel in a band) or `plain` (one surface), `size` is `sm`, `md` or `lg`, `showClose` draws the round close button, and `blur` frosts the page behind it.
- **`Dialog.Header`** — The title and the line under it, given as `title` and `description` or as parts. It leaves room for the close button. Anything else in it, such as a search field, stays put while the body scrolls.
- **`Dialog.Title`** — The dialog's name. It is announced when the dialog opens.
- **`Dialog.Description`** — A sentence under the title, read out after it.
- **`Dialog.Body`** — The part that scrolls, with a thin drawn thumb. Its children are laid out in a column with a gap, so the fields of a form need no wrapper. A hairline appears under the header once its content has scrolled.
- **`Dialog.List`** — A list of one-line choices, such as time zones or the projects to move something to. The arrow keys, Home and End move between its items, and it opens scrolled to the selected one.
- **`Dialog.ListGroup`** — A run of items under a `label`, which stays pinned at the top while its items scroll under it.
- **`Dialog.ListItem`** — One choice. `selected` tints and checks it, `onSelect` is called when it is pressed or chosen with Enter, and `meta` puts quieter text at its end in figures that line up.
- **`Dialog.Footer`** — The buttons. In the inset look they sit in the band as equal pills; in `plain` they sit at the end of a ruled strip. Keep it a direct child of `Dialog.Content`.
- **`Dialog.Close`** — Closes the dialog. Pass your own button as `render`, such as Cancel.

## Examples

### Inviting people

A field, a role [Select](/docs/web/components/select) and an Add button in one row, over the list of people invited so far. Pressing Enter in the field adds the address.

<ComponentPreview name="dialog/invite" height={180}>

```tsx lineNumbers
'use client';

import { Avatar } from '@/components/panelui/avatar';
import { Button } from '@/components/panelui/button';
import { Dialog } from '@/components/panelui/dialog';
import { Frame } from '@/components/panelui/frame';
import { Input } from '@/components/panelui/input';
import { Select } from '@/components/panelui/select';
import { useState } from 'react';

const ROLES = [
  { value: 'editor', label: 'Editor' },
  { value: 'viewer', label: 'Viewer' },
];

type Invite = { email: string; role: string };

export default function DialogInvite() {
  const [invites, setInvites] = useState<Invite[]>([
    { email: 'ines@quarry.dev', role: 'editor' },
    { email: 'tomas@quarry.dev', role: 'viewer' },
  ]);
  const [email, setEmail] = useState('');
  const [role, setRole] = useState('editor');

  const add = () => {
    const next = email.trim();
    if (!next.includes('@') || invites.some((invite) => invite.email === next)) return;
    setInvites([...invites, { email: next, role }]);
    setEmail('');
  };

  return (
    <Dialog>
      <Dialog.Trigger render={<Button />}>Invite people</Dialog.Trigger>
      <Dialog.Content>
        <Dialog.Header title="Invite to Quarry" description="They get an email with a link to join." />
        <Dialog.Body>
          <form
            className="flex gap-2"
            onSubmit={(event) => {
              event.preventDefault();
              add();
            }}
          >
            <Input
              type="email"
              placeholder="name@company.com"
              aria-label="Email address"
              value={email}
              onChange={(event) => setEmail(event.target.value)}
              className="min-w-0 flex-1"
            />
            <Select items={ROLES} value={role} onValueChange={(value) => setRole(value as string)}>
              <Select.Trigger aria-label="Role" className="w-28">
                <Select.Value />
              </Select.Trigger>
              <Select.Content>
                {ROLES.map((item) => (
                  <Select.Item key={item.value} value={item.value}>
                    {item.label}
                  </Select.Item>
                ))}
              </Select.Content>
            </Select>
            <Button type="submit" variant="outline">
              Add
            </Button>
          </form>
          <Frame variant="plain">
            <Frame.Panel>
              {invites.map((invite) => (
                <Frame.Row key={invite.email}>
                  <Frame.Media>
                    <Avatar name={invite.email} size="sm" />
                  </Frame.Media>
                  <Frame.Content>
                    <Frame.Title as="p">{invite.email}</Frame.Title>
                  </Frame.Content>
                  <Frame.Actions>
                    <Frame.Description>{invite.role === 'editor' ? 'Editor' : 'Viewer'}</Frame.Description>
                  </Frame.Actions>
                </Frame.Row>
              ))}
            </Frame.Panel>
          </Frame>
        </Dialog.Body>
        <Dialog.Footer>
          <Dialog.Close render={<Button variant="secondary" />}>Cancel</Dialog.Close>
          <Dialog.Close render={<Button />}>
            Send {invites.length} {invites.length === 1 ? 'invite' : 'invites'}
          </Dialog.Close>
        </Dialog.Footer>
      </Dialog.Content>
    </Dialog>
  );
}
```

</ComponentPreview>

### A form

A name, an address with a fixed prefix in an `Input.Group`, a [Textarea](/docs/web/components/textarea) and a [Select](/docs/web/components/select). The form lives in the body and the submit button in the footer, joined by the form's `id`. An empty name marks its [Label](/docs/web/components/label) invalid; Create shows a spinner while it saves. `dismissible={false}` keeps a stray press outside from throwing the form away.

<ComponentPreview name="dialog/form" height={180}>

```tsx lineNumbers
'use client';

import { Button } from '@/components/panelui/button';
import { Dialog } from '@/components/panelui/dialog';
import { Input } from '@/components/panelui/input';
import { Label } from '@/components/panelui/label';
import { Select } from '@/components/panelui/select';
import { Textarea } from '@/components/panelui/textarea';
import { useState } from 'react';

const VISIBILITY = [
  { value: 'team', label: 'Everyone in the team' },
  { value: 'private', label: 'Only people I invite' },
];

export default function DialogForm() {
  const [open, setOpen] = useState(false);
  const [saving, setSaving] = useState(false);
  const [missing, setMissing] = useState(false);

  return (
    <Dialog
      open={open}
      onOpenChange={(next) => {
        setOpen(next);
        if (!next) setMissing(false);
      }}
      dismissible={false}
    >
      <Dialog.Trigger render={<Button />}>New project</Dialog.Trigger>
      <Dialog.Content>
        <Dialog.Header title="New project" description="You can change all of this later in its settings." />
        <Dialog.Body>
          <form
            id="new-project"
            className="flex flex-col gap-4"
            onSubmit={(event) => {
              event.preventDefault();
              const name = String(new FormData(event.currentTarget).get('name') ?? '').trim();
              setMissing(name === '');
              if (name === '') return;
              setSaving(true);
              window.setTimeout(() => {
                setSaving(false);
                setOpen(false);
              }, 1100);
            }}
          >
            <div className="flex flex-col gap-2">
              <Label htmlFor="project-name" required invalid={missing}>
                <Label.Text>Name</Label.Text>
                {missing ? <Label.Hint>Give it a name</Label.Hint> : null}
              </Label>
              <Input id="project-name" name="name" placeholder="Harbour redesign" aria-invalid={missing || undefined} />
            </div>
            <div className="flex flex-col gap-2">
              <Label htmlFor="project-address">
                <Label.Text>Address</Label.Text>
              </Label>
              <Input.Group>
                <Input.Addon className="border-e pe-3">quarry.app/</Input.Addon>
                <Input id="project-address" placeholder="harbour" />
              </Input.Group>
            </div>
            <div className="flex flex-col gap-2">
              <Label htmlFor="project-about" optional>
                <Label.Text>What it is for</Label.Text>
              </Label>
              <Textarea id="project-about" minRows={2} maxRows={5} placeholder="A line or two for the people you invite" />
            </div>
            <div className="flex flex-col gap-2">
              <Label>
                <Label.Text>Who can see it</Label.Text>
              </Label>
              <Select items={VISIBILITY} defaultValue="team">
                <Select.Trigger aria-label="Who can see it">
                  <Select.Value />
                </Select.Trigger>
                <Select.Content>
                  {VISIBILITY.map((item) => (
                    <Select.Item key={item.value} value={item.value}>
                      {item.label}
                    </Select.Item>
                  ))}
                </Select.Content>
              </Select>
            </div>
          </form>
        </Dialog.Body>
        <Dialog.Footer>
          <Dialog.Close render={<Button variant="secondary" />} disabled={saving}>
            Cancel
          </Dialog.Close>
          <Button type="submit" form="new-project" loading={saving}>
            Create project
          </Button>
        </Dialog.Footer>
      </Dialog.Content>
    </Dialog>
  );
}
```

</ComponentPreview>

### Choosing from a long list

`Dialog.List` holds the cities in `Dialog.ListGroup`s by region, whose headings stay pinned as the list scrolls, and each `Dialog.ListItem` shows the time there now and its offset as `meta`. The search field in the header stays put. Down moves from the field into the list, Enter in the field takes the first city found, and choosing one closes the dialog, so it draws no close button: `showClose={false}`.

<ComponentPreview name="dialog/scroll" height={180}>

```tsx lineNumbers
'use client';

import { SearchIcon } from 'lucide-react';
import { Button } from '@/components/panelui/button';
import { Dialog } from '@/components/panelui/dialog';
import { Input } from '@/components/panelui/input';
import { useEffect, useState, type KeyboardEvent } from 'react';

const REGIONS: { name: string; zones: [string, string][] }[] = [
  {
    name: 'Americas',
    zones: [
      ['America/Anchorage', 'Anchorage'],
      ['America/Los_Angeles', 'Los Angeles'],
      ['America/Denver', 'Denver'],
      ['America/Mexico_City', 'Mexico City'],
      ['America/Chicago', 'Chicago'],
      ['America/Bogota', 'Bogotá'],
      ['America/New_York', 'New York'],
      ['America/Toronto', 'Toronto'],
      ['America/Halifax', 'Halifax'],
      ['America/Sao_Paulo', 'São Paulo'],
      ['America/Argentina/Buenos_Aires', 'Buenos Aires'],
    ],
  },
  {
    name: 'Europe',
    zones: [
      ['Europe/Lisbon', 'Lisbon'],
      ['Europe/London', 'London'],
      ['Europe/Madrid', 'Madrid'],
      ['Europe/Paris', 'Paris'],
      ['Europe/Berlin', 'Berlin'],
      ['Europe/Stockholm', 'Stockholm'],
      ['Europe/Athens', 'Athens'],
      ['Europe/Istanbul', 'Istanbul'],
      ['Europe/Moscow', 'Moscow'],
    ],
  },
  {
    name: 'Africa',
    zones: [
      ['Africa/Lagos', 'Lagos'],
      ['Africa/Cairo', 'Cairo'],
      ['Africa/Johannesburg', 'Johannesburg'],
      ['Africa/Nairobi', 'Nairobi'],
    ],
  },
  {
    name: 'Asia',
    zones: [
      ['Asia/Riyadh', 'Riyadh'],
      ['Asia/Dubai', 'Dubai'],
      ['Asia/Karachi', 'Karachi'],
      ['Asia/Kolkata', 'Kolkata'],
      ['Asia/Dhaka', 'Dhaka'],
      ['Asia/Bangkok', 'Bangkok'],
      ['Asia/Singapore', 'Singapore'],
      ['Asia/Shanghai', 'Shanghai'],
      ['Asia/Seoul', 'Seoul'],
      ['Asia/Tokyo', 'Tokyo'],
    ],
  },
  {
    name: 'Oceania',
    zones: [
      ['Pacific/Honolulu', 'Honolulu'],
      ['Australia/Perth', 'Perth'],
      ['Australia/Sydney', 'Sydney'],
      ['Pacific/Auckland', 'Auckland'],
    ],
  },
];

const CITY = Object.fromEntries(REGIONS.flatMap((region) => region.zones));

/** The time there now, and its offset from UTC, as the browser knows them today. */
function clock(zone: string, now: Date) {
  const time = new Intl.DateTimeFormat('en-GB', { timeZone: zone, hour: '2-digit', minute: '2-digit' }).format(now);
  const name = new Intl.DateTimeFormat('en-US', { timeZone: zone, timeZoneName: 'shortOffset' })
    .formatToParts(now)
    .find((part) => part.type === 'timeZoneName')?.value;
  const offset = (name ?? 'GMT').replace('GMT', 'UTC').replace('-', '−');
  return `${time} · ${offset}`;
}

export default function DialogScroll() {
  const [open, setOpen] = useState(false);
  const [zone, setZone] = useState('Europe/Istanbul');
  const [query, setQuery] = useState('');
  const [now, setNow] = useState(() => new Date());

  // The times move on while the list is open.
  useEffect(() => {
    if (!open) return;
    setNow(new Date());
    const timer = window.setInterval(() => setNow(new Date()), 15000);
    return () => window.clearInterval(timer);
  }, [open]);

  const needle = query.trim().toLowerCase();
  const regions = REGIONS.map((region) => ({
    ...region,
    zones: region.zones.filter(([, city]) => city.toLowerCase().includes(needle)),
  })).filter((region) => region.zones.length > 0);

  const choose = (next: string) => {
    setZone(next);
    setOpen(false);
  };

  // Down from the field goes into the list; Enter takes the first city found.
  const fromSearch = (event: KeyboardEvent<HTMLInputElement>) => {
    if (event.key === 'ArrowDown') {
      event.preventDefault();
      document.querySelector<HTMLElement>('[data-slot=dialog-list-item]')?.focus();
    }
    if (event.key === 'Enter' && regions[0]) choose(regions[0].zones[0][0]);
  };

  return (
    <Dialog
      open={open}
      onOpenChange={(next) => {
        setOpen(next);
        if (!next) setQuery('');
      }}
    >
      <Dialog.Trigger render={<Button variant="outline" />}>Time zone: {CITY[zone]}</Dialog.Trigger>
      <Dialog.Content size="sm" showClose={false} className="h-[32rem]">
        <Dialog.Header title="Time zone" description="Meetings are shown in it.">
          <Input.Group className="mt-3">
            <Input.Addon>
              <SearchIcon />
            </Input.Addon>
            <Input
              type="search"
              placeholder="Search cities"
              aria-label="Search cities"
              value={query}
              onChange={(event) => setQuery(event.target.value)}
              onKeyDown={fromSearch}
            />
          </Input.Group>
        </Dialog.Header>
        <Dialog.Body>
          {regions.length > 0 ? (
            <Dialog.List aria-label="Time zones">
              {regions.map((region) => (
                <Dialog.ListGroup key={region.name} label={region.name}>
                  {region.zones.map(([id, city]) => (
                    <Dialog.ListItem key={id} selected={id === zone} meta={clock(id, now)} onSelect={() => choose(id)}>
                      {city}
                    </Dialog.ListItem>
                  ))}
                </Dialog.ListGroup>
              ))}
            </Dialog.List>
          ) : (
            <p className="py-10 text-center text-sm text-muted-foreground">No city matches “{query.trim()}”.</p>
          )}
        </Dialog.Body>
      </Dialog.Content>
    </Dialog>
  );
}
```

</ComponentPreview>

### Plain

`variant="plain"` is one surface, with the footer at its foot behind a rule and its buttons at the end in their usual sizes. `size="lg"` gives a two-column form the width it needs.

<ComponentPreview name="dialog/plain" height={180}>

```tsx lineNumbers
'use client';

import { Button } from '@/components/panelui/button';
import { Dialog } from '@/components/panelui/dialog';
import { Input } from '@/components/panelui/input';
import { Label } from '@/components/panelui/label';
import { Select } from '@/components/panelui/select';

const COUNTRIES = [
  { value: 'pt', label: 'Portugal' },
  { value: 'es', label: 'Spain' },
  { value: 'tr', label: 'Türkiye' },
  { value: 'gb', label: 'United Kingdom' },
];

export default function DialogPlain() {
  return (
    <Dialog>
      <Dialog.Trigger render={<Button variant="outline" />}>Edit shipping address</Dialog.Trigger>
      <Dialog.Content variant="plain" size="lg">
        <Dialog.Header title="Shipping address" description="Orders placed from now on are sent here." />
        <Dialog.Body className="grid grid-cols-1 gap-4 sm:grid-cols-2">
          <div className="flex flex-col gap-2 sm:col-span-2">
            <Label htmlFor="ship-name">
              <Label.Text>Full name</Label.Text>
            </Label>
            <Input id="ship-name" defaultValue="Mira Castell" autoComplete="name" />
          </div>
          <div className="flex flex-col gap-2 sm:col-span-2">
            <Label htmlFor="ship-street">
              <Label.Text>Street and number</Label.Text>
            </Label>
            <Input id="ship-street" defaultValue="Rua das Flores 48" autoComplete="address-line1" />
          </div>
          <div className="flex flex-col gap-2">
            <Label htmlFor="ship-city">
              <Label.Text>City</Label.Text>
            </Label>
            <Input id="ship-city" defaultValue="Porto" autoComplete="address-level2" />
          </div>
          <div className="flex flex-col gap-2">
            <Label htmlFor="ship-code">
              <Label.Text>Postcode</Label.Text>
            </Label>
            <Input id="ship-code" defaultValue="4050-262" autoComplete="postal-code" />
          </div>
          <div className="flex flex-col gap-2 sm:col-span-2">
            <Label>
              <Label.Text>Country</Label.Text>
            </Label>
            <Select items={COUNTRIES} defaultValue="pt">
              <Select.Trigger aria-label="Country">
                <Select.Value />
              </Select.Trigger>
              <Select.Content>
                {COUNTRIES.map((item) => (
                  <Select.Item key={item.value} value={item.value}>
                    {item.label}
                  </Select.Item>
                ))}
              </Select.Content>
            </Select>
          </div>
        </Dialog.Body>
        <Dialog.Footer>
          <Dialog.Close render={<Button variant="ghost" />}>Cancel</Dialog.Close>
          <Dialog.Close render={<Button />}>Save address</Dialog.Close>
        </Dialog.Footer>
      </Dialog.Content>
    </Dialog>
  );
}
```

</ComponentPreview>

### A dialog from a dialog

A `Dialog` inside another's content opens over it. The one behind steps back, a little smaller and veiled, and the page is not darkened a second time. Closing the front one returns to the first.

<ComponentPreview name="dialog/nested" height={180}>

```tsx lineNumbers
'use client';

import { Button } from '@/components/panelui/button';
import { Dialog } from '@/components/panelui/dialog';
import { Input } from '@/components/panelui/input';
import { Label } from '@/components/panelui/label';
import { useState } from 'react';

export default function DialogNested() {
  const [email, setEmail] = useState('mira@castell.studio');
  const [changeOpen, setChangeOpen] = useState(false);

  return (
    <Dialog>
      <Dialog.Trigger render={<Button variant="outline" />}>Edit profile</Dialog.Trigger>
      <Dialog.Content>
        <Dialog.Header title="Profile" description="How you appear to the people you work with." />
        <Dialog.Body>
          <div className="flex flex-col gap-2">
            <Label htmlFor="profile-name">
              <Label.Text>Name</Label.Text>
            </Label>
            <Input id="profile-name" defaultValue="Mira Castell" />
          </div>
          <div className="flex flex-col gap-2">
            <Label htmlFor="profile-email">
              <Label.Text>Email</Label.Text>
              <Label.Action>
                <Dialog open={changeOpen} onOpenChange={setChangeOpen}>
                  <Dialog.Trigger render={<Button variant="ghost" size="sm" className="-my-1 h-6 px-1.5 text-xs" />}>
                    Change
                  </Dialog.Trigger>
                  <Dialog.Content size="sm">
                    <Dialog.Header title="Change email" description="We send a code to check the new address." />
                    <Dialog.Body>
                      <form
                        id="change-email"
                        className="flex flex-col gap-4"
                        onSubmit={(event) => {
                          event.preventDefault();
                          const next = String(new FormData(event.currentTarget).get('email') ?? '').trim();
                          if (next.includes('@')) setEmail(next);
                          setChangeOpen(false);
                        }}
                      >
                        <div className="flex flex-col gap-2">
                          <Label htmlFor="new-email">
                            <Label.Text>New email</Label.Text>
                          </Label>
                          <Input id="new-email" name="email" type="email" placeholder="you@example.com" />
                        </div>
                        <div className="flex flex-col gap-2">
                          <Label htmlFor="email-password">
                            <Label.Text>Your password</Label.Text>
                          </Label>
                          <Input id="email-password" type="password" autoComplete="current-password" />
                        </div>
                      </form>
                    </Dialog.Body>
                    <Dialog.Footer>
                      <Dialog.Close render={<Button variant="secondary" />}>Back</Dialog.Close>
                      <Button type="submit" form="change-email">
                        Send code
                      </Button>
                    </Dialog.Footer>
                  </Dialog.Content>
                </Dialog>
              </Label.Action>
            </Label>
            <Input id="profile-email" value={email} readOnly />
          </div>
        </Dialog.Body>
        <Dialog.Footer>
          <Dialog.Close render={<Button variant="secondary" />}>Cancel</Dialog.Close>
          <Dialog.Close render={<Button />}>Save profile</Dialog.Close>
        </Dialog.Footer>
      </Dialog.Content>
    </Dialog>
  );
}
```

</ComponentPreview>

## API Reference

### Dialog

| Prop | Type | Default | Description |
| --- | --- | --- | --- |
| `open` | `boolean` | — | Whether it is open, when the caller holds that. |
| `defaultOpen` | `boolean` | — | Whether it starts open, when the caller does not hold it. |
| `onOpenChange` | `(open: boolean) => void` | — | Called when it opens or closes. |
| `onOpenChangeComplete` | `(open: boolean) => void` | — | Called once it has finished opening or closing, after its transition has ended. `false` means the exit is over, so a dialog mounted from state can be unmounted. |
| `dismissible` | `boolean` | `true` | Whether a press outside it closes it. Turn it off while a form in it has changes that would be lost; Escape and the close button still work. Default `true`. |

### Dialog.Trigger

| Prop | Type | Default | Description |
| --- | --- | --- | --- |
| `render` | `ReactElement` | — | Your own element to be the trigger, such as a styled button. It is given the click handler and the attributes that tie it to the dialog. |

### Dialog.Content

| Prop | Type | Default | Description |
| --- | --- | --- | --- |
| `variant` | `'inset' \| 'plain'` | `'inset'` | `inset` sets the task in a panel inside a darker band that holds the footer. `plain` is one surface with the footer ruled off. Default `inset`. |
| `size` | `'sm' \| 'md' \| 'lg'` | `'md'` | How wide it may grow: `sm` 24rem, `md` 28rem, `lg` 36rem. Default `md`. |
| `showClose` | `boolean` | `true` | Show the round close button in the top trailing corner. Default `true`. |
| `blur` | `boolean` | `false` | Frost the page behind it instead of only dimming it. |
| `inline` | `boolean` | `false` | Draw it in the page instead of over it: no backdrop, no trigger, always there. For previews; `open` is ignored. |

### Dialog.Header

| Prop | Type | Default | Description |
| --- | --- | --- | --- |
| `title` | `ReactNode` | — | The heading. It is also what the dialog is announced as. |
| `description` | `ReactNode` | — | A line under the heading. |

### Dialog.Footer

| Prop | Type | Default | Description |
| --- | --- | --- | --- |
| `defaultTagName` | `'div',` | — |  |
| `props` | `mergeProps(` | — |  |

### Dialog.Close

| Prop | Type | Default | Description |
| --- | --- | --- | --- |
| `render` | `ReactElement` | — | Your own element to close the dialog with, such as a Cancel button. |
| `icon` | `boolean` | — | Draw the cross glyph. Set for you on the built-in close button. |

### Dialog.List

| Prop | Type | Default | Description |
| --- | --- | --- | --- |
| `defaultTagName` | `'div',` | — |  |
| `props` | `mergeProps(` | — |  |
| `ref` | `list,` | — |  |
| `role` | `'listbox',` | — |  |
| `className` | `dialogVariants().list({ className }),` | — |  |
| `onKeyDown` | `move,` | — |  |

### Dialog.ListGroup

| Prop | Type | Default | Description |
| --- | --- | --- | --- |
| `label` | `ReactNode` | — | The heading over the group, which stays pinned while its items scroll under it. |

### Dialog.ListItem

| Prop | Type | Default | Description |
| --- | --- | --- | --- |
| `selected` | `boolean` | `false` | Whether it is the chosen one: it is tinted and checked. |
| `onSelect` | `() => void` | — | Called when it is pressed, or chosen with Enter or Space. |
| `meta` | `ReactNode` | — | Quieter text at its end, in figures that line up: a time, a count. |
| `disabled` | `boolean` | `false` | Shown, but cannot be chosen. |

Every part also takes the props of the element it renders, and a `className`.

## Notes

### Closing

A press outside, Escape and the close button close it, and so does any `Dialog.Close`. `dismissible={false}` stops a press outside from closing it, for a form whose changes would be lost; Escape still works. Hold `open` yourself with `onOpenChange` to close it from code, for example once a form has saved.

### Focus

When it opens, focus goes to the first field in it. The close button is drawn in the corner but comes last in the order, so the way out is not the first thing focused. Focus returns to the trigger when it closes.

### Forms

Put the `<form>` in `Dialog.Body` with an `id`, and give the submit button in the footer `type="submit"` and `form` set to that `id`. Enter in a field then submits it, and the footer can stay a direct child of the content.

### On a phone

Under 640px wide the dialog sits at the bottom of the screen, 8px clear of the edges, and can be as tall as the screen less that gap.

### Server Components

`Dialog` is a client component. In a file that starts with `"use client"`, write its parts with a dot, as on this page. A Server Component cannot read `Dialog.Trigger` off the import, so each part is also exported by name: `DialogTrigger` is `Dialog.Trigger`, and so on for the others.

```tsx
import { Dialog, DialogTrigger, DialogContent, DialogHeader, DialogTitle, DialogDescription, DialogBody, DialogFooter, DialogClose, DialogList, DialogListGroup, DialogListItem } from "@/components/panelui/dialog"
```