responsivecn

makes shadcn/ui overlays responsive: a Dialog on desktop, a Drawer on a phone. Swap the import and keep every prop, on Base UI or Radix.
Read the docs
npx shadcn add @alexandrejoly/dialog-drawer
Drawerauto
375px renders the Drawer

Pairs

Drop-in replacement

Change the import, rename the tags, and every prop of your Dialog keeps working. Props both sides share reach the mobile side too; to change it alone, use drawer or popover.

edit-profile.tsx
import {  DialogDrawer,  DialogDrawerContent,  DialogDrawerTrigger,} from "@/components/ui/dialog-drawer"
<DialogDrawer>  <DialogDrawerTrigger>Edit profile</DialogDrawerTrigger>  <DialogDrawerContent drawer={{ className: "max-h-[85svh]" }}>    …  </DialogDrawerContent></DialogDrawer>

Works on Base UI and Radix

One file per pair, built on the shadcn components you already installed, so it takes their props and runs on their base.