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

TODO

1. CLI that supports Pro Magic UI Components
2. npx magicui login or organizational .env for PRO Magic UI access
3. Update doc for CLI usage

[vercel[bot]]

@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?

https://github.com/magicuidesign/magicui/assets/93584596/134b7eb7-f849-47d4-ba50-c059e04a66e7

[rajatsandeepsen]

If user is logged in

https://github.com/magicuidesign/magicui/assets/93584596/1a3487de-be45-420d-a277-3c49236fadf1

if user is not logged in

[rajatsandeepsen]

How to login & logout in Magic UI CLI

https://github.com/magicuidesign/magicui/assets/93584596/afb5ade3-5123-4d0c-8001-c55c8a98d35e

[dillionverma]

this is incredible