Shadcn/UI troca o padrão de Radix para Base UI

 (ui.shadcn.com)
3 pontos por GN⁺ 6 시간 전 | 1 comentários | Compartilhar no WhatsApp
  • A shadcn/ui mudará, a partir de julho de 2026, o fluxo padrão de novos projetos e da documentação para ser centrado em Base UI, alterando a direção em relação ao padrão Radix mantido desde o lançamento em 2023
  • A Base UI chegou à versão estável 1.6.0 e a mais de 6 milhões de downloads semanais; também é escolhida 2:1 mais vezes que Radix em projetos shadcn/create
  • Radix não será descontinuada; apps existentes podem continuar como estão e, com exceção de componentes existentes apenas na Base UI, atualizações e novos componentes continuarão sendo oferecidos
  • A migração será oferecida não como codemod, mas como skill de agente, migrando gradualmente os componentes modificados e seus usos componente por componente, deixando relatórios em .migration/ e commits no git
  • Com componentes de UI de chat, registry baseado em repositório GitHub, shadcn eject e o novo estilo Rhea, o escopo da shadcn/ui se amplia para distribuição de componentes e composição geral de UI de produtos

Base UI se torna a biblioteca de componentes padrão

  • A partir de julho de 2026, Base UI será designada como a biblioteca de componentes padrão da shadcn/ui
  • Quando a shadcn/ui foi lançada em janeiro de 2023, ela foi criada sobre Radix; na época, Radix era uma opção com componentes headless sem estilo, APIs, acessibilidade e experiência de uso em apps reais
  • Base UI é uma nova biblioteca sendo criada pelas pessoas que fizeram Radix, e a shadcn/ui refez todos os componentes para Base UI mantendo a abstração existente
  • Em dezembro de 2025, npx shadcn create passou a permitir escolher as duas bibliotecas e, em janeiro de 2026, a documentação da Base UI foi concluída

Por que o padrão foi alterado

  • Estabilidade e fluxo de uso da Base UI

    • A versão da Base UI é 1.6.0
    • Os downloads semanais são mais de 6 milhões
    • A equipe da Base UI lança regularmente componentes novos e úteis
    • Novos projetos da shadcn/ui estão usando Base UI
    • Projetos criados com shadcn/create escolhem Base UI na proporção de 2:1 em relação a Radix
    • A shadcn/ui está refletindo oficialmente esse fluxo de escolha como padrão

O que muda em novos projetos e na documentação

  • Ao executar npx shadcn init em um novo projeto, Base UI passa a ser a opção padrão
  • shadcn/create mostrará Base UI primeiro
  • As páginas de componentes da documentação abrirão por padrão na aba Base UI, e a documentação de Radix poderá ser acessada com um clique

O que usuários de Radix precisam saber

  • Radix continua sendo suportada

    • A shadcn/ui manterá o suporte a Radix
    • Com exceção dos componentes que existem apenas na Base UI, todas as atualizações e novos componentes serão oferecidos para as duas bibliotecas
    • Apps existentes não precisam migrar
    • Radix é uma biblioteca madura e testada
    • A shadcn/ui também continua usando Radix em produção e não migrará seus próprios projetos
    • Se você preferir Radix em novos projetos, pode usar uma flag
    • Se scripts ou CI que executam shadcn init de forma não interativa esperam Radix, será preciso adicionar -b radix para manter o caminho existente
    • Ao criar um registry, é possível fornecer a configuração registry:base para fixar uma biblioteca específica
    • Itens sem essa configuração agora serão inicializados com Base UI
    • Para novos projetos, Base UI é recomendada

Como migrar para Base UI

  • A migração não é obrigatória, mas, se desejado, é possível usar uma skill
  • Você pode pedir a um agente de codificação assim:
    • migrate accordion to base-ui
  • A abordagem padrão é uma migração gradual
    • Componentes e seus usos são migrados um por um
    • O projeto permanece em estado green e implantável
    • Durante o trabalho, as duas bibliotecas coexistem
    • É possível parar no meio e continuar depois
    • Se quiser, também é possível solicitar o projeto inteiro de uma vez

