Choosing an animated React component library in 2026

I maintain karaUI, so read this with that in mind. I wrote it because “which animated React library should I use?” rarely has a single answer, and most of the comparisons I found were lists of screenshots. The libraries below are good at different things. Some of those things karaUI doesn't do at all, and I'll say so.

How to read this#

Every claim about another library comes from its own website, docs, registry files or GitHub repository, checked on October 20, 2026. Links are in Sources at the end. Where I couldn't confirm something from a primary source, I left it out or marked it not verified, which means only that I didn't confirm it, not that the library lacks it. Prices and counts change; treat them as a snapshot.

The six: karaUI, Magic UI, Aceternity UI, Motion Primitives, React Bits, and shadcn/ui itself, which most of the others build on.

At a glance#

The criteria#

Distribution#

All six put source code in your repo rather than shipping a runtime package you import. The difference is how the code gets there. shadcn/ui describes itself as “a code distribution platform”: a schema and a CLI. Magic UI, Aceternity UI and React Bits publish shadcn registry items under their own namespaces, so one CLI serves them all. React Bits also supports jsrepo and lets you pick one of four flavors (JavaScript or TypeScript, CSS or Tailwind) per component. Motion Primitives has its own CLI, or you copy the file by hand.

# The same CLI, different namespaces
npx shadcn@latest add @magicui/marquee
npx shadcn@latest add @aceternity/3d-card
npx shadcn@latest add @react-bits/SplitText-TS-TW
npx shadcn@latest add @karaui/button

# Motion Primitives ships its own CLI
npx motion-primitives@latest add text-effect

karaUI uses the same shadcn item format, and the @karaui namespace is listed in shadcn's public registry directory, so npx shadcn add @karaui/… works with no setup (older CLIs need the one-time components.json entry below). Its registry follows each file's imports and bundles what it finds, so a component that uses a shared hook or the easing tokens brings them along.

// components.json: only needed on older shadcn CLIs
{
  "registries": {
    "@karaui": "https://karaui.kamisama-v0.my.id/r/{name}.json"
  }
}

Animation dependency#

This matters more than it looks: it decides your bundle, your mental model, and whether two libraries can share a page without pulling in two animation engines. Motion Primitives is built on Motion and says so up front. Magic UI's registry items list motion as a dependency in components such as Blur Fade and Dock, and its Globe is built on Cobe, which renders with WebGL. Aceternity varies by component: Floating Dock depends on motion, while 3D Card and Aurora Background ship as plain React and CSS. React Bits is the most mixed: Split Text uses GSAP, and backgrounds such as Galaxy draw with WebGL2 directly, no library at all.

karaUI uses Motion everywhere, with shared easing and spring tokens so components feel related, and Lenis for its smooth-scroll provider. It has no WebGL code. If your app already uses Motion, karaUI, Magic UI and Motion Primitives slot in without a second engine.

Light, dark and theming#

shadcn/ui set the pattern most of this ecosystem follows: semantic CSS variables like background and foreground, with dark mode done by overriding the same tokens inside .dark. Components don't change; only values do. I couldn't confirm a documented, library-wide theming policy for the other four from their own pages, so the table marks those cells as not verified. Check the components you plan to use in both modes.

karaUI goes one step further. It has 10 design styles (default, minimalism, neobrutalism, constructivism, swiss, editorial, hand-drawn, retro, flat and bento), independent of light and dark. Each style writes a full light and a full dark token set, plus its own radii, shadows and fonts, and a data-style attribute can scope a style to one section of a page.

Reduced motion#

An animated library should respect prefers-reduced-motion, and a global CSS rule isn't enough, because it can't stop JavaScript-driven springs. Each React Bits component I read (Split Text, Iridescence, Galaxy, Dock) checks the media query in its source. That was four files, not an audit of the library. For the others I didn't find a stated library-wide policy, which isn't the same as not having one: read the source of what you install.

In karaUI it's a rule every component follows: transform-based motion is gated behind Motion's useReducedMotion(), movement is dropped, and opacity and color transitions stay, so state changes are still visible. Decorative hover effects are also gated to devices that can actually hover, so touch screens don't get stuck hover states.

