Dialog

Installation

Install the component via the CLI in one command.

npx shadcn@latest add @intentui/dialog

Composed components

When you install this component via the CLI, it automatically loads all composed components, so you don’t need to add them individually.

Manual installation

Use this approach if you prefer to install and wire up the component yourself instead of using the CLI.

npm install react-aria-components @heroicons/react tailwind-merge

Component API

Dialog

Dialog extends the React Aria Components <Dialog> component.

classNamestring

DialogBody

DialogBody extends the native <div> element.

classNamestring

DialogCloseIcon

DialogCloseIcon extends the Intent UI <Button> component.

classNamestring
isDismissableboolean | undefined

DialogClose

DialogClose extends the Intent UI <Button> component.

classNamestring
intent"primary" | "secondary" | "warning" | "danger" | "success" | "outline" | "plain"
Default: plain

DialogDescription

DialogDescription extends the React Aria Components <Text> component.

classNamestring

DialogFooter

DialogFooter extends the native <div> element.

classNamestring

DialogHeader

DialogHeader extends the native <div> element.

classNamestring
descriptionstring
titlestring

DialogTitle

DialogTitle extends the React Aria Components <Heading> component.

classNamestring

DialogTrigger

DialogTrigger extends the Intent UI <Button> component.

classNamestring

See the React Aria for the full API reference.