From f08471ccda302367b7d6851f5550aafdb69cd601 Mon Sep 17 00:00:00 2001
From: Daniel Roe <daniel@roe.dev>
Date: Wed, 10 Apr 2024 17:52:34 +0200
Subject: [PATCH] docs: use new `nuxi module add` command in installation
 (#1606)

Co-authored-by: Benjamin Canac <canacb1@gmail.com>
---
 README.md                                     |  9 +------
 .../examples/AccordionExampleItemSlot.vue     |  4 +---
 .../1.getting-started/2.installation.md       | 24 ++++---------------
 docs/pages/index.vue                          |  7 +++---
 4 files changed, 10 insertions(+), 34 deletions(-)

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 = [{
       </div>
 
       <div class="flex flex-col items-center">
-        <code>$ npm i @nuxt/ui</code>
-        <code>$ yarn add @nuxt/ui</code>
-        <code>$ pnpm add @nuxt/ui</code>
+        <code>$ npx nuxi@latest module add ui</code>
       </div>
     </template>
   </UAccordion>
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: '' } } }"
         >
           <template #trailing>
             <UButton
@@ -435,7 +436,7 @@ useSeoMeta({
   twitterImage: 'https://ui.nuxt.com/social-card.png'
 })
 
-const source = ref('npm i @nuxt/ui')
+const source = ref('npx nuxi@latest module add ui')
 const sectionRef = ref()
 const demoRef = ref()
 const start = ref(0)