Daisy UI is a beautiful and easy-to-use component library for Tailwind CSS. But It is unlike your typical component library, Material UI, or Mantine UI. Instead of providing a set of components, Daisy UI provides a set of utility classes that you can use to build your components i.e btn, btn-primary, modal, modal-box etc.
Installation
You need to have Tailwind CSS installed in your project. You can use this with any JavaScript framework or just vanilla HTML. I am using Nextjs.
npm install daisyui
Then add the plugin to your tailwind.config.js file.
module.exports = {
plugins: [require('daisyui')],
}
You can check the video tutorial on my YouTube channel. Consider subscribing if you like the content.
Usage
For example, you want to use a button component.
- Other UI framework:
import { Button } from 'library'
const App = () => {
return <Button>Click me</Button>
}
- Daisy UI:
const App = () => {
return <button className='btn'>Button</button>
}
Customization
- You can use the class names to customize the components.
const App = () => {
return (
<button className="btn">Button</button>
<button className="btn btn-neutral">Neutral</button>
<button className="btn btn-primary">Primary</button>
<button className="btn btn-secondary">Secondary</button>
<button className="btn btn-accent">Accent</button>
<button className="btn btn-ghost">Ghost</button>
<button className="btn btn-link">Link</button>
)
}
Explanation: In the above example, we have used the btn-primary, and btn-secondary classes to customize the button component. You have to check the documentation to see which classes are available for customization.
Themes
There are 32 default themes available for you to use i.e. light, dark, cupcake, nord etc.
Change theme
You can change the theme by adding the data-theme attribute to the container. It could be the HTML, body, or even a simple div. You can change the theme of a single component by adding the data-theme attribute.
<html data-theme="nord">
<body>
<button className="btn">Primary</button>
<button className="btn" data-theme="cyberpunk">Primary</button>
</body>
</html>
To learn more about Daisy UI, you can check out my video tutorial on YouTube. Thank you so much for Reading. Have a great day.
Top comments (0)