---
title: 'nuxthq/ui'
description: 'Components library as a Nuxt3 module using TailwindCSS based on TailwindUI.'
navigation:
  title: Installation
---

## Installation

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']
})
```

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

## 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 channel

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