docs: migrate to @nuxthq/ui-kit (#405)

Co-authored-by: Sébastien Chopin <seb@nuxt.com>

docs/content/1.getting-started/1.index.md

@@ -8,7 +8,7 @@ head:
 
 This module has been developed by the [NuxtLabs](https://nuxtlabs.com/) team for [Volta](https://volta.net) and [Nuxt Studio](https://nuxt.studio/), its goal is to provide everything related to UI when building a Nuxt app. This includes components, icons, colors, dark mode but also keyboard shortcuts.
 
-::alert{icon="i-heroicons-light-bulb"}
+::callout{icon="i-heroicons-light-bulb"}
 [Volta](https://volta.net/) entire UI is built with this module alongside the 50+ keyboard shortcuts defined.
 ::
 
@@ -31,7 +31,3 @@ This module has been developed by the [NuxtLabs](https://nuxtlabs.com/) team for
 - [tailwindlabs/headlessui](https://github.com/tailwindlabs/headlessui)
 - [vueuse/vueuse](https://github.com/vueuse/vueuse)
 - [egoist/tailwindcss-icons](https://github.com/egoist/tailwindcss-icons)
-
-::alert{icon="i-heroicons-exclamation-triangle"}
-This documentation is still a work in progress and will be updated regularly.
-::

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

@@ -2,6 +2,8 @@
 description: 'Learn how to install and configure the module in your Nuxt app.'
 ---
 
+## Quick Start
+
 1. Install `@nuxthq/ui` dependency to your project:
 
 ::code-group
@@ -30,14 +32,10 @@ export default defineNuxtConfig({
 
 That's it! You can now use all the components and composables in your Nuxt app ✨
 
-::alert{icon="i-heroicons-exclamation-triangle"}
+::callout{icon="i-heroicons-exclamation-triangle"}
 As this module installs [@nuxtjs/tailwindcss](https://tailwindcss.nuxtjs.org/) and [@nuxtjs/color-mode](https://color-mode.nuxtjs.org/) for you, you should remove them from your `modules` and `dependencies` if you've previously installed them manually.
 ::
 
-## Playground
-
-:u-button{icon="i-simple-icons-stackblitz" label="Play on StackBlitz" size="lg" to="https://stackblitz.com/edit/nuxtlabs-ui?file=app.config.ts,app.vue" target="_blank"}
-
 ## IntelliSense
 
 If you're using VSCode, you can install the [Tailwind CSS IntelliSense](https://marketplace.visualstudio.com/items?itemName=bradlc.vscode-tailwindcss) extension to get autocompletion for the classes.

docs/content/1.getting-started/3.theming.md

@@ -19,7 +19,7 @@ export default defineAppConfig({
 })
 ```
 
-::alert{icon="i-heroicons-light-bulb"}
+::callout{icon="i-heroicons-light-bulb"}
 Try to change the `primary` and `gray` colors by clicking on the :u-icon{name="i-heroicons-swatch-20-solid" class="w-4 h-4 align-middle text-primary-500 dark:text-primary-400"} button in the header.
 ::
 
@@ -29,11 +29,11 @@ To provide dynamic colors that can be changed at runtime, this module uses CSS v
 
 Likewise, you can't define a `primary` color in your `tailwind.config.ts` as it would conflict with the `primary` color defined by the module.
 
-::alert{icon="i-heroicons-light-bulb"}
+::callout{icon="i-heroicons-light-bulb"}
 We'd advise you to use those colors in your components and pages, e.g. `text-primary-500 dark:text-primary-400`, `bg-gray-100 dark:bg-gray-900`, etc. so your app automatically adapts when changing your `app.config.ts`.
 ::
 
-Components having a `color` prop like [Avatar](/elements/avatar#chip), [Badge](/elements/badge#style), [Button](/elements/button#style), [Input](/elements/input#style) (inherited in [Select](/forms/select) and [SelectMenu](/forms/select-menu)), [Radio](/forms/radio), [Checkbox](/forms/checkbox), [Toggle](/forms/toggle), [Range](/forms/range) and [Notification](/overlays/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.
+Components having a `color` prop like [Avatar](/elements/avatar#chip), [Badge](/elements/badge#style), [Button](/elements/button#style), [Input](/forms/input#style) (inherited in [Select](/forms/select) and [SelectMenu](/forms/select-menu)), [Radio](/forms/radio), [Checkbox](/forms/checkbox), [Toggle](/forms/toggle), [Range](/forms/range) and [Notification](/overlays/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.
 
@@ -73,7 +73,7 @@ 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.
 
-::alert{icon="i-heroicons-puzzle-piece"}
+::callout{icon="i-heroicons-puzzle-piece"}
 Learn how to build a color mode button in the [Examples](/getting-started/examples#color-mode-button) page.
 ::
 
@@ -87,7 +87,7 @@ export default defineNuxtConfig({
 })
 ```
 
-::alert{icon="i-heroicons-light-bulb"}
+::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.
 ::
 
@@ -115,7 +115,7 @@ Each component has a `ui` prop that allows you to customize everything specifica
 </template>
 ```
 
-::alert{icon="i-heroicons-light-bulb"}
+::callout{icon="i-heroicons-light-bulb"}
 You can find the default classes for each component under the `Preset` section.
 ::
 
@@ -165,7 +165,7 @@ export default defineNuxtConfig({
 })
 ```
 
-::alert{icon="i-heroicons-light-bulb"}
+::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).
 ::
 

docs/content/1.getting-started/4.shortcuts.md

@@ -21,7 +21,7 @@ Shortcuts are displayed and styled through the [Kbd](/elements/kbd) component.
 </template>
 ```
 
-::alert{icon="i-heroicons-light-bulb"}
+::callout{icon="i-heroicons-light-bulb"}
 You will have a preview of how shortcuts are rendered in each component page.
 ::
 

docs/content/1.getting-started/5.examples.md

@@ -3,7 +3,7 @@ title: Examples
 description: Discover some real-life examples of components you can build.
 ---
 
-::alert{icon="i-heroicons-wrench-screwdriver"}
+::callout{icon="i-heroicons-wrench-screwdriver"}
 If you have any ideas of examples you'd like to see, please comment on [this issue](https://github.com/nuxtlabs/ui/issues/297).
 ::
 
@@ -153,7 +153,7 @@ padding: false
 :command-palette-theme-algolia{class="max-h-[480px] rounded-md"}
 ::
 
-::alert{icon="i-simple-icons-github" to="https://github.com/nuxtlabs/ui/blob/dev/docs/components/content/themes/CommandPaletteThemeAlgolia.vue#L23"}
+::callout{icon="i-simple-icons-github" to="https://github.com/nuxtlabs/ui/blob/dev/docs/components/content/themes/CommandPaletteThemeAlgolia.vue#L23"}
 Take a look at the component!
 ::
 
@@ -168,7 +168,7 @@ padding: false
 :command-palette-theme-raycast{class="max-h-[480px] rounded-md"}
 ::
 
-::alert{icon="i-simple-icons-github" to="https://github.com/nuxtlabs/ui/blob/dev/docs/components/content/themes/CommandPaletteThemeRaycast.vue#L30"}
+::callout{icon="i-simple-icons-github" to="https://github.com/nuxtlabs/ui/blob/dev/docs/components/content/themes/CommandPaletteThemeRaycast.vue#L30"}
 Take a look at the component!
 ::
 
@@ -261,6 +261,6 @@ Here are some examples of how components look like in RTL mode.
 :pagination-example-r-t-l
 ::
 
-::alert{icon="i-simple-icons-github" to="https://github.com/nuxtlabs/ui/blob/dev/docs/components/content/examples/PaginationExampleRTL.vue"}
+::callout{icon="i-simple-icons-github" to="https://github.com/nuxtlabs/ui/blob/dev/docs/components/content/examples/PaginationExampleRTL.vue"}
 Take a look at the component!
 ::