Por que escolher uma skill em vez de um codemod

  • Como componentes shadcn/ui são código que o usuário possui e modifica, um codemod pode funcionar em componentes intocados, mas quebrar em componentes modificados
  • A skill inclui renomeações, mudanças de props e diferenças de comportamento verificadas manualmente com base nas duas bibliotecas
  • O agente identifica as partes alteradas pelo usuário e reflete essas mudanças no alvo da migração
  • Mudanças que podem ser tratadas mecanicamente são aplicadas em todo o código
    • Ex.: asChild vira render
  • Alterações de comportamento não são corrigidas silenciosamente: elas são sinalizadas, e a decisão final cabe ao usuário

Artefatos deixados pela migração

  • Cada execução deixa três resultados
    • Código funcional: typecheck e build são executados antes do relatório de sucesso
    • Relatório por componente: em .migration/, na raiz do projeto, são registrados o que mudou, o que foi deixado como estava e uma checklist de verificação manual
    • Histórico git limpo: um commit por componente é deixado sobre a branch; para reverter, basta apagar a branch
  • Um exemplo de relatório é .migration/accordion.md, contendo as seguintes seções
    • Changed
    • Left alone
    • Behavior changes
    • Verify by hand
  • Como o progresso fica em arquivos e no histórico git, sem estado oculto, qualquer agente ou sessão pode continuar o trabalho
  • Funciona no Claude Code, Cursor e agentes que suportam skills
  • Em testes com projetos reais, 36 de mais de 60 componentes eram Radix, e a migração completa levou cerca de 25 minutos, com aproximadamente 10 mil tokens por componente
  • O build passou de forma limpa e as customizações foram preservadas

Adição de componentes para interfaces de chat

  • Em junho de 2026, foram adicionados novos componentes para criar interfaces de chat
  • A primeira etapa são as peças centrais que compõem a camada de conversa
    • rolagem
    • linhas de mensagem
    • balões
    • anexos
    • marcadores
  • MessageScroller é um contêiner de rolagem para conversas
    • anchored turns
    • streamed replies
    • saved thread restore
    • prepended history
    • jump-to-message
    • scroll controls
    • visibility tracking
  • MessageScroller não é responsável por mensagens, estado da IA, envio, salvamento nem estado do modelo; o renderizador de conteúdo é fornecido pelo usuário
  • MessageScroller também é oferecido como componente headless sem estilo em @shadcn/react

Papel de Message, Bubble, Attachment e Marker

  • Message posiciona uma linha da conversa
    • avatar
    • alinhamento
    • cabeçalho
    • conteúdo
    • rodapé
    • mensagens agrupadas
  • Bubble renderiza a superfície da mensagem
    • variants
    • alinhamento
    • reactions
    • links
    • buttons
    • conteúdo recolhível
  • Attachment renderiza arquivos e imagens
    • mídia
    • metadados
    • estado de upload
    • ações
    • oferece um trigger de card inteiro que mantém ações clicáveis separadamente
  • Marker renderiza atualizações de estado, notas do sistema, linhas com borda e divisores com rótulo
    • streaming state
    • tool activity
    • quebras por data
  • Esses componentes são projetados para serem pequenos e combináveis em chats de IA, caixas de entrada de suporte, threads de equipe, chats em grupo e UIs de conversa específicas de produtos

Utilitários CSS para UI de chat e @shadcn/react

  • Dois novos utilitários CSS foram adicionados
    • scroll-fade: adiciona um fade de percepção de rolagem nas bordas do contêiner de rolagem
    • shimmer: adiciona shimmer a textos de estado ao vivo como "Thinking…", "Generating response…", execução de ferramentas e marcadores de streaming
  • Os dois utilitários estão incluídos em shadcn/tailwind.css
    • Projetos inicializados com npx shadcn@latest init já os incluem
  • @shadcn/react é um novo pacote para componentes React headless sem estilo
    • O primeiro primitive é @shadcn/react/message-scroller
    • Componentes de registry os envolvem no estilo shadcn/ui, mas comportamentos de rolagem como anchoring, auto-follow, prepend preservation, scroll commands e visibility ficam no pacote
  • Essa abordagem fornece comportamento sem ficar presa ao estilo visual e permite testar a lógica difícil de interação em um só lugar
  • Está disponível tanto com Radix quanto com Base UI

