Ubuntu
75 lines
1.3 KiB
Plaintext
75 lines
1.3 KiB
Plaintext
---
|
|
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-studio/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:
|
|
|
|
```sh
|
|
npm install @radix-ui/react-dialog @radix-ui/react-visually-hidden tailwindcss-animate
|
|
```
|
|
|
|
<br />
|
|
|
|
#### 2. Configure your `tailwind.config.ts` add:
|
|
|
|
```sh
|
|
{
|
|
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" />
|