# Magic UI Alternativen: 5 React-Bibliotheken im Vergleich

> Magic UI Alternativen im Vergleich (Oktober 2026): Aceternity UI, React Bits, Cult UI, Motion Primitives und Wingo UI nach Lizenz, Preis und Reduced Motion.

- Autor: [Serban Rusu](https://wingo-ui.com/blog/authors/serban), Founder of Wingo UI
- Veröffentlicht: 16. Okt. 2026
- Kategorie: [Vergleiche und Alternativen](https://wingo-ui.com/de/blog/category/comparisons)
- Lesezeit: 11 Min.
- Kanonische URL: https://wingo-ui.com/de/blog/magic-ui-alternatives
- Englische Fassung: https://wingo-ui.com/blog/magic-ui-alternatives

## Kurz gesagt

Die naheliegenden Magic UI Alternativen sind Aceternity UI für auffällige Hero-Effekte, React Bits für den größten kostenlosen Katalog (mit den konsequentesten Reduced-Motion-Checks, die wir gefunden haben) sowie Cult UI oder Motion Primitives für kleinere MIT-Sets auf Basis von Motion. Nimm Wingo UI, wenn die animierten Teile auch als echte App-Komponenten auf dem Smartphone funktionieren müssen, und Reduced Motion in jeder Datei berücksichtigt ist. Egal, wofür du dich entscheidest: Prüf die Lizenz, bevor du den Quellcode veröffentlichst, und teste jeden Effekt auf einem Touchscreen.

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](https://magicui.design/docs/installation) 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](https://github.com/magicuidesign/magicui) steht unter MIT und hatte bei unserem Check 22,7k Sterne. Der Registry-Ordner enthielt 79 Komponentendateien.

[Magic UI Pro](https://pro.magicui.design/) 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](https://pro.magicui.design/license) 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.

| Bibliothek | Lizenz | Preis | Installation | Technik hinter der Animation |
| --- | --- | --- | --- | --- |
| [Magic UI](https://pro.magicui.design/) | MIT (kostenlos); Pro-Lizenz | Kostenlos; Pro $199 einmalig | `npx shadcn@latest add @magicui/<name>` | Motion, CSS-Keyframes, Canvas |
| [Aceternity UI](https://ui.aceternity.com/pricing) | [Aceternity-Lizenz](https://ui.aceternity.com/licence) | Kostenlos; $169 pro Jahr, $199 lebenslang, Team $1,590 für 10 Personen | `npx shadcn@latest add @aceternity/<name>` | Motion in 83 von 113 öffentlichen Dateien |
| [React Bits](https://github.com/DavidHDev/react-bits) | MIT + Commons Clause | Kostenlos; [Pro](https://pro.reactbits.dev/) $129, $249 oder $349 einmalig | shadcn CLI (`@react-bits/...`) oder jsrepo; JS oder TS, CSS oder Tailwind | CSS, Motion, GSAP, ogl, three.js |
| [Cult UI](https://github.com/nolly-studio/cult-ui) | MIT | Kostenlos; Cult-Pro-Downloads, Preis nicht angegeben | shadcn CLI per URL oder Namespace `@cult-ui` | Motion, Tailwind CSS v4 |
| [Motion Primitives](https://motion-primitives.com/docs/installation) | MIT | Kostenlos; Pro-Seite, Preis nicht angegeben | `npx motion-primitives@latest add <name>` | Motion |
| [Wingo UI](https://wingo-ui.com/docs/installation) | Pro Entwickler; [Lizenz](https://wingo-ui.com/de/legal/license) | 75 von 352 Items kostenlos; Pro $8 im Monat, $80 im Jahr oder $150 lebenslang | `npx wingo-ui@latest add <slug>` oder die shadcn-Registry | Motion-Springs, Canvas, WebGL |

| Bibliothek | Katalog | Dateien mit Reduced-Motion-Check | Auf dem Smartphone |
| --- | --- | --- | --- |
| Magic UI | 79 kostenlose Komponentendateien; Pro-Sections und Templates | 6 von 79 | Dock, Lens und Smooth Cursor reagieren auf die Maus |
| Aceternity UI | 113 Komponenten in der öffentlichen Registry; kostenpflichtige Blöcke und Templates | 5 von 113 | 3D Card und Card Spotlight kippen und leuchten über Maus-Events |
| React Bits | 218 Komponenten; Pro ergänzt 230 Komponenten und 600 Blöcke | 205 von 218 | Target Cursor schaltet sich ohne feinen Zeiger ab; Blob und Splash Cursor verarbeiten Touch |
| Cult UI | 141 Dateien im UI-Ordner der Registry | 28 von 141 | Keine Touch-Hinweise im README |
| Motion Primitives | 33 Kernkomponenten | 0 von 33 | Primitives; das Verhalten verdrahtest du selbst |
| Wingo UI | 226 Komponenten, 90 Blöcke, 17 Hooks, 19 Helfer | 214 von 227 Dateien in `components/ui` | Bottom Sheets unter 768px, 44px Touch-Ziele, Neigung und Touch-Eingabe |

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](https://github.com/DavidHDev/react-bits) 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](https://ui.aceternity.com/licence) 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](https://wingo-ui.com/de/blog/prefers-reduced-motion-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](https://motion.dev/docs/react-accessibility) und behält Änderungen an Deckkraft und Farbe:

```tsx
// 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:

```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.

```ts
// 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](https://wingo-ui.com/de/blog/best-react-component-library-for-mobile) 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](https://wingo-ui.com/components/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.

> Live-Demo (Fluid Orb): Wähl eine Farbe und erhöh die Turbulenz: Die Bänder mischen sich stärker, die Drift behält ihr Tempo. Probier sie unter [Fluid Orb](https://wingo-ui.com/components/fluid-orb) aus und installier sie mit `npx wingo-ui@latest add fluid-orb`.

Die [Gooey Nav](https://wingo-ui.com/components/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.

> Live-Demo (Gooey Nav): Klick auf jedes Item, um es aus der Leiste zu heben; in einem Rahmen mit Smartphone-Breite dockt sie als gestapelte Tab-Leiste unten an der Seite an. Probier sie unter [Gooey Nav](https://wingo-ui.com/components/gooey-nav) aus und installier sie mit `npx wingo-ui@latest add gooey-nav`.

Der [Animated Counter](https://wingo-ui.com/components/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](https://wingo-ui.com/components/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.

> Live-Demo (Gravity Letters): Tipp, um einen Buchstaben fallen zu lassen, halt gedrückt, um einen Strom zu schütten; auf dem Smartphone neigst du es, damit der Haufen wegrutscht. Probier sie unter [Gravity Letters](https://wingo-ui.com/components/gravity-letters) aus und installier sie mit `npx wingo-ui@latest add gravity-letters`.

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

```tsx
// 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:

```tsx
// 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:

```bash
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](https://wingo-ui.com/docs/mcp), 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](https://wingo-ui.com/de/blog/shadcn-alternatives), und weitere direkte Vergleiche findest du unter [Vergleiche und Alternativen](https://wingo-ui.com/de/blog/category/comparisons).

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](https://wingo-ui.com/de/pricing).

## Komponenten in diesem Artikel

- [Fluid Orb](https://wingo-ui.com/components/fluid-orb) (Free): A React WebGL orb with drifting fluid shading for AI voice assistants and ambient loading states, inspired by ChatGPT's voice mode. Installation: `npx wingo-ui@latest add fluid-orb`
- [Gooey Nav](https://wingo-ui.com/components/gooey-nav) (Free): A React navigation bar with a gooey effect: the selected item stretches away from the group. Installation: `npx wingo-ui@latest add gooey-nav`
- [Animated Counter](https://wingo-ui.com/components/animated-counter) (Free): A React animated counter that rolls each digit to its new value like an odometer, for stats, prices, timers and live numbers. Installation: `npx wingo-ui@latest add animated-counter`
- [Gravity Letters](https://wingo-ui.com/components/gravity-letters) (Free): A React physics text effect: a gravity field where letters, numbers, emoji or any components you pass fall and pile up like real objects. Installation: `npx wingo-ui@latest add gravity-letters`

## 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.

---

Quelle: https://wingo-ui.com/de/blog/magic-ui-alternatives