Dialog

Modal surface for focused tasks, forms, and decisions.

Installation

npx shadcn@latest add @iconiq/r-dialog

Props

Dialog

Provider-switchable modal surface with the same exported Dialog parts on both Base UI and Radix UI.

openboolean

Optional controlled open state for the dialog root when the parent owns visibility.

defaultOpenboolean

Default false

Uncontrolled initial state for the dialog root when you want the component to manage its own visibility.

onOpenChange(open: boolean) => void

Called whenever the open state changes, regardless of which provider is installed underneath.

Current install target: Radix UI.

Dependencies declared by this registry entry: @radix-ui/react-dialog, motion, lucide-react.

Installs a Radix dialog with the same exported Dialog parts as the Base UI version.

Uses the original dialog spring timing with the softer alert-dialog card styling, overlay blur, and updated surface treatment.

The generated registry file is /r/r-dialog.json.

Exports

Both registry entries ship the same higher-level parts so you can keep one dialog composition style while swapping the headless library below it.

DialogTrigger / DialogCloseButtonHTMLAttributes<HTMLButtonElement> & { asChild?: boolean }

Open and close controls. Both installs support asChild so you can turn custom buttons into trigger or dismiss elements without changing the outer API.

DialogContentDialog popup props + { open?: boolean }

Visible modal card wrapper. className is merged onto the animated surface, and the optional open prop can mirror the root state when you want explicit parity with the original dialog usage.

DialogHeader / DialogFooterHTMLAttributes<HTMLDivElement>

Layout helpers for the content body and action row.

DialogTitle / DialogDescriptionPrimitive text props

Semantic title and description slots styled with the same modal treatment on both installs.

DialogPortalPortal primitive

Direct portal export for cases where you need to compose more advanced dialog structures manually.

Both installs render a built-in top-right close button inside DialogContent.

The motion timing follows the original dialog component, while the card styling and overlay treatment follow the alert-dialog surface direction.