Radix UI, Base UI ou React Aria? Como escolher a base do seu Design System no shadcn/ui

Se você está construindo um design system em React hoje, provavelmente está usando bibliotecas de componentes sem estilo (headless). Elas entregam acessibilidade e comportamento prontos, deixando o visual 100% nas suas mãos.

Atualmente, três grandes nomes dominam esse espaço e são suportados oficialmente pelo ecossistema do shadcn/ui: Radix UI, Base UI e React Aria. Mas qual é a diferença real entre eles e qual você deve escolher para o seu próximo projeto?

Neste post, vamos destrinchar a filosofia de cada um e entender a grande mudança que o shadcn/ui trouxe recentemente.

Comparativo Geral

Embora os três resolvam o mesmo problema, o nível de abstração e o foco de cada equipe variam bastante. Aqui está um resumo rápido:

1. Radix UI: O clássico testado e aprovado

O Radix foi, durante anos, a base fundamental do shadcn/ui. Sua filosofia é fornecer "primitives" pequenos, previsíveis e extremamente bem construídos.

• Gerencia o foco perfeitamente.
• Controla a navegação por teclado e atributos ARIA.
• Lida com portais e estados controlados/não controlados de forma elegante.

Onde ele brilha: Em componentes essenciais como Dialog, Popover, Tooltip e DropdownMenu.

O gargalo: Historicamente, para construir componentes mais sofisticados como um Combobox de pesquisa, você precisava misturar o Radix com outras bibliotecas (como o cmdk).

2. Base UI: A evolução moderna e o novo padrão

O Base UI pode ser encarado como uma evolução proposital da ideia do Radix. As APIs são intencionalmente parecidas para facilitar a migração, mas o Base UI tenta fornecer uma camada muito mais completa nativamente.

Ele resolve os gargalos do Radix trazendo suporte profundo para:

• Combobox e Autocomplete nativos.
• Nested dialogs (diálogos aninhados).
• Menus ativados por hover.
• Inputs mais sofisticados.

A grande novidade é que o Base UI passou a ser a base padrão para novos projetos shadcn/ui. O Radix continua oficialmente suportado e não está depreciado, mas o Base UI assumiu o protagonismo para o futuro.

3. React Aria: O peso-pesado da acessibilidade

Criado pela Adobe, o React Aria tem uma obsessão absoluta por acessibilidade, interação e internacionalização. Ele oferece duas camadas: os Components (mais fáceis de usar) e os Hooks (para controle total em baixo nível).

O React Aria é a única biblioteca dessa lista testada exaustivamente em VoiceOver, JAWS, NVDA e TalkBack pela sua equipe mantenedora. Além disso, a internacionalização cobre múltiplos sistemas de calendário, numeração e formatação localizada.

Onde ele brilha: Se você estiver construindo um sistema financeiro internacional, um editor complexo (como um Figma ou Google Docs web), ou aplicações com data grids avançados, drag and drop pesado e seleção múltipla.

O Ecossistema shadcn/ui Hoje

Agora o shadcn/ui suporta oficialmente as três bibliotecas. Você escolhe a fundação no momento de inicializar o projeto usando a flag --base:

# Para usar o novo padrão moderno
npx shadcn@latest init --base base

# Para manter o ecossistema clássico
npx shadcn@latest init --base radix

# Para foco extremo em interações complexas e A11y
npx shadcn@latest init --base aria

A beleza disso é que a camada de uso na sua aplicação continua a mesma abstração limpa do shadcn. O motor por baixo é que muda.

Qual escolher?

A forma mais simples de decidir é pensar no que você precisa que a biblioteca te entregue:

RADIX UI: "Me dê primitives básicos e muito bons."

BASE UI: "Me dê primitives bons e componentes mais completos para não depender de terceiros.”

REACT ARIA: "Resolva perfeitamente toda a interação, acessibilidade e internacionalização, e me dê primitives para construir em cima."

O Veredito

Para a grande maioria dos SaaS modernos, dashboards e aplicações corporativas em geral, a combinação Base UI + shadcn/ui é a escolha ideal hoje. Ela oferece a melhor relação entre facilidade de uso, componentes avançados (como Autocomplete e Combobox nativos) e total controle visual com Tailwind.

Se o seu projeto já está em produção rodando perfeitamente com Radix, não há necessidade de reescrever tudo. Mas para aquele projeto novo que vai começar amanhã, vá de Base UI sem medo.

Fontes e Referências

• Radix UI: Documentação oficial sobre componentes primitivos acessíveis sem estilo, gerenciamento de foco, atributos ARIA e navegação por teclado. Disponível em: radix-ui.com/primitives/docs e radix-ui.com/primitives/docs/overview/accessibility
• Base UI: Documentação oficial da nova fundação padrão de primitivos modernos, com instruções detalhadas sobre componentes complexos como Combobox, Autocomplete e diálogos aninhados. Disponível em: base-ui.com e base-ui.com/components/combobox
• React Aria: Documentação oficial da Adobe detalhando o framework de interação e acessibilidade extrema, incluindo guias avançados de internacionalização, multi-seleção e suporte a leitores de tela. Disponível em: react-spectrum.adobe.com/react-aria e react-spectrum.adobe.com/react-aria/internationalization.html
• shadcn/ui: Documentação oficial do ecossistema e CLI, abrangendo a integração arquitetural, uso de flags para diferentes bases headless e recomendações de design system. Disponível em: ui.shadcn.com e ui.shadcn.com/docs/installation