Das React-UI-Framework HeroUI hat mit Version 3 einen kompletten Neustart hingelegt — und erstmals auch eine native Bibliothek für React Native vorgestellt. Das Update bringt über 75 Web-Komponenten (21 davon komplett neu), eine neue React-Native-Bibliothek mit 37+ Komponenten und ein grundlegend überarbeitetes Styling-System.
Die wichtigsten Neuerungen
- Styling: HeroUI v3 setzt auf Tailwind CSS v4, CSS-Variablen, den OKLCH-Farbraum und BEM-Methodologie. Animationen laufen komplett über CSS — kein JavaScript-Runtime-Overhead mehr.
- Performance: Durch den Verzicht auf JS-basierte Animationen und den Einsatz von CSS-nativen Übergängen verspricht v3 deutlich flüssigere Interfaces.
- Barrierefreiheit: Die Komponenten basieren auf React Aria Components und liefern damit ARIA-konforme Accessibility out of the box.
- Architektur: Compound Components mit Headless-Ready-Unterstützung — Entwickler können das Verhalten nutzen und das Rendering komplett selbst steuern.
- KI-Integration: HeroUI liefert einen MCP-Server, Agent Skills und eine LLMs.txt-Datei mit — also eine Schnittstelle, über die KI-Agenten die Komponentenbibliothek direkt nutzen können.
- Figma-Kit v3: 1:1-Parität zwischen Design-System und Code-Komponenten.
🎯 Was das für die Praxis bedeutet
1. Ein Design-System für Web und Native: Teams, die sowohl Web- als auch Mobile-Apps entwickeln, können erstmals eine gemeinsame Komponentenbibliothek nutzen.
2. MCP-Server als Standard: Dass UI-Bibliotheken jetzt KI-Agenten-Schnittstellen mitliefern, zeigt, wie schnell sich MCP als Integrationsstandard durchsetzt.
3. CSS-only Animationen: Der Trend weg von JS-Animationen reduziert Bundle-Größen und verbessert die Performance — relevant für jedes Frontend-Team.
