Open Source

Shadcn/UI adota Base UI como biblioteca padrão no lugar do Radix

Entenda a mudança técnica do shadcn/ui para o Base UI, as novas ferramentas de migração com IA, componentes de chat e suporte a GitHub Registries.

Compartilhar
Monitor exibindo código de programação React em modo escuro com componentes modernos de interface
Monitor exibindo código de programação React em modo escuro com componentes modernos de interface

Em julho de 2026, a popular biblioteca de componentes front-end shadcn/ui anunciou uma das maiores mudanças estruturais de sua trajetória recente ao estabelecer o ecossistema Base UI como sua biblioteca de componentes padrão, preenchendo o espaço ocupado historicamente pelo Radix. Lançado originalmente em janeiro de 2023 sob a fundação estável do Radix, o projeto de código aberto caminha agora para uma nova era técnica. A mudança, formalizada pelo próprio criador do projeto, conhecido simplesmente como shadcn, direciona novos setups gerados a partir do utilitário de terminal npx shadcn init para a nova tecnologia desenvolvida e mantida pela mesma equipe de engenheiros que projetou seu antecessor.

Monitor exibindo código de programação React em modo escuro com componentes modernos de interface
Foto: Hacker News

A decisão estratégica de oficializar a transição para a Base UI ocorre no momento em que esta biblioteca atinge plena maturidade comercial, operando na versão estável 1.6.0 com uma marca superior a 6 milhões de downloads semanais nas plataformas de distribuição. De acordo com os dados operacionais coletados pela equipe do projeto, a comunidade de engenharia de software já vinha antecipando essa mudança de forma orgânica nas ferramentas de inicialização rápida: os novos projetos gerados no utilitário shadcn/create vinham escolhendo a Base UI em detrimento da biblioteca Radix 2 em uma proporção de 2 para 1. Essa preferência expressiva acelerou a decisão de inverter a configuração padrão, de forma que o instalador oficial e a documentação do ecossistema agora apresentam a nova biblioteca como prioridade primária de instalação.

Apesar do reposicionamento tecnológico, o time de engenharia liderado por shadcn fez questão de enfatizar que o ecossistema legado do Radix não está em processo de descontinuação ou obsolescência. O suporte continuará ativo para ambos os ecossistemas, o que significa que futuras atualizações de design e novos componentes de interface serão lançados em paralelo para ambas as bibliotecas, exceto nos raros cenários onde uma funcionalidade específica exista exclusivamente no portfólio de engenharia da Base UI. A recomendação explícita do time de desenvolvimento para projetos de software que já operam de forma estável sobre o Radix em produção é manter a base de código inalterada, evitando retrabalhos desnecessários em aplicações que já estão ativas e funcionando perfeitamente.

A evolução das bibliotecas

Para compreender as razões técnicas que motivaram essa transição de ferramentas no ecossistema do shadcn/ui, é necessário resgatar a cronologia do projeto desde o seu lançamento oficial em janeiro de 2023. Naquela época, a biblioteca foi estruturada inteiramente sobre o Radix, uma vez que nenhuma outra solução disponível no mercado apresentava o mesmo nível de qualidade. A biblioteca consolidou-se como a principal escolha por oferecer componentes não estilizados (headless), ótimas interfaces de programação de aplicação (APIs), acessibilidade nativa de alto nível e uma infraestrutura exaustivamente testada em milhões de aplicações em todo o mundo.

No entanto, o cenário tecnológico evoluiu quando a mesma equipe responsável pela concepção original do Radix iniciou o desenvolvimento de uma nova biblioteca de componentes do zero, batizada de Base UI. Esse novo projeto representou a oportunidade de refinar e reconstruir toda a arquitetura de blocos visuais a partir das lições práticas acumuladas ao longo dos anos de operação do framework anterior. Em 2025, quando o projeto Base UI lançou sua primeira versão em estágio beta de desenvolvimento, uma parcela significativa da comunidade de desenvolvedores começou a questionar se o ecossistema do shadcn/ui abandonaria a sua fundação original baseada em Radix.

