リポジトリの原文
見出し、例、コード、表、リンク、参照画像を含む原文を表示しています。
Nuxt UI v4
Component library for Vue 3 and Nuxt 4+ built on Reka UI (headless) + Tailwind CSS v4 + Tailwind Variants.
Current stable version: v4.4.0 (January 2026)
When to Use
- Installing/configuring @nuxt/ui
- Using UI components (Button, Card, Table, Form, etc.)
- Customizing theme (colors, variants, CSS variables)
- Building forms with validation
- Using overlays (Modal, Toast, CommandPalette)
- Working with composables (useToast, useOverlay)
For Vue component patterns: use vue skill For Nuxt routing/server: use nuxt skill
Available Guidance
| File | Topics |
|---|---|
| [references/installation.md](references/installation.md) | Nuxt/Vue setup, pnpm gotchas, UApp wrapper, module options, prefix, tree-shaking |
| [references/theming.md](references/theming.md) | Semantic colors, CSS variables, app.config.ts, Tailwind Variants |
| [references/components.md](references/components.md) | Component index by category (125+ components) |
| components/\.md** | Per-component details (button.md, modal.md, etc.) |
| [references/forms.md](references/forms.md) | Form components, validation (Zod/Valibot), useFormField |
| [references/overlays.md](references/overlays.md) | Toast, Modal, Slideover, Drawer, CommandPalette |
| [references/composables.md](references/composables.md) | useToast, useOverlay, defineShortcuts, useScrollspy |
Loading Files
Consider loading these reference files based on your task:
- [ ] references/installation.md - if installing or configuring @nuxt/ui
- [ ] references/theming.md - if customizing theme, colors, or Tailwind Variants
- [ ] references/components.md - if browsing component index or finding components by category
- [ ] references/forms.md - if building forms with validation (Zod/Valibot)
- [ ] references/overlays.md - if using Toast, Modal, Slideover, Drawer, or CommandPalette
- [ ] references/composables.md - if using useToast, useOverlay, or other composables
DO NOT load all files at once. Load only what's relevant to your current task.
Key Concepts
| Concept | Description |
|---|---|
| UApp | Required wrapper component for Toast, Tooltip, overlays |
| Tailwind Variants | Type-safe styling with slots, variants, compoundVariants |
| Semantic Colors | primary, secondary, success, error, warning, info, neutral |
| Reka UI | Headless component primitives (accessibility built-in) |
For headless component primitives (API details, accessibility patterns, asChild): read the reka-ui skill
Quick Reference
ts
// nuxt.config.ts
export default defineNuxtConfig({
modules: ['@nuxt/ui'],
css: ['~/assets/css/main.css']
})css
/* assets/css/main.css */
@import 'tailwindcss';
@import '@nuxt/ui';vue
<!-- app.vue - UApp wrapper required -->
<template>
<UApp>
<NuxtPage />
</UApp>
</template>Resources
Token efficiency: Main skill ~300 tokens, each sub-file ~800-1200 tokens
