Modules UIHeadless UI
Headless UI

Headless UI

Headless UI integration for Nuxt. Completely unstyled, fully accessible UI components, designed to integrate beautifully with Tailwind CSS

Installation

npm i -D nuxt-headlessui

Setup

Add the following lines to the modules section of nuxt.config.{ts,js}

modules: ['nuxt-headlessui']

Demo

Switch.vue
<script setup>
const enabled = ref(false)
</script>

<template>
  <HeadlessSwitch v-model="enabled" :class="enabled ? 'bg-gradient-to-r from-[#62D1F5] to-[#6E6CF6]' : 'bg-white/25'" class="relative inline-flex h-7 w-14 items-center rounded-full">
    <span :class="enabled ? 'translate-x-8' : 'translate-x-1'" class="inline-block w-5 aspect-square transform rounded-full bg-white duration-400 ease-in-out" />
  </HeadlessSwitch>
</template>

Checkout more Headless UI components at the official site https://headlessui.com/