React Bits: 165+ animierte React-Komponenten in vier Technologievarianten

165+ animierte Komponenten in vier Varianten

React Bits von David Haz ist eine offene Sammlung animierter, interaktiver und vollständig anpassbarer React-Komponenten für Websites, die im Gedächtnis bleiben sollen. Das README beziffert den Bestand auf über 165 Komponenten in vier Kategorien: Textanimationen, allgemeine Animationen, UI-Elemente und Hintergründe, mit dem Zusatz, dass die Sammlung wöchentlich wächst.

Die technische Besonderheit liegt in der Variantenstruktur: Jede Komponente existiert in vier Fassungen, JavaScript mit CSS, JavaScript mit Tailwind, TypeScript mit CSS und TypeScript mit Tailwind, abgekürzt JS-CSS, JS-TW, TS-CSS und TS-TW. Damit bedient die Sammlung sowohl JS- als auch TS-Projekte und jeweils mit oder ohne Tailwind-Setup.

Die Reichweite ist beachtlich: rund 46.300 Sterne und über 2.200 Forks auf GitHub, dazu das Portal reactbits.dev mit Dokumentation, Schnellstart und Werkzeugseiten. Das README behauptet minimale Abhängigkeiten und Tree-Shaking-Fähigkeit, nennt aber keine konkrete Abhängigkeitsliste; wer sie braucht, schaut auf die Komponentenseiten oder in den Quelltext, denn genau der wird ja ausgeliefert.

Anpassung über Props oder direkt im Quelltext

Das Grundversprechen des Projekts lautet, Interfaces schneller auszuliefern, indem man statt stundenlanger Eigenanimation eine ausgearbeitete Komponente nimmt und sie anpasst. Der Anpassungsweg ist zweistufig: Alles lässt sich über Props steuern, und wer weiter gehen will, editiert den Quelltext der Komponente direkt.

Dieser zweite Weg ist der eigentliche Unterschied zu klassischen npm-Bibliotheken. Die Komponenten sind als kopierfertiger Quelltext gedacht, der mit jedem modernen React-Projekt funktioniert; es gibt keine Blackbox, die man gegen die Bibliotheksversion abstimmen müsste. Wer eine Animation halb umbauen will, hat den Code bereits im Projekt und keinen Fork-Abstand zur Upstream-Version.

Der Preis dieses Modells liegt auf der Hand: Aktualisierungen kommen nicht automatisch per Paketmanager, sondern durch erneutes Kopieren oder Übernehmen der geänderten Version. Für einmalig genutzte Design-Animationen ist das der richtige Tausch, für Komponenten mit häufigen Korrekturen weniger.

Copy-Paste-Installation über shadcn und jsrepo

Für die schnelle Übernahme unterstützt React Bits die CLI-Werkzeuge shadcn und jsrepo. Das README zeigt ein konkretes Beispiel: npx shadcn@latest add @react-bits/BlurText-TS-TW fügt die TypeScript-Tailwind-Variante der BlurText-Komponente hinzu. Der Name im Beispiel zeigt das Namensschema, das die Variante als Suffix trägt.

Jede Komponentenseite enthält laut README kopierfertige CLI-Befehle, sodass man die gewünschte Variante direkt auswählen kann. Daneben gibt es den manuellen Weg: Die bevorzugte Technologiekombination auswählen und den Code von Hand kopieren, ohne CLI-Umweg.

Die Ausrichtung auf shadcn ist keine zufällige Sponsoren-Geschichte, sondern passt zum Vertriebsmodell: Das Projekt wird von shadcnblocks auf der Diamant-Ebene und shadcncraft auf Silber-Ebene unterstützt, und das README wirbt mit einer monatlichen Reichweite von über 500.000 Entwicklern. Diese Reichweite ist eine Selbstangabe des Projekts.

Drei Kreativwerkzeuge von Background Studio bis Texture Lab

Neben den Komponenten stellt das Projekt drei kostenlose Kreativwerkzeuge bereit. Background Studio erlaubt es, animierte Hintergründe zu erkunden, Effekte anzupassen und das Ergebnis als Video, Bild oder Code zu exportieren, also nicht nur die Komponente zu konfigurieren, sondern die Animation selbst zu gestalten.

Shape Magic erzeugt innere abgerundete Ecken zwischen Formen, ein Detail, das in CSS-Layouts mühsam ist, und exportiert das Ergebnis als SVG, React-Code oder Clip-Path-Code. Texture Lab wendet mehr als 20 Effekte wie Rauschen, Dithering und ASCII auf Bilder oder Videos an und exportiert in hoher Qualität.

