Can I use this library with shadcn/ui? #2140
-
|
Can I use this library with shadcn/ui? |
Beta Was this translation helpful? Give feedback.
Replies: 3 comments 12 replies
-
|
As far as I know there's no problem. You can use some components from daisyUI and some other components from other libraries. Let me know if you have any questions. |
Beta Was this translation helpful? Give feedback.
-
|
Thanks mate for quick response |
Beta Was this translation helpful? Give feedback.
-
|
@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. |
Beta Was this translation helpful? Give feedback.
-
|
@prashantbhudwal how did you configure a daisyUI theme altogether with shadcn/ui? The two together are creating conflict because they share |
Beta Was this translation helpful? Give feedback.
-
|
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. |
Beta Was this translation helpful? Give feedback.
-
|
@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 EDIT2: It seems that the above method is the best approach, we should stick to |
Beta Was this translation helpful? Give feedback.
-
|
If you want to use DaisyUI's color themes in ShadcnUI, you can try the following methods:
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',
},
},
|
Beta Was this translation helpful? Give feedback.
-
|
What about the default ShadCN theme? |
Beta Was this translation helpful? Give feedback.
-
|
I'm not sure, this might not be a good practice because shadcn uses fewer colors than daisyui |
Beta Was this translation helpful? Give feedback.
-
|
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. |
Beta Was this translation helpful? Give feedback.
-
|
Thank you this worked wonders! |
Beta Was this translation helpful? Give feedback.
-
|
Hey, I would like to use shadcn components but using the themes and style from daisyUI, any one could make is work? |
Beta Was this translation helpful? Give feedback.
-
|
We just did it in https://github.com/upscayl/upscayl You can take a look :) |
Beta Was this translation helpful? Give feedback.
-
|
Thank you for sharing! |
Beta Was this translation helpful? Give feedback.
-
|
I made a tool for this. Check it out :) App: https://www.nevy.me/tiny/daisy-to-shadcn |
Beta Was this translation helpful? Give feedback.
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
prefixconfig of daisyUI to add a specific prefix to all daisyUI class names and avoid style conflicts.Let me know if you have any questions.