Blocks
5 blocchi per una pagina dashboard admin
Una dashboard admin deve rispondere a «va tutto bene?» in cinque secondi. Cinque categorie, l'ordine tra shell e dati, i guasti di chart e tabelle, i conteggi reali del catalogo.
In sintesi
- La shell (sidebar e topbar) si sceglie prima dei widget: decide lo spazio dei dati.
- Un chart senza stato vuoto non è pronto per la produzione.
- Tredici blocchi table: la paginazione server resta da scrivere.
Una dashboard admin deve rispondere a «va tutto bene?» in cinque secondi, prima che l'utente legga un'etichetta. Il catalogo indicizza 43 blocchi dashboard, 13 table, 75 chart, 27 sidebar e 8 settings, letti il 2026-11-01 dalle pagine categoria.
I numeri sono conteggi di record per categoria, misurati lo stesso giorno sulle pagine pubbliche. La sproporzione è il dato interessante: 75 chart contro 13 table significa che il catalogo copre bene la parte visiva e molto meno la parte noiosa, che è quella che occupa lo schermo.
Cosa deve fare la pagina
L'utente di una dashboard arriva con una domanda operativa, non per esplorare. Deve vedere lo stato in alto, il dettaglio sotto e un'azione per riga. La pagina deve restare leggibile con 200 righe e con zero righe, e non deve chiedere un refresh manuale per accorgersi che un job è fallito.
- Tre numeri di stato in alto, ognuno con la sua unità e il suo periodo.
- Una tabella che regge 200 righe con header fisso e azioni a destra.
- Uno stato vuoto che spiega come popolare i dati.
- Un indicatore di aggiornamento: ora dell'ultimo dato, non solo un'icona.
L'ordine dei blocchi
| Sezione | Ruolo nella pagina | Blocchi disponibili |
|---|---|---|
| dashboard | dare la cornice e la navigazione | 43 |
| table | elencare righe con azioni | 13 |
| chart | mostrare l'andamento nel tempo | 75 |
| sidebar | tenere la navigazione sempre visibile | 27 |
| settings | permettere di cambiare preferenze | 8 |
Sidebar e dashboard insieme sono la shell: la prima decide quanta larghezza resta, il secondo riempie quella larghezza. Se scegli il widget prima della shell, scopri tardi che la sidebar da 27 blocchi occupa 280 px e il chart non ci sta. Chart e table vengono dopo, settings per ultimo, perché è la sezione che si visita una volta al mese.
I blocchi da cui partire
Le tabelle riportano blocco, registry, file e categoria. Un dashboard da 11 file include di solito la griglia dei KPI e la topbar; uno da 3 file è un riquadro singolo. La colonna categoria è quella dichiarata dal registry: un blocco «data table» da 24 file è la scelta più densa del catalogo e va letta prima di installarla.
Blocchi dashboard
| Blocco | Registry | File | Categoria |
|---|---|---|---|
| dashboard-01 | shadcn/ui | 11 | dashboard |
| sidebar-15 | shadcn/ui | 11 | sidebar |
Blocchi table
| Blocco | Registry | File | Categoria |
|---|---|---|---|
| Data Table Core | niko-table | 24 | data |
| Data Table | niko-table | 16 | data |
Blocchi chart
| Blocco | Registry | File | Categoria |
|---|---|---|---|
| Chart 01 - Sales Performance Bar Chart | Shadcn Space | 2 | chart |
| Chart 02 - Earnings Pie Chart | Shadcn Space | 2 | chart |
Blocchi sidebar
| Blocco | Registry | File | Categoria |
|---|---|---|---|
| sidebar-15 | shadcn/ui | 11 | sidebar |
| sidebar-10 | shadcn/ui | 8 | sidebar |
Cosa si rompe in produzione
Le dashboard si rompono sui dati veri: serie vuote, numeri a sette cifre, nomi di cliente lunghi, fusi orari diversi. Il chart che nell'anteprima ha dodici punti ordinati riceve una serie con un buco e disegna una linea retta dove manca il dato, che è peggio di non disegnare nulla. La tabella con header non fisso perde la testata dopo tre scroll.
- Serie vuota: il chart mostra un'etichetta rotta sull'asse invece di uno stato vuoto.
- Numeri sopra il milione che sfondano la card KPI a 320 px.
- Sidebar che scrolla con la pagina e porta via le voci in basso.
- Settings senza conferma: il cambio di tema si perde al reload.
curl "https://ui.eneawork.it/api/blocks/category/chart?limit=10"La risposta elenca dieci chart con fonte e file: leggila per capire quale libreria di grafici porta ogni blocco. Due blocchi con la stessa forma possono dipendere da pacchetti diversi, e quello è il vero costo di installazione in un progetto che ha già un chart.
Un limite da dichiarare
I 13 blocchi table sono tabelle di presentazione, non data grid: nessuno porta ordinamento server, selezione multipla o paginazione con cursore. Per un admin vero la tabella è il pezzo più costoso del progetto e il catalogo lo copre meno di ogni altra categoria della pagina.
Nel catalogo: dashboard con shell, sidebar con stato e tutti i blocchi. Le guide: dashboard Tailwind misurate, dark mode senza doppio sistema e peso di una libreria UI.
Domande frequenti
Meglio partire dalla sidebar o dal widget della dashboard?
Dalla sidebar: decide la larghezza utile e quindi quanti KPI entrano in una riga. Un widget scelto prima della shell costringe a rivedere la griglia quando la sidebar si rivela più larga del previsto, e la revisione tocca ogni card.
Perché ci sono 75 blocchi chart e solo 13 table?
Perché i chart sono facili da variare e difficili da sbagliare in vetrina, mentre una tabella utile richiede ordinamento, selezione e stati. Il catalogo riflette cosa i registry pubblicano, e pubblicano più grafici che griglie di dati.
Un blocco settings è indispensabile in una dashboard?
No, con 8 blocchi disponibili è la categoria più povera e la meno visitata. Se il prodotto ha solo tema e lingua, quelle due voci stanno in un menu, non in una pagina: risparmi un blocco e una rotta da mantenere.
Come gestisco il cambio di tema nella dashboard?
Con token, non con classi condizionali per componente. Il blocco chart va verificato due volte, in chiaro e in scuro, perché le scale di colore dei grafici sono spesso fisse e diventano illeggibili su fondo scuro.
Quante righe deve reggere la tabella prima di cambiare approccio?
Oltre le 100 righe conviene una data grid con paginazione server, non un blocco di presentazione. Sotto le 100, un blocco table con header fisso e ricerca locale è più semplice e non richiede una dipendenza in più.