Come costruire la shell di una dashboard in React

La shell di una dashboard in React è composta da tre regioni stabili: una sidebar che resta montata, un header che dice dove sei e un'area contenuto che scorre da sola. Tutto il resto è contenuto, non struttura.

Quando la shell si rompe, di solito succede per un motivo solo: la struttura vive dentro la pagina. Cambi route, React smonta sidebar e header, e l'utente vede un lampo bianco a ogni clic.

Le tre regioni, in ordine di importanza

• Sidebar: da 240 a 280px, collassabile a icone sotto i 1024px.
• Header: breadcrumb e azioni della pagina corrente, non della shell.
• Contenuto: un solo elemento con overflow-auto; il body non deve scorrere.
• Stato della sidebar: cookie letto dal server, così il primo paint è già corretto.
• Mobile: la sidebar diventa un Sheet, non un pannello che spinge il contenuto.

Cosa prendere dal catalogo

Il blocco dashboard-01 di shadcn/ui è la reference completa: sidebar, card, grafico e tabella. Per una shell più leggera parti da sidebar-07, che collassa a icone, e sfoglia la categoria dashboard per le varianti. Sorgente: github.com/shadcn-ui/ui, licenza MIT.

La struttura minima

npx shadcn@latest add sidebar breadcrumb separator

import type { ReactNode } from "react";
import { SidebarInset, SidebarProvider, SidebarTrigger } from "@/components/ui/sidebar";

export function DashboardShell({ sidebar, children }: { sidebar: ReactNode; children: ReactNode }) {
  return (
    
      {sidebar}
      
        
          
          Workspace
        
        {children}
      
    
  );
}

Un esempio concreto: chi scorre

.shell { display: grid; grid-template-columns: auto 1fr; height: 100dvh; }
.shell > main { min-height: 0; overflow: auto; }

La riga che rompe il layout quando manca è min-height: 0. Un figlio di griglia parte con min-height: auto, quindi cresce con il contenuto e porta l'altezza oltre lo schermo; con la riga, main scorre da sola e sidebar e header restano fermi. 100dvh evita il salto della barra indirizzi su mobile.

Sul catalogo, letto il 1 novembre 2026 da data/blocks.json (snapshot del 31 ottobre 2026), la categoria dashboard contiene 20 blocchi da 3 fonti e 17 arrivano da shadcn-ui-ui. Nello stesso file dashboard-01 dichiara 7 dipendenze npm e 19 registryDependencies, mentre sidebar-07 ne dichiara 0 e 6.

I tre stati che la shell deve gestire

Caricamento: skeleton di altezza fissa, così il contenuto non salta quando arriva. Vuoto: la shell resta, cambia solo l'area centrale. Errore: un messaggio dentro l'area contenuto, con il pulsante che riprova; la sidebar non deve sparire perché una fetch è fallita.

Limite dichiarato: dashboard-01 trascina @dnd-kit, @tanstack/react-table, zod e @tabler/icons-react. Se la dashboard non ha tabelle riordinabili, quella dipendenza è peso morto: prendi sidebar-07 e costruisci le card da solo.

La regola di decisione

Prendi dashboard-01 solo se ti servono insieme la tabella ordinabile e il grafico. Se manca una delle due, parti da sidebar-07 e aggiungi i pezzi: la differenza è di sette dipendenze npm contro zero, e ognuna va aggiornata. Una sola feature mancante non giustifica il blocco completo.

L'errore da evitare

Mettere overflow-auto sul body e anche sull'area contenuto: nascono due barre di scorrimento, l'header perde la posizione fissa e su iOS il rimbalzo muove tutta la pagina. Lascia scorrere un solo elemento, con overflow: hidden sul body e height: 100dvh sulla shell.

Sotto i 1024px la sidebar diventa un pannello sovrapposto con un solo punto di chiusura: il pulsante nell'header e il tasto Esc devono fare la stessa cosa, e il fuoco torna al pulsante quando il pannello si chiude. Se il pannello spinge il contenuto, ogni apertura azzera la posizione di scorrimento.

Per riempire le sezioni usa la guida 5 blocchi per una pagina dashboard admin e il confronto misurato Migliori dashboard blocks 2026. Prima di installare le primitive, leggi Radix vs Base UI vs React Aria.