@nuxt/ui

Nuxt UI

Nuxt UI harnesses the combined strengths of Reka UI, Tailwind CSS, and Tailwind Variants to offer developers an unparalleled set of tools for creating sophisticated, accessible, and highly performant user interfaces.

[!NOTE] You are on the v3 development branch, check out the v2 branch for Nuxt UI v2.

Documentation

Visit https://ui.nuxt.com to explore the documentation.

Installation

pnpm add @nuxt/ui

yarn add @nuxt/ui

npm install @nuxt/ui

bun add @nuxt/ui

Nuxt

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

export default defineNuxtConfig({
  modules: ['@nuxt/ui']
})

• Import Tailwind CSS and Nuxt UI in your CSS:

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

Learn more in the installation guide.

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

Credits

• nuxt/nuxt
• nuxt/icon
• nuxt/fonts
• nuxt-modules/color-mode
• unovue/reka-ui
• tailwindlabs/tailwindcss
• vueuse/vueuse

License

Licensed under the MIT license.

Changelog

3.0.2 (2025-03-28)

Features

• Calendar: allow year and month buttons styling (#3672) (4a2b77d)
• locale: add Armenian language (#3664) (c76f590)
• Table: add empty prop (afff54f)

Bug Fixes

• Avatar: proxy $attrs to default slot (#3712) (88f349d)
• Button: use focus:outline-none instead of focus:outline-hidden (c231fe5), closes #3658
• CommandPalette: use group.id as key (bc61d29)
• components: improve generic types (#3331) (b998354)
• Container: add w-full class (df00149)
• defineLocale/defineShortcuts: remove @__NO_SIDE_EFFECTS__ (82e2665)
• Drawer: remove fadeFromIndex prop proxy (f7604e5)
• Form: clear dirty state after submit (#3692) (3dd88ba)
• FormField: add help to aria-describedby attribute (#3691) (20c3392)
• InputMenu/SelectMenu: empty search results (94b6e52)
• InputMenu: reset searchTerm on update:open (3074632), closes #3620
• Link: handle aria-current like NuxtLink / RouterLink (c531d02)
• Link: prevent active="true" binding on html (d73768b)
• Link: properly pick all aria-* & data-* attrs (ade16b7)
• Link: proxy onClick (370054b), closes #3631
• NavigationMenu: add z-index on viewport (0095d89), closes #3654
• Switch: prevent transition on focus outline (68787b2)
• Table: wrong condition on caption slot (4ebb94c)
• Tabs: remove focus:outline-hidden class (1769d5e)
• types: add missing export for ButtonGroup (#3709) (e7e6745)
• useOverlay: refine open method type to infer close emit return type (#3716) (bd99c2d)
• vue: mock nuxtApp.hooks & useRuntimeHook (23bfeb9)