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 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.
Reason two: you want a different look
Magic UI's aesthetic is polished and product-launch shaped. If that is the mismatch:
Aceternity is darker and heavier on glow, with 87 components here. Kokonut UI is cleaner and more geometric, 56 here. Cult UI is playful and interaction-led, 35 here. Origin UI barely changes the shadcn look at all and extends the primitives instead, 44 here. reuno UI leans on shaders.
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 and the larger general registries in the 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:
| Source | Best for | Trade-off |
|---|---|---|
| Magic UI | The originals, from the author, with his own docs | Motion runtime, and a marketing-shaped catalogue |
| shadcn/ui | Every primitive these registries build on | No animation components |
| Motion | Writing the effect yourself with full control | You are building, not installing |
| 21st | The same components with live previews, and the neighbouring registries | Quality 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:
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 registry directory →
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.