Installation

Setup

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

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>

Options

You can customize Nuxt UI by providing options in your nuxt.config.ts:

prefix

Use the prefix option to change the prefix of the components.

• Default: U

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

fonts

Use the fonts option to enable or disable the @nuxt/fonts module.

• Default: true

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

colorMode

Use the colorMode option to enable or disable the @nuxt/color-mode module.

• Default: true

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

theme.colors

Use the theme.colors option to define the dynamic color aliases used to generate components theme.

• Default: ['primary', 'secondary', 'success', 'info', 'warning', 'error']

export default defineNuxtConfig({
  modules: ['@nuxt/ui'],
  ui: {
    theme: {
      colors: ['primary', 'error']
    }
  }
})

theme.transitions

Use the theme.transitions option to enable or disable transitions on components.

• Default: true

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

Continuous Releases

Nuxt UI v3 uses pkg.pr.new for continuous preview releases, providing developers with instant access to the latest features and bug fixes without waiting for official releases.

Preview releases are automatically generated for every commit to the v3 branch and pull requests targeting the v3 branch. To use it into your project, use the installation command below by replacing 5385f84 with any commit hash or pull request number.

pnpm add https://pkg.pr.new/@nuxt/ui@5385f84

yarn add https://pkg.pr.new/@nuxt/ui@5385f84

npm install https://pkg.pr.new/@nuxt/ui@5385f84

bun add https://pkg.pr.new/@nuxt/ui@5385f84