Enhancement: Magic UI CLI, Superset of shadcn-ui

[rajatsandeepsen]

magicui-cli

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

Enhancement: #49 ✅

Usage

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 and install framer-motion

npm install framer-motion

{
  "$schema": "https://ui.shadcn.com/schema.json",
  "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"
  }
}

add

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]

Example

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

shadcn-ui

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

Magic UI Premium Components

If user has the "env", just login the CLI and enjoy the premium components

npx magicui-cli auth --login <secret-env>

Use --pro tag to list premium components from pro webside

npx magicui-cli add --pro 

CLI also supports the premium project templates. It will download the private repo as zip file

npx magicui-cli project

TODO

1. Update CLI docs
2. Solve org support with team ENV

[vercel]

@rajatsandeepsen is attempting to deploy a commit to the product-studio Team on Vercel.

A member of the Team first needs to authorize it.

[itsarghyadas]

Do you have any video recordings of how it works in a real codebase?

[rajatsandeepsen]

Do you have any video recordings of how it works in a real codebase?

magicui-pro.mp4

[rajatsandeepsen]

If user is logged in

magicui-pro.2.mp4

if user is not logged in

[rajatsandeepsen]

How to login & logout in Magic UI CLI

magicui-login.mp4

[dillionverma]

this is incredible