HyperUI

HyperUI ist eine kostenlose, quelloffene Sammlung von Tailwind-CSS-Komponenten des Entwicklers Mark Mead, aufgeteilt in drei Stil-Kategorien: Application, Marketing und Neobrutalism. Insgesamt umfasst die Bibliothek 66 Komponenten-Gruppen mit 523 HTML-Varianten, von Tabellen, Formularen und Badges über Heroes, Call-to-Actions und Pricing-Sections bis zu einer eigenen brutalistischen Stil-Linie derselben Komponenten-Typen. Der Workflow ist bewusst einfach gehalten: Komponente auf hyperui.dev finden, den HTML-Code kopieren und in das eigene Projekt einfügen, ganz ohne npm-Paket oder Installationsschritt.

Vorausgesetzt wird ein Projekt mit eingerichtetem Tailwind CSS. Wer das Markup direkt ins eigene Template kopiert, muss dabei nichts weiter beachten; wer es in eine separate Datei auslagert, sorgt dafür, dass Tailwinds content- oder @source-Konfiguration diese Datei erfasst, sonst fehlen die Styles. Der weit überwiegende Teil der Bibliothek, etwa 511 der 523 Varianten, ist reines statisches HTML- und CSS-Markup ohne eigene Logik. Lediglich rund zwölf Komponenten mit Mustern wie Modal, Dropdown oder Tab benötigen zusätzlich eine kleine, separate JavaScript-Datei. Rund 229 Varianten unterstützen Dark Mode über die dark:-Variante und die Klasse class="dark", nicht jedoch die gesamte Bibliothek. Farben und Akzente sind mit Standard-Tailwind-Klassen wie bg-indigo-600 hinterlegt und müssen für ein eigenständiges Erscheinungsbild von Hand an die jeweilige Markenpalette angepasst werden.

Gegenüber React-spezifischen Komponentenbibliotheken liegt der Unterschied im framework-neutralen Ansatz: HyperUI liefert reines HTML- und CSS-Markup ohne Bindung an ein bestimmtes Frontend-Framework und eignet sich damit besonders für Zielsysteme wie Astro, Shopify-Liquid oder reines HTML, in denen kein React zur Verfügung steht oder gewünscht ist. Für React-Projekte lässt sich das Markup zu JSX konvertieren. Wer dagegen fertige, interaktive Komponenten mit eingebauter JavaScript-Logik benötigt, findet in Bibliotheken auf Basis von Alpine.js oder mit eigenen JS-Plugins eine passendere Grundlage, weil HyperUI bewusst auf statisches Markup setzt und die Interaktivität dem jeweiligen Projekt überlässt.

HyperUI ist unter hyperui.dev frei zugänglich, ohne Registrierung und ohne Preismodell: Komponenten lassen sich direkt im Browser durchsuchen, ihr Code kopieren und einfügen. Der Quellcode liegt zusätzlich öffentlich auf GitHub unter dem Namen des Erstellers Mark Mead und steht unter der MIT-Lizenz, damit auch in kommerziellen Projekten ohne Pflicht zur Namensnennung nutzbar. Ergänzend pflegt der Ersteller einen Blog mit praktischen Tailwind-CSS-Anleitungen. Ein kostenpflichtiges Upgrade oder Pro-Paket ist nicht dokumentiert.