Drawer on mobile and dialog on desktop, with one component

Short answer: write a wrapper that renders Dialog above 768 pixels and Drawer below, and decide the side with window.matchMedia inside a useEffect. Deciding during render produces a different tree on the server and hydration fails.

Two primitives, one payload

The payload is the same: a panel with a title and some fields. The gesture that closes it changes. The Dialog closes on an outside click or Escape, the Drawer also on a downward drag. On a phone the thumb reaches the bottom of the screen, and a swipe is the gesture the user already knows.

npx shadcn@latest add drawer dialog button

The wrapper that chooses

"use client";

import { useEffect, useState, type ReactNode } from "react";
import {
  Dialog,
  DialogContent,
  DialogHeader,
  DialogTitle,
} from "@/components/ui/dialog";
import {
  Drawer,
  DrawerContent,
  DrawerHeader,
  DrawerTitle,
} from "@/components/ui/drawer";

function useIsDesktop() {
  // true on the server and on the first client render: same tree, no mismatch.
  const [isDesktop, setIsDesktop] = useState(true);

  useEffect(() => {
    const query = window.matchMedia("(min-width: 768px)");
    const sync = () => setIsDesktop(query.matches);
    sync();
    query.addEventListener("change", sync);
    return () => query.removeEventListener("change", sync);
  }, []);

  return isDesktop;
}

export function ResponsivePanel({
  open,
  onOpenChange,
  title,
  children,
}: {
  open: boolean;
  onOpenChange: (open: boolean) => void;
  title: string;
  children: ReactNode;
}) {
  const isDesktop = useIsDesktop();

  if (isDesktop) {
    return (
      
        
          
            {title}
          
          {children}
        
      
    );
  }

  return (
    
      
        
          {title}
        
        {children}
      
    
  );
}

The detail that avoids the mismatch is useState(true): server and first client render paint the dialog, then the effect corrects it. No flash is visible because the panel only exists when open, and it usually opens after hydration.

The gesture is not the only difference

In both, the title is mandatory: Radix uses DialogTitle as the accessible name, and without it the console warns and the screen reader announces “dialog” without saying which one. The trap is described in why DialogContent requires DialogTitle.

A named limitation

The price is two components to maintain: two sets of styles, two tests and two behaviours to check whenever the payload changes. The CSS-only alternative, showing one and hiding the other with md:hidden, does not work: both mount a portal and a focus trap, and the hidden one still intercepts keys. matchMedia also does not exist during a server render, so every read belongs inside an effect.

Where to continue

In the catalogue you find the shadcn library, a dialog block with preview and the dialog category. For the base pattern read what shadcn/ui is and the mandatory dialog title; the roundup of blocks is the best dialog blocks of 2026. When the dialog closes by itself after opening from a menu, the cause is in a dialog closing from a dropdown; for forms inside the panel read a searchable select.