snapshot of https://github.com/shadcn-ui/ui.git (main, 2026-09-15; blobs > 131072B omitted)
This commit is contained in:
134
apps/v4/content/docs/components/radix/dialog.mdx
Normal file
134
apps/v4/content/docs/components/radix/dialog.mdx
Normal file
@@ -0,0 +1,134 @@
|
||||
---
|
||||
title: Dialog
|
||||
description: A window overlaid on either the primary window or another dialog window, rendering the content underneath inert.
|
||||
featured: true
|
||||
base: radix
|
||||
component: true
|
||||
links:
|
||||
doc: https://www.radix-ui.com/docs/primitives/components/dialog
|
||||
api: https://www.radix-ui.com/docs/primitives/components/dialog#api-reference
|
||||
---
|
||||
|
||||
<ComponentPreview
|
||||
styleName="radix-nova"
|
||||
name="dialog-demo"
|
||||
description="A dialog for editing profile details."
|
||||
/>
|
||||
|
||||
## Installation
|
||||
|
||||
<CodeTabs>
|
||||
|
||||
<TabsList>
|
||||
<TabsTrigger value="cli">Command</TabsTrigger>
|
||||
<TabsTrigger value="manual">Manual</TabsTrigger>
|
||||
</TabsList>
|
||||
<TabsContent value="cli">
|
||||
|
||||
```bash
|
||||
npx shadcn@latest add dialog
|
||||
```
|
||||
|
||||
</TabsContent>
|
||||
|
||||
<TabsContent value="manual">
|
||||
|
||||
<Steps className="mb-0 pt-2">
|
||||
|
||||
<Step>Install the following dependencies:</Step>
|
||||
|
||||
```bash
|
||||
npm install radix-ui
|
||||
```
|
||||
|
||||
<Step>Copy and paste the following code into your project.</Step>
|
||||
|
||||
<ComponentSource
|
||||
name="dialog"
|
||||
title="components/ui/dialog.tsx"
|
||||
styleName="radix-nova"
|
||||
/>
|
||||
|
||||
<Step>Update the import paths to match your project setup.</Step>
|
||||
|
||||
</Steps>
|
||||
|
||||
</TabsContent>
|
||||
|
||||
</CodeTabs>
|
||||
|
||||
## Usage
|
||||
|
||||
```tsx showLineNumbers
|
||||
import {
|
||||
Dialog,
|
||||
DialogContent,
|
||||
DialogDescription,
|
||||
DialogHeader,
|
||||
DialogTitle,
|
||||
DialogTrigger,
|
||||
} from "@/components/ui/dialog"
|
||||
```
|
||||
|
||||
```tsx showLineNumbers
|
||||
<Dialog>
|
||||
<DialogTrigger>Open</DialogTrigger>
|
||||
<DialogContent>
|
||||
<DialogHeader>
|
||||
<DialogTitle>Are you absolutely sure?</DialogTitle>
|
||||
<DialogDescription>
|
||||
This action cannot be undone. This will permanently delete your account
|
||||
and remove your data from our servers.
|
||||
</DialogDescription>
|
||||
</DialogHeader>
|
||||
</DialogContent>
|
||||
</Dialog>
|
||||
```
|
||||
|
||||
## Composition
|
||||
|
||||
Use the following composition to build a `Dialog`:
|
||||
|
||||
```text
|
||||
Dialog
|
||||
├── DialogTrigger
|
||||
└── DialogContent
|
||||
├── DialogHeader
|
||||
│ ├── DialogTitle
|
||||
│ └── DialogDescription
|
||||
└── DialogFooter
|
||||
```
|
||||
|
||||
## Custom Close Button
|
||||
|
||||
Replace the default close control with your own button.
|
||||
|
||||
<ComponentPreview styleName="radix-nova" name="dialog-close-button" />
|
||||
|
||||
## No Close Button
|
||||
|
||||
Use `showCloseButton={false}` to hide the close button.
|
||||
|
||||
<ComponentPreview styleName="radix-nova" name="dialog-no-close-button" />
|
||||
|
||||
## Sticky Footer
|
||||
|
||||
Keep actions visible while the content scrolls.
|
||||
|
||||
<ComponentPreview styleName="radix-nova" name="dialog-sticky-footer" />
|
||||
|
||||
## Scrollable Content
|
||||
|
||||
Long content can scroll while the header stays in view.
|
||||
|
||||
<ComponentPreview styleName="radix-nova" name="dialog-scrollable-content" />
|
||||
|
||||
## RTL
|
||||
|
||||
To enable RTL support in shadcn/ui, see the [RTL configuration guide](/docs/rtl).
|
||||
|
||||
<ComponentPreview styleName="radix-nova" name="dialog-rtl" direction="rtl" />
|
||||
|
||||
## API Reference
|
||||
|
||||
See the [Radix UI](https://www.radix-ui.com/docs/primitives/components/dialog#api-reference) documentation for more information.
|
||||
Reference in New Issue
Block a user