Vibe UI
Initializing Vibe UI System...
Vibe UI

Alert Dialog

A modal dialog that interrupts the user with important content and expects a response.

Alert Dialog

A modal dialog that interrupts the user with important content and expects a response.

Preview

Installation

pnpm dlx vibe-ui-kit@latest add alert-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

Standard Presets

A collection of standard confirmation, destructive alerts, scrollable bodies, form submittals, and header icon layouts.

Custom & Layout Variations

A showcase of glassmorphic styles, retro brutalist borders, custom action triggers, delayed close options, and multiple footer actions.

Premium Presets

A showcase of high-end premium interface presets utilizing advanced cyberpunk grids, frosted billing bundles, and neobrutalist hardware diagnostics.

Props

AlertDialogContent
PropTypeDefaultDescription
variant"default" | "glass" | "retro""default"Visual preset theme variant for the dialog content window and its backdrop overlay.
AlertDialogAction
PropTypeDefaultDescription
buttonVariant"default" | "destructive" | "outline" | "secondary" | "ghost" | "link" | "glass" | "glow" | "retro" | "gradient" | "cyberpunk""default"Visual preset theme variant for the action trigger button.
AlertDialogCancel
PropTypeDefaultDescription
buttonVariant"default" | "destructive" | "outline" | "secondary" | "ghost" | "link" | "glass" | "glow" | "retro" | "gradient" | "cyberpunk""outline"Visual preset theme variant for the cancel trigger button.

Contributors

JS
Jenish Sabhadiya

Theme Customizer

8px
@theme {
  --radius: 0.5rem;
  --glass-blur: 8px;
}
Changes apply instantly to this documentation workspace.
Alert Dialog | Vibe UI