Migliori pricing blocks 2026: 41 sezioni verificate

I migliori pricing block del 2026 sono i 41 che il catalogo indicizza in questa categoria, firmati da 11 registry e contati il 1 novembre 2026.

Cosa si rompe quando il listino va online

In anteprima la sezione regge. In produzione la raggiungono tre cose che l'anteprima non simula: un listino che cambia, un cliente che paga in un'altra valuta e un test sul prezzo annuo. È lì che due file diventano un debito, perché la tariffa vive dentro il markup invece che in un dato. Il componente mostra il prezzo, non lo calcola.

• L'importo è una stringa nel JSX: cambiare valuta o mostrare l'imposta significa aprire il file e riscriverlo.
• Il cambio mensile/annuale muove etichetta e numero insieme, quindi ogni prova sul prezzo tocca il codice.
• Le card con tre voci e quelle con otto crescono in modo diverso e il bottone smette di allinearsi.
• L'evidenza del piano consigliato resta accesa anche per chi ha già una licenza attiva.

La tabella misurata

Le righe seguono il numero di file dichiarati dal registry. Due file vogliono dire sezione più card del piano; un file vuol dire componente unico. La colonna categoria segnala anche quando il publisher ha etichettato la sezione come custom: Custom Pricing e Custom Pricing Design Demo mostrano un prezzo a preventivo, non un listino, e la distinzione conta prima di adottarli.

Quali dati leggere prima di scegliere

Tre letture vengono prima del colore. La prima è quanti piani dovrai mostrare oggi e tra sei mesi; la seconda è dove abita il prezzo, in una prop o in una costante; la terza è se il blocco possiede già il cambio di intervallo. Nessuna delle tre appare nell'anteprima, tutte e tre decidono se il lavoro finisce in un pomeriggio o in una settimana.

• Piani: due o tre colonne stanno in griglia, cinque no, e la quarta card va a capo.
• Origine del prezzo: con una prop lo colleghi all'API, con una costante resti su una vetrina.
• Intervallo: senza switch il prezzo annuo diventa un badge, che è una scelta di prodotto.

Il limite che il catalogo non misura

La tabella conta i file, non le dipendenze. Un blocco a due file può trascinare un pacchetto di icone, un componente di switch o una libreria di animazioni, e quel costo non compare nella colonna. Prima di adottarlo apri la pagina del blocco e leggi il comando del registry: se installa più di due pacchetti oltre a quelli che hai già, la manutenzione supera il tempo risparmiato.

La regola di decisione

Con tre piani, prezzi fissi e una sola valuta qualsiasi riga della tabella va bene: prendi il blocco da un file, passagli il prezzo e hai chiuso. Con un prezzo a consumo, più valute o uno sconto annuale calcolato, il blocco non è il punto di partenza: costruisci sopra un componente di tabella e usalo come riferimento visivo. La soglia è una sola, il calcolo: quando l'importo dipende da qualcosa che non è una costante, il markup non basta più.

Blocco o primitiva: il confronto

L'alternativa da provare è comporre la sezione con Card, Badge e Button sui token del progetto. La prima volta costa un'ora invece di dieci minuti, e ripaga al secondo listino: nessun colore da rimappare, nessuna altezza da correggere, un solo componente di prezzo. Il blocco vince quando il design è deciso e non cambierà per un anno, come Pricing 01 di Shadcn Space; la primitiva vince quando il prezzo è un dato che si muove, come spiegato nella guida al pricing table in React.

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

L'elenco intero vive in /blocks, filtrabile per categoria e fonte. Se ti interessa come il catalogo verifica ogni sezione, leggi la preview dei blocchi; se invece stai ancora decidendo da quale marketplace partire, il confronto tra 21st.dev e shadcnblocks mette a confronto licenze e numero di file.