Os estados difíceis, resolvidos. Blocks práticos para shadcn/ui

Blocks de produção para produtos feitos com IA, do chat que faz streaming, tenta de novo e pergunta antes de uma ferramenta rodar até as telas ao redor. Construídos sobre 65 componentes gratuitos e de código aberto, e prontos para o seu agente instalar com a shadcn CLI.

Prévias ao vivo

Sobre

O HextaUI é uma coleção de componentes React construídos sobre o shadcn/ui e o Base UI. Cobre as partes do dia a dia de uma interface, de botões e formulários a menus, tabelas e chat, e os entrega como código-fonte que é seu.

Cada componente é feito para as partes que normalmente são deixadas de lado: os estados de carregamento, erro e vazio, movimento que pode ser interrompido no meio, os caminhos pelo teclado, o que um leitor de tela anuncia e um layout que ainda se sustenta em 320 pixels ou em um idioma da direita para a esquerda.

O movimento usa um único conjunto de curvas de easing e durações, respeita a configuração de movimento reduzido e pode ser interrompido e revertido no meio. Os anéis de foco seguem a forma do que contornam, e toda parte interativa funciona só com o teclado.

O visual é discreto de propósito: superfícies neutras, bordas de linha fina, sombras apenas em coisas que flutuam sobre a página e cantos que permanecem concêntricos quando uma forma fica dentro de outra. Sua marca aparece pelos seus tokens de tema, não pelos nossos.

Os componentes são reconstruídos um de cada vez e só são lançados quando todos os estados funcionam. Cada um ganha uma página de documentação que mostra esses estados ao vivo, para você testar os casos extremos antes de instalar qualquer coisa.

A documentação é escrita tanto para pessoas quanto para agentes. Toda página também é publicada em Markdown, e o llms.txt mapeia a biblioteca inteira, então um assistente de IA lê as mesmas referências de API e exemplos que você.

O código é seu. A shadcn CLI copia o código-fonte para o seu projeto, então você pode lê-lo, alterá-lo e mantê-lo, sem esperar uma atualização de pacote. Tudo é código aberto no GitHub.

O que há dentro

Como funciona

  1. Configure o shadcn/uiExecute shadcn init em um projeto React 19 com Tailwind CSS v4. Se o projeto já usa shadcn/ui, pule para a próxima etapa.
  2. Adicione um componentePasse a URL do registry dele para a shadcn CLI. O código-fonte, suas dependências, os tokens de tema e quaisquer componentes do HextaUI em que ele se baseia chegam ao seu projeto.
  3. Faça do seu jeitoImporte de @/components/ui como qualquer outro componente do shadcn/ui e depois mude a marcação, o movimento ou os estilos. Nada fica preso dentro de um pacote.
  4. Fique atualizadoOs componentes evoluem abertamente no GitHub. Quando um muda, execute o mesmo comando add com --overwrite e revise o diff no git antes de mantê-lo.
  5. Traga seu agenteAponte o Claude Code, o Cursor ou qualquer cliente MCP para https://hextaui.com/mcp e ele poderá consultar props e exemplos enquanto escreve código com você.

HextaUI Pro

O Pro é um conjunto crescente de blocks completos construídos com os mesmos componentes: uma conversa de chat, texto em streaming, chamadas de ferramenta, todos de agentes, um bloco de código com diffs, modo de voz e mais. São as telas de que um produto de IA precisa desde o primeiro dia, com os estados e o movimento já resolvidos, e as telas de conta, configurações e dashboard ao redor vêm a seguir.

Kits de IA gratuitos dão a você um chat com boa aparência. O Pro cuida do que vem depois: interromper uma resposta no meio da frase e tentar de novo, aprovar uma chamada de ferramenta antes de executá-la, alternar entre versões de mensagem e uma conversa que não salta enquanto o modelo ainda está falando. Todo block vem com um exemplo funcional do AI SDK.

Cada block tem uma prévia ao vivo que qualquer pessoa pode abrir e é instalado pela mesma shadcn CLI a partir de um registry privado. O Pro custa US$ 49 uma vez para um desenvolvedor, ou US$ 149 para uma equipe de 10, até 30 de novembro de 2026. Depois disso, o Solo custa US$ 79 e o Team US$ 249, para projetos pessoais e comerciais ilimitados. Compare os planos ou instale o Prompt Input de graça.

As quatro prévias no topo desta página são blocks Pro rodando ao vivo. Thinking mostra o raciocínio e as etapas de ferramenta de um modelo conforme chegam em streaming. Prompt input cuida da escolha de modelo e esforço, ditado, menções, comandos e upload de arquivos. Chat thread renderiza uma conversa completa, e Voice mode a transforma em uma conversa falada, pela voz do navegador ou por uma API de voz em tempo real.

O Solo cobre um desenvolvedor. O Team cobre até 10, gerenciados por e-mail a partir da sua conta, com um token compartilhado permitido no CI. Clientes e colegas que só usam o produto final não precisam de uma licença. Se não for para você, há reembolso total em até 30 dias, sem perguntas.

Antes de perguntar