From 11ef256db70dd5696b2c1d7c0b68d332b63afee1 Mon Sep 17 00:00:00 2001
From: Benjamin Canac <canacb1@gmail.com>
Date: Wed, 19 Jun 2024 21:23:23 +0200
Subject: [PATCH] docs: improve

---
 docs/app/app.vue                              |   4 +-
 docs/app/components/Footer.vue                |  68 +++--
 docs/app/content/1.getting-started/1.index.md |  29 --
 .../content/1.getting-started/3.theming.md    | 286 ------------------
 docs/app/content/1.getting-started/4.icons.md | 195 ++++++++++++
 .../content/1.getting-started/5.dark-mode.md  |  58 ++++
 .../{4.shortcuts.md => 6.shortcuts.md}        |   0
 .../{6.contributing.md => 7.contributing.md}  |   0
 docs/app/content/2.components/carousel.md     |   2 +
 docs/app/content/2.components/collapsible.md  |  17 ++
 .../{form-group.md => form-field.md}          |   0
 docs/app/content/2.components/meter.md        |   1 +
 ...ontal-navigation.md => navigation-menu.md} |   0
 .../2.components/{divider.md => separator.md} |   0
 docs/app/layouts/docs.vue                     |   4 +-
 docs/app/pages/[...slug].vue                  |  83 +++--
 docs/app/pages/playground.vue                 |  27 --
 docs/app/pages/roadmap.vue                    |  32 --
 docs/nuxt.config.ts                           |   9 +-
 19 files changed, 368 insertions(+), 447 deletions(-)
 delete mode 100644 docs/app/content/1.getting-started/1.index.md
 create mode 100644 docs/app/content/1.getting-started/4.icons.md
 create mode 100644 docs/app/content/1.getting-started/5.dark-mode.md
 rename docs/app/content/1.getting-started/{4.shortcuts.md => 6.shortcuts.md} (100%)
 rename docs/app/content/1.getting-started/{6.contributing.md => 7.contributing.md} (100%)
 create mode 100644 docs/app/content/2.components/collapsible.md
 rename docs/app/content/2.components/{form-group.md => form-field.md} (100%)
 rename docs/app/content/2.components/{horizontal-navigation.md => navigation-menu.md} (100%)
 rename docs/app/content/2.components/{divider.md => separator.md} (100%)
 delete mode 100644 docs/app/pages/playground.vue
 delete mode 100644 docs/app/pages/roadmap.vue

