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

## Continuous Releases

Nuxt UI v3 uses [pkg.pr.new](https://github.com/stackblitz-labs/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.

::code-group

```bash [pnpm]
pnpm add https://pkg.pr.new/@nuxt/ui@5385f84
```

```bash [yarn]
yarn add https://pkg.pr.new/@nuxt/ui@5385f84
```

```bash [npm]
npm install https://pkg.pr.new/@nuxt/ui@5385f84
```

```bash [bun]
bun add https://pkg.pr.new/@nuxt/ui@5385f84
```

::

::note
**pkg.pr.new** will automatically comment on PRs with the installation URL, making it easy to test changes.
::