Magic UI Alternativen: 5 React-Bibliotheken im Vergleich

Die meisten, die nach Magic UI Alternativen suchen, mögen die Idee schon: animierte React-Komponenten, die man ins eigene Projekt kopiert, statt ein Paket zu installieren. Sie wollen einen anderen Look, eine andere Lizenz, mehr Komponenten oder Effekte, die auch außerhalb eines Desktop-Browsers funktionieren. Dieser Guide vergleicht die Bibliotheken für animierte Komponenten, zu denen Entwickler 2026 tatsächlich greifen. Die Fakten haben wir am 16. Oktober 2026 geprüft, und jede Quelle ist verlinkt.

Wir entwickeln Wingo UI, eine der Optionen unten. Behalte das bei unserem Abschnitt im Hinterkopf. Wir sagen aber auch, wo die anderen die bessere Wahl sind.

Was ist Magic UI und warum nach einer Alternative suchen?

Magic UI (opens in a new tab) ist ein kostenloses Open-Source-Set aus animierten Komponenten und Effekten für Landingpages: Marquees, animierte Beams, Bento Grids, Texteffekte, Globen und Geräte-Mockups. Eine Komponente fügst du mit der shadcn CLI hinzu, zum Beispiel npx shadcn@latest add @magicui/globe. Das GitHub-Repository (opens in a new tab) steht unter MIT und hatte bei unserem Check 22,7k Sterne. Der Registry-Ordner enthielt 79 Komponentendateien.

Magic UI Pro (opens in a new tab) ist ein eigenes Produkt: eine Einzellizenz für $199, einmal bezahlt, laut Anbieterseite mit über 50 Sections und 9+ Templates für React, Next.js und Tailwind CSS. Die Pro-Lizenz (opens in a new tab) erlaubt kommerzielle Nutzung und verbietet, die Produkte weiterzugeben, weiterzuverkaufen oder zu teilen. Sie legt pauschalen Schadensersatz von $10,000 pro Fall unerlaubter Weitergabe fest und schließt Erstattungen aus.

Die üblichen Gründe, woanders zu suchen:

• Du willst einen anderen Stil. Magic UI hat einen Look mit hohem Wiedererkennungswert. Eine zweite Registry bringt dir Effekte, die andere Seiten noch nicht nutzen.
• Du brauchst App-Komponenten. Magic UI ist auf Marketing-Seiten ausgelegt. Es gibt kein Select, kein Menü, kein Sheet und keine Formularfelder, also braucht das Produkt hinter der Landingpage trotzdem eine weitere Bibliothek.
• Barrierefreiheit und Smartphones. Nur wenige der kostenlosen Dateien prüfen prefers-reduced-motion, und mehrere Effekte folgen dem Mauszeiger. Mehr zu beidem weiter unten.

Wie schneiden die Magic UI Alternativen im Vergleich ab?

Sie unterscheiden sich in drei Punkten: Lizenz, Anzahl der Dateien, die Reduced Motion behandeln, und die Frage, ob die Effekte ohne Maus noch funktionieren. Stand: 16. Oktober 2026. Die Preise sind die Listenpreise auf der Seite des jeweiligen Anbieters an diesem Tag; bei mehreren steht ein durchgestrichener höherer Preis daneben.

So haben wir die Reduced-Motion-Spalte gezählt: Am 16. Oktober 2026 haben wir den Komponenten-Quellcode jeder Bibliothek heruntergeladen (die GitHub-Repositories und das öffentliche Registry-JSON von Aceternity) und jede Datei nach prefers-reduced-motion, useReducedMotion, reducedMotion oder Tailwinds motion-reduce / motion-safe durchsucht. Das ist eine reine Textsuche, also nur ein Anhaltspunkt. Ein statisches Muster braucht keinen Check, und ein CSS-Keyframe lässt sich auch in deinem globalen Stylesheet abschalten. Trotzdem zeigt sie, wer die Arbeit machen muss: die Bibliothek oder du.

Welche Magic UI Alternative ist kostenlos?

