Plinth

Dialog

Modal window for focused tasks, with header, footer, and close handling.

Install

npx shadcn@latest add https://plinth.dhrumilkherde.com/r/dialog.json

Usage

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

<Dialog open={open} onOpenChange={setOpen}>
  <DialogTrigger render={<Button>Open</Button>} />
  <DialogContent>
    <DialogHeader>
      <DialogTitle>Title</DialogTitle>
    </DialogHeader>
    {/* body */}
  </DialogContent>
</Dialog>

showClose={false} on DialogContent removes the corner X (then provide your own DialogClose).

Accessibility

  • Base UI Dialog: focus is trapped inside, restored to the trigger on close; Escape and backdrop click dismiss; the page behind is inert.
  • DialogTitle and DialogDescription label the dialog for screen readers; always include a title.
  • For destructive confirmations use Alert Dialog, which blocks outside-click dismissal.

Context Menu

Right-click menu with the same item set as Dropdown Menu.

Alert Dialog

Confirmation dialog for consequential actions; must be answered explicitly.

On this page

InstallUsageAccessibility