# How to build a dashboard shell in React

A dashboard shell in React is a persistent sidebar, a header and one scrolling content area. Here is the structure, the block to start from and the states.

> Page: https://ui.eneawork.it/blog/come-costruire-una-dashboard-shell
> Markdown: https://ui.eneawork.it/blog/come-costruire-una-dashboard-shell.md

*2026-11-01*

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

## 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.

Il 1 novembre 2026 abbiamo letto /api/stats: 111.985 componenti, 1.556 blocchi, 12.808 icone e 1.472 librerie indicizzate. Lo stesso giorno docs/keyword-data.json, raccolto il 31 ottobre 2026 con la Stack Exchange API, riporta 2.861 voti sulla domanda CSS «Make a div fill the height of the remaining screen space»: è il problema di layout che una shell risolve una volta sola.

## 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.

## FAQ

### Quanto codice serve per una shell di dashboard?

Poche righe: un provider, una sidebar e un'area che scorre. Il lavoro vero sta nello stato della sidebar e nei contenuti, non nel layout.

### Meglio una sidebar fissa o collassabile?

Collassabile a icone sotto i 1024px, perché a quella larghezza il contenuto perde più spazio di quanto la navigazione ne guadagni.

### Dove metto lo stato aperto/chiuso della sidebar?

In un cookie letto dal server, così il primo paint è già corretto. localStorage va bene solo per un'app interamente client.

### Posso usare dashboard-01 in un progetto commerciale?

Sì, shadcn/ui è MIT e il codice viene copiato nel tuo repository. Controlla comunque le dipendenze che il blocco porta con sé.

### La shell deve gestire il caricamento?

Sì, con skeleton di altezza fissa. Se l'altezza cambia quando arrivano i dati, ogni navigazione produce un layout shift.