beUI bündelt über 100 animierte React-Komponenten, die Sie nicht als Paket installieren, sondern per Kopie in Ihr Projekt holen. Die Bausteine setzen auf die Animationsbibliothek Motion und Tailwind CSS, alle unter der freien MIT-Lizenz. Der Vertrieb läuft über die shadcn-Registry.
drweb.de als bevorzugte Quelle auf Google hinzufügenQualitätsgeprüfte Inhalte direkt in Google News & DiscoverJetzt hinzufügen
Ein einziger Befehl kopiert beUI in Ihr Repository. Danach gehört der Code Ihnen. Statt eine Komponentenbibliothek als Abhängigkeit zu laden, kopieren Entwickler die Quelldateien direkt ins Projekt.[1] Über 900 Sterne auf GitHub belegen, dass dieses Vertriebsmodell Anklang findet.[2]
Das Wichtigste in Kürze
- Über 100 animierte Komponenten und Blöcke für React und Next.js, kostenlos unter der MIT-Lizenz.
- Ein Befehl über die shadcn-Registry kopiert den Quellcode ins Projekt, statt ein npm-Paket zu verdrahten.
- Technische Basis bilden die Animationsbibliothek Motion und Tailwind CSS in Version 4.
- Die kostenpflichtige Pro-Stufe ergänzt fertige Next.js-Vorlagen und aufwendigere Abschnitte.
Was macht beUI anders als eine klassische Bibliothek?
beUI wird nicht installiert, sondern kopiert. Ein Befehl über die shadcn-Registry legt die Quelldateien jeder Komponente direkt in Ihr Projekt, wo Sie den Code frei ändern und behalten.
Klassische UI-Bibliotheken landen als npm-Paket im Abhängigkeitsbaum, wo jedes Update etwas brechen kann und die interne Logik verborgen bleibt. Bei beUI läuft der Weg umgekehrt. Der Befehl npx shadcn add @beui/... schreibt fertigen React- und Motion-Code in Ihren Ordner, den Sie danach selbst pflegen.
In der React-Welt sammeln sich zurzeit schlanke, quelloffene Bausteine dieser Art, von einer Zeichen-Toolbar bis zur Physik-Engine im Browser.
Was bietet beUI zum Nulltarif?
Der Kern ist gratis. Über 100 Komponenten und Blöcke, von Buttons über Formulare bis zu ganzen Seitenabschnitten, stehen unter der MIT-Lizenz, gebaut mit Motion und Tailwind CSS 4.
Jede Komponente bringt eine Live-Vorschau, ein Codebeispiel und den Installationsbefehl mit. Damit reiht sich beUI in eine wachsende Klasse ein, die shadcn/ui geprägt hat, neben Aceternity UI und Magic UI.
Ähnliche quelloffene Sets reichen von physikbasierten Formularelementen bis zu vorgefertigten WebGL-Effekten. Die kostenpflichtige Pro-Stufe ergänzt fertige Next.js-Vorlagen.
beUI verschiebt die Kontrolle vom Paket-Maintainer zum Team, das die Komponente einsetzt. Diese Freiheit hat einen Preis: Jede Sicherheitslücke und jeder Bugfix wird zur eigenen Aufgabe.
— Markus Seyfferth, Chefredakteur Dr. Web
Wann lohnt sich beUI für Agenturen und Freelancer?
Für animationslastige Marketing-Seiten ohne Vendor-Lock-in passt beUI gut. Agenturen behalten den vollen Zugriff auf jede Komponente, tragen aber selbst die Verantwortung für Wartung und Barrierefreiheit.
Für Freelancer und Agenturen, die individuelle Landingpages bauen, spielt das Modell seine Stärke aus. Kein externer Dienst lädt zur Laufzeit nach, was auch die DSGVO-Prüfung entlastet. Der Code bleibt bis ins Detail anpassbar.
Zwei Punkte gehören auf die Rechnung. Wartung und Sicherheitsupdates jeder kopierten Komponente liegen bei Ihnen, nicht bei einem Maintainer. Viel Bewegung im Interface kollidiert zudem schnell mit der Barrierefreiheit, die das Barrierefreiheitsstärkungsgesetz seit Juni 2025 für viele Angebote vorschreibt.
Ein Test kostet nichts. Kopieren Sie eine einzelne Komponente und prüfen Sie vorab prefers-reduced-motion. Die MIT-Lizenz erlaubt den Einsatz auch im Kundenprojekt.
Quellen
[1] beUI: „Animated Components for React and Next.js“
[2] beUI auf GitHub (MIT-Lizenz)
Mehr Newshunger?
- Crashcat: eine 3D-Physik-Engine für JavaScript, die ohne WebAssembly auskommt
- Drawesome: Zeichen-Toolbar für React, ganz ohne Zusatzbibliothek
- Jelly UI: Soft-Body-Physik für HTML-Formularelemente
- 30 WebGL-Effekte, null Abhängigkeiten, jetzt frei
- contrast-color(): Der Browser wählt jetzt die lesbare Textfarbe
- Das letzte Design-Tool? Warum Designer nur noch skizzieren
