72Commencer

HextaUI et shadcn/ui

HextaUI ne remplace pas shadcn/ui. C’est un registre que vous ajoutez à un projet shadcn/ui, avec la même CLI, les mêmes noms de composants et les mêmes tokens de thème. Cette page explique ce qu’il apporte et quand vous n’en avez pas besoin.

La réponse courte

Utilisez shadcn/ui si vous voulez un point de départ propre et prévoyez d’écrire vous-même les états de chargement, d’erreur et de vide. Ajoutez HextaUI si vous voulez ces états, le mouvement et les détails d’accessibilité déjà faits, ou si vous avez besoin d’un composant que shadcn/ui ne fournit pas. Vous pouvez combiner les deux dans un même projet, composant par composant.

Ce qui reste identique

  • Vous installez avec la shadcn CLI, et le code source est copié dans votre projet. Rien n’est enfermé dans un paquet.
  • Les composants conservent les noms, les parties et les props de shadcn/ui, donc Dialog, DialogTrigger et DialogContent fonctionnent comme vous l’attendez.
  • Le style utilise les mêmes tokens de thème, comme --background, --primary et --radius, avec Tailwind CSS v4.
  • Les fichiers sont placés dans @/components/ui, à côté des composants shadcn/ui que vous avez déjà.

Ajouter un composant ressemble à ceci :

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

Ce que HextaUI ajoute

  • Des états finalisés. Les boutons affichent un retour d’attente, de succès et d’erreur à partir de la promesse que vous renvoyez. Les switchs enregistrent et annulent. Les champs tremblent lorsqu’ils sont invalides. Les spinners attendent avant d’apparaître afin que les tâches rapides ne clignotent pas.
  • Un mouvement interruptible. Les animations partagent un même jeu de courbes d’easing et de durées, peuvent être inversées en cours de route et se transforment en fondu lorsque la réduction des animations est activée.
  • Tactile, de droite à gauche et contraste élevé. Les zones tactiles s’agrandissent sur les écrans tactiles, les champs de texte restent à 16px pour qu’iOS ne zoome pas, les mises en page sont inversées pour les langues de droite à gauche et les anneaux de focus restent visibles en mode contraste élevé de Windows.
  • Des composants absents de la liste de shadcn/ui au moment de la rédaction (octobre 2026), comme Tree, Video player, Questionnaire, Number flow, Shimmer et Scroll fade.
  • 9 hooks et 5 utilitaires que vous pouvez installer séparément, comme useButtonFeedback et useDelayedLoading.
  • 22 blocs pour les produits d’IA, comme un fil de discussion, des appels d’outils et un mode vocal. Ils font partie de HextaUI Pro, qui est payant, et Prompt Input est gratuit.
  • Une documentation écrite aussi pour les agents. Chaque page a une version Markdown, et un serveur MCP que votre assistant peut interroger.

Quand shadcn/ui seul est le meilleur choix

  • Vous voulez des primitives Radix. Les composants HextaUI sont construits uniquement sur Base UI.
  • Vous voulez le composant le plus léger possible et préférez ajouter vous-même les états et le mouvement. Les composants HextaUI contiennent plus de code parce qu’ils gèrent plus de cas.
  • Vous dépendez des blocs, graphiques et thèmes de shadcn/ui, ou des portages communautaires pour Vue et Svelte. HextaUI ne fonctionne qu’avec React.
  • Vous avez besoin de la plus grande communauté et du plus grand nombre d’exemples tiers. shadcn/ui en a beaucoup plus dans les deux cas.

Utiliser les deux ensemble

Comme les noms et les tokens correspondent, vous pouvez remplacer un composant à la fois. Exécutez la commande add avec --overwrite pour remplacer un composant shadcn/ui par la version HextaUI, puis relisez le diff dans git avant de le conserver. Les composants que vous ne remplacez pas continuent de fonctionner. HextaUI compte 65 composants, et Installation décrit les tokens de thème qu’ils attendent.