Alle drei Werkzeuge sind über reactbits.dev/tools erreichbar und folgen demselben Muster wie die Komponenten: Der Output ist entweder Code oder ein direkt verwendbares Asset. Für Design-Teams, die Hintergrundanimationen und Texturen selten genug bauen, um keine eigene Werkzeugkette zu pflegen, sind das praktische Vorstufen der eigentlichen Komponenten.

Portierungen für Vue und Svelte und Mitwirkung

Das React-Original hat zwei offizielle Portierungen: vue-bits.dev bringt die Sammlung für Vue.js, sveltebits.xyz für Svelte. Diese Portierungen machen die Sammlung für Teams interessant, die über die Framework-Grenze hinweg dieselbe visuelle Sprache wollen, auch wenn das README zu deren featuregleichem Stand nichts aussagt.

Getragen wird das Projekt vom Ersteller und Hauptbetreuer David Haz; Beiträge laufen über die Issue-Verfolgung und die Vorlage für Funktionsanfragen, begleitet von einem Beitragsleitfaden. Mit nur 9 offenen Issues wirkt das Repository im Vergleich zu seiner Sternzahl klein verwaltet.

Ein offener Punkt ist die Herkunftsangabe: Das README erklärt, dass die Sammlung gelegentlich von öffentlich verfügbaren Codebeispielen inspiriert ist, diese aber als vollwertige, anpassbare Komponenten neu geschrieben wurden, und bietet an, auf Erkennungshinweise per Issue zu reagieren. Diese Praxis ist transparent formuliert, verlangt aber vom Originalautor aktives Nachfragen.

Lizenz: MIT plus Commons Clause

Die Lizenz des Projekts ist nicht pures MIT, sondern MIT ergänzt um die Commons Clause, dokumentiert in der LICENSE.md. Der MIT-Anteil erlaubt die Nutzung, Vervielfältigung, Änderung und Verbreitung als Teil eigener Anwendungen und Websites, einschließlich kommerzieller Nutzung, solange der Urheberhinweis erhalten bleibt. Das README fasst zusammen: frei für persönliche und kommerzielle Nutzung.

Die Commons Clause zieht eine Grenze: Der Verkauf der Software selbst, also das Anbieten der Komponenten als Produkt, ist damit nicht abgedeckt. Für die überwältigende Mehrheit der Anwendungen, die die Animationen als Teil ihrer Website einsetzen, ändert das nichts; für Anbieter, die die Sammlung als Bestandteil eines eigenen Komponentenprodukts weitervertreiben wollen, ist der Unterschied zu pures MIT aber entscheidend.

Die übliche Gewährleistungsausschließung gilt ebenfalls. Wer Komponenten in Kundenprojekte übernimmt, sollte den Urheberhinweis entsprechend dem Lizenztext handhaben.

Fazit: Animationssammlung mit Quellcode-Kontrolle

React Bits eignet sich für Projekte, die eindrucksvolle Animationen wollen, ohne eine schwergewichtige Animationsbibliothek als Abhängigkeit zu schulden: Die Komponenten kommen als Quelltext in der eigenen Technologiekombination, sind über Props anpassbar und lassen sich im Projekt umbauen. Die Kategorien Textanimationen, UI-Elemente und Hintergründe decken den üblichen Erstauftritt einer Website ab.

Nicht passend ist das Modell für zwei Fälle: Wer automatisch alle Korrekturen aus dem Upstream erhalten will, fährt mit einem klassischen npm-Paket besser, und wer Komponenten selbst als Produkt vertreiben will, stößt an der Commons Clause an die Lizenzgrenze.

Ein praxisnaher Einstieg ist der Weg über reactbits.dev: Eine Komponente aussuchen, die Variantenkombination TS-TW oder JS-CSS festlegen, den CLI-Befehl von der Komponentenseite kopieren und die Animation direkt im eigenen Projekt ausprobieren. Der Beispielbefehl npx shadcn@latest add @react-bits/BlurText-TS-TW zeigt, dass der ganze Weg von der Entdeckung bis zum laufenden Code zwei Befehle lang ist.

Redaktionelles Fazit

React Bits passt zu Teams, die Websites mit auffälliger Animation bauen wollen, ohne jede Bewegung von Hand zu programmieren, und dabei die Kontrolle über den Quellcode behalten möchten: Der Copy-Paste-Weg liefert den Code direkt ins Projekt. Wer Komponenten hingegen weiterverkaufen oder als Bibliothek vertreiben will, muss wegen der Commons Clause die Lizenzgrenzen lesen; wer shadcn bereits nutzt, kommt über npx shadcn@latest add am schnellsten zum Ergebnis.

Offizielle Quellen

1. Official documentation
2. Official README
3. Project repository