zay-ui
Barrierefreie React-Komponenten und fertige Blöcke auf Basis von Base UI. Mit einer einzigen CSS-Variable umfärbbar; funktioniert mit oder ohne Tailwind CSS v4.
- Jahr
- 2026
- Kategorie
- Library
- Technologien
- 7
- Status
- In Entwicklung
Wirkung
Wirkung
- Komponenten
- 47
- Blöcke
- 18
- Lizenz
- MIT
Über das Projekt
Die meisten UI-Kits bringen entweder eine schwere Designsprache mit oder überlassen die Barrierefreiheit dir. zay-ui liegt dazwischen: Verhalten und Barrierefreiheit kommen von Base UI (Fokusverwaltung, Tastatur, ARIA), das Aussehen basiert auf neutralen Flächen, feinen Linien und einer einzigen Akzentfarbe. Ändert man den Akzent über die Variable `--hue`, färbt sich das ganze Kit gemeinsam um, hell und dunkel. Neben 47 Komponenten gibt es 18 fertige Blöcke: ganze Seiten wie Landingpage, Dashboard, Einstellungen, Anmeldung und 404 sowie Abschnitte wie Hero, Preise, FAQ und Footer. Diese Website läuft selbst auf zay-ui. Das Paket ist eine Alpha: Die API kann sich ändern.
Meine Rolle
Ich entwerfe und schreibe die Bibliothek: Designsprache, Komponenten, Blöcke und die Dokumentationsseite. Ich veröffentliche sie auf npm und pflege sie.
Wichtige Funktionen
- 47 Komponenten auf Base UI: Formulare, Overlays, Navigation und Datenanzeige
- 18 fertige Blöcke: Landingpage, Dashboard, Einstellungen, Anmeldung, Preise, FAQ und mehr
- Umfärben mit einer einzigen `--hue`-Variable, hell und dunkel
- Funktioniert mit oder ohne Tailwind CSS v4; Stile liegen in CSS-Layern, dein eigenes CSS gewinnt immer
- Dokumentationsseite mit Live-Vorschau, kopierbarem Code und API-Tabellen
Community
Nachdem das Projekt als Open Source veröffentlicht wurde, kamen Beiträge aus der Community. Die Liste wird live von GitHub geladen.
1 Contributors · 12 Beiträge
Contributors
Contributors auf GitHub
Nächstes Projekt
Better Payment
Eine einheitliche Payment-Gateway-Bibliothek, die Zahlungsinfrastrukturen und virtuelle POS-Systeme von Banken in der Türkei unter einer einzigen API bündelt.
Projekt ansehen
Weitere Arbeiten
Alle- Produkt2026Student PanelEine private Lernplattform für Dozenten und Institutionen. Lehrplan, Aufgaben, Anwesenheit, Live-Unterricht und Fortschrittsverfolgung in einem einzigen Panel; keine öffentliche Registrierung, die Studierenden werden vom Dozenten hinzugefügt.Live
- Library2026zaystaticEin Git-basiertes Content-Panel für Next.js. Die Inhalte bleiben als einfache Dateien in deinem Repository; Redakteure ändern sie im Panel, und zaystatic committet direkt auf deinen Branch. Keine Datenbank, kein gehosteter Dienst.In Entwicklung
Zusammenarbeiten
Lass uns den Umfang schriftlich klären.
Ich höre zuerst auf den Bedarf; wenn ich glaube, dass die Aufgabe nicht passt, sage ich das schon im ersten Gespräch.