Skills

Nuxt UI: add the component library in v4 and have an Agent follow AGENTS.md

For people who want this Vue UI in a Nuxt project, or want a coding Agent to change components by the repo rules. The current page is the v4 branch; do not mix it with v3/v2.

Official source · Nuxt UI

Install

pnpm add @nuxt/ui tailwindcss

Who it's for

If you are building a Nuxt interface and want ready-made Vue UI instead of assembling accessible components from scratch, this repository fits better. It combines Reka UI, Tailwind CSS, and Tailwind Variants to build complex, accessible, high-performance interfaces. Related upstreams are

https://reka-ui.com/

https://tailwindcss.com/

https://www.tailwind-variants.org/

You need a Nuxt project that can change nuxt.config, and you accept installing dependencies with pnpm. People who only want a coding Agent to help change components, themes, or tests should first read the repository's AGENTS.md. It does not write one Agent product as the only supported target; it only says it will be picked up automatically by all AI coding agents.

First try in 3 minutes

The official install command is written on the page as this one:

pnpm add @nuxt/ui tailwindcss

This changes project dependencies; it is not a read-only look. First confirm the current directory is your Nuxt app and this machine has pnpm, then run it. After install, write the module into the config. The excerpt gives:

export default defineNuxtConfig({
  modules: ['@nuxt/ui'],
  css: ['~/assets/css/main.css']
})

It requires the CSS entry ~/assets/css/main.css to exist, but it does not write that file's contents. Do not invent @import or component usage. Success signal: the dependency is installed, modules shows @nuxt/ui, and the app starts the way you already start it without an error from this module being missing. If the Agent starts adding button samples that do not appear in the excerpt, or changing theme tokens, stop first.

Lower-risk check: open

https://github.com/nuxt/ui/blob/v4/AGENTS.md

Have the Agent only explain component structure or theme conventions, and not change files yet.

Use cases

Case 1: Add v4 to a Nuxt app. Install @nuxt/ui and tailwindcss with the pnpm command above, then register the @nuxt/ui module and point at ~/assets/css/main.css. The page writes no npm/yarn equivalents and does not write how to import the first component in a Vue single-file. So you can confirm only these two steps: dependency and module registration. What to write in the CSS file, and which component to put on a page, are outside this excerpt; you must look up local docs or source you already have, and must not pretend this text already gave them.

Case 2: Have a coding Agent work by the repository rules. AGENTS.md gives contribution guidance for AI assistants, covering component structure, theme patterns, test conventions, and docs guidance, and it is picked up automatically. The task should be a read-only compare, for example "by AGENTS.md, check whether this component's structure/theme/tests drift". It writes no concrete test commands and no way to publish a docs site. So the first time, do not have the Agent rewrite docs in bulk or add test files; first have it point to the supporting paragraphs and the paths it would change.

Boundaries

What you are looking at now is the v4 branch. Nuxt UI v3 is at

https://github.com/nuxt/ui/tree/v3

v2 is at

https://github.com/nuxt/ui/tree/v2

Do not apply old-branch module names, directories, or theme writing to v4. The page writes no v4-to-v3 migration table.

The install path is pnpm add @nuxt/ui tailwindcss. Do not put another package-manager command beside it. Reka UI and Tailwind Variants are written as sources of capability, not a second installer.

The first time, stop at installing dependencies, registering the module, or reading AGENTS.md only. Any change to component source, added tests, theme edits, or rewriting the CSS entry must first have the Agent restate the files it will change; you confirm, then continue.