shadcn/ui vs Mantine: design system pronto o codice tuo

Mantine conviene quando vuoi un design system completo e mantenuto, shadcn/ui quando vuoi possedere il codice e il tema. Il numero di componenti non è il criterio: 119 contro 61 dice quanto il fornitore copre, non quanto costerà mantenerlo.

I due record del catalogo EneUI misurano anche il peso: Mantine occupa 1.606.105 byte di sorgente per 119 componenti, shadcn/ui 242.735 byte per 61. Per componente sono 13.497 byte contro 3.979, quindi Mantine scrive 3,4 volte più codice per ogni componente che offre.

La differenza che si paga in ore

Il conflitto del primo giorno

Mantine porta un foglio di stile globale e un reset. Tailwind, se non lo disattivi, porta Preflight. Se Preflight finisce dopo `@mantine/core/styles.css`, i componenti Mantine perdono margini, bordi e dimensioni dei controlli. La domanda più votata sul tag `mantine` riguarda esattamente questo ordine.

npm install @mantine/core @mantine/hooks
npm view @mantine/core version

# l'ordine nel bundle: Preflight prima degli stili Mantine
rg -n "@mantine/core/styles.css|tailwindcss" src/main.tsx src/styles.css

# il record di catalogo, non il README
curl -s https://ui.eneawork.it/api/lib/mantine | jq -r .title

L’ordine si controlla nell’entry point, non nel componente. Se gli stili Mantine arrivano prima di Preflight, il reset di Tailwind vince sui controlli e il bug sembra un problema di tema.

Il test sul progetto vero

• Una schermata: un form con validazione, un dialog e una tabella. Sono i tre casi in cui un design system si vede.
• Un tema: cambia il colore primario e il raggio dei bordi in entrambe le ipotesi e conta i file toccati.
• Un aggiornamento: simula un upgrade di major version. Mantine richiede una release note, shadcn richiede un diff.

Se il tema si cambia in un file e la schermata resta coerente, il modello copy-paste regge. Se ogni modifica richiede di leggere la documentazione del provider, Mantine sta già facendo il lavoro per te.

Quando Mantine conviene

Mantine conviene quando il prodotto ha bisogno di molti componenti e il team è piccolo. 119 componenti con API coerenti, un provider unico e un preset PostCSS sono meno lavoro di 61 componenti da vestire a mano. Conviene anche quando il design è già vicino al default e nessuno chiede un’identità visiva forte.

Il limite da mettere per iscritto

Limite dichiarato di Mantine: il foglio di stile è parte del contratto. L’ordine di importazione, il preset PostCSS e le variabili del provider sono condizioni che devi mantenere in ogni build. Se il progetto usa anche Tailwind, quel confine va documentato, altrimenti ogni nuovo entry point può rompere i controlli.

Licenze e dipendenze

Mantine è MIT, come shadcn/ui: la licenza non decide. La differenza è nelle dipendenze: Mantine porta `@mantine/core`, `@mantine/hooks` e il preset PostCSS, shadcn porta Radix e tre utility. Entrambe richiedono React 18 o superiore.

Il record da cui partire è /components/lib/shadcn, il confronto è /components/lib/mantine e le dashboard si cercano in /components/cat/dashboard. Per il criterio generale leggi come scegliere una libreria UI, per la terminologia UI kit, component library e design system; il confronto misurato tra alternative è in alternative a MUI.