I Built My Entire UI With the Wrong shadcn Style. Here’s How I Fixed It

In the world of software development, unexpected challenges often arise, even when working on seemingly straightforward projects. One such issue that the author experienced was changing the style of a shadcn project from the base UI to the radix UI, or vice versa. This process can be more complex than it initially appears, as there is no straightforward guide available on the shadcn website.

The author was part of a team building a sub-section of a website for a client. They created a new React project and set up shadcn to utilize pre-built UI components. However, they made a mistake by not considering the reusable components already created in the main project, such as the Header and Footer. This oversight led to a mismatch in the UI between the sub-project and the main website.

Upon closer examination, the author discovered that the issue stemmed from the style they had chosen when installing shadcn. When prompted during installation, users are asked to select either the base UI or radix UI style. Initially, the author thought this choice was inconsequential, but they soon realized its importance when working with other developers and striving for consistency across projects.

Since the main website used the radix UI style, while the author's project employed the base UI, they needed to switch the style to radix UI. To accomplish this, the author followed these steps:

1. Update the style property in the components.json file:

- Locate the components.json file in the project.

- Change the style property from "base-nova" to "radix-nova". The full list of available variants can be found on shadcn's website.

2. Reinstall the components to match the new style:

- After updating the style property, reinstall all the components previously installed in the components/ folder using the command: pnpm dlx add shadcn@latest component - name. For example, to reinstall the button component, run pnpm dlx add shadcn@latest button.

3. Update the package.json file to reflect the new style:

- Remove the package associated with the previous style, such as @base-ui/react.

- Add the package corresponding to the new style, in this case, radix-ui, to ensure proper component display.

4. Update the node_modules folder:

- Run the command pnpm run update to update the node_modules folder, which will install the radix UI package and remove the base UI package.

By following these steps, the author successfully changed the style of their shadcn project from base UI to radix UI. They emphasize that this process is not as daunting as it may seem, and that the official shadcn documentation lacks a dedicated tutorial on this topic.