Los estados difíciles, resueltos. Bloques prácticos para shadcn/ui

Bloques de producción para productos creados con IA, desde el chat que hace streaming, reintenta y pregunta antes de ejecutar una herramienta hasta las pantallas que lo rodean. Construidos sobre 65 componentes gratuitos y de código abierto, y listos para que tu agente los instale con la CLI de shadcn.

Vistas previas en vivo

Acerca de

HextaUI es una colección de componentes React construidos sobre shadcn/ui y Base UI. Cubre las partes cotidianas de una interfaz, desde botones y formularios hasta menús, tablas y chat, y los entrega como código fuente que es tuyo.

Cada componente está pensado para las partes que suelen omitirse: los estados de carga, error y vacío, el movimiento que puede interrumpirse a medias, los caminos de teclado, lo que anuncia un lector de pantalla y un diseño que aguanta a 320 píxeles o en un idioma de derecha a izquierda.

El movimiento usa un único conjunto de curvas de easing y duraciones, respeta el ajuste de movimiento reducido y puede interrumpirse e invertirse a medias. Los anillos de foco siguen la forma de lo que rodean, y cada parte interactiva funciona solo con el teclado.

El aspecto es discreto a propósito: superficies neutras, bordes de línea fina, sombras solo en lo que flota sobre la página y esquinas que se mantienen concéntricas cuando una forma está dentro de otra. Tu marca se expresa a través de tus tokens de tema, no de los nuestros.

Los componentes se reconstruyen uno a uno y solo se publican cuando todos sus estados funcionan. Cada uno tiene una página de documentación que muestra esos estados en vivo, para que pruebes los casos límite antes de instalar nada.

La documentación está escrita tanto para personas como para agentes. Cada página también se publica como Markdown, y llms.txt mapea toda la librería, así que un asistente de IA lee las mismas referencias de API y ejemplos que tú.

El código es tuyo. La CLI de shadcn copia el código fuente en tu proyecto, así que puedes leerlo, cambiarlo y conservarlo sin esperar a la actualización de un paquete. Todo es de código abierto en GitHub.

Qué incluye

Cómo funciona

  1. Configura shadcn/uiEjecuta shadcn init en un proyecto React 19 con Tailwind CSS v4. Si el proyecto ya usa shadcn/ui, sáltate este paso.
  2. Añadir un componentePasa su URL de registro a la CLI de shadcn. El código fuente, sus dependencias, los tokens de tema y los componentes de HextaUI sobre los que se construye llegan a tu proyecto.
  3. Hazlo tuyoImpórtalo desde @/components/ui como cualquier otro componente de shadcn/ui y luego cambia el marcado, el movimiento o los estilos. Nada queda bloqueado dentro de un paquete.
  4. Mantente al díaLos componentes mejoran a la vista de todos en GitHub. Cuando uno cambia, ejecuta el mismo comando add con --overwrite y revisa el diff en git antes de quedarte con él.
  5. Trae a tu agenteApunta Claude Code, Cursor o cualquier cliente MCP a https://hextaui.com/mcp y podrá consultar props y ejemplos mientras escribe código contigo.

HextaUI Pro

Pro es un conjunto creciente de bloques completos construidos con los mismos componentes: un hilo de chat, texto en streaming, llamadas a herramientas, tareas de agentes, un bloque de código con diffs, modo de voz y más. Son las pantallas que un producto de IA necesita desde el primer día, con los estados y el movimiento ya resueltos, y las pantallas de cuenta, ajustes y paneles que las rodean llegarán a continuación.

Los kits de IA gratuitos te dan un chat que se ve bien. Pro trata de lo que viene después: detener una respuesta a mitad de frase y reintentarla, aprobar una llamada a una herramienta antes de que se ejecute, alternar entre versiones de un mensaje y un hilo que no salta mientras el modelo sigue hablando. Cada bloque incluye un ejemplo funcional con AI SDK.

Cada bloque tiene una vista previa en vivo que cualquiera puede abrir, y se instala con la misma CLI de shadcn desde un registro privado. Pro cuesta $49 una sola vez para un desarrollador, o $149 para un equipo de 10, hasta el 30 de noviembre de 2026. Después, Solo cuesta $79 y Team $249, para proyectos personales y comerciales ilimitados. Compara los planes o instala Prompt Input gratis.

Las cuatro vistas previas de la parte superior de esta página son bloques Pro funcionando en vivo. Thinking muestra el razonamiento de un modelo y sus pasos con herramientas a medida que llegan. Prompt input gestiona la elección de modelo y esfuerzo, el dictado, las menciones, los comandos y la subida de archivos. Chat thread renderiza una conversación completa, y Voice mode la convierte en una hablada, mediante la voz del navegador o una API de voz en tiempo real.

Solo cubre a un desarrollador. Team cubre hasta 10, gestionados por correo electrónico desde tu cuenta, con un token compartido permitido en CI. Los clientes y colegas que solo usan el producto terminado no necesitan una plaza. Si no es para ti, recibes un reembolso completo en 30 días, sin preguntas.

Antes de que preguntes