blog

src/docs/src/routes/blog/(posts)/how-to-use-headless-ui-and-daisyui/+page.md

@@ -0,0 +1,92 @@
+---
+title: How to use Headless UI and daisyUI together?
+desc: What is Headless UI and why it is suggested to use it with daisyUI?
+published: true
+date: 2023-9-28
+author: Pouya Saadeghi
+thumbnail: /images/blog/headless-ui.jpg
+tags:
+  - Headless UI
+  - Component Library
+---
+
+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](https://headlessui.com/) comes in. It provides you with fully accessible UI components for React and Vue.
+
+## How to install Headless UI?
+
+[Headless UI](https://headlessui.com/) is available for React and Vue. But there is an [unofficial port of Headless UI for Svelte](https://github.com/rgossiaux/svelte-headlessui) too.
+
+1. To install Headless UI for Vue, run the following command:
+
+```bash
+npm install @headlessui/vue
+```
+
+Or this command if you're using React:
+
+```bash
+npm install @headlessui/react
+```
+
+2. Now you can use any of the [Headless UI components](https://headlessui.com/) by copy/pasting the code to your project.
+
+For example, according to Headless UI docs, this is how you can create a dropdown menu:
+
+```jsx
+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](https://daisyui.com/docs/install/) you can use daisyUI's styles in Headless UI components.  
+Simply add daisyUI class names (and Tailwind CSS utility classes) where it's needed:
+
+```jsx
+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](https://headlessui.com/) to learn more about its components.