Aceternity UI vs Magic UI: what each gives you, in values

Aceternity UI and Magic UI are both libraries of animated React components built with Tailwind CSS and Motion, both install through the shadcn CLI, and both pair a free tier with a paid one. The differences that matter are in the license, in what the paid tier sells, and in how much of each effect you can change without opening the source.

Magic UI's free library is open source under MIT: more than 150 components in a public repository with over 23,000 GitHub stars. Aceternity's free tier is over 100 components it lets you use in personal and commercial projects, and its paid All-Access catalog of blocks and templates is the larger of the two paid offers.

The short verdict. Take Magic UI for free, open-source effects you can audit and tune. Take Aceternity UI when you want finished landing-page sections and will pay for them. Both ship defaults that lean blue to violet, which is fine for one effect and a problem for a whole page, and neither decides what your page should look like. That job belongs to an art direction, which is what Thanor sells.

Aceternity UI vs Magic UI at a glance#

Both libraries are free to start and both are excellent at what they do. What separates them, as each vendor's own pages showed on 9 November 2026:

We read both pricing pages, both license pages and the registry source of every component in the next table. We ran no benchmark; each value below is copied from the component code as served.

What each library looks like out of the box#

The most useful comparison is the actual default values, so here they are, from each library's registry source:

Two libraries, two teams, and the same family of cyan, blue and violet, with the occasional warm accent. That is a sensible choice for a library, whose default has to look good on a white page and a black page for strangers, and cool gradients do. Anthropic's frontend-design skill for Claude lists "gradient washes as decoration" among the traits AI-generated design clusters around, and these are the gradients many of those pages install. Why AI websites look the same traces the rest of the shared defaults.

One default effect is a detail; a page of them is a look you did not choose. The same three techniques, a moving background, a band of running type and something that follows the cursor, read differently when the colors and timing were decided for the page:

Free tiers and licenses compared#

Magic UI's free tier is the more open of the two. The library is MIT licensed in a public repository, so you can read every file before you install it, fork it, and keep using it whatever happens to the company. The MIT terms ask only that the copyright notice travels with the code.

Aceternity's free tier is generous too. Its FAQ says the free components can be used in personal and commercial projects, and the components are copied into your project through the shadcn CLI, so the copy lives in your codebase. The license page then governs the paid items: an ongoing, worldwide license to build unlimited end products for yourself or clients, with resale of the items, redistribution of the source and making templates for sale all excluded.

What this means in practice:

• For a client site, both free tiers are fine to use.
• For an open-source project whose license must be checkable by anyone, Magic UI's MIT license is the simpler answer.
• For a product that sells templates or UI kits, neither paid tier allows it, and Magic UI's MIT terms apply only to its free library.

If you are deciding whether to pay for anything at all, paid prompts or free components sets out when the free layer is genuinely enough, and it often is. Before you pay any prompt library, open a premium item while logged out; sometimes the text is already there.

Paid tiers and what they cost#

The two paid offers sell different things, so compare them by what you would build with them rather than by headline price.

Aceternity UI All-Access is a catalog of sections. At the time of writing it lists over 200 premium blocks (hero sections, bento grids, pricing, testimonials, navbars, footers), more than 15 templates, five full landing pages and 16 micro-interactions, plus AI-ready prompts for Acebuilder, Claude Code, Codex, Lovable and v0, a private Discord and 48-hour support. It is a one-time payment in every tier: $169 for one year of access and updates, $199 for lifetime access, $1,590 for a team of up to ten.

Magic UI Pro is smaller and template-led: more than 50 landing-page sections and nine or more templates for AI agent, dev tool, mobile, SaaS and startup pages, built with Next.js, TypeScript, Tailwind CSS, shadcn and Motion. The individual lifetime license is $199 once, and each template is also sold alone for $49.

Neither is a subscription you forget to cancel, which is worth saying in a category full of them. For the paid kits from Tailwind's own makers, which closed to new customers in September, see Tailwind UI alternatives.

The templates in each catalog#

Both catalogs are shaped like the market that buys them, which is software.

• Aceternity UI names twelve templates in its site footer: Agenforce, Nodus, Proactiv, Foxtrot, Playful, Cryptgen and Schedule marketing templates, a Startup landing page, an AI SaaS template, the Agenlabs agency template, and two portfolios, DevPro and Minimal. Templates are part of the paid All-Access tier.
• Magic UI Pro sells six templates at $49 each: Codeforge for developer tools and APIs, AI Agent, Dev Tool, Mobile, SaaS and Startup. It also gives three away as free downloads: Portfolio, Changelog and Blog.

So if your site is a SaaS or AI product page, both libraries have a starting point that fits, and the choice comes down to whether you want one template (Magic UI) or many sections to recombine (Aceternity). If your site is a shop, a restaurant, a studio or a brand with physical products, neither catalog is built for it, and you will be adapting software layouts to a world they were not drawn for. A restaurant's first screen is mostly plain text, for one: hours, address and a booking button. SaaS website design examples shows what the software case looks like when it is directed, and hero section design gives the first viewport in numbers whichever library you use.

Installing them and handing them to an agent#

Both libraries install the same way, through the shadcn CLI, which copies the component's source into your project:

