Introdução

O que é o HextaUI

HextaUI é uma coleção de 65 componentes, 9 hooks e 5 utilitários para React. Você os adiciona com a shadcn CLI, o código-fonte vai para o seu projeto e, a partir daí, é seu código para ler e alterar.

Cada componente mantém a API do shadcn/ui que você já conhece. A diferença é o trabalho que você teria de fazer por conta própria: os estados, os casos extremos e os pequenos detalhes que fazem uma interface parecer acabada.

Início rápido

Em um projeto configurado com shadcn/ui, adicione um componente:

pnpm dlx shadcn@latest add https://hextaui.com/r/button.json

Depois importe-o de @/components/ui.

import { Button } from "@/components/ui/button"

export function SaveButton() {
  return (
    <Button feedback onClick={() => saveSettings()}>
      Save changes
    </Button>
  )
}

Os requisitos, como adicionar tudo de uma vez e o namespace @hextaui estão em Instalação.

O que você recebe

Isso vale para todos os componentes, então você não precisa verificar um por um.

Movimento

As animações usam as curvas de easing do tema e podem ser interrompidas e revertidas no meio. Com movimento reduzido ativado, o movimento vira um simples fade.

Teclado e leitores de tela

Tudo funciona só com o teclado, e o foco vai para onde você espera quando os popups abrem e fecham. As mudanças também são anunciadas: toasts, estados de carregamento e de salvo, seleções e trocas de slide.

Toque e telas pequenas

As áreas de toque crescem em telas sensíveis ao toque, os inputs de texto ficam em 16px para que o iOS não aplique zoom, e os popups permanecem na tela até 320px de largura. Os layouts são espelhados para idiomas da direita para a esquerda.

Alto contraste

Os anéis de foco, as bordas dos controles e os estados selecionados permanecem visíveis no modo de alto contraste do Windows, e o tema padrão atende ao contraste WCAG AA nos modos claro e escuro.

Construído com

• shadcn/ui com o estilo base-vega
• Primitivas do Base UI para comportamento e acessibilidade
• Tailwind CSS v4, com tokens de tema para cor, raio e easing
• Ícones Tabler

Assistentes de IA

Cada página tem uma versão em Markdown, e /llms.txt lista todas. Assistentes com suporte a MCP podem se conectar ao servidor MCP do HextaUI para pesquisar a documentação, ler as APIs dos componentes e obter comandos de instalação.

Licença

O HextaUI é de código aberto sob a licença MIT, gratuito para projetos pessoais e comerciais.