Component · <dialog> showModal()

Dialog

A modal on the native <dialog>: focus trap, Escape and inert page for free.

Install

npx @lazizbekio/mitame add dialog

Usage

import {
  Dialog,
  DialogClose,
  DialogContent,
  DialogDescription,
  DialogFooter,
  DialogTitle,
  DialogTrigger,
} from "@/components/mitame/ui/dialog";

export default function DialogDemo() {
  return (
    <Dialog>
      <DialogTrigger>Delete project</DialogTrigger>
      <DialogContent>
        <DialogTitle>Delete this project?</DialogTitle>
        <DialogDescription>12 pages will be gone for good. This can't be undone.</DialogDescription>
        <DialogFooter>
          <DialogClose>Cancel</DialogClose>
          <DialogClose data-variant="danger">Delete</DialogClose>
        </DialogFooter>
      </DialogContent>
    </Dialog>
  );
}

Props

Prop	Type	Default	Description
`Dialog open / defaultOpen / onOpenChange`	`boolean / (open) => void`	—	Control it or let it manage itself.
`DialogContent dismissible`	`boolean`	`true`	Close on backdrop click.
`DialogContent showClose`	`boolean`	`true`	Show the close button in the corner.
`DialogTitle / DialogDescription`	`HTMLAttributes`	—	Wired to aria-labelledby and aria-describedby.
`DialogClose`	`HTMLAttributes<button>`	—	Any button that closes it.

Keyboard

Key	Does
`Esc`	Close
`Tab`	Stays inside the dialog

Notes

The page behind stops scrolling while a dialog is open.

Styling

Every part has a data-slot starting with dialog, and state lives in data-state,data-variant and friends. Pass any class to override; theme styles sit in a lower CSS layer, so yours win. See Theming.