Dialog
ui
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