primitives

Dialog

Modal that interrupts the user. Use for confirmations, focused sub-tasks, or destructive flows. For long-form editing prefer a Sheet so the page stays visible behind it.

Install

Pull this component (and its dependencies) straight into your app via the shadcn CLI:

npx shadcn@latest add https://design.oapps.io/r/dialog.json

Or import from the workspace package:

import { Dialog, DialogTrigger, DialogContent, DialogHeader, DialogTitle, DialogDescription, DialogFooter, DialogClose } from "@8maverik8/design";

Examples

Confirmation

<Dialog>
  <DialogTrigger asChild>
    <Button variant="destructive">Delete project</Button>
  </DialogTrigger>
  <DialogContent>
    <DialogHeader>
      <DialogTitle>Delete project?</DialogTitle>
      <DialogDescription>
        This permanently removes Pegasus and all 23 tracked resources.
      </DialogDescription>
    </DialogHeader>
    <DialogFooter>
      <DialogClose asChild>
        <Button variant="outline">Cancel</Button>
      </DialogClose>
      <Button variant="destructive">Delete</Button>
    </DialogFooter>
  </DialogContent>
</Dialog>

Anatomy

DialogRoot state container.
DialogTriggerElement that opens the dialog. Pass `asChild` to use your own button.
DialogContentCentered surface. Has overlay + close button by default.
DialogHeader / Title / DescriptionTop block with semantic title and description for screen readers.
DialogFooterBottom row of actions (Cancel left, primary right).

Guidelines

Always include a `DialogTitle` (can be `sr-only`) — Radix throws an a11y warning otherwise.
Stack dialogs.Two simultaneous modals confuse focus and Esc handling. Replace the content of the open dialog instead.
Place destructive primary action on the right, Cancel on the left.