Open registry for components, styles and themes

[AnishDe12020]

Shadcn UI is amazing, the approach to modular components and direct customisation makes it easy to work with but this can only work when you make a shared package in a monorepo or for single projects (unless we fork shadcn/ui and make the changes with a new cli and everything)

From what I found in the CLI's source code, the CLI supports custom registries but there is no friendly way to set one (gotta set an environment variable here). Further, there is no easy way to create a registry or add components for a registry. Many people would just want to publish one off components like a custom calendar component and making it easy to publish these would be a good first step.

Personally, I would like to make a custom theme over new york with some minor changes to the components and maybe some more custom components which I can use for other projects and others can use as well by specifying the theme name in components.json. For example, if I call it chad-ui, components.json can look like -

{
    style: "chad-ui",
    registries: ["shadcn-default", "chad-ui"],
}

The default components can be from shadcn default but say I want to use chad-ui-button I can do bunx shadcn-ui add chad-ui-button or maybe bunx shadcn-ui add @chad-ui/button

The exact approach is debatable but we can discuss

Btw, open to contribute and build this system out

[shadcn]

@AnishDe12020 Thanks for the ping on this. This is on the roadmap. I started laying out the base for multi-registry support but hadn't had time to get to it yet.

The next step here would be to work on a shared schema for registry for interoperability. Once we have this in place, we'll have a better idea for moving forward.

(Converting this to a discussion...)

[AnishDe12020]

Gotcha, do you have an idea for the schema for the registry? I am putting in a rough one from my side -

{
    "publisher": "chad-ui",
    "version": "6.9.420",
    "components": [
        {
            "name": "chad-button",
            "file": "./src/components/ui/chad-button.tsx",
            "dependentComponents": ["chad-text"]
        }
    ],
    "themes": [
        {
             "name": "chad-blue",
             "file": "./src/themes/chad-blue.json" // json file will contain the theme tokens
         },
    ]       
} 

This schema assumes a single repository will house the whole design system but with the ability to have multiple components and themes as a part of it.

I am not sure about the best approach to this but there needs to be some guidelines for how the themes and components should be interoperable, like the primary, background, secondary colors, etc must be used in a similar fashion for all components so that components and themes can be mixed and matched.

[0xdevalias]

See also:

• Expose registry schemas for external registry builders #4906