---
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`:

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

3. Import Tailwind and Nuxt UI in your CSS:

```vue [app.vue]
<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`](https://nuxt.com/docs/getting-started/styling#the-css-property) 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"}

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

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

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

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