We will be talking about CLI and Registry

Lets talk about pre shadcn era -

• Before shadcn, developers use to install the components as a package from the component libraries (e.g. Material-UI, Ant Design, and Chakra UI ). That means the code lived in node_modules and it would be hard to customize it and it increased the bundle size.
• To solve this we can give the developer entire code of the component which they will paste it into their codebase and they can customize it and no need to worry about the bundle size.
• But isn’t it a pain to copy paste the components? isn’t there a way to automate this and distribute the code to large number of developers?
• That’s where shadcn ecosystem and registry distribution system comes in.

What the hell is this registry?

• Registry is a distribution system for the components which allows you to distribute your custom components, hooks, pages, config, rules and other files to any project.
• So does that mean we can add or import a component from the registry using CLI and running the shadcn package. hum, hum. so does it make the registry similar to npm? ( like we can publish or import packages from npm ). You can say that but they are not exactly same.

NPM

• In the npm ecosystem there is a central warehouse that stores packages and distributes them.
• You publish your package to the npmjs server, and your package is stored there.
• Whenever someone needs your package they will just install it from the CLI, and it will be installed into node_modules.

Registry

• And this is a registry, there is no centralized warehouse where your component codebase is stored, it works in a different way. The registry lies in every codebase which wants to share their component to everyone. Lets understand it in detail below. https://ui.shadcn.com/docs/registry

  

• I will explain this with the flow from how the component is registered to installing and using it.

Publisher -

1. You have build a beautiful UI component which lies in your codebase, now you want to share it to the world so that they can use it in their projects too.
2. You will create a registry.json file in the root folder of your code base
   • What does it contain?
     • The registry.json is the entry point for the registry. It contains the registry's name, homepage, and defines all the items present in the registry.
     • Go through this for more schema understanding about the file https://ui.shadcn.com/docs/registry/registry-json.
3. Add your component to the registry item by following the schema https://ui.shadcn.com/docs/registry/registry-item-json.
4. Run the build script provided by the shadcn CLI.
5. The build script will generate the registry JSON files in public directory of your project. e.g public/r/button.json.