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

[!TIP] Looking for more components ? Check out Nuxt UI Pro, a collection of premium Vue components, composables, and utilities built on top of Nuxt UI for faster and more powerful app development.

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.

Contribution

Thank you for considering contributing to Nuxt UI. Here are a few ways you can get involved:

• Reporting Bugs: If you come across any bugs or issues, please check out the reporting bugs guide to learn how to submit a bug report.
• Suggestions: Have any thoughts to enhance Nuxt UI? We'd love to hear them! Check out the contribution guide to share your suggestions.

Local Development

Follow the docs to set up your local development environment and contribute.

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.2.0 (2025-06-25)

⚠ BREAKING CHANGES

• useOverlay: correct spelling of unmount function (#4051)

Features

• Avatar: add chip prop (#4224) (03ac395)
• Carousel: allow customization of active dot color (#4229) (2ee1c5a)
• CommandPalette: handle children in items (#4226) (59c26ec)
• extendLocale: new composable (0f558fc), closes #3729
• Form: expose loading state to default slot (#4247) (ea0c459)
• InputTags: new component (#4261) (54bb228)
• locale: add Luxembourgish language (#4264) (43cbb94)
• Modal/Slideover: add actions slot (#4358) (8156971)
• Modal/Slideover: add close method in slots (#4219) (5835eb5)
• Select/SelectMenu/Tabs: expose trigger refs (7a2bd4e), closes #4292
• Select/SelectMenu: handle dynamic autofocus (1a4de49), closes #4324
• Table: add body-top / body-bottom slots (#4354) (595fc64)
• Timeline: add reverse prop (#4316) (5170cfd)
• Timeline: new component (#4215) (8017767)

Bug Fixes

• Card/Drawer/Modal: prevent scrollbars overflow (#4368) (c3adc38)
• components: remove default md size on buttons (#4357) (be41aed)
• defineShortcuts: allow meta_- shortcut (#4321) (4e7c1c9)
• Form: conditionally type form data via transform prop (#4188) (37abcc6)
• Form: expose reactive fields (#4386) (1a8feb7)
• InputMenu/SelectMenu: dynamic empty size (ba3c6e8), closes #4377
• InputTags: extend emits interface (8781a07)
• Modal/Slideover: don't emit close:prevent on closeAutoFocus (150b334)
• NavigationMenu: nested accordion context at every level (#4363) (2fa8db6)
• NavigationMenu: set content max-height in horizontal orientation (62bc7b2), closes #4208
• Pagination: match default button size (#4350) (4dd56c8)
• Select/SelectMenu: display falsy values (7df7ee3)
• Select/SelectMenu: prevent empty string display when multiple (483e473)
• SelectMenu: dynamic input size (b0364b9)
• Table: use tr as separator (#4083) (edca3bc)
• Toast: calc height on next tick (3bf5acb), closes #4265
• Toaster: smoother visibility transition for stacked toasts (#4367) (abfd0ed)
• useOverlay: correct spelling of unmount function (#4051) (546df57)
• useOverlay: set props to original props when defaultOpen is set (#4308) (66355ba)
• useOverlay: use original props when not provided to open (#4269) (bf56e15)