--- title: "nuxt/ui" description: "The Intuitive Vue UI Library powered by Reka UI & Tailwind CSS." source: https://github.com/nuxt/ui ref: v4 license: MIT licenseName: "MIT License" canonical: https://skillsdocs.com/nuxt/ui base: https://github.com/nuxt/ui/blob/v4/ chapters: 1 inlined: 1 withheld: 0 words: 461 updated: 2026-08-11T15:57:07Z generator: "Skills Docs" --- > **nuxt/ui** — every Agent Skill in this repository, inlined verbatim. > > Canonical HTML: https://skillsdocs.com/nuxt/ui > Per-chapter Markdown: https://skillsdocs.com/nuxt/ui/.md > Machine manifest: https://skillsdocs.com/nuxt/ui/.well-known/agent-skills/index.json > JSON: https://skillsdocs.com/api/v1/books/nuxt/ui > Install: `npx skills add nuxt/ui` > Upstream: https://github.com/nuxt/ui @ `v4` > Licence: MIT > > Content is mirrored from GitHub and © its authors, served unmodified. Takedown: https://github.com/DreambaseAI/skillsdocs/issues/new?labels=takedown&title=Takedown+request # nuxt/ui The Intuitive Vue UI Library powered by Reka UI & Tailwind CSS. - **Chapters:** 1 - **Inlined:** 1 (licence detected) - **Words:** 461 - **Reading time:** 2 min - **Stars:** 6,826 ## Table of contents 1. [nuxt-ui](https://skillsdocs.com/nuxt/ui/nuxt-ui.md) — Build UIs with @nuxt/ui v4 — 125+ accessible Vue components with Tailwind CSS theming. Use when creating interfaces, customizing themes to match a brand, build… ## Front matter _The repository README, verbatim except that relative links are resolved against https://github.com/nuxt/ui/blob/v4/._ Nuxt UI # Nuxt UI [![npm version][npm-version-src]][npm-version-href] [![npm downloads][npm-downloads-src]][npm-downloads-href] [![License][license-src]][license-href] [![Nuxt][nuxt-src]][nuxt-href] Nuxt UI harnesses the combined strengths of [Reka UI](https://reka-ui.com/), [Tailwind CSS](https://tailwindcss.com/), and [Tailwind Variants](https://www.tailwind-variants.org/) to offer developers an unparalleled set of tools for creating sophisticated, accessible, and highly performant user interfaces. > [!NOTE] > You are on the `v4` branch, check out the [v3 branch](https://github.com/nuxt/ui/tree/v3) for Nuxt UI v3 or [v2 branch](https://github.com/nuxt/ui/tree/v2) for Nuxt UI v2. ## Documentation Visit https://ui.nuxt.com to explore the documentation. ## Templates Kickstart your project with one of our ready-to-use Nuxt UI templates or follow the [Installation Guide](https://ui.nuxt.com/getting-started/installation/nuxt). Explore all available templates on the [official templates page](https://ui.nuxt.com/templates). - [Starter](https://github.com/nuxt-ui-templates/starter) — A minimal template to get started with Nuxt UI. - [Landing](https://github.com/nuxt-ui-templates/landing) — A modern landing page template powered by Nuxt Content. - [Docs](https://github.com/nuxt-ui-templates/docs) — A documentation template powered by Nuxt Content. - [SaaS](https://github.com/nuxt-ui-templates/saas) — A SaaS template with landing, pricing, docs and blog powered by Nuxt Content. - [Dashboard](https://github.com/nuxt-ui-templates/dashboard) — A dashboard template with multi-column layout. - [Chat](https://github.com/nuxt-ui-templates/chat) — An AI chatbot template with GitHub authentication and persistent chat history powered by Vercel AI SDK. - [Portfolio](https://github.com/nuxt-ui-templates/portfolio) — A sleek portfolio template to showcase your work, skills and blog powered by Nuxt Content. - [Changelog](https://github.com/nuxt-ui-templates/changelog) — A changelog template to display your repository releases notes from GitHub powered by Nuxt MDC. - [Editor](https://github.com/nuxt-ui-templates/editor) — A rich text editor template powered by TipTap with support for markdown, HTML, and JSON content types. ## Installation ```bash [pnpm] pnpm add @nuxt/ui tailwindcss ``` ```bash [yarn] yarn add @nuxt/ui tailwindcss ``` ```bash [npm] npm install @nuxt/ui tailwindcss ``` ```bash [bun] bun add @nuxt/ui tailwindcss ``` ### Nuxt 1. Add the Nuxt UI module in your `nuxt.config.ts`: ```ts [nuxt.config.ts] export default defineNuxtConfig({ modules: ['@nuxt/ui'], css: ['~/assets/css/main.css'] }) ``` 2. Import Tailwind CSS and Nuxt UI in your CSS: ```css [app/assets/css/main.css] @import "tailwindcss"; @import "@nuxt/ui"; ``` Learn more in the [installation guide](https://ui.nuxt.com/docs/getting-started/installation/nuxt). ### Vue 1. Add the Nuxt UI Vite plugin in your `vite.config.ts`: ```ts [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() ] }) ``` 2. Use the Nuxt UI Vue plugin in your `main.ts`: ```ts [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') ``` 3. Import Tailwind CSS and Nuxt UI in your CSS: ```css [src/assets/css/main.css] @import "tailwindcss"; @import "@nuxt/ui"; ``` Learn more in the [installation guide](https://ui.nuxt.com/docs/getting-started/installation/vue). ## Contribution Thank you for considering contributing to Nuxt UI. Here are a few ways you can get involved: - Reporting Bugs: If you come across any bugs or issues, please check out the reporting bugs guide to learn how to submit a bug report. - Suggestions: Have any thoughts to enhance Nuxt UI? We'd love to hear them! Check out the [contribution guide](https://ui.nuxt.com/docs/getting-started/contribution) to share your suggestions. > [!TIP] > We provide contributing guidelines through [`AGENTS.md`](https://github.com/nuxt/ui/blob/v4/AGENTS.md) for AI assistants to help you contribute to Nuxt UI. It is automatically picked up by all AI coding agents and guides through component structure, theming patterns, testing conventions, and documentation guidelines. ## Local Development Follow the docs to [set up your local development environment](https://ui.nuxt.com/docs/getting-started/contribution#local-development) and contribute. ## Credits - [nuxt/nuxt](https://github.com/nuxt/nuxt) - [nuxt/icon](https://github.com/nuxt/icon) - [nuxt/fonts](https://github.com/nuxt/fonts) - [nuxt-modules/color-mode](https://github.com/nuxt-modules/color-mode) - [unovue/reka-ui](https://github.com/unovue/reka-ui) - [tailwindlabs/tailwindcss](https://github.com/tailwindlabs/tailwindcss) - [vueuse/vueuse](https://github.com/vueuse/vueuse) ## License Licensed under the [MIT license](https://github.com/nuxt/ui/blob/v4/LICENSE.md). [npm-version-src]: https://img.shields.io/npm/v/@nuxt/ui.svg?style=flat&colorA=18181B&colorB=28CF8D [npm-version-href]: https://npmjs.com/package/@nuxt/ui [npm-downloads-src]: https://img.shields.io/npm/dm/@nuxt/ui.svg?style=flat&colorA=18181B&colorB=28CF8D [npm-downloads-href]: https://npm.chart.dev/@nuxt/ui [license-src]: https://img.shields.io/github/license/nuxt/ui.svg?style=flat&colorA=18181B&colorB=28CF8D [license-href]: https://github.com/nuxt/ui/blob/v4/LICENSE.md [nuxt-src]: https://img.shields.io/badge/Nuxt-18181B?logo=nuxt [nuxt-href]: https://nuxt.com --- ## 1. nuxt-ui - **Source:** https://github.com/nuxt/ui/blob/v4/skills/nuxt-ui/SKILL.md - **Raw:** https://raw.githubusercontent.com/nuxt/ui/v4/skills/nuxt-ui/SKILL.md - **Markdown:** https://skillsdocs.com/nuxt/ui/nuxt-ui.md - **Licence:** MIT — https://spdx.org/licenses/MIT.html Bundled files (14), referenced from this skill's directory: - `references/components.md` — https://raw.githubusercontent.com/nuxt/ui/v4/skills/nuxt-ui/references/components.md - `references/guidelines/component-selection.md` — https://raw.githubusercontent.com/nuxt/ui/v4/skills/nuxt-ui/references/guidelines/component-selection.md - `references/guidelines/conventions.md` — https://raw.githubusercontent.com/nuxt/ui/v4/skills/nuxt-ui/references/guidelines/conventions.md - `references/guidelines/design-system.md` — https://raw.githubusercontent.com/nuxt/ui/v4/skills/nuxt-ui/references/guidelines/design-system.md - `references/guidelines/forms.md` — https://raw.githubusercontent.com/nuxt/ui/v4/skills/nuxt-ui/references/guidelines/forms.md - `references/layouts/chat.md` — https://raw.githubusercontent.com/nuxt/ui/v4/skills/nuxt-ui/references/layouts/chat.md - `references/layouts/dashboard.md` — https://raw.githubusercontent.com/nuxt/ui/v4/skills/nuxt-ui/references/layouts/dashboard.md - `references/layouts/docs.md` — https://raw.githubusercontent.com/nuxt/ui/v4/skills/nuxt-ui/references/layouts/docs.md - `references/layouts/editor.md` — https://raw.githubusercontent.com/nuxt/ui/v4/skills/nuxt-ui/references/layouts/editor.md - `references/layouts/landing.md` — https://raw.githubusercontent.com/nuxt/ui/v4/skills/nuxt-ui/references/layouts/landing.md - `references/recipes/auth.md` — https://raw.githubusercontent.com/nuxt/ui/v4/skills/nuxt-ui/references/recipes/auth.md - `references/recipes/data-tables.md` — https://raw.githubusercontent.com/nuxt/ui/v4/skills/nuxt-ui/references/recipes/data-tables.md - `references/recipes/navigation.md` — https://raw.githubusercontent.com/nuxt/ui/v4/skills/nuxt-ui/references/recipes/navigation.md - `references/recipes/overlays.md` — https://raw.githubusercontent.com/nuxt/ui/v4/skills/nuxt-ui/references/recipes/overlays.md --- name: nuxt-ui description: 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. --- # 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`: ```json { "mcpServers": { "nuxt-ui": { "type": "http", "url": "https://ui.nuxt.com/mcp" } } } ``` **Claude Code**: ```bash claude mcp add --transport http nuxt-ui https://ui.nuxt.com/mcp ``` 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}` 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](references/guidelines/design-system.md) — semantic colors, theming, brand customization, variants, the `ui` prop - [component-selection](references/guidelines/component-selection.md) — decision matrices: when to use Modal vs Slideover, Select vs SelectMenu, Toast vs Alert, etc. - [conventions](references/guidelines/conventions.md) — coding patterns, slot naming, items arrays, composables, keyboard shortcuts - [forms](references/guidelines/forms.md) — form validation, field layout, error handling, Standard Schema **Layouts** — full page structure patterns: - [landing](references/layouts/landing.md) — landing pages, blog, changelog, pricing - [dashboard](references/layouts/dashboard.md) — admin UI with sidebar and panels - [docs](references/layouts/docs.md) — documentation sites with navigation and TOC - [chat](references/layouts/chat.md) — AI chat with Vercel AI SDK - [editor](references/layouts/editor.md) — rich text editor with toolbars **Recipes** — complete patterns for common tasks: - [data-tables](references/recipes/data-tables.md) — tables with filters, pagination, sorting, selection - [auth](references/recipes/auth.md) — login, signup, forgot password forms - [overlays](references/recipes/overlays.md) — modals, slideovers, drawers, command palette - [navigation](references/recipes/navigation.md) — headers, sidebars, breadcrumbs, tabs **Quick reference:** - [components](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 ```bash pnpm add @nuxt/ui tailwindcss ``` ```ts // nuxt.config.ts export default defineNuxtConfig({ modules: ['@nuxt/ui'], css: ['~/assets/css/main.css'] }) ``` ```css /* app/assets/css/main.css */ @import "tailwindcss"; @import "@nuxt/ui"; ``` ```vue ``` ### Vue (Vite) ```bash pnpm add @nuxt/ui tailwindcss ``` ```ts // 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() ] }) ``` ```ts // 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') ``` ```css /* src/assets/css/main.css */ @import "tailwindcss"; @import "@nuxt/ui"; ``` ```vue ``` > Add `class="isolate"` to your root `
` in `index.html`. > For Inertia: use `ui({ router: 'inertia' })` in `vite.config.ts`.