/

Best Magic UI Alternatives: Libraries and Components

Compare Aceternity, Kokonut UI, Motion Primitives, Cult UI and Origin UI, with the best components from every alternative library.

Serafim Korablev
Serafim Korablev
@korablev

Magic UI is the largest of the animated shadcn registries: 247 components in its index and 22,000 stars on the repository, which makes it the default answer when someone wants motion on top of shadcn/ui. People look for alternatives for one of three reasons, and each one points somewhere different.

Its author, dillionverma, publishes 61 components in the Magic UI library on 21st, so most of what gets searched for by name can be previewed here before it is installed.

The components people actually come for

Animated Beam is the connector that draws a line between two elements, and it is the one that gets rebuilt from scratch most often. Globe is the autorotating WebGL sphere. Interactive Hover Button and Rainbow Button are the two buttons on every second developer-tool landing page. Text Reveal fades a paragraph in as you scroll, Sparkles Text is the animated headline, Interactive Icon Cloud is the rotating tag sphere, and Confetti is the celebration.

Reason one: you want the effect without the runtime

Most of these animate through a motion library. For a single effect on a marketing page that is a real cost, and the honest alternatives are per-effect rather than per-library.

A globe: COBE Globe by shuding is around 5KB of WebGL with markers, arcs and momentum physics, which is smaller than most hero images. A scroll reveal: CSS scroll-driven animations do this with no JavaScript, covered in the scroll animation guide. A shiny button: Gradient Button and Liquid Glass Button by Ali Imam are CSS. A gradient backdrop: Animated Gradient Background by hammamikhairi.

Best Magic UI alternative libraries

Magic UI's aesthetic is polished and product-launch shaped. These libraries are the closest useful alternatives, each with a full collection page and a few representative components.

LibraryBest forComponents to preview
Aceternity UIDarker, glow-heavy heroes and backgroundsAurora Background, Lamp, Container Scroll Animation
Kokonut UICleaner geometry, animated backgrounds and AI inputsBackground Paths, Shape Landing Hero, AI Voice Input
Motion PrimitivesReusable motion primitives instead of finished sectionsText Effect, Text Shimmer, Infinite Slider
Cult UIInteractive panels, carousels and playful controls3D Carousel, Floating Panel, Popover Form
Origin UIProduct controls that keep the plain shadcn lookDialog, Calendar, Command

Reason three: you need something Magic UI does not cover

The animated registries are marketing-shaped. They are thin on the components a product actually runs on: data tables, date pickers, forms, settings, empty states.

ReUI, Origin UI and the larger general registries in the library directory are the place to look, and shadcn/ui itself covers most of the primitives. The pattern that works is a split: primitives from shadcn, product components from a general registry, and one or two motion pieces where the page needs personality.

Before you swap

Check it is actually different. These registries copy each other freely. Preview both.

Check the dependency list. The component page shows what installs alongside it. One effect that brings a 3D library is a different decision from one that is a keyframe.

Check the last commit. The directory shows when each registry last shipped, which separates a maintained project from an abandoned one faster than a star count does.

Where else to look

The honest list, because the answer is not always us:

SourceBest forTrade-off
Magic UIThe originals, from the author, with his own docsMotion runtime, and a marketing-shaped catalogue
shadcn/uiEvery primitive these registries build onNo animation components
MotionWriting the effect yourself with full controlYou are building, not installing
Magic UI on 21stThe browsable library with live previews and component sourceNot every item from the official catalogue is published here
21st library directoryComparing complete libraries before individual componentsQuality varies by author, so preview before you take it

Taking one

Every component page has a live preview and the code. Installing goes through the shadcn CLI against our registry:

bash

That key comes from your 21st account, and installs require a membership. Set API_KEY_21ST once in your shell and the command works for anything in the catalogue. The 21st MCP covers the same ground without leaving the editor: describe the effect to Claude, Cursor or Codex, get the previews inline, and let the agent write the file.

Browse the Magic UI library →

Compare all libraries →

Frequently asked

What is the lightest alternative to Magic UI's globe?
COBE, at around 5KB of WebGL with markers, arcs and momentum physics, which is smaller than most hero images. It is the rare 3D element that costs nothing to justify, where a full scene library is 150KB before your own code.
Does Magic UI require a motion library?
Most of its components animate through one, which is a real cost when you are pulling it in for a single effect on a landing page. The alternatives are per-effect rather than per-library: CSS for shiny buttons and gradient backdrops, scroll-driven animations for reveals, and a small WebGL library where the effect genuinely needs pixels.
What do animated registries not cover?
The parts a product runs on: data tables, date pickers, form systems, settings screens and empty states. They are marketing-shaped by design. The usual working split is shadcn/ui for primitives, one general registry for product surfaces, and one or two motion components where the page needs personality.
How many components does Magic UI have?
Its registry index carries 247 items, which makes it the largest of the animated shadcn registries, on a repository with roughly 22,000 stars. Its author publishes 61 of them on 21st, where each has a live preview and a dependency list.

Published

Aug 20, 2026

Read time

5 min

Tags

ComparisonRegistriesReactMotion

Share