--- title: "nuxt-ui by nuxt · skilld" canonical_url: "https://skilld.dev/gh/nuxt/ui" last_updated: "2026-08-24T08:21:12.594Z" meta: description: "Provides 125+ accessible Vue components built on Tailwind CSS and Reka UI, with semantic color tokens and theming support. Use for building interfaces in Nuxt, Vue, Laravel Inertia, or… From nuxt/ui." "og:description": "Provides 125+ accessible Vue components built on Tailwind CSS and Reka UI, with semantic color tokens and theming support. Use for building interfaces in Nuxt, Vue, Laravel Inertia, or… From nuxt/ui." "og:title": "nuxt-ui by nuxt" "twitter:description": "Provides 125+ accessible Vue components built on Tailwind CSS and Reka UI, with semantic color tokens and theming support. Use for building interfaces in Nuxt, Vue, Laravel Inertia, or… From nuxt/ui." "twitter:title": "nuxt-ui by nuxt" --- ` [All skills](https://skilld.dev/skills) [![nuxt avatar](https://github.com/nuxt.png?size=96)](https://skilld.dev/gh/nuxt) # **/nuxt-ui** official by [nuxt](https://skilld.dev/gh/nuxt)· [nuxt](https://skilld.dev/gh/nuxt)/ [ui](https://skilld.dev/gh/nuxt/ui)·6.9k stars 1,121 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. [GitHub](https://github.com/nuxt/ui/blob/4fdccd333b8a0c6956e1c245cfddf781f13c81a0/skills/nuxt-ui/SKILL.md "View SKILL.md on GitHub") Updated 40 minutes ago 1 warning ## Skill content [Raw](https://skilld.dev/api/skills-raw/nuxt/ui/nuxt-ui) ## Nuxt UI Vue component library built on [Reka UI](https://reka-ui.com/) + [Tailwind CSS](https://tailwindcss.com/) + [Tailwind Variants](https://www.tailwind-variants.org/). Works with Nuxt, Vue (Vite), Laravel (Vite + Inertia), and AdonisJS (Vite + Inertia). ### MCP Server For component API details (props, slots, events, full documentation, examples), use the [Nuxt UI MCP server](https://ui.nuxt.com/docs/getting-started/ai/mcp). 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/mcp ``` Key MCP tools: - `search-components` — find components by name, category, or intent (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}` names - `get-component` — full component documentation with usage examples - `get-component-metadata` — props, slots, events (lightweight, no docs content) - `get-example` — real-world code examples When 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**. ### Core rules (always apply) 1. **Always wrap the app in `UApp`** — required for toasts, tooltips, and programmatic overlays. Accepts a `locale` prop for i18n. 2. **Always use semantic colors** — `text-default`, `bg-elevated`, `border-muted`, etc. Never use raw Tailwind palette colors like `text-gray-500`. 3. **Read generated theme files for slot names** — Nuxt: `.nuxt/ui/.ts`, Vue: `node_modules/.nuxt-ui/ui/.ts`. These show every slot, variant, and default class for any component. 4. **Override priority** (highest wins): `ui` prop / `class` prop → global config → theme defaults. 5. **Icons use `i-{collection}-{name}` format** — `lucide` is the default collection. Use the MCP `search-icons` tool to find icons, or browse at [icones.js.org](https://icones.js.org). ### How to use this skill Based on the task, load the relevant reference files **before writing any code**. Don't load everything — only what's needed. #### Reference files **Guidelines** — design decisions and conventions: - [design-system](https://skilld.dev/gh/nuxt/ui/nuxt-ui/-/references/guidelines/design-system.md) — semantic colors, theming, brand customization, variants, the `ui` prop - [component-selection](https://skilld.dev/gh/nuxt/ui/nuxt-ui/-/references/guidelines/component-selection.md) — decision matrices: when to use Modal vs Slideover, Select vs SelectMenu, Toast vs Alert, etc. - [conventions](https://skilld.dev/gh/nuxt/ui/nuxt-ui/-/references/guidelines/conventions.md) — coding patterns, slot naming, items arrays, composables, keyboard shortcuts - [forms](https://skilld.dev/gh/nuxt/ui/nuxt-ui/-/references/guidelines/forms.md) — form validation, field layout, error handling, Standard Schema **Layouts** — full page structure patterns: - [landing](https://skilld.dev/gh/nuxt/ui/nuxt-ui/-/references/layouts/landing.md) — landing pages, blog, changelog, pricing - [dashboard](https://skilld.dev/gh/nuxt/ui/nuxt-ui/-/references/layouts/dashboard.md) — admin UI with sidebar and panels - [docs](https://skilld.dev/gh/nuxt/ui/nuxt-ui/-/references/layouts/docs.md) — documentation sites with navigation and TOC - [chat](https://skilld.dev/gh/nuxt/ui/nuxt-ui/-/references/layouts/chat.md) — AI chat with Vercel AI SDK - [editor](https://skilld.dev/gh/nuxt/ui/nuxt-ui/-/references/layouts/editor.md) — rich text editor with toolbars **Recipes** — complete patterns for common tasks: - [data-tables](https://skilld.dev/gh/nuxt/ui/nuxt-ui/-/references/recipes/data-tables.md) — tables with filters, pagination, sorting, selection - [auth](https://skilld.dev/gh/nuxt/ui/nuxt-ui/-/references/recipes/auth.md) — login, signup, forgot password forms - [overlays](https://skilld.dev/gh/nuxt/ui/nuxt-ui/-/references/recipes/overlays.md) — modals, slideovers, drawers, command palette - [navigation](https://skilld.dev/gh/nuxt/ui/nuxt-ui/-/references/recipes/navigation.md) — headers, sidebars, breadcrumbs, tabs **Quick reference:** - [components](https://skilld.dev/gh/nuxt/ui/nuxt-ui/-/references/components.md) — categorized component index for finding the right component name #### Routing table | 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 | ### Installation #### Nuxt ``` 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"; ``` ``` ``` #### Vue (Vite) ``` 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"; ``` ``` ``` > Add `class="isolate"` to your root `
` in `index.html`. For Inertia: use `ui({ router: 'inertia' })` in `vite.config.ts`. Source: [SKILL.md on GitHub](https://github.com/nuxt/ui/blob/4fdccd333b8a0c6956e1c245cfddf781f13c81a0/skills/nuxt-ui/SKILL.md) ## What it does Provides 125+ accessible Vue components built on Tailwind CSS and Reka UI, with semantic color tokens and theming support. Use for building interfaces in Nuxt, Vue, Laravel Inertia, or AdonisJS — forms, dashboards, documentation sites, and chat UIs. Generated from the current SKILL.md. ## Frequently asked
Does this work with Vue outside of Nuxt? Yes. @nuxt/ui v4 works with Vue (Vite), Laravel (Vite + Inertia), and AdonisJS (Vite + Inertia). Installation differs slightly but uses the same component library.
How do I find out what props and slots a component accepts? Use the Nuxt UI MCP server with the \`get\_component\` tool for full documentation, or \`get\_component\_metadata\` for a lightweight props/slots/events reference. The skill also points you to generated theme files in \`.nuxt/ui/<component>.ts\`.
Can I customize the theme to match my brand? Yes. The skill includes a design-system reference that covers semantic colors, theming, and brand customization. Components use semantic color names like \`text-default\` and \`bg-elevated\` rather than raw Tailwind colors.
What if I need help building a specific layout like a dashboard or docs site? The skill includes full layout references for dashboards, docs sites, landing pages, chat interfaces, and editors. Load the relevant reference file before coding to follow the established patterns.
Does this include form validation? Yes. The forms reference covers validation, field layout, error handling, and Standard Schema integration for both client and server-side validation.
Generated from the current SKILL.md. These answers refresh after source changes.