Relação com AI Elements

  • Os novos componentes de chat não substituem AI Elements
  • Os componentes e padrões de interface de IA do AI Elements continuam disponíveis
  • Este lançamento se concentra em trazer, uma a uma, as peças centrais de chat para shadcn/ui
  • Se você já usa componentes do AI Elements, não precisa reescrever o app
  • Quando precisar de abstrações mais novas, estilos atualizados e suporte tanto a Radix quanto a Base UI, você pode experimentar as versões da shadcn/ui

Usar um repositório GitHub como registry

  • A partir de junho de 2026, é possível usar repositórios GitHub públicos como registry
  • Ao adicionar registry.json à raiz do repositório e definir os itens a distribuir, usuários podem instalar diretamente do GitHub com a CLI shadcn
  • Um registry GitHub é um source registry
    • Não é preciso executar shadcn build
    • Não é preciso publicar arquivos item JSON gerados
    • Não é preciso configurar um servidor de registry
  • A CLI lê o registry.json na raiz, interpreta os itens em include, encontra o item solicitado e instala os arquivos correspondentes
  • Itens de registry não se limitam a componentes
    • components
    • hooks
    • utilities
    • design tokens
    • feature kits
    • project conventions
    • agent instructions
    • testing setup
    • CI workflows
    • release workflows
    • templates
    • codemods
    • migration kits
    • outros arquivos de projeto podem ser distribuídos
  • Endereços de registry GitHub funcionam nos mesmos comandos que endereços de registry existentes
    • list
    • search
    • view
    • install

shadcn eject e shadcn/tailwind.css

  • Com suporte tanto a Radix quanto a Base UI, tornou-se necessário ter um lugar para utilitários Tailwind compartilhados dos quais as duas bibliotecas dependem
    • Ex.: custom variants como data-open:, data-closed:
    • Ex.: utility como no-scrollbar
  • Durante o trabalho de suporte a RTL, também ficou mais fácil corrigir alguns bugs em um só lugar, em vez de duplicar a correção em todos os componentes
  • Para isso, foi criado shadcn/tailwind.css
    • Ao executar init, @import "shadcn/tailwind.css" é adicionado ao arquivo CSS global
    • Funciona como um import CSS, como tw-animate-css
    • Em produção, é uma dependência pequena que passa por tree-shaking e é resolvida no build
  • Se você não quiser a dependência CSS do pacote shadcn, pode usar shadcn eject
    • Faz inline de shadcn/tailwind.css no arquivo CSS global
    • Remove a dependência de shadcn do projeto
  • Em monorepos, o comando deve ser executado no workspace que contém components.json e o arquivo CSS global

Novo estilo Rhea

  • Em maio de 2026, o novo estilo shadcn/ui Rhea foi adicionado
  • Rhea é um Luma mais compacto, com spacing menor e superfícies mais densas, criado para focused product interfaces
  • Rhea mantém a suavidade e a forma do Luma, mas organiza botões, inputs, menus, cards e listas de modo mais justo
  • A opção não foi ajustar o --spacing do Luma
    • Como --spacing é um multiplicador, alterá-lo mudaria em todo o app o significado de utilities Tailwind familiares como p-2, w-4, m-16
  • Rhea é oferecido como um estilo separado, ajustando diretamente component size, gap e density enquanto mantém previsível a escala de utilities subjacente
  • Rhea está disponível em shadcn/create tanto para Radix quanto para Base UI

Leituras relacionadas

