Magic UI help center

How to use the library, in task-shaped guides: the fastest path from an empty Next.js 15 project to a first animated section, wiring the @magicuidesign/mcp MCP server into your AI editor (Cursor, Windsurf, Claude Code, VS Code…), finding and using your Magic UI Pro registry token (the thing people search for as the "API key"), and what to do when your stack is Vue, Svelte, Astro or anything else that is not React. Every guide opens with the short answer, then the numbered steps.

Getting Started with Magic UI in Next.js 15 (10 Minutes)

How to use Magic UI from zero: create a Next.js 15 + Tailwind v4 project, run shadcn init, add text-animate, shimmer-button and marquee, and build a hero.

Start here

Magic UI MCP Server Setup: Cursor, Claude Code, VS Code

Wire the official Magic UI MCP server (@magicuidesign/mcp) into Cursor, Claude Code, Windsurf, Cline or VS Code in two minutes: one CLI command or a JSON block.

AI editors

Magic UI Pro Registry Token (API Key): Setup Guide

After buying Magic UI Pro, copy your registry token, add it to .env.local and components.json, and install sections with npx shadcn add @magicui-pro/hero-1.

Pro

Magic UI for Vue, Svelte, Astro & Other Frameworks

Magic UI is React-only. What to use per framework: community Vue ports (Inspira UI, Spark UI), Astro React islands, Motion primitives for Svelte and Angular.

Frameworks

Which guide should you read first?

New to the library: take the getting-started path — it covers npx shadcn@latest init, the first three components and a working hero section in one pass. If you live in an AI editor, set up the MCP server next: the editor then installs real components from the registry instead of approximating them, and you can ask for a marquee, a bento grid or a text animation in plain language. The Pro registry token guide is only relevant after a Pro purchase; the frameworks guide answers the "does it work with Vue / Svelte / Astro" question honestly (React only, community ports for Vue, real components inside Astro islands).

All guides assume the same baseline: a React 18/19 project with Tailwind CSS (v4 preferred), shadcn/ui initialised, and Node 18+. Nothing here requires Pro — the free library is the full component set, and Pro ($199 one-time) only adds page sections and templates. Prices and license terms live on the pricing page, install routes on the install page, and quick answers in the FAQ.

Need the whole page, not just the component?

Every guide here works with the free library. Magic UI Pro adds 50+ page sections and 9 templates for a one-time $199 — magicui.net earns a commission if you buy through this link.

Get Magic UI Pro — $199 lifetime