Suchst du eine Magic UI Alternative kostenlos und auch kommerziell nutzbar, mit größerem Katalog, dann fang mit React Bits an. Bei unserem Check hatte es 49,4k GitHub-Sterne und rund 218 Komponenten, jede in vier Varianten: JavaScript oder TypeScript, gestylt mit CSS oder Tailwind. Die Hintergründe nutzen WebGL über ogl oder three.js, und einige Komponenten laden GSAP oder matter-js nur dort, wo sie es brauchen. Von allen durchsuchten Bibliotheken behandelte React Bits Reduced Motion außerdem am konsequentesten.

Lies die Lizenz, bevor du auslieferst. React Bits nutzt MIT plus die Commons Clause. Laut Lizenz (opens in a new tab) ist kommerzielle Nutzung erlaubt, solange du die Komponenten selbst nicht verkaufst, unterlizenzierst oder weitergibst. In deinem Produkt sind sie also in Ordnung. In einem Kit, das du verkaufst, nicht.

Wenn du reines MIT willst, schau dir Cult UI und Motion Primitives an. Cult UI zeigt laut Startseite 154 animierte Komponenten, nutzt Tailwind CSS v4 und Motion und wird über die shadcn CLI installiert. Motion Primitives bringt 33 Kernkomponenten wie Texteffekte und animierte Hintergründe mit, dazu eine eigene CLI. Motion Primitives liefert eher Bausteine als fertige Sections, und keine der Kerndateien prüfte Reduced Motion. Plan also ein, das selbst zu ergänzen.

Was ist die beste Aceternity UI Alternative?

Die naheliegendste Aceternity UI Alternative ist Magic UI. Beide sind shadcn-Registries mit Effekten für Landingpages auf Basis von Motion. Aceternity ist auffälliger: Spotlight-Heros, 3D-Karten, Beams und Shader-Hintergründe. Neben den kostenlosen Komponenten gibt es kostenpflichtige Blöcke und Templates: am Tag unseres Checks $169 pro Jahr oder $199 lebenslang, für ein Team mit 10 Personen $1,590.

Prüfen musst du vor allem die Lizenz. Die Bedingungen von Aceternity (opens in a new tab) gelten für jedes Item, das man kaufen oder herunterladen kann, und verbieten, Items als Quelldateien weiterzugeben, auch in geänderter Form. Wenn dein Projekt ein öffentliches Repository ist, frag nach, bevor du diese Dateien committest. Die kostenlosen Komponenten von Magic UI stehen unter MIT und haben keine solche Grenze. Als Aceternity UI Alternative für Open-Source-Projekte sind Magic UI oder Cult UI daher die sicherere Wahl.

Berücksichtigen animierte React-Komponenten Reduced Motion?

Nur manche. In unserer Textsuche prüft React Bits Reduced Motion in 205 seiner 218 Komponenten, Magic UI dagegen in 6 von 79 Dateien und Aceternity UI in 5 von 113. Menschen schalten „Bewegung reduzieren“ wegen vestibulärer Störungen, Migräne und Reisekrankheit ein, und ein Hero-Effekt in Endlosschleife ist genau das, was diese Einstellung verhindern soll. Unser Guide zu prefers-reduced-motion in React zeigt den Hook ohne Hydration-Mismatches.

Wenn du bei einer Bibliothek auf Basis von Motion bleibst, etwa Magic UI, Aceternity UI, Cult UI oder Motion Primitives, kannst du den größten Teil der Lücke an einer Stelle schließen. Die Einstellung reducedMotion von Motion steht standardmäßig auf "never". Setz sie auf "user", dann überspringt jede motion-Komponente darunter Transform- und Layout-Animationen (opens in a new tab) und behält Änderungen an Deckkraft und Farbe:

// app/providers.tsx
"use client";

import { MotionConfig } from "motion/react";

export function Providers({ children }: { children: React.ReactNode }) {
  return <MotionConfig reducedMotion="user">{children}</MotionConfig>;
}

