Is there any way to use the "bases" components already?

[rovo89]

I'm referring to e.g. this one: https://github.com/shadcn-ui/ui/blob/main/apps/v4/registry/bases/radix/ui/button.tsx

I love the use of classes there (e.g. cn-button and cn-button-variant-default), which seems to be a lot easier to style than [data-slot="button"][data-variant="default"] without modifying the code (which would make upgrades a lot harder).

This seems to be an upcoming version, and I realize that it's probably still experimental (though seemingly used in https://ui.shadcn.com/create). But for a new project, I'd rather go this way and live with some bugs than invest time in styling the current components (https://ui.shadcn.com/r/styles/radix-vega/button.json).

[rovo89]

Tried to build shadcn myself and noticed along the way that I misunderstood the concept of the cn-* classes. They're replaced with style-specific classes (e.g. from https://github.com/shadcn-ui/ui/blob/main/apps/v4/registry/styles/style-nova.css) in https://github.com/shadcn-ui/ui/blob/main/packages/shadcn/src/styles/transform-style-map.ts.

Too bad. I mean, I get it now, but wouldn't it be nice to build a "raw" style without these transformations and include the style CSS with the defaults in Tailwind? Like already done in https://github.com/shadcn-ui/ui/blob/main/apps/v4/styles/globals.css for the website itself. Exactly that example shows a benefit of CSS-in-CSS, rather then embedded: It's easier to switch between different styles without duplicating components. And as originally mentioned, I think it would be easier for styling beyond the CSS variables, e.g. different padding.