# Pricing tables in 10 minutes: React component or from scratch?

A pricing table is not a price grid, it is a decision. Here is when to install a component, when to build one from scratch, and what most tables forget.

> Page: https://ui.eneawork.it/blog/pricing-table-react-10-minuti
> Markdown: https://ui.eneawork.it/blog/pricing-table-react-10-minuti.md

*2026-10-31*

Una pricing table è una pagina di decisione. Il visitatore non sta leggendo un listino: sta cercando di capire quale piano è per lui, quanto rischia e cosa succede dopo. Se la tabella non risponde a queste tre domande, il numero di colonne non conta.

Puoi partire da un componente del catalogo o scriverla da zero. La scelta giusta dipende da quante variabili hai: piani, valute, tasse, trial, upgrade, downgrade, team seats.

## Prima la decisione, poi la griglia

## Il componente pronto vs la tabella da zero

## I tre stati che quasi tutti dimenticano

Loading: la tabella non deve saltare quando arrivano i prezzi. Errore: se il checkout non risponde, il pulsante deve dire cosa fare. Renewal: l’utente deve sapere quando verrà addebitato e come disdire. Una pricing table che ignora questi tre stati è un mockup.

Apri la pagina a 390px, disabilita JavaScript e prova a capire i prezzi. Se non ci riesci, la tabella dipende troppo dal client.

## Una base React leggibile

Se scegli il componente, apri la scheda e controlla che il piano evidenziato sia un dato, non un colore hard-coded. Se scegli da zero, tieni i piani in un array e rendering in una mappa: aggiungere un piano non deve significare copiare tre blocchi di JSX.

const plans = [ { id: "free", name: "Free", price: 0, featured: false }, { id: "pro", name: "Pro", price: 24, featured: true }, { id: "team", name: "Team", price: 79, featured: false }, ]; export function Pricing({ plans }) { return ( {plans.map((plan) => ( {plan.name} {plan.price} € / mese ))} ); }

Per i pattern completi, piano centrale, toggle mensile/annuale, FAQ e CTA finale, usa le guide Pricing table designs e Monthly/annual billing toggles.

## FAQ

### Quanto tempo serve per una pricing table?

Con un componente pronto, 10–20 minuti. Da zero, mezza giornata se includi stati, mobile e collegamento al checkout.

### Meglio tre o quattro piani?

Tre piani sono più facili da confrontare. Il quarto ha senso solo se aggiunge un segmento reale, non se serve a far sembrare il piano centrale più conveniente.

### Dove metto il toggle mensile/annuale?

Sopra le colonne, con il risparmio visibile e senza cambiare l’altezza della tabella quando cambia il periodo.

### Il prezzo deve arrivare dal server?

Sì, se cambia per paese, valuta o promozione. Non duplicare i prezzi nel client: il server è la fonte.

### Posso usare un componente del catalogo in un progetto commerciale?

Controlla la licenza mostrata sul record. EneUI riporta la licenza dichiarata a monte; se non è chiara, chiedi prima di spedire.