Use without preset style?

[DexterHill0]

I want to use shadcn because it will provide me with a lot of the ground work in terms of wrapping all radix primitives, giving them the right slots, prop types, general layout styles, and so on. However, the preset styles, and even custom tailwind theme variables, do not provide me with enough customisation for my use case as I need to follow fairly strict design rules.
Reading the shadcn source, I can clearly see the radix primitives are mostly just given class names like cn-* and the preset styles are simply css files that define tailwind classes for all those class names (such as registry/styles/style-lyra.css).

Is there any way for me to write my own one of these css files? I can't seem to find a way, in the CLI, to generate components with the raw cn-* class names, so I'm assuming not, but it would be extremely nice if I could.

[SagarFieldElevate]

Yes, you can use shadcn components without the preset styles. The approach is:

1. Add components normally via npx shadcn@latest add button (or whatever component you need)
2. Skip the preset style during init or remove the imported style CSS file from your project
3. Write your own CSS targeting the cn-* class names that the components use

The components output markup with class names like cn-button, cn-card, etc. The preset style files (e.g., registry/styles/style-lyra.css) are just Tailwind utility mappings for those class names. You can create your own CSS file that maps those same cn-* classes to whatever Tailwind utilities or custom CSS you want.

For example, create your own my-style.css:

.cn-button {
  @apply your-custom-classes-here;
}

Alternatively, if you want even more control, you can eject/copy the component source files (they live in your project after add) and modify the class names directly. Since shadcn copies the source into your project, you own the code and can customize everything.

[jkinley]

This partly makes sense, but it also is a bit confusing. I'd like to create custom presets too. I mean why should we be limited to Lyria, Nova, etc?

The issue is that components.json in consumer projects seems only to accept enums for the pre-defined styles. It would be really great if the docs on this could be more clear. Some of us who have built custom registries are struggling a bit on figuring out how to align our work with the recent shadcn changes.

[jkinley]

Also, where do the @apply styles live in a project?

.style-luma {
  /* MARK: Slider */
  .cn-slider {
    @apply data-vertical:min-h-40;
  }

If we are still using @ apply to adjust styles (that does not seem to be the case), then why do the components get overridden when you use init or apply? The new @import "shadcn/tailwind.css" lives in node_modules and this does not have the @apply styles. This is really confusing and its been tough to get some clarity on these issues.

[DexterHill0]

Sorry, been busy at work and my attention was diverted elsewhere. I could've been missing something but I couldn't see a way to skip the preset style selection in the CLI. It either expects me to pick one of the builtin styles or choose Custom, which then expects one of the custom styles IDs from the playground, but I wasn't able to find a way to bypass that entirely.

[jkinley]

@DexterHill0 Have you made any progress on your project? I too am dealing with similar issues. Months ago, before presets and the new CLI came along, I made a custom registry. Now I am trying to figure out how to update my registry to be compatible with how the updated shadcn works.

[DexterHill0]

Unfortunately not, I didn't get any time after posting this to dig into it more. Unless it's possible to bypass a preset style selection in the CLI I was just going to copy-paste the base source into my library and skip the CLI to be honest.

[jkinley]

I think you can still use the CLI, just not for managing presets. I am doing lots of test at the moment. I think that the default components that you copy and paste from the website manual installation are the nova styles. So 'radix-nova' and 'base-nova'. The way I tested this was to copy the component code manually into a project say with the button. Then I ran the CLI and tried base-nova, there was no diff with the button code. But when I tried with the other styles the component changed. So I THINK nova is the default style.

[lokeshwardewangan]

yeah I tried doing something similar once 😅

short answer: nope, there’s no built-in way to do that with the CLI right now.

it always spits out components with all the Tailwind classes baked in. there’s no flag or option to get like “bare” components with just cn-* hooks or whatever.

what I ended up doing was basically:

• generate the component
• delete like 70% of the classes 😂
• keep the radix structure + logic
• then rebuild styles my own way

a bit painful at first, but after a couple components it’s not that bad tbh.

also yeah, those cn-* style presets you saw (like lyra etc) are kinda internal / registry stuff, not something the CLI exposes for custom use (at least for now).

would be pretty cool if they allowed custom style presets though, feels like a missing piece tbh.