My Favorite Tailwind Library | Daisy UI

#nextjs #tailwindcss #javascript #css

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>