# Nuxt UI v4: a Reka UI and Tailwind CSS component library for Nuxt and plain Vue

> Nuxt UI ships an MIT-licensed component library on top of Reka UI and Tailwind CSS, usable as a Nuxt module or through a Vite plugin in a plain Vue app. The install is two files, and the trade-off is that Tailwind's own configuration disappears behind the module.

**nuxt/ui** — The Intuitive Vue UI Library powered by Reka UI & Tailwind CSS.

- Repository: https://github.com/nuxt/ui
- Website: https://ui.nuxt.com
- Stars: 6,970 · Forks: 1,125
- Language: TypeScript
- License: MIT
- Published: 2026-09-22 · Updated: 2026-09-22 · Language: en
- Canonical page: https://hysenlabs.com/projects/nuxt-ui

## What Nuxt UI is for, and who should reach for it

Nuxt UI is a Vue component library. The README describes it as harnessing Reka UI, Tailwind CSS and Tailwind Variants, which tells you the shape of the thing: Reka UI supplies the unstyled, accessible primitives (dialogs, menus, comboboxes), Tailwind supplies the utility classes, and Tailwind Variants holds the class recipes that turn a primitive into a styled component. If you have ever wired a headless Vue primitive to Tailwind by hand, that assembly step is what this package removes.

The audience is narrow and specific. The README's first install path is a Nuxt module, and the second is a Vite plugin for a plain Vue app, so the project targets Nuxt users first and Vue users second. Nothing in the repository suggests a React, Svelte or Solid build. It is also a Tailwind-first library: the CSS entry point imports both Tailwind and Nuxt UI, so a project that has deliberately chosen a different styling system is not the intended user.

The license is MIT, stated in the README and in the package.json license field, which matters if you are shipping a closed-source product. The package is published on npm as @nuxt/ui, currently at version 4.11.1 according to package.json, with releases v4.11.1, v4.11.0 and v4.10.0 in the recent release list.

## How the Nuxt module and the Vite plugin actually wire up

There are two entry points in the exports map that matter here. The root export resolves to dist/module.mjs with its own style field pointing at dist/runtime/index.css, which is the Nuxt module path. A separate ./vite export resolves to dist/vite.mjs, and a ./vue-plugin export exists for the Vue app path. The repository layout backs this up: there is a src/ directory for the module and runtime code, a docs/ directory, a cli/ directory, and playgrounds/ for exercising the components during development.

The mechanism is a Tailwind v4 style import rather than a JavaScript plugin registration. In both the Nuxt and the Vue setups, the README's CSS file contains two lines: an import of tailwindcss and an import of @nuxt/ui. That means the component styles arrive through the CSS pipeline, not through a config array you extend. If you are coming from Tailwind v3 and expect to add a plugin to a tailwind.config file, this is the part that will surprise you.

On the Nuxt side the module is registered in the modules array of nuxt.config.ts and paired with a css entry. On the Vue side the Vite plugin is added to the plugins array alongside @vitejs/plugin-vue, and a separate Vue plugin from @nuxt/ui/vue-plugin is installed on the app instance with app.use(ui). The Vue path also expects vue-router, since the README's example creates a router and calls app.use(router) before mounting. That is two plugins and a router for a plain Vue app, versus one module entry for Nuxt, and it is the clearest signal of which framework the project is optimized for.

## Installing Nuxt UI in a Nuxt app and rendering a first component

The README gives four package-manager variants for the install. The pnpm one is shown below; yarn, npm and bun equivalents are listed in the README with the same two package names, @nuxt/ui and tailwindcss. Note that Tailwind is a peer you install yourself, not a transitive dependency you get for free.

```bash
pnpm add @nuxt/ui tailwindcss
```

After that, register the module and point Nuxt at a CSS file. The README's nuxt.config.ts example uses exactly these two keys:

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

Then create that CSS file with the two imports. Order matters in the sense that both lines must be present; the README shows Tailwind first.

```css
/* app/assets/css/main.css */
@import "tailwindcss";
@import "@nuxt/ui";
```

Run the dev server after this and the styles should resolve. If the components render unstyled, the first thing to check is that the path in the css array matches the file you actually created, because the module does not create that file for you. The README points to the installation guide at ui.nuxt.com for anything beyond this, and the repository ships ten templates (Starter, Landing, Docs, SaaS, Dashboard, Chat, Portfolio, Changelog, Editor, Calendar) if you would rather start from a working app than from an empty one.

For a plain Vue app the shape changes. The Vite config adds the ui() plugin next to vue(), and main.ts imports the CSS, then installs the Vue plugin:

```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()
  ]
})
```

The Vue entry file then calls app.use(ui) after app.use(router), with the same two-line CSS import in src/assets/css/main.css. If you skip the router, you are departing from the documented example, and the README does not say whether that is supported.

## The Tailwind coupling and the version branches are the real constraints

The most consequential limitation is the one the install steps imply: Nuxt UI assumes Tailwind is your styling layer. The CSS entry imports Tailwind directly, and the library's own description names Tailwind Variants as part of the stack. If your team has standardized on scoped CSS, CSS Modules or a different utility framework, adopting Nuxt UI means adopting Tailwind alongside it. That is not a defect, but it is a decision you cannot defer.

The second constraint is versioning. The default branch is v4, and the README carries an explicit note pointing v3 users to the v3 branch and v2 users to the v2 branch. Those are separate branches, not a compatibility layer. A project on Nuxt UI v2 or v3 that wants v4 is looking at a migration, and the README itself does not describe that migration; it only tells you where the older code lives. If you are mid-project, the cost of moving is something you have to price before upgrading, not after.

