Dialog

Modal on the native <dialog> element — real inertness, focus trap and Esc for free, animated with @starting-style.

4 files · 256 locdeps: clsx, tailwind-merge

Installation

With the shadcn CLI, pointing at this platform’s registry:

npx shadcn@latest add https://opusui.131199999.xyz/r/dialog.json

Or offline, straight from your opus55 checkout (copies every file it needs):

node ../tailwind_component/opus55/scripts/add.mjs dialog

Usage

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

<Dialog>
  <DialogTrigger><Button>Open</Button></DialogTrigger>
  <DialogContent>
    <DialogHeader><DialogTitle>Title</DialogTitle></DialogHeader>
    …
  </DialogContent>
</Dialog>

API

Prop	Type	Default	Description
open / defaultOpen	boolean	—	On <Dialog>: controlled / uncontrolled.
onOpenChange	(open: boolean) => void	—	On <Dialog>.
size	"sm" \| "md" \| "lg" \| "xl" \| "full"	"md"	On <DialogContent>: max width.
dismissible	boolean	true	Close on backdrop click and Esc.
showClose	boolean	true	Render the × button.

Notes

useDialog() gives any child { open, setOpen } — handy for closing after an async submit.

← PreviousContext Menu Next →Sheet