# Best hero blocks 2026: 51 verified sections 51 heroes from 6 registries, read as a performance problem: 84 files, 67 dependencies and two blocks sharing a name across publishers. With the budget to fix before choosing. > Page: https://ui.eneawork.it/blog/migliori-hero-blocks-2026 > Markdown: https://ui.eneawork.it/blog/migliori-hero-blocks-2026.md *2026-11-01* La hero è la prima schermata e quasi sempre l’elemento che il browser misura come LCP: conviene trattarla come una decisione di performance. Il catalogo contiene 51 sezioni hero da 6 registry, misurate il 1 novembre 2026, e la tabella le ordina per file perché il peso è la prima cosa che paghi. Quello che si rompe è il primo secondo. Un’immagine da 2400px servita a un telefono da 390px costa banda e ritarda il disegno; un titolo bianco sopra una foto chiara perde il contrasto appena la foto cambia; un’animazione d’ingresso che parte dopo l’idratazione sposta l’elemento più grande e peggiora il punteggio invece di migliorarlo. Nessuno di questi difetti si vede nell’anteprima del catalogo, che gira su una macchina veloce con la cache calda. ## Perché la hero decide l’LCP L’LCP misura quando il contenuto più grande sopra la piega è visibile: in una landing è quasi sempre l’immagine della hero o il titolo. Se l’immagine viene scoperta tardi, perché è un background CSS, perché è dentro un componente caricato in modo dinamico, perché non ha preload, il browser la scarica dopo il resto. Un blocco hero che usa un div con background-image ti obbliga a un lavoro extra per tornare a un elemento immagine con dimensioni dichiarate. ## 84 file e 67 dipendenze per 51 sezioni La categoria somma 84 file, cioè 1,6 per blocco, con 12 sezioni multi-file; le dipendenze npm dichiarate sono 67 e le registry dependency 89. Sono numeri alti per una sola schermata: una hero con varianti animate porta con sé una libreria di movimento e i suoi componenti, e quel costo lo paghi su ogni visita, non solo sulla home. Un blocco a un file con un’immagine e due testi non ha bisogno di niente di tutto questo. Conteggio del 1 novembre 2026 sui manifest di data/blocks.json: categoria dichiarata o dedotta dal titolo, file elencati, dipendenze npm e registry dependency. Il comando qui sotto restituisce le prime dieci righe della stessa categoria. ## La tabella, ordinata per file Le prime righe sono quelle che contengono più parti da adattare, non quelle che convertono meglio. La colonna Registry spiega perché: Shadcn Space pubblica hero con nomi commerciali e tre file, akash3444 pubblica sezioni più asciutte, flx pubblica varianti dello stesso schema. Chi ha fretta legge il nome, chi deve mantenere il codice legge il publisher. ## Il budget da fissare prima di scegliere Prima di aprire una preview, scrivi tre numeri: peso massimo dell’immagine hero, tempo massimo dell’animazione d’ingresso, contrasto minimo del testo sopra il media. Se il blocco non li rispetta senza modifiche, il tempo che risparmi copiandolo lo perdi a togliere quello che hai copiato. Un test onesto è caricare la pagina su Slow 3G e guardare se il titolo compare prima dell’immagine. curl "https://ui.eneawork.it/api/blocks/category/hero?limit=10" Le 51 righe dichiarano “see source”, quindi il permesso vive nel repository di chi pubblica. Le immagini di esempio sono spesso di terzi e non seguono la licenza del codice: sostituiscile prima di andare online. ## Il limite: la categoria nasce dal nome Un blocco entra in questa lista se il manifest dichiara hero oppure se la parola hero compare nel titolo. Una landing chiamata “Agency Page” con una hero dentro non viene contata, quindi il catalogo sottostima la categoria invece di gonfiarla. Il rovescio è che molti blocchi si chiamano hero-01, hero-02, hero-03 senza dire cosa contengono: il numero non è un’informazione, la preview sì. ## Regola di decisione Se la hero è il tuo LCP, prendi il blocco più semplice che dice cosa vendi e sostituisci lo sfondo con un img a dimensioni dichiarate e priorità alta. Se la hero deve mostrare il prodotto, scegli uno split e usa uno screenshot reale, non un mockup generico. L’alternativa è scriverla a mano: un titolo, un paragrafo, una CTA e un’immagine sono quattro elementi, e nessun blocco batte quel peso. Il blocco conviene quando porta varianti responsive e stati che non vuoi riscrivere, non quando porta solo decorazione. Le hero stanno su /blocks/category/hero, l’inventario su /blocks, e la Hero 01 di Shadcn Space ha la scheda qui. Per capire cosa alza l’LCP leggi lcp cosa lo peggiora, per le immagini immagini responsive con srcset, e per il confronto tra registry 21st.dev contro shadcnblocks. ## FAQ ### Quanti blocchi hero ci sono nel catalogo? 51 sezioni da 6 registry, misurate il 1 novembre 2026. Il numero conta i blocchi con hero nel manifest o nel titolo, quindi esclude landing che contengono una hero senza dichiararla. ### Perché una hero può rovinare l'LCP? Perché è di solito l'elemento più grande sopra la piega. Se l'immagine è un background CSS, viene scoperta tardi e il browser la scarica dopo il resto della pagina. ### Quante dipendenze npm porta una hero block? 67 in tutta la categoria su 51 blocchi. Le varianti animate sono la causa principale: portano una libreria di movimento che pesa su ogni visita. ### Meglio un'immagine o un gradiente nella hero? Dipende dal prodotto, ma il criterio è il contrasto: un gradiente controllabile è più sicuro di una foto chiara su cui il testo bianco sparisce. Un'immagine reale comunica di più se mostra il prodotto. ### Due blocchi con lo stesso nome sono lo stesso blocco? No. Hero 03 di Shadcn Space e Hero 03 di akash3444 sono publisher diversi con file diversi: nella tabella conta la colonna Registry, non il nome.