shadcn-impl-responsive-dialog-drawer

What problem does it solve?

This Skill prevents brittle, inaccessible responsive modals by providing a production-ready recipe for rendering a single modal surface that becomes a centered Dialog on desktop and a bottom-sheet Drawer on mobile.

Core Features & Use Cases

• SSR-safe responsive switching: Uses an SSR-safe useMediaQuery based on useSyncExternalStore to avoid hydration mismatches in Next.js.
• Single open-state + early return: Maintains one open state for both branches and ensures only one modal mounts at a time to avoid duplicate role="dialog" nodes and focus-trap conflicts.
• Shared content component contract: Enforces one shared content component for both surfaces so users never lose inputs or see different field sets across breakpoints.
• Accessible labeling & correct close semantics: Ensures DialogTitle/DialogDescription and DrawerTitle/DrawerDescription are present, and uses DrawerClose asChild to avoid nested button HTML and ensure closing works reliably.
• Responsive Combobox variant support: Extends the same Popover-on-desktop / Drawer-on-mobile pattern to mobile-safe combobox behavior.

Quick Start

Ask the AI to implement a responsive Edit Profile modal that uses a Dialog on screens at least 768px wide and a Drawer on smaller screens, with one shared form component and an SSR-safe media-query hook.