how to use daisyui with shadcnui

[sarowarhosen03]

hello everyone . i like to keep boht of this library , i want to sync daisyui theme with shadcn ui , there any way can anyone help me please , at present my tailwind.config.js is look like

 /** @type {import('tailwindcss').Config} */
const themes = require("./src/utils/themes");
module.exports = {
  content: [
    './pages/**/*.{ts,tsx}',
    './components/**/*.{ts,tsx}',
    './app/**/*.{ts,tsx}',
    './src/**/*.{ts,tsx}',
	],
  plugins: [require("daisyui")],
    daisyui: {
        themes: themes,
    },
    };

[saadeghi]

Please share your project so I can run it and reproduce the problem.

[sarowarhosen03]

here is my repository https://github.com/sarowarhosen03/nextjs-blog , under the src/about/page.tsx i have a shadcn button i iimplement theme toggle on the navbar , themeswithcher component

[saadeghi]

Thanks.
How do you change the theme in Shadcn?
Because it looks like the colors are hardcoded even after setting "cssVariables": true in components.json according to docs, I couldn't see the CSS variables.

[sarowarhosen03]

As I am using dasyui theme . I choose no css variable when initializing shadcn .

[saadeghi]

I understand. daisyUI components use CSS variables for colors so all colors can change on run time only by changing a CSS variable.

Shadcn without "cssVariables" config only sets dark: prefix to the colors for dark mode (when OS/browser is set to dark mode) and the colors can't be changed dynamically. The cssVariables config, as mentioned in Shadcn docs uses CSS variables for colors so it can dynamically change the colors on runtime using CSS variables.
The problem is, when I set "cssVariables": true in components.json according to docs, I don't see a difference. I'm not sure if there's a problem in config or the package…

Maybe you can ask about it in Shadcn repo?

[sarowarhosen03]

thanks for your respond , i think i found the solution by making this changes sarowarhosen03/nextjs-blog@2422cc5 , here i'm again init shadcn/ui with select css variable true , and make some changes

[dido2007]

yo guys, im having the same problem, i just added shadcn ui with daisy ui, and ma daisy ui style disapeared, when i installed shadcn they removed my previous tailwind config with daisy ? how do i do ?
tailwid.confing.js :
/** @type {import('tailwindcss').Config} /
module.exports = {
content: [
'./pages/**/.{js,ts,jsx,tsx,mdx}',
'./components//*.{js,ts,jsx,tsx,mdx}',
'./app//*.{js,ts,jsx,tsx,mdx}',
],
theme: {
extend: {
fontFamily: {
title: ['Tsukimi Rounded', 'sans-serif'],
subtitle: ['MuseoModerno', 'sans-serif'],
body: ['Inter', 'sans-serif'],
},
colors: {
'primary-color': '#0E3768',
'secondary-color': '#4C87CD',
'common-text': '#FFFFFF',
}
},
},
plugins: [require("daisyui")],
daisyui: {
themes: ["winter", 'valentine', 'aqua'],
utils: true,
logs: false,
},
}

[secret104278]

This is how I end up with it. Not yet sure if everything from shadcn will look correctly, but at least DaisyUI won't break.

tailwind.config.ts

import daisyui, { type Config as DaisyUIConfig } from "daisyui";
import { type Config } from "tailwindcss";

type DaisyuiThemeExtend = {
  borderRadius: {
    badge: string;
    btn: string;
    box: string;
  };
  colors: {
    "base-100": string;
    "base-200": string;
    "base-300": string;
    "base-content": string;
    primary: string;
    "primary-content": string;
    secondary: string;
    "secondary-content": string;
    accent: string;
    "accent-content": string;
    neutral: string;
    "neutral-content": string;
    info: string;
    "info-content": string;
    success: string;
    "success-content": string;
    warning: string;
    "warning-content": string;
    error: string;
    "error-content": string;
  };
};
const daisyuiThemeExtend = daisyui.config!.theme!.extend as DaisyuiThemeExtend;

const shadcnThemeExtend = {
  borderRadius: {
    lg: daisyuiThemeExtend.borderRadius.badge,
    md: daisyuiThemeExtend.borderRadius.btn,
    sm: daisyuiThemeExtend.borderRadius.box,
  },
  colors: {
    background: daisyuiThemeExtend.colors["base-100"],
    foreground: daisyuiThemeExtend.colors["base-content"],
    card: {
      DEFAULT: daisyuiThemeExtend.colors["base-100"],
      foreground: daisyuiThemeExtend.colors["base-content"],
    },
    popover: {
      DEFAULT: daisyuiThemeExtend.colors["base-100"],
      foreground: daisyuiThemeExtend.colors["base-content"],
    },
    primary: {
      DEFAULT: daisyuiThemeExtend.colors.primary,
      foreground: daisyuiThemeExtend.colors["primary-content"],
    },
    secondary: {
      DEFAULT: daisyuiThemeExtend.colors.secondary,
      foreground: daisyuiThemeExtend.colors["secondary-content"],
    },
    muted: {
      DEFAULT: daisyuiThemeExtend.colors["base-300"],
      foreground: daisyuiThemeExtend.colors["base-content"],
    },
    accent: {
      DEFAULT: daisyuiThemeExtend.colors.accent,
      foreground: daisyuiThemeExtend.colors["accent-content"],
    },
    destructive: {
      DEFAULT: daisyuiThemeExtend.colors.error,
      foreground: daisyuiThemeExtend.colors["error-content"],
    },
    border: daisyuiThemeExtend.colors["base-300"],
    input: daisyuiThemeExtend.colors["base-300"],
    ring: daisyuiThemeExtend.colors.primary,
    chart: {
      "1": "hsl(var(--chart-1))",
      "2": "hsl(var(--chart-2))",
      "3": "hsl(var(--chart-3))",
      "4": "hsl(var(--chart-4))",
      "5": "hsl(var(--chart-5))",
    },
  },
};

export default {
  content: ["./src/**/*.{js,ts,jsx,tsx}"],
  theme: {
    extend: {
      ...shadcnThemeExtend,
    },
  },
  plugins: [
    require("@tailwindcss/typography"),
    require("daisyui"),
    require("tailwindcss-animate"),
  ],
  daisyui: {
    themes: ["autumn", "garden", "fantasy"],
  } satisfies DaisyUIConfig,
} satisfies Config;

src/styles/globals.css

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

@layer base {
  :root {

    /** shadcn */
    --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%;
  }
}

/** shadcn */
@layer base {
  * {
    @apply border-border;
  }
  body {
    @apply bg-background text-foreground;
  }
}

[saadeghi]

Thanks for sharing!