---
description: 'Learn how to install and configure the module in your Nuxt app.'
---

1. Install `@nuxthq/ui` dependency to your project:

::code-group

```bash [yarn]
yarn add -D @nuxthq/ui
```

```bash [npm]
npm install -D @nuxthq/ui
```

```sh [pnpm]
pnpm i -D @nuxthq/ui
```

::

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

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

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

::alert{icon="i-heroicons-exclamation-triangle"}
As this module installs [@nuxtjs/tailwindcss](https://tailwindcss.nuxtjs.org/) and [@nuxtjs/color-mode](https://color-mode.nuxtjs.org/) for you, you should remove them from your `modules` and `dependencies` if you've previously installed them manually.
::

## Playground

:u-button{icon="i-simple-icons-stackblitz" label="Play on StackBlitz" size="lg" to="https://stackblitz.com/edit/nuxtlabs-ui?file=app.config.ts,app.vue" target="_blank"}

## Options

| Key                      | Default                | Description                                      |
| ------------------------ | ---------------------- | ------------------------------------------------ |
| `prefix`                 | `u`                    | Define the prefix of the imported components.    |
| `global`                 | `false`                | Expose components globally.                      |
| `icons`                  | `['heroicons']`        | Icon collections to load.                        |

## Edge

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

Update your `package.json` to the following:

```json [package.json]
{
  "devDependencies": {
    "@nuxthq/ui": "npm:@nuxthq/ui-edge@latest"
  }
}
```

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