Assistant scénario▸ 
Apps AI 
Actualités AI 
HeroUI : bibliothèque UI React moderne, rapide et élégante basée sur Tailwind CSS
HeroUI : bibliothèque UI React moderne, rapide et élégante basée sur Tailwind CSSIntroduction
Qu'est-ce que HeroUI ?
HeroUI (anciennement NextUI) est une bibliothèque d'interface utilisateur React moderne, esthétique et rapide, basée sur Tailwind CSS. Elle prend en charge la personnalisation des thèmes, le basculement automatique entre les modes clair et sombre, offre une haute accessibilité grâce à React Aria, fournit une expérience de développement avec des types sûrs et une structure multi-paquets, inclut une version Pro avec plus de 210 composants préfabriqués, et est compatible avec la nouvelle structure de répertoires de Next.js.
Principales caractéristiques de HeroUI
Basé sur Tailwind CSS : utilise Tailwind CSS comme moteur de style, sans styles à l'exécution, et ne génère pas de classes inutiles dans votre bundle.
Détection automatique du mode sombre : capable de détecter automatiquement les changements de l'attribut de thème HTML, basculant ainsi automatiquement entre les thèmes.
Entièrement typé : fournit une API entièrement typée, minimisant la courbe d'apprentissage et aidant les développeurs à démarrer rapidement.
Composants découplés : les composants sont divisés en plusieurs paquets, permettant d'installer uniquement ceux dont vous avez besoin.
Conforme aux directives WAI-ARIA : les composants respectent les directives WAI-ARIA, offrant un support clavier et une gestion raisonnable du focus.
Modèles préconçus riches : propose plus de 210 composants réactifs et esthétiques.
Fonctionnalités principales de HeroUI
Système de thèmes
Fournit un plugin Tailwind CSS prenant en charge la modification des marquages sémantiques du thème par défaut (comme les couleurs, les arrière-plans) ou la création de thèmes entièrement nouveaux. Le code d'exemple illustre la configuration de la couleur principale pour différents thèmes (par exemple primary: "#0072f5").
Prend en charge le basculement automatique entre les modes clair et sombre, détectant l'attribut dark du HTML pour changer automatiquement de thème. Il suffit d'ajouter l'attribut sur la balise racine pour activer le thème sombre par défaut.
Performance
Basé sur Tailwind CSS, sans styles à l'exécution, les classes inutilisées sont éliminées lors du bundling, garantissant légèreté et rapidité.
API entièrement typée (support TypeScript), réduisant la courbe d'apprentissage, et prise en charge des React Server Components (les composants incluent l'instruction "use client" et peuvent être utilisés directement dans les RSC).
Conception multi-paquets, permettant aux développeurs d'installer les composants selon leurs besoins et réduisant les dépendances redondantes.
Accessibilité (Accessibility)
Construit sur React Aria, conforme aux normes WAI-ARIA, intègre la navigation au clavier, la gestion du focus, le support des lecteurs d'écran, etc. L'anneau de focus ne s'affiche que lors de la navigation au clavier ou avec un lecteur d'écran.
Capacités de personnalisation des composants
Basé sur Tailwind Variants, prend en charge la personnalisation des styles des composants via des slots, évitant les conflits de classes. Le code d'exemple illustre la configuration de styles personnalisés pour un bouton (comme les animations au survol et les effets d'ombre).
Les composants supportent la ** polymorphic as prop**, permettant de remplacer la balise du composant (par exemple, rendre un bouton en tant que lien).
Questions fréquentes sur HeroUI
Comment personnaliser le thème dans HeroUI ?
Réponse :Via le plugin Tailwind CSS intégré, en configurant le plugin heroui dans tailwind.config.js, vous pouvez modifier les marquages sémantiques des thèmes light et dark (comme les couleurs, les arrière-plans), ou même créer des thèmes entièrement nouveaux.
Dans quels aspects l'accessibilité de HeroUI se manifeste-t-elle ?
Réponse :Construit sur React Aria, conforme aux normes WAI-ARIA, prend en charge la navigation au clavier, la gestion du focus, le support des lecteurs d'écran, la détection des collisions et le contrôle de l'alignement. L'anneau de focus ne s'affiche que lors de la navigation au clavier ou avec un lecteur d'écran, permettant aux utilisateurs handicapés d'utiliser l'interface sans barrière.
Quelles ressources principales la version Pro de HeroUI offre-t-elle ?
Réponse :HeroUI Pro comprend plus de 210 composants préfabriqués et réactifs, un accès à vie, des mises à jour gratuites ainsi que des fichiers de design Figma, ce qui peut aider les développeurs à搭建 rapidement leurs projets.
