Design system
Component library, UI kit, design system: le differenze
Component library, UI kit e design system consegnano cose diverse: codice, file di design e regole. Ecco come distinguerli prima di comprare.
In sintesi
- La component library è codice con API e versioni; il UI kit è un insieme di file di design.
- Il design system è la regola che tiene insieme codice, file e documentazione.
- Il test decisivo è chi riceve il file dopo: sviluppatore, designer o entrambi.
Una component library è codice distribuibile, un UI kit è un insieme di file di design, un design system è l'insieme di regole che tiene insieme entrambi. Le tre parole descrivono artefatti diversi e si comprano in momenti diversi.
La tabella che chiude la discussione
| Artefatto | Cosa consegna | Chi lo usa |
|---|---|---|
| Component library | Codice con API, versioni e dipendenze | Sviluppatori |
| UI kit | File Figma con componenti e varianti | Designer |
| Design system | Token, componenti, documentazione e governance | Tutto il team |
Il test del passaggio di consegne
Chiediti chi riceve il file dopo. Se lo sviluppatore deve ricostruire ogni stato a occhio, hai comprato un UI kit e lo hai chiamato design system. Se il designer non trova una variante, hai comprato una libreria.
Dove la differenza si vede in pratica
EneUI indicizza 111.985 componenti da librerie come Magic UI e 1.556 blocchi. Apri un record e leggi i campi: file, dipendenze, licenza. Un UI kit Figma non ha dipendenze npm.
Contare le opzioni, non le promesse
curl -s https://ui.eneawork.it/api/statsL'endpoint restituisce il conteggio corrente in JSON. Il numero è verificabile: chiamalo prima di citare un catalogo in una presentazione.
Licenza
Una component library porta una licenza per riga di codice: MIT su shadcn/ui e Radix UI, MIT su MUI Core mentre MUI X è a pagamento, MIT su Magic UI. Un UI kit porta una licenza d'uso sui file Figma, che spesso vieta la ridistribuzione. Sono contratti diversi e vanno letti separatamente.
La limitazione
Comprare i tre artefatti insieme non li rende coerenti. Un design system senza un processo di revisione accetta qualunque contributo e in sei mesi contiene tre pattern per la stessa azione.
Dove continuare
La scelta operativa è in come scegliere una libreria UI, il formato di distribuzione in che cos'è un registry. Il confronto misurato tra librerie React è in librerie UI React 2026 misurate.
Domande frequenti
UI kit e design system sono la stessa cosa?
No. Un UI kit è un insieme di file di design; un design system include regole, token, componenti e un processo di manutenzione.
Posso usare un UI kit senza design system?
Sì. Un UI kit basta per un prototipo o per un sito singolo; il costo arriva quando due team devono produrre la stessa interfaccia.
Una component library è un design system?
No. La libreria è la parte di codice; senza token documentati e regole d'uso resta un elenco di componenti.
Cosa chiedo in licenza quando compro un UI kit?
Chiedi se puoi usarlo in prodotti commerciali, se puoi modificarlo e se puoi ridistribuirlo. Le tre risposte sono spesso diverse.
Da quale artefatto inizio?
Dal design system se hai più di un prodotto, dalla component library se hai solo codice da scrivere. Il UI kit arriva quando serve un prototipo.