CSS-Keyframes, Canvas- und WebGL-Schleifen erreicht das nicht. Das Marquee von Magic UI läuft zum Beispiel über den Keyframe animate-marquee. Ergänz deshalb eine Regel in deinem globalen CSS:

@media (prefers-reduced-motion: reduce) {
  .animate-marquee,
  .animate-marquee-vertical {
    animation: none;
  }
}

Canvas- und WebGL-Effekte brauchen den Check in ihrer Render-Schleife. Unser Muster: einen Frame zeichnen, nur weiterlaufen, solange Reduced Motion aus ist, und neu starten, wenn sich die Einstellung ändert. So sehen Besucher mit Reduced Motion ein Standbild statt eines leeren Canvas.

// im useEffect, dem das Canvas gehört; draw(time) zeichnet einen Frame
const query = window.matchMedia("(prefers-reduced-motion: reduce)");
let raf = 0;
const frame = (time: number) => {
  draw(time);
  if (!query.matches) raf = requestAnimationFrame(frame);
};
const restart = () => {
  cancelAnimationFrame(raf);
  raf = requestAnimationFrame(frame);
};
restart();
query.addEventListener("change", restart);
return () => {
  cancelAnimationFrame(raf);
  query.removeEventListener("change", restart);
};

Genau diese Dateien solltest du lesen, bevor du auslieferst.

Funktionieren animierte React-Komponenten auf dem Smartphone?

Die meisten werden sauber gerendert, aber drei Dinge gehen auf dem Smartphone kaputt, und keins davon zeigt sich in einer Desktop-Vorschau.

1. Effekte, die der Maus folgen. Das Dock von Magic UI vergrößert Icons über onMouseMove, und ein Finger, der über einen Touchscreen gleitet, löst keine Mausbewegungen aus. Lens hört ebenfalls nur auf Mausbewegungen, und Smooth Cursor überspringt Touch-Zeiger absichtlich. Die Cursor-Effekte von React Bits verhalten sich unterschiedlich: Target Cursor schaltet sich ohne feinen Zeiger ab, Blob Cursor und Splash Cursor verarbeiten Touch. Ein Effekt, der auf dem Smartphone stillsteht, ist in Ordnung, solange das Layout ihn nicht braucht, um Inhalte zu zeigen.
2. Inhalte, die erst beim Hover erscheinen. Eine Karte, die ihren Text erst beim Hover zeigt, versteckt ihn vor Touch-Nutzern. Prüf jede solche Karte mit einem Tippen.
3. GPU-Kosten. Ein Shader über den ganzen Bildschirm zeichnet bei 3x Device Pixel Ratio neunmal so viele Pixel wie derselbe Shader bei 1x. Browser begrenzen außerdem, wie viele WebGL-Kontexte eine Seite gleichzeitig halten kann, und verwerfen jenseits dieser Grenze den ältesten. Ein Effekt, der seinen Kontext beim Unmount nie freigibt, kann also nach genügend Routenwechseln ein anderes Canvas leeren.

Teste auf deinem Smartphone, nicht nur im Responsive-Modus in den DevTools, und lies unseren Vergleich mobiler React-Komponentenbibliotheken dazu, wie sich App-Komponenten bei 390px schlagen.

Wann ist Wingo UI statt Magic UI sinnvoll?

Wingo UI ist sinnvoll, wenn die animierten Teile im Produkt sitzen, neben Formularen, Menüs und Sheets, und auf dem Smartphone funktionieren müssen. Es ist eine Bibliothek für React 19 und Tailwind CSS v4, die als Quellcode installiert wird. Der Großteil des Katalogs sind App-Komponenten, und die animierten folgen denselben Regeln. Vier kostenlose zeigen, wie wir mit den Problemen oben umgehen.

Der Fluid Orb ist ein WebGL-Orb für Sprachassistenten und Ladezustände. Er rendert mit bis zu 2x Device Pixel Ratio, zeigt bei aktivem Reduced Motion ein Standbild und gibt seinen WebGL-Kontext beim Unmount frei, damit sich bei Remounts nie Kontexte stapeln. Die Farbe steckt in einem einzigen Shader-Uniform, ein Farbwechsel kostet also kein Neukompilieren.

