iconiq
—Open GitHub

Dialog

Modal surface with Motion transitions, Radix-backed accessibility, and composable header and footer slots.

Open in

Installation

npx shadcn@latest add @iconiq/dialog

Props

Dialog

4 props

Dialog, DialogTrigger, DialogClose, and DialogPortal are direct re-exports of the matching Radix dialog primitives.
openboolean
Controlled open state on the Dialog root when you want the parent component to own visibility.
defaultOpenboolean
Uncontrolled initial state forwarded to Radix Dialog.Root.
onOpenChange(open: boolean) => void
Called whenever Radix requests a state change through triggers, overlay clicks, or escape key handling.
childrenReactNode
Required
Composition surface for the trigger, content, and any related dialog helpers.

Notes

Any remaining Dialog.Root props continue to work because the root export is the Radix primitive itself.
Accessibility and focus-trap behavior come from Radix rather than additional wrapper logic here.

DialogContent

3 props

Motion-enhanced content wrapper built around DialogPrimitive.Content and AnimatePresence.
openboolean
Controls whether the animated portal branch renders at all. In practice this must mirror the root open state for the content to appear and exit correctly.
classNamestring
Merged onto the inner motion panel rather than the full-screen DialogPrimitive.Content wrapper.
childrenReactNode
Required
Content rendered inside the animated panel. Each direct child is wrapped in its own motion.div for staggered entry.

Notes

Accessibility props and Radix callbacks such as onEscapeKeyDown, onPointerDownOutside, aria-describedby, and aria-labelledby are forwarded to DialogPrimitive.Content.
DialogContent always renders its own close button in the top-right corner using DialogPrimitive.Close and the Lucide X icon.

DialogTrigger and DialogClose

2 props

These exports are direct Radix aliases used to open or close the dialog from any custom element.
asChildboolean
Lets you turn a custom button or link into the trigger or close control without adding an extra wrapper element.
childrenReactNode
Required
Interactive content rendered by the trigger or close primitive.

Notes

Because both exports come directly from Radix, they also accept the remaining primitive props for event handling and accessibility wiring.

DialogHeader and DialogFooter

2 props

Layout helpers used to structure dialog content without changing dialog behavior.
childrenReactNode
Required
Content rendered inside the helper container.
classNamestring
Merged onto the helper wrapper so spacing and alignment can be adjusted per dialog.

Notes

Both helpers accept the normal div HTML attribute surface in addition to className and children.

DialogTitle and DialogDescription

2 props

Semantic text helpers that forward to the matching Radix title and description primitives.
childrenReactNode
Required
Text or inline markup rendered inside the title or description primitive.
classNamestring
Merged with the default title or description styles.

Notes

Both helpers forward refs to the underlying Radix primitives.