Nuxt UI v3

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 Radix Vue, Tailwind CSS v4, and Tailwind Variants to offer developers an unparalleled set of tools for creating sophisticated, accessible, and highly performant user interfaces.

Installation

1. Install the Nuxt UI v3 alpha package:

pnpm add @nuxt/ui@next

yarn add @nuxt/ui@next

npm install @nuxt/ui@next

bun add @nuxt/ui@next

Warning

Make sure you have typescript installed in your dev dependencies.

2. Register the Nuxt UI module in your nuxt.config.ts:

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

3. Import Tailwind CSS and Nuxt UI in your app.vue or CSS:

<style>
@import "tailwindcss";
@import "@nuxt/ui";
</style>

Documentation

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

Credits

• nuxt/nuxt
• nuxt/icon
• nuxt/fonts
• nuxt-modules/color-mode
• radix-vue/radix-vue
• tailwindlabs/tailwindcss
• vueuse/vueuse

License

Licensed under the MIT license.