As you keep building projects, you discover surprising challenges you didn't even know existed. Have you ever tried changing the style of a shadcn project from base UI to radix UI or vice versa?, it was an issue an encountered a while ago, and it can be a bit challenging to do as it isn't straight forward.
For a bit of context, I was building a project with other developers for a client, my work was to build like a sub-section of the website that still belongs to the main website. So I created a brand new React project, and set up shadcn to start building the website with pre-built UI components. Now one mistake I made was not considering the reusable components that were already created from the main project like the <Header /> and <Footer />, and so, I re-invented the wheel, creating those components again. This didn't look like an issue initially until a review was done, and the team noticed that the UI for the app I was building didn't match the UI of the main website.
After doing some checks in my project, I found out the issue was the type of style I was using when I installed shadcn. When you install shadcn, you would be asked to select the style you want to use (either base UI or radix UI). At first, I didn't think this really mattered, and honestly, it doesn't, but when you are working with other devs, it can be important to ensure your style matches what is being used. It can also matter if you want to get detailed about what it is you're trying to achieve, as different styles provide different ways of customizing your components from shadcn.
The main website uses the radix UI style, but my project was using base UI, and I had already built the entire UI using base UI, so I had to change it to radix UI. In other to change the style, here are the steps I took:
Step 1: Updating the 'style' property in my components.json file
/*
Each style in shadcn has variants (e,g vega, nova, maia etc)
You can discover the full list of variants each
style has from this page on shadcn's website — https://ui.shadcn.com/create
In my own case, the style was "base-nova", so I changed it to "radix-nova"
*/
{
"style": "radix-nova"
}
Step 2: Reinstalled my components to ensure they match the new style
After changing the style, I re-installed all the components I had installed previously in the components/ folder using this command:
pnpm dlx add shadcn@latest component-name // e.g. pnpm dlx add shadcn@latest button
Step 3: Updated my package.json file to reflect the style I am using
I removed the base UI package, and replaced it with radix UI so as to ensure the components display properly. If you are changing from radix UI to base UI, the process is still the same
{
...
"dependencies": {
"@base-ui/react": "^1.7.0", // Removed this
"radix-ui": "^1.4.3", // Added this
},
}
Step 4: Update the node_modules folder
Once I edited the package.json file, I ran pnpm run update to update my node_modules folder, to install the radix UI package and remove base UI.
Conclusion
With these steps, I was able to successfully change from base UI to radix UI, and if you follow the exact step, you can do the same as well. That was kind of simple right?, it isn't that hard once you know what to do, surprisingly, even the shadcn docs doesn't provide a tutorial on how to do this. Have you ever encountered this kind of issue of having to change the style of your shadcn project before?
Top comments (1)
The expensive part seems to be finding the style mismatch after the UI is already built. A quick preflight could compare the parent app’s
components.jsonstyle and UI dependency before scaffolding, then render one shared component before installing the rest. Did reinstalling the components preserve any local overrides?