Repo No. 12Nuxt · Updated 6 November 2026 · In print

Skills Docs · No. 12

Nuxt

nuxt / ui

The Intuitive Vue UI Library powered by Reka UI & Tailwind CSS.

Start reading — 2 min

1 skill461 words

Inside this issue

1 — Install

$ npx skills add nuxt/ui

MIT7.1k stars461 wordsUpdated 6 November 2026

2 — Skills

1 skill · 2 minutes

Nuxt UIBuild UIs with @nuxt/ui v4 — 125+ accessible Vue components with Tailwind CSS theming.2 min

Skills Docs · Repo No. 12Whole repo as markdown

Provenance

Typeset in this issue’s own colours, resolved from the owner’s published design.md.

Front matter

From the README

Nuxt UI

(opens in a new tab) (opens in a new tab) (opens in a new tab) (opens in a new tab)

Nuxt UI is a library of accessible, typed Vue (opens in a new tab) components built on Reka UI (opens in a new tab), Tailwind CSS (opens in a new tab) and Tailwind Variants (opens in a new tab). It works as a module in Nuxt (opens in a new tab) and as a Vite (opens in a new tab) plugin in plain Vue apps.

[!NOTE] You are on the v4 branch. Check out the v3 branch (opens in a new tab) for Nuxt UI v3 or the v2 branch (opens in a new tab) for Nuxt UI v2.

Documentation

Visit https://ui.nuxt.com (opens in a new tab) to explore the documentation.

Templates

Start your project from one of the Nuxt UI templates below, or browse them all on the templates page (opens in a new tab).

Starter (opens in a new tab): A minimal template to get started with Nuxt UI.
Landing (opens in a new tab): A landing page template powered by Nuxt Content.
Docs (opens in a new tab): A documentation template powered by Nuxt Content.
SaaS (opens in a new tab): A SaaS template with landing, pricing, docs and blog powered by Nuxt Content.
Dashboard (opens in a new tab): A dashboard template with multi-column layout.
Chat (opens in a new tab): An AI chatbot template with GitHub authentication and persistent chat history powered by Vercel AI SDK.
Portfolio (opens in a new tab): A portfolio template to showcase your work, skills and blog powered by Nuxt Content.
Changelog (opens in a new tab): A changelog template to display your repository release notes from GitHub powered by Nuxt MDC.
Editor (opens in a new tab): A rich text editor template powered by TipTap with support for markdown, HTML, and JSON content types.
Calendar (opens in a new tab): An Apple Calendar inspired template with day, week and month views, drag and drop and optimistic updates.

Installation

pnpm add @nuxt/ui tailwindcss

yarn add @nuxt/ui tailwindcss

npm install @nuxt/ui tailwindcss

bun add @nuxt/ui tailwindcss

Nuxt

Add the Nuxt UI module in your nuxt.config.ts:

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

Import Tailwind CSS and Nuxt UI in your CSS:

@import "tailwindcss";
@import "@nuxt/ui";

Learn more in the installation guide (opens in a new tab).

Vue

Add the Nuxt UI Vite plugin in your 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()
  ]
})

Use the Nuxt UI Vue plugin in your 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')

Import Tailwind CSS and Nuxt UI in your CSS:

@import "tailwindcss";
@import "@nuxt/ui";

Learn more in the installation guide (opens in a new tab).

Contribution

Found a bug? Open an issue (opens in a new tab) with a reproduction. Questions and ideas go in Discussions (opens in a new tab).

Before opening a pull request, read the contribution guide (opens in a new tab) and set up your local development environment (opens in a new tab).

[!TIP] AGENTS.md (opens in a new tab) gives AI coding agents the component structure, theming patterns, testing conventions and documentation guidelines they need to contribute. Agents that support it load it automatically.

License

Licensed under the MIT license (opens in a new tab).

Colophon

How this issue was made

Source

github.com/nuxt/ui, branch v4, last pushed 6 November 2026.

Licence

MIT — the text of every skill is reproduced unmodified, frontmatter included, under the upstream licence.

Discovery

