Vue 3向けに設計されたヘッドレスUIコンポーネントライブラリ。Reactからの移植ではなくVueネイティブな実装です。

npm install akaza-ui

// main.ts
import "akaza-ui/dist/akaza-ui.css";

/* main.css */
@layer akaza-reset;
@import "tailwindcss";

// nuxt.config.ts
export default defineNuxtConfig({
  modules: ["akaza-ui/nuxt"],
});

<script setup lang="ts">
import { ref } from "vue";
import { Dialog } from "akaza-ui";

const isOpen = ref(false);
</script>

<template>
  <Dialog v-model="isOpen">
    <template #trigger="{ toggle }">
      <button @click="toggle">Open</button>
    </template>
    <template #body>
      <p>Dialog content</p>
    </template>
  </Dialog>
</template>