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

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

3. Import Tailwind CSS and Nuxt UI in your app.vue{lang="ts-type"} or CSS:

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

::warning If you're using pnpm, ensure that you either set shamefully-hoist=true in your .npmrc file or install tailwindcss@next directly in your project's root directory. ::

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'
  }
})

fonts

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

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

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

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

theme.colors

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

• Default: ['primary', 'secondary', 'success', 'info', 'warning', 'error']{lang="ts-type" class="inline"}

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

::tip{to="/getting-started/theme#colors"} You can use this option to remove some colors and reduce your CSS bundle or add new dynamic colors. ::

theme.transitions

Use the theme.transitions option to disable all transitions on components.

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

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

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