Dialog

Modal surface for focused tasks, forms, and decisions.

This goes live for the team.Tapto continue.

Installation

npx shadcn@latest add @iconiq/r-dialog

ReducedMotion

Pass reducedMotionwhen you want the installed component to settle into its quieter motion path immediately. Leaving the prop unset still respects the user's system-level reduced motion preference.

This goes live for the team.Tapto continue.

Props

Dialog

4 props

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

Defaultfalse

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.

reducedMotionboolean

Turns the dialog onto its quieter motion path immediately while still respecting system-level reduced motion preferences.

Notes

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

5 props

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; reducedMotion?: 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.

Notes

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.