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.ebtn,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.
npminstalldaisyuiThen add the plugin to yourtailwind.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'constApp=()=>{return<Button>Clickme</Button>}- Daisy UI:
constApp=()=>{return<buttonclassName='btn'>Button</button>}
Customization
- You can use the class names to customize the components.
constApp=()=>{return(<buttonclassName="btn">Button</button><buttonclassName="btn btn-neutral">Neutral</button><buttonclassName="btn btn-primary">Primary</button><buttonclassName="btn btn-secondary">Secondary</button><buttonclassName="btn btn-accent">Accent</button><buttonclassName="btn btn-ghost">Ghost</button><buttonclassName="btn btn-link">Link</button>)}
Explanation: In the above example, we have used thebtn-primary, andbtn-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 thedata-theme attribute to the container. It could be theHTML,body, or even a simplediv. You can change the theme of a single component by adding thedata-theme attribute.
<htmldata-theme="nord"><body><buttonclassName="btn">Primary</button><buttonclassName="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(1)
- Email
- LocationAtlanta, GA
- WorkSoftware Engineer
- Joined
Thanks for posting this. Going to try out daisyui on a new project. Hope it makes dark/light mode support faster to build.
For further actions, you may consider blocking this person and/orreporting abuse
