# Dialog

A sharp, minimalist modal window built on Radix UI, conforming to Monolith standards.

> For the complete documentation index, see [llms.txt](/llms.txt). Markdown variants are available by appending `.md` to any URL or sending an `Accept: text/markdown` header. An agent skill is available at [/.well-known/agent-skills/site-skill.md](/.well-known/agent-skills/site-skill.md).





A window overlaid on either the primary window or another dialog window, rendering the content underneath inert.

<ComponentPreview name="dialog-demo">
  <div className="flex items-center justify-center py-8">
    <Dialog>
      <DialogTrigger>
        <Button variant="outline">
          Edit Profile
        </Button>
      </DialogTrigger>

      <DialogContent className="sm:max-w-[425px]">
        <DialogHeader>
          <DialogTitle>
            Edit profile
          </DialogTitle>

          <DialogDescription>
            {"Make changes to your profile here. Click save when you're done."}
          </DialogDescription>
        </DialogHeader>

        <div className="grid gap-4 py-4">
          <div className="grid grid-cols-4 items-center gap-4">
            <Label htmlFor="name" className="text-right">
              Name
            </Label>

            <div className="col-span-3">
              <Input id="name" defaultValue="Pedro Duarte" />
            </div>
          </div>

          <div className="grid grid-cols-4 items-center gap-4">
            <Label htmlFor="username" className="text-right">
              Username
            </Label>

            <div className="col-span-3">
              <Input id="username" defaultValue="@peduarte" />
            </div>
          </div>
        </div>

        <DialogFooter>
          <Button type="submit">
            Save changes
          </Button>
        </DialogFooter>
      </DialogContent>
    </Dialog>
  </div>
</ComponentPreview>

## Installation [#installation]

```bash
npx shadcn@latest add "https://ui.manpuc.me/r/dialog.json"
```

## Usage [#usage]

After adding the component with the CLI, import the required parts:

```tsx
import { Button } from "@/components/ui/button"
import {
  Dialog,
  DialogContent,
  DialogDescription,
  DialogHeader,
  DialogTitle,
  DialogTrigger,
} from "@/components/ui/dialog"
```

```tsx
<Dialog>
  <DialogTrigger asChild>
    <Button variant="outline">Open</Button>
  </DialogTrigger>
  <DialogContent>
    <DialogHeader>
      <DialogTitle>Are you absolutely sure?</DialogTitle>
      <DialogDescription>
        {"This action cannot be undone. This will permanently delete your account and remove your data from our servers."}
      </DialogDescription>
    </DialogHeader>
  </DialogContent>
</Dialog>
```

## Examples [#examples]

### Custom Close Button [#custom-close-button]

You can use `DialogClose` to build a custom close button instead of relying solely on the top-right default button.

<ComponentPreview name="dialog-custom-close">
  <div className="flex items-center justify-center py-8">
    <Dialog>
      <DialogTrigger>
        <Button variant="outline">
          Share link
        </Button>
      </DialogTrigger>

      <DialogContent className="sm:max-w-md">
        <DialogHeader>
          <DialogTitle>
            Share link
          </DialogTitle>

          <DialogDescription>
            {"Anyone who has this link will be able to view this."}
          </DialogDescription>
        </DialogHeader>

        <div className="flex items-center space-x-2">
          <div className="grid flex-1 gap-2">
            <Label htmlFor="link" className="sr-only">
              Link
            </Label>

            <Input id="link" defaultValue="https://ui.manpuc.me/docs/installation" />
          </div>

          <CopyButton value="https://ui.manpuc.me/docs/installation" type="button" size="sm" className="px-3" />
        </div>

        <DialogFooter className="sm:justify-start">
          <DialogClose>
            <Button type="button" variant="secondary">
              Close
            </Button>
          </DialogClose>
        </DialogFooter>
      </DialogContent>
    </Dialog>
  </div>
</ComponentPreview>

## API Reference [#api-reference]

The `Dialog` component uses Radix UI Primitives. For a complete API reference, please refer to the [Radix UI Dialog Documentation](https://www.radix-ui.com/docs/primitives/components/dialog).

| Prop           | Type       | Default | Description                                                                                       |
| -------------- | ---------- | ------- | ------------------------------------------------------------------------------------------------- |
| `open`         | `boolean`  | -       | The controlled open state of the dialog.                                                          |
| `defaultOpen`  | `boolean`  | `false` | The open state of the dialog when it is initially rendered.                                       |
| `onOpenChange` | `function` | -       | Event handler called when the open state of the dialog changes.                                   |
| `modal`        | `boolean`  | `true`  | Whether the dialog should be rendered as a modal (traps focus and blocks background interaction). |

### DialogContent [#dialogcontent]

| Prop              | Type      | Default | Description                                                        |
| ----------------- | --------- | ------- | ------------------------------------------------------------------ |
| `showCloseButton` | `boolean` | `true`  | Whether to display the built-in 'X' close button in the top right. |

## Notes on Monolith Design [#notes-on-monolith-design]

In line with the `DESIGN.md` guidelines for Monolith:

1. **Geometry**: The Dialog uses `rounded-none` and strict 1px `border` constraints, without large drop-shadows.
2. **Animation**: Entry and exit animations are kept crisp (`duration-150`) and simple (`zoom-in-95` / `fade-in-0`) to avoid sluggish feels.