Diante desses questionamentos, o desenvolvedor shadcn expressou uma postura cautelosa que definiu a estratégia de transição segura para os anos seguintes:

the worst thing you can do for your production app is switch component libraries

Essa premissa de estabilidade continuou guiando as decisões da equipe, impedindo uma substituição abrupta que pudesse inviabilizar projetos comerciais de larga escala. Em vez de forçar os desenvolvedores a migrarem suas dependências, o projeto optou por reconstruir individualmente cada componente visual sobre a fundação da Base UI, mantendo estritamente a mesma camada de abstração de estilos, de modo a permitir que cada desenvolvedor escolhesse a biblioteca de sua preferência.

Essa abordagem focada na liberdade de escolha avançou de forma estruturada nas atualizações de final de ano. Em dezembro de 2025, o utilitário de terminal npx shadcn create passou a disponibilizar formalmente ambas as bibliotecas como alternativas selecionáveis no momento do setup inicial. Logo em seguida, em janeiro de 2026, o ecossistema disponibilizou a documentação técnica completa e dedicada para a Base UI. A observação do comportamento dos desenvolvedores ao longo dos meses subsequentes serviu como o validador definitivo para que a biblioteca se tornasse o padrão absoluto do ecossistema a partir de julho de 2026.

Transição auxiliada por agentes

Para os engenheiros que optarem por atualizar seus sistemas legados da antiga estrutura para a nova fundação baseada em Base UI, o projeto desenvolveu uma estratégia inovadora que dispensa o uso dos tradicionais codemods de compilação automática. Conforme detalhado por shadcn, os codemods mecânicos tendem a funcionar perfeitamente apenas em códigos padrão que nunca sofreram alterações, mas frequentemente quebram quando encontram componentes que receberam customizações profundas, novas classes utilitárias ou propriedades proprietárias adicionadas pelos desenvolvedores em seus projetos locais do dia a dia.

Para contornar essa limitação técnica, a equipe desenvolveu uma habilidade (skill) específica projetada para ser consumida diretamente por agentes de inteligência artificial aplicados à programação de sistemas, como as ferramentas Claude Code ou Cursor. O desenvolvedor pode comandar o assistente virtual utilizando uma instrução simples de conversação como 'migrate accordion to base-ui'. Esse método de portabilidade progressiva permite migrar um único componente visual por vez, mantendo a integridade geral do projeto que continua compilando e apto para distribuição em produção mesmo que o processo seja interrompido para retomada posterior.

A inteligência por trás desse assistente baseia-se em um mapeamento sistemático de conhecimento construído pela equipe do shadcn/ui, que catalogou manualmente cada renomeação de propriedades, modificações de parâmetros de configuração e divergências de comportamento operacional entre as duas bibliotecas de componentes. Com isso, ao ler as regras, o agente de inteligência artificial é capaz de interpretar as customizações aplicadas pelo desenvolvedor na estrutura antiga e transportá-las de forma precisa para a nova sintaxe. Alterações puramente mecânicas, como a transição do atributo tradicional asChild para a nova diretiva de renderização render, são resolvidas de ponta a ponta de forma autônoma.

Ao término de cada rotina de migração bem-sucedida, o sistema entrega um pacote estruturado composto por três elementos essenciais: código de software funcional e devidamente tipado, um histórico limpo de controle de versão no Git com um commit individual por componente em um branch dedicado, e um relatório detalhado de alterações gerado dentro do diretório .migration/ na raiz da aplicação. Um arquivo de relatório gerado sob o caminho '.migration/accordion.md' é estruturado com tópicos claros para documentar o processo, incluindo as seções # accordion, ## Changed para registrar arquivos alterados, ## Left alone para caminhos intencionalmente ignorados, ## Behavior changes para alertar sobre pequenas variações operacionais que não geram erro de compilação, e ## Verify by hand com uma lista curta de testes manuais. Testes práticos realizados em repositórios reais contendo 60 componentes (com 36 deles construídos sobre a base clássica do Radix) concluíram a transição completa em aproximadamente 25 minutos de execução a uma taxa de consumo de 10.000 tokens por componente.

