shadcn-impl-responsive-dialog-drawer

To make a shadcn ui modal responsive, use an SSR-safe media query hook to switch between a centered Dialog on desktop and a bottom-sheet Drawer on mobile. This approach maintains a single open state and ensures only one modal mounts at a time to prevent focus-trap conflicts.

Responsive Next.js modals cause hydration mismatches when media queries run on the client before the server render finishes. Using an SSR-safe useMediaQuery hook based on useSyncExternalStore prevents this by ensuring the server and client render the same initial modal state.

To share form content between a shadcn Dialog and Drawer, extract the fields into a single shared content component. Passing this shared component to both modal surfaces ensures users never lose inputs or see different field sets when switching breakpoints.

Yes, you can use a shadcn ui Drawer for mobile combobox dropdowns by extending the responsive modal pattern. This Popover-on-desktop and Drawer-on-mobile pattern provides mobile-safe combobox behavior that adapts to the viewport width.

To fix nested button HTML issues in shadcn ui DrawerClose, use the asChild prop. This ensures the close button merges with its child element correctly, avoiding invalid HTML nesting and ensuring the closing action works reliably.

No, a responsive shadcn modal should maintain a single open state for both the Dialog and Drawer branches. Using early-return mounting ensures only one modal surface mounts at a time, preventing duplicate role attributes and focus-trap conflicts.