Die Gooey Nav ist eine Tab-Leiste oder ein Segmented Control, bei dem sich das gewählte Item über einen dehnbaren Hals von der Gruppe löst. React Bits hat auch eine Gooey Nav. Unsere folgt bei Items mit href der aktuellen URL, markiert das aktive Item mit aria-current, vergrößert ihre Touch-Ziele auf Touchscreens auf 44px und hat ein stacked-Layout mit fullWidth für eine Leiste unten am Smartphone-Bildschirm. Mit Reduced Motion springt das Item an seinen Platz, statt zu federn.

Der Animated Counter dreht jede Ziffer wie ein Kilometerzähler, nutzt tabellarische Ziffern, damit sich die Breite nur ändert, wenn eine Stelle hinzukommt oder wegfällt, und legt die reine Zahl in einen Span nur für Screenreader. Assistive Technologien lesen also „9,310“ vor statt zehn drehender Ziffern. Mit Reduced Motion ändert sich der Wert sofort.

Das Feld Gravity Letters lässt Buchstaben, Ziffern oder beliebige React-Nodes, die du übergibst, auf einen Physik-Haufen fallen. Tippen lässt etwas fallen, Gedrückthalten schüttet nach, und wenn du das Smartphone neigst, rutscht der Haufen weg (iOS fragt beim ersten Tipp nach der Bewegungsberechtigung). Die Physik-Schleife stoppt, sobald alles liegt, und mit Reduced Motion erscheinen die Zeichen direkt auf dem Haufen, Neigung wird ignoriert.

So kombinierst du drei davon zu einer Nutzungskarte für ein SaaS-Dashboard:

// components/usage-card.tsx
"use client";

import { useState } from "react";
import FluidOrb from "@/components/ui/fluid-orb";
import { AnimatedCounter } from "@/components/ui/animated-counter";
import { GooeyNav } from "@/components/ui/gooey-nav";

const ranges = ["Tag", "Woche", "Monat"];
const requests = [1284, 9310, 40255];

export function UsageCard() {
  const [range, setRange] = useState(0);

  return (
    <section className="flex flex-col items-center gap-6 rounded-3xl bg-card p-6 shadow-raised">
      <FluidOrb size={144} color="#1A73F2" />
      <AnimatedCounter value={requests[range]} size="lg" weight="semibold" locale="en-US" suffix={<span className="ml-2 text-base font-normal text-muted-foreground">Anfragen</span>} />
      <GooeyNav items={ranges} value={range} onChange={setRange} size="sm" />
    </section>
  );
}

Und eine 404-Seite, auf der man gern landet, mit einer Obergrenze, damit eine lange Sitzung nie Hunderte Nodes anhäuft:

// app/not-found.tsx
import GravityLetters from "@/components/ui/gravity-letters";

export default function NotFound() {
  return (
    <GravityLetters initialText="404" type="numbers" maxGlyphs={80} className="h-[70dvh] w-full">
      <p className="absolute inset-x-0 top-10 text-center text-sm text-muted-foreground">
        Diese Seite ist runtergefallen. Tipp irgendwohin.
      </p>
    </GravityLetters>
  );
}

Alle vier gehören zum kostenlosen Tarif: animierte React-Komponenten kostenlos für deine eigenen Projekte und Kundenprojekte. Ein Befehl installiert sie:

npx wingo-ui@latest add fluid-orb gooey-nav animated-counter gravity-letters

Die Grenzen, ehrlich benannt: Wingo UI hat weniger reine Marketing-Effekte als Magic UI, Aceternity UI oder React Bits. Unsere Texteffekte, rotierenden Wörter und das Marquee sind Pro, und wenn du fünfzig animierte Hintergründe durchstöbern willst, ist React Bits der bessere Katalog. Wingo UI ist außerdem jünger und hat eine kleinere Community. Stärker ist es bei allem rund um die Effekte: dieselben Regeln für Bewegung, Touch und Theming über 226 Komponenten, ein MCP-Server, der Claude Code, Cursor und Codex die echten Props liefert, und npx wingo-ui@latest update, das unsere Fixes auch in Dateien einmergt, die du bearbeitet hast.

