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

[rocascent]

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.

[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.

[eliyamelamed1]

the majority of devs are already used to CSS, Less, or SCSS, so it’s super easy to maintain and get new folks on board

[loktar00]

Same here :( would love to use it but don't want to include tailwind.

[federicopiaggio]

Same here

[dderose]

Agreed. Tailwind is particularly egregious garbage that should cease to exist as soon as possible. It's basically just fancy BEM without the benefit of being in-house code, and we moved on from that nearly a decade ago because there are better solutions.

[eliyamelamed1]

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.

Ten months have already passed does anyone know if this is going to be scheduled or at least considered?

[Emil-babayan]

Tailwind is pure cancer. Incurable. So, yes, please, let this be.

[huboh]

I love shadcn and still haven't tried it yet because i f...in hate tailwind. i prefer to write my styles in plain css or scss modules

[Christophvh]

Shadcn in essence is Radix-UI + tailwind. So just use Radix-UI if you don't want tailwind.

[ilarramendi]

No, the propossed idea is subsituting tailwind with plain css, not just removing it.

[ilarramendi]

+1 to this, i can help if anyone is interested in starting this project

[juanpablob]

It seems this has not been picked up anyone? :(

[SalahAdDin]

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

You have this, but it seems to be frozen.

[ghost]

I recently started an Electron application. I loved Shadcn's approach to customizing my components. As soon as I went to install it, I saw that Tailwind was mandatory. I've never liked these frameworks for many reasons that I won't name. But I still decided to give it a try. I went to the Tailwind documentation and started following the installation instructions. On the second line I already had problems. I found that Tailwind and StyleLint are not supported. If you want linter you have to install a Prettier plugin. I also use Esbuild directly in my project for reasons that are too long to explain, but there is no documentation or plugins to work with ESbuild. I also kept looking and saw that in the recently released version 4 they changed a lot of things. When I install Tailwind it no longer creates a configuration file for me. It may be my mistake, but I don't believe it, and the init command no longer works. In the end I don't know if I should configure postcss or not... I could go on telling you about my experience. 90% of the documentation and posts on stackoverflow no longer apply to the new version of Tailwind. Apparently, Tailwind is easy to install when it's for a framework, but as soon as you get out of that, it becomes quite tedious. I'll just say that I didn't know Tailwind, and right now I hate it with all my heart. I'll try to use radix components with pure css to see if I don't have too much difficulty.

[plettj]

The dependency on Tailwind is the only thing stopping my office from switching to shadcn/ui right now; besides Tailwind, it looks perfect.

It's been a year of this discussion remaining popular, I would love a word from @shadcn on whether a regular-CSS version is in the roadmap.

[ilarramendi]

For the moment I just copy the code of the component and pass it to Claude, and ask it to transform it to css modules and tell me all css variables used, it normally does the trick and works as expected, I'm thinking about doing this for all components and deploying them as a public shadcn Registry but I didn't have the time yet.

[paulm17]

shadcn-ui that doesn't rely on Tailwind

Yeah. It's called mantine: https://mantine.dev/

You all should give it a look. More components, hooks and other features.

A like for like between Mantine and ShadCN is not even comparable. It's night and day.

[ilarramendi]

Totally different approach, shadcn/ui prioritizes full ownership of code (copy and paste approach) while Mantine uses a more traditional component library model (import from package).

[mr-scrpt]

Will there be any comments from the developers? Tailwind is a very controversial thing and to nail your beautiful library to a very controversial library is very frustrating @shadcn

[Phebonacci]

I'm about to start a project that requires shadcn/ui, and I'm absolutely worried because of TailwindCSS. I don't like the clutter that is TailwindCSS. Any plans to support other styling engines @shadcn ?

[robbiecren07]

I'm currently working on a side project, it's a converter tool with a CLI which will convert the tailwind to css modules.

[bryandandan]

@qwalker8408 started a project a while back. Worth a check. How's the progress on yours @robbiecren07 ?

[robbiecren07]

I'll have to take a look at this project.

For mine, I'd say the progress is pretty good. It's built out into 2 separate packages a Converter and CLI. The converter would mainly be managed by maintainers. I only need to solve for 6 more components (the big complex ones like calendar, chart, etc). The CLI has a few more things to add/tweak, it will work the same way as shadcn's cli, with an init and add command. So i'd say in a week or two ill be wrapping it up and doing testing on all the install scenarios and test all the components making sure the styles match, etc. The last peace would be to probably make a simple web app with instructions, easily get cli commands for components and reference shadcn where needed.

After initial release, I will work on solving tailwind vars. Currently the module css still uses the tailwind vars. Then ill probably add the ability to select css or scss and provide the module scss with simple nested classes.

[ilarramendi]

Given that we have a relatively small number of components dosnt it make more sense to just let claude transform the shadcn tailwind code to semantically correct classnames + css or css modules one time than making a whole CLI? or do you plan to use this for custom registries too?

[robbiecren07]

Well there is probably lots of ways to go about this. For me personally I didnt want to use AI as I wanted to make this a learning experience for myself but at the same time solve a problem for devs that want to use Shadcn but cant/dont want to use Tailwind. Everything im building is going to be open source and the converter will have done all the heavy lifting. The user will only need to use the CLI to install the components, just like they do with shadcn. So like npx shad-css init and then npx shad-css add button and it will handle everything, it will work the same as shadcn/ui's CLI.

I was first planning to just do a PR into the shadcn/ui repo but I didn't really want to spend the time building it out to work with their code and then have the PR sit and never get released. So figured if I build this and it gets traction, then approach shadcn with a way to integrate it into their codebase/cli.

[airtonix]

The effort isn't worth the maintenance cost tbh.

I think you're underestimating the time-saving, consistency that tailwind brings to the table.

Questions you need to answer in any shadcn owned solution will be:

• Tailwind opposition: why? is this just ideological or is fact driven.
• Tailwind brings economy of scale to managing approaches to common css problems:
  • How are you going to provide equivalents to this economy of scale so that writing shadcn components can remain as tailwind class names?
  • How will your proposal address how tailwind 4 manages breakpoints, container queries, groups, etc?

I can't imagine @shadcn wants to be maintaining n+1 flavours of the month.

[mujaji]

If you already have an established style layer that isn't using Tailwind, to your point, the effort isn't worth the maintenance cost. I think that's what everyone on this thread is saying

[brianguertin]

I can't imagine @shadcn wants to be maintaining n+1 flavours of the month.

CSS, literally the standard way of styling the web, is the exact opposite of "flavours of the month".

[equinusocio]

These guys are talking about Tailwind as if it’s not written in plain CSS. Whatever tailwind does, CSS can does it better, but with control and without abstractions made by a single developer.

[BadreddineIbril]

Anyway, https://shadcn-css.com

[smirk-dev]

This is a genuinely nuanced question, and I think it has gotten more interesting with Tailwind v4's release because the architecture changed in a way that actually brings shadcn closer to being CSS-native than it has ever been.

With Tailwind v4, all theme tokens are CSS custom properties. There is no longer a tailwind.config.js file defining your design tokens. Everything lives in CSS now: --color-primary, --radius, --color-border, etc., all defined in your globals.css under @theme. What this means in practice is that the styling contract between shadcn components and your project is now expressed almost entirely in CSS variables. Tailwind's utility classes are really just thin aliases over those variables at this point.

So the honest answer to "can I use shadcn without Tailwind" in 2026 is: yes, but you have to do a bit of mechanical work. The components themselves use Tailwind utility class names like bg-primary, text-muted-foreground, rounded-md, etc. If you copy a component and want to use plain CSS or CSS Modules instead, you need to replace those class names with equivalent CSS. The community projects mentioned in this thread like https://shadcn-css.com and the CSS Modules converter by @robbiecren07 are doing exactly this translation.

Here is the most important architectural insight though: because Radix UI primitives (the accessibility layer underneath) are completely CSS-framework-agnostic, there is no fundamental technical barrier. You can absolutely take any shadcn component, strip the Tailwind class names, and write equivalent CSS Modules or vanilla CSS. The component logic and accessibility semantics are in Radix, and the design tokens are in CSS variables. Tailwind is genuinely just the styling shorthand layer.

For teams working in environments where Tailwind is not allowed or not practical (legacy codebases, strict CSS-in-JS teams, strict CSS Modules conventions), the most pragmatic approach today is:

1. Use the component's JSX and Radix-based accessibility structure as-is
2. Replace the className={cn('bg-primary ...')} calls with your own CSS Modules or vanilla class names
3. Map the CSS variables from the shadcn theme to your own design token system

The official shadcn docs do have a "Without CSS Variables" mode that generates components with inline Tailwind color utilities instead of variable references, which is a step in this direction. But a fully CSS-Modules-native generation option would be a valuable contribution to the CLI.

[equinusocio]

You can absolutely take any shadcn component, strip the Tailwind class names, and write equivalent CSS Modules or vanilla CSS

What's the point of using shadcn then? The project is just premade style applied to components made by others. If a team has a CSS developer there is no sense of doing that. Also, radix-ui is not maintained and entered a zombie status since 2025.

So basically the only key value of shadcn is the pre-made style choice, if you don't want it, anyone can just use BaseUI or ReactAria directly — maintained alternatives to Radix — and apply their own CSS.

[elrender]

Hey, just wanted to add my approach to give you some options....I know it is not optimal in many ways but it works for me:

# css module
.some_class {
  @apply
    bg-primary/50 text-black ...
  ;
}

I have here css modules (splits css sent to browser, not single file as in tailwind) and efficiency in DX coming from tailwind.

The only downside for me is that some utility classes need to be in jsx (e.g. group or some from plugins).

In my solution Shadcn is leaking tailwind utility classes from their components in html and I didn't come up with workaround for this.
It would be great to have some flag in Shadcn to generate css modules with @apply when downloading components.