║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║

---

title: Dialog description: An impactful dialog that ensures your important messages and actions get the attention they deserve! 💬✨ lastUpdated: 09 Sep, 2025 links: api_reference: https://www.radix-ui.com/primitives/docs/components/dialog#api-reference source: https://github.com/Logging-Stuff/RetroUI/blob/main/components/retroui/Dialog.tsx

<ComponentShowcase name="dialog-style-default" /> <br /> <br />

Instalation

<ComponentInstall> <ComponentInstall.Cli npmCommand="npx shadcn@latest add @retroui/dialog" /> <ComponentInstall.Manual>

1. Install dependencies:

npm install @radix-ui/react-dialog @radix-ui/react-visually-hidden tailwindcss-animate

<br />

2. Configure your tailwind.config.ts add:

{
  content: [...],
  theme: [...],

  // add plugin
  plugins: [require("tailwindcss-animate")],
}

3. Copy the code 👇 into your project:

<ComponentSource name="dialog" />

</ComponentInstall.Manual> </ComponentInstall>

<br /> <br />

Example

Confirm dialog message

<ComponentShowcase name="dialog-style-default" /> <br /> <br />

With footer

<ComponentShowcase name="dialog-style-with-footer" /> <br /> <br />

Size variants

<ComponentShowcase name="dialog-style-width-variant" /> <br /> <br />

With form

<ComponentShowcase name="dialog-style-with-form" />

║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║