Beschreibung
Meraki UI ist eine kostenlose, quelloffene Sammlung von 228 HTML-Komponenten auf Basis von Tailwind CSS, unter der MIT-Lizenz veröffentlicht und seit 2020 von Khatab Wedaa angelegt und gepflegt. Die Bausteine verteilen sich über 32 Kategorien, mit Schwerpunkten bei Inputs, Kontaktformularen, Heros sowie Avataren, Buttons und Footern, ergänzt um interaktive Muster wie Modals, Dropdowns, Tabs und Cookie-Banner. Jede Komponente liegt als eigenständige HTML-Datei vor und wird per Copy-and-Paste in ein bestehendes Projekt übernommen, framework-agnostisch und ohne npm-Installation. Gegenüber vielen vergleichbaren Bibliotheken bringt Meraki UI zwei Eigenschaften bibliotheksweit mit: Dark-Mode-Varianten in 220 der 228 Dateien sowie durchgängige Unterstützung für rechts-nach-links-Sprachen wie Arabisch und Hebräisch.
Vorausgesetzt wird ein Projekt mit eingerichtetem Tailwind CSS. Jede Datei bindet zur Vorschau zusätzlich ein Play-CDN-Script ein, das vor dem produktiven Einsatz entfernt und durch das reguläre Tailwind-Setup des Projekts ersetzt werden muss. Für die interaktiven Komponenten wird zusätzlich Alpine.js als Laufzeit-Abhängigkeit benötigt, inklusive einmaliger Initialisierung über Alpine.start(), ohne die Modals, Dropdowns, Tabs und Cookie-Banner ohne Funktion bleiben. Die Snippets sind in Tailwind-v3-Syntax geschrieben, was in v4-Projekten meist, aber nicht garantiert kompatibel ist. In React-Projekten funktionieren Alpines x-data- und x-show-Attribute nicht, sodass entweder nur das statische Markup übernommen und die Logik selbst neu gebaut wird, oder auf eine React-native Alternative ausgewichen werden muss.
Innerhalb der copy-paste-Tailwind-Bibliotheken liegt der Unterschied zu rein statischen Sammlungen im mitgelieferten Alpine.js-Zustand: Wer Dark-Mode und RTL von Anfang an eingebaut haben will und interaktive Komponenten mit fertiger Logik statt nur Markup sucht, ist bei Meraki UI richtig. Wer dagegen ein möglichst JS-freies, rein framework-neutrales Markup bevorzugt und die Interaktivität lieber selbst im eigenen Stack aufbaut, etwa in React, findet in einer Bibliothek ohne Alpine-Abhängigkeit die passendere Grundlage.
