shadcn/ui vs Chakra UI: due modi di possedere i componenti

shadcn/ui e Chakra UI non sono due librerie concorrenti: sono due modi opposti di possedere i componenti. shadcn/ui copia il codice nel tuo repository, Chakra UI resta un pacchetto che installi e aggiorni. La differenza si vede nei due anni successivi, non nella prima schermata.

Il catalogo EneUI indicizza 61 componenti per shadcn/ui e 118 per Chakra UI. Il doppio dei componenti non vale il doppio: Chakra li mantiene e ne decide le API, shadcn ti lascia il codice e la manutenzione.

Due modelli, non due liste

Chakra UI arriva con tema, token e componenti già coerenti tra loro: una dashboard interna si costruisce in giorni. shadcn/ui non arriva con niente di tutto questo, perché il tema è un file CSS che scrivi tu.

Cosa cambia quando il design non è quello del fornitore

Con Chakra il tema passa da un provider e da un oggetto di token. Se il design ha una scala diversa, estendi quell’oggetto o sostituisci i valori: il componente non cambia, cambia la configurazione che il fornitore ha previsto.

Con shadcn il tema sono variabili CSS e classi Tailwind. Se il design cambia, cambi il file e non l’API: nessun componente sa quale marca lo sta usando. È più lavoro all’inizio e meno attrito dopo.

Il test che decide in un pomeriggio

# 1. i numeri del catalogo, non le stelle
curl -s https://ui.eneawork.it/api/lib/shadcn | jq -r .title
curl -s https://ui.eneawork.it/api/lib/chakra-ui | jq -r .title

# 2. quanti file entrano davvero nel repository
npx shadcn@latest add button dialog card
git status --short

# 3. quante dipendenze porta Chakra in un progetto nuovo
npm install @chakra-ui/react
npm ls --depth=0

Il secondo passaggio è il test vero: shadcn aggiunge file, Chakra aggiunge righe a `package.json`. Guarda `git status` e chiediti chi rivedrà quel codice tra un anno.

Quando Chakra UI conviene

Chakra conviene quando il team non ha capacità di design e la coerenza vale più della personalizzazione. Conviene anche quando serve una dashboard con form, tabelle e stati di errore in tempi brevi: 118 componenti coprono più casi di 61 e le API sono documentate dal fornitore.

Il limite da mettere per iscritto

Limite dichiarato di shadcn/ui: non esiste un percorso di aggiornamento. Quando Radix o Tailwind cambiano un’API, il fix è un diff che applichi a mano sui file copiati. Con 61 componenti il debito è gestibile; con un tema molto personalizzato cresce a ogni release.

Licenze e dipendenze

Entrambe sono MIT, quindi la licenza non decide. Decide il peso delle dipendenze: Chakra porta un motore di stile e primitive, shadcn porta Radix, `class-variance-authority` e `tailwind-merge`. Nessuna delle due è gratis in tempo di manutenzione.

Il record di partenza è /components/lib/shadcn, il confronto diretto è /components/lib/chakra-ui e i form si cercano in /components/cat/form. Per scegliere con criteri generali leggi come scegliere una libreria UI e copy-paste o headless; il confronto misurato tra alternative è in alternative a MUI.