Componentes dedicados para conversação

A expansão funcional do ecossistema em junho de 2026 marcou a introdução de um conjunto de blocos visuais e lógicos focados no desenvolvimento de interfaces de conversação e chats interativos. Esta primeira fase da iniciativa apresenta cinco novos componentes de nível profissional: MessageScroller, Message, Bubble, Attachment e Marker. Em vez de acoplar o desenvolvedor a uma solução rígida de gerenciamento de dados de inteligência artificial ou protocolos de rede específicos, o ecossistema disponibiliza estes componentes de forma modular para serem copiados, estilizados e compostos livremente nas aplicações.

O núcleo técnico desse novo ecossistema de conversas é o contêiner de rolagem batizado de MessageScroller. Este componente encapsula comportamentos altamente complexos e que frequentemente geram bugs quando implementados manualmente do zero, tais como a ancoragem precisa de turnos de diálogo na tela, suporte nativo para respostas transmitidas por fluxo contínuo de dados (streaming), restauração de histórico de tópicos anteriores, controle preciso de rolagem e rastreamento avançado de visibilidade dos blocos de texto. Toda essa mecânica operacional é disponibilizada de forma limpa, permitindo que o desenvolvedor traga seu próprio renderizador de conteúdo e lógica de rede, estando disponível também como um componente reativo puramente sem estilos (headless) no pacote @shadcn/react/message-scroller.

Para apoiar a estrutura visual das telas de chat, o pacote traz componentes complementares especializados: o elemento Message organiza as linhas de diálogo gerenciando avatares, cabeçalhos, rodapés e alinhamento das mensagens; o Bubble renderiza a superfície física do balão de texto contendo suporte integrado para variações estéticas, reações de usuários e seções colapsáveis; o Attachment cuida da apresentação visual de arquivos e mídias, exibindo metadados, status de upload e botões de ação independentes; e o Marker atua como um divisor de tela para notas do sistema, marcadores de data e indicadores de processamento de ferramentas.

Adicionalmente, a atualização introduziu duas novas classes utilitárias de estilo integradas ao arquivo shadcn/tailwind.css para elevar o polimento de interfaces interativas: o efeito scroll-fade, que adiciona gradientes de desaparecimento visual nas bordas superiores e inferiores das listas de rolagem longa sem a necessidade de adicionar elementos HTML adicionais ou escutas de eventos de rolagem, e a animação de texto shimmer, projetada para indicar processamento em tempo real em mensagens como 'Pensando...' ou 'Gerando resposta...'. Ambas as utilidades estão disponíveis de fábrica em todos os projetos que utilizam a versão mais recente do utilitário de inicialização CLI.

Cabe destacar que estes novos blocos visuais não representam a descontinuação do pacote AI Elements, que continua ativo para desenvolvedores que desejam utilizar padrões e componentes de interface voltados especificamente para fluxos de inteligência artificial. A recomendação oficial de shadcn para desenvolvedores que já utilizam componentes do ecossistema AI Elements é manter o código existente caso ele atenda às necessidades de negócio, experimentando as novas opções apenas quando houver necessidade de obter uma nova camada de abstração de estilo ou suporte unificado entre as bibliotecas Radix e Base UI.

Distribuição com GitHub Registries

Outro marco importante trazido na atualização de junho de 2026 foi o lançamento dos chamados GitHub Registries, um mecanismo descentralizado que permite transformar qualquer repositório público hospedado na plataforma de código do GitHub em um registro de distribuição direta para o terminal CLI do shadcn/ui. Esse formato de distribuição elimina completamente a necessidade de executar rotinas de compilação pesadas, publicar arquivos de manifesto de componente em servidores dedicados ou gerenciar infraestruturas proprietárias de registro. O instalador do ecossistema lê diretamente as configurações declaradas de forma simples a partir do arquivo estrutural de configuração registry.json posicionado na pasta raiz do repositório público.

