React
Radix vs Base UI vs React Aria: cosa cambia davvero
Tre primitive, tre contratti. La differenza non è il numero di componenti: è come gestiscono stato, accessibilità e composizione. Ecco cosa controllare prima di scegliere.
In sintesi
- Radix, Base UI e React Aria non sono intercambiabili: cambiano API, stato e composizione.
- La domanda giusta è quale contratto vuoi mantenere nel tuo design system.
- Testa focus, Escape, aria e composizione, non solo l’aspetto del componente.
Radix, Base UI e React Aria vengono spesso confrontati come se fossero tre scatole di bottoni. In realtà sono tre modi di intendere il comportamento: chi possiede lo stato, come si compone un menu, dove vive l’accessibilità.
Tre contratti, non tre librerie
Radix espone primitive componibili con una API dichiarativa. Base UI porta avanti un modello simile con una base più recente. React Aria mette l’accento sul comportamento accessibile e sugli hook, lasciando più libertà (e più lavoro) al design.
| Criterio | Radix | Base UI | React Aria |
|---|---|---|---|
| Modello | Primitive componibili | Primitive componibili | Hook + componenti |
| Stile | Porta il tuo | Porta il tuo | Porta il tuo |
| Accessibilità | Integrata | Integrata | Molto esplicita |
| Curva | Media | Media | Più alta |
| Uscita | Dipende dai primitivi usati | Dipende dai primitivi usati | Più codice tuo |
Cosa testare in 15 minuti
- Apri un dialog con Tab e chiudilo con Escape.
- Controlla dove torna il focus.
- Apri un menu con tastiera e cerca la voce successiva.
- Verifica `aria-expanded`, `aria-controls` e `aria-labelledby`.
- Prova un form con errore e leggi l’annuncio dello screen reader.
La scelta dipende dal design system
Se hai già un linguaggio visivo forte, React Aria ti dà il comportamento e ti lascia il controllo. Se vuoi primitive pronte e una community ampia, Radix è la strada più breve. Base UI ha senso se vuoi una base più recente e accetti una community più piccola.
Come verificarlo nel catalogo
Apri i confronti e cerca le librerie che usano la primitiva che stai valutando. Poi apri un componente reale e prova la preview da tastiera: la documentazione dice cosa dovrebbe succedere, il componente dice cosa succede.
Domande frequenti
Radix è meglio di React Aria?
No, risolvono lo stesso problema con contratti diversi. Radix è più rapido da adottare; React Aria dà più controllo sul comportamento e sull’accessibilità.
Base UI sostituisce Radix?
Non automaticamente. Base UI è una base più recente, ma migrare significa riscrivere API e test, non cambiare un import.
Quale usare per un design system interno?
React Aria se vuoi controllo totale; Radix se vuoi primitive pronte e una community ampia. La scelta va scritta nel design system, non lasciata al singolo componente.
L’accessibilità è garantita?
No. Le primitive aiutano, ma contrasto, copy, ordine di focus e stati dipendono da come le usi.
Posso mescolare Radix e React Aria?
Tecnicamente sì, ma evita di farlo per lo stesso tipo di controllo. Due modelli di focus nello stesso prodotto sono un debito.