I migliori blocchi hero per shadcn/ui, con preview live

Una hero si sceglie per pattern, non per screenshot: il pattern decide cosa deve credere il visitatore prima di scorrere. Nel catalogo EneUI ci sono 51 hero da 6 registry, misurate il 1 novembre 2026, e ognuna porta con sé un’idea di cosa mettere al centro della prima schermata.

Cinque pattern coprono quasi tutti i casi reali. Non sono categorie del catalogo, il catalogo non ha un campo pattern, ma un raggruppamento che ho fatto leggendo le anteprime: titolo più CTA più prova, hero con media, hero con gradiente, hero split, hero minimal. Scegliere il pattern prima del blocco evita il ciclo più costoso, quello in cui si copia una hero bella e si scopre dopo che non regge il proprio messaggio.

I cinque pattern che funzionano

La tabella mette in chiaro il rischio di ogni pattern: non cosa lo rende bello, ma cosa lo fa fallire. Se il rischio corrisponde a un problema che hai già avuto, quel pattern è quello giusto da evitare o da correggere prima di installarlo.

La hero si giudica in una schermata

A 390px, con la barra del browser e la tastiera chiusa, la hero deve entrare senza che il visitatore indovini cosa vendi. Il titolo può andare a capo due volte; il sottotitolo deve restare leggibile a 16px reali; la CTA primaria deve stare sopra la piega o a una scrollata naturale, non a tre. Se devi spiegare la hero con un paragrafo aggiuntivo, il titolo non sta facendo il suo lavoro.

Il crop mobile è la seconda verifica. Un’immagine hero pensata in 16:9 su un telefono diventa una fascia: se il soggetto è ai lati, sparisce. Apri la preview con la vista mobile del browser e controlla cosa resta. Se il blocco usa un video, guarda il poster da solo: chi ha prefers-reduced-motion o una connessione lenta vedrà solo quello.

Contrasto, gerarchia, movimento

• Contrasto del titolo almeno 3:1 e del sottotitolo 4.5:1, misurato nel punto più chiaro dello sfondo.
• Una sola CTA primaria: la secondaria è ammessa solo se porta a un percorso diverso.
• Animazione d’ingresso sotto i 300ms, con fallback per chi riduce il movimento.
• Il titolo resta un h1 unico: due h1 nella hero confondono la struttura della pagina.
• Il focus da tastiera deve essere visibile sulla CTA, non solo al passaggio del mouse.

Scegliere tra due hero che ti piacciono

Scrivi la frase che la hero deve far credere al visitatore: “questa azienda risolve il mio problema in un giorno”. Poi guarda quale dei due blocchi rende quella frase evidente senza leggere il resto. Se serve un secondo paragrafo per capirla, il pattern è sbagliato, non il testo. Questo criterio elimina in un minuto le hero che piacciono solo perché hanno un’animazione riuscita.

Un limite di questa lista

La mappatura tra blocchi e pattern è una mia lettura delle anteprime, non un campo del catalogo: un blocco può stare in due pattern e la tabella ne sceglie uno. Inoltre i cinque pattern coprono le hero di prodotto e servizio, non le hero editoriali con titolo grande e nessuna CTA, che esistono e funzionano in contesti di documentazione o portfolio.

Alternativa: nessun blocco

Se la hero deve solo dire cosa fai e portare a una CTA, scriverla costa meno che adattarne una: un h1 con clamp per la dimensione, un paragrafo, un link e un’immagine con dimensioni dichiarate. Il blocco conviene quando porta le varianti che non vuoi riscrivere, menu mobile, stato sticky, griglia a due colonne che collassa, oppure quando il team non ha nessuno che tocchi il CSS. Il confronto tra copiare e comporre con primitive è lo stesso che vale per ogni altra sezione.

Un ultimo test, il più economico: mostra la hero a qualcuno che non conosce il prodotto per cinque secondi, poi chiedi cosa vende e a chi. Se la risposta è sbagliata, il problema non è il blocco ma il pattern: una hero split con due messaggi produce sempre risposte incerte, mentre una hero minimal con una sola frase viene ripetuta quasi alla lettera. Questo test vale più di dieci confronti tra anteprime, perché misura la comprensione e non il gusto.

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

Le hero stanno su /blocks/category/hero e l’inventario su /blocks; un esempio con tre file è Hero 01 di Shadcn Space. Per il contrasto misurato leggi gli strumenti sul contrasto, per il titolo che scala la tipografia con clamp, e per il confronto tra copiare un blocco e comporre a mano copy-paste contro headless. La guida del catalogo Hero sections with backgrounds copre sfondi, gradienti e video.