Drawer su mobile e dialog su desktop, con un solo componente

Risposta breve: scrivi un wrapper che rende Dialog sopra i 768 pixel e Drawer sotto, e decidi il lato con window.matchMedia dentro un useEffect. La scelta durante il render produce un albero diverso sul server e l'idratazione fallisce.

Due primitive, un contenuto

Il contenuto è lo stesso: un pannello con un titolo e dei campi. Cambia il gesto che lo chiude. Il Dialog si chiude cliccando fuori o premendo Escape, il Drawer anche trascinando verso il basso. Su un telefono il pollice arriva in fondo allo schermo, e lo swipe è il gesto che l'utente già conosce.

npx shadcn@latest add drawer dialog button

Il wrapper che sceglie

"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}
      
    
  );
}

Il dettaglio che evita il mismatch è useState(true): server e primo render client disegnano il dialog, poi l'effect corregge. Il lampo non si vede perché il pannello esiste solo quando è aperto, e di solito si apre dopo l'idratazione.

Il gesto non è l'unica differenza

In entrambi il titolo è obbligatorio: Radix usa DialogTitle come nome accessibile, e senza di lui la console avverte e il lettore di schermo annuncia «dialog» senza dire quale. La trappola è descritta in perché DialogContent richiede DialogTitle.

Limite dichiarato

Il prezzo è due componenti da mantenere: due set di stili, due test e due comportamenti da verificare a ogni cambio di contenuto. L'alternativa in solo CSS, mostrare l'uno e nascondere l'altro con md:hidden, non funziona: entrambi montano un portal e una trappola di focus, e quello nascosto intercetta comunque i tasti. matchMedia inoltre non esiste durante il render sul server, quindi ogni lettura va dentro un effect.

Dove continuare

Nel catalogo trovi la libreria shadcn, un blocco dialog con anteprima e la categoria dialog. Per il pattern di base leggi che cos'è shadcn/ui e il titolo obbligatorio del dialog; la rassegna dei blocchi è i migliori blocchi dialog del 2026. Se il dialog si chiude da solo quando parte da un menu, la causa è in dialog che si chiude da un dropdown; per i form dentro il pannello leggi select con ricerca.