docs(installation): update

docs/content/1.getting-started/2.installation.md

@@ -1,22 +1,33 @@
 ---
 title: Installation
-description: 'Learn how to install and configure Nuxt UI in your application.'
-navigation:
-  badge:
-    label: Todo
+description: 'Learn how to install and configure Nuxt UI v3 in your application.'
 ---
 
 ## Setup
 
-### Add to a Nuxt project
+1. Install the Nuxt UI v3 alpha package:
 
-1. Add `@nuxt/ui` module to your project:
+::code-group
 
-```bash
-npx nuxi@latest module add ui
+```bash [pnpm]
+pnpm add @nuxt/ui@next
 ```
 
-2. Add it to the `modules` section in your `nuxt.config.ts`:
+```bash [yarn]
+yarn add @nuxt/ui@next
+```
+
+```bash [npm]
+npm install @nuxt/ui@next
+```
+
+```bash [bun]
+bun add @nuxt/ui@next
+```
+
+::
+
+2. Register the Nuxt UI module in your `nuxt.config.ts`:
 
 ```ts [nuxt.config.ts]
 export default defineNuxtConfig({
@@ -24,25 +35,29 @@ export default defineNuxtConfig({
 })
 ```
 
-That's it! You can now use all the components and composables in your Nuxt app ✨
+3. Import Tailwind and Nuxt UI in your CSS:
 
-### Use Nuxt starter
-
-[Nuxt Starter](https://nuxt.new/) template makes it easy to get started with Nuxt UI.
-The Nuxt Starter template is available from the `nuxi init` command.
-
-```bash
-npx nuxi@latest init -t ui
+```vue [app.vue]
+<style>
+@import "tailwindcss";
+@import "@nuxt/ui";
+</style>
 ```
 
-Please check [nuxt/starter](https://github.com/nuxt/starter/tree/ui) for details.
+::tip
+This is done here in the `<style>` block of your `app.vue` file, but you can also do it in a [`CSS`](https://nuxt.com/docs/getting-started/styling#the-css-property) file.
+::
 
 ## Options
 
-You can customize Nuxt UI by providing options in your `nuxt.config`:
+You can customize Nuxt UI by providing options in your `nuxt.config.ts`:
 
 ### `prefix`
 
+Use the `prefix` option to change the prefix of the components.
+
+- Default: `U`{lang="ts-type"}
+
 ```ts [nuxt.config.ts]
 export default defineNuxtConfig({
   modules: ['@nuxt/ui'],
@@ -54,6 +69,10 @@ export default defineNuxtConfig({
 
 ### `colors`
 
+Use the `colors` option to choose which Tailwind CSS colors are used to generate classes for components.
+
+- Default: `['red', 'orange', 'amber', 'yellow', 'lime', 'green', 'emerald', 'teal', 'cyan', 'sky', 'blue', 'indigo', 'violet', 'purple', 'fuchsia', 'pink', 'rose']`{lang="ts-type"}
+
 ```ts [nuxt.config.ts]
 export default defineNuxtConfig({
   modules: ['@nuxt/ui'],
@@ -63,8 +82,16 @@ export default defineNuxtConfig({
 })
 ```
 
+::note
+This can be useful to reduce the number of CSS classes generated in your bundle.
+::
+
 ### `transitions`
 
+Use the `transitions` option to disable all transitions on components.
+
+- Default: `true`{lang="ts-type"}
+
 ```ts [nuxt.config.ts]
 export default defineNuxtConfig({
   modules: ['@nuxt/ui'],
@@ -74,19 +101,6 @@ export default defineNuxtConfig({
 })
 ```
 
-## Edge
-
-To use the latest updates pushed on the [`dev`](https://github.com/nuxt/ui/tree/dev) branch, you can use `@nuxt/ui-edge`.
-
-Update your `package.json` to the following:
-
-```diff [package.json]
-{
-  "devDependencies": {
--   "@nuxt/ui": "^2.11.0"
-+   "@nuxt/ui": "npm:@nuxt/ui-edge@latest"
-  }
-}
-```
-
-Then run `pnpm install`, `yarn install` or `npm install`.
+::note
+This option adds the `transition-colors` class on components with hover or active states.
+::