How do I install the Vibe UI Dialog component?

You can install Dialog into your React or Next.js project using the Vibe UI CLI: run "npx vibe-ui-kit add dialog" in your terminal.

Does Vibe UI Dialog support Tailwind CSS v4?

Yes, Vibe UI natively supports both modern Tailwind CSS v4 (@theme directives) and Tailwind CSS v3 with zero configuration.

Is the Vibe UI Dialog component accessible?

Yes, Vibe UI primitives are built upon WAI-ARIA compliant Radix UI primitives with full keyboard navigation and screen reader support.

Dialog

A modal window overlaying the primary app view.

Dialog

A modal window overlaying the primary app view.

Installation

pnpm dlx vibe-ui-kit@latest add dialog button

💡 Vibe UI Component Dependencies: This component requires other components to work correctlyPlease make sure you also install these Vibe UI component dependencies: button

Themes

Explore all style variants side-by-side.

Props

DialogContent

Prop	Type	Default	Description
variant	'default' \| 'glass' \| 'retro' \| 'glow'	'default'	The aesthetic variant styling theme to apply to the dialog container.
showCloseButton	boolean	true	Controls the visibility of the absolute positioned 'X' close button at the top right.