Skip to main content

Documentation Index

Fetch the complete documentation index at: https://mintlify.com/Max-Samson/magicui/llms.txt

Use this file to discover all available pages before exploring further.

Magic UI has the exact same installation process as shadcn/ui.
Magic UI components are built on top of shadcn/ui and follow the same installation pattern. You’ll use the shadcn CLI to set up your project and add components.
1
Create project
2
Run the init command to create a new Next.js project or to setup an existing one:
3
npx shadcn@latest init
4
This command will:
5
  • Set up your project structure
  • Install required dependencies (React, Tailwind CSS, etc.)
  • Configure your components.json file
  • Add necessary utility files
    • 6
    If you already have a Next.js project, running init will configure it to work with shadcn/ui components.
    7
    Add components
    8
    You can now start adding Magic UI components to your project using the shadcn CLI:
    9
    npx shadcn@latest add @magicui/blur-fade
    10
    Blur Fade
    npx shadcn@latest add @magicui/blur-fade
    Marquee
    npx shadcn@latest add @magicui/marquee
    Globe
    npx shadcn@latest add @magicui/globe
    Particles
    npx shadcn@latest add @magicui/particles
    11
    The CLI will:
    12
  • Download the component source code
  • Place it in your components/ui directory
  • Install any required dependencies
  • Update your import paths automatically
    • 13
    Import component
    14
    The command above will add the component to your project. You can then import it like this:
    15
    import { BlurFade } from "@/components/ui/blur-fade"

export default function Home() {
  return (
    <BlurFade delay={0.25} inView>
      <h1>Welcome to Magic UI</h1>
      <p>Beautiful animated components for your landing pages.</p>
    </BlurFade>
  )
}

    ​
    Manual installation

    If you prefer to install components manually:
    1
    Copy component source
    2
    Navigate to the component page (e.g., Blur Fade) and copy the source code from the “Manual” tab.
    3
    Add to your project
    4
    Paste the component code into your project at components/ui/[component-name].tsx.
    5
    Update import paths
    6
    Make sure the import paths match your project setup. Update any relative imports to match your directory structure.
    7
    Install dependencies
    8
    Most Magic UI components require Framer Motion. Install it if you haven’t already:
    9
    npm install framer-motion

    ​
    Project structure

    After installation, your project structure should look like this: 
    my-app/
├── app/
│   ├── layout.tsx
│   └── page.tsx
├── components/
│   └── ui/
│       ├── blur-fade.tsx
│       ├── marquee.tsx
│       └── globe.tsx
├── lib/
│   └── utils.ts
├── components.json
├── package.json
└── tailwind.config.ts

    ​
    Next steps

    Browse components

    Explore 50+ animated components ready to use in your project

    MCP Integration

    Set up the MCP server for AI-assisted development

    Build docs developers (and LLMs) love

    Get started for freeTalk to us