npx shadcn@latest add @aceternity/background-beams
npx shadcn@latest add @magicui/globe

Both also speak to coding agents. Aceternity lists MCP access for Claude Code, Codex, Devin and Cursor on its free plan and runs Acebuilder, a beta builder that pulls its Pro templates into a chat. Magic UI publishes an official MCP server with setup for Cursor, Windsurf and Claude.

Where they differ is how much you can change without editing the file. In the components we opened, Magic UI exposes its look as props: Border Beam takes colorFrom, colorTo, duration and a full Motion transition. Aceternity's Background Beams takes only a className, and its gradient stops are written into the source, so you edit the copied file to change them. Both approaches work once the code is yours; one is quicker for an agent to adjust in a prompt.

<BorderBeam colorFrom="#ff5a1f" colorTo="#ffd166" duration={9} />

Either way, an agent installs exactly what it is given. Ask Claude Code for "an animated hero" and it reaches for the defaults in the table above. The MCP servers worth adding for web design covers both libraries' servers alongside the rest.

Using both libraries on one page#

They coexist without conflict: same framework, same styling system, same animation library, same install path, so a Magic UI marquee under an Aceternity hero is an ordinary combination. The risk is visual, and it is the same risk as mixing authors on 21st.dev, which 21st.dev alternatives goes into.

A page that mixes them carries two motion vocabularies unless you replace both. Blur Fade enters in 0.4 seconds on easeOut; the Lamp Effect takes 0.8 seconds on easeInOut; Border Beam loops every 6 seconds. None of those is wrong. Together they are three tempos on one page.

Three overrides fix most of it:

1. One curve for every structural move, for example cubic-bezier(0.22, 1, 0.36, 1), passed as the ease of every Motion transition you touch.
2. One duration ladder, for example 180ms for hovers, 450ms for reveals and 900ms for anything that moves a whole section.
3. Your palette in every color prop, and in the source where there is no prop, so the beams and auroras carry your accent instead of #6344F5.

Writing those down once, before installing anything, is the subject of design tokens for AI-built websites.

Reduced motion in both libraries#

We searched the thirteen component files we opened, six from Aceternity UI and seven from Magic UI, for prefers-reduced-motion, Motion's useReducedMotion and Tailwind's motion-reduce: variant. None of them contains any of the three. In those files, both libraries leave that policy to your app, so a visitor who asked their device for less motion still gets every beam, aurora and marquee until you add it.

Two changes cover most of it:

1. Wrap the app in <MotionConfig reducedMotion="user">. Motion then respects the device setting, switching off transform and layout animation while opacity fades still run.
2. Stop the CSS loops yourself. Marquees and auroras run on CSS keyframes that Motion does not control, so add motion-reduce:animate-none to the element, or a @media (prefers-reduced-motion: reduce) rule that sets animation: none.

The verdict: Aceternity UI or Magic UI#

• Pick Magic UI if you want free effects you can trust and tune. The MIT license, the public repository and the color and timing props make it the safer default for most projects, open-source ones included, and its Pro templates are reasonably priced one at a time.
• Pick Aceternity UI if you build landing pages often and want finished sections to start from. Its free tier is good, and its paid catalog of blocks and templates is the larger of the two, sold once rather than monthly. Acebuilder adds an AI page builder on top of the catalog.
• Use both if you like; they are compatible. Override their defaults to one palette, one curve and one duration ladder, or the page will show where each effect came from.

What neither library decides is the page. Your palette, your type scale, the order your sections run in, and which one effect the hero spends its attention on are all still open after you install either. That is a design decision, and no component can make it for you.

When neither is the answer#

If your page needs a look of its own more than it needs another effect, start from the direction instead of the parts. Thanor is a library of website designs, each shown as a live, moving preview and each with a long, exact prompt: the palette in hex, the faces and the scale, spacing, easing curves and durations, the section order and every interaction, with hosted films, cut-outs and stills the built page uses. Paste it into Claude, ChatGPT, Gemini, Cursor, Lovable, v0 or Bolt and the model builds that site.

It works with either library underneath. The specification tells the model what the marquee and the background should look like and how fast they move, and for moving backgrounds in particular, the public animated backgrounds page has looping clips you can copy by URL.

Thanor is not a component library and installs nothing; most designs need a paid plan, on the pricing page. How it compares with the other prompt libraries is in MotionSites alternatives, and a MotionSites prompt opened next to a Thanor one shows the difference in length. Animated website backgrounds covers moving heroes that do not slow the page.

Switching from one library to the other#

Because both copy source into your project, switching is a file-by-file job, not a migration of a dependency:

1. Install the replacement next to the original with the shadcn CLI and compare them on the same page.
2. Carry your overrides across. Colors and durations you set as props on Magic UI have to be written into the source on Aceternity components that take only a className, and the other way round.
3. Remove the old file once nothing imports it. Most components in both libraries depend on motion, so the package usually stays.

What to do next#

Open Vesperion and copy its prompt; it is free with an account. Paste it into Claude Code or Cursor in the project where your Aceternity or Magic UI components already live, and watch the model set their colors and timing to the design instead of the defaults. For more effects worth stealing, website animation effects pairs each with the values behind it, and the library has the rest.