HextaUI y shadcn/ui

La respuesta corta

Usa shadcn/ui cuando quieras un punto de partida limpio y pienses escribir tú mismo los estados de carga, error y vacío. Añade HextaUI cuando quieras tener ya hechos esos estados, el movimiento y los detalles de accesibilidad, o cuando necesites un componente que shadcn/ui no incluye. Puedes combinar ambos en un mismo proyecto, componente a componente.

Qué se mantiene igual

• Instalas con la CLI de shadcn y el código fuente se copia en tu proyecto. Nada queda encerrado dentro de un paquete.
• Los componentes conservan los nombres, las partes y las props de shadcn/ui, así que Dialog, DialogTrigger y DialogContent funcionan como esperas.
• Los estilos usan los mismos tokens de tema, como --background, --primary y --radius, con Tailwind CSS v4.
• Los archivos se copian en @/components/ui, junto a los componentes de shadcn/ui que ya tengas.

Añadir un componente se ve así:

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

Qué añade HextaUI

• Estados terminados. Los botones muestran feedback de pendiente, éxito y error a partir de la promesa que devuelves. Los switches guardan y revierten. Los inputs vibran cuando no son válidos. Los spinners esperan antes de aparecer para que el trabajo rápido no parpadee.
• Movimiento interrumpible. Las animaciones comparten un único conjunto de curvas de easing y duraciones, se pueden revertir a mitad de camino y se convierten en un fundido cuando el movimiento reducido está activado.
• Táctil, de derecha a izquierda y alto contraste. Las áreas táctiles crecen en pantallas táctiles, los inputs de texto se mantienen en 16px para que iOS no haga zoom, los diseños se reflejan en idiomas de derecha a izquierda y los anillos de foco siguen visibles en el modo de alto contraste de Windows.
• Componentes que no están en la lista de shadcn/ui en el momento de escribir esto (octubre de 2026), como Tree, Video player, Questionnaire, Number flow, Shimmer y Scroll fade.
• 9 hooks y 5 utilidades que puedes instalar por separado, como useButtonFeedback y useDelayedLoading.
• 22 bloques para productos de IA, como un hilo de chat, llamadas a herramientas y modo de voz. Forman parte de HextaUI Pro, que es de pago, y Prompt Input es gratuito.
• Documentación pensada también para agentes. Cada página tiene una versión en Markdown y hay un servidor MCP que tu asistente puede consultar.

Cuándo es mejor usar solo shadcn/ui

• Quieres primitivos de Radix. Los componentes de HextaUI están construidos solo sobre Base UI.
• Quieres el componente más pequeño posible y prefieres añadir estados y movimiento tú mismo. Los componentes de HextaUI llevan más código porque cubren más casos.
• Dependes de los bloques, gráficos y temas de shadcn/ui, o de los ports de la comunidad para Vue y Svelte. HextaUI es solo para React.
• Necesitas la mayor comunidad y la mayor cantidad de ejemplos de terceros. shadcn/ui tiene muchos más de ambos.

Usar ambos a la vez

Como los nombres y los tokens coinciden, puedes reemplazar un componente cada vez. Ejecuta el comando add con --overwrite para cambiar un componente de shadcn/ui por la versión de HextaUI y revisa el diff en git antes de quedarte con él. Los componentes que no reemplaces siguen funcionando. HextaUI tiene 65 componentes y Instalación explica los tokens de tema que esperan.