---
title: Installation
description: 'Learn how to install and configure Nuxt UI in your application.'
navigation:
  badge:
    label: Todo
---

## Setup

### Add to a Nuxt project

1. Add `@nuxt/ui` module to your project:

```bash
npx nuxi@latest module add ui
```

2. Add it to the `modules` section in your `nuxt.config.ts`:

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

That's it! You can now use all the components and composables in your Nuxt app ✨

### Use Nuxt starter

[Nuxt Starter](https://nuxt.new/) template makes it easy to get started with Nuxt UI.
The Nuxt Starter template is available from the `nuxi init` command.

```bash
npx nuxi@latest init -t ui
```

Please check [nuxt/starter](https://github.com/nuxt/starter/tree/ui) for details.

## Options

You can customize Nuxt UI by providing options in your `nuxt.config`:

### `prefix`

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

### `colors`

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

### `transitions`

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

## Edge

To use the latest updates pushed on the [`dev`](https://github.com/nuxt/ui/tree/dev) branch, you can use `@nuxt/ui-edge`.

Update your `package.json` to the following:

```diff [package.json]
{
  "devDependencies": {
-   "@nuxt/ui": "^2.11.0"
+   "@nuxt/ui": "npm:@nuxt/ui-edge@latest"
  }
}
```

Then run `pnpm install`, `yarn install` or `npm install`.