ui/docs/content/1.getting-started/2.installation.md

title, description

title	description
Installation	Learn how to install and configure Nuxt UI v3 in your application.

Setup

1. Install the Nuxt UI v3 alpha package:

::code-group

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 and Nuxt UI in your CSS:

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

::tip This is done here in the <style> block of your app.vue file, but you can also do it in a CSS file. ::

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{lang="ts-type"}

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

colors

Use the colors option to choose which Tailwind CSS colors are used to generate classes for components.

• Default: ['red', 'orange', 'amber', 'yellow', 'lime', 'green', 'emerald', 'teal', 'cyan', 'sky', 'blue', 'indigo', 'violet', 'purple', 'fuchsia', 'pink', 'rose']{lang="ts-type"}

export default defineNuxtConfig({
  modules: ['@nuxt/ui'],
  ui: {
    colors: ['blue', 'green', 'red']
  }
})

::note This can be useful to reduce the number of CSS classes generated in your bundle. ::

transitions

Use the transitions option to disable all transitions on components.

• Default: true{lang="ts-type"}

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

::note This option adds the transition-colors class on components with hover or active states. ::