diff --git a/docs/app/app.vue b/docs/app/app.vue
index 25f1c79c..0dc9784d 100644
--- a/docs/app/app.vue
+++ b/docs/app/app.vue
@@ -38,7 +38,7 @@ const links = computed(() => [{
 
 useHead({
   meta: [
-    { name: 'viewport', content: 'width=device-width, initial-scale=1' },
+    { name: 'viewport', content: 'width=device-width, initial-scale=1' }
     // { key: 'theme-color', name: 'theme-color', content: color }
   ],
   link: [
@@ -74,6 +74,6 @@ provide('files', files)
 
     <Footer v-if="!route.path.startsWith('/examples')" />
 
-    <LazyUContentSearch v-model:open="open" v-model:search-term="searchTerm" :files="files" :navigation="navigation" :links="links" :fuse="{ resultLimit: 42 }" />
+    <LazyUContentSearch v-model:open="open" v-model:search-term="searchTerm" :files="files" :navigation="navigation" :fuse="{ resultLimit: 42 }" />
   </UApp>
 </template>
diff --git a/docs/app/components/Footer.vue b/docs/app/components/Footer.vue
index bad3aa6f..aeda611b 100644
--- a/docs/app/components/Footer.vue
+++ b/docs/app/components/Footer.vue
@@ -1,21 +1,21 @@
 <script setup lang="ts">
 const route = useRoute()
 
-const items = [{
-  label: 'Figma Kit',
-  to: 'https://www.figma.com/community/file/1288455405058138934',
-  target: '_blank'
-}, {
-  label: 'Playground',
-  to: 'https://stackblitz.com/edit/nuxt-ui',
-  target: '_blank'
-}, {
-  label: 'Roadmap',
-  to: '/roadmap'
-}, {
-  label: 'Releases',
-  to: '/releases'
-}]
+// const items = [{
+//   label: 'Figma Kit',
+//   to: 'https://www.figma.com/community/file/1288455405058138934',
+//   target: '_blank'
+// }, {
+//   label: 'Playground',
+//   to: 'https://stackblitz.com/edit/nuxt-ui',
+//   target: '_blank'
+// }, {
+//   label: 'Roadmap',
+//   to: '/roadmap'
+// }, {
+//   label: 'Releases',
+//   to: '/releases'
+// }]
 </script>
 
 <template>
@@ -31,13 +31,41 @@ const items = [{
       </NuxtLink>
     </template>
 
-    <UNavigationMenu :items="items" variant="link" color="black" />
+    <!-- <UNavigationMenu :items="items" variant="link" color="black" /> -->
 
     <template #right>
-      <UButton aria-label="Nuxt Website" icon="i-simple-icons-nuxtdotjs" to="https://nuxt.com" target="_blank" color="gray" variant="ghost" />
-      <UButton aria-label="Nuxt UI on Discord" icon="i-simple-icons-discord" to="https://chat.nuxt.dev" target="_blank" color="gray" variant="ghost" />
-      <UButton aria-label="Nuxt on X" icon="i-simple-icons-x" to="https://x.com/nuxt_js" target="_blank" color="gray" variant="ghost" />
-      <UButton aria-label="Nuxt UI on GitHub" icon="i-simple-icons-github" to="https://github.com/nuxt/ui" target="_blank" color="gray" variant="ghost" />
+      <UButton
+        aria-label="Nuxt Website"
+        icon="i-simple-icons-nuxtdotjs"
+        to="https://nuxt.com"
+        target="_blank"
+        color="gray"
+        variant="ghost"
+      />
+      <UButton
+        aria-label="Nuxt UI on Discord"
+        icon="i-simple-icons-discord"
+        to="https://chat.nuxt.dev"
+        target="_blank"
+        color="gray"
+        variant="ghost"
+      />
+      <UButton
+        aria-label="Nuxt on X"
+        icon="i-simple-icons-x"
+        to="https://x.com/nuxt_js"
+        target="_blank"
+        color="gray"
+        variant="ghost"
+      />
+      <UButton
+        aria-label="Nuxt UI on GitHub"
+        icon="i-simple-icons-github"
+        to="https://github.com/nuxt/ui"
+        target="_blank"
+        color="gray"
+        variant="ghost"
+      />
     </template>
   </UFooter>
 </template>
diff --git a/docs/app/content/1.getting-started/1.index.md b/docs/app/content/1.getting-started/1.index.md
deleted file mode 100644
index a3793e1f..00000000
--- a/docs/app/content/1.getting-started/1.index.md
+++ /dev/null
@@ -1,29 +0,0 @@
----
-title: Introduction
-description: 'Fully styled and customizable components for Nuxt.'
----
-
-Nuxt UI is a module that provides a set of Vue components and composables built with [Tailwind CSS](https://tailwindcss.com/) and [Headless UI](https://headlessui.dev/) to help you build beautiful and accessible user interfaces.
-
-Its goal is to provide everything related to UI when building a Nuxt app. This includes components, icons, colors, dark mode as well as keyboard shortcuts.
-
-## Features
-
-- Built with [Headless UI](https://headlessui.dev/) and [Tailwind CSS](https://tailwindcss.com/)
-- HMR support through Nuxt App Config
-- Dark mode support
-- Support for LTR and RTL languages
-- Keyboard shortcuts
-- Bundled icons
-- Fully typed
-- [Figma Kit](https://www.figma.com/community/file/1288455405058138934)
-
-## Credits
-
-- [nuxt/nuxt](https://github.com/nuxt/nuxt)
-- [nuxt-modules/color-mode](https://github.com/nuxt-modules/color-mode)
-- [nuxt-modules/tailwindcss](https://github.com/nuxt-modules/tailwindcss)
-- [tailwindlabs/tailwindcss](https://github.com/tailwindlabs/tailwindcss)
-- [tailwindlabs/headlessui](https://github.com/tailwindlabs/headlessui)
-- [vueuse/vueuse](https://github.com/vueuse/vueuse)
-- [egoist/tailwindcss-icons](https://github.com/egoist/tailwindcss-icons)
diff --git a/docs/app/content/1.getting-started/3.theming.md b/docs/app/content/1.getting-started/3.theming.md
index 5c99a41e..4822cde7 100644
--- a/docs/app/content/1.getting-started/3.theming.md
+++ b/docs/app/content/1.getting-started/3.theming.md
@@ -66,42 +66,6 @@ We'd advise you to use those colors in your components and pages, e.g. `text-pri
 
 The `primary` color also has a `DEFAULT` shade that changes based on the theme. It is `500` in light mode and `400` in dark mode. You can use as a shortcut in your components and pages, e.g. `text-primary`, `bg-primary`, `focus-visible:ring-primary`, etc.
 
-### Smart Safelisting
-
-Components having a `color` prop like [Avatar](/components/avatar#chip), [Badge](/components/badge#style), [Button](/components/button#style), [Input](/components/input#style) (inherited in [Select](/components/select) and [SelectMenu](/components/select-menu)), [RadioGroup](/components/radio-group), [Checkbox](/components/checkbox), [Toggle](/components/toggle), [Range](/components/range) and [Notification](/components/notification#timeout) will use the `primary` color by default but will handle all the colors defined in your `tailwind.config.ts` or the default Tailwind CSS colors.
-
-Variant classes of those components are defined with a syntax like `bg-{color}-500 dark:bg-{color}-400` so they can be used with any color. However, this means that Tailwind will not find those classes and therefore will not generate the corresponding CSS.
-
-The module uses the [Tailwind CSS safelist](https://tailwindcss.com/docs/content-configuration#safelisting-classes) feature to force the generation of all the classes for the `primary` color **only** as it is the default color for all the components.
-
-Then, the module will automatically detect when you use one of those components with a color and will safelist it for you. This means that if you use a `red` color for a Button component, the `red` color classes will be safelisted for the Button component only. This will allow to keep the CSS bundle size as small as possible.
-
-There is one case where you would want to force the safelisting of a color. For example, if you've set the default color of the Button component to `orange` in your `app.config.ts`.
-
-```ts [app.config.ts]
-export default defineAppConfig({
-  ui: {
-    button: {
-      default: {
-        color: 'orange'
-      }
-    }
-  }
-})
-```
-
-This will apply the orange color when using a default `<UButton />`. You'll need to safelist this color manually in your `nuxt.config.ts` ui options as we won't be able to detect it automatically. You can do so through the `safelistColors` option which defaults to `['primary']`.
-
-```ts [nuxt.config.ts]
-export default defineNuxtConfig({
-  ui: {
-    safelistColors: ['orange']
-  }
-})
-```
-
-This can also happen when you bind a dynamic color to a component: `<UBadge :color="color" />`, `<UAvatar :chip-color="statuses[user.status]" />`, etc. In this case, you'll need to safelist the possible color values manually as well.
-
 ## Components
 
 ### `app.config.ts`
@@ -218,253 +182,3 @@ export default defineAppConfig({
   }
 })
 ```
-
-## Dark mode
-
-All the components are styled with dark mode in mind.
-
-Thanks to [Tailwind CSS dark mode](https://tailwindcss.com/docs/dark-mode#toggling-dark-mode-manually) class strategy and the [@nuxtjs/color-mode](https://github.com/nuxt-modules/color-mode) module, you literally have nothing to do.
-
-You can disable dark mode by setting the `preference` to `light` instead of `system` in your `nuxt.config.ts`.
-
-```ts [nuxt.config.ts]
-export default defineNuxtConfig({
-  colorMode: {
-    preference: 'light'
-  }
-})
-```
-
-::callout{icon="i-heroicons-light-bulb"}
-If you're stuck in dark mode even after changing this setting, you might need to remove the `nuxt-color-mode` entry from your browser's local storage.
-::
-
-You can easily build a color mode button by using the `useColorMode` composable from `@nuxtjs/color-mode`.
-
-::component-example
-#default
-:color-mode-button
-
-#code
-```vue
-<script setup lang="ts">
-const colorMode = useColorMode()
-const isDark = computed({
-  get () {
-    return colorMode.value === 'dark'
-  },
-  set () {
-    colorMode.preference = colorMode.value === 'dark' ? 'light' : 'dark'
-  }
-})
-</script>
-<template>
-  <ClientOnly>
-    <UButton
-      :icon="isDark ? 'i-heroicons-moon-20-solid' : 'i-heroicons-sun-20-solid'"
-      color="gray"
-      variant="ghost"
-      aria-label="Theme"
-      @click="isDark = !isDark"
-    />
-    <template #fallback>
-      <div class="w-8 h-8" />
-    </template>
-  </ClientOnly>
-</template>
-```
-::
-
-## Icons
-
-You can use any icon (100,000+) from [Iconify](https://iconify.design/).
-
-Some components have an `icon` prop that allows you to add an icon to the component.
-
-```vue
-<template>
-  <UButton icon="i-heroicons-magnifying-glass" />
-</template>
-```
-
-You can also use the [Icon](/components/icon) component to add an icon anywhere in your app by following this pattern: `i-{collection_name}-{icon_name}`.
-
-```vue
-<template>
-  <UIcon name="i-heroicons-moon" />
-</template>
-```
-
-### Collections
-
-By default, the module uses [Heroicons](https://heroicons.com/) but you can change it from the module options in your `nuxt.config.ts`.
-
-```ts [nuxt.config.ts]
-export default defineNuxtConfig({
-  ui: {
-    icons: ['mdi', 'simple-icons']
-  }
-})
-```
-
-::callout{icon="i-heroicons-light-bulb"}
-Search the icon you want to use on https://icones.js.org built by [@antfu](https://github.com/antfu).
-::
-
-Thanks to [@egoist/tailwindcss-icons](https://github.com/egoist/tailwindcss-icons) plugin, only the icons you use in your app will be bundled in your CSS. However, you need to install the icon collections you specified in the `ui.icons` key:
-
-::code-group
-
-```bash [pnpm]
-pnpm i @iconify-json/{collection_name}
-```
-
-```bash [yarn]
-yarn add @iconify-json/{collection_name}
-```
-
-```bash [npm]
-npm install @iconify-json/{collection_name}
-```
-
-::
-
-If you choose to use the full `@iconify/json` icon collection (50MB), you can specifiy `icons: 'all'` or `icons: {}` in your `nuxt.config.ts` to use any icon in your app.
-
-```ts [nuxt.config.ts]
-export default defineNuxtConfig({
-  ui: {
-    icons: {}
-  }
-})
-```
-
-### Custom config
-
-If you have specific needs, like using a custom icon collection, you can use the `icons` option in your `nuxt.config.ts` as an object to override the config of the [@egoist/tailwindcss-icons](https://github.com/egoist/tailwindcss-icons#plugin-options) plugin.
-
-```ts [nuxt.config.ts]
-import { getIconCollections } from '@egoist/tailwindcss-icons'
-
-export default defineNuxtConfig({
-  ui: {
-    icons: {
-      // might solve stretch bug on generate, see https://github.com/egoist/tailwindcss-icons/issues/23
-      extraProperties: {
-        'mask-size': 'contain',
-        'mask-position': 'center'
-      },
-      collections: {
-        foo: {
-          icons: {
-            'arrow-left': {
-              // svg body
-              body: '<path fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5" d="M10.5 19.5L3 12m0 0l7.5-7.5M3 12h18" />',
-              // svg width and height, optional
-              width: 24,
-              height: 24
-            }
-          }
-        },
-        ...getIconCollections(['heroicons', 'simple-icons'])
-      }
-    }
-  }
-})
-```
-
-### Dynamic icons
-
-The `Icon` component also has a `dynamic` prop to use the [nuxt-icon](https://github.com/nuxt-modules/icon/) module instead of the [@egoist/tailwindcss-icons](https://github.com/egoist/tailwindcss-icons#plugin-options) plugin.
-
-Read more about this in the [Icon](/components/icon#dynamic) component page.
-
-### Defaults
-
-You can easily replace all the default icons of the components in your `app.config.ts`.
-
-```ts [app.config.ts]
-export default defineAppConfig({
-  ui: {
-    button: {
-      default: {
-        loadingIcon: 'i-octicon-sync-24'
-      }
-    },
-    input: {
-      default: {
-        loadingIcon: 'i-octicon-sync-24'
-      }
-    },
-    select: {
-      default: {
-        loadingIcon: 'i-octicon-sync-24',
-        trailingIcon: 'i-octicon-chevron-down-24'
-      }
-    },
-    selectMenu: {
-      default: {
-        selectedIcon: 'i-octicon-check-24'
-      }
-    },
-    notification: {
-      default: {
-        closeButton: {
-          icon: 'i-octicon-x-24'
-        }
-      }
-    },
-    commandPalette: {
-      default: {
-        icon: 'i-octicon-search-24',
-        loadingIcon: 'i-octicon-sync-24',
-        selectedIcon: 'i-octicon-check-24',
-        emptyState: {
-          icon: 'i-octicon-search-24'
-        }
-      }
-    },
-    table: {
-      default: {
-        sortAscIcon: 'i-octicon-sort-asc-24',
-        sortDescIcon: 'i-octicon-sort-desc-24',
-        sortButton: {
-          icon: 'i-octicon-arrow-switch-24'
-        },
-        loadingState: {
-          icon: 'i-octicon-sync-24'
-        },
-        emptyState: {
-          icon: 'i-octicon-database-24'
-        }
-      }
-    },
-    pagination: {
-      default: {
-        firstButton: {
-          icon: 'i-octicon-chevron-left-24'
-        },
-        prevButton: {
-          icon: 'i-octicon-arrow-left-24'
-        },
-        nextButton: {
-          icon: 'i-octicon-arrow-right-24'
-        },
-        lastButton: {
-          icon: 'i-octicon-chevron-right-24'
-        }
-      }
-    },
-    accordion: {
-      default: {
-        openIcon: 'i-octicon-chevron-down-24'
-      }
-    },
-    breadcrumb: {
-      default: {
-        divider: 'i-octicon-chevron-right-24'
-      }
-    }
-  }
-})
-```
diff --git a/docs/app/content/1.getting-started/4.icons.md b/docs/app/content/1.getting-started/4.icons.md
new file mode 100644
index 00000000..d140d596
--- /dev/null
+++ b/docs/app/content/1.getting-started/4.icons.md
@@ -0,0 +1,195 @@
+---
+description: ''
+---
+
+You can use any icon (100,000+) from [Iconify](https://iconify.design/).
+
+Some components have an `icon` prop that allows you to add an icon to the component.
+
+```vue
+<template>
+  <UButton icon="i-heroicons-magnifying-glass" />
+</template>
+```
+
+You can also use the [Icon](/components/icon) component to add an icon anywhere in your app by following this pattern: `i-{collection_name}-{icon_name}`.
+
+```vue
+<template>
+  <UIcon name="i-heroicons-moon" />
+</template>
+```
+
+### Collections
+
+By default, the module uses [Heroicons](https://heroicons.com/) but you can change it from the module options in your `nuxt.config.ts`.
+
+```ts [nuxt.config.ts]
+export default defineNuxtConfig({
+  ui: {
+    icons: ['mdi', 'simple-icons']
+  }
+})
+```
+
+::callout{icon="i-heroicons-light-bulb"}
+Search the icon you want to use on https://icones.js.org built by [@antfu](https://github.com/antfu).
+::
+
+Thanks to [@egoist/tailwindcss-icons](https://github.com/egoist/tailwindcss-icons) plugin, only the icons you use in your app will be bundled in your CSS. However, you need to install the icon collections you specified in the `ui.icons` key:
+
+::code-group
+
+```bash [pnpm]
+pnpm i @iconify-json/{collection_name}
+```
+
+```bash [yarn]
+yarn add @iconify-json/{collection_name}
+```
+
+```bash [npm]
+npm install @iconify-json/{collection_name}
+```
+
+::
+
+If you choose to use the full `@iconify/json` icon collection (50MB), you can specifiy `icons: 'all'` or `icons: {}` in your `nuxt.config.ts` to use any icon in your app.
+
+```ts [nuxt.config.ts]
+export default defineNuxtConfig({
+  ui: {
+    icons: {}
+  }
+})
+```
+
+### Custom config
+
+If you have specific needs, like using a custom icon collection, you can use the `icons` option in your `nuxt.config.ts` as an object to override the config of the [@egoist/tailwindcss-icons](https://github.com/egoist/tailwindcss-icons#plugin-options) plugin.
+
+```ts [nuxt.config.ts]
+import { getIconCollections } from '@egoist/tailwindcss-icons'
+
+export default defineNuxtConfig({
+  ui: {
+    icons: {
+      // might solve stretch bug on generate, see https://github.com/egoist/tailwindcss-icons/issues/23
+      extraProperties: {
+        'mask-size': 'contain',
+        'mask-position': 'center'
+      },
+      collections: {
+        foo: {
+          icons: {
+            'arrow-left': {
+              // svg body
+              body: '<path fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5" d="M10.5 19.5L3 12m0 0l7.5-7.5M3 12h18" />',
+              // svg width and height, optional
+              width: 24,
+              height: 24
+            }
+          }
+        },
+        ...getIconCollections(['heroicons', 'simple-icons'])
+      }
+    }
+  }
+})
+```
+
+### Dynamic icons
+
+The `Icon` component also has a `dynamic` prop to use the [nuxt-icon](https://github.com/nuxt-modules/icon/) module instead of the [@egoist/tailwindcss-icons](https://github.com/egoist/tailwindcss-icons#plugin-options) plugin.
+
+Read more about this in the [Icon](/components/icon#dynamic) component page.
+
+### Defaults
+
+You can easily replace all the default icons of the components in your `app.config.ts`.
+
+```ts [app.config.ts]
+export default defineAppConfig({
+  ui: {
+    button: {
+      default: {
+        loadingIcon: 'i-octicon-sync-24'
+      }
+    },
+    input: {
+      default: {
+        loadingIcon: 'i-octicon-sync-24'
+      }
+    },
+    select: {
+      default: {
+        loadingIcon: 'i-octicon-sync-24',
+        trailingIcon: 'i-octicon-chevron-down-24'
+      }
+    },
+    selectMenu: {
+      default: {
+        selectedIcon: 'i-octicon-check-24'
+      }
+    },
+    notification: {
+      default: {
+        closeButton: {
+          icon: 'i-octicon-x-24'
+        }
+      }
+    },
+    commandPalette: {
+      default: {
+        icon: 'i-octicon-search-24',
+        loadingIcon: 'i-octicon-sync-24',
+        selectedIcon: 'i-octicon-check-24',
+        emptyState: {
+          icon: 'i-octicon-search-24'
+        }
+      }
+    },
+    table: {
+      default: {
+        sortAscIcon: 'i-octicon-sort-asc-24',
+        sortDescIcon: 'i-octicon-sort-desc-24',
+        sortButton: {
+          icon: 'i-octicon-arrow-switch-24'
+        },
+        loadingState: {
+          icon: 'i-octicon-sync-24'
+        },
+        emptyState: {
+          icon: 'i-octicon-database-24'
+        }
+      }
+    },
+    pagination: {
+      default: {
+        firstButton: {
+          icon: 'i-octicon-chevron-left-24'
+        },
+        prevButton: {
+          icon: 'i-octicon-arrow-left-24'
+        },
+        nextButton: {
+          icon: 'i-octicon-arrow-right-24'
+        },
+        lastButton: {
+          icon: 'i-octicon-chevron-right-24'
+        }
+      }
+    },
+    accordion: {
+      default: {
+        openIcon: 'i-octicon-chevron-down-24'
+      }
+    },
+    breadcrumb: {
+      default: {
+        divider: 'i-octicon-chevron-right-24'
+      }
+    }
+  }
+})
+```
diff --git a/docs/app/content/1.getting-started/5.dark-mode.md b/docs/app/content/1.getting-started/5.dark-mode.md
new file mode 100644
index 00000000..f8da2256
--- /dev/null
+++ b/docs/app/content/1.getting-started/5.dark-mode.md
@@ -0,0 +1,58 @@
+---
+title: 'Dark mode'
+description: ''
+---
+
+All the components are styled with dark mode in mind.
+
+Thanks to [Tailwind CSS dark mode](https://tailwindcss.com/docs/dark-mode#toggling-dark-mode-manually) class strategy and the [@nuxtjs/color-mode](https://github.com/nuxt-modules/color-mode) module, you literally have nothing to do.
+
+You can disable dark mode by setting the `preference` to `light` instead of `system` in your `nuxt.config.ts`.
+
+```ts [nuxt.config.ts]
+export default defineNuxtConfig({
+  colorMode: {
+    preference: 'light'
+  }
+})
+```
+
+::callout{icon="i-heroicons-light-bulb"}
+If you're stuck in dark mode even after changing this setting, you might need to remove the `nuxt-color-mode` entry from your browser's local storage.
+::
+
+You can easily build a color mode button by using the `useColorMode` composable from `@nuxtjs/color-mode`.
+
+::component-example
+#default
+:color-mode-button
+
+#code
+```vue
+<script setup lang="ts">
+const colorMode = useColorMode()
+const isDark = computed({
+  get () {
+    return colorMode.value === 'dark'
+  },
+  set () {
+    colorMode.preference = colorMode.value === 'dark' ? 'light' : 'dark'
+  }
+})
+</script>
+<template>
+  <ClientOnly>
+    <UButton
+      :icon="isDark ? 'i-heroicons-moon-20-solid' : 'i-heroicons-sun-20-solid'"
+      color="gray"
+      variant="ghost"
+      aria-label="Theme"
+      @click="isDark = !isDark"
+    />
+    <template #fallback>
+      <div class="w-8 h-8" />
+    </template>
+  </ClientOnly>
+</template>
+```
+::
diff --git a/docs/app/content/1.getting-started/4.shortcuts.md b/docs/app/content/1.getting-started/6.shortcuts.md
similarity index 100%
rename from docs/app/content/1.getting-started/4.shortcuts.md
rename to docs/app/content/1.getting-started/6.shortcuts.md
diff --git a/docs/app/content/1.getting-started/6.contributing.md b/docs/app/content/1.getting-started/7.contributing.md
similarity index 100%
rename from docs/app/content/1.getting-started/6.contributing.md
rename to docs/app/content/1.getting-started/7.contributing.md
diff --git a/docs/app/content/2.components/carousel.md b/docs/app/content/2.components/carousel.md
index 395279ae..87d1b3d5 100644
--- a/docs/app/content/2.components/carousel.md
+++ b/docs/app/content/2.components/carousel.md
@@ -4,6 +4,8 @@ links:
   - label: GitHub
     icon: i-simple-icons-github
     to: https://github.com/nuxt/ui/blob/dev/src/runtime/components/elements/Carousel.vue
+disabled: true
+badge: Coming soon
 ---
 
 ## Usage
diff --git a/docs/app/content/2.components/collapsible.md b/docs/app/content/2.components/collapsible.md
new file mode 100644
index 00000000..1ae27b0a
--- /dev/null
+++ b/docs/app/content/2.components/collapsible.md
@@ -0,0 +1,17 @@
+---
+description: A container lets you center and constrain the width of your content.
+links:
+  - label: GitHub
+    icon: i-simple-icons-github
+    to: https://github.com/nuxt/ui/blob/dev/src/runtime/components/layout/Container.vue
+---
+
+## Usage
+
+## Props
+
+:component-props
+
+## Config
+
+:component-preset
diff --git a/docs/app/content/2.components/form-group.md b/docs/app/content/2.components/form-field.md
similarity index 100%
rename from docs/app/content/2.components/form-group.md
rename to docs/app/content/2.components/form-field.md
diff --git a/docs/app/content/2.components/meter.md b/docs/app/content/2.components/meter.md
index 2a9dcc8c..a3c7a1a6 100644
--- a/docs/app/content/2.components/meter.md
+++ b/docs/app/content/2.components/meter.md
@@ -5,6 +5,7 @@ links:
   - label: GitHub
     icon: i-simple-icons-github
     to: https://github.com/nuxt/ui/blob/dev/src/runtime/components/elements/Meter.vue
+badge: Coming soon
 ---
 
 ## Usage
diff --git a/docs/app/content/2.components/horizontal-navigation.md b/docs/app/content/2.components/navigation-menu.md
similarity index 100%
rename from docs/app/content/2.components/horizontal-navigation.md
rename to docs/app/content/2.components/navigation-menu.md
diff --git a/docs/app/content/2.components/divider.md b/docs/app/content/2.components/separator.md
similarity index 100%
rename from docs/app/content/2.components/divider.md
rename to docs/app/content/2.components/separator.md
diff --git a/docs/app/layouts/docs.vue b/docs/app/layouts/docs.vue
index fb51e122..7135fc90 100644
--- a/docs/app/layouts/docs.vue
+++ b/docs/app/layouts/docs.vue
@@ -5,7 +5,7 @@ const nav = inject<Ref<NavItem[]>>('navigation')
 
 const navigation = computed(() => nav.value.filter(item => !item._path.startsWith('/pro')))
 
-const { module, modules } = useModule()
+// const { module, modules } = useModule()
 </script>
 
 <template>
@@ -14,7 +14,7 @@ const { module, modules } = useModule()
       <UPage>
         <template #left>
           <UPageAside>
-            <USelect v-model="module" :items="modules" icon="i-heroicons-cube" class="w-full mb-3 lg:mb-6" />
+            <!-- <USelect v-model="module" :items="modules" icon="i-heroicons-cube" class="w-full mb-3 lg:mb-6" /> -->
 
             <UContentNavigation :navigation="navigation" highlight />
           </UPageAside>
diff --git a/docs/app/pages/[...slug].vue b/docs/app/pages/[...slug].vue
index 72f5363c..e7a4ce50 100644
--- a/docs/app/pages/[...slug].vue
+++ b/docs/app/pages/[...slug].vue
@@ -35,49 +35,46 @@ useSeoMeta({
   ogDescription: page.value.description
 })
 
-defineOgImage({
-  component: 'Docs',
-  title: page.value.title,
-  description: page.value.description,
+defineOgImageComponent('Docs', {
   headline: headline.value
 })
 
-const communityLinks = computed(() => [{
-  icon: 'i-heroicons-pencil-square',
-  label: 'Edit this page',
-  to: `https://github.com/nuxt/ui/edit/dev/docs/content/${page?.value?._file}`,
-  target: '_blank'
-}, {
-  icon: 'i-heroicons-star',
-  label: 'Star on GitHub',
-  to: 'https://github.com/nuxt/ui',
-  target: '_blank'
-}, {
-  icon: 'i-heroicons-lifebuoy',
-  label: 'Contributing',
-  to: '/getting-started/contributing'
-}, {
-  label: 'Roadmap',
-  icon: 'i-heroicons-map',
-  to: '/roadmap'
-}])
+// const communityLinks = computed(() => [{
+//   icon: 'i-heroicons-pencil-square',
+//   label: 'Edit this page',
+//   to: `https://github.com/nuxt/ui/edit/dev/docs/content/${page?.value?._file}`,
+//   target: '_blank'
+// }, {
+//   icon: 'i-heroicons-star',
+//   label: 'Star on GitHub',
+//   to: 'https://github.com/nuxt/ui',
+//   target: '_blank'
+// }, {
+//   icon: 'i-heroicons-lifebuoy',
+//   label: 'Contributing',
+//   to: '/getting-started/contributing'
+// }, {
+//   label: 'Roadmap',
+//   icon: 'i-heroicons-map',
+//   to: '/roadmap'
+// }])
 
-const resourcesLinks = [{
-  icon: 'i-simple-icons-figma',
-  label: 'Figma Kit',
-  to: 'https://www.figma.com/community/file/1288455405058138934',
-  target: '_blank'
-}, {
-  label: 'Playground',
-  icon: 'i-simple-icons-stackblitz',
-  to: 'https://stackblitz.com/edit/nuxt-ui',
-  target: '_blank'
-}, {
-  icon: 'i-simple-icons-nuxtdotjs',
-  label: 'Nuxt docs',
-  to: 'https://nuxt.com',
-  target: '_blank'
-}]
+// const resourcesLinks = [{
+//   icon: 'i-simple-icons-figma',
+//   label: 'Figma Kit',
+//   to: 'https://www.figma.com/community/file/1288455405058138934',
+//   target: '_blank'
+// }, {
+//   label: 'Playground',
+//   icon: 'i-simple-icons-stackblitz',
+//   to: 'https://stackblitz.com/edit/nuxt-ui',
+//   target: '_blank'
+// }, {
+//   icon: 'i-simple-icons-nuxtdotjs',
+//   label: 'Nuxt docs',
+//   to: 'https://nuxt.com',
+//   target: '_blank'
+// }]
 </script>
 
 <template>
@@ -94,7 +91,7 @@ const resourcesLinks = [{
 
     <template v-if="page?.body?.toc?.links?.length" #right>
       <UContentToc :links="page.body.toc.links">
-        <template #bottom>
+        <!-- <template #bottom>
           <USeparator v-if="page.body?.toc?.links?.length" type="dashed" />
 
           <UPageLinks title="Community" :links="communityLinks" />
@@ -103,11 +100,11 @@ const resourcesLinks = [{
 
           <UPageLinks title="Resources" :links="resourcesLinks" />
 
-          <!-- <USeparator type="dashed" />
+          <USeparator type="dashed" />
 
           <AdsPro />
-          <AdsCarbon /> -->
-        </template>
+          <AdsCarbon />
+        </template> -->
       </UContentToc>
     </template>
   </UPage>
diff --git a/docs/app/pages/playground.vue b/docs/app/pages/playground.vue
deleted file mode 100644
index a69338be..00000000
--- a/docs/app/pages/playground.vue
+++ /dev/null
@@ -1,27 +0,0 @@
-<script setup lang="ts">
-const title = 'Playground'
-const description = 'Play online with our interactive Nuxt Image playground.'
-
-useSeoMeta({
-  titleTemplate: '%s - Nuxt UI',
-  title,
-  ogTitle: 'Nuxt UI Playground',
-  description
-})
-
-defineOgImage({
-  component: 'Docs',
-  title,
-  description
-})
-
-const colorMode = useColorMode()
-</script>
-
-<template>
-  <div class="h-[calc(100vh-var(--header-height)-var(--header-height)-1px)]">
-    <ClientOnly>
-      <iframe :src="`https://stackblitz.com/edit/nuxt-ui?embed=1&file=app.config.ts,app.vue&theme=${colorMode.preference}`" width="100%" height="100%" />
-    </ClientOnly>
-  </div>
-</template>
diff --git a/docs/app/pages/roadmap.vue b/docs/app/pages/roadmap.vue
deleted file mode 100644
index ce5e12ad..00000000
--- a/docs/app/pages/roadmap.vue
+++ /dev/null
@@ -1,32 +0,0 @@
-<script setup lang="ts">
-const title = 'Roadmap'
-const description = 'Discover our Volta board for @nuxt/ui development status.'
-
-useSeoMeta({
-  titleTemplate: '%s - Nuxt UI',
-  title,
-  ogTitle: 'Nuxt UI Roadmap',
-  description
-})
-
-defineOgImage({
-  component: 'Docs',
-  title,
-  description
-})
-
-const appConfig = useAppConfig()
-const colorMode = useColorMode()
-
-const token = 'eyJ2aWV3IjoiYm9hcmQiLCJib2FyZFN0YXR1c2VzIjpbInRyaWFnZSIsImJhY2tsb2ciLCJ0b2RvIiwiaW5fcHJvZ3Jlc3MiLCJpbl9yZXZpZXciLCJkb25lIiwicmVsZWFzZWQiXSwiYm9hcmRMaW5rZWRQcnMiOmZhbHNlLCJsaXN0R3JvdXAiOiJzdGF0ZSIsImxpc3RPcmRlciI6ImNyZWF0ZWRfYXQiLCJ0aW1lbGluZVpvb20iOiJtb250aCIsInRpbWVsaW5lT3JkZXIiOiJzdGF0ZSIsInRpbWVsaW5lRGlzcGxheSI6ImFsbF9taWxlc3RvbmVzIiwiZmlsdGVycyI6e30sIm93bmVyIjoibnV4dCIsIm5hbWUiOiJ1aSJ9'
-
-const src = computed(() => `https://volta.net/embed/${token}?theme=${colorMode.value}&gray=${appConfig.ui.gray}&primary=${appConfig.ui.primary}`)
-</script>
-
-<template>
-  <div class="h-[calc(100vh-var(--header-height)-var(--header-height)-1px)]">
-    <ClientOnly>
-      <iframe :src="src" width="100%" height="100%" />
-    </ClientOnly>
-  </div>
-</template>
diff --git a/docs/nuxt.config.ts b/docs/nuxt.config.ts
index 5d4e029a..ae7a7bbc 100644
--- a/docs/nuxt.config.ts
+++ b/docs/nuxt.config.ts
@@ -63,9 +63,7 @@ export default defineNuxtConfig({
   nitro: {
     prerender: {
       routes: [
-        '/',
-        '/getting-started',
-        '/dev/getting-started',
+        '/getting-started/installation',
         '/api/releases.json',
         '/api/pulls.json'
       ],
@@ -73,9 +71,8 @@ export default defineNuxtConfig({
     }
   },
   routeRules: {
-    '/': { redirect: '/getting-started', prerender: false },
-    '/components': { redirect: '/components/app', prerender: false },
-    '/dev/components': { redirect: '/dev/components/app', prerender: false }
+    '/': { redirect: '/getting-started/installation', prerender: false },
+    '/components': { redirect: '/components/app', prerender: false }
   },
   // componentMeta: {
   //   exclude: [