Drehbuch-Assistent▸ 
AI Apps 
AI Nachrichten 
HeroUI: schöne, schnelle und moderne React-UI-Bibliothek auf Basis von Tailwind CSS
HeroUI: schöne, schnelle und moderne React-UI-Bibliothek auf Basis von Tailwind CSSEinführung
Was ist HeroUI?
HeroUI (ehemals NextUI) ist eine schöne, schnelle und moderne React-UI-Bibliothek, die auf Tailwind CSS basiert. Sie unterstützt die Anpassung von Themes, den automatischen Wechsel zwischen hellem und dunklem Modus, basiert auf React Aria für hohe Zugänglichkeit, bietet ein typsicheres Entwicklungserlebnis und eine Multi-Package-Struktur. Die Pro-Version enthält über 210 vorgefertigte Komponenten und ist mit der neuen Verzeichnisstruktur von Next.js kompatibel.
Hauptmerkmale von HeroUI
Basiert auf Tailwind CSS: Verwendet Tailwind CSS als Styling-Engine, ohne Laufzeit-Styles, sodass keine unnötigen Klassen in dein Paket gelangen.
Automatische Erkennung des dunklen Modus: Erkennt automatisch Änderungen des HTML-Theme-Attributs und wechselt entsprechend das Theme.
Vollständig typisiert: Bietet eine vollständig typisierte API, minimiert die Lernkurve und hilft Entwicklern, schnell einzusteigen.
Entkoppelte Komponenten: Komponenten sind in mehrere Pakete aufgeteilt, sodass nur die benötigten Komponenten installiert werden können.
Befolgt die WAI-ARIA-Richtlinien: Komponenten folgen den WAI-ARIA-Richtlinien und bieten Tastaturunterstützung sowie sinnvolles Fokusmanagement.
Umfangreiche vorgefertigte Vorlagen: Bietet über 210+ wunderschöne, responsive Komponenten.
Kernfunktionen von HeroUI
Theme-System
Stellt ein Tailwind-CSS-Plugin bereit, das die semantischen Bezeichner des Standard-Themes (wie Farben und Hintergründe) ändern oder ein völlig neues Theme erstellen kann. Der Beispielcode zeigt die Konfiguration der Hauptfarben verschiedener Themes (z. B. primary: "#0072f5").
Unterstützt den automatischen Wechsel zwischen hellem und dunklem Modus, erkennt das dark-Attribut des HTML und wechselt das Theme automatisch. Es genügt, das Attribut zum Root-Tag hinzuzufügen, um das standardmäßige dunkle Theme zu aktivieren.
Leistung
Basiert auf Tailwind CSS, ohne Laufzeit-Styles, entfernt ungenutzte Klassen beim Bundling und gewährleistet so Leichtgewichtigkeit und Geschwindigkeit.
Vollständig typisierte API (TypeScript-Unterstützung), reduziert die Lernkurve und unterstützt React Server Components (Komponenten enthalten die "use client"-Direktive und können direkt in RSC verwendet werden).
Multi-Package-Struktur, die es Entwicklern ermöglicht, Komponenten nach Bedarf zu installieren und so redundante Abhängigkeiten zu reduzieren.
Zugänglichkeit (Accessibility)
Basiert auf React Aria, folgt dem WAI-ARIA-Standard und bietet integrierte Tastaturnavigation, Fokusmanagement sowie Unterstützung für Bildschirmleser. Der Fokusring wird nur bei Tastatur- oder Bildschirmleser-Navigation angezeigt.
Anpassungsfähigkeit der Komponenten
Basiert auf Tailwind Variants, unterstützt die Anpassung von Komponenten-Stilen über Slots, um Klassenkonflikte zu vermeiden. Der Beispielcode zeigt die Stilkonfiguration eines benutzerdefinierten Buttons (wie Hover-Animationen und Schatteneffekte).
Komponenten unterstützen ** polymorphic as prop**, sodass das Komponenten-Tag überschrieben werden kann (z. B. das Rendern eines Buttons als Link).
Häufig gestellte Fragen zu HeroUI
Wie kann HeroUI angepasst werden?
Antwort: Über das integrierte Tailwind-CSS-Plugin, indem das heroui-Plugin in der tailwind.config.js konfiguriert wird. Dadurch können die semantischen Bezeichner der light- und dark-Themes (wie Farben und Hintergründe) geändert oder sogar völlig neue Themes erstellt werden.
In welchen Bereichen zeigt sich die Zugänglichkeit von HeroUI?
Antwort: Basiert auf React Aria, folgt dem WAI-ARIA-Standard und unterstützt Tastaturnavigation, Fokusmanagement, Bildschirmleser-Unterstützung, kollisionsbewusste Ausrichtung sowie Steuerung der Ausrichtung. Der Fokusring wird nur bei Tastatur- oder Bildschirmleser-Navigation angezeigt, sodass auch Menschen mit Behinderungen die Komponenten barrierefrei nutzen können.
Welche Kernressourcen bietet die Pro-Version von HeroUI?
Antwort: HeroUI Pro enthält 210+ responsive vorgefertigte Komponenten, lebenslangen Zugang, kostenlose Updates sowie Figma-Designdateien und kann Entwicklern helfen, Projekte schnell aufzubauen.
