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.

Nexus AI uses Vue version of Headless UI with Nuxt Headless UI module.

2. How to use Headless UI in Nexus AI?

Headless UI is already integrated with Nexus AI. 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>