Introducing Magic UI Pro - 50+ blocks and templates to build beautiful landing pages in minutes.



A CLI for adding magic ui components to your project. Superset of shadcn-ui.


Use the init command to initialize dependencies for a new project.

The init command installs dependencies (framer-motion), adds the cn util, configures tailwind.config.js, and CSS variables for the project.

npx magicui-cli init

shadcn-ui project

If your project is already using the shadcn-ui, don't worry! You can still use magicui.

npx shadcn-ui init

Just add these two lines to your components.json file:

  "$schema": "",
  "style": "default",
  "rsc": true,
  "tsx": true,
  "tailwind": {
    "config": "tailwind.config.js",
    "css": "app/globals.css",
    "baseColor": "slate",
    "cssVariables": true
  "aliases": {
    "components": "@/components",
    "utils": "@/lib/utils",
+   "ui": "@/components/ui",
+   "magicui": "@/components/magicui"


Use the add command to add components to your project.

The add command adds a component to your project and installs all required dependencies.

npx magicui-cli add [component]


npx magicui-cli add bento-grid

You can also use the optional --all flag to install all components:

npx magicui-cli add --all

You can also use the --exmaple flag to select and install example & demo you saw on webside:

npx magicui-cli add --example

You can also run the command without any arguments to view a list of all available components:

npx magicui-cli add


You can also use the same CLI for selecting & installing shadcn-ui components:

npx magicui-cli add --shadcn button
npx magicui-cli add --shadcn --all