Através do arquivo de configuração registry.json, a flexibilidade do ecossistema expande-se para permitir a distribuição de uma variedade massiva de arquivos que superam a barreira clássica de componentes de interface puramente visuais. O manifesto permite aos engenheiros de software empacotar e distribuir ganchos customizados (hooks), utilitários globais, tokens de design, workflows de integração e entrega contínua (CI/CD), setups de testes automatizados, modelos de agentes de inteligência artificial, regras e diretrizes gerais de projetos. Um exemplo prático ilustrado na documentação exibe o setup de um pacote fictício nomeado acme-toolkit, originado no caminho de repositório acme/toolkit, capaz de distribuir de uma só vez arquivos como diretrizes de agentes (AGENTS.md), configurações globais de editores de código (.editorconfig) e manuais internos do projeto sob o caminho docs/conventions.md.

A interação do desenvolvedor com esses registros descentralizados mantidos na plataforma do GitHub ocorre de maneira uniforme através dos mesmos comandos de terminal já existentes e amplamente utilizados no ecossistema do instalador. É possível utilizar o CLI para buscar de forma rápida os itens disponíveis em um determinado repositório remoto, visualizar o código-fonte detalhado de uma funcionalidade específica diretamente no terminal antes de prosseguir com a importação e realizar a instalação automatizada dos arquivos finais no diretório de destino do projeto ativo sem atritos adicionais.

Otimização e novos estilos

Em maio de 2026, as otimizações técnicas focaram no gerenciamento de estilos globais das aplicações através do lançamento do utilitário de terminal shadcn eject. O problema original decorria da necessidade de unificar utilitários compartilhados do framework Tailwind CSS que ambas as bibliotecas base dependiam, como as variantes de estado customizadas data-open: e data-closed: ou a classe utilitária de remoção de barras de rolagem no-scrollbar. Esse esforço de unificação gerou a biblioteca de estilos compartilhados shadcn/tailwind.css, inserida como uma diretiva de importação @import nos arquivos CSS globais dos projetos de software inicializados pela ferramenta.

Para os desenvolvedores e arquitetos de software que priorizam manter suas bases de código livres de dependências de estilo de terceiros, o comando de linha de terminal shadcn eject oferece a capacidade de remover o pacote de dependência direta do projeto e embutir de forma nativa todo o código CSS necessário dentro do arquivo de estilos global do usuário. Ao rodar o comando a partir do workspace correto de um monorepo ou da pasta raiz da aplicação, o utilitário resolve a importação @import 'shadcn/tailwind.css' e injeta diretamente no arquivo as regras consolidadas, incluindo diretivas de animação sob o bloco @theme inline contendo regras de abertura e fechamento de elementos visuais do tipo sanfona, além das definições de variantes para seletores customizados como @custom-variant data-open.

Finalizando as novidades do mês de maio de 2026, o ecossistema expandiu o seu catálogo de identidades visuais de componentes com a introdução do estilo Rhea, descrito como uma variação de design consideravelmente mais compacta em comparação ao clássico estilo Luma. Desenvolvido para atender a pedidos recorrentes da comunidade de desenvolvimento de software por superfícies mais densas de dados e espaçamentos sensivelmente menores, o estilo Rhea preserva a suavidade visual e as formas arredondadas introduzidas pelo estilo Luma, mas condensa drasticamente a interface física. Essa identidade visual compacta é ideal para interfaces complexas de software profissional onde a densidade de informações em tela e o controle absoluto do espaço disponível são requisitos prioritários de design.

#shadcn/ui#Base UI#Radix#React#front-end
Compartilhar

Artigos Relacionados