Responsive Dialog
A dialog component that automatically switches between a centered dialog on desktop and a bottom drawer on mobile.
Installation
pnpm dlx shadcn@latest add @diceui/responsive-dialogLayout
Import the parts, and compose them together.
import {
ResponsiveDialog,
ResponsiveDialogContent,
ResponsiveDialogDescription,
ResponsiveDialogFooter,
ResponsiveDialogHeader,
ResponsiveDialogTitle,
ResponsiveDialogTrigger,
} from "@/components/ui/responsive-dialog";
<ResponsiveDialog>
<ResponsiveDialogTrigger />
<ResponsiveDialogContent>
<ResponsiveDialogHeader>
<ResponsiveDialogTitle />
<ResponsiveDialogDescription />
</ResponsiveDialogHeader>
<ResponsiveDialogFooter />
</ResponsiveDialogContent>
</ResponsiveDialog>Examples
Confirmation Dialog
Use the responsive dialog to confirm destructive actions like deleting items.
Variant Styling
Each component exposes a data-variant attribute that can be used to apply different styles based on whether the dialog or drawer is rendered.
<ResponsiveDialogContent className="data-[variant=drawer]:pb-8 data-[variant=dialog]:max-w-md">
{/* content */}
</ResponsiveDialogContent>
<ResponsiveDialogFooter className="data-[variant=drawer]:flex-col data-[variant=dialog]:flex-row">
{/* buttons */}
</ResponsiveDialogFooter>API Reference
ResponsiveDialog
The root component that manages the dialog/drawer state.
Prop
Type
ResponsiveDialogTrigger
The button that opens the dialog/drawer.
Prop
Type
| Data Attribute | Value |
|---|---|
[data-variant] | "dialog" | "drawer" |
ResponsiveDialogContent
The content container for the dialog/drawer.
Prop
Type
| Data Attribute | Value |
|---|---|
[data-variant] | "dialog" | "drawer" |
ResponsiveDialogHeader
The header section of the dialog/drawer.
Prop
Type
| Data Attribute | Value |
|---|---|
[data-variant] | "dialog" | "drawer" |
ResponsiveDialogFooter
The footer section of the dialog/drawer.
| Data Attribute | Value |
|---|---|
[data-variant] | "dialog" | "drawer" |
ResponsiveDialogTitle
The title of the dialog/drawer.
Prop
Type
| Data Attribute | Value |
|---|---|
[data-variant] | "dialog" | "drawer" |
ResponsiveDialogDescription
The description of the dialog/drawer.
Prop
Type
| Data Attribute | Value |
|---|---|
[data-variant] | "dialog" | "drawer" |
ResponsiveDialogClose
The close button for the dialog/drawer.
Prop
Type
| Data Attribute | Value |
|---|---|
[data-variant] | "dialog" | "drawer" |
ResponsiveDialogOverlay
The overlay behind the dialog/drawer.
Prop
Type
| Data Attribute | Value |
|---|---|
[data-variant] | "dialog" | "drawer" |
ResponsiveDialogPortal
The portal container for the dialog/drawer.
Prop
Type
| Data Attribute | Value |
|---|---|
[data-variant] | "dialog" | "drawer" |
Accessibility
Adheres to the Dialog WAI-ARIA design pattern.
Keyboard Interactions
| Key | Description |
|---|---|
| Space | Opens/closes the dialog when focus is on the trigger. |
| Enter | Opens/closes the dialog when focus is on the trigger. |
| Tab | Moves focus to the next focusable element. |
| Shift + Tab | Moves focus to the previous focusable element. |
| Escape | Closes the dialog/drawer and moves focus to the trigger. |