1 comentários

 
GN⁺ 6 시간 전
Opiniões no Hacker News

  • Neste texto, dá para sentir bem claramente o estilo característico do Claude, e isso já está ficando cansativo e criando um certo distanciamento
    Se nem um texto importante de lançamento de produto merece a atenção integral de uma pessoa, não sei onde traçar a linha

    • O texto comunicou de forma eficaz o que precisava e pareceu escrito e estruturado para ser agradável a uma pessoa ler
      Se ele foi escrito com IA e isso permitiu dedicar mais tempo ao desenvolvimento desse excelente software open source, eu vejo isso como algo positivo
    • Entendo exatamente o que você quer dizer. Uso bastante Claude e plannotator, e melhorou muito depois que pedi um guia de estilo específico
      Usei “referência do MSDN da era do CD e estilo do blog do Raymond Chen” como prompt inicial, e minha capacidade de digerir planos criados por IA aumentou bastante; recomendo muito, porque é um estilo humilde, perspicaz e respeitoso com o leitor
    • Li o texto e não me pareceu escrito por IA
      Seria meio engraçado se alguém da equipe aparecesse dizendo que foi escrito por uma pessoa
    • Perguntando seriamente: por que isso importa? Eles podem ter escrito um rascunho, revisado as frases do Claude e publicado
      Não entendo por que as pessoas fazem questão de “pegar no flagra” sempre que a IA ajuda no trabalho; isto não é uma empresa F500, é um projeto open source. Os recursos são limitados e talvez inglês nem seja a língua nativa deles
    • Pelo contrário, acho que não é algo que deveríamos aceitar passivamente. A forma como isso está sendo usado e apresentado hoje se aproxima de engano e mentira
      Acredito que uma cultura de colaboração precisa de confiança e verdade, e não quero textos em que uma IA diga falsamente “eu fiz/eu disse”
      Por exemplo, se esse texto foi mesmo escrito pelo Claude, por que fingir que alguém da equipe está falando diretamente, com frases como “I said”, “I meant it”? Isso é personificação indevida e enganoso. Numa cultura que preserva colaboração e honestidade, deveria dizer “meu humano disse” ou, no mínimo, deixar claro que é uma IA agindo em nome de uma pessoa

  • Em aplicações sem graça, fico curioso se as pessoas preferem o método de copiar e colar do shadcn a bibliotecas de UI tradicionais como Mantine
    O método de copiar e colar é fácil de modificar, mas também cria novos problemas. Algo que antes seria só aumentar o número da versão agora passa a exigir um agente de IA para fazer upgrade

    • Dizer que é “só aumentar o número da versão” subestima muito as dores de cabeça que o Material UI causou nos últimos anos
      Não era em apps sem graça, mas em apps bem grandes, em que cada atualização de versão principal mexia bastante na API e exigia migrações tediosas. Depois de migrar para shadcn, ficou mais fácil, porque podemos atualizar apenas um componente específico e adicionar novos componentes livremente. No Material UI, para usar um recurso novo em qualquer lugar, era preciso adaptar tudo à nova API; com shadcn, dá para fazer isso seletivamente
    • Nunca entendi o método de copiar e colar. Shadcn simplesmente tem cheiro de modinha, e mesmo copiando e usando eu não vejo o que há de tão incrível
      Mas, se você gosta, use; uma das vantagens da IA é que o HN já não fica tão entupido de discussões sobre frameworks JavaScript como antes
    • Em projetos novos, estou cada vez mais inclinado ao vendoring
      Trazer uma biblioteca de UI pronta é fácil no curto prazo, mas em geral ela é complexa demais, implementa recursos que você não vai usar, é difícil de modificar quando você quer se diferenciar dos inúmeros apps que usam a mesma biblioteca, e essas modificações quebram de formas sutis quando você faz upgrade. Acho que a melhor abordagem é criar sua própria biblioteca de UI. Você a controla, reutiliza em vários projetos, mantém o mesmo estilo visual se quiser e adiciona apenas os recursos necessários
    • Mantine é excelente. Dá para criar quase qualquer coisa rapidamente e depois expandir ou customizar totalmente o tema e componentes individuais
      Existe uma curva de aprendizado, mas não acho que seja enorme
    • Em muitos sistemas, na prática, quase nunca é “só aumentar o número da versão”. Isso só funciona quando a biblioteca de componentes faz exatamente o que você quer
      Na realidade, muitas vezes o componente não oferece completamente o comportamento necessário, e as pessoas frequentemente acrescentam CSS extra aos componentes. Se a alternativa for um trabalho de várias horas, duas linhas de CSS são muito tentadoras, mas essas duas linhas também precisam ser verificadas a cada novo recurso da biblioteca de componentes. Quando esses remendos de CSS se acumulam, o upgrade vira um projeto próprio

  • Incomoda-me que esses toolkits de UI populares renderizem divs em excesso
    Olhando o Base UI, quase todos os componentes parecem “renderizar um elemento”, mas no caso de um acordeão existem elementos nativos como details/summary que fazem a mesma coisa. Não sou evangelista da web nativa e acho que as APIs da web, especialmente HTML, têm muitos problemas, mas o abuso de divs também é errado

  • Já usei Shadcn e, no geral, gosto, mas os radio buttons baseados em Radix eram um pouco exagerados. Há também opções em que foi usada uma solução igualmente inflada
    https://news.ycombinator.com/item?id=46688971

  • É interessante ver o fluxo em que o trabalho de migração está saindo de codemod e indo para LLMs
    Embora codemods sejam mais determinísticos, fico me perguntando se essa era está chegando ao fim

    • Penso em como seria usar LLMs para criar codemods determinísticos
      Depois, seria possível executar o codemod e adicionar outras salvaguardas determinísticas de forma iterativa, colocando o resultado de volta na LLM para melhorar o codemod
    • O enquadramento do texto original é uma forma perigosa de pensar. O codemod em si pode existir ou não
      O que se quer não deveria ser um arquivo de skill para LLMs, mas documentação para pessoas. Basta escrever um guia de migração para pessoas. Vai levar um tempo até perceberem que, no fim, o arquivo de skill e a documentação deveriam ser a mesma coisa
    • Fico curioso sobre o que codemod significa aqui
    • Acho que os dois se complementam perfeitamente e continuarão assim
      Para regras mais flexíveis, continuo usando arquivos AGENTS.md; para regras rígidas, uso regras customizadas de linter. Vejo isso como uma forma de ficar com o melhor dos dois mundos

  • Quero usar shad-CN, mas toda vez acabo voltando para o Mantine
    É muito mais rápido do que lembrar quais contextos precisam ser conectados

  • Fico me perguntando se essa mudança traz resultados melhores para os usuários, como redução do tamanho do bundle
    Ou se parece mais uma mudança para melhorar a qualidade de vida dos mantenedores do Shadcn

  • Fico curioso sobre qual seria o equivalente ao shadcn/ui no Angular
    O PrimeNG mudou recentemente a licença, então estou procurando uma alternativa adequada para novos projetos

    • Duas tentativas[1] de colocar a mudança de licença do PrimeNG no HN fracassaram, mas, se você usa as bibliotecas de componentes da PrimeTek, precisa saber dessa mudança
      PrimeNG, PrimeReact e PrimeVue vão todos se tornar totalmente closed source, e a partir de 2027 uma licença de uso contínuo custará US$ 800 por assento de desenvolvedor[2]. Os repositórios existentes serão arquivados[3]. O PrimeFaces continuará open source, mas agora será desenvolvido e mantido por desenvolvedores voluntários independentes, não por funcionários da PrimeTek
      [1]: https://hn.algolia.com/?q=The+Next+Chapter+of+PrimeTek
      [2]: https://primeui.dev/nextchapter
      [3]: https://github.com/primefaces/primeng
    • Estou na mesma situação. No trabalho usamos PrimeNG em vários apps, e parece que ficaremos presos ao Angular 21 até encontrarmos um substituto adequado
      Dito isso, um grupo fez um fork do PrimeNG e disse que pretende mantê-lo. O novo nome ainda não foi definido
      https://github.com/openng-org/open-prime
    • https://spartan.ng/
    • Estou criando o Lily Design System como resposta ao fato de ainda não haver um sistema parecido com o Shadcn disponível para uso direto em várias stacks, como Svelte, Angular e Nunchucks
      Tudo é gratuito e open source, e se você enviar feedback ou sugestões, será fácil adicioná-los ao Lily
      https://lilydesignsystem.github.io
    • https://www.zardui.com

  • Sinto falta dos antigos guias de estilo esqueumórficos
    Acho que o último foi o Blueprint

  • A URL deveria ser https://ui.shadcn.com/docs/changelog/2026-07-base-ui-default