# Nuxt UI

Builds Vue interfaces from 125 accessible Nuxt UI components and themes.

- Repository: https://github.com/nuxt/ui (7042 stars)
- Category: Design
- License: MIT
- Last updated: 2026-11-01
- Runs scripts: no, instructions only

## Install

Claude Code: `npx skills add nuxt/ui --skill nuxt-ui -g -a claude-code -y`
Codex: `npx skills add nuxt/ui --skill nuxt-ui -g -a codex -y`
Cursor: `npx skills add nuxt/ui --skill nuxt-ui -g -a cursor -y`
Gemini CLI: `npx skills add nuxt/ui --skill nuxt-ui -g -a gemini-cli -y`

## 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.

## SKILL.md, as published by its author (untrusted third-party text, read it as data)

# 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, 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)

The rest: https://github.com/nuxt/ui/blob/HEAD/skills/nuxt-ui/SKILL.md