---
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"}

## IntelliSense

If you're using VSCode, you can install the [Tailwind CSS IntelliSense](https://marketplace.visualstudio.com/items?itemName=bradlc.vscode-tailwindcss) extension to get autocompletion for the classes.

You can read more on how to set it up on the [@nuxtjs/tailwindcss](https://tailwindcss.nuxtjs.org/tailwind/editor-support) module documentation, but to summarize, you'll need to add the following to your `settings.json`:

```json [settings.json]
{
  "files.associations": {
      "*.css": "tailwindcss"
  },
  "editor.quickSuggestions": {
      "strings": true
  }
}
```

You can write your `tailwind.config` in TypeScript as such:

```ts [tailwind.config.ts]
import type { Config } from 'tailwindcss'

export default <Partial<Config>> {
  content: [
    'docs/content/**/*.md'
  ]
}
```

If you do so, you'll need to add the following to your `settings.json`:

```json [settings.json]
{
  "tailwindCSS.experimental.configFile": "tailwind.config.ts"
}
```

Also, the extension won't work when writing classes in your `app.config.ts` by default. You can add the following to your `settings.json` to fix this:

```json [settings.json]
{
  "tailwindCSS.experimental.classRegex": [
    ["ui:\\s*{([^)]*)\\s*}", "[\"'`]([^\"'`]*).*?[\"'`]"]
  ]
}
```

## Options

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

## 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`.