71 componentes pra sistema. A aba de temas muda a identidade ao vivo.
Theme Builder: Accent, Base, fonte, raio. ColorPicker, ComboBox e o catálogo. Por baixo, o trabalho de acessibilidade da Adobe.
A home do HeroUI escreve isso hoje: Beautiful by default. Customizable by design. Bonito no padrão. Personalizável no projeto. Tem até um botão Design theme no topo da home, apontando pra essa aba.
Foi a aba de temas que eu mais mexi. Cor de destaque, base, fonte, raio. O board inteiro muda junto.
O site é o heroui.com. Se o nome não te diz nada, o antigo diz: era o NextUI. O selo na home, hoje: 30.6k. A API do GitHub no mesmo dia: 30.640.
A aba de temas
Essa página é o heroui.com/en/themes. O título na tela: Theme Builder.
O que você mexe, na barra de baixo:
- Accent. A cor de destaque. Uma barra de matiz. A URL guarda o hue. A que eu abri hoje: hue 207, o teal do print.
- Base. O cinza da interface.
- Font Family. No print: Inter.
- Radius. O arredondamento. No print: M Medium.
- Radius Form. O raio dos campos. No print: L Large.
- Theme. No print: Custom. Dá pra alternar claro e escuro no ícone do canto.
A aba Components é o playground grátis: formulário, OTP, botão, card, tudo reagindo ao tema. Dashboard, Mail, Chat e Finances existem no topo. No canto: Available in Pro as template. Ou seja: a prévia de produto completo é do Pro. O que você personaliza de graça é o board de componentes.
A documentação pede o Builder e depois exportar o CSS pro projeto. Manda a IA ler essa página e aplicar. O ícone de compartilhar no studio copia o link do tema, com o hue e o base na URL, igual o endereço que eu abri.
Isso resolve a parte que a IA mais erra: o tom. Você escolhe a identidade no Builder, leva o CSS, e pede o componente. Sem ficar descrevendo azul no prompt até o botão nascer outra cor.
O catálogo
Abre heroui.com/en/docs/react/components. Eu e a IA lemos o menu da documentação hoje, 11 de setembro. 71 fichas.
Os 71 são de graça. Existe o HeroUI Pro, com bloco e template. O banner no topo da doc avisa: Pro is live.
ColorPicker e ComboBox
Duas fichas que eu abri depois do tema.
O ColorPicker. A ficha diz: um seletor que sincroniza o valor da cor entre várias peças. Área, barra de matiz, amostra, código. No preview de hoje o popover abriu com Hue 208.15°.
O ComboBox. Campo mais lista. Você digita, a lista filtra. Na ficha: Favorite Animal. No preview de hoje: ca no campo e Cat na lista.
O que tem por baixo
A home escreve React Aria. É o trabalho de acessibilidade da Adobe: teclado, foco, leitor de tela. Menu que já responde seta e Esc. Modal que prende o Tab e devolve o foco quando fecha. Banco, saúde, governo exigem isso por contrato.
Tabela com ordenação e paginação. DatePicker. InputOTP de seis dígitos. Continua valendo. A IA monta isso com div. Essa biblioteca não.
Se o seu produto tem marca editável, o ColorPicker evita um inferno. Se a tela tem busca enquanto digita, o ComboBox já traz seta, Enter e Esc. Você não escreve esse comportamento.
Como instalar
O comando da documentação:
npx heroui-cli@latest initNão fica copiando na mão. Manda a sua IA ler a página de instalação e o Theme Builder, e preparar o projeto. Depois você descreve a tela.
O prompt
HeroUI. Lê a documentação.
Aplica o tema do Theme Builder no projeto, do jeito da doc.
Monta esta tela: <descreva>.
Usa o que a biblioteca já tem. Não inventa componente.
Não troca botão pronto por div com clique. Isso quebra teclado e leitor de tela.
Todo campo precisa de rótulo e mensagem de erro.Onde não serve
- Landing de vendas. Essa biblioteca é pra tela que tem gente usando todo dia.
- Gráfico. Ela não tem.
- Dashboard, Mail, Chat e Finances no Theme Builder são template do Pro. O playground grátis é a aba Components.
Abre a aba de temas. Mexe no Accent. Cola o prompt. Bora testar.