Pick a component library your AI editor can install cleanly and whose components match the screens you're building. For most Next.js apps built with Cursor, v0 or Lovable, that means shadcn/ui as the base, plus one animated library on top for the parts people notice. Which one depends on whether you're building a marketing site or the app itself, and on how much you want to spend.
I make qodesign, a small paid catalogue of animated React components, so I'm not neutral. To keep this fair, every price, licence and component count below was read from each library's own site on October 21, 2026, and the sources are listed at the end. Prices change, so check before you buy.
Before comparing anything, open your repo. If there's a components.json at the root and a components/ui folder with files like button.tsx, the project already uses shadcn/ui. Many AI-generated Next.js apps end up there, and that changes the question. You aren't choosing a design system from scratch. You're choosing what to add on top of one.
shadcn/ui is free and MIT licensed. Its components are copied into your project as source files, so your agent can read and edit them like any other code. Most of the libraries below build on the same idea, and several install through the shadcn CLI or a shadcn registry. If you haven't tried installing a third-party component that way, this post on shadcn registries walks through it.
If your project has no components.json and your agent wrote everything by hand, you can still use any of these libraries. You'll just be copying files more often than running an install command.
With an AI editor this matters more than the component gallery. There are three common routes in 2026:
- You copy the source from the site and paste it in (or paste it into the agent's chat).
- You run the shadcn CLI against a registry URL, and the files land in
components/ui.
- Your agent pulls components itself through an MCP server or a prompt written for it.
Copying works everywhere. The CLI keeps file paths and dependencies consistent. Agent installs are the newest and depend on your editor. Try one free component first and see whether your agent puts it where you'd expect.
Most animated libraries are built for landing pages: heroes, feature grids, testimonials, text effects and backgrounds. That's great when the job is a launch page. It helps less once you're inside the product and need a login screen, a one-time code input, a checkout or a dashboard that holds up when real data and errors show up.
Look at the demos and ask whether they show loading, error and empty states, or only the happy path. A hero section rarely needs an error state. A sign-in form always does.
Free MIT libraries are the obvious start, and they're very good now. Paid options split into one-time passes (pay once, keep the code and usually get updates) and monthly plans. If you only need a few pieces, a big all-access pass can cost more than the parts you'll use. If you're building many sites, a pass usually pays for itself.
MIT lets you do almost anything, including resale. Paid licences are where the differences show up: how many seats, whether client work is covered, and whether you can build templates with the components. AI tools add one more question, which is where you're allowed to upload the files. qodesign's licence, for example, allows using an AI coding assistant on your own project but not uploading the files somewhere other people can get the code. Read the licence page before you put paid code in a public repo or a shared template.
Here's what each library's own site said on October 21, 2026. "One-time" means the site sells it as a single payment.
| Library | Free part | Paid | Built with |
|---|
| Magic UI | 150+ free, open-source animated components (MIT on GitHub) | Pro $199 one-time: 50+ landing sections, 9+ templates | React, TypeScript, Tailwind, Motion, shadcn/ui |
| Aceternity UI | 100+ free components | 1-year $169, lifetime $199, Team $1,590, all one-time; 200+ premium blocks, 15+ templates | React, Next.js, Tailwind, Framer Motion |
| shadcnblocks | Free blocks | Pro $149, Premium $299, Elite $399, lifetime; 2,154+ pro components and 2,310+ pro blocks | React, Next.js, Tailwind, shadcn/ui |
| Skiper UI | Some components marked free | Premium $129 one-time (106+ premium components), Exclusive $549 adds a Figma file | Next.js, React, Tailwind, shadcn/ui |
| Kokonut UI | 75 components, MIT | Pro $119 one-time (shown reduced from $159); single templates from $49 | React, Tailwind, Motion, shadcn/ui |
| React Bits | Free library, MIT + Commons Clause | Pro one-time: $129, $249 or $349; 865 assets | React, CSS or Tailwind |
| Cult UI | Everything, MIT; Cult Pro stopped selling on September 30, 2026 and moved into the free library | None | React, Tailwind, Motion |
| Hover.dev | Basic components | Hover Pro $49 one-time (shown reduced from $149), plus local taxes | React, Tailwind, Motion |
| 21st.dev | Free to browse | Builder $6/month, Builder + AI $15/month, Team $7.50 per seat/month, billed yearly | React, Tailwind, shadcn/ui |
| Uiverse | Everything, MIT | None | HTML/CSS or Tailwind |
| Animata | Everything, MIT | None | React, Tailwind |
A few notes the table can't hold.
React Bits uses MIT plus the Commons Clause. You can use the components in your apps, but you can't sell or redistribute them as components. That's fine for almost every app builder and worth knowing if you make templates.
Cult UI is now entirely free, since its maker closed Cult Pro. If you liked Cult Pro's components, they're in the open library.
21st.dev is a marketplace with components from many authors and a monthly plan. It fits people who copy a lot of components every month. Most of the others are one team's work, which tends to mean a more consistent look. Uiverse is the other community-made exception.
shadcnblocks, Aceternity's paid tier, Magic UI Pro and Kokonut Pro lean toward assembling whole pages from sections. Skiper UI and React Bits lean toward effects: cursor trails, image reveals, text animations and backgrounds.
qodesign is much smaller than any paid library above: 17 pieces, 16 of them paid, one free. Each is a whole app moment, such as a login screen, a one-time code check, a checkout card, a tab bar or a dashboard, with its loading and success states already designed. They're React + Tailwind in TypeScript, and most also use Framer Motion.
Single pieces start at $3. The Shelf is $29 once for all 16 paid pieces (they'd be $54 bought one by one), and Pro Lifetime is $69 once for the Shelf plus every piece released later. Every download has an HTML version and a PROMPT.md with prompts for Cursor, v0, Claude Code or Lovable that tell the agent where to put the files, how to wire your callbacks and to run your build. The licence covers personal and client projects and forbids reselling the components. There's a free piece at /free if you want to see the format before paying anything.
Where it's the wrong choice: if you need dozens of landing sections, shadcnblocks or Aceternity give you far more for one payment. If you want to spend nothing, Magic UI, Cult UI and Kokonut's free library are excellent. qodesign makes sense when your app works but the few screens people touch most, like sign-in, checkout or navigation, still look like the default output of an AI editor.
Whatever you pick, the problems with AI editors tend to be the same ones. The agent imports a component into a server component and you get a "use client" error (fix here). It rewrites your colours to match the demo. It installs a second animation library when one is already there.
What helps:
- Tell the agent which folder new components go in and which colour tokens to keep. Put it in the rules file your editor reads, so you don't repeat it in every prompt.
- Add one component per prompt and run the build before the next one.
- Keep to one animation library if you can. Magic UI, Aceternity, Kokonut, Cult UI and Hover.dev all list Motion (Framer Motion), so mixing pieces from them doesn't add a second one.
Each editor has its own habits. There are notes for Cursor, v0 and Lovable, and this post on making a v0 app look less generated covers the design side.
- Building a landing page and want it free: Magic UI or Cult UI, on top of shadcn/ui.
- Building many marketing sites: a one-time pass from shadcnblocks, Aceternity or Magic UI Pro.
- Want striking effects for a portfolio or launch page: React Bits or Skiper UI.
- Want your agent to install everything from a registry: Kokonut UI Pro.
- Copy lots of components every month from many authors: 21st.dev.
- Your app works and a few key screens need to feel finished: a single qodesign piece, or the Shelf.
For most projects, shadcn/ui as the base plus one animated library on top. shadcn/ui is free, MIT licensed and copied into your project as source, which suits AI editors. The add-on depends on the job: Magic UI or Cult UI for free landing page effects, shadcnblocks or Aceternity for many sections, and smaller catalogues like qodesign for finished app flows.
Check the licence page of the one you buy, because they differ on seats, client work and templates. qodesign's licence covers personal and client projects and forbids reselling the components as they are. Free MIT libraries like shadcn/ui, Magic UI, Kokonut's free library and Cult UI allow client use too. React Bits allows it under MIT plus the Commons Clause, which only rules out selling the components themselves.
They're all React and Tailwind, so any agent that can edit your files can add them. Libraries that install through the shadcn CLI or a registry tend to go in more cleanly, because the file paths and dependencies come from the registry instead of from the agent guessing.
Not in the npm-package sense. You copy its components into your project with a CLI and own the code from then on. That's why so many other libraries build on it: they can ship files that match the same structure and styling conventions.
All checked on October 21, 2026, on each library's own site:
