HextaUI e shadcn/ui

A resposta curta

Use o shadcn/ui quando quiser um ponto de partida limpo e pretender escrever você mesmo os estados de carregamento, erro e vazio. Adicione o HextaUI quando quiser esses estados, o movimento e os detalhes de acessibilidade já prontos, ou quando precisar de um componente que o shadcn/ui não oferece. Você pode misturar os dois em um projeto, um componente por vez.

O que continua igual

• Você instala com a shadcn CLI, e o código-fonte é copiado para o seu projeto. Nada fica preso dentro de um pacote.
• Os componentes mantêm os nomes, as partes e as props do shadcn/ui, então Dialog, DialogTrigger e DialogContent funcionam como você espera.
• A estilização usa os mesmos tokens de tema, como --background, --primary e --radius, com Tailwind CSS v4.
• Os arquivos vão para @/components/ui, ao lado dos componentes do shadcn/ui que você já tem.

Adicionar um componente é assim:

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

O que o HextaUI acrescenta

• Estados prontos. Os botões mostram feedback de pendente, sucesso e erro a partir da promise que você retorna. Os switches salvam e revertem. Os inputs tremem quando são inválidos. Os spinners esperam antes de aparecer para que tarefas rápidas não pisquem.
• Movimento interrompível. As animações compartilham um único conjunto de curvas de easing e durações, podem ser revertidas no meio e viram um fade quando o movimento reduzido está ativado.
• Toque, da direita para a esquerda e alto contraste. As áreas de toque aumentam em telas sensíveis ao toque, os inputs de texto ficam em 16px para o iOS não dar zoom, os layouts são espelhados em idiomas da direita para a esquerda e os anéis de foco continuam visíveis no modo de alto contraste do Windows.
• Componentes que não estão na lista do shadcn/ui no momento da escrita (outubro de 2026), como Tree, Video player, Questionnaire, Number flow, Shimmer e Scroll fade.
• 9 hooks e 5 utilitários que você pode instalar separadamente, como useButtonFeedback e useDelayedLoading.
• 22 blocos para produtos de IA, como thread de chat, chamadas de ferramentas e modo de voz. Fazem parte do HextaUI Pro, que é pago, e o Prompt Input é gratuito.
• Documentação escrita também para agentes. Cada página tem uma versão em Markdown, e há um servidor MCP que seu assistente pode consultar.

Quando só o shadcn/ui é a melhor escolha

• Você quer primitivos do Radix. Os componentes do HextaUI são construídos apenas sobre o Base UI.
• Você quer o menor componente possível e prefere adicionar estados e movimento por conta própria. Os componentes do HextaUI têm mais código porque tratam mais casos.
• Você depende dos blocos, gráficos e temas do shadcn/ui, ou dos ports da comunidade para Vue e Svelte. O HextaUI é só para React.
• Você precisa da maior comunidade e do maior número de exemplos de terceiros. O shadcn/ui tem muito mais dos dois.

Usando os dois juntos

Como os nomes e os tokens são os mesmos, você pode substituir um componente por vez. Execute o comando add com --overwrite para trocar um componente do shadcn/ui pela versão do HextaUI e revise o diff no git antes de mantê-lo. Os componentes que você não substituir continuam funcionando. O HextaUI tem 65 componentes, e Instalação explica os tokens de tema que eles esperam.