Arc vs Magic UI: which should you use?
Magic UI is a free, open source set of animated React components and effects for marketing pages. Arc is a React library of components and complete blocks for product interfaces, built so coding agents can find and use them correctly.
On this page
The short version
Both are shadcn-style libraries: you add a component with the shadcn CLI and the source lands in your project. Both use Motion for animation, and both publish an MCP server and an llms.txt file. The difference is mostly what each one is for.
Magic UI is built around effects for landing pages, such as marquees, animated text and backgrounds, with a Pro tier of page sections and templates. Arc is built around product interfaces: inputs, pickers, tables, charts, dialogs, and blocks like a settings page or a metrics dashboard, plus a set of text and motion effects.
We make Arc, so read this with that in mind. Every fact about Magic UI below comes from their own site, docs, npm package or repository, and we say where the other library is the better pick.
Fact table
| Topic | Arc | Magic UI |
|---|---|---|
| What it is | React components and blocks for product interfaces, built to work with AI coding agents | Animated components and effects for marketing pages |
| Stack | React, TypeScript, CSS Modules with CSS variables, Motion. Tailwind is optional. | React, TypeScript, Tailwind CSS, Motion |
| Size | 161 components and 91 blocks (110 components and 22 blocks are free) | 150+ free components and effects. Pro adds 50+ sections and 9 templates. |
| License | MIT for free items. Arc Pro license for Pro items: unlimited projects, no reselling the source as a kit. | MIT for the free components. Pro has its own license that allows commercial use but not reselling. |
| Free and paid | Free components and a starter set of blocks. Pro is $199 once, or $129 a year. Team is $599 once for up to 10 people. | Free core. Pro is a one-time lifetime license; see their pricing page for the current price. |
| Install | npx shadcn@latest add @uiarc/button | npx shadcn@latest add @magicui/globe |
| Motion | Motion with shared spring presets. Components include a reduced motion branch. | Motion |
| MCP and AI support | Remote MCP server (sign in with a free account), llms.txt and llms-full.txt, markdown for every component, an agent skill. | Official MCP server, set up with the @magicuidesign/cli installer for Cursor, Windsurf, Claude, Cline and Roo-Cline, and llms.txt. |
| Best for | Product UI such as dashboards, settings, forms, tables and onboarding, with motion built in | Landing page effects such as marquees, animated text, globes and backgrounds |
Last verified October 13, 2026. Arc facts are read from Arc itself. For Magic UI, see magicui.design for anything that has changed, especially prices.
Where they differ
What each one is for
If the job is making a hero section feel alive, Magic UI is built for it. If the job is building a billing settings page or an admin table, Arc is built for it. There is overlap in text effects and backgrounds, so check both catalogs for the specific piece you need.
Styling
Magic UI components are written with Tailwind CSS, so your project needs Tailwind. Arc components use CSS Modules and CSS variables, so they install next to Tailwind or without it. Arc's tokens handle light and dark themes and accent colors in one place.
License and pricing
Magic UI's free components are MIT licensed. Magic UI Pro is a one-time lifetime license for sections and templates that allows commercial use but not reselling the code. Arc's free items are MIT licensed too, with 110 components and 22 blocks free. Arc Pro is $199 once or $129 a year, and the team plan is $599 once for up to 10 people. Check Magic UI's pricing page for its current price.
MCP and AI support
Both have an MCP server. Magic UI's gives your editor access to its components, so you can ask for something like a blur fade text animation. Arc's MCP tools return when to use a component and when not to, its props, keyboard behavior, accessibility and motion notes, and the install command, and an agent skill adds Arc's design rules. Arc's server asks you to sign in with a free Arc account the first time you connect.
Community and maturity
Magic UI is the more established project, with about 22.6k stars on GitHub when we checked. Arc is newer and smaller, so expect fewer third-party examples and tutorials.
Which to choose
Choose Magic UI if
- You are building a landing page or marketing site and want animated effects you can drop in.
- Your project already uses Tailwind CSS and you want components written in it.
- You want a large free set under the MIT license and a bigger community around it.
- You want ready-made page sections and templates for marketing sites, which Magic UI Pro provides.
Choose Arc if
- You are building product screens: dashboards, settings, forms, tables and onboarding.
- You do not want Tailwind as a dependency, or you want components that work with or without it.
- You want your coding agent to read usage guidance before it installs, not only a list of components.
- You want light and dark themes and a reduced motion branch in every animated component.
Using both
You do not have to choose. Both install through the shadcn CLI, so a project can use Magic UI for the marketing pages and Arc for the app. Arc needs one registry entry in components.json and the foundation stylesheet imported once.
Install
Both install with the shadcn CLI. Register Arc once in components.json, then install by name.
{ "registries": { "@uiarc": "https://uiarc.dev/r/{name}.json" }}# Arcnpx shadcn@latest add @uiarc/button # Magic UInpx shadcn@latest add @magicui/globeFrequently asked questions
Is Arc a Magic UI alternative?
For some jobs, yes. Magic UI focuses on effects for marketing pages, while Arc focuses on components and blocks for product interfaces, and the two overlap on text effects and backgrounds. If you need a particular Magic UI effect, use Magic UI. If you need app screens, Arc is the closer fit.
Can I use Magic UI and Arc in the same project?
Yes. Both install with the shadcn CLI. Magic UI components are written with Tailwind CSS, so that part of the project needs Tailwind. Arc components do not depend on it. Check light and dark themes after mixing, since each library has its own tokens.
Is Magic UI free?
The core components are free and MIT licensed. Magic UI Pro, with page sections and templates, is a paid one-time purchase. Prices change, so check their site.
Does Magic UI have an MCP server?
Yes. Magic UI documents an official MCP server that you install with its CLI for Cursor, Windsurf, Claude, Cline and Roo-Cline. Arc's server is at https://uiarc.dev/api/mcp and works with Claude Code, Cursor, VS Code and Codex.
Which has more components?
Magic UI lists 150+ free components and effects. Arc has 161 components and 91 blocks, of which 110 components and 22 blocks are free. The counts measure different things, since Arc counts blocks separately, so they are not a like-for-like score.