Il problema è sempre lo stesso: devi costruire un'interfaccia che funzioni, sia accessibile e non ti faccia perdere tre settimane a scrivere aria-* a mano. Magari hai già provato una libreria UI pronta all'uso — Material UI, Ant Design, Chakra — ma dopo due giorni ti sei ritrovato a combattere con classi custom che sovrascrivono lo stile di default, bundle gonfio e un look che sa di "clone di template".
Noi, di Meteora Web, ci siamo passati. Su progetti reali con clienti che pretendono tempi stretti e risultati solidi, abbiamo testato decine di approcci. La combinazione shadcn/ui + Radix + Tailwind è quello che usiamo oggi per la maggior parte dei nostri front-end. E funziona perché non è una libreria nel senso classico. Te lo spieghiamo subito.
Perché shadcn/ui e Radix invece di una libreria UI tradizionale?
Shadcn/ui (scritto in minuscolo, si legge "shad-cn") non è un pacchetto npm che installi e importi. È un sistema di componenti che copia il codice sorgente direttamente nel tuo progetto. Letteralmente: esegui un comando, lui ti crea i file TSX/JSX e CSS nel tuo components/ui. Tu ne diventi il proprietario — puoi modificarli, ristrutturarli, eliminarli. Niente dipendenze a vita. Niente override forzati.
Sotto il cofano, ogni componente di shadcn/ui si appoggia a Radix UI, una libreria di componenti headless (senza stile) certificata WAI-ARIA. Radix si occupa di tutta la logica di accessibilità: focus management, keyboard navigation, role, aria attribute. Tu ci metti sopra il tuo stile Tailwind, e il gioco è fatto.
Sponsored Protocol
Il vantaggio concreto per il tuo stack
- Accessibilità senza pensieri: ogni modale, dropdown, tooltip, dialog è già conforme alle linee guida WCAG. Non devi studiare le specifiche ARIA per ogni componente.
- Nessun canone di stile: non combatti con il tema di una libreria. I componenti arrivano nudi (Radix) e li vesti con le utility class di Tailwind. Se il cliente vuole il bottone rosso invece che blu, cambi una classe.
- Bundle minimo: porti dentro solo i componenti che usi. Niente 500 KB di roba che non ti serve.
Noi lo usiamo così: quando un cliente PMI ci chiede un gestionale o un e-commerce, partiamo da shadcn/ui per la UI. Risparmiamo giorni di sviluppo su componenti complessi come tabelle, filtri, sidebar, e abbiamo la garanzia che funzionano con screen reader e tastiera.
Come si installa shadcn/ui in un progetto Tailwind?
Il processo è semplice e ben documentato. Ecco i passi reali che seguiamo nei nostri progetti (ad esempio su Laravel + Inertia + React o su Next.js).
Prerequisiti
Devi avere un progetto con React (o Next.js, Remix, Astro, ecc.), Tailwind CSS già configurato e Node.js 18+. Se usi Laravel con Breeze/Inertia, funziona perfettamente — lo abbiamo fatto su progetti con Livewire e Vue? Sì, ma shadcn/ui è pensato per React; per Vue esiste shadcn-vue (community).
Sponsored Protocol
1. Aggiungi il CLI di shadcn/ui
npx shadcn@latest initTi chiederà alcune configurazioni: stile (default), colore base, directory dei componenti (di solito @/components/ui). Rispondi. Alla fine avrai un file components.json e una struttura pronta.
2. Aggiungi un componente
Ad esempio un bottone:
npx shadcn@latest add buttonQuesto comando scarica il codice del componente button da shadcn/ui, lo adatta al tuo progetto e lo scrive in components/ui/button.tsx. Lo importi così:
import { Button } from "@/components/ui/button"
export default function Home() {
return <Button variant="outline">Clicca qui</Button>
}Ecco fatto. Quel bottone è accessibile, ha gli stati focus e active, e puoi personalizzarlo con classi Tailwind direttamente sul componente o sul suo wrapper.
Come si personalizza un componente shadcn/ui?
Qui arriva la potenza: i componenti sono tuoi. Apri button.tsx e trovi il codice sorgente vero. Puoi cambiare le classi Tailwind direttamente lì dentro, aggiungere varianti, eliminare quella standard. Esempio: vuoi un bottone con icona a sinistra? Modifichi il JSX, aggiungi className con flex items-center gap-2.
Inoltre, shadcn/ui utilizza class-variance-authority (cva) per gestire le varianti. Se vuoi una nuova variante "success" (verde), aggiungi:
const buttonVariants = cva(
"inline-flex items-center justify-center whitespace-nowrap rounded-md text-sm font-medium ring-offset-background transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:pointer-events-none disabled:opacity-50",
{
variants: {
variant: {
default: "bg-primary text-primary-foreground hover:bg-primary/90",
success: "bg-green-600 text-white hover:bg-green-700",
// ... altre varianti
},
},
defaultVariants: {
variant: "default",
},
}
)Nessuna magia. Solo Tailwind e TypeScript. Questo è quello che intendiamo per possedere il proprio stack.
Sponsored Protocol
Quali sono i componenti chiave che shadcn/ui offre con Radix?
Il catalogo è ricco e copre l'80% delle esigenze di una web app moderna. Ecco quelli che usiamo più spesso:
- Dialog (modale): basato su Radix Dialog. Accessibile, con overlay, focus trap, chiusura con Esc.
- Dropdown Menu: menu a cascata con sotto-menu, navigazione da tastiera.
- Popover: per tooltip informativi o piccoli form.
- Separator: semplice hr, ma con tema coerente.
- Sheet: pannello laterale da destra/sinistra (mobile menu o filtri).
- Table: tabella dati con sorting, filtering, pagination (usiamo TanStack Table sotto).
- Tabs: schede accessibili.
- Toast: notifiche temporanee.
- Form: wrapper per React Hook Form + Zod per validazione lato client.
Ogni componente è già integrato con Radix, quindi l'accessibilità è built-in. In un progetto reale di un gestionale per un'impresa di pulizie, abbiamo messo su una dashboard con tabelle, modali per le commesse, dropdown per lo stato. In una settimana era pronta.
Sponsored Protocol
Shadcn/ui con Tailwind: come gestire il tema e i colori?
Tailwind ha un sistema di colori potente. Shadcn/ui lo sfrutta definendo variabili CSS personalizzate (es. --primary: 222.2 47.4% 11.2%;) nel tuo globals.css. Poi nei componenti usa le classi bg-primary, text-primary-foreground ecc. Per cambiare tema (ad esempio modalità scura), modifichi le variabili sotto .dark. Questo significa che puoi passare da tema chiaro a scuro con un toggle senza toccare i componenti.
Noi abbiamo usato questa tecnica per un cliente e-commerce che voleva un tema personalizzato per il Black Friday: abbiamo cambiato le variabili CSS e tutta l'interfaccia si è aggiornata in un secondo. Niente override, niente CSS aggiuntivo.
Shadcn/ui funziona con framework diversi da Next.js?
Sì. Ufficialmente supporta React, Next.js, Remix, Astro, Gatsby, Vite. La community ha portato anche versioni per Vue (shadcn-vue) e Svelte (shadcn-svelte). Noi lo abbiamo integrato con Laravel + Inertia (React lato front-end) e ha funzionato alla perfezione. L'idea è che ti porti i file nei componenti e via.
Il vero limite è che non è pensato per siti statici semplici (tipo brochure). Ma per applicazioni web, pannelli di amministrazione, dashboard — è perfetto.
Sponsored Protocol
Cosa fare adesso
Se vuoi provare subito la combinazione shadcn/ui + Radix + Tailwind, ecco i prossimi passi concreti:
- Crea un nuovo progetto Next.js con Tailwind:
npx create-next-app@latest my-app --typescript --tailwind - Inizializza shadcn/ui:
npx shadcn@latest init(dentro la cartella del progetto) - Aggiungi 2-3 componenti:
npx shadcn@latest add button card dialog - Costruisci una piccola interfaccia: una card con un pulsante che apre un dialog. Usa solo i componenti appena installati.
- Verifica l'accessibilità: naviga con Tab e Invio, prova uno screen reader (VoiceOver su Mac o NVDA su Windows). Noterai che funziona senza che tu abbia scritto un singolo
aria-*manuale. - Personalizza lo stile: cambia le variabili CSS in
globals.csso aggiungi classi Tailwind direttamente nei file dei componenti.
Se vuoi approfondire, ti consigliamo di leggere la documentazione ufficiale di shadcn/ui e la guida ai primitives Radix. E se sei arrivato fin qui, valuta anche la nostra guida principale su Tailwind CSS per UI moderne dove spieghiamo perché lo preferiamo ad altri approcci.
Noi, di Meteora Web, lo usiamo ogni giorno. Non perché è trendy, ma perché ci fa risparmiare ore di debug sull'accessibilità e ci permette di consegnare interfacce che i clienti possono effettivamente usare — e modificare — senza impazzire.