Welche Bibliothek für animierte React-Komponenten passt zu dir?

Das hängt davon ab, ob du Effekte für die Landingpage, einen kostenlosen Katalog zum Stöbern oder Produkt-UI brauchst:

• Du magst Magic UI und willst mehr davon: Nimm Cult UI oder die Pro-Sections von Magic UI dazu, beide installierst du über die shadcn CLI.
• Du willst auffällige Hero-Effekte: Aceternity UI, nachdem du die Lizenz gelesen hast, falls dein Repository öffentlich ist.
• Du willst den größten kostenlosen Katalog und WebGL-Hintergründe: React Bits, unter MIT plus Commons Clause.
• Du willst kleine MIT-Bausteine, die du selbst zusammensetzt: Motion Primitives, mit MotionConfig reducedMotion="user" drumherum.
• Du brauchst animierte Teile, die auf dem Smartphone auch App-Komponenten sind: Wingo UI.

Die meisten Teams landen bei zwei: einer Effekt-Registry für die Landingpage und einer Komponentenbibliothek für das Produkt. Diese Aufteilung ist in Ordnung, denn alle hier kopieren schlichte Quelldateien in denselben Ordner components. Für das breitere Feld, auch Bibliotheken ohne Animation, lies unseren Guide zu shadcn-Alternativen, und weitere direkte Vergleiche findest du unter Vergleiche und Alternativen.

Um den Ansatz von Wingo UI kostenlos auszuprobieren, führ den Installationsbefehl oben aus und schalte in deinen Systemeinstellungen „Bewegung reduzieren“ ein, während die Demos laufen. Pro-Items und Pläne findest du auf der Preisseite.

Häufige Fragen

Was ist die beste kostenlose Alternative zu Magic UI?

React Bits hat den größten kostenlosen Katalog: 218 Komponenten im Repository, jede in vier Code-Varianten, unter MIT plus Commons Clause. Wenn du reines MIT willst, sind Cult UI und Motion Primitives kostenlos, basieren auf Motion und lassen sich per CLI installieren.

Ist Magic UI für kommerzielle Projekte kostenlos?

Ja, die Open-Source-Komponenten stehen unter MIT, du darfst sie also in kommerziellen Projekten einsetzen. Magic UI Pro ist eine separate Einmal-Lizenz für $199, die kommerzielle Nutzung erlaubt, aber das Weitergeben oder Weiterverkaufen der Templates verbietet.

Was ist eine gute Aceternity UI Alternative?

Die übliche Antwort ist Magic UI, denn beide sind shadcn-Registries mit Marketing-Effekten auf Basis von Motion. React Bits deckt mit WebGL-Hintergründen und Texteffekten ein ähnliches Feld ab, und seine kostenlosen Komponenten sind auch kommerziell frei nutzbar.

Berücksichtigen animierte Komponentenbibliotheken prefers-reduced-motion?

Das ist sehr unterschiedlich. Bei unserem Check im Oktober 2026 erwähnten 6 von 79 Komponentendateien von Magic UI und 5 von 113 Dateien von Aceternity UI Reduced Motion, bei React Bits waren es 205 von 218. Bei Komponenten auf Basis von Motion kannst du die App in MotionConfig reducedMotion="user" packen, das stoppt Transform- und Layout-Animationen.

Kann ich Magic UI mit shadcn/ui oder einer anderen Bibliothek mischen?

Ja. Magic UI, Aceternity UI, React Bits, Cult UI und Wingo UI kopieren alle Quelldateien in dein Projekt, die meisten über die shadcn CLI. Achte auf Dateien mit demselben Namen und auf doppelte Keyframes in deinem globalen CSS.