Responsive Dialog

A dialog component that adapts to screen size - modal on desktop, bottom sheet on mobile.

Responsive Dialog

A dialog component that automatically adapts its presentation based on screen size. On desktop, it renders as a traditional centered modal. On mobile devices, it transforms into a bottom sheet for better touch accessibility.

Installation

pnpm dlx shadcn@latest add https://ui-registry.com/r/responsive-dialog.json

Usage

import {
  ResponsiveDialog,
  ResponsiveDialogContent,
  ResponsiveDialogHeader,
  ResponsiveDialogTitle,
  ResponsiveDialogDescription,
  ResponsiveDialogFooter,
} from '@/components/ui/responsive-dialog';

const [open, setOpen] = useState(false);

<ResponsiveDialog open={open} onOpenChange={setOpen}>   <ResponsiveDialogContent>     <ResponsiveDialogHeader>       <ResponsiveDialogTitle>Dialog Title</ResponsiveDialogTitle>       <ResponsiveDialogDescription>         This is a description of the dialog content.       </ResponsiveDialogDescription>     </ResponsiveDialogHeader>     <ResponsiveDialogFooter>       <Button onClick={() => setOpen(false)}>Close</Button>     </ResponsiveDialogFooter>   </ResponsiveDialogContent> </ResponsiveDialog>

Examples

Basic Dialog

<ResponsiveDialog open={open} onOpenChange={setOpen}>
  <ResponsiveDialogContent>
    <ResponsiveDialogHeader>
      <ResponsiveDialogTitle>Welcome</ResponsiveDialogTitle>
      <ResponsiveDialogDescription>
        This dialog works great on both desktop and mobile.
      </ResponsiveDialogDescription>
    </ResponsiveDialogHeader>
  </ResponsiveDialogContent>
</ResponsiveDialog>

With Form

<ResponsiveDialog open={open} onOpenChange={setOpen}>
  <ResponsiveDialogContent>
    <ResponsiveDialogHeader>
      <ResponsiveDialogTitle>Edit Profile</ResponsiveDialogTitle>
    </ResponsiveDialogHeader>
    <form className="space-y-4">
      <Input placeholder="Name" />
      <Input placeholder="Email" />
    </form>
    <ResponsiveDialogFooter>
      <Button variant="outline" onClick={() => setOpen(false)}>
        Cancel
      </Button>
      <Button>Save</Button>
    </ResponsiveDialogFooter>
  </ResponsiveDialogContent>
</ResponsiveDialog>

API Reference

ResponsiveDialog

Prop	Type	Default
open	`boolean`	-
onOpenChange	`(open: boolean) => void`	-
className	`string`	-

ResponsiveDialogContent

Prop	Type	Default
className	`string`	-

ResponsiveDialogHeader

Prop	Type	Default
className	`string`	-

ResponsiveDialogTitle

Prop	Type	Default
className	`string`	-

ResponsiveDialogDescription

Prop	Type	Default
className	`string`	-

ResponsiveDialogFooter

Prop	Type	Default
className	`string`	-