Can you only make a preset with shadcn/create ?

[jkinley]

Presets could be really useful for a company that wants to make a multi-architype design system. So say you have Marketing sites with more whitespace, fancy fonts, and high-ratio typescale. On the otherhand, you have web apps that are more ui dense and smaller ratio typescale.

With presets you could have both options while still sharing the same components and themes. I wonder if anyone else has thought of this. It would be cool to have one custom registry power multiple presets that are easily installed with the shad command line. Does anyone know if it is possible to tap into presets power without using shadcn/create?

[jkinley]

The more I looked into it, this does not really seem possible. I like that shadcn has added shadcn/create but this seems to be going the opposite direction of using it to build your own registry. Now it even comes with node modules installed, so not really what it used to be. I hope moving forward shadcn gets back to making features for devs that are making there own registries.

[SagarFieldElevate]

You can create presets without shadcn/create by manually structuring a custom registry. The key is setting up a registry.json that follows shadcn's registry schema, then pointing the CLI to your custom registry URL.

Here's the approach:

1. Create a JSON file following the registry schema format
2. Host it anywhere (even a GitHub raw URL works)
3. Use npx shadcn@latest add --registry https://your-url/registry.json

For multiple presets (marketing vs. dense app UI), you'd create separate style CSS files in your registry, each mapping the cn-* classes to different Tailwind utilities. Then consumers pick which preset/style to use during init.

It's more manual setup than shadcn/create, but it gives you full control over hosting your own registry with multiple presets from a single source.

[jkinley]

This makes some sense to me. However previously I thought the styles (Vega, Nova, Luma) were applied to the base components using @apply. This was cool bc you can have the same components but with spacing and radius variations, etc. From what I can tell now, since v4 the styles are not being applied via @apply.

What I have been able to do is use registry:base to make the installable design system. This is so cool.

{
  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
  "name": "custom-base",
  "type": "registry:base",
  "config": {
    "style": "custom-base",
    "iconLibrary": "lucide",
    "tailwind": {
      "baseColor": "neutral"
    }
  },

However the command to install this is actually:

npx shadcn@latest init http://your-domain/r/your-registry.json

As far as I can tell this is not documented. But it works. I will keep experimenting and giving feedback here. Thanks for the input!