Responsive Dialog
A modal that adapts to the viewport — a centered Dialog on desktop, a bottom Drawer on mobile, from one shared set of components so you don't maintain two versions of the same form.
Last updated January 1, 1980
CreditsModifiedPublished
Copied from shadcn/ui.
- Not a shadcn/ui component — this composition (switch between Dialog and Drawer by viewport width, behind one shared API) is original to this registry, built on top of this registry's own Dialog and Drawer
- ResponsiveDialogDesktopOnly hides Cancel/انصراف-style actions on mobile, where the drawer is already dismissed by swiping down, so a redundant Cancel button never has to be built twice
Overview
Resize the browser window to see the preview switch between a Dialog and a Drawer.
Installation
Usage
import {
ResponsiveDialog,
ResponsiveDialogClose,
ResponsiveDialogDescription,
ResponsiveDialogDesktopOnly,
ResponsiveDialogFooter,
ResponsiveDialogHeader,
ResponsiveDialogPanel,
ResponsiveDialogPopup,
ResponsiveDialogTitle,
ResponsiveDialogTrigger,
} from "@/components/ui/responsive-dialog"
export function Example() {
return (
<ResponsiveDialog>
<ResponsiveDialogTrigger render={<Button variant="outline">Open</Button>} />
<ResponsiveDialogPopup>
<ResponsiveDialogHeader>
<ResponsiveDialogTitle>Edit profile</ResponsiveDialogTitle>
<ResponsiveDialogDescription>
A Dialog on desktop, a Drawer on mobile.
</ResponsiveDialogDescription>
</ResponsiveDialogHeader>
<ResponsiveDialogPanel>{/* form fields */}</ResponsiveDialogPanel>
<ResponsiveDialogFooter>
<Button type="submit">Save changes</Button>
{/* Skipped on mobile — the drawer is dismissed by swiping. */}
<ResponsiveDialogDesktopOnly>
<ResponsiveDialogClose render={<Button variant="outline">Cancel</Button>} />
</ResponsiveDialogDesktopOnly>
</ResponsiveDialogFooter>
</ResponsiveDialogPopup>
</ResponsiveDialog>
)
}Examples
Desktop-only actions
Wrap a secondary cancel action with ResponsiveDialogDesktopOnly. The primary action remains available everywhere, while mobile users dismiss the drawer by swiping down.
No footer
ResponsiveDialogFooter is optional here too — for a purely informational modal, skip it on both the Dialog and Drawer side.
RTL
API Reference
ResponsiveDialog
See the inherited API in Base UI Dialog API .
See the inherited API in Base UI Drawer API .