Shadcn-ui variation without Tailwind

[bryandandan]

Hello everyone,

I've been exploring the shadcn-ui package and I must say, it's quite promising. However, I have a query regarding its dependency on Tailwind CSS. Is there any plan in the pipeline to release a version of shadcn-ui that doesn't rely on Tailwind? Alternatively, will it remain exclusively Tailwind-centric in its design approach?

From a personal perspective, I find Tailwind CSS a bit restrictive, and I prefer the flexibility of customizing components with regular CSS, akin to the approach taken by Ant Design. Moreover, in organizational settings, heavy reliance on Tailwind can sometimes lead to cluttered codebases, making components harder to comprehend, read, and maintain.

I believe offering an option to utilize regular CSS for customization alongside or instead of Tailwind would greatly enhance the appeal and versatility of shadcn-ui, catering to a broader range of preferences and use cases.

Looking forward to hearing your thoughts on this matter.

[xirclebox]

Yes, please.

[keisanng]

Is there any? I'll make one if there's none.

[jimbrig]

What's the word?

[gaurangrshah]

Might be possible I mean i believe the underlying radix-ui library works with plan css right? If i'm not mistaken should be doable.

[sergio9929]

The Radix documentation gives examples with both CSS and Tailwind.

[qwalker8408]

I have begun a starter template using css modules and next.js.

Its nothing fancy as shadcn has but personally I feel this could work quite well. https://github.com/qwalker8408/shadcn-css

The big limiting factor is documentation wont be publicly available but I want to instead have a page (shadcn) that has all the components, its basically the same as the section of all the preview tabs on shadcn's website for each component, and the developer can just copy and paste that section from the code into a page they're creating.

I appreciate any ones thoughts on this and hopefully some help. I'm finishing up on making sure the page that houses all the components is as smooth as butter. Alot of extra styling is applied apart from the components itself, not to mention animation.

for the love of css :)

[SalahAdDin]

It looks pretty nice. SO, you make it yourself manually, right?

Only miss to make the components SSR first.

[qwalker8408]

I mean shadcn explicitly calls "use client" on each of his components he's created so I'm not sure how SSR ties in, but I do have limited knowledge as to how to render the css from the server. Follow the way next.js handles css modules. https://nextjs.org/docs/app/building-your-application/styling/css-modules

[Gn3po4g]

Or I think it would be nice too if using shadcn/ui with UnoCSS.

[qwalker8408]

I honestly think that unoCSS is a well formed framework of what shadcn/css or even shadcn/ui is already trying to achieve. css modules is very powerful, tied in with "class-variance-authority" plugin makes a very compelling scenario for people out there, like myself, who have a passion for css but make their living through js.