1 skill found by walking the repository tree for SKILL.md, not by matching a directory convention. One layout observed: skills/*/SKILL.md.

Issue colours

Resolved from the owner’s published design.md — hue 156°, chroma 0.190. Two accent tones are generated per issue and each is proven against its own ground before it ships: a single accent that passes AA on both light and dark paper is arithmetically impossible.

Typefaces

Display: Outfit is not a face we ship; the reader's own choice is used.

We never load a typeface at request time from a third-party origin, so a brand face we do not already self-host is substituted rather than fetched.

Heading repairs

1 repair applied to the front matter so the document has one h1 and no skipped levels:

Shifted “9 headings” from h1 to h2 so the skill title is the only h1.

Spec compliance

Every skill satisfies the Agent Skills specification’s frontmatter rules.

Images

Images inside a skill come from the upstream repository. Where the author gave no alternative text we mark the image decorative rather than inventing a description — a plausible caption we made up is worse than none for the reader who depends on it.

Signal

Install counts come from skills.sh. They measure downloads, not quality, and an unranked repository is not an unread one.

Agent surfaces

The whole issue is available as one markdown document at /nuxt/ui.md, and each skill at its own .md URL.

Publication

Set by Skills Docs from the source repository. Body text is Literata at the reader’s chosen size and measure; code is Geist Mono. Nothing on this page was written by us except this paragraph.

Contents

Nuxt UI

(opens in a new tab) (opens in a new tab) (opens in a new tab) (opens in a new tab)

[!NOTE] You are on the v4 branch. Check out the v3 branch (opens in a new tab) for Nuxt UI v3 or the v2 branch (opens in a new tab) for Nuxt UI v2.

Documentation

Visit https://ui.nuxt.com (opens in a new tab) to explore the documentation.

Templates

Start your project from one of the Nuxt UI templates below, or browse them all on the templates page (opens in a new tab).

Starter (opens in a new tab): A minimal template to get started with Nuxt UI.
Landing (opens in a new tab): A landing page template powered by Nuxt Content.
Docs (opens in a new tab): A documentation template powered by Nuxt Content.
SaaS (opens in a new tab): A SaaS template with landing, pricing, docs and blog powered by Nuxt Content.
Dashboard (opens in a new tab): A dashboard template with multi-column layout.
Chat (opens in a new tab): An AI chatbot template with GitHub authentication and persistent chat history powered by Vercel AI SDK.
Portfolio (opens in a new tab): A portfolio template to showcase your work, skills and blog powered by Nuxt Content.
Changelog (opens in a new tab): A changelog template to display your repository release notes from GitHub powered by Nuxt MDC.
Editor (opens in a new tab): A rich text editor template powered by TipTap with support for markdown, HTML, and JSON content types.
Calendar (opens in a new tab): An Apple Calendar inspired template with day, week and month views, drag and drop and optimistic updates.

Installation

pnpm add @nuxt/ui tailwindcss

yarn add @nuxt/ui tailwindcss

npm install @nuxt/ui tailwindcss

bun add @nuxt/ui tailwindcss

Nuxt

Add the Nuxt UI module in your nuxt.config.ts:

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

Import Tailwind CSS and Nuxt UI in your CSS:

@import "tailwindcss";
@import "@nuxt/ui";

Learn more in the installation guide (opens in a new tab).

Vue

Add the Nuxt UI Vite plugin in your 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()
  ]
})

Use the Nuxt UI Vue plugin in your 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')

Import Tailwind CSS and Nuxt UI in your CSS:

@import "tailwindcss";
@import "@nuxt/ui";

Learn more in the installation guide (opens in a new tab).

Contribution

Found a bug? Open an issue (opens in a new tab) with a reproduction. Questions and ideas go in Discussions (opens in a new tab).

Before opening a pull request, read the contribution guide (opens in a new tab) and set up your local development environment (opens in a new tab).

[!TIP] AGENTS.md (opens in a new tab) gives AI coding agents the component structure, theming patterns, testing conventions and documentation guidelines they need to contribute. Agents that support it load it automatically.

Credits

License

Licensed under the MIT license (opens in a new tab).