How to scope shadcn/ui to only /dashboard directory while keeping generic brand theme in root?

[sachithrrra]

I'm trying to use shadcn/ui components only in my /dashboard directory while maintaining a generic brand theme in the root of my application. I also need dark/light theme support specifically for the dashboard area only. I want to avoid shadcn styles bleeding into the rest of my app.

What I've tried

Scoped CSS Variables** ❌ (Didn't work)

I tried creating separate CSS variable scopes:

Root styles (globals.css):

:root {
  --brand-primary: #3b82f6;
  --brand-secondary: #64748b;
}

Dashboard styles (/dashboard/dashboard.css):

.dashboard-scope {
  --background: 0 0% 100%;
  --foreground: 222.2 84% 4.9%;
  --card: 0 0% 100%;
  --card-foreground: 222.2 84% 4.9%;
  --primary: 222.2 47.4% 11.2%;
  --primary-foreground: 210 40% 98%;
  /* ... rest of shadcn variables */
}

.dashboard-scope.dark {
  --background: 222.2 84% 4.9%;
  --foreground: 210 40% 98%;
  --card: 222.2 84% 4.9%;
  --card-foreground: 210 40% 98%;
  --primary: 210 40% 98%;
  --primary-foreground: 222.2 47.4% 11.2%;
  /* ... dark theme variables */
}

Dashboard layout with ThemeProvider:

// /dashboard/layout.tsx
import './dashboard.css'
import { ThemeProvider } from 'next-themes'

export default function DashboardLayout({ children }) {
  return (
    <div className="dashboard-scope">
      <ThemeProvider
        attribute="class"
        defaultTheme="system"
        enableSystem
        disableTransitionOnChange
      >
        {children}
      </ThemeProvider>
    </div>
  )
}

Issues:

1. The shadcn components still don't pick up the scoped variables properly
2. ThemeProvider applies theme classes to the entire document, affecting root app
3. Style bleeding between the root app and dashboard persists

Project Structure

/app
  globals.css (brand theme)
  layout.tsx
  page.tsx
/dashboard
  layout.tsx
  page.tsx
  components/
    ui/ (shadcn components)
    theme-toggle.tsx

What I need

1. Completely isolate shadcn/ui to only the dashboard directory
2. Dark/light theme switching that only affects the dashboard area
3. Prevent shadcn styles from affecting my root application

Environment

• Next.js 14
• Tailwind CSS v3
• shadcn/ui
• next-themes

Any help would be greatly appreciated! 🙏

[SiddDevZ]

Wrap your dashboard in a div with a custom class, and try to apply light or dark to that div, not the whole page. Set ThemeProvider to use class. Put all your Shadcn CSS vars inside .dashboard-scope.light and .dashboard-scope.dark. That should keep themes and styles locked to dashboard only