Migliori onboarding blocks 2026: 9 sezioni verificate

L’onboarding serve a portare una persona nuova al primo risultato utile, non a mostrare un tour. Il catalogo conta 9 blocchi da 3 registry, misurati il 1 novembre 2026, e sette vengono da un solo publisher: è un campione di una scuola di design, non di un mercato.

I guasti arrivano quando il flusso incontra la vita reale. L’utente compila due passaggi, ricarica la pagina e torna al primo; preme il tasto indietro del browser ed esce dal flusso invece di tornare al passo precedente; il “Salta” non salva niente, quindi il tour si ripresenta al login successivo. Sono difetti di stato e di URL, non di disegno, e nessuna anteprima li mostra.

Perché il refresh rompe tutto

Un blocco a un file tiene i passaggi in memoria: un indice, magari uno useState. Finché l’utente resta nella pagina funziona; appena ricarica, l’indice torna a zero. Per resistere al refresh servono tre cose che il blocco per definizione non ha: un URL che cambia a ogni passo, uno stato salvato sul server e una regola per riprendere dal punto giusto. Se non ci sono, il wizard è una demo.

Sette righe su nove, un solo autore

Ephraimduncan firma sette blocchi con nomi espliciti, workspace setup, steps with progress, accordion, activity feed, timeline, e sono tutti a un file; flx contribuisce con un dialog di benvenuto, 1st-pouf con una pagina. In totale 9 file, 7 dipendenze npm e 20 registry dependency: il peso è basso, la varietà è quella di una sola mano, e due dei sette sono varianti della stessa idea di progressione.

La tabella, ordinata per file

Con un file per blocco la colonna numerica non ordina nulla: qui conta il nome, che dice il tipo di flusso. “Workspace setup” chiede dati e serve un form; “accordion” e “timeline” sono contenuti da leggere; “welcome” è un dialog di primo accesso. Sono tre problemi diversi e richiedono tre decisioni diverse sullo stato.

Le prove che smascherano un onboarding

Compila il secondo passaggio, ricarica e guarda dove torni. Poi premi indietro e verifica se esci dal flusso o torni al passo prima. Poi salta e ricarica: se il tour ricompare, il “Salta” non ha salvato niente. Infine attraversa i passaggi con uno screen reader: il cambio di passo deve essere annunciato, e l’indicatore di progresso deve dire a che punto sei, non solo colorare una barra.

• URL che riflette il passo, così il tasto indietro funziona.
• Stato salvato sul server e ripreso al login, non solo in memoria.
• L’indicatore di progresso ha un testo e aria-current sul passo attivo.
• Ogni passo si può saltare o l’intero flusso si può chiudere senza perdere l’account.

curl "https://ui.eneawork.it/api/blocks/category/onboarding?limit=10"

Il limite: presentazione, non persistenza

Nessuno di questi blocchi contiene la logica che serve a un onboarding vero: sono schermate. Un blocco a un file non può includere anche il salvataggio dei passaggi, la ripresa al login e il calcolo di cosa mostrare a chi ha già completato. La categoria, inoltre, è dedotta dal titolo, quindi un wizard chiamato “Setup” finisce altrove e un dialog di benvenuto entra qui pur non essendo un percorso a passaggi.

Regola di decisione

Fino a tre passaggi, tutti saltabili, un dialog va bene: interrompe una volta e non richiede URL. Oltre i tre, o se un passaggio raccoglie dati che devono sopravvivere al refresh, serve una route dedicata con stato sul server e un passo nell’URL. L’alternativa è non fare un wizard: una checklist nella dashboard, con tre voci da completare, ottiene lo stesso risultato senza bloccare l’utente, e la usano prodotti che devono far vedere valore subito. Il blocco conviene quando porta un disegno di progresso che non vuoi ricostruire, non quando deve gestire lo stato al posto tuo.

I blocchi stanno su /blocks/category/onboarding, l’inventario su /blocks, e “Onboarding Steps with Progress” ha la scheda qui. Per lo stato di un form a più passaggi leggi lo stato nei form multi-step, per l’implementazione con shadcn il multi step form con shadcn, e per il confronto tra copiare e comporre copy-paste contro headless.