Playground

Dialog

overlay

container

Modal dialog for focused interactions

Confirmations, forms, and important messages

Frosted backdrop overlay with generous padding and rounded corners

import { Dialog } from "@everydayos/ui";

Usage

Modal dialog for user confirmation with frosted overlay

<Dialog>
  <DialogTrigger asChild>
    <Button variant="outline">Delete Account</Button>
  </DialogTrigger>
  <DialogContent>
    <DialogHeader>
      <DialogTitle>Are you sure?</DialogTitle>
      <DialogDescription>
        This action cannot be undone. Your account will be permanently deleted.
      </DialogDescription>
    </DialogHeader>
    <DialogFooter>
      <Button variant="outline">Cancel</Button>
      <Button>Delete</Button>
    </DialogFooter>
  </DialogContent>
</Dialog>

Composition

Pairs well with

Stack

Heading

Text

Button

Input

When to avoid

Non-critical info — use Tooltip or Popover instead
Navigation — use Sheet for slide-out panels