The third is the Node floor. The engines field in package.json requires ^20.19.0 or >=22.12.0. A build environment pinned to an older Node 20 patch release will not satisfy that range, and the failure will surface at install or build time rather than as a clear message from the library.

Finally, the module does not generate your CSS file. The README's instructions assume you create app/assets/css/main.css and reference it from the css array. Miss either half and you get unstyled components with no error, which is a quiet failure mode rather than a loud one.

## Nuxt UI against shadcn-vue and PrimeVue

The nearest comparison in the search data is shadcn-vue, and the difference is philosophical rather than cosmetic. shadcn-vue copies component source into your repository, so you own the files and can edit them directly; there is no package to upgrade and no upstream API to track. Nuxt UI is the opposite: you install @nuxt/ui as a dependency, import it, and receive updates through version bumps. You get a maintained surface and a documented module API, and you give up the ability to patch a component in place without forking or overriding it. Which one is right depends on whether you would rather own the code or own the upgrade path.

PrimeVue is the other name people search alongside this project, and the split there is styling philosophy. PrimeVue is a component suite with its own theming system and a long history of enterprise widgets like data tables and schedulers. Nuxt UI is thinner and delegates behaviour to Reka UI while delegating appearance to Tailwind, so the styling vocabulary you already know from Tailwind carries over. If your team lives in Tailwind, Nuxt UI asks less of you; if you need a large widget catalog with its own theme designer, PrimeVue covers ground Nuxt UI does not claim to.

Vuetify is the third comparison point, and it is the furthest away. Vuetify implements Material Design with its own grid and its own component API, largely independent of Tailwind. Choosing between Nuxt UI and Vuetify is closer to choosing between Tailwind and Material than choosing between two component libraries.

One more distinction worth stating plainly: Nuxt UI Pro appears in the search data, but this repository is MIT-licensed and the README documents no paid tier. Treat the free and Pro distinction as something to verify on the project's own site, not something this repository settles.

## Maintenance, releases and what the MIT license leaves you responsible for

The repository is not archived, and the last push was on 2026-09-21. The release cadence visible in the recent release list is roughly monthly: v4.10.0 on 2026-07-16, v4.11.0 on 2026-08-21, v4.11.1 on 2026-09-07. That is a minor release every few weeks with patch releases in between, which is the cadence you plan around if you pin a version. Pinning is the practical move; floating on a caret range means absorbing minor releases on the library's schedule rather than yours.

The upgrade cost has two components. The first is the version branch: v4 is the default branch, and v3 and v2 live on their own branches, so a major upgrade is a branch switch with no documented compatibility shim in the README. The second is the Tailwind dependency. Because the CSS entry imports both tailwindcss and @nuxt/ui, a Tailwind major version change reaches you through the same file, and the README does not document which Tailwind versions the current release supports. That is a gap worth checking against the docs site before you upgrade either package.

The MIT license is permissive. It permits commercial and closed-source use, and the README and package.json both state it. This is not legal advice, and if your organization has a policy on dependency licenses, the file to read is LICENSE.md at the repository root. What MIT does not give you is any support commitment: there is no SLA in the repository, and the contribution guide is the documented path for bug reports.

## Conclusion

Adopt Nuxt UI if you are already on Nuxt 3 or 4, want accessible primitives wired to Tailwind without assembling them yourself, and can accept theming through the module's CSS entry rather than a tailwind.config file. Skip it if your app is not Vue, or if you need a component library that does not assume Tailwind is the styling layer. Before committing, check that your Node version satisfies the engines field (^20.19.0 or >=22.12.0), confirm the @import "@nuxt/ui" line resolves in your CSS entry, and read the v4 branch notes if you are migrating from v3 or v2, since the README points those users at separate branches.

## FAQ

### Is Nuxt UI free?

The repository is licensed under MIT, stated in both the README and the package.json license field, and the package is published on npm as @nuxt/ui. Nothing in the README documents a paid tier for this repository.

### How to install Nuxt UI?

Install @nuxt/ui and tailwindcss with your package manager, add '@nuxt/ui' to the modules array in nuxt.config.ts, point the css key at a stylesheet, and put @import "tailwindcss" and @import "@nuxt/ui" in that file. For a plain Vue app the README instead uses the Vite plugin from @nuxt/ui/vite plus the Vue plugin from @nuxt/ui/vue-plugin.

### Does Nuxt UI use Tailwind?

Yes. The README describes the library as built on Reka UI, Tailwind CSS and Tailwind Variants, and both install paths require a CSS file that imports tailwindcss before importing @nuxt/ui.

### What is Nuxt UI?

It is a Vue component library distributed as the npm package @nuxt/ui, usable as a Nuxt module or, for plain Vue apps, through a Vite plugin and a Vue plugin. It combines Reka UI primitives with Tailwind CSS styling.

### How do you use Nuxt UI?

Register the module in nuxt.config.ts, import tailwindcss and @nuxt/ui in your CSS entry, then use the components in your templates; the README's Vue path instead installs the Vite plugin and the Vue plugin in main.ts.

### Is Nuxt UI good?

The repository is MIT-licensed, not archived, and had its last push on 2026-09-21, with minor releases roughly monthly through 2026. Whether it suits you depends on whether Tailwind is already your styling layer, since the CSS entry imports Tailwind directly.

## Sources

- [License: MIT](https://github.com/nuxt/ui/blob/v4/LICENSE)
- [nuxt/ui on GitHub](https://github.com/nuxt/ui)
- [Project website](https://ui.nuxt.com)
- [README](https://github.com/nuxt/ui/blob/v4/README.md)
- [Releases](https://github.com/nuxt/ui/releases)

---

Hysen Labs editorial analysis, written from the project's own repository and release notes. Cite the canonical page: https://hysenlabs.com/projects/nuxt-ui