There is nothing to download: to install Magic UI you copy components into your own React project. Three routes get you there — the shadcn registry command, the official CLI, or the Magic UI MCP server inside your AI editor (Cursor, Windsurf, Claude Code, VS Code…) — and all three work with the free library. Requirements: a React 18/19 project, Tailwind CSS v4 (v3 also works), shadcn/ui initialised, and the Motion package, which the installer adds for you.
Every Magic UI component installs this way — one command per component, in any shadcn/ui project.
npx shadcn@latest add @magicui/marqueeCopies marquee.tsx into components/ui/ (the shadcn `ui` alias) and adds the Motion dependency if it is missing. Swap marquee for any component slug from the docs; several items can go in one command. Older guides show the older URL form (add 'https://magicui.design/r/marquee') — it still resolves.
You work in an AI editor and want it to find and install real components for you.
npx @magicuidesign/cli@latest install cursorThe official CLI writes the MCP config for five clients (cursor, windsurf, claude, cline, roo-cline); Claude Code and VS Code take the same five-line JSON by hand. The server (@magicuidesign/mcp 2.0.0) exposes listRegistryItems, searchRegistryItems and getRegistryItem, so "add a marquee of logos" installs the real component. Manual configs in the MCP setup guide.
You want the Magic UI command-line tool for MCP configuration and future commands.
npx @magicuidesign/cli@latest --helpVersion 1.0.3 (published 2025-04-17). It replaces the retired magicui-cli 0.1.6; component installs still go through the shadcn registry command above.
Four steps, about five minutes on a fresh Next.js 15 project.
npx create-next-app@latest my-landing --ts --tailwind --app (Next.js 15) — or a Vite + React + Tailwind CSS v4 project.
npx shadcn@latest init — Magic UI follows shadcn conventions (components/, lib/utils.ts, the cn helper), so this one-time step is required.
npx shadcn@latest add @magicui/bento-grid — the file lands in components/ui/bento-grid.tsx.
import { BentoGrid, BentoCard } from "@/components/ui/bento-grid" and use it like any local component; Motion animations run out of the box.
Longer walkthrough with a full landing-page section: Getting started with Magic UI in Next.js 15.
Package versions on this page: @magicuidesign/mcp 2.0.0 (published 2026-03-09) and @magicuidesign/cli 1.0.3 (published 2025-04-17); they are refreshed against npm when new releases ship.
Pro sections and templates use the same shadcn flow with a private
registry: after purchase you log in to the Pro site with your
checkout email, copy your registry token into .env.local
as MAGICUI_PRO_REGISTRY_TOKEN, register the
@magicui-pro registry in components.json, and run
npx shadcn@latest add @magicui-pro/hero-1. Pro is a one-time
$199 with lifetime updates.
Step-by-step: Magic UI Pro registry token guide.
# .env.local
MAGICUI_PRO_REGISTRY_TOKEN=your_token_here
# components.json → "registries"
"@magicui-pro": {
"url": "https://pro.magicui.design/registry/{name}",
"headers": { "Authorization": "Bearer ${MAGICUI_PRO_REGISTRY_TOKEN}" }
}
npx shadcn@latest add @magicui-pro/hero-1magicui.net earns a commission if you buy through this link — at no extra cost to you.