Design system
Temi shadcn gratis o premium: cosa cambia davvero
Un tema è un insieme di token, non un catalogo di componenti. Prima di pagare, controlla cosa contiene, con quale licenza e quanto è facile uscirne.
In sintesi
- Un tema gratuito e uno premium spesso differiscono per cura dei token, non per numero di componenti.
- Verifica sempre licenza, file inclusi, supporto dark mode e contrasto prima di comprare.
- Il tema non deve contenere codice Pro nascosto: se il codice è a pagamento, deve essere dichiarato.
“Tema shadcn” viene usato per tre cose diverse: un set di variabili CSS, un insieme di componenti già stilizzati, un template completo. Il prezzo cambia perché cambia il contenuto, non perché uno sia più bello.
Cosa contiene un tema
- Variabili CSS: background, foreground, primary, border, ring, radius.
- Una mappatura per il tema scuro.
- Eventualmente font e scala tipografica.
- Eventualmente componenti o blocchi già adattati.
Un tema serio si riconosce da qui: i token hanno nomi di ruolo, non di colore. `--ui-surface` è un tema; `--gray-100` è una palette.
Gratis vs premium: la tabella onesta
| Voce | Tema gratuito | Tema premium |
|---|---|---|
| Token | Di solito presenti | Attesi, con più varianti |
| Dark mode | A volte incompleta | Attesa e documentata |
| Componenti inclusi | Raramente | Spesso, ma controlla quali |
| Licenza | MIT o simile | Commerciale, per progetto o per team |
| Aggiornamenti | Variabili | Contratto da leggere |
| Supporto | Community | SLA o canale dedicato |
Il punto non è “premium è meglio”. È che il premium deve dichiarare cosa aggiunge. Se l’unica differenza è una palette, il valore è nel tempo risparmiato, non nel codice.
Le cinque verifiche prima di pagare
- Licenza: puoi usarlo in più progetti? Per quanti sviluppatori?
- File: cosa ricevi esattamente? Token, componenti, blocchi, Figma?
- Dark mode: è completa o solo invertita?
- Contrasto: il testo secondario passa 4.5:1 su entrambi i temi?
- Uscita: se smetti di pagare, continui a usare ciò che hai scaricato?
/* Un tema è questo: ruoli, non colori */
:root {
--ui-bg: 0 0% 100%;
--ui-fg: 240 10% 4%;
--ui-border: 240 6% 90%;
--ui-accent: 221 83% 53%;
}
.dark {
--ui-bg: 240 10% 4%;
--ui-fg: 0 0% 98%;
--ui-border: 240 4% 16%;
--ui-accent: 217 91% 60%;
}Il confine con i blocchi Pro
Un tema può essere gratuito mentre i blocchi sono a pagamento. È un modello legittimo, a una condizione: il confine deve essere visibile prima dell’acquisto. La preview resta libera, il codice si sblocca solo dopo il pagamento e il gate è lato server.
Su EneUI i blocchi sono 1.556 da 28 registry (31 ottobre 2026): la preview è sempre gratuita, il codice è Pro e viene servito solo a chi ha accesso. Nessun badge “Pro” nascosto sulla card: il confine appare nel tab Code, dove serve.
Quando non serve un tema
Se hai già un design system con token semantici, un tema pronto aggiunge una seconda verità. In quel caso conviene copiare solo la mappatura dei ruoli e mantenere la tua palette.
Domande frequenti
Un tema premium include i componenti?
Non sempre. Leggi la lista dei file: alcuni temi includono solo variabili CSS e font, altri aggiungono componenti o blocchi.
Posso usare un tema gratuito in un prodotto commerciale?
Dipende dalla licenza del tema, non dal fatto che sia gratuito. MIT e licenze simili lo consentono; altre no.
Come verifico il contrasto di un tema?
Misura i token di testo e bordo con un contrast checker, in entrambi i temi. Il testo secondario è il primo a fallire.
Meglio tema pronto o design system interno?
Se il prodotto è piccolo, il tema pronto fa risparmiare. Se il prodotto ha più superfici e team, un layer semantico interno evita due verità.
Il tema può rompere i componenti esistenti?
Sì, se cambia i nomi dei token o il valore di `radius`. Applica il tema su un ramo e confronta le schermate principali.