Shadcn UI: Revamp your legacy React app with minimal effort

It's difficult to go back to Material UI or Daisy UI in 2025 once you get into Shadcn. It became my go-to choice and potentially one of my primary reasons I'd opt for Next.js when I create a quick side-project or proof of concept.

The other day I had to touch a pretty old React app and to stay that it was in a pretty bad state was an understatement. We are talking about 4 different styling solutions (SCSS, CSS, Tailwind, MUI) used sometimes in the same component, random hacks everywhere and pretty much all the signs that'd make most of us say: "Yep, this app needs to be rewritten from scratch"

But once I realised it's mainly UI related issues, decided to opt for my Swiss army knife - aka Shadcn. By using the pre-made build components it providers along with Tailwind, I have everything I need to refactor the app.

Installing Shadcn

First I had to install the dependencies. Since it's an old React app, I had to manually install and generate everything as instructed in the docs.

yarn add class-variance-authority clsx tailwind-merge lucide-react tw-animate-css

Next update the `tsconfig.json` file to help resolve our paths:

{
  "compilerOptions": {
    "baseUrl": ".",
    "paths": {
      "@/*": ["./*"]
    }
  }
}

Next, import the Tailwind in our CSS file. Here I didn't use the CSS variables, but you can add them in if you prefer.

@import "tailwindcss";
@import "tw-animate-css";

Add our `cn` util function to help merge, manage and apply classes:

import { clsx, type ClassValue } from "clsx"
import { twMerge } from "tailwind-merge"

export function cn(...inputs: ClassValue[]) {
  return twMerge(clsx(inputs))
}

And next we'll need a `components.json` file in the root of our app.

{
  "$schema": "https://ui.shadcn.com/schema.json",
  "style": "new-york",
  "rsc": false,
  "tsx": true,
  "tailwind": {
    "config": "",
    "css": "src/styles/globals.css",
    "baseColor": "neutral",
    "cssVariables": false,
    "prefix": ""
  },
  "aliases": {
    "components": "@/components",
    "utils": "@/lib/utils",
    "ui": "@/components/ui",
    "lib": "@/lib",
    "hooks": "@/hooks"
  },
  "iconLibrary": "lucide"
}

Now after all this, I can finally add the components via the following command:

npx shadcn add --all

Potential issue

As mentioned earlier, this app I have is pretty old. Old dependencies, webpack config etc. Even though I managed to install everything successfully, when running I get the following error:

ERROR in ./node_modules/@radix-ui/react-arrow/dist/index.mjs 4:0-40
Module not found: Error: Can't resolve 'react/jsx-runtime' in '/Users/the-opinionated-dev/dev/dt/dt-dashboard/node_modules/@radix-ui/react-arrow/dist' Did you mean 'jsx-runtime.js'? BREAKING CHANGE: The request 'react/jsx-runtime' failed to resolve only because it was resolved as fully specified (probably because the origin is strict EcmaScript Module, e. g. a module with javascript mimetype, a '.mjs' file, or a '.js' file where the package.json contains '"type": "module"'). The extension in the request is mandatory for it to be fully specified. Add the extension to the request.

The fix for this issue lies in our Webpack config. Simply add this `alias` and install the dependency and that should fix the issue:

'react/jsx-runtime':require.resolve('react/jsx-runtime'),

And basically that's it! Hopefully at this point you have Shadcn component available in your React app, ready to use!