HeroUI — não adotado

· Padrão Frontend
Juan Kalleo
Juan Kalleo
Fullstack Engineer

O que é

Biblioteca de componente React (@heroui/react, antes chamada NextUI) estilizada com Tailwind CSS por baixo, usando React Aria (da Adobe) pra acessibilidade e Framer Motion pra animação — diferente do MUI, não usa CSS-in-JS: os componentes vêm com classe Tailwind já aplicada, customizável via tema próprio.

Por que não é o que este projeto usa

Mesmo sendo Tailwind-based (sem o conflito de dois sistemas de CSS-in-JS que descarta o MUI — ver MUI), HeroUI ainda é um componente React com runtime próprio: cada botão/modal/input é JavaScript importado da lib, com o próprio comportamento e dependência (React Aria, Framer Motion) embutidos. DaisyUI resolve o mesmo problema visual de um jeito estruturalmente diferente — é só classe CSS (um plugin Tailwind), sem componente JavaScript nenhum: o HTML/JSX continua sendo escrito à mão (<button class="btn btn-primary">), sem importar comportamento de lugar nenhum. Isso significa zero dependência de runtime adicional, zero decisão de "como estender o componente da lib quando ele não faz exatamente o que preciso" — o CSS é só aplicado em cima de qualquer marcação.

O trade-off real entre as duas abordagens

HeroUI dá comportamento pronto (acessibilidade de teclado, foco, animação) de graça — DaisyUI exige que esse comportamento seja implementado à mão ou venha de outra lib headless (o TanStack Table já cumpre esse papel pra tabela, ver TanStack Table). Pra um projeto que já tem essa peça (headless, comportamento) resolvida caso a caso e busca controle total sobre a marcação final, DaisyUI continua sendo a peça mais simples — HeroUI voltaria a fazer sentido se o projeto precisasse de um catálogo de componente pronto muito maior do que o DaisyUI oferece, mais rápido do que construir/estender componente por componente.

Leitura de apoio