Introduction

Qu’est-ce que HextaUI

HextaUI est une collection de 65 composants, 9 hooks et 5 utilitaires pour React. Vous les ajoutez avec le shadcn CLI, le code source arrive dans votre projet, et dès lors c’est votre code, à lire et à modifier.

Chaque composant garde l’API de shadcn/ui que vous connaissez déjà. Ce qui change, c’est le travail que vous feriez sinon vous-même : les états, les cas limites et les petits détails qui donnent à une interface un aspect abouti.

Démarrage rapide

Dans un projet configuré avec shadcn/ui, ajoutez un composant :

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

Importez-le ensuite depuis @/components/ui.

import { Button } from "@/components/ui/button"

export function SaveButton() {
  return (
    <Button feedback onClick={() => saveSettings()}>
      Save changes
    </Button>
  )
}

Les prérequis, l’ajout de tout en une fois et l’espace de noms @hextaui sont traités dans Installation.

Ce que vous obtenez

Cela vaut pour chaque composant, vous n’avez donc pas à les vérifier un par un.

Mouvement

Les animations utilisent les courbes d’accélération du thème et peuvent être interrompues et inversées en cours de route. Avec la réduction des animations, le mouvement devient un simple fondu.

Clavier et lecteurs d’écran

Tout fonctionne au clavier seul, et le focus va là où vous l’attendez à l’ouverture et à la fermeture des popups. Les changements sont aussi annoncés : toasts, états de chargement et d’enregistrement, sélections et changements de diapositive.

Tactile et petits écrans

Les cibles tactiles grandissent sur écran tactile, les champs de texte restent à 16 px pour qu’iOS ne zoome pas, et les popups restent à l’écran jusqu’à 320 px de large. Les mises en page s’inversent pour les langues de droite à gauche.

Contraste élevé

Les anneaux de focus, les bords des contrôles et les états sélectionnés restent visibles en mode contraste élevé de Windows, et le thème par défaut respecte le contraste WCAG AA en clair comme en sombre.

Construit sur

• shadcn/ui avec le style base-vega
• Primitives Base UI pour le comportement et l’accessibilité
• Tailwind CSS v4, avec des tokens de thème pour la couleur, le rayon et l’accélération
• Icônes Tabler

Assistants IA

Chaque page a une version Markdown, et /llms.txt les liste toutes. Les assistants qui prennent en charge MCP peuvent se connecter au serveur MCP de HextaUI pour rechercher dans la documentation, lire les API des composants et obtenir les commandes d’installation.

Licence

HextaUI est open source sous licence MIT, gratuit pour les projets personnels et commerciaux.