Dialog

Ready

Modal window.

Requires radix-ui

Installation

$ npx @oratiq-js/ui add dialog

Copies the component and everything it depends on into your project, then lists the npm packages to install. The code is yours after this.

import

import { Dialog, DialogTrigger, DialogPortal, DialogClose, DialogOverlay, DialogContent, /* … */ } from "@/components/ui/dialog";

Focus is trapped inside the dialog and returned to the trigger on close.
Escape closes; clicking the overlay closes. Both are expected of a non-destructive dialog.
DialogTitle is required — without it the dialog has no accessible name. Use sr-only if it shouldn't be visible.
Content behind is inert and hidden from the accessibility tree while open.

Prop	Type	Default	Description
`size`	`"sm" \| "default" \| "lg" \| "xl" \| "full"`	`"default"`	Maximum width.
`hideClose`	`boolean`	`false`	Removes the built-in close button.