Docs - Headless UI

1. What is Headless UI?

Headless UI is a library of unstyled, accessible UI components that you can build using your framework of choice. It is designed to be used with Tailwind CSS.

You can learn more about Headless UI here.

Taskify uses Vue version of Headless UI with Nuxt Headless UI module.

2. How to use Headless UI in Taskify?

Headless UI is already integrated with Taskify. In nuxt configuration file, it is configured to use Headless prefix for all the components.

// nuxt.config.ts
headlessui: {
  prefix: "Headless",
},

And to use the components, you can simply use them like this:

<template>
  <HeadlessListbox>
    <HeadlessListboxButton>List item</HeadlessListboxButton>
  </HeadlessListbox>
</template>