Skip to content
Roman's notes

Nuxt UI

Nuxt UI is a free, open-source Vue component library for Nuxt and standalone Vue/Vite applications. Version 4 unifies the former free and Pro packages into @nuxt/ui and provides more than 125 accessible components built with Reka UI, Tailwind CSS, and Tailwind Variants.

Why use it

Section titled “Why use it”
  • Production-ready forms, overlays, navigation, tables, dashboards, content, and chat components
  • Accessible primitives with keyboard navigation, focus management, and ARIA attributes
  • Nuxt SSR support plus a Vite plugin for plain Vue, Inertia, and other Vue stacks
  • TypeScript types, auto-imported components and composables, and editor autocomplete
  • CSS-first theming with semantic colors, dark mode, per-component slots, and variants
  • Iconify integration, optimized fonts, localization, templates, and a complete Figma kit

Nuxt installation

Section titled “Nuxt installation”
Terminal window
pnpm add @nuxt/ui tailwindcss

Register the module and stylesheet:

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

Components use the U prefix and are auto-imported:

<template>
  <UCard>
    <UButton label="Create project" icon="i-lucide-plus" />
  </UCard>
</template>

Wrap the application in UApp when using global overlays such as toasts, tooltips, and programmatic modals:

app.vue
<template>
  <UApp>
    <NuxtPage />
  </UApp>
</template>

Standalone Vue installation

Section titled “Standalone Vue installation”

Install the same packages, add @nuxt/ui/vite to vite.config.ts, and register the Vue plugin:

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()],
})
src/main.ts
import './assets/css/main.css'
import { createApp } from 'vue'
import ui from '@nuxt/ui/vue-plugin'
import App from './App.vue'


createApp(App).use(ui).mount('#app')

The CSS file uses the same Tailwind and Nuxt UI imports as the Nuxt setup. The Vite plugin handles component and composable auto-imports and generates their TypeScript declarations.

Theming

Section titled “Theming”

Use semantic design tokens for global branding:

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


:root {
  --ui-primary: var(--ui-color-blue-600);
  --ui-radius: 0.5rem;
}

Use app.config.ts for global component defaults and slot-level overrides:

export default defineAppConfig({
  ui: {
    colors: {
      primary: 'blue',
      neutral: 'slate',
    },
    button: {
      slots: {
        base: 'font-semibold',
      },
    },
  },
})

Individual components accept a ui prop for local styling. For large applications, experimental component detection can generate theme CSS only for the components that are actually used.

Choosing between Vue UI libraries

Section titled “Choosing between Vue UI libraries”
Library Best fit Styling model Ownership
Nuxt UI Nuxt, Vue/Vite, Tailwind-based products and dashboards Themed components with Tailwind Variants Package dependency
Vuetify Material Design applications with broad component coverage Built-in Material theme system Package dependency
shadcn-vue Projects that want complete control over copied component source Tailwind CSS and editable local files Application owns the code

Nuxt UI is the strongest default when a project already uses Nuxt and Tailwind CSS and needs both low-level controls and higher-level application components. Prefer shadcn-vue when editing the component source is more important than receiving coordinated package updates.

Version notes

Section titled “Version notes”

The current release checked on 24 September 2026 is 4.11.2. Nuxt UI v4 is MIT-licensed and includes the components that were previously distributed as Nuxt UI Pro. Nuxt UI 4.6 and newer requires Nuxt 4.1 or later when used through the Nuxt module.

Sources

Section titled “Sources”