nuxt-ui

Nuxt UI v4

Reka UI（ヘッドレス）＋Tailwind CSS v4＋Tailwind Variants を基盤とする、Vue 3 および Nuxt 4+ 向けのコンポーネントライブラリです。

現在の安定版： v4.3.0（2025年12月）

使用する場面

• @nuxt/ui のインストール／設定
• UI コンポーネント（Button、Card、Table、Form など）の使用
• テーマ（色、バリアント、CSS 変数）のカスタマイズ
• バリデーションを使ったフォームの構築
• オーバーレイ（Modal、Toast、CommandPalette）の使用
• コンポーザブル（useToast、useOverlay）の使用

Vue コンポーネントのパターンについて： vue スキルを使用してください
Nuxt のルーティング／サーバーについて： nuxt スキルを使用してください

利用可能なガイダンス

ファイル	トピック
references/installation.md	Nuxt／Vue のセットアップ、pnpm の注意点、UApp ラッパー、モジュールオプション、プレフィックス、ツリーシェイキング
references/theming.md	セマンティックカラー、CSS 変数、app.config.ts、Tailwind Variants
references/components.md	カテゴリ別コンポーネント一覧（125 以上のコンポーネント）
components/*.md	コンポーネントごとの詳細（button.md、modal.md など）
references/forms.md	フォームコンポーネント、バリデーション（Zod／Valibot）、useFormField
references/overlays.md	Toast、Modal、Slideover、Drawer、CommandPalette
references/composables.md	useToast、useOverlay、defineShortcuts、useScrollspy

使用パターン

状況に応じて読み込みます：

• Nuxt UI をインストールしますか？ → references/installation.md
• テーマをカスタマイズしますか？ → references/theming.md
• コンポーネント一覧 → references/components.md
• 特定のコンポーネント → components/button.md、components/modal.md など
• フォームを構築しますか？ → references/forms.md
• オーバーレイを使用しますか？ → references/overlays.md
• コンポーザブルを使用しますか？ → references/composables.md

すべてのファイルを一度に読まないでください。 状況に応じて読み込みます。

主な概念

概念	説明
UApp	Toast、Tooltip、オーバーレイに必要なラッパーコンポーネント
Tailwind Variants	スロット、バリアント、compoundVariants による型安全なスタイリング
セマンティックカラー	primary、secondary、success、error、warning、info、neutral
Reka UI	ヘッドレスコンポーネントのプリミティブ（アクセシビリティを標準搭載）

ヘッドレスコンポーネントのプリミティブ（API の詳細、アクセシビリティのパターン、asChild）については、reka-ui スキルを参照してください

クイックリファレンス

// nuxt.config.ts
export default defineNuxtConfig({
  modules: ['@nuxt/ui'],
  css: ['~/assets/css/main.css']
})

/* assets/css/main.css */
@import 'tailwindcss';
@import '@nuxt/ui';

<template>
  <UApp>
    <NuxtPage />
  </UApp>
</template>

リソース

• Nuxt UI ドキュメント
• コンポーネントリファレンス
• テーマのカスタマイズ

---

トークン効率：メインスキルは約300トークン、各サブファイルは約800～1200トークン