Setting the chapter. One moment.
Skills
Chapter 1 of 1
Build UIs with @nuxt/ui v4 — 125+ accessible Vue components with Tailwind CSS theming.
2 minutes · 461 words · 8 sections
Vue component library built on Reka UI (opens in a new tab) + Tailwind CSS (opens in a new tab) + Tailwind Variants (opens in a new tab). 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 (opens in a new tab). If not already configured, add it:
Cursor — .cursor/mcp.json:
{ "mcpServers": { "nuxt-ui": { "type": "http", "url": "https://ui.nuxt.com/mcp" } } }Claude Code:
claude mcp add --transport http nuxt-ui https://ui.nuxt.com/mcpKey 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 (opens in a new tab).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 |
pnpm add @nuxt/ui tailwindcss// 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>pnpm add @nuxt/ui tailwindcss// 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>Add
class="isolate"to your root<div id="app">inindex.html. For Inertia: useui({ router: 'inertia' })invite.config.ts.
Install this repository
npx skills add nuxt/uiSkills install per repository, not per chapter — the CLI has no documented per-skill form, so we do not print one.
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.
The verbatim description from this skill’s front matter — the string an agent matches on to decide whether to load it.
v4, last pushed 9 August 2026.SKILL.md, not by matching a directory convention. One layout observed: skills/*/SKILL.md.h1 and no skipped levels:/nuxt/ui.md, and each chapter at its own .md URL.14 files · 85 KB
Everything this skill ships beside its prose. All of it is set here, as subchapters of chapter 1.
Documentation the agent loads on demand, rather than up front.
references/1 file · 9 KB
references/guidelines/4 files · 31 KB
references/layouts/5 files · 26 KB
references/recipes/4 files · 18 KB