Scope#

This is where the libraries differ most, and where karaUI is clearly not the strongest pick for every job. Magic UI, Aceternity UI and React Bits have far more visual effects and backgrounds than karaUI. React Bits' README lists 215+ free components and backgrounds as of October 2026, with backgrounds as its largest category. Aceternity groups its catalog into backgrounds and effects, 3D, scroll and parallax, text and more, and its pricing page lists 100+ free components as of October 2026. Magic UI describes itself as “animated components and effects” and sells templates. If you're building a launch page and want a shader background or a 3D globe, start there.

Motion Primitives is a focused set of motion building blocks; its README notes the project is in beta. shadcn/ui is the base layer: the accessible, general-purpose app components most of these libraries are designed to sit next to.

karaUI aims at product interfaces: inputs, tables, dialogs and date pickers with motion built in; an AI agent category with a chat workspace, prompt input, tool approval, streaming response, citations, model selector and context meter; and app blocks like a dashboard shell, inbox, file manager, checkout and command palette.

License and pricing#

shadcn/ui, Magic UI and Motion Primitives are MIT on GitHub. React Bits is “MIT + Commons Clause”, which its README describes as free for personal and commercial use; the Commons Clause part restricts selling the software itself, so read it if you plan to redistribute.

Four have paid tiers alongside the free one:

• Magic UI Pro: templates and premium components for a one-time payment with lifetime access ($199 on its docs page as of October 2026).
• Aceternity UI All-Access: one-time payments, not a subscription, as a 1-year license, a lifetime license or a team plan. Its licence page is written around purchased items, so read it before shipping free components in client work.
• Motion Primitives Pro: premium sections and templates on a separate site. I couldn't find its pricing model on the pages I read.
• React Bits Pro: components, marketing and app blocks, Next.js templates and an agent kit for AI coding tools.

karaUI is MIT and has no paid tier. It began as a fork of beUI, and the license keeps that attribution.

Maintenance#

On October 20, 2026, the public repos for shadcn/ui and React Bits had commits within the previous two days, Magic UI within the previous week, and Motion Primitives in late September. None were archived. I didn't find a public source repository for Aceternity UI to check the same way. karaUI is younger and smaller than all of them, and that is a fair thing to weigh.

Where karaUI fits, and where it doesn't#

Pick something else when:

• You want WebGL or shader backgrounds, particle fields or 3D scenes. karaUI has none.
• You need a large catalog of hero effects and landing sections today. Magic UI, Aceternity UI and React Bits are much broader there.
• You want only a handful of motion primitives on top of your own design system; Motion Primitives or plain shadcn/ui may be all you need.

karaUI is a reasonable fit when:

• You're building an AI product and want agent interface components (messages, tool approval, reasoning, citations) that share one motion and token system with the rest of the app.
• You need app screens rather than landing pages: tables, forms, calendars and composed blocks.
• You care about light/dark parity across several visual styles, and about reduced-motion behavior being consistent rather than per component.
• Your app is used on phones. Small controls get 44px touch targets without changing their drawn size, Dialog can become a bottom sheet on small screens, Table and Data Table can stack rows into cards, and Dashboard Shell swaps its sidebar for a drawer. The Mobile & responsive page lists the rest.

Picking one#

Start from the screen you're building, not the demo you liked. For a marketing page full of effects, the effect-heavy libraries have more to offer than karaUI does. For an app, or an AI interface, look at how components behave in dark mode, under reduced motion and on a phone, because those are the parts a demo doesn't show. Whatever you choose, install one component, read its source, and check the license before you ship.

Sources#

All checked on October 20, 2026.

• shadcn/ui: introduction, theming, GitHub repository
• Magic UI: installation, Globe, Blur Fade registry item, GitHub repository
• Aceternity UI: components, 3D Card, Floating Dock registry item, pricing, licence
• Motion Primitives: introduction, installation, Pro, GitHub repository
• React Bits: installation, Split Text registry item, Galaxy registry item, Pro, GitHub repository
• karaUI: Theme, Mobile & responsive, AI agents, and this site's source