Capire Radix UI e ShadCN UI in 2 minuti: Potenzia le tue interfacce React!

Ciao, creatore di interfacce React! 🎨 Oggi, esploreremo Radix UI e ShadCN UI, due librerie essenziali per creare componenti di interfaccia utente moderni, accessibili e stilosi senza dover reinventare la ruota. Questo blog è sviluppato con Next.js 15, TypeScript, Zod per la validazione dei dati, e ShadCN UI per i componenti di interfaccia. Pronto a esplorare?

Radix UI: componenti accessibili di default 🎯

Radix UI è una libreria di componenti React che mette l'accento sull'accessibilità e le prestazioni. Ogni componente è ottimizzato per il rendering lato server (SSR) e rispetta gli standard ARIA, rendendolo una scelta ideale per le applicazioni professionali. 🚀

Perché scegliere Radix UI?

• ♿️ Accessibilità WCAG 2.1 integrata
• 🎯 Zero dipendenze CSS
• 🔄 Supporto completo SSR
• ⌨️ Navigazione da tastiera
• 📱 Supporto touch nativo
• 🎨 API di stile flessibile

Installazione di Radix UI

Per iniziare con Radix UI, installa i componenti di cui hai bisogno:

bash
1# Installazione di un componente specifico
2npm install @radix-ui/react-dialog
3
4# O installazione di più componenti
5npm install @radix-ui/react-dialog @radix-ui/react-dropdown-menu @radix-ui/react-tooltip

Esempio d'uso: un Dialog accessibile

Ecco un esempio di Dialog con gestione del focus e degli eventi da tastiera:

typescript
1import * as Dialog from '@radix-ui/react-dialog';
2import { useCallback } from 'react';
3
4export default function MyDialog() {
5  const handleOpenChange = useCallback((open: boolean) => {
6    console.log('Stato Dialog:', open);
7  }, []);
8
9  return (
10    <Dialog.Root onOpenChange={handleOpenChange}>
11      <Dialog.Trigger asChild>
12        <button className="button-primary">Apri dialogo</button>
13      </Dialog.Trigger>
14
15      <Dialog.Portal>
16        <Dialog.Overlay className="fixed inset-0 bg-black/50 animate-fade-in" />
17        <Dialog.Content className="dialog-content">
18          <Dialog.Title className="text-xl font-bold">
19            Benvenuto 👋
20          </Dialog.Title>
21          <Dialog.Description className="mt-2">
22            Questo dialogo è completamente accessibile: prova a usare Tab,
23            Esc, o gli screen reader!
24          </Dialog.Description>
25
26          <Dialog.Close asChild>
27            <button className="button-secondary mt-4">
28              Chiudi
29            </button>
30          </Dialog.Close>
31        </Dialog.Content>
32      </Dialog.Portal>
33    </Dialog.Root>
34  );
35}

ShadCN UI: Radix UI con stile e best practices 🌈

ShadCN UI non è solo una semplice collezione di componenti stilizzati: è una cassetta degli attrezzi completa che combina Radix UI, Tailwind CSS e le migliori pratiche di sviluppo React. Include:

• 🎨 Temi chiari/scuri
• 🔄 Animazioni fluide
• 📱 Design responsive
• 🎯 Varianti dei componenti
• ⚡️ Prestazioni ottimizzate

Installazione di ShadCN UI

bash
1# Installazione iniziale
2npx shadcn@latest init
3
4# Aggiunta di componenti specifici
5npx shadcn@latest add button
6npx shadcn@latest add dialog

Esempio di componente con ShadCN UI e TypeScript

typescript
1import { Button } from '@/components/ui/button';
2import { useState } from 'react';
3
4interface Props {
5  variant?: 'default' | 'destructive' | 'outline' | 'ghost';
6  children: React.ReactNode;
7}
8
9export default function MyButton({ variant = 'default', children }: Props) {
10  const [loading, setLoading] = useState(false);
11
12  return (
13    <Button
14      variant={variant}
15      disabled={loading}
16      onClick={() => setLoading(true)}
17      className="transition-all hover:scale-105"
18    >
19      {loading ? 'Caricamento...' : children}
20    </Button>
21  );
22}

Configurazione dei temi

ShadCN UI permette una personalizzazione avanzata dei temi:

typescript
1// tailwind.config.ts
2import { Config } from 'tailwindcss';
3
4export default {
5  darkMode: ['class'],
6  theme: {
7    extend: {
8      colors: {
9        primary: {
10          DEFAULT: 'hsl(var(--primary))',
11          foreground: 'hsl(var(--primary-foreground))',
12        },
13        // Aggiungi i tuoi colori personalizzati
14      },
15      keyframes: {
16        'fade-in': {
17          '0%': { opacity: '0' },
18          '100%': { opacity: '1' },
19        },
20      },
21      animation: {
22        'fade-in': 'fade-in 0.2s ease-out',
23      },
24    },
25  },
26} satisfies Config;

Perché scegliere questo stack? 🧐

1. Produttività massima

   • Componenti pronti all'uso
   • TypeScript integrato
   • Eccellente DX (Developer Experience)

2. Prestazioni ottimali

   • Bundle size minima
   • Rendering lato server
   • Idratazione progressiva

3. Manutenibilità

   • Codice sorgente accessibile
   • Personalizzazione facile
   • Comunità attiva

4. Accessibilità

   • WCAG 2.1 di default
   • Test di accessibilità
   • Documentazione completa

Best Practices per il tuo progetto 🚀

1. Organizzazione dei componenti

typescript
1// Struttura i tuoi componenti per dominio
2src/
3  components/
4    ui/          // Componenti ShadCN UI
5    layout/      // Layout
6    forms/       // Componenti form
7    features/    // Componenti specifici

2. Utilizzo con React Hook Form e Zod

typescript
1import { z } from 'zod';
2import { useForm } from 'react-hook-form';
3import { zodResolver } from '@hookform/resolvers/zod';
4
5const schema = z.object({
6  email: z.string().email(),
7  password: z.string().min(8),
8});
9
10type FormData = z.infer<typeof schema>;

Riepilogo 📝

In due minuti, abbiamo esplorato:

• Radix UI per componenti React accessibili e performanti
• ShadCN UI per un sistema di design completo basato su Tailwind
• Le migliori pratiche di organizzazione e utilizzo
• L'integrazione con TypeScript e Zod

La combinazione di questi strumenti ti permette di creare interfacce moderne, accessibili e manutenibili, mantenendo un'eccellente esperienza di sviluppo! 🎉

Grazie per aver dedicato del tempo a scoprire Radix UI e ShadCN UI. Non esitare a consultare la documentazione ufficiale di Radix UI e quella di ShadCN UI per approfondire le tue conoscenze! A presto per altre best practices React!