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

## Setup

1. Install the Nuxt UI v3 alpha package:

::code-group

```bash [pnpm]
pnpm add @nuxt/ui@next
```

```bash [yarn]
yarn add @nuxt/ui@next
```

```bash [npm]
npm install @nuxt/ui@next
```

```bash [bun]
bun add @nuxt/ui@next
```

::

2. Register the Nuxt UI module in your `nuxt.config.ts`{lang="ts-type"}:

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

3. Import Tailwind CSS and Nuxt UI in your `app.vue`{lang="ts-type"} or [CSS](https://nuxt.com/docs/getting-started/styling#the-css-property):

```vue [app.vue]
<style>
@import "tailwindcss";
@import "@nuxt/ui";
</style>
```

::warning
If you're using **pnpm**, ensure that you either set [`shamefully-hoist=true`](https://pnpm.io/npmrc#shamefully-hoist) 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"}

```ts [nuxt.config.ts]
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"}

```ts [nuxt.config.ts]
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"}

```ts [nuxt.config.ts]
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']`{lang="ts-type" class="inline"}

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

::tip{to="/getting-started/theme#colors"}
Learn more about color customization and theming in the Theme section.
::

### `theme.transitions`

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

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

```ts [nuxt.config.ts]
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.
::