--- title: "HeroUI v3 chega como reescrita completa para React e React Native" author: "Ignácio Afonso" date: "2026-07-02 07:30:00-03" category: "Tecnologia & Desenvolvimento" url: "http://desbugados.scale.press/portal/desbugados/post/2026/07/02/heroui-v3-chega-como-reescrita-completa-para-react-e-react-native/md" --- ## Resumo - HeroUI v3 foi lançado em março de 2026 como reescrita completa do zero para React e React Native. - Inclui mais de 75 componentes web (21 novos) e 37 componentes para React Native, construídos sobre React Aria e Tailwind CSS v4. - Animações migradas para CSS puro, sem runtime JavaScript, com suporte a OKLCH, variáveis CSS e modificadores BEM. - Compatível com React 19 e Next.js, usando API de componentes compostos e incluindo ferramentas para IA como MCP Server e llms.txt. - Downloads semanais de ~341 mil no npm para a versão React e ~27.700 estrelas no GitHub; v2 e v3 não coexistem. - Releases pontuais até v3.2.1 em junho de 2026 melhoraram bundles e acessibilidade. - Criado por Junior García, com apoio da Y Combinator e licença Apache 2.0. --- Em março de 2026, o **HeroUI** — conhecido anteriormente como NextUI — chegou com sua versão 3, uma reescrita completa do zero que busca resolver o 'bug' de componentes rígidos e dependências excessivas que limitavam a flexibilidade em projetos React e React Native de grande escala. Essa atualização não apenas adiciona funcionalidades, mas reconstrói toda a fundação sobre **React Aria Components** para acessibilidade e **Tailwind CSS v4** para estilização, expondo variáveis CSS, cores OKLCH e modificadores BEM que permitem customizações profundas sem sacrificar a consistência visual. O que antes exigia hacks em JavaScript agora flui de forma mais natural, e a promessa é clara: desenvolvedores podem modernizar interfaces sem perder a confiabilidade que sustenta operações diárias em aplicações críticas. ## A Jornada Histórica por Trás da Reescrita do HeroUI Fundado por **Junior García** e apoiado pela Y Combinator sob licença Apache 2.0, o HeroUI carrega uma história de evolução que remonta a necessidades reais de equipes que precisavam de componentes acessíveis e estilizados rapidamente. A versão 3 representa o ápice dessa trajetória, onde cada um dos componentes foi reescrito do início para separar estilos da implementação, movendo todas as animações para CSS puro e eliminando qualquer runtime de JavaScript associado. É como aquele sistema legados que processa transações há décadas: funciona, mas chega o momento de modernizar sem jogar tudo fora, e aqui a analogia se encaixa perfeitamente porque a nova arquitetura mantém a estabilidade enquanto abre portas para integrações futuras. Uma piada sem graça para ilustrar: por que o componente de botão foi ao médico? Porque estava sofrendo de 'dependência transitiva excessiva' — e acredite, a v3.0.3 cortou 90% dessas dependências ao atualizar o React Aria para 1.17.0. Essa reescrita não surgiu do nada; ela responde a demandas crescentes por compatibilidade com **React 19** e **Next.js**, além de oferecer uma API de componentes compostos que permite composições mais flexíveis em vez de props monolíticas. Os números falam por si: mais de 75 componentes web, dos quais 21 são novos, e uma biblioteca dedicada ao React Native com 37 componentes que trazem a mesma filosofia para o mundo mobile. Releases pontuais como a v3.2.1 de 17 de junho de 2026 externalizaram o react-aria do bundle principal e corrigiram layouts no SwitchGroup, mostrando um ciclo de manutenção ativo que preserva o que funciona e corrige o que precisa de atenção. ## Arquitetura Moderna: Tailwind v4, Acessibilidade e Desempenho sem Compromissos Construído sobre **Tailwind CSS v4**, o HeroUI v3 expõe tokens de cores OKLCH e variáveis CSS que facilitam temas dinâmicos, enquanto os modificadores BEM permitem que desenvolvedores inspecionem e ajustem estilos com ferramentas familiares de navegador. As animações agora são puramente CSS com controle via data-reduce-motion, o que significa menos JavaScript executando em tempo de execução e melhor desempenho em dispositivos com recursos limitados. Essa mudança responde à pergunta 'e daí?': equipes que antes lutavam com flickering em animações ou problemas de acessibilidade agora têm uma base sólida que integra diretamente com React Aria, garantindo conformidade sem esforço adicional. O resultado é uma biblioteca que equilibra a reverência pelo código estável de versões passadas com a consciência crítica de que dependências pesadas precisam ser podadas para o futuro. Além disso, o suporte a **React 19** e Next.js abre caminho para aplicações que aproveitam as últimas otimizações do ecossistema React, enquanto a API de componentes compostos permite criar variações personalizadas de forma declarativa. Não é apenas sobre adicionar features; é sobre redefinir como os componentes interagem, desacoplando estilos para que atualizações de tema não quebrem lógicas internas. Com downloads semanais de aproximadamente 341 mil para @heroui/react e 11 mil para heroui-native, além de cerca de 27.700 estrelas no GitHub, fica evidente que a comunidade já reconhece o valor prático dessa modernização. ## Ferramentas para o Futuro: IA, Documentação e Kits de Design Um diferencial notável da v3 é a inclusão de MCP Server, Agent Skills, arquivo llms.txt para desenvolvimento assistido por IA e o Figma Kit v3, que conecta designers e desenvolvedores em um fluxo mais integrado. Esses elementos transformam a biblioteca de uma simples coleção de componentes em uma plataforma que prepara equipes para o cenário atual de desenvolvimento acelerado por inteligência artificial. A documentação em chinês adicionada na v3.1.0 de maio de 2026 e correções contínuas mostram atenção a uma base global de usuários, sem perder o foco em praticidade. Importante notar que, embora um upgrade completo exija a substituição total, as versões 2 e 3 podem coexistir no mesmo projeto por meio do fluxo de migração incremental, e um guia de migração detalhado está disponível para facilitar a transição sem riscos desnecessários. Essa camada de ferramentas para IA responde diretamente às necessidades de profissionais que querem prototipar mais rápido, mantendo a confiabilidade que caracteriza sistemas bem estabelecidos. Ao invés de promessas vagas, os fatos mostram releases regulares — v3.0.3, v3.1.0, v3.2.0 em junho de 2026 — que refinam a experiência sem introduzir quebras abruptas. ## Caixa de Ferramentas: Próximos Passos Práticos para Adotar o HeroUI v3 Para começar, verifique a documentação oficial em heroui.com/docs/react/migration e avalie o guia de migração se seu projeto ainda usa a v2, decidindo entre o método de transição completa ou a coexistência incremental. Instale via npm com @heroui/react para web ou heroui-native para React Native, e explore o Figma Kit v3 para alinhar design e código desde o início. Teste a API de componentes compostos em um protótipo pequeno para sentir a diferença na flexibilidade, e aproveite o llms.txt para integrar com ferramentas de IA em seu fluxo de trabalho. Monitore os releases pontuais no GitHub para manter-se atualizado, e lembre-se de que a reescrita prioriza desempenho e acessibilidade sem sacrificar a estabilidade que sustenta projetos reais. Com esses passos, você assume o controle sobre a evolução da sua interface, combinando o melhor do legado com as inovações necessárias para o presente.