GitHub
New

Dialog

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

Kobalte
Kobalte

The Dialog component is built on top of Kobalte Dialog, which provides accessible modal, focus-management, and keyboard behavior.

Installation

Usage

import {
  Dialog,
  DialogContent,
  DialogDescription,
  DialogHeader,
  DialogTitle,
  DialogTrigger,
} from "~/components/ui/dialog";
import { Button } from "~/components/ui/button";
<Dialog>
  <DialogTrigger as={Button} variant="outline">
    Open
  </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>

Composition

Use the following composition to build a Dialog:

Dialog
├── DialogTrigger
└── DialogContent
    ├── DialogHeader
    │   ├── DialogTitle
    │   └── DialogDescription
    └── DialogFooter

Custom Close Button

Replace the default close control with your own button.

No Close Button

Use showCloseButton={false} to hide the close button.

Keep actions visible while the content scrolls.

Scrollable Content

Long content can scroll while the header stays in view.

API Reference

For all primitive props and keyboard interactions, see the Kobalte Dialog API reference.