How to add chadcn-ui to React Router v7 framework?

[El-Rico]

Is it possible to add a guide to the documentation on how to add chadcn-ui to the React Router v7 framework? I tried the Remix, Vite and Manual portion of the install guide, but (being new at this) can't seem to get it done.

[dhyeythumar]

Hi @El-Rico,
I don't have the sample project with v7, but I am using react-router-dom v6.28.1 with vite & shadcn/ui, maybe this might give you the gist - https://github.com/dhyeythumar/defect-detect/tree/main/frontend

PS: I also don't know the right project structure for react-router-dom. (this is in my TODO list ✌️)

[johanguse]

Check this repository @El-Rico https://github.com/coji/shadcn-admin-react-router

[ssisaias]

Thank you so much! This finally made it work.
To save time for future reference:

install next-themes:
pnpm install next-themes

Copy the two files from the repo above:
theme-provider.tsx
theme-switch.tsx

On the root -> layout (check the root.tsx):

import { ThemeProvider } from './components/theme-provider'
...
<ThemeProvider attribute="class">{children}</ThemeProvider>

Import and use the ThemeSwitch where needed.

[Webetc-nl]

I think I fixed the problem. I just installed Chadcn/ui according to the documentation:

npx shadcn@latest init

Afterwards I opened tailwind.config.ts and deleted darkMode and theme options in the default export:

export default {
	// darkMode: ["class"],
	content: ["./app/**/{**,.client,.server}/**/*.{js,jsx,ts,tsx}"],
	// theme: {
	// 	extend: {
	// 		fontFamily: {
	// 			sans: [
	// 				'Inter"',
	// 				"ui-sans-serif",
	// 				"system-ui",
	// 				"sans-serif",
	// 				'Apple Color Emoji"',
	// 				'Segoe UI Emoji"',
	// 				'Segoe UI Symbol"',
	// 				'Noto Color Emoji"',
	// 			],
	// 		},
	// 		borderRadius: {
	// 			lg: "var(--radius)",
	// 			md: "calc(var(--radius) - 2px)",
	// 			sm: "calc(var(--radius) - 4px)",
	// 		},
	// 		colors: {},
	// 	},
	// },
	plugins: [require("tailwindcss-animate")],
} satisfies Config;

Seems to work so far :)

[Nathami-n]

You actually can do that. First of all you need to use a version of tailwindcss that is lower than v4.0 and use the official installation guide for that. For example there is a guide on this here: Remix installation guide.

Once that is done if you do not have postcss and autoprefixer installed please do and then create a postcss.config.js file and add the following:

export default {
    plugins: {
        tailwindcss: {},
        autoprefixer: {},
    }
}

Then your app.css file will probably look like this

@tailwind base;
@tailwind components;
@tailwind utilities;

html,
body {
  @apply bg-white;
}


@layer base {
  * {
    @apply border-border scrollbar-thin dark:scrollbar-thumb-gray-700 scrollbar-track-transparent;
  }
  body {
    @apply bg-background text-foreground;
  }
}


@layer base {
  :root {
    --background: 0 0% 100%;
    --foreground: 240 10% 3.9%;
    --card: 0 0% 100%;
    --card-foreground: 240 10% 3.9%;
    --popover: 0 0% 100%;
    --popover-foreground: 240 10% 3.9%;
    --primary: 142.1 76.2% 36.3%;
    --primary-foreground: 355.7 100% 97.3%;
    --secondary: 240 4.8% 95.9%;
    --secondary-foreground: 240 5.9% 10%;
    --muted: 240 4.8% 95.9%;
    --muted-foreground: 240 3.8% 46.1%;
    --accent: 240 4.8% 95.9%;
    --accent-foreground: 240 5.9% 10%;
    --destructive: 0 84.2% 60.2%;
    --destructive-foreground: 0 0% 98%;
    --border: 240 5.9% 90%;
    --input: 240 5.9% 90%;
    --ring: 142.1 76.2% 36.3%;
    --radius: 0.5rem;
    --chart-1: 12 76% 61%;
    --chart-2: 173 58% 39%;
    --chart-3: 197 37% 24%;
    --chart-4: 43 74% 66%;
    --chart-5: 27 87% 67%;
  }

  .dark {
    --background: 20 14.3% 4.1%;
    --foreground: 0 0% 95%;
    --card: 24 9.8% 10%;
    --card-foreground: 0 0% 95%;
    --popover: 0 0% 9%;
    --popover-foreground: 0 0% 95%;
    --primary: 142.1 70.6% 45.3%;
    --primary-foreground: 144.9 80.4% 10%;
    --secondary: 240 3.7% 15.9%;
    --secondary-foreground: 0 0% 98%;
    --muted: 0 0% 15%;
    --muted-foreground: 240 5% 64.9%;
    --accent: 12 6.5% 15.1%;
    --accent-foreground: 0 0% 98%;
    --destructive: 0 62.8% 30.6%;
    --destructive-foreground: 0 85.7% 97.3%;
    --border: 240 3.7% 15.9%;
    --input: 240 3.7% 15.9%;
    --ring: 142.4 71.8% 29.2%;
    --chart-1: 220 70% 50%;
    --chart-2: 160 60% 45%;
    --chart-3: 30 80% 55%;
    --chart-4: 280 65% 60%;
    --chart-5: 340 75% 55%;
  }
}

finally just import your app.css to the root file and you will be set

import {
  isRouteErrorResponse,
  Links,
  Meta,
  Outlet,
  Scripts,
  ScrollRestoration,
} from "react-router";

import type { Route } from "./+types/root";
import "./app.css"

export const links: Route.LinksFunction = () => [
  { rel: "preconnect", href: "https://fonts.googleapis.com" },
  {
    rel: "preconnect",
    href: "https://fonts.gstatic.com",
    crossOrigin: "anonymous",
  },
  {
    rel: "stylesheet",
    href: "https://fonts.googleapis.com/css2?family=Inter:ital,opsz,wght@0,14..32,100..900;1,14..32,100..900&display=swap",
  },
];

export function Layout({ children }: { children: React.ReactNode }) {
  return (
    <html lang="en">
      <head>
        <meta charSet="utf-8" />
        <meta name="viewport" content="width=device-width, initial-scale=1" />
        <Meta />
        <Links />
      </head>
      <body>
        {children}
        <ScrollRestoration />
        <Scripts />
      </body>
    </html>
  );
}

export default function App() {
  return <Outlet />;
}

[Nathami-n]

You can the proceed to run npx shadcn@latest init

[jayad23]

There's a canary version of shadcn that integrates TV4. #6585

You just run the command:

pnpm dlx shadcn@canary init

And it will assimilate whatever config you already have on your repo regarding Tailwind.
Then, same old Shadcn usage.

[Nathami-n]

Sure thing!

[El-Rico]

And how can you update to a stable release afterwards? Change package file and run npm i ?