Nuxt UI

We're thrilled to introduce Nuxt UI v3, a significant upgrade to our UI library that delivers extensive improvements and robust new capabilities. This major update harnesses the combined strengths of Reka UI, Tailwind CSS v4, and Tailwind Variants to offer developers an unparalleled set of tools for creating sophisticated, accessible, and highly performant user interfaces.

Visit https://ui3.nuxt.dev to explore the documentation.

pnpm add @nuxt/ui@next

yarn add @nuxt/ui@next

npm install @nuxt/ui@next

bun add @nuxt/ui@next

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

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

2. Import Tailwind CSS and Nuxt UI in your CSS:

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

Learn more in the installation guide.

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

2. Use the Nuxt UI Vue plugin in your main.ts:

import { createApp } from 'vue'
import ui from '@nuxt/ui/vue-plugin'
import App from './App.vue'

const app = createApp(App)

app.use(ui)

app.mount('#app')

3. Import Tailwind CSS and Nuxt UI in your CSS:

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

Learn more in the installation guide.

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

Licensed under the MIT license.