Migliori timeline blocks 2026: 15 sezioni verificate

I migliori timeline block del 2026 sono i 15 che il catalogo indicizza in questa categoria, distribuiti su 4 registry e contati il 1 novembre 2026.

La linea che non regge il contenuto

Una timeline è un elenco con una linea accanto, e quasi sempre quella linea è posizionata in assoluto. Funziona finché ogni voce ha la stessa altezza dell'esempio; al primo evento con tre righe di testo il puntino si stacca e la linea attraversa la data.

• La linea verticale è un elemento assoluto: con testi di lunghezza diversa si ferma prima della fine o sborda oltre l'ultimo evento.
• Le date hanno formati diversi, tra luglio 2025 e 07/2025, e la colonna sinistra si allarga a fisarmonica.
• Su mobile l'ordine si inverte per effetto di flex-direction, e la cronologia racconta il futuro prima del passato.
• Le etichette di anno fissate in alto coprono il primo evento della sezione quando si scorre.

Poi c'è la parte che nessuno misura: il peso degli eventi. Una timeline serve quando le distanze temporali contano, cioè quando tra un evento e l'altro passa un anno. Se gli eventi sono settimanali, la linea diventa una lista con decorazione superflua, e occupa il doppio dello spazio.

La tabella misurata

Tutte le righe stanno a un file. Le tre varianti di evilrabbit arrivano dallo stesso impianto con dati diversi: Company timeline, Journey timeline e la versione personale. Timeline di systaliko aggiunge un secondo registro, mentre le due glassmorphism di uitripled sono lo stesso blocco con basi diverse. Quindici sezioni, ma le idee sono meno.

Quali dati leggere prima di scegliere

Conta gli eventi che la pagina mostrerà davvero e quanto è lungo il più lungo: è lui a decidere l'altezza della riga e quindi la tenuta della linea. Guarda la forma dei dati, se un array di date e testi o una struttura annidata per anno. Decidi la direzione della cronologia, perché un curriculum e un piano di lancio non scorrono nello stesso verso. Infine chiediti se gli eventi arriveranno da un CMS: in quel caso la timeline deve accettare dati esterni, non un array scritto nel file.

• Eventi: otto voci si leggono in una schermata, venti richiedono raggruppamento per anno.
• Testo: oltre centoventi caratteri per voce conviene una card con titolo e dettaglio separati.
• Fonte: un array nel JSX va bene per una pagina istituzionale, non per un changelog.

Il limite che dichiaro

Le tre varianti di evilrabbit condividono la stessa struttura di dati: cambiare la forma degli eventi significa riscrivere il componente, non passargli un'altra prop. È un limite pratico che il conteggio a un file non mostra. Con quattro registry in tutta la categoria, inoltre, la scelta di stile è più stretta di quanto il numero di blocchi suggerisca: chi cerca una timeline orizzontale o a zig-zag non la trova qui.

La regola di decisione

Se gli eventi sono otto o meno e le date cadono a mesi o anni di distanza, la timeline verticale è la forma giusta e un blocco a un file basta. Se gli eventi superano i quindici o arrivano con continuità, la linea smette di aggiungere informazione e conviene un elenco raggruppato per anno, con le sezioni chiuse. La soglia è la distanza tra gli eventi: quando è uniforme e breve, la linea è decorazione.

Timeline o elenco datato

L'alternativa più onesta è un elenco con la data a sinistra e il testo a destra, senza linea e senza puntini. Si legge più in fretta, si adatta a qualsiasi lunghezza e non ha un elemento assoluto da mantenere. La timeline vince quando la scalarità è il messaggio, come nella storia di un'azienda o nelle tappe di un progetto; l'elenco vince quando gli eventi sono tanti e vicini. Un caso intermedio è la card espandibile per anno, che conserva il senso del tempo e riduce l'altezza.

Per gli eventi che dipendono dallo scorrimento, la guida a PerformanceObserver spiega come misurare l'effetto senza indovinare, mentre come aggiungere un blocco chiarisce cosa arriva con il comando del registry. Il confronto tra shadcn e MUI è utile se stai valutando di cambiare base ai componenti.

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

La categoria completa è in /blocks, filtrabile per fonte. Prova l'anteprima con un evento lungo il doppio degli altri: se la linea si spezza, hai già la risposta.