72Commencer

Les états difficiles, gérés. Des blocs pratiques pour shadcn/ui

Des blocs de production pour les produits construits avec l'IA, du chat qui diffuse, relance et demande avant d'exécuter un outil jusqu'aux écrans qui l'entourent. Construits sur 65 composants gratuits et open source, et prêts à être installés par votre agent avec la shadcn CLI.

Parcourir les blocksEssayer Prompt Input gratuitementMettre une étoile sur GitHub

Aperçus en direct

À propos

HextaUI est une collection de composants React construits sur shadcn/ui et Base UI. Elle couvre les éléments courants d'une interface, des boutons et formulaires aux menus, tableaux et chat, et les livre sous forme de code source qui vous appartient.

Chaque composant est conçu pour les parties qu'on omet d'habitude : les états de chargement, d'erreur et vide, un mouvement interruptible à mi-course, les chemins au clavier, ce qu'annonce un lecteur d'écran, et une mise en page qui tient encore à 320 pixels ou dans une langue de droite à gauche.

Le mouvement repose sur un seul jeu de courbes d'easing et de durées, respecte le réglage de réduction des animations, et peut être interrompu et inversé à mi-course. Les anneaux de focus épousent la forme de ce qu'ils entourent, et chaque partie interactive fonctionne au clavier seul.

L'apparence reste discrète volontairement : des surfaces neutres, des bordures en filet, des ombres uniquement sur ce qui flotte au-dessus de la page, et des coins qui restent concentriques quand une forme en contient une autre. Votre marque passe par vos tokens de thème, pas par les nôtres.

Les composants sont reconstruits un par un et ne sont publiés que lorsque chaque état fonctionne. Chacun a une page de documentation qui montre ces états en direct, pour que vous puissiez essayer les cas limites avant d'installer quoi que ce soit.

La documentation est écrite pour les humains comme pour les agents. Chaque page est aussi publiée en Markdown, et llms.txt cartographie toute la bibliothèque, si bien qu'un assistant IA lit les mêmes références d'API et exemples que vous.

Le code est à vous. La shadcn CLI copie le code source dans votre projet : vous pouvez le lire, le modifier et le garder, sans attendre la mise à jour d'un package. Tout est open source sur GitHub.

Ce qu'il contient

Fonctionnement

  1. Configurer shadcn/uiExécutez shadcn init dans un projet React 19 avec Tailwind CSS v4. Si le projet utilise déjà shadcn/ui, passez directement à la suite.
  2. Ajouter un composantPassez son URL de registre à la shadcn CLI. Le code source, ses dépendances, les tokens de thème et les composants HextaUI sur lesquels il repose arrivent dans votre projet.
  3. Faites-en le vôtreImportez-le depuis @/components/ui comme n'importe quel composant shadcn/ui, puis modifiez le balisage, le mouvement ou les styles. Rien n'est enfermé dans un package.
  4. Rester à jourLes composants s'améliorent au grand jour sur GitHub. Quand l'un change, relancez la même commande add avec --overwrite et examinez le diff dans git avant de le garder.
  5. Amenez votre agentPointez Claude Code, Cursor ou n'importe quel client MCP vers https://hextaui.com/mcp et il pourra consulter les props et les exemples pendant qu'il écrit du code avec vous.

HextaUI Pro

Pro est un ensemble croissant de blocs complets construits à partir des mêmes composants : un fil de chat, du texte en streaming, des appels d'outils, des todos d'agent, un bloc de code avec diffs, le mode vocal et plus encore. Ce sont les écrans dont un produit d'IA a besoin dès le premier jour, avec les états et le mouvement déjà réglés, et les écrans de compte, de paramètres et de tableau de bord qui les entourent viennent ensuite.

Les kits d'IA gratuits vous donnent un chat à l'allure correcte. Pro s'intéresse à la suite : arrêter une réponse en pleine phrase et la relancer, approuver un appel d'outil avant son exécution, passer d'une version de message à l'autre, et un fil qui ne saute pas pendant que le modèle parle encore. Chaque bloc est livré avec un exemple AI SDK fonctionnel.

Chaque bloc a un aperçu en direct que tout le monde peut ouvrir, et s'installe via la même shadcn CLI depuis un registre privé. Pro coûte 49 $ une fois pour un développeur, ou 149 $ pour une équipe de 10, jusqu'au 30 novembre 2026. Ensuite, Solo coûte 79 $ et Team 249 $, pour des projets personnels et commerciaux illimités. Comparer les offres ou installer Prompt Input gratuitement.

Les quatre aperçus en haut de cette page sont des blocs Pro en fonctionnement. Thinking affiche le raisonnement d'un modèle et ses étapes d'outils au fil du streaming. Prompt input gère le choix du modèle et de l'effort, la dictée, les mentions, les commandes et les envois de fichiers. Chat thread rend une conversation complète, et Voice mode la transforme en conversation parlée, via la voix du navigateur ou une API vocale en temps réel.

Solo couvre un développeur. Team en couvre jusqu'à 10, gérés par e-mail depuis votre compte, avec un jeton partagé autorisé en CI. Les clients et collègues qui n'utilisent que le produit fini n'ont pas besoin d'une place. Si cela ne vous convient pas, vous êtes intégralement remboursé sous 30 jours, sans condition.

Avant de demander