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.

[eliyamelamed1]

shadcn with css modules is a must !

[qwalker8408]

its not perfect in any way, however its a good start and most of the components are there except for the new graphs component. this can also be used in a normal react project with vite

https://github.com/qwalker8408/shadcn-css

[SalahAdDin]

@qwalker8408 how is it going on?

[qwalker8408]

@qwalker8408 how is it going on?

still outstanding, keen to help ? Push a PR please. I'm also going to try create a home page for the components some time soon :)

[prince-hope1975]

This is amazing
IS there a way to use it the same way we use shadcn by just using a command.
Is It something that can be worked on, or in the talks

[qwalker8408]

This is amazing IS there a way to use it the same way we use shadcn by just using a command. Is It something that can be worked on, or in the talks

For me, priority is to fix the snags that are still present and iron them out, update with the graph component and then to work on a landing page for the repo with examples loaded onto vercel. I'm also porting these components as a library to react-native and using styled components as its basis. I'm not sure how the CLI will work Prince, its not really my cup of tea.

[halfong]

Second you! Shadcn's components are cool.
But I just using my tiny stylesheets and do not want to make it complex with TailwindCSS.
Looking forward for a headless ( or with straightforward styles) version!

[michaelparkadze]

Am willing to contribute to start this going!

[smithgeek]

I was just playing around with a way to abstract out all the styling information and came up with a proposal that would also allow defining a style that could use css modules instead of tailwind. Might be crazy, but it's in this discussion if you want to take a look.
#5767

[dclstn]

Tailwind is the only thing stopping me from using shadcn, would love to see this happen.

[FrSenpai]

Same here !

[freesh]

Same. I prever not to use hype frameworks like tailwind. In a couple of years it's outdated and will be a mess to update and maintain it.
Plain css modules are always usable and easy to maintain.

[SalahAdDin]

Same. I prever not to use hype frameworks like tailwind. In a couple of years it's outdated and will be a mess to update and maintain it. Plain css modules are always usable and easy to maintain.

but not that performative.