Core ElementsFree

Dialog

A modal window for focused tasks, built on Base UI.

Usage

Installation

bash

npm install @wunderui/react

Then import what you need:

tsx

import {
  Dialog,
  DialogClose,
  DialogContent,
  DialogDescription,
  DialogFooter,
  DialogHeader,
  DialogIcon,
  DialogOverlay,
  DialogPortal,
  DialogTitle,
  DialogTrigger,
} from "@wunderui/react"

Examples

Upgrade plan

Title, a short description and one action — open it from the button.

Type

A centered 384 px dialog on desktop, a bottom sheet on mobile. Click either preview to open the real one.

Share “Checkout redesign”

Invite people by email or copy a link. Viewers can comment, editors can change screens.

Share “Checkout redesign”

Invite people by email or copy a link. Viewers can comment, editors can change screens.

Icon

The icon sets the tone of the dialog: neutral, a warning, or a destructive action. Click one to open its dialog.

Live dialog

Opens from a trigger with the spring transition.

In context

How the component is used inside real screens — the same compositions as the Usage section of the Figma page.

Settings danger zone

A destructive setting that opens a confirm dialog.

Danger zone

Delete workspace

All projects and members are removed.

API Reference

Prop	Type	Default
showCloseButton	boolean	true

PreviousCollapsible NextDivider with Label