npx skills add ...
npx skills add nuxt/ui --skill nuxt-ui
npx skills add nuxt/ui --skill nuxt-ui
Build UIs with @nuxt/ui v4 — 125+ accessible Vue components with Tailwind CSS theming. Use when creating interfaces, customizing themes to match a brand, building forms, or composing layouts like dashboards, docs sites, and chat interfaces.
Vue component library built on Reka UI + Tailwind CSS + Tailwind Variants. Works with Nuxt, Vue (Vite), Laravel (Vite + Inertia), and AdonisJS (Vite + Inertia).
For component API details (props, slots, events, full documentation, examples), use the Nuxt UI MCP server. If not already configured, add it:
Cursor — .cursor/mcp.json:
Claude Code:
Key MCP tools:
search_components — find components by name, description, or category (no params = list all)search_composables — find composables by name or description (no params = list all)search_icons — search Iconify icons (defaults to lucide), returns i-{prefix}-{name} namesget_component — full component documentation with usage examplesget_component_metadata — props, slots, events (lightweight, no docs content)get_example — real-world code examplesWhen you need to know what a component accepts or how its API works, use the MCP. This skill teaches you when to use which component and how to build well.
UApp — required for toasts, tooltips, and programmatic overlays. Accepts a locale prop for i18n.text-default, bg-elevated, border-muted, etc. Never use raw Tailwind palette colors like text-gray-500..nuxt/ui/<component>.ts, Vue: node_modules/.nuxt-ui/ui/<component>.ts. These show every slot, variant, and default class for any component.ui prop / class prop → global config → theme defaults.i-{collection}-{name} format — lucide is the default collection. Use the MCP search_icons tool to find icons, or browse at icones.js.org.Based on the task, load the relevant reference files before writing any code. Don't load everything — only what's needed.
Guidelines — design decisions and conventions:
ui propLayouts — full page structure patterns:
Recipes — complete patterns for common tasks:
Quick reference:
| Task | Load these references |
|---|---|
| Build a landing page | design-system, conventions, landing |
| Build a dashboard / admin UI | conventions, component-selection, dashboard |
| Add a settings page | conventions, forms |
| Create a login / signup form | conventions, forms, auth |
| Display data in a table | conventions, component-selection, data-tables |
| Customize theme / brand colors | design-system |
| Add a chat interface | conventions, chat |
| Add a modal, slideover, or drawer | conventions, component-selection, overlays |
| Build site navigation | conventions, component-selection, navigation |
| Build a documentation site | conventions, docs |
| Render markdown | component-selection, components, docs |
| Add a rich text editor | conventions, editor |
| General UI work | conventions, component-selection |
Add
class="isolate"to your root<div id="app">inindex.html. For Inertia: useui({ router: 'inertia' })invite.config.ts.
// nuxt.config.ts
export default defineNuxtConfig({
modules: ['@nuxt/ui'],
css: ['~/assets/css/main.css']
})/* app/assets/css/main.css */
@import "tailwindcss";
@import "@nuxt/ui";<!-- app.vue -->
<template>
<UApp>
<NuxtPage />
</UApp>
</template>// vite.config.ts
import { defineConfig } from 'vite'
import vue from '@vitejs/plugin-vue'
import ui from '@nuxt/ui/vite'
export default defineConfig({
plugins: [
vue(),
ui()
]
})// src/main.ts
import './assets/css/main.css'
import { createApp } from 'vue'
import { createRouter, createWebHistory } from 'vue-router'
import ui from '@nuxt/ui/vue-plugin'
import App from './App.vue'
const app = createApp(App)
const router = createRouter({
routes: [],
history: createWebHistory()
})
app.use(router)
app.use(ui)
app.mount('#app')/* src/assets/css/main.css */
@import "tailwindcss";
@import "@nuxt/ui";<!-- src/App.vue -->
<template>
<UApp>
<RouterView />
</UApp>
</template>