ArkUI
Diese Open-Source-UI-Lösung ermöglicht die Erstellung ausgefeilter Designsysteme mit anpassbaren Komponenten, die sich an verschiedene visuelle Stile und Barrierefreiheitsstandards anpassen lassen.
Eine Bibliothek mit Headless React-Komponenten ohne vorgegebene Stile. Sie bietet volle Kontrolle über Markup und CSS und sorgt zugleich standardmäßig für hohe Barrierefreiheit und ARIA-konformes Verhalten.
Die Komponenten sind als kombinierbare Bausteine mit einer slotsbasierten API konzipiert. Sie lassen sich per Tree Shaking optimieren, sind für TypeScript geeignet und funktionieren mit jedem Styling-Ansatz, darunter Tailwind, CSS Modules, CSS-in-JS und einfaches CSS.
Die Bibliothek deckt viele UI-Muster und Bausteine ab, darunter Accordion, Alert Dialog, Avatar, Checkbox und Checkbox Group, Collapsible, Context Menu, Dialog, Field und Fieldset, Form, Input, Menu und Menubar, Meter, Navigation Menu, Number Field, Popover, Progress, Radio, Scroll Area, Select, Separator, Slider, Switch, Tabs, Toast, Toggle und Toggle Group, Toolbar und Tooltip sowie Hilfsfunktionen wie Direction Provider und useRender.
Popup-Komponenten verwenden React Portals. Um Konflikte bei z-index-Werten zu vermeiden, wird ein isolierter Stacking Context empfohlen. So erscheinen Overlays stets über dem Seiteninhalt. Die Dokumentation enthält Beispiele zum Zusammenstellen von Komponenten und ihren Teilen sowie zur Integration mit verschiedenen Styling-Systemen.
Die Bibliothek ist Open Source und steht unter der MIT-Lizenz. Sie wird aktiv weiterentwickelt und bietet eine Roadmap sowie Leitfäden mit Fokus auf Barrierefreiheit. Die Dokumentationsseiten sind als Markdown verfügbar und enthalten LLM-freundliche Ressourcen, die das Erkunden und Integrieren des Codes erleichtern.
Funktionen
- Headless React-Komponenten ohne vorgegebene Stile
- Standardmäßig barrierefrei und ARIA-konform
- Kombinierbare API auf Basis von Slots
- Tree-shakeable ESM-Builds
- TypeScript-Typdefinitionen
- Funktioniert mit Tailwind, CSS Modules, CSS-in-JS und einfachem CSS
- React Portals für Popups und Overlays
- Anleitung zur Isolierung des Stacking Contexts, um z-index-Probleme zu vermeiden
- Kontrollierte und unkontrollierte Verwendungsmuster
- Breite Komponentenauswahl (Menüs, Dialoge, Popovers, Tabs, Auswahllisten, Schieberegler usw.)
- SSR-freundlich und frameworkunabhängig
- Open Source unter der MIT-Lizenz
- Dokumentation als Markdown mit LLM-Hilfen
Ähnliche Einträge
MaterialUI
Dieses Produkt bietet eine umfassende Auswahl an Werkzeugen zum Erstellen von Benutzeroberflächen in React. Dabei stehen Flexibilität und die Einhaltung von Designstandards im Fokus.
Radix Vue
Ein inoffizieller Vue-Port mit anpassbaren und barrierefreien UI-Komponenten für den Aufbau von Designsystemen.
PrimeVue
Eine umfangreiche Sammlung von Open-Source-UI-Komponenten, mit denen du Vue.js-Anwendungen nahtlos und effizient erstellen kannst.
Radix Primitives
Ungestylte, barrierefreie Open-Source-React-Primitives für hochwertige Web-Apps und Designsysteme.
Vaul
Eine ungestaltete Drawer-Komponente für die nahtlose Integration in React-Anwendungen, die die Interaktion auf Mobilgeräten verbessert.
ChakraUI
Erstelle schnell und effizient barrierefreie Webanwendungen mit einer umfassenden Auswahl an wichtigen Komponenten, die einfach zu verwenden und flexibel anpassbar sind.
cmdk
Diese Komponente bietet eine umfassende Lösung für ein Befehlsmenü in React und vereint eine gute Benutzererfahrung mit Flexibilität für Entwickler.