Import component libary

[dat-nguyenquoc-tpv-clv]

Currently, we're adding external component like this:

pnpx shadcn@latest add https://originui.com/r/comp-530.json

I suggest we could add a feature that we can simplify usage of external feature:

Let say we have https://originui.com/r/.shadcn.json

{
  "name": "originui",
  "runtime": "react", // 'vue', 'solid', 'qwik'
  "components": {
    // ...
  }
}

Import library

The case of unique component names:

pnpx shadcn@latest import https://originui.com/r # only one time, this contain a `.shadcn.json` which define all the component in the library
pnpx shadcn@latest add comp-530 # use every time
pnpx shadcn@latest add comp-531

In case of component with same name:

Adding library originui

pnpx shadcn@latest import https://originui.com/r --name originui

# then we can add
pnpx shadcn@latest add button --lib originui

Using prefix:

pnpx shadcn@latest import https://originui.com/r --prefix "o"

# then we can add using prefix "o:"
pnpx pnpx shadcn@latest add o:button

Using prefer:

pnpx shadcn@latest import https://originui.com/r --prefer

# install button from originui, because it is prefered
pnpx shadcn@latest add button

# install button from default shadcn/ui (default name "shadcn"
pnpx shadcn@latest add button --lib shadcn

Remove

pnpx shadcn@latest remove https://originui.com/r

# install button from shadcn, because it become --prefer after previous prefered removed.
pnpx shadcn@latest add button

Set prefer

pnpx shadcn@latest set originui --prefer

# to set --prefer to shadcn
pnpx shadcn@latest unset originui --prefer
# or
pnpx shadcn@latest unset --prefer

Check config

pnpx shadcn@latest config
pnpx shadcn@latest config --prefer
# or
pnpx shadcn@latest config --name originui

# Print:
name: originui
url: https://originui.com/r
prefix: "o" # or (not set)
prefer: yes

Check component

pnpx shadcn@latest config button

# Print config of button component:
name: originui
url: https://originui.com/r
prefix: "o" # or (not set)
prefer: yes

Set prefer for one component

pnpx shadcn@latest config button --prefer originui

With this API, we can extends shadcn to use multiple flavor of UI.

What do you think?