Can I use this library with shadcn/ui?

[ManuRodgers]

Can I use this library with shadcn/ui?

[saadeghi]

As far as I know there's no problem.

You can use some components from daisyUI and some other components from other libraries.
In case there's conflict with class names (both libraries apply styles to the same class name) you can use the prefix config of daisyUI to add a specific prefix to all daisyUI class names and avoid style conflicts.

Let me know if you have any questions.

[ManuRodgers]

Thanks mate for quick response

[prashantbhudwal]

@ManuRodgers If you are using a theme in daisy ui, using both together is not so straightforward, you have to maintain both themes.

Also, if you are using daisy, running shad init will deleted all daisy config, any globals, and existing plug-ins in tailwind, you will have to manually resolve it like a merge conflict.

Learned it the hard way.

[edxeth]

@prashantbhudwal how did you configure a daisyUI theme altogether with shadcn/ui? The two together are creating conflict because they share :root, can you please explain to us how do you make it work and how do you mantain the themes?

[prashantbhudwal]

I just hacked. Made sure that everything is same in both. Hassle a first time and then you just forget about it and keep extending shad.

[edxeth]

@prashantbhudwal do you mind sharing your globals.css and tailwind.config.js setup for daisyUI and shadcn/ui? So that I can understand it better. I'm new to this and kinda slow as well lol

EDIT: I've managed to get it working with cssVariables set to false, but that's not what I want. I'm currently switching theme via daisyUI's theme controller component and sadly shadcn/ui doesn't recognize the theme switching action to dark although I've set darkMode: ["class", '[data-theme="dark"]'] in my tailwind.config.ts. The question is how do I get cssVariables to work with daisyUI dark theme?

EDIT2: It seems that the above method is the best approach, we should stick to cssVariables set to false, that's the way!

[miilord]

If you want to use DaisyUI's color themes in ShadcnUI, you can try the following methods:

1. Set "cssVariables": true in components.json
2. Remove the color utility classes of ShadcnUI in global.css
3. Try this code in tailwind.config.js

const daisyuiColorObj = require('daisyui/src/theming/index')
...
theme: {
    ...
    extend: {
      colors: {
        border: daisyuiColorObj['base-content'],
        input: daisyuiColorObj['base-content'],
        ring: daisyuiColorObj['base-content'],
        background: daisyuiColorObj['base-100'],
        foreground: daisyuiColorObj['base-content'],
        primary: {
          DEFAULT: daisyuiColorObj['primary'],
          foreground: daisyuiColorObj['primary-content'],
        },
        secondary: {
          DEFAULT: daisyuiColorObj['secondary'],
          foreground: daisyuiColorObj['secondary-content'],
        },
        destructive: {
          DEFAULT: daisyuiColorObj['error'],
          foreground: daisyuiColorObj['error-content'],
        },
        muted: {
          DEFAULT: daisyuiColorObj['base-300'],
          foreground: daisyuiColorObj['base-content'],
        },
        accent: {
          DEFAULT: daisyuiColorObj['accent'],
          foreground: daisyuiColorObj['accent-content'],
        },
        popover: {
          DEFAULT: daisyuiColorObj['base-100'],
          foreground: daisyuiColorObj['base-content'],
        },
        card: {
          DEFAULT: daisyuiColorObj['base-100'],
          foreground: daisyuiColorObj['base-content'],
        },
      },
      borderRadius: {
        lg: 'var(--rounded-btn)',
        md: 'calc(var(--rounded-btn) - 2px)',
        sm: 'calc(var(--rounded-btn) - 4px)',
      },
      keyframes: {
        'accordion-down': {
          from: { height: '0' },
          to: { height: 'var(--radix-accordion-content-height)' },
        },
        'accordion-up': {
          from: { height: 'var(--radix-accordion-content-height)' },
          to: { height: '0' },
        },
      },
      animation: {
        'accordion-down': 'accordion-down 0.2s ease-out',
        'accordion-up': 'accordion-up 0.2s ease-out',
      },
    },

[NayamAmarshe]

What about the default ShadCN theme?

[miilord]

I'm not sure, this might not be a good practice because shadcn uses fewer colors than daisyui

[NayamAmarshe]

I'd like to use DaisyUI themes with ShadCN components. So I thought it'd be good to also have the ShadCN theme along with the default DaisyUI themes.

[AbirSantra]

Thank you this worked wonders!

[Zegoverno]

Hey, I would like to use shadcn components but using the themes and style from daisyUI, any one could make is work?

[NayamAmarshe]

We just did it in https://github.com/upscayl/upscayl

You can take a look :)