Viele neue React-Baukästen werben inzwischen damit, dass KI-Agenten aus ihnen bauen. Opensource UI geht den umgekehrten Weg: über 150 fertige Bausteine zum Kopieren, MIT-lizenziert und bewusst ohne Radix im Unterbau. Entwickler Bidyut Kundu setzt darauf, dass Teams ihren Oberflächen-Code lieber selbst besitzen.
drweb.de als bevorzugte Quelle auf Google hinzufügenQualitätsgeprüfte Inhalte direkt in Google News & DiscoverJetzt hinzufügen
Opensource UI ist eine offene Sammlung fertiger Oberflächen-Bausteine für React und Next.js, veröffentlicht als reine Kopiervorlage. Statt eines npm-Pakets kopieren Entwickler den Code direkt ins Projekt und passen ihn an. Die Sammlung steht unter der MIT-Lizenz und lässt sich privat wie kommerziell nutzen.
Das Wichtigste in Kürze
- Was Opensource UI ist: eine MIT-lizenzierte Sammlung von über 150 React- und Next.js-Bausteinen zum Kopieren.
- Der Unterschied: kein Radix und kein Fremd-Framework im Unterbau, der kopierte Code gehört dem Projekt allein.
- Die Spezialität: fertige Geräte-Rahmen und Browser-Fenster für Produktbilder, neben Buttons, Karten und Formularen.
- Für wen: Freelancer, Agenturen und Inhouse-Teams, die React-Oberflächen mit wenigen Abhängigkeiten bauen.
Was steckt hinter Opensource UI?
Opensource UI bündelt über 150 Bausteine in mehr als zwei Dutzend Kategorien, von Buttons und Karten bis zu ganzen Geräte-Rahmen.[1] Die Bausteine setzen auf React, Next.js, TypeScript und Tailwind CSS in Version 4, die Symbole stammen aus der freien Icon-Sammlung Lucide.[2]
Hinter dem Projekt steht der Entwickler Bidyut Kundu, der die Sammlung als Kopiervorlage ohne Installation anlegt.[2] Auf GitHub zählt das Repository rund 450 Sterne, ein noch überschaubarer, aber wachsender Kreis.[2] Wie sich eine solche Sammlung von einem echten Design-System abgrenzt, zeigte Dr. Web schon am Unterschied zwischen Design-System und Komponenten-Bibliothek.
Wie unterscheidet sich Opensource UI von shadcn/ui?
Der wichtigste Unterschied steckt im Unterbau: Opensource UI verzichtet ausdrücklich auf Radix, während der verbreitete Standard shadcn/ui seine Bausteine auf Radix-UI-Primitiven aufbaut.[2][3]
Radix liefert die unsichtbare Mechanik barrierefreier Oberflächen mit, etwa Fokusfallen im Dialog oder die Tastatursteuerung im Menü.[3] Ohne diesen Unterbau wiegt der kopierte Code weniger und bindet keine fremde Abhängigkeit ein. Die Trennung hat einen Preis: Zugänglichkeit und Interaktionslogik landen im eigenen Code und müssen dort selbst geprüft werden, statt aus einer Bibliothek zu kommen. Ähnliche Abwägungen prägten schon Balsa UI und Lucet.
Zwei Wege zum selben Ziel
- React, Next.js, Tailwind CSS v4
- Ohne Radix im Unterbau
- Spezialität: Geräte-Rahmen für Produktbilder
- Rund 450 Sterne auf GitHub
- React, Tailwind CSS
- Auf Radix-UI-Primitiven aufgebaut
- Barrierefreiheit kommt aus dem Unterbau
- Verbreiteter De-facto-Standard
Was in der Sammlung steckt
Eigener Oberflächen-Code spart den fremden Unterbau und erbt zugleich dessen Fleißarbeit. Opensource UI macht diese Rechnung ehrlich sichtbar, statt sie unter einer Abhängigkeit zu verstecken.
— Markus Seyfferth, Chefredakteur Dr. Web
Für wen im DACH-Raum lohnt sich der Blick?
Für Freelancer, Agenturen und Inhouse-Teams, die schnell zu einer eigenen React-Oberfläche kommen und dabei wenige Abhängigkeiten schleppen wollen.
Die MIT-Lizenz erlaubt den Einsatz in Kundenprojekten ohne Namensnennung und ohne Gebühr.[2] Eine Besonderheit hebt Opensource UI von den üblichen Sammlungen ab: fertige Geräte-Rahmen und Browser-Fenster, in die sich Screenshots für Produktseiten oder Fallstudien setzen lassen.[1]
Ein Vorbehalt bleibt. Das Projekt hängt bislang an einem einzelnen Entwickler, für einen Produktiveinsatz gehört die Pflege deshalb im Blick behalten. Der erste Schritt führt auf die Projektseite, dort zeigt eine Vorschau jeden Baustein, der Rest ist Kopieren und Einfügen.
Quellen
[1] Opensource UI: Projektseite mit Komponenten-Vorschau
[2] GitHub: Repository „opensourceui“ (MIT-Lizenz, Stack, „No shadcn, no MUI, no Radix underneath“)
[3] shadcn/ui: „The Foundation for your Design System“ (Bausteine auf Radix UI und Tailwind CSS)
Mehr Newshunger?
- beUI: animierte React-Komponenten zum Kopieren statt Installieren
- Canvas UI: WebGL-Effekte über echtem HTML, gerendert auf der Grafikkarte
- Beautiful UI: Fertige Oberflächen-Bausteine für KI-Agenten
- Atomic Design: So gestalten Sie Ihre Website modular
- CSS Grid Lanes: Das native Masonry-Layout kommt ohne JavaScript
- Critical Design Engineering: Ein Manifest für den Umgang mit KI-Code
