diff --git a/README.md b/README.md
index f9b8ebb6..2e98d615 100644
--- a/README.md
+++ b/README.md
@@ -27,14 +27,7 @@ Read more on [ui.nuxt.com](https://ui.nuxt.com)
## Installation
```bash
-# npm
-npm install @nuxt/ui
-# yarn
-yarn add @nuxt/ui
-# pnpm
-pnpm add @nuxt/ui
-# bun
-bun add @nuxt/ui
+npx nuxi@latest module add ui
```
Then, register the module in your `nuxt.config.ts`:
diff --git a/docs/components/content/examples/AccordionExampleItemSlot.vue b/docs/components/content/examples/AccordionExampleItemSlot.vue
index 4bc0bccd..de3fa867 100644
--- a/docs/components/content/examples/AccordionExampleItemSlot.vue
+++ b/docs/components/content/examples/AccordionExampleItemSlot.vue
@@ -61,9 +61,7 @@ const items = [{
- $ npm i @nuxt/ui
- $ yarn add @nuxt/ui
- $ pnpm add @nuxt/ui
+ $ npx nuxi@latest module add ui
diff --git a/docs/content/1.getting-started/2.installation.md b/docs/content/1.getting-started/2.installation.md
index 705fb6f9..b2440e68 100644
--- a/docs/content/1.getting-started/2.installation.md
+++ b/docs/content/1.getting-started/2.installation.md
@@ -5,29 +5,13 @@ description: 'Learn how to install and configure Nuxt UI in your application.'
## Setup
-1. Install `@nuxt/ui` dependency to your project:
+1. Add `@nuxt/ui` module to your project:
-::code-group
-
-```bash [pnpm]
-pnpm add @nuxt/ui
+```bash
+npx nuxi@latest module add ui
```
-```bash [yarn]
-yarn add @nuxt/ui
-```
-
-```bash [npm]
-npm install @nuxt/ui
-```
-
-```bash [bun]
-bun add @nuxt/ui
-```
-
-::
-
-2. Add it to your `modules` section in your `nuxt.config`:
+2. Add it to the `modules` section in your `nuxt.config.ts`:
```ts [nuxt.config.ts]
export default defineNuxtConfig({
diff --git a/docs/pages/index.vue b/docs/pages/index.vue
index 141f9900..355a8ad3 100644
--- a/docs/pages/index.vue
+++ b/docs/pages/index.vue
@@ -31,10 +31,11 @@
readonly
autocomplete="off"
icon="i-heroicons-command-line"
- input-class="select-none"
+ class="w-72"
+ input-class="focus:ring-1 focus:ring-gray-300 dark:focus:ring-gray-700"
aria-label="Install @nuxt/ui"
size="lg"
- :ui="{ base: 'disabled:cursor-default', icon: { trailing: { pointer: '' } } }"
+ :ui="{ icon: { trailing: { pointer: '' } } }"
>