Magic UI FAQ
The questions people actually ask before adopting the library: whether the library is free (it is — MIT), whether it runs outside React (officially no; community Vue ports exist), how it relates to shadcn/ui and Aceternity UI, what the $199 Pro license allows, and why the name collides with HONOR's phone software. Each answer starts with the short version.
Basics
What is Magic UI, in one paragraph?
An open-source UI library for design engineers: 150+ animated components and effects for React, TypeScript, Tailwind CSS and Motion that you copy into your project through the shadcn/ui registry, the official CLI or the MCP server. Pro is the paid layer — 50+ page sections and 9 templates for a one-time $199.
Is Magic UI free and open source?
Yes. The component library is MIT licensed — free for personal and commercial use, no attribution required — and the source is on GitHub with 21k+ stars. Only Pro sections and the paid templates cost money.
Magic UI vs shadcn/ui: which one do I need?
Both, usually. shadcn/ui gives you the accessible primitives (buttons, dialogs, forms); Magic UI adds the animated pieces on top — marquees, bento grids, globes, beams, text effects — and follows the same install conventions, so a component drops into a shadcn project unchanged. The library calls itself the perfect companion for shadcn/ui, not a replacement.
Magic UI vs Aceternity UI — what is the difference?
They overlap: both are copy-paste animated component collections for React and Tailwind. This library is MIT licensed with 150+ components, an official MCP server and CLI, and a one-time Pro tier; Aceternity UI has its own component set and Pro templates. Many teams use components from both — pick per component, and check the license of whatever you paste.
Frameworks
Does Magic UI work with Vue, Svelte, Angular or React Native?
Officially the library is React only (React 18/19 with Next.js, Vite, Remix or Astro islands). For Vue there are community ports such as Inspira UI and Spark UI that re-implement many components; they are separate projects with their own maintainers. Svelte, Angular and React Native have no official version — the Motion primitives can be rebuilt by hand. Details in the guide on using it outside React.
Which Tailwind CSS and Next.js versions are supported?
Current components target Tailwind CSS v4 and React 19 with Next.js 15 (App Router); Tailwind v3 projects still work for most components. Motion (formerly Framer Motion) is the animation dependency and is installed automatically.
Is there a Magic UI Figma kit?
There is no official Figma file — it is a code-first library, and each component's docs page is the source of truth for how it looks and behaves. Designers usually prototype with the live docs previews and hand developers the component names.
Can I use Magic UI with v0, Lovable, Replit or Cursor?
Yes. The official Pro FAQ says projects import into v0.dev, Lovable and Replit through GitHub or file upload. In AI editors, the official MCP server (@magicuidesign/mcp 2.0.0) exposes the real component registry: the CLI writes its config for Cursor, Windsurf, Claude Desktop, Cline and Roo Cline, and Claude Code or VS Code take the same five-line JSON by hand.
Does Magic UI support dark mode and WordPress?
Dark mode: yes — components use Tailwind and shadcn CSS variables, so they follow your theme. WordPress: no — the library needs a React build; it does not ship as a plugin or plain HTML/CSS.
Pricing & license
Is Magic UI Pro a subscription, and how much is it?
No subscription: Pro is $199 one-time for lifetime access and updates to all Pro sections and templates. A single template is $49; a Team license is listed at $499 on the official affiliate page but has no separate checkout today. Full breakdown on the pricing page.
Can I use Magic UI in commercial and client projects?
Personal and commercial use is allowed; reselling, redistributing or sharing the code is not. The free library is MIT, so commercial use is unrestricted; Pro components are licensed per the official License Agreement — unlimited projects, no reselling, no redistributing the code.
Do you offer refunds on Magic UI Pro?
Magic UI Pro purchases are non-refundable: because the products are digital, every sale is final under the official License Agreement. Try the free library first — it is the same component quality — and buy Pro when a template or the section kit is worth the time it saves.
Is there a Magic UI Pro discount or promo code?
There are no public coupon codes. If a partner code exists it appears on the pricing page with its real expiry date; otherwise the price is the flat one-time payment.
Naming
Is this the same Magic UI as HONOR's phone software?
No. HONOR's Magic UI (now MagicOS) is a smartphone operating system; this site is about the React component library at magicui.design, which is unrelated to HONOR or Android.
Is 'Magic MCP' the Magic UI MCP server?
No — Magic MCP is a different product from 21st.dev. The official server is the @magicuidesign/mcp package documented at magicui.design/docs/mcp; the setup guide on this site covers Cursor, Claude Code, Windsurf and VS Code.
Still deciding? Start with the free library.
Follow the install guide, browse the component overview, and pick up Pro only when a template earns its keep.
magicui.net earns a commission if you buy through this link — at no extra cost to you.