How to use Headless UI and daisyUI together?

Headless UI is a set of completely unstyled, fully accessible UI components for React and Vue. It gives you functionality without design decisions. daisyUI is a Tailwind CSS component library that provides design decisions without functionality. That's why it is suggested to use them together.

Why use Headless UI?

As a CSS-only component library, daisyUI doesn't include any JavaScript code. However sometimes you need JS to make interactive components or to improve keyboard navigation. That's where Headless UI comes in. It provides you with fully accessible UI components for React and Vue.

How to install Headless UI?

Headless UI is available for React and Vue. But there is an unofficial port of Headless UI for Svelte too.

1. To install Headless UI for Vue, run the following command:

npm install @headlessui/vue

Or this command if you're using React:

npm install @headlessui/react

2. Now you can use any of the Headless UI components by copy/pasting the code to your project.

For example, according to Headless UI docs, this is how you can create a dropdown menu:

import { Menu } from "@headlessui/react"

export default function MyDropDown() {
  return (
    <Menu>
      <Menu.Button>Button</Menu.Button>
      <Menu.Items>
        <Menu.Item>
          <li>
            <a href="/link">Item 1</a>
          </li>
        </Menu.Item>
        <Menu.Item>
          <li>
            <a href="/link">Item 2</a>
          </li>
        </Menu.Item>
      </Menu.Items>
    </Menu>
  )
}

3. Add daisyUI

After installing daisyUI you can use daisyUI's styles in Headless UI components. Simply add daisyUI class names (and Tailwind CSS utility classes) where it's needed:

import { Menu } from "@headlessui/react"

export default function MyDropDown() {
  return (
    <Menu>
      <Menu.Button className="btn">Button</Menu.Button>
      <Menu.Items className="menu rounded-box bg-base-200 w-52">
        <Menu.Item>
          <li>
            <a href="/link">Item 1</a>
          </li>
        </Menu.Item>
        <Menu.Item>
          <li>
            <a href="/link">Item 2</a>
          </li>
        </Menu.Item>
      </Menu.Items>
    </Menu>
  )
}

Visit Headless UI docs to learn more about its components.