chore(release): v3.0.0-alpha.2

Co-authored-by: Benjamin Canac <canacb1@gmail.com>

.github/workflows/ci-dev.yml

@@ -1,72 +0,0 @@
-name: ci-dev
-
-on:
-  push:
-    branches:
-      - dev
-  pull_request:
-    branches:
-      - dev
-
-jobs:
-  ci:
-    runs-on: ${{ matrix.os }}
-
-    permissions:
-      contents: read
-      pull-requests: read
-
-    strategy:
-      matrix:
-        os: [ubuntu-latest] # macos-latest, windows-latest
-        node: [20]
-
-    env:
-      NUXT_GITHUB_TOKEN: ${{ secrets.NUXT_GITHUB_TOKEN }}
-
-    steps:
-      - name: Checkout
-        uses: actions/checkout@v4
-
-      - name: Install pnpm
-        uses: pnpm/action-setup@v4
-
-      - name: Install node
-        uses: actions/setup-node@v4
-        with:
-          node-version: ${{ matrix.node }}
-          cache: pnpm
-
-      - name: Filter changes
-        uses: dorny/paths-filter@v3
-        id: changes
-        with:
-          filters: |
-            src:
-              - 'src/**'
-              - 'package.json'
-              - 'pnpm-lock.yaml'
-
-      - name: Install dependencies
-        run: pnpm install
-
-      - name: Prepare
-        run: pnpm run dev:prepare
-
-      - name: Lint
-        run: pnpm run lint
-
-      - name: Typecheck
-        run: pnpm run typecheck
-
-      - name: Test
-        run: pnpm run test run
-
-      - name: Build
-        run: pnpm run build
-
-      - name: Release Edge
-        if: github.event_name == 'push' && steps.changes.outputs.src == 'true'
-        run: ./scripts/release-edge.sh
-        env:
-          NODE_AUTH_TOKEN: ${{secrets.NODE_AUTH_TOKEN}}

.github/workflows/ci-v3.yml

@@ -37,16 +37,6 @@ jobs:
           node-version: ${{ matrix.node }}
           cache: pnpm
 
-      - name: Filter changes
-        uses: dorny/paths-filter@v3
-        id: changes
-        with:
-          filters: |
-            src:
-              - 'src/**'
-              - 'package.json'
-              - 'pnpm-lock.yaml'
-
       - name: Install dependencies
         run: pnpm install
 

.github/workflows/ci.yml

@@ -1,61 +0,0 @@
-name: ci-main
-
-on:
-  push:
-    branches:
-      - main
-
-jobs:
-  ci:
-    runs-on: ${{ matrix.os }}
-
-    strategy:
-      matrix:
-        os: [ubuntu-latest] # macos-latest, windows-latest
-        node: [20]
-
-    env:
-      NUXT_GITHUB_TOKEN: ${{ secrets.NUXT_GITHUB_TOKEN }}
-
-    steps:
-      - name: Checkout
-        uses: actions/checkout@v4
-
-      - name: Install pnpm
-        uses: pnpm/action-setup@v4
-
-      - name: Install node
-        uses: actions/setup-node@v4
-        with:
-          node-version: ${{ matrix.node }}
-          cache: pnpm
-
-      - name: Install dependencies
-        run: pnpm install
-
-      - name: Prepare
-        run: pnpm run dev:prepare
-
-      - name: Lint
-        run: pnpm run lint
-
-      - name: Typecheck
-        run: pnpm run typecheck
-
-      - name: Test
-        run: pnpm run test run
-
-      - name: Build
-        run: pnpm run build
-
-      - name: Version Check
-        id: check
-        uses: EndBug/version-check@v2
-        with:
-          token: ${{ secrets.GITHUB_TOKEN }}
-
-      - name: Release
-        if: github.event_name == 'push' && steps.check.outputs.changed == 'true'
-        run: ./scripts/release.sh
-        env:
-          NODE_AUTH_TOKEN: ${{ secrets.NODE_AUTH_TOKEN }}

CHANGELOG.md

@@ -1,5 +1,41 @@
 # Changelog
 
+## [3.0.0-alpha.2](https://github.com/nuxt/ui/compare/v3.0.0-alpha.1...v3.0.0-alpha.2) (2024-09-18)
+
+
+### Features
+
+* **Button:** loading-auto ([#2198](https://github.com/nuxt/ui/issues/2198)) ([ed18e74](https://github.com/nuxt/ui/commit/ed18e7454986ed104fc73b77e88573b3c1df8566))
+* **module:** improve options ([5076b8c](https://github.com/nuxt/ui/commit/5076b8cc9e908cf289150c668b1707dc1397dba3))
+* **module:** install `@nuxt/fonts` by default ([8898a5d](https://github.com/nuxt/ui/commit/8898a5d6758b1047e35bcdf648362c42de387488))
+
+
+### Bug Fixes
+
+* **Button:** button link not showing disabled classes ([#2189](https://github.com/nuxt/ui/issues/2189)) ([7c2adf2](https://github.com/nuxt/ui/commit/7c2adf2f7fc88174897cc775c752414a8b84f3a9))
+* **Button:** duplicate click handlers ([#2213](https://github.com/nuxt/ui/issues/2213)) ([dd6bf56](https://github.com/nuxt/ui/commit/dd6bf5694ff05ed1eeb9df8c42f833f51dbec66e))
+* **playground:** typecheck ([cf92c5f](https://github.com/nuxt/ui/commit/cf92c5f3f0e0f329844ee60772773a844ea1cc71))
+
+## [3.0.0-alpha.1](https://github.com/nuxt/ui/compare/v3.0.0-alpha.0...v3.0.0-alpha.1) (2024-09-11)
+
+
+### Features
+
+* **module:** hard-code css file to be imported anywhere ([62a2643](https://github.com/nuxt/ui/commit/62a2643a80e7ab6c6e154ba59801d393d9a53c40))
+
+
+### Bug Fixes
+
+* **ContextMenu/DropdownMenu:** lint unused var ([a03a55c](https://github.com/nuxt/ui/commit/a03a55cf8d89c45fba6607f83b67367cfd419c3e))
+* import from `../types/index` ([3e28c8f](https://github.com/nuxt/ui/commit/3e28c8f35a64a7c19ce18f36dbe580503f2050bc))
+* **Link:** only bind necessary slot props ([7fe7ff6](https://github.com/nuxt/ui/commit/7fe7ff6fe2055d29b7fd54793ca52850842294e3))
+* **NavigationMenu:** handle open state hover effect ([84186e5](https://github.com/nuxt/ui/commit/84186e52e997a4dd55f98bf7bc0199656943b9c9))
+* **plugins:** infer type from `[#app](https://github.com/nuxt/ui/issues/app)` to remove build warning ([debf9cc](https://github.com/nuxt/ui/commit/debf9cc85339b7b162ac34392757214a16dad977))
+* **README:** license link ([71428da](https://github.com/nuxt/ui/commit/71428da3dc9c6f17a6e21b2bd889f6090be127d6))
+* **templates:** augment `@nuxt/schema` rather than `nuxt/schema` ([40b3570](https://github.com/nuxt/ui/commit/40b3570343dc68684d3ecf03e1a439e815f57ba3))
+* **types:** no longer need to import types with `/index` suffix ([8277167](https://github.com/nuxt/ui/commit/82771673f20b6ece7e126a4f8914311473d687e3))
+* **useButtonGroup:** lint ([97d0593](https://github.com/nuxt/ui/commit/97d05936cd198026e6c4d66920266e0b4b85242c))
+
 ## [3.0.0-alpha.0](https://github.com/nuxt/ui/compare/v2.15.0...v3.0.0-alpha.0) (2024-09-05)
 
 

README.md

@@ -94,7 +94,7 @@ Licensed under the [MIT license](https://github.com/nuxt/ui/blob/dev/LICENSE.md)
 [npm-downloads-href]: https://npmjs.com/package/@nuxt/ui
 
 [license-src]: https://img.shields.io/github/license/nuxt/ui.svg?style=flat&colorA=18181B&colorB=28CF8D
-[license-href]: https://github.com/nuxt/ui/blob/main/LICENSE
+[license-href]: https://github.com/nuxt/ui/blob/main/LICENSE.md
 
 [nuxt-src]: https://img.shields.io/badge/Nuxt-18181B?logo=nuxt.js
 [nuxt-href]: https://nuxt.com

docs/app/app.vue

@@ -1,7 +1,7 @@
 <script setup lang="ts">
 import { withoutTrailingSlash } from 'ufo'
 // import { debounce } from 'perfect-debounce'
-import type { ContentSearchFile } from '@nuxt/ui-pro'
+// import type { ContentSearchFile } from '@nuxt/ui-pro'
 
 const route = useRoute()
 // const colorMode = useColorMode()
@@ -9,7 +9,7 @@ const runtimeConfig = useRuntimeConfig()
 const { integrity, api } = runtimeConfig.public.content
 
 const { data: navigation } = await useAsyncData('navigation', () => fetchContentNavigation(), { default: () => [] })
-const { data: files } = await useLazyFetch<ContentSearchFile[]>(`${api.baseURL}/search${integrity ? '.' + integrity : ''}`, { default: () => [] })
+const { data: files } = await useLazyFetch<any[]>(`${api.baseURL}/search${integrity ? '.' + integrity : ''}`, { default: () => [] })
 
 const searchTerm = ref('')
 
@@ -91,3 +91,14 @@ provide('files', files)
     <LazyUContentSearch v-model:search-term="searchTerm" :files="files" :navigation="navigation" :fuse="{ resultLimit: 42 }" />
   </UApp>
 </template>
+
+<style>
+@import "tailwindcss";
+@import "@nuxt/ui-pro";
+
+@source "../content/**/*.md";
+
+@theme {
+  --font-family-sans: 'Inter', sans-serif;
+}
+</style>

docs/app/components/Banner.vue

@@ -1,5 +1,5 @@
 <template>
-  <UBanner icon="i-heroicons-light-bulb" :actions="[{ label: 'Go to Nuxt UI v2', to: 'https://ui.nuxt.com', trailingIcon: 'i-heroicons-arrow-right-20-solid', class: 'rounded-full' }]" :close="false">
+  <UBanner icon="i-heroicons-wrench-screwdriver" :actions="[{ label: 'Go to Nuxt UI v2', to: 'https://ui.nuxt.com', trailingIcon: 'i-heroicons-arrow-right-20-solid', class: 'rounded-full' }]" :close="false">
     <template #title>
       You're looking at the documentation for <span class="font-semibold">Nuxt UI v3</span>!
     </template>

docs/app/components/content/ComponentCode.vue

@@ -6,6 +6,8 @@ import * as theme from '#build/ui'
 import { get, set } from '#ui/utils'
 
 const props = defineProps<{
+  /** Override the slug taken from the route */
+  slug?: string
   class?: any
   /** List of props to ignore in selection */
   ignore?: string[]
@@ -32,7 +34,7 @@ const props = defineProps<{
 const route = useRoute()
 const { $prettier } = useNuxtApp()
 
-const camelName = camelCase(route.params.slug[route.params.slug.length - 1])
+const camelName = camelCase(props.slug ?? route.params.slug?.[route.params.slug.length - 1] ?? '')
 const name = `U${upperFirst(camelName)}`
 
 const componentProps = reactive({ ...(props.props || {}) })
@@ -45,11 +47,11 @@ function setComponentProp(name: string, value: any) {
   set(componentProps, name, value)
 }
 
-const componentTheme = theme[camelName]
+const componentTheme = (theme as any)[camelName]
 const meta = await fetchComponentMeta(name as any)
 
-function mapKeys(obj, parentKey = '') {
-  return Object.entries(obj || {}).flatMap(([key, value]) => {
+function mapKeys(obj: object, parentKey = ''): any {
+  return Object.entries(obj || {}).flatMap(([key, value]: [string, any]) => {
     if (typeof value === 'object' && !Array.isArray(value)) {
       return mapKeys(value, key)
     }
@@ -63,15 +65,15 @@ function mapKeys(obj, parentKey = '') {
 const options = computed(() => {
   const keys = mapKeys(props.props || {})
 
-  return keys.map((key) => {
+  return keys.map((key: string) => {
     const prop = meta?.meta?.props?.find((prop: any) => prop.name === key)
     const propItems = get(props.items, key, [])
     const items = propItems.length
-      ? propItems.map(item => ({
+      ? propItems.map((item: any) => ({
         value: item,
         label: item
       }))
-      : prop?.type === 'boolean'
+      : prop?.type === 'boolean' || prop?.type === 'boolean | undefined'
         ? [{ value: true, label: 'true' }, { value: false, label: 'false' }]
         : Object.keys(componentTheme?.variants?.[key] || {}).map(variant => ({
           value: variant,
@@ -253,7 +255,7 @@ const { data: ast } = await useAsyncData(`component-code-${name}-${JSON.stringif
         <component :is="name" v-bind="componentProps" @update:model-value="!!componentProps.modelValue && setComponentProp('modelValue', $event)">
           <template v-for="slot in Object.keys(slots || {})" :key="slot" #[slot]>
             <ContentSlot :name="slot" unwrap="p">
-              {{ slots[slot] }}
+              {{ slots?.[slot] }}
             </ContentSlot>
           </template>
         </component>

docs/app/components/content/ComponentEmits.vue

@@ -3,7 +3,7 @@ import { upperFirst, camelCase } from 'scule'
 
 const route = useRoute()
 
-const camelName = camelCase(route.params.slug[route.params.slug.length - 1])
+const camelName = camelCase(route.params.slug?.[route.params.slug.length - 1] ?? '')
 const name = `U${upperFirst(camelName)}`
 
 const meta = await fetchComponentMeta(name as any)

docs/app/components/content/ComponentExample.vue

@@ -21,8 +21,26 @@ const props = withDefaults(defineProps<{
    * @defaultValue true
    */
   preview?: boolean
+
+  /**
+   * Whether to show the source code
+   * @defaultValue true
+   */
+  source?: boolean
+
+  /**
+   * A list of variable props to link to the component.
+   */
+  options?: Array<{
+    name: string
+    label: string
+    items: any[]
+    default: any
+    multiple: boolean
+  }>
 }>(), {
-  preview: true
+  preview: true,
+  source: true
 })
 
 const { $prettier } = useNuxtApp()
@@ -71,16 +89,48 @@ const { data: ast } = await useAsyncData(`component-example-${camelName}`, async
 
   return parseMarkdown(formatted)
 }, { watch: [code] })
+
+const optionsValues = ref(props.options?.reduce((acc, option) => {
+  if (option.name) {
+    acc[option.name] = option.default
+  }
+  return acc
+}, {} as Record<string, any>) || {})
 </script>
 
 <template>
   <div class="my-5">
     <div v-if="preview">
-      <div class="flex border border-b-0 border-gray-300 dark:border-gray-700 relative p-4 rounded-t-md" :class="[props.class]">
-        <component :is="camelName" v-bind="componentProps" />
+      <div class="border border-gray-300 dark:border-gray-700 relative z-[1]" :class="[props.class, { 'border-b-0 rounded-t-md': props.source, 'rounded-md': !props.source }]">
+        <div v-if="props.options?.length" class="flex gap-4 p-4 border-b border-gray-300 dark:border-gray-700">
+          <UFormField
+            v-for="option in props.options"
+            :key="option.name"
+            :label="option.label"
+            :name="option.name"
+            size="sm"
+            class="inline-flex ring ring-gray-300 dark:ring-gray-700 rounded"
+            :ui="{
+              wrapper: 'bg-gray-50 dark:bg-gray-800/50 rounded-l flex border-r border-gray-300 dark:border-gray-700',
+              label: 'text-gray-500 dark:text-gray-400 px-2 py-1.5',
+              container: 'mt-0'
+            }"
+          >
+            <USelectMenu
+              v-model="optionsValues[option.name]"
+              :items="option.items"
+              class="rounded rounded-l-none w-40"
+              multiple
+              :ui="{ itemLeadingChip: 'size-2' }"
+            />
+          </UFormField>
+        </div>
+        <div class="p-4">
+          <component :is="camelName" v-bind="{ ...componentProps, ...optionsValues }" />
+        </div>
       </div>
     </div>
 
-    <MDCRenderer v-if="ast" :body="ast.body" :data="ast.data" class="[&_pre]:!rounded-t-none [&_div.my-5]:!mt-0" />
+    <MDCRenderer v-if="ast && props.source" :body="ast.body" :data="ast.data" class="[&_pre]:!rounded-t-none [&_div.my-5]:!mt-0" />
   </div>
 </template>

docs/app/components/content/ComponentProps.vue

@@ -9,10 +9,10 @@ const props = defineProps<{
 
 const route = useRoute()
 
-const camelName = camelCase(route.params.slug[route.params.slug.length - 1])
+const camelName = camelCase(route.params.slug?.[route.params.slug.length - 1] ?? '')
 const name = `U${upperFirst(camelName)}`
 
-const componentTheme = theme[camelName]
+const componentTheme = (theme as any)[camelName]
 const meta = await fetchComponentMeta(name as any)
 
 const metaProps: ComputedRef<ComponentMeta['props']> = computed(() => {
@@ -43,6 +43,8 @@ const metaProps: ComputedRef<ComponentMeta['props']> = computed(() => {
     if (b.name === 'ui') {
       return -1
     }
+
+    return 0
   })
 })
 </script>

docs/app/components/content/ComponentPropsSchema.vue

@@ -6,7 +6,7 @@ const props = defineProps<{
   ignore?: string[]
 }>()
 
-function getSchemaProps(schema: PropertyMeta['schema']) {
+function getSchemaProps(schema: PropertyMeta['schema']): any {
   if (!schema || typeof schema === 'string' || !schema.schema) {
     return []
   }
@@ -15,12 +15,12 @@ function getSchemaProps(schema: PropertyMeta['schema']) {
     return Object.values(schema.schema).filter(prop => !props.ignore?.includes(prop.name))
   }
 
-  return (Array.isArray(schema.schema) ? schema.schema : Object.values(schema.schema)).flatMap(getSchemaProps)
+  return (Array.isArray(schema.schema) ? schema.schema : Object.values(schema.schema)).flatMap(getSchemaProps as any)
 }
 
 const schemaProps = computed(() => {
-  return getSchemaProps(props.prop.schema).map((prop) => {
-    const defaultValue = prop.default ?? prop.tags?.find(tag => tag.name === 'defaultValue')?.text
+  return getSchemaProps(props.prop.schema).map((prop: any) => {
+    const defaultValue = prop.default ?? prop.tags?.find((tag: any) => tag.name === 'defaultValue')?.text
     let description = prop.description
     if (defaultValue) {
       description = description ? `${description} Defaults to \`${defaultValue}\`{lang="ts-type"}.` : `Defaults to \`${defaultValue}\`{lang="ts-type"}.`

docs/app/components/content/ComponentSlots.vue

@@ -3,7 +3,7 @@ import { upperFirst, camelCase } from 'scule'
 
 const route = useRoute()
 
-const camelName = camelCase(route.params.slug[route.params.slug.length - 1])
+const camelName = camelCase(route.params.slug?.[route.params.slug.length - 1] ?? '')
 const name = `U${upperFirst(camelName)}`
 
 const meta = await fetchComponentMeta(name as any)

docs/app/components/content/ComponentTheme.vue

@@ -5,11 +5,11 @@ import * as theme from '#build/ui'
 
 const route = useRoute()
 
-const name = camelCase(route.params.slug[route.params.slug.length - 1])
+const name = camelCase(route.params.slug?.[route.params.slug.length - 1] ?? '')
 
 const strippedCompoundVariants = ref(false)
 
-function stripCompoundVariants(component) {
+function stripCompoundVariants(component: any) {
   if (component.compoundVariants) {
     component.compoundVariants = component.compoundVariants.filter((compoundVariant: any) => {
       if (compoundVariant.color) {
@@ -38,7 +38,7 @@ function stripCompoundVariants(component) {
 const component = computed(() => {
   return {
     ui: {
-      [name]: stripCompoundVariants(theme[name])
+      [name]: stripCompoundVariants((theme as any)[name])
     }
   }
 })
@@ -54,7 +54,7 @@ export default defineAppConfig(${json5.stringify(component.value, null, 2).repla
 
 ${strippedCompoundVariants.value
     ? `
-::callout{icon="i-simple-icons-github" to="https://github.com/benjamincanac/ui3/blob/dev/src/theme/${name}.ts"}
+::callout{icon="i-simple-icons-github" to="https://github.com/nuxt/ui/blob/v3/src/theme/${name}.ts"}
 Some colors in \`compoundVariants\` are omitted for readability. Check out the source code on GitHub.
 ::`
     : ''}

docs/app/components/content/HighlightInlineType.vue

@@ -4,17 +4,24 @@ const props = defineProps<{
 }>()
 
 const type = computed(() => {
-  if (props.type.includes(', "as" | "asChild" | "forceMount">')) {
-    return props.type.replace(`, "as" | "asChild" | "forceMount">`, ``).replace('Omit<', '')
+  let type = props.type
+  if (type.includes(', "as" | "asChild" | "forceMount">')) {
+    type = type.replace(`, "as" | "asChild" | "forceMount">`, ``).replace('Omit<', '')
   }
-  if (props.type.includes(', "as" | "asChild">')) {
-    return props.type.replace(', "as" | "asChild">', '').replace('Omit<', '')
+  if (type.includes(', "as" | "asChild">')) {
+    type = type.replace(', "as" | "asChild">', '').replace('Omit<', '')
+  }
+  if (type.startsWith('undefined |')) {
+    type = type.replace('undefined |', '')
+  }
+  if (type.endsWith('| undefined')) {
+    type = type.replace('| undefined', '')
   }
 
-  return props.type
+  return type
 })
 
-const { data: ast } = await useAsyncData(`hightlight-inline-code-${props.type}`, () => parseMarkdown(`\`${type.value}\`{lang="ts-type"}`))
+const { data: ast } = await useAsyncData(`hightlight-inline-code-${type.value}`, () => parseMarkdown(`\`${type.value}\`{lang="ts-type"}`))
 </script>
 
 <template>

docs/app/components/content/IconsTheme.vue

@@ -1,32 +1,19 @@
 <script setup lang="ts">
 import json5 from 'json5'
-
-const appConfig = useAppConfig()
-const { $prettier } = useNuxtApp()
+import icons from '../../../../src/theme/icons'
 
 const { data: ast } = await useAsyncData(`icons-theme`, async () => {
   const md = `
 \`\`\`ts [app.config.ts]
-export default defineAppConfig({
-  ui: {
-    icons: ${json5.stringify(appConfig.ui.icons, null, 2)}
-  }
-})
+export default defineAppConfig(${json5.stringify({
+    ui: {
+      icons
+    }
+  }, null, 2).replace(/,([ |\t\n]+[}|\])])/g, '$1')})
 \`\`\`\
 `
 
-  let formatted = ''
-  try {
-    formatted = await $prettier.format(md, {
-      trailingComma: 'none',
-      semi: false,
-      singleQuote: true
-    })
-  } catch {
-    formatted = md
-  }
-
-  return parseMarkdown(formatted)
+  return parseMarkdown(md)
 })
 </script>
 

docs/app/components/content/examples/button/ButtonLoadingAutoExample.vue

@@ -0,0 +1,11 @@
+<script setup lang="ts">
+async function onClick() {
+  return new Promise<void>(res => setTimeout(res, 1000))
+}
+</script>
+
+<template>
+  <UButton loading-auto @click="onClick">
+    Button
+  </UButton>
+</template>

docs/app/components/content/examples/button/ButtonLoadingAutoFormExample.vue

@@ -0,0 +1,23 @@
+<script setup lang="ts">
+const state = reactive({ fullName: '' })
+
+async function onSubmit() {
+  return new Promise<void>(res => setTimeout(res, 1000))
+}
+
+async function validate(data: Partial<typeof state>) {
+  if (!data.fullName?.length) return [{ name: 'fullName', message: 'Required' }]
+  return []
+}
+</script>
+
+<template>
+  <UForm :state="state" :validate="validate" @submit="onSubmit">
+    <UFormField name="fullName" label="Full name">
+      <UInput v-model="state.fullName" />
+    </UFormField>
+    <UButton type="submit" class="mt-2" loading-auto>
+      Submit
+    </UButton>
+  </UForm>
+</template>

docs/app/components/content/examples/chip/ChipShowExample.vue

@@ -2,19 +2,16 @@
 const statuses = ['online', 'away', 'busy', 'offline']
 const status = ref(statuses[0])
 
-const color = computed(() => ({
-  online: 'green',
-  away: 'amber',
-  busy: 'red',
-  offline: 'gray'
-})[status.value] as any)
+const color = computed(() => status.value ? { online: 'green', away: 'amber', busy: 'red', offline: 'gray' }[status.value] as any : 'online')
 
 const show = computed(() => status.value !== 'offline')
 
 // Note: This is for demonstration purposes only. Don't do this at home.
 onMounted(() => {
   setInterval(() => {
-    status.value = statuses[(statuses.indexOf(status.value) + 1) % statuses.length]
+    if (status.value) {
+      status.value = statuses[(statuses.indexOf(status.value) + 1) % statuses.length]
+    }
   }, 1000)
 })
 </script>

docs/app/components/content/examples/form/FormExampleBasic.vue

@@ -0,0 +1,37 @@
+<script setup lang="ts">
+import type { FormError, FormSubmitEvent } from '#ui/types'
+
+const state = reactive({
+  email: undefined,
+  password: undefined
+})
+
+const validate = (state: any): FormError[] => {
+  const errors = []
+  if (!state.email) errors.push({ name: 'email', message: 'Required' })
+  if (!state.password) errors.push({ name: 'password', message: 'Required' })
+  return errors
+}
+
+const toast = useToast()
+async function onSubmit(event: FormSubmitEvent<any>) {
+  toast.add({ title: 'Success', description: 'The form has been submitted.', color: 'green' })
+  console.log(event.data)
+}
+</script>
+
+<template>
+  <UForm :validate="validate" :state="state" class="space-y-4" @submit="onSubmit">
+    <UFormField label="Email" name="email">
+      <UInput v-model="state.email" />
+    </UFormField>
+
+    <UFormField label="Password" name="password">
+      <UInput v-model="state.password" type="password" />
+    </UFormField>
+
+    <UButton type="submit">
+      Submit
+    </UButton>
+  </UForm>
+</template>

docs/app/components/content/examples/form/FormExampleElements.vue

@@ -0,0 +1,115 @@
+<script setup lang="ts">
+import { z } from 'zod'
+import type { FormSubmitEvent, Form } from '@nuxt/ui'
+
+const schema = z.object({
+  input: z.string().min(10),
+  inputMenu: z.any().refine(option => option?.value === 'option-2', {
+    message: 'Select Option 2'
+  }),
+  inputMenuMultiple: z.any().refine(values => !!values?.find((option: any) => option.value === 'option-2'), {
+    message: 'Include Option 2'
+  }),
+  textarea: z.string().min(10),
+  select: z.string().refine(value => value === 'option-2', {
+    message: 'Select Option 2'
+  }),
+  selectMenu: z.any().refine(option => option?.value === 'option-2', {
+    message: 'Select Option 2'
+  }),
+  selectMenuMultiple: z.any().refine(values => !!values?.find((option: any) => option.value === 'option-2'), {
+    message: 'Include Option 2'
+  }),
+  switch: z.boolean().refine(value => value === true, {
+    message: 'Toggle me'
+  }),
+  checkbox: z.boolean().refine(value => value === true, {
+    message: 'Check me'
+  }),
+  radioGroup: z.string().refine(value => value === 'option-2', {
+    message: 'Select Option 2'
+  }),
+  slider: z.number().max(20, { message: 'Must be less than 20' })
+})
+
+type Schema = z.output<typeof schema>
+
+const state = reactive<Partial<Schema>>({})
+const form = ref<Form<Schema>>()
+
+const items = [
+  { label: 'Option 1', value: 'option-1' },
+  { label: 'Option 2', value: 'option-2' },
+  { label: 'Option 3', value: 'option-3' }
+]
+
+const toast = useToast()
+async function onSubmit(event: FormSubmitEvent<any>) {
+  toast.add({ title: 'Success', description: 'The form has been submitted.', color: 'green' })
+  console.log(event.data)
+}
+</script>
+
+<template>
+  <UForm ref="form" :state="state" :schema="schema" @submit="onSubmit">
+    <div class="grid grid-cols-3 gap-4">
+      <UFormField label="Input" name="input">
+        <UInput v-model="state.input" placeholder="john@lennon.com" class="w-40" />
+      </UFormField>
+
+      <div class="flex flex-col gap-4">
+        <UFormField name="switch">
+          <USwitch v-model="state.switch" label="Switch me" />
+        </UFormField>
+
+        <UFormField name="checkbox">
+          <UCheckbox v-model="state.checkbox" label="Check me" />
+        </UFormField>
+      </div>
+
+      <UFormField name="slider" label="Slider">
+        <USlider v-model="state.slider" />
+      </UFormField>
+
+      <UFormField name="select" label="Select">
+        <USelect v-model="state.select" :items="items" />
+      </UFormField>
+
+      <UFormField name="selectMenu" label="Select Menu">
+        <USelectMenu v-model="state.selectMenu" :items="items" />
+      </UFormField>
+
+      <UFormField name="selectMenuMultiple" label="Select Menu (Multiple)">
+        <USelectMenu v-model="state.selectMenuMultiple" multiple :items="items" />
+      </UFormField>
+
+      <UFormField name="inputMenu" label="Input Menu">
+        <UInputMenu v-model="state.inputMenu" :items="items" />
+      </UFormField>
+
+      <UFormField name="inputMenuMultiple" label="Input Menu (Multiple)">
+        <UInputMenu v-model="state.inputMenuMultiple" multiple :items="items" />
+      </UFormField>
+
+      <span />
+
+      <UFormField label="Textarea" name="textarea">
+        <UTextarea v-model="state.textarea" />
+      </UFormField>
+
+      <UFormField name="radioGroup">
+        <URadioGroup v-model="state.radioGroup" legend="Radio group" :items="items" />
+      </UFormField>
+    </div>
+
+    <div class="flex gap-2 mt-8">
+      <UButton color="gray" type="submit">
+        Submit
+      </UButton>
+
+      <UButton color="gray" variant="outline" @click="form?.clear()">
+        Clear
+      </UButton>
+    </div>
+  </UForm>
+</template>

docs/app/components/content/examples/form/FormExampleJoi.vue

@@ -0,0 +1,38 @@
+<script setup lang="ts">
+import Joi from 'joi'
+import type { FormSubmitEvent } from '#ui/types'
+
+const schema = Joi.object({
+  email: Joi.string().required(),
+  password: Joi.string()
+    .min(8)
+    .required()
+})
+
+const state = reactive({
+  email: undefined,
+  password: undefined
+})
+
+const toast = useToast()
+async function onSubmit(event: FormSubmitEvent<any>) {
+  toast.add({ title: 'Success', description: 'The form has been submitted.', color: 'green' })
+  console.log(event.data)
+}
+</script>
+
+<template>
+  <UForm :schema="schema" :state="state" class="space-y-4" @submit="onSubmit">
+    <UFormField label="Email" name="email">
+      <UInput v-model="state.email" />
+    </UFormField>
+
+    <UFormField label="Password" name="password">
+      <UInput v-model="state.password" type="password" />
+    </UFormField>
+
+    <UButton type="submit">
+      Submit
+    </UButton>
+  </UForm>
+</template>

docs/app/components/content/examples/form/FormExampleNested.vue

@@ -0,0 +1,54 @@
+<script setup lang="ts">
+import { z } from 'zod'
+import type { FormSubmitEvent } from '@nuxt/ui'
+
+const schema = z.object({
+  name: z.string().min(2),
+  news: z.boolean()
+})
+
+type Schema = z.output<typeof schema>
+
+const nestedSchema = z.object({
+  email: z.string().email()
+})
+
+type NestedSchema = z.output<typeof nestedSchema>
+
+const state = reactive<Partial<Schema & NestedSchema>>({ })
+
+const toast = useToast()
+async function onSubmit(event: FormSubmitEvent<any>) {
+  toast.add({ title: 'Success', description: 'The form has been submitted.', color: 'green' })
+  console.log(event.data)
+}
+</script>
+
+<template>
+  <UForm
+    :state="state"
+    :schema="schema"
+    class="gap-4 flex flex-col w-60"
+    @submit="onSubmit"
+  >
+    <UFormField label="Name" name="name">
+      <UInput v-model="state.name" placeholder="John Lennon" />
+    </UFormField>
+
+    <div>
+      <UCheckbox v-model="state.news" name="news" label="Register to our newsletter" />
+    </div>
+
+    <UForm v-if="state.news" :state="state" :schema="nestedSchema">
+      <UFormField label="Email" name="email">
+        <UInput v-model="state.email" placeholder="john@lennon.com" />
+      </UFormField>
+    </UForm>
+
+    <div>
+      <UButton type="submit">
+        Submit
+      </UButton>
+    </div>
+  </UForm>
+</template>

docs/app/components/content/examples/form/FormExampleNestedList.vue

@@ -0,0 +1,79 @@
+<script setup lang="ts">
+import { z } from 'zod'
+import type { FormSubmitEvent } from '@nuxt/ui'
+
+const schema = z.object({
+  customer: z.string().min(2)
+})
+
+type Schema = z.output<typeof schema>
+
+const itemSchema = z.object({
+  description: z.string().min(1),
+  price: z.number().min(0)
+})
+
+type ItemSchema = z.output<typeof itemSchema>
+
+const state = reactive<Partial<Schema & { items: Partial<ItemSchema>[] }>>({
+  items: [{}]
+})
+
+function addItem() {
+  if (!state.items) {
+    state.items = []
+  }
+  state.items.push({})
+}
+
+function removeItem() {
+  if (state.items) {
+    state.items.pop()
+  }
+}
+const formItemRef = ref()
+
+const toast = useToast()
+async function onSubmit(event: FormSubmitEvent<any>) {
+  toast.add({ title: 'Success', description: 'The form has been submitted.', color: 'green' })
+  console.log(event.data)
+}
+</script>
+
+<template>
+  <UForm
+    ref="formItemRef"
+    :state="state"
+    :schema="schema"
+    class="gap-4 flex flex-col w-60"
+    @submit="onSubmit"
+  >
+    <UFormField label="Customer" name="customer">
+      <UInput v-model="state.customer" placeholder="Wonka Industries" />
+    </UFormField>
+
+    <UForm v-for="item, count in state.items" :key="count" :state="item" :schema="itemSchema" class="flex gap-2">
+      <UFormField :label="!count ? 'Description' : undefined" name="description">
+        <UInput v-model="item.description" />
+      </UFormField>
+      <UFormField :label="!count ? 'Price' : undefined" name="price" class="w-20">
+        <UInput v-model="item.price" type="number" />
+      </UFormField>
+    </UForm>
+
+    <div class="flex gap-2">
+      <UButton color="gray" variant="subtle" size="sm" @click="addItem()">
+        Add Item
+      </UButton>
+
+      <UButton color="gray" variant="ghost" size="sm" @click="removeItem()">
+        Remove Item
+      </UButton>
+    </div>
+    <div>
+      <UButton type="submit">
+        Submit
+      </UButton>
+    </div>
+  </UForm>
+</template>

docs/app/components/content/examples/form/FormExampleOnError.vue

@@ -0,0 +1,45 @@
+<script setup lang="ts">
+import type { FormError, FormErrorEvent, FormSubmitEvent } from '#ui/types'
+
+const state = reactive({
+  email: undefined,
+  password: undefined
+})
+
+const validate = (state: any): FormError[] => {
+  const errors = []
+  if (!state.email) errors.push({ name: 'email', message: 'Required' })
+  if (!state.password) errors.push({ name: 'password', message: 'Required' })
+  return errors
+}
+
+const toast = useToast()
+async function onSubmit(event: FormSubmitEvent<any>) {
+  toast.add({ title: 'Success', description: 'The form has been submitted.', color: 'green' })
+  console.log(event.data)
+}
+
+async function onError(event: FormErrorEvent) {
+  if (event?.errors?.[0]?.id) {
+    const element = document.getElementById(event.errors[0].id)
+    element?.focus()
+    element?.scrollIntoView({ behavior: 'smooth', block: 'center' })
+  }
+}
+</script>
+
+<template>
+  <UForm :validate="validate" :state="state" class="space-y-4" @submit="onSubmit" @error="onError">
+    <UFormField label="Email" name="email">
+      <UInput v-model="state.email" />
+    </UFormField>
+
+    <UFormField label="Password" name="password">
+      <UInput v-model="state.password" type="password" />
+    </UFormField>
+
+    <UButton type="submit">
+      Submit
+    </UButton>
+  </UForm>
+</template>

docs/app/components/content/examples/form/FormExampleValibot.vue

@@ -0,0 +1,38 @@
+<script setup lang="ts">
+import * as v from 'valibot'
+import type { FormSubmitEvent } from '#ui/types'
+
+const schema = v.object({
+  email: v.pipe(v.string(), v.email('Invalid email')),
+  password: v.pipe(v.string(), v.minLength(8, 'Must be at least 8 characters'))
+})
+
+type Schema = v.InferOutput<typeof schema>
+
+const state = reactive({
+  email: '',
+  password: ''
+})
+
+const toast = useToast()
+async function onSubmit(event: FormSubmitEvent<Schema>) {
+  toast.add({ title: 'Success', description: 'The form has been submitted.', color: 'green' })
+  console.log(event.data)
+}
+</script>
+
+<template>
+  <UForm :schema="v.safeParser(schema)" :state="state" class="space-y-4" @submit="onSubmit">
+    <UFormField label="Email" name="email">
+      <UInput v-model="state.email" />
+    </UFormField>
+
+    <UFormField label="Password" name="password">
+      <UInput v-model="state.password" type="password" />
+    </UFormField>
+
+    <UButton type="submit">
+      Submit
+    </UButton>
+  </UForm>
+</template>

docs/app/components/content/examples/form/FormExampleYup.vue

@@ -0,0 +1,40 @@
+<script setup lang="ts">
+import { object, string, type InferType } from 'yup'
+import type { FormSubmitEvent } from '#ui/types'
+
+const schema = object({
+  email: string().email('Invalid email').required('Required'),
+  password: string()
+    .min(8, 'Must be at least 8 characters')
+    .required('Required')
+})
+
+type Schema = InferType<typeof schema>
+
+const state = reactive({
+  email: undefined,
+  password: undefined
+})
+
+const toast = useToast()
+async function onSubmit(event: FormSubmitEvent<Schema>) {
+  toast.add({ title: 'Success', description: 'The form has been submitted.', color: 'green' })
+  console.log(event.data)
+}
+</script>
+
+<template>
+  <UForm :schema="schema" :state="state" class="space-y-4" @submit="onSubmit">
+    <UFormField label="Email" name="email">
+      <UInput v-model="state.email" />
+    </UFormField>
+
+    <UFormField label="Password" name="password">
+      <UInput v-model="state.password" type="password" />
+    </UFormField>
+
+    <UButton type="submit">
+      Submit
+    </UButton>
+  </UForm>
+</template>

docs/app/components/content/examples/form/FormExampleZod.vue

@@ -0,0 +1,38 @@
+<script setup lang="ts">
+import { z } from 'zod'
+import type { FormSubmitEvent } from '#ui/types'
+
+const schema = z.object({
+  email: z.string().email('Invalid email'),
+  password: z.string().min(8, 'Must be at least 8 characters')
+})
+
+type Schema = z.output<typeof schema>
+
+const state = reactive<Partial<Schema>>({
+  email: undefined,
+  password: undefined
+})
+
+const toast = useToast()
+async function onSubmit(event: FormSubmitEvent<Schema>) {
+  toast.add({ title: 'Success', description: 'The form has been submitted.', color: 'green' })
+  console.log(event.data)
+}
+</script>
+
+<template>
+  <UForm :schema="schema" :state="state" class="space-y-4" @submit="onSubmit">
+    <UFormField label="Email" name="email">
+      <UInput v-model="state.email" />
+    </UFormField>
+
+    <UFormField label="Password" name="password">
+      <UInput v-model="state.password" type="password" />
+    </UFormField>
+
+    <UButton type="submit">
+      Submit
+    </UButton>
+  </UForm>
+</template>

docs/app/components/content/examples/navigation-menu/NavigationMenuCustomSlotExample.vue

@@ -0,0 +1,27 @@
+<script setup lang="ts">
+const items = [
+  {
+    label: 'Guide',
+    icon: 'i-heroicons-book-open'
+
+  },
+  {
+    label: 'Composables',
+    icon: 'i-heroicons-circle-stack'
+
+  },
+  {
+    label: 'Components',
+    icon: 'i-heroicons-cube-transparent',
+    slot: 'components'
+  }
+]
+</script>
+
+<template>
+  <UNavigationMenu :items="items" class="justify-center">
+    <template #components-trailing>
+      <UBadge label="44" variant="subtle" size="sm" />
+    </template>
+  </UNavigationMenu>
+</template>

docs/app/components/content/examples/navigation-menu/NavigationMenuModelValueExample.vue

@@ -0,0 +1,110 @@
+<script setup lang="ts">
+const items = [
+  {
+    label: 'Guide',
+    icon: 'i-heroicons-book-open',
+    children: [
+      {
+        label: 'Introduction',
+        description: 'Fully styled and customizable components for Nuxt.',
+        icon: 'i-heroicons-home'
+      },
+      {
+        label: 'Installation',
+        description: 'Learn how to install and configure Nuxt UI in your application.',
+        icon: 'i-heroicons-cloud-arrow-down'
+      },
+      {
+        label: 'Icons',
+        icon: 'i-heroicons-face-smile',
+        description: 'You have nothing to do, @nuxt/icon will handle it automatically.'
+      },
+      {
+        label: 'Colors',
+        icon: 'i-heroicons-swatch',
+        description: 'Choose a primary and a gray color from your Tailwind CSS theme.'
+      },
+      {
+        label: 'Theme',
+        icon: 'i-heroicons-cog',
+        description: 'You can customize components by using the `class` / `ui` props or in your app.config.ts.'
+      }
+    ]
+  },
+  {
+    label: 'Composables',
+    icon: 'i-heroicons-circle-stack',
+    children: [
+      {
+        label: 'defineShortcuts',
+        icon: 'i-heroicons-document-text-20-solid',
+        description: 'Define shortcuts for your application.'
+      },
+      {
+        label: 'useModal',
+        icon: 'i-heroicons-document-text-20-solid',
+        description: 'Display a modal within your application.'
+      },
+      {
+        label: 'useSlideover',
+        icon: 'i-heroicons-document-text-20-solid',
+        description: 'Display a slideover within your application.'
+      },
+      {
+        label: 'useToast',
+        icon: 'i-heroicons-document-text-20-solid',
+        description: 'Display a toast within your application.'
+      }
+    ]
+  },
+  {
+    label: 'Components',
+    icon: 'i-heroicons-cube-transparent',
+    children: [
+      {
+        label: 'Link',
+        icon: 'i-heroicons-document-text-20-solid',
+        description: 'Use NuxtLink with superpowers.'
+      },
+      {
+        label: 'Modal',
+        icon: 'i-heroicons-document-text-20-solid',
+        description: 'Display a modal within your application.'
+      },
+      {
+        label: 'NavigationMenu',
+        icon: 'i-heroicons-document-text-20-solid',
+        description: 'Display a list of links.'
+      },
+      {
+        label: 'Pagination',
+        icon: 'i-heroicons-document-text-20-solid',
+        description: 'Display a list of pages.'
+      },
+      {
+        label: 'Popover',
+        icon: 'i-heroicons-document-text-20-solid',
+        description: 'Display a non-modal dialog that floats around a trigger element.'
+      },
+      {
+        label: 'Progress',
+        icon: 'i-heroicons-document-text-20-solid',
+        description: 'Show a horizontal bar to indicate task progression.'
+      }
+    ]
+  }
+]
+
+const active = ref('0')
+
+// Note: This is for demonstration purposes only. Don't do this at home.
+onMounted(() => {
+  setInterval(() => {
+    active.value = String((Number(active.value) + 1) % items.length)
+  }, 2000)
+})
+</script>
+
+<template>
+  <UNavigationMenu v-model="active" :items="items" class="justify-center" />
+</template>

docs/app/composables/fetchComponentExample.ts

@@ -1,4 +1,4 @@
-const useComponentExampleState = () => useState('component-example-state', () => ({}))
+const useComponentExampleState = () => useState<Record<string, any>>('component-example-state', () => ({}))
 
 export async function fetchComponentExample(name: string) {
   const state = useComponentExampleState()
@@ -14,9 +14,9 @@ export async function fetchComponentExample(name: string) {
   // Add to nitro prerender
   if (import.meta.server) {
     const event = useRequestEvent()
-    event.node.res.setHeader(
+    event?.node.res.setHeader(
       'x-nitro-prerender',
-      [event.node.res.getHeader('x-nitro-prerender'), `/api/component-example/${name}.json`].filter(Boolean).join(',')
+      [event?.node.res.getHeader('x-nitro-prerender'), `/api/component-example/${name}.json`].filter(Boolean).join(',')
     )
   }
 

docs/app/composables/fetchComponentMeta.ts

@@ -1,6 +1,6 @@
 import type { ComponentMeta } from 'vue-component-meta'
 
-const useComponentsMetaState = () => useState('component-meta-state', () => ({}))
+const useComponentsMetaState = () => useState<Record<string, any>>('component-meta-state', () => ({}))
 
 export async function fetchComponentMeta(name: string): Promise<{ meta: ComponentMeta }> {
   const state = useComponentsMetaState()
@@ -16,9 +16,9 @@ export async function fetchComponentMeta(name: string): Promise<{ meta: Componen
   // Add to nitro prerender
   if (import.meta.server) {
     const event = useRequestEvent()
-    event.node.res.setHeader(
+    event?.node.res.setHeader(
       'x-nitro-prerender',
-      [event.node.res.getHeader('x-nitro-prerender'), `/api/component-meta/${name}.json`].filter(Boolean).join(',')
+      [event?.node.res.getHeader('x-nitro-prerender'), `/api/component-meta/${name}.json`].filter(Boolean).join(',')
     )
   }
 

docs/app/error.vue

@@ -1,6 +1,6 @@
 <script setup lang="ts">
 import type { NuxtError } from '#app'
-import type { ContentSearchFile } from '@nuxt/ui-pro'
+// import type { ContentSearchFile } from '@nuxt/ui-pro'
 
 useSeoMeta({
   title: 'Page not found',
@@ -18,7 +18,7 @@ const runtimeConfig = useRuntimeConfig()
 const { integrity, api } = runtimeConfig.public.content
 
 const { data: navigation } = await useAsyncData('navigation', () => fetchContentNavigation(), { default: () => [] })
-const { data: files } = await useLazyFetch<ContentSearchFile[]>(`${api.baseURL}/search${integrity ? '.' + integrity : ''}`, { default: () => [] })
+const { data: files } = await useLazyFetch<any[]>(`${api.baseURL}/search${integrity ? '.' + integrity : ''}`, { default: () => [] })
 
 // Computed
 

docs/app/layouts/docs.vue

@@ -3,7 +3,7 @@ import type { NavItem } from '@nuxt/content'
 
 const nav = inject<Ref<NavItem[]>>('navigation')
 
-const navigation = computed(() => nav.value.filter(item => !item._path.startsWith('/pro')))
+const navigation = computed(() => nav?.value.filter(item => !item._path.startsWith('/pro')))
 </script>
 
 <template>

docs/app/pages/[...slug].vue

@@ -79,14 +79,18 @@ defineOgImageComponent('Docs', {
 
 <template>
   <UPage v-if="page">
-    <UPageHeader :title="page.title" :description="page.description" :links="page.links" :headline="headline" />
+    <UPageHeader :title="page.title" :links="page.links" :headline="headline" :ui="{}">
+      <template #description>
+        <MDC v-if="page.description" :value="page.description" unwrap="p" />
+      </template>
+    </UPageHeader>
 
     <UPageBody>
       <ContentRenderer v-if="page.body" :value="page" />
 
       <USeparator />
 
-      <UContentSurround :surround="surround" />
+      <UContentSurround :surround="surround as any" />
     </UPageBody>
 
     <template v-if="page?.body?.toc?.links?.length" #right>

docs/app/pages/examples/[...slug].vue

@@ -1,7 +1,7 @@
 <script setup lang="ts">
 const route = useRoute()
 
-const name = route.params.slug[0]
+const name = route.params.slug?.[0]
 </script>
 
 <template>

docs/app/plugins/colors.ts

@@ -4,11 +4,14 @@ export default defineNuxtPlugin({
     const appConfig = useAppConfig()
 
     if (import.meta.client) {
-      if (window.localStorage.getItem('nuxt-ui-primary')) {
-        appConfig.ui.colors.primary = window.localStorage.getItem('nuxt-ui-primary')
+      const primary = window.localStorage.getItem('nuxt-ui-primary')
+      if (primary) {
+        appConfig.ui.colors.primary = primary
       }
-      if (window.localStorage.getItem('nuxt-ui-gray')) {
-        appConfig.ui.colors.gray = window.localStorage.getItem('nuxt-ui-gray')
+
+      const gray = window.localStorage.getItem('nuxt-ui-gray')
+      if (gray) {
+        appConfig.ui.colors.gray = gray
       }
     }
 

docs/app/plugins/prettier.ts

@@ -8,7 +8,7 @@ export interface SimplePrettier {
 
 function createPrettierWorkerApi(worker: Worker): SimplePrettier {
   let counter = 0
-  const handlers = {}
+  const handlers: any = {}
 
   worker.addEventListener('message', (event) => {
     const { uid, message, error } = event.data
@@ -28,7 +28,7 @@ function createPrettierWorkerApi(worker: Worker): SimplePrettier {
     }
   })
 
-  function postMessage<T>(message) {
+  function postMessage<T>(message: any) {
     const uid = ++counter
     return new Promise<T>((resolve, reject) => {
       handlers[uid] = [resolve, reject]

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

@@ -1,96 +1,76 @@
 ---
-title: Introduction
-description: Nuxt UI v3 - A powerful, Nuxt-integrated design system with enhanced components, flexibility, and developer experience.
+navigation.title: Introduction
+title: Nuxt UI v3
+description: A comprehensive, Nuxt-integrated UI library offering powerful components, unparalleled flexibility, and an optimized developer experience.
 ---
 
-Welcome to Nuxt UI v3 beta! We're thrilled to introduce this major update to our UI library, bringing significant improvements and powerful new features tailored specifically for Nuxt applications.
+We're thrilled to introduce this major update to our UI library, bringing significant improvements and powerful new features. Nuxt UI v3 represents a leap forward in creating robust, accessible, and highly customizable user interfaces for Nuxt applications.
 
 ## What's New in v3?
 
-### Migration from Headless UI to Radix Vue
-In v3, we've transitioned from Headless UI to Radix Vue as our core component foundation. This change brings several benefits:
+### Radix Vue
 
-- **Improved Accessibility**: WAI-ARIA compliant components with built-in keyboard navigation and focus management.
-- **Enhanced Composability**: Unstyled, primitive components for greater flexibility and customization.
-- **Vue and Nuxt Compatibility**: Seamless integration with Vue and Nuxt ecosystems.
-- **Consistent API**: Enjoy a more unified and intuitive API across all components.
-- **Active Development**: Benefit from ongoing improvements and new features in the Radix Vue ecosystem.
+We've transitioned from [Headless UI](https://headlessui.com/) to [Radix Vue](https://www.radix-vue.com/) as our core component foundation. This shift brings several key advantages:
 
-While this change may require some adjustments in your existing code, it significantly enhances the overall quality and capabilities of Nuxt UI.
+- **Extensive Component Library**: With 55+ primitives, Radix Vue significantly expands our component offerings.
+- **Active Development**: Radix Vue's growing popularity ensures ongoing improvements and updates.
+- **Enhanced Accessibility**: Built-in accessibility features align with our commitment to inclusive design.
+- **Vue 3 Optimization**: Seamless integration with Vue 3 and the Composition API.
 
-### Tailwind CSS v4 Integration
-Leverage the latest Tailwind CSS features for efficient styling and a streamlined development process.
+This transition empowers Nuxt UI to become a more comprehensive and flexible UI library, offering developers greater power and customization options.
 
-### Tailwind Variants Support
-Create dynamic variants easily, allowing for more expressive and flexible component styling.
+### Tailwind CSS v4
 
-### Enhanced TypeScript Support
-Enjoy improved type safety and an enhanced developer experience with our Nuxt-specific TypeScript optimizations.
+Nuxt UI v3 integrates the latest Tailwind CSS v4 alpha (announced March 6, 2024), bringing significant improvements:
 
-## Why Choose Nuxt UI v3?
+- **Faster Builds**: Up to 10x faster, especially for larger projects.
+- **Unified Toolchain**: Built-in features like vendor prefixing, nesting support, and modern CSS transforms.
+- **CSS-First Configuration**: New `@theme` directive for easy customization without JavaScript.
+- **Optimized Performance**: Smaller engine footprint and more efficient processing.
 
-Nuxt UI v3 offers several advantages over using Radix Vue or Shadcn-vue directly:
+::note
+For a comprehensive overview of Tailwind CSS v4 alpha features, visit the [official announcement](https://tailwindcss.com/blog/tailwindcss-v4-alpha).
+::
 
-- **Nuxt-Specific Integration**: Seamless compatibility with Nuxt features like auto-imports and server-side rendering.
-- **Pre-Styled, Customizable Components**: A complete set of components adhering to a cohesive design system, ready for use and customization.
-- **Dark Mode Support**: Built-in, easy-to-implement dark mode for your entire application.
-- **Nuxt Ecosystem Alignment**: Regular updates in sync with Nuxt releases, ensuring long-term compatibility.
-- **Comprehensive Nuxt Documentation**: Detailed guides and examples specifically for Nuxt developers.
+### Tailwind Variants
 
-## Upcoming Vue Support
+We've adopted [Tailwind Variants](https://www.tailwind-variants.org/) to manage our design system, offering:
 
-We're excited to announce that in the near future, Nuxt UI v3 will also support Vue applications! This expansion will allow Vue developers to leverage the power and flexibility of Nuxt UI components in their projects, regardless of whether they're using Nuxt or standalone Vue.
+- **Dynamic Styling**: Flexible component variants with a powerful API
+- **Type Safety**: Full TypeScript support with auto-completion
+- **Conflict Resolution**: Efficient merging of conflicting styles
 
-Key points about the upcoming Vue support:
+This integration unifies the styling of components, ensuring consistency and code maintainability.
 
-- **Seamless Integration**: Use Nuxt UI components in your Vue projects with the same ease as in Nuxt applications.
-- **Consistent API**: Enjoy the same intuitive API and component structure across both Vue and Nuxt projects.
-- **Performance Optimizations**: Benefit from performance enhancements tailored for Vue applications.
-- **Expanded Ecosystem**: Join a larger community of developers using Nuxt UI across different Vue-based projects.
+## Migration
 
-Stay tuned for updates on the release of Vue support!
+We want to be transparent: migrating from Nuxt UI v2 to v3 will require significant effort. While we've maintained core concepts and components, Nuxt UI v3 has been rebuilt from the ground up, resulting in a new library with enhanced capabilities.
 
-## Key Features
+Key points to consider:
+- A comprehensive migration guide will be available in the coming weeks.
+- Review the new documentation and components carefully before attempting to upgrade.
+- If you encounter any issues, please report them on our [GitHub repository](https://github.com/nuxt/ui/issues).
 
-- **Fully Customizable**: Tailor components to fit your brand and design needs.
-- **Responsive Design**: Create adaptive UIs across various device sizes.
-- **Accessibility Focus**: Ensure your applications are usable by everyone.
-- **TypeScript Support**: Enhanced type safety for Nuxt projects.
-
-## Getting Started
-
-Ready to dive in? Follow our [installation guide](/getting-started/installation) to start using Nuxt UI v3 in your project. If you're upgrading from v2, check out our [migration guide](/getting-started/migration).
-
-## Frequently Asked Questions
+## FAQ
 
 ::accordion
-  ::accordion-item{label="Is Nuxt UI v3 compatible with my existing Nuxt UI v2 project?"}
-  While `Nuxt UI v3` introduces significant changes, we've aimed to maintain as much compatibility as possible. However, due to the transition from Headless UI to Radix Vue, some adjustments may be necessary. Please refer to our [migration guide](/getting-started/migration) for detailed information on upgrading your project.
+  ::accordion-item{label="What are the main considerations when upgrading to Nuxt UI v3?"}
+  The transition to v3 involves significant changes, including new component structures, updated theming approaches, and revised TypeScript definitions. We recommend a careful, incremental upgrade process, starting with thorough testing in a development environment.
   ::
 
-  ::accordion-item{label="What are the main differences between Nuxt UI v3 and v2?"}
-  The key differences include the transition from Headless UI to Radix Vue, improved accessibility, enhanced composability, Tailwind CSS v4 integration, and improved TypeScript support. These changes result in more flexible and powerful components with better performance and developer experience.
+  ::accordion-item{label="Will Nuxt UI v3 work with other CSS frameworks like UnoCSS?"}
+  Nuxt UI v3 is currently designed to work exclusively with Tailwind CSS. While there's interest in UnoCSS support, implementing it would require significant changes to the theme structure due to differences in class naming conventions. As a result, we don't have plans to add UnoCSS support in v3.
   ::
 
-  ::accordion-item{label="Will Nuxt UI v3 work with other CSS frameworks besides Tailwind CSS?"}
-  While Nuxt UI v3 is optimized for use with Tailwind CSS, the core components based on Radix Vue are unstyled. This means you can potentially use them with other CSS frameworks, although you may need to provide your own styling.
+  ::accordion-item{label="Is Nuxt UI v3 compatible with standalone Vue projects?"}
+  We're planning to add Vue support in the near future. For now, Nuxt UI v3 is only available for Nuxt. Track progress on Vue compatibility [in this issue](https://github.com/nuxt/ui/issues/2129).
   ::
 
-  ::accordion-item{label="How does the upcoming Vue support differ from the current Nuxt support?"}
-  The upcoming Vue support will allow you to use Nuxt UI components in standalone Vue projects without the Nuxt framework. The core functionality and API of the components will remain the same, but some Nuxt-specific features may not be available in Vue-only projects.
-  ::
-
-  ::accordion-item{label="Is Nuxt UI v3 suitable for production use?"}
-  As Nuxt UI v3 is currently in beta, we recommend thorough testing before using it in production environments. We're actively working on stabilizing the library and appreciate any feedback from early adopters.
+  ::accordion-item{label="Is this version stable and suitable for production use?"}
+  As Nuxt UI v3 is currently in alpha, we recommend thorough testing before using it in production environments. We're actively working on stabilization and welcome feedback from early adopters to improve the library. Feel free to report any issues you encounter on our [GitHub repository](https://github.com/nuxt/ui/issues).
   ::
 ::
 
-## Feedback and Contributions
+:hr
 
-Your input is invaluable as we refine Nuxt UI v3:
-
-- Report issues or suggest improvements on our [GitHub repository](https://github.com/nuxt/ui)
-- Join our [Discord community](https://discord.com/invite/nuxt) for discussions and support
-- Follow us on [Twitter](https://twitter.com/nuxt_js) for the latest updates
-
-Stay tuned for more exciting updates as we work towards the final release of Nuxt UI v3!
+We're excited about the possibilities Nuxt UI v3 brings to your projects. Explore our documentation to learn more about new features, components, and best practices for building powerful, accessible user interfaces with Nuxt UI v3.

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

@@ -1,22 +1,37 @@
 ---
 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
+```
+
+::
+
+::warning
+Make sure you have `typescript` installed in your dev dependencies.
+::
+
+2. Register the Nuxt UI module in your `nuxt.config.ts`{lang="ts-type"}:
 
 ```ts [nuxt.config.ts]
 export default defineNuxtConfig({
@@ -24,25 +39,34 @@ 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 `app.vue`{lang="ts-type"} or in your [CSS](https://nuxt.com/docs/getting-started/styling#the-css-property):
 
-### Use Nuxt starter
+::code-group
 
-[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.
+```css [main.css]
+@import "tailwindcss";
+@import "@nuxt/ui";
+```
+
+::
 
 ## 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 +78,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,30 +91,42 @@ export default defineNuxtConfig({
 })
 ```
 
-### `transitions`
+::note{to="/getting-started/colors#build-colors"}
+This can help reduce the number of CSS classes generated in your bundle.
+::
+
+### `fonts`
+
+Use the `fonts` option to enable or disable the `@nuxt/fonts` module.
+
+- Default: `true`{lang="ts-type"}
 
 ```ts [nuxt.config.ts]
 export default defineNuxtConfig({
   modules: ['@nuxt/ui'],
   ui: {
-    transitions: false
+    fonts: false
   }
 })
 ```
 
-## Edge
+### `theme.transitions`
 
-To use the latest updates pushed on the [`dev`](https://github.com/nuxt/ui/tree/dev) branch, you can use `@nuxt/ui-edge`.
+Use the `theme.transitions` option to disable all transitions on components.
 
-Update your `package.json` to the following:
+- Default: `true`{lang="ts-type"}
 
-```diff [package.json]
-{
-  "devDependencies": {
--   "@nuxt/ui": "^2.11.0"
-+   "@nuxt/ui": "npm:@nuxt/ui-edge@latest"
+```ts [nuxt.config.ts]
+export default defineNuxtConfig({
+  modules: ['@nuxt/ui'],
+  ui: {
+    theme: {
+      transitions: false
+    }
   }
-}
+})
 ```
 
-Then run `pnpm install`, `yarn install` or `npm install`.
+::note
+This option adds the `transition-colors` class on components with hover or active states.
+::

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

@@ -1,56 +0,0 @@
----
-description: ''
-navigation:
-  badge:
-    label: Todo
----
-
-Thanks to [`@nuxt/icon`](https://github.com/nuxt/icon), add 200,000+ ready to use icons to your Nuxt application based on [Iconify](https://iconify.design).
-
-You can use any name from the https://icones.js.org collection such as the `i-` prefix (for example, `i-heroicons-cog`) with:
-
-- any `icon` prop available across the components:
-
-```vue
-<template>
-  <UButton icon="i-heroicons-magnifying-glass" />
-</template>
-```
-
-- the `UIcon` component to use icons anywhere:
-
-```vue
-<template>
-  <UIcon name="i-heroicons-moon" class="w-5 h-5 text-primary-500" />
-</template>
-```
-
-### Collections
-
-It's highly recommended to install the icons collections locally with:
-
-::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}
-```
-
-::
-
-For example, to use the `i-uil-github` icon, install it's collection with `@iconify-json/uil`. This way the icons can be served locally or from your serverless functions, which is faster and more reliable on both SSR and client-side.
-
-::callout{icon="i-heroicons-light-bulb" to="https://github.com/nuxt/icon?tab=readme-ov-file#custom-local-collections" target="_blank"}
-Read more about custom collections in the `@nuxt/icon` documentation.
-::
-
-## Theme
-
-:icons-theme

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

@@ -0,0 +1,225 @@
+---
+description: 'Learn how to customize the appearance of Nuxt UI components using Tailwind CSS.'
+---
+
+## Tailwind CSS
+
+Since Nuxt UI v3 uses Tailwind CSS v4 alpha which doesn't have a documentation yet, let's have a look on how to use it.
+
+Tailwind CSS v4 takes a CSS-first configuration approach, you now customize your theme with CSS variables inside a `@theme` directive:
+
+```css [main.css]
+@import "tailwindcss";
+@import "@nuxt/ui";
+
+@theme {
+  --font-family-display: "Inter", "sans-serif";
+
+  --breakpoint-3xl: 1920px;
+
+  --color-green-50: #EFFDF5;
+  --color-green-100: #D9FBE8;
+  --color-green-200: #B3F5D1;
+  --color-green-300: #75EDAE;
+  --color-green-400: #00DC82;
+  --color-green-500: #00C16A;
+  --color-green-600: #00A155;
+  --color-green-700: #007F45;
+  --color-green-800: #016538;
+  --color-green-900: #0A5331;
+  --color-green-950: #052e16;
+}
+```
+
+The `@theme` directive tells Tailwind to make new utilities and variants available based on those variables. It's the equivalent of the `theme.extend` key in Tailwind CSS v3 `tailwind.config.ts` file.
+
+::note
+You can learn more about this on [https://tailwindcss.com/blog/tailwindcss-v4-alpha](https://tailwindcss.com/blog/tailwindcss-v4-alpha#css-first-configuration).
+::
+
+This is exactly what the [`@import "@nuxt/ui";`](https://github.com/nuxt/ui/blob/v3/src/runtime/index.css) is all about, it extends the default Tailwind CSS theme and declares the `primary`, `error` and `gray` colors to be configurable through the [App Config](https://nuxt.com/docs/guide/directory-structure/app-config#app-config-file) but we'll talk more about that in the [Colors](/getting-started/colors) section.
+
+## Tailwind Variants API
+
+Nuxt UI components are styled using the [Tailwind Variants](https://www.tailwind-variants.org/) API, which provides a powerful way to create variants and manage component styles. Let's explore the key features of this API:
+
+### Slots
+
+Components in Nuxt UI can have multiple `slots`, each representing a distinct HTML element or section within the component. These slots allow for flexible content insertion and styling. Let's take the [Card](/components/card) component as an example:
+
+::code-group
+
+```ts [src/theme/card.ts]
+export default {
+  slots: {
+    root: 'bg-white dark:bg-gray-900 ring ring-gray-200 dark:ring-gray-800 divide-y divide-gray-200 dark:divide-gray-800 rounded-lg shadow',
+    header: 'p-4 sm:px-6',
+    body: 'p-4 sm:p-6',
+    footer: 'p-4 sm:px-6'
+  }
+}
+```
+
+```vue [src/runtime/components/Card.vue]
+<template>
+  <div :class="ui.root({ class: [props.class, props.ui?.root] })">
+    <div :class="ui.header({ class: props.ui?.header })">
+      <slot name="header" />
+    </div>
+
+    <div :class="ui.body({ class: props.ui?.body })">
+      <slot />
+    </div>
+
+    <div :class="ui.footer({ class: props.ui?.footer })">
+      <slot name="footer" />
+    </div>
+  </div>
+</template>
+```
+
+::
+
+Some components don't have slots, they are just composed of a single root element. In this case, the theme only defines the `base` slot like the [Container](/components/container) component for example:
+
+::code-group
+
+```ts [src/theme/container.ts]
+export default {
+  base: 'max-w-7xl mx-auto px-4 sm:px-6 lg:px-8'
+}
+```
+
+```vue [src/runtime/components/Container.vue]
+<template>
+  <div :class="container({ class: props.class })">
+    <slot />
+  </div>
+</template>
+```
+
+::
+
+::caution
+Components without slots don't have a [`ui` prop](#ui-prop), only the [`class` prop](#class-prop) is available to override styles.
+::
+
+### Variants
+
+Nuxt UI components use `variants` to change the `slots` styles based on props. Here's an example of the [Avatar](/components/avatar) component:
+
+```ts [src/theme/avatar.ts]
+export default {
+  slots: {
+    root: 'inline-flex items-center justify-center shrink-0 select-none overflow-hidden rounded-full align-middle bg-gray-100 dark:bg-gray-800',
+    image: 'h-full w-full rounded-[inherit] object-cover'
+  },
+  variants: {
+    size: {
+      'sm': {
+        root: 'size-7 text-sm'
+      },
+      'md': {
+        root: 'size-8 text-base'
+      },
+      'lg': {
+        root: 'size-9 text-lg'
+      }
+    }
+  },
+  defaultVariants: {
+    size: 'md'
+  }
+}
+```
+
+This way, the `size` prop will apply the corresponding styles to the `root` slot:
+
+::component-code{slug="avatar"}
+---
+ignore:
+  - src
+props:
+  src: 'https://github.com/benjamincanac.png'
+  size: lg
+---
+::
+
+The `defaultVariants` property specifies the default values for each variant. It determines how a component looks and behaves when no prop is provided. These default values can be customized in your [`app.config.ts`](#appconfigts) to adjust the standard appearance of components throughout your application.
+
+## Customize components
+
+You have multiple ways to customize the appearance of Nuxt UI components, you can do it for all components at once or on a per-component basis.
+
+::tip
+Tailwind Variants uses [tailwind-merge](https://github.com/dcastil/tailwind-merge) under the hood to merge classes so you don't have to worry about conflicting classes.
+::
+
+::note
+You can explore the theme for each component in two ways:
+
+- Check the `Theme` section in the documentation of each individual component.
+- Browse the source code directly in the GitHub repository at https://github.com/nuxt/ui/tree/v3/src/theme.
+::
+
+### `app.config.ts`
+
+You can override the theme of components inside your `app.config.ts` by using the exact same structure as the theme object.
+
+Let's say you want to change the font weight of all your buttons, you can do it like this:
+
+```ts [app.config.ts]
+export default defineAppConfig({
+  ui: {
+    button: {
+      slots: {
+        base: 'font-bold'
+      }
+    }
+  }
+})
+```
+
+In this example, the `font-bold` class will override the default `font-medium` class on all buttons.
+
+### `ui` prop
+
+You can also override a component's **slots** using the `ui` prop. This has priority over the `app.config.ts` configuration and `variants` resolution.
+
+::component-code{slug="button"}
+---
+prettier: true
+ignore:
+  - ui.leadingIcon
+  - color
+  - variant
+  - size
+  - icon
+props:
+  icon: i-heroicons-magnifying-glass
+  size: md
+  color: gray
+  variant: outline
+  ui:
+    leadingIcon: 'text-primary-500 dark:text-primary-400 size-3'
+slots:
+  default: |
+
+    Button
+---
+::
+
+In this example, the `leadingIcon` slot is overwritten even though the `md` size variant would apply a `size-5` class by default.
+
+### `class` prop
+
+The `class` prop allows you to override the classes of the `root` or `base` slot. This has priority over the `app.config.ts` configuration and `variants` resolution.
+
+::component-code{slug="button"}
+---
+props:
+  class: 'font-bold rounded-full'
+slots:
+  default: Button
+---
+::

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

@@ -1,68 +1,161 @@
 ---
-description: 'Learn how to customize the look and feel of the components.'
-navigation:
-  badge:
-    label: Todo
+description: 'Learn how to customize colors and optimize your color palette for Nuxt UI components.'
 ---
 
-This module relies on Nuxt [App Config](https://nuxt.com/docs/guide/directory-structure/app-config#app-config-file) file to customize the look and feel of the components at runtime with HMR (hot-module-replacement).
+## Build colors
 
-### Configuration
+Nuxt UI components provide dynamic `color` variants. By default, these variants classes are generated based on the default Tailwind CSS colors. Let's take the [Button](/components/button) component as an example:
 
-Components are based on a `primary` and a `gray` color. You can change them in your `app.config.ts`.
+::component-code{slug="button"}
+---
+props:
+  color: 'green'
+slots:
+  default: Button
+---
+::
 
-```ts [app.config.ts]
-export default defineAppConfig({
+You can change these colors with the [`colors`](/getting-started/installation#colors) option in your `nuxt.config.ts` to select only the colors you're actually using.
+
+For example, if you added a custom `cerise` color and only use the default `blue` and `green` colors in your application, you can configure the `colors` option like this:
+
+::code-group
+
+```ts [nuxt.config.ts]
+export default defineNuxtConfig({
+  modules: ['@nuxt/ui'],
   ui: {
-    primary: 'green',
-    gray: 'cool'
+    colors: ['cerise', 'blue', 'green']
   }
 })
 ```
 
-::tip
-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.
+```css [main.css]
+@import "tailwindcss";
+@import "@nuxt/ui";
+
+@theme {
+  --color-cerise-50: #FEF2F4;
+  --color-cerise-100: #FDE6E9;
+  --color-cerise-200: #FBD0D9;
+  --color-cerise-300: #F7AAB9;
+  --color-cerise-400: #F27A93;
+  --color-cerise-500: #E63F66;
+  --color-cerise-600: #D42A5B;
+  --color-cerise-700: #B21E4B;
+  --color-cerise-800: #951C45;
+  --color-cerise-900: #801B40;
+  --color-cerise-950: #470A1F;
+}
+```
 ::
 
-As this module uses Tailwind CSS under the hood, you can use any of the [Tailwind CSS colors](https://tailwindcss.com/docs/customizing-colors#color-palette-reference) or your own custom colors. By default, the `primary` color is `green` and the `gray` color is `cool`.
+::caution
+Make sure to use color ranges from `50` to `950`. You can use tools like [UI Colors](https://uicolors.app/) to generate your palette.
+::
 
-When [using custom colors](https://tailwindcss.com/docs/customizing-colors#using-custom-colors) or [adding additional colors](https://tailwindcss.com/docs/customizing-colors#adding-additional-colors) through the `extend` key in your `tailwind.config.ts`, you'll need to make sure to define all the shades from `50` to `950` as most of them are used in the components config defined in [`ui.config/`](https://github.com/nuxt/ui/tree/dev/src/runtime/ui.config) directory. You can [generate your colors](https://tailwindcss.com/docs/customizing-colors#generating-colors) using tools such as https://uicolors.app/ for example.
+This configuration will ensure that only classes for those three colors are generated in your final CSS bundle. When you use the `color` prop, it will be typed and provide autocompletion in your editor with those three colors.
 
-```ts [tailwind.config.ts]
-import type { Config } from 'tailwindcss'
-import defaultTheme from 'tailwindcss/defaultTheme'
+```vue
+<template>
+  <UButton color="cerise">Button</UButton>
+</template>
+```
 
-export default <Partial<Config>>{
-  theme: {
-    extend: {
-      colors: {
-        green: {
-          50: '#EFFDF5',
-          100: '#D9FBE8',
-          200: '#B3F5D1',
-          300: '#75EDAE',
-          400: '#00DC82',
-          500: '#00C16A',
-          600: '#00A155',
-          700: '#007F45',
-          800: '#016538',
-          900: '#0A5331',
-          950: '#052e16'
-        }
-      }
+## Runtime colors
+
+### Default aliases
+
+Nuxt UI introduces three key color aliases used to style components:
+
+1. `primary`{color="primary"}: Main brand color. Default: `green`{color="green"}.
+2. `error`{color="error"}: For error states. Default: `red`{color="red"}.
+3. `gray`: Neutral color for backgrounds, text, etc. Default: `cool`.
+
+::warning{to="https://tailwindcss.com/docs/customizing-colors#default-color-palette" target="_blank"}
+The Tailwind CSS `gray` color is renamed to `cool` in Nuxt UI to avoid conflicts with the `gray` alias.
+::
+
+You can configure these aliases in your `app.config.ts` file under the `ui.colors` key:
+
+```ts [app.config.ts]
+export default defineAppConfig({
+  ui: {
+    colors: {
+      primary: 'blue',
+      error: 'red',
+      gray: 'zinc'
     }
   }
+})
+```
+
+This powerful feature leverages Nuxt [App Config](https://nuxt.com/docs/guide/directory-structure/app-config#app-config-file), enabling dynamic styling of all components at runtime. It allows for real-time theme customization without requiring an application rebuild.
+
+::tip
+We recommend using these colors in your application whenever possible with classes like `text-primary-500 dark:text-primary-400`, `border-gray-200 dark:border-gray-800` or `bg-white dark:bg-gray-900` for example.
+::
+
+::important
+These alias colors don't need to be explicitly listed in the `colors` option of your `nuxt.config.ts`. Also, if you've set `primary` to a custom color (e.g., `cerise`), you don't need to list `cerise` in the `colors` array.
+::
+
+::note
+You can try this out by clicking on the :prose-icon{name="i-heroicons-swatch-20-solid" class="text-primary-500 dark:text-primary-400"} button in the header of this documentation.
+::
+
+### Custom aliases
+
+You can also add your own color aliases to be configurable at runtime in your `app.config.ts` file:
+
+1. Define the alias color by using CSS variables to let Tailwind know about it:
+
+```css [main.css]
+@import "tailwindcss";
+@import "@nuxt/ui";
+
+@theme {
+  --color-secondary-50: var(--color-secondary-50);
+  --color-secondary-100: var(--color-secondary-100);
+  --color-secondary-200: var(--color-secondary-200);
+  --color-secondary-300: var(--color-secondary-300);
+  --color-secondary-400: var(--color-secondary-400);
+  --color-secondary-500: var(--color-secondary-500);
+  --color-secondary-600: var(--color-secondary-600);
+  --color-secondary-700: var(--color-secondary-700);
+  --color-secondary-800: var(--color-secondary-800);
+  --color-secondary-900: var(--color-secondary-900);
+  --color-secondary-950: var(--color-secondary-950);
 }
 ```
 
-### CSS Variables
+2. Set a default value for the color alias in your `app.config.ts` file:
 
-To provide dynamic colors that can be changed at runtime, this module uses CSS variables. As Tailwind CSS already has a `gray` color, the module automatically renames it to `cool` to avoid conflicts (`coolGray` was renamed to `gray` when Tailwind CSS v3.0 was released).
+```ts [app.config.ts]
+export default defineAppConfig({
+  ui: {
+    colors: {
+      secondary: 'indigo'
+    }
+  }
+})
+```
 
-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.
+3. Add this color to the `colors` option of your `nuxt.config.ts` file to generate classes:
 
-::tip
-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`.
-::
+```ts [nuxt.config.ts]
+export default defineNuxtConfig({
+  modules: ['@nuxt/ui'],
+  ui: {
+    colors: ['secondary']
+  }
+})
+```
 
-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.
+4. You can use the `secondary` color alias in your application and use classes like `text-secondary-500 dark:text-secondary-400`:
+
+```vue
+<template>
+  <UButton color="secondary">Button</UButton>
+</template>
+```

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

@@ -0,0 +1,119 @@
+---
+description: 'Nuxt UI integrates seamlessly with `@nuxt/icon`, providing access to over 200,000+ icons from [Iconify](https://iconify.design/).'
+links:
+  - label: 'nuxt/icon'
+    to: https://github.com/nuxt/icon
+    target: _blank
+    icon: i-simple-icons-github
+---
+
+## Usage
+
+Nuxt UI automatically registers the `@nuxt/icon` module for you, so there's no additional setup required.
+
+::note
+You can use any name from the https://icones.js.org collection.
+::
+
+### Icon Component
+
+You can use the [Icon](/components/icon) component with a `name` prop to display an icon:
+
+::component-code{slug="icon"}
+---
+props:
+  name: 'i-heroicons-light-bulb'
+  class: 'size-5'
+---
+::
+
+### Component Props
+
+Some components also have an `icon` prop to display an icon, like the [Button](/components/button) for example:
+
+::component-code{slug="button"}
+---
+ignore:
+  - color
+  - variant
+props:
+  icon: i-heroicons-sun
+  variant: subtle
+slots:
+  default: Button
+---
+::
+
+## Collections
+
+### Iconify Dataset
+
+It's highly recommended to install the icon data locally with:
+
+::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}
+```
+
+::
+
+For example, to use the `i-uil-github` icon, install it's collection with `@iconify-json/uil`. This way the icons can be served locally or from your serverless functions, which is faster and more reliable on both SSR and client-side.
+
+::tip{to="https://github.com/nuxt/icon?tab=readme-ov-file#iconify-dataset" target="_blank"}
+Read more about this in the `@nuxt/icon` documentation.
+::
+
+### Custom Local Collections
+
+You can use local SVG files to create a custom Iconify collection.
+
+For example, place your icons' SVG files under a folder of your choice, for example, `./assets/icons`:
+
+```bash
+assets/icons
+├── add.svg
+└── remove.svg
+```
+
+In your `nuxt.config.ts`, add an item in `icon.customCollections`:
+
+```ts
+export default defineNuxtConfig({
+  modules: [
+    '@nuxt/ui'
+  ],
+  icon: {
+    customCollections: [{
+      prefix: 'custom',
+      dir: './assets/icons'
+    }]
+  }
+})
+```
+
+Then you can use the icons like this:
+
+```vue
+<template>
+  <UIcon name="i-custom-add" />
+</template>
+```
+
+::tip{to="https://github.com/nuxt/icon?tab=readme-ov-file#custom-local-collections" target="_blank"}
+Read more about this in the `@nuxt/icon` documentation.
+::
+
+## Theme
+
+You can change the default icons used by Nuxt UI components in your `app.config.ts`:
+
+:icons-theme

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

@@ -1,207 +0,0 @@
----
-description: 'Learn how to customize the look and feel of the components.'
-navigation:
-  badge:
-    label: Todo
----
-
-This module relies on Nuxt [App Config](https://nuxt.com/docs/guide/directory-structure/app-config#app-config-file) file to customize the look and feel of the components at runtime with HMR (hot-module-replacement).
-
-## Colors
-
-### Configuration
-
-Components are based on a `primary` and a `gray` color. You can change them in your `app.config.ts`.
-
-```ts [app.config.ts]
-export default defineAppConfig({
-  ui: {
-    primary: 'green',
-    gray: 'cool'
-  }
-})
-```
-
-::tip
-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.
-::
-
-As this module uses Tailwind CSS under the hood, you can use any of the [Tailwind CSS colors](https://tailwindcss.com/docs/customizing-colors#color-palette-reference) or your own custom colors. By default, the `primary` color is `green` and the `gray` color is `cool`.
-
-When [using custom colors](https://tailwindcss.com/docs/customizing-colors#using-custom-colors) or [adding additional colors](https://tailwindcss.com/docs/customizing-colors#adding-additional-colors) through the `extend` key in your `tailwind.config.ts`, you'll need to make sure to define all the shades from `50` to `950` as most of them are used in the components config defined in [`ui.config/`](https://github.com/nuxt/ui/tree/dev/src/runtime/ui.config) directory. You can [generate your colors](https://tailwindcss.com/docs/customizing-colors#generating-colors) using tools such as https://uicolors.app/ for example.
-
-```ts [tailwind.config.ts]
-import type { Config } from 'tailwindcss'
-import defaultTheme from 'tailwindcss/defaultTheme'
-
-export default <Partial<Config>>{
-  theme: {
-    extend: {
-      colors: {
-        green: {
-          50: '#EFFDF5',
-          100: '#D9FBE8',
-          200: '#B3F5D1',
-          300: '#75EDAE',
-          400: '#00DC82',
-          500: '#00C16A',
-          600: '#00A155',
-          700: '#007F45',
-          800: '#016538',
-          900: '#0A5331',
-          950: '#052e16'
-        }
-      }
-    }
-  }
-}
-```
-
-### CSS Variables
-
-To provide dynamic colors that can be changed at runtime, this module uses CSS variables. As Tailwind CSS already has a `gray` color, the module automatically renames it to `cool` to avoid conflicts (`coolGray` was renamed to `gray` when Tailwind CSS v3.0 was released).
-
-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.
-
-::tip
-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`.
-::
-
-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.
-
-## Components
-
-### `app.config.ts`
-
-You can find the config of each component in the [`ui.config/`](https://github.com/nuxt/ui/tree/dev/src/runtime/ui.config) directory. You can override those classes in your own `app.config.ts`.
-
-```ts [app.config.ts]
-export default defineAppConfig({
-  ui: {
-    container: {
-      constrained: 'max-w-5xl'
-    }
-  }
-})
-```
-
-Thanks to [tailwind-merge](https://github.com/dcastil/tailwind-merge), the `app.config.ts` is smartly merged with the default config. This means you don't have to rewrite everything.
-
-You can change this behavior by setting `strategy` to `override` in your `app.config.ts`:
-
-```ts [app.config.ts]
-export default defineAppConfig({
-  ui: {
-    strategy: 'override',
-    button: {
-      color: {
-        white: {
-          solid: 'bg-white dark:bg-gray-900'
-        }
-      }
-    }
-  }
-})
-```
-
-### `ui` prop
-
-Each component has a `ui` prop that allows you to customize everything specifically.
-
-```vue
-<template>
-  <UContainer :ui="{ constrained: 'max-w-2xl' }">
-    <slot />
-  </UContainer>
-</template>
-```
-
-::tip
-You can find the default classes for each component under the `Config` section.
-::
-
-Thanks to [tailwind-merge](https://github.com/dcastil/tailwind-merge), the `ui` prop is smartly merged with the config. This means you don't have to rewrite everything.
-
-For example, the default preset of the `FormGroup` component looks like this:
-
-```json
-{
-  "label": {
-    "base": "block font-medium text-gray-700 dark:text-gray-200"
-  }
-}
-```
-
-To change the font of the `label`, you only need to write:
-
-```vue
-<UFormGroup name="email" label="Email" :ui="{ label: { base: 'font-semibold' } }" />
-```
-
-This will smartly replace the `font-medium` by `font-semibold` and prevent any class duplication and any class priority issue.
-
-You can change this behavior by setting `strategy` to `override` inside the `ui` prop:
-
-```vue
-<UButton
-  to="https://github.com/nuxt/ui"
-  :ui="{
-    strategy: 'override',
-    color: {
-      white: {
-        solid: 'bg-white dark:bg-gray-900'
-      }
-    }
-  }"
-/>
-```
-
-### `class` attribute
-
-You can also use the `class` attribute to add classes to the component.
-
-```vue
-<template>
-  <UButton label="Button" class="rounded-full" />
-</template>
-```
-
-Again, with [tailwind-merge](https://github.com/dcastil/tailwind-merge), this will smartly merge the classes with the `ui` prop and the config.
-
-### Default values
-
-Some component props like `size`, `color`, `variant`, etc. have a default value that you can override in your `app.config.ts`.
-
-```ts [app.config.ts]
-export default defineAppConfig({
-  ui: {
-    button: {
-      default: {
-        size: 'md',
-        color: 'gray',
-        variant: 'ghost'
-      }
-    }
-  }
-})
-```
-
-## 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'
-  }
-})
-```
-
-::tip
-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.
-::

docs/content/1.getting-started/6.fonts.md

@@ -0,0 +1,42 @@
+---
+description: 'Nuxt UI integrates seamlessly with `@nuxt/fonts`, providing plug-and-play font optimization for your Nuxt applications.'
+links:
+  - label: 'nuxt/fonts'
+    to: https://github.com/nuxt/fonts
+    target: _blank
+    icon: i-simple-icons-github
+---
+
+## Usage
+
+Nuxt UI automatically registers the `@nuxt/fonts` module for you, so there's no additional setup required. To use a font in your Nuxt UI application, you can simply declare it in your CSS:
+
+::code-group
+
+```vue [app.vue]
+<style>
+@import "tailwindcss";
+@import "@nuxt/ui";
+
+@theme {
+  --font-family-sans: Inter, sans-serif;
+}
+</style>
+```
+
+```css [main.css]
+@import "tailwindcss";
+@import "@nuxt/ui";
+
+@theme {
+  --font-family-sans: Inter, sans-serif;
+}
+```
+
+::
+
+That's it! Nuxt Fonts will detect this and you should immediately see the web font loaded in your browser.
+
+::tip{to="https://fonts.nuxt.com/advanced" target="_blank"}
+Read more about how `@nuxt/fonts` work behind the scenes to optimize your fonts.
+::

docs/content/1.getting-started/7.color-mode.md

@@ -0,0 +1,27 @@
+---
+description: 'Nuxt UI integrates seamlessly with `@nuxtjs/color-mode`, offering effortless switching between light and dark themes.'
+links:
+  - label: 'nuxtjs/color-mode'
+    to: https://github.com/nuxt-modules/color-mode
+    target: _blank
+    icon: i-simple-icons-github
+navigation: false
+---
+
+## Usage
+
+Nuxt UI automatically registers the `@nuxtjs/color-mode` module for you and takes advantage of [Tailwind CSS dark mode](https://tailwindcss.com/docs/dark-mode#toggling-dark-mode-manually) class strategy, so there's no additional setup required.
+
+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'
+  }
+})
+```
+
+::tip
+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.
+::

docs/content/1.getting-started/8.typescript.md

@@ -0,0 +1,5 @@
+---
+title: TypeScript
+description: ''
+navigation: false
+---

docs/content/2.composables/use-form-field.md

@@ -0,0 +1,17 @@
+---
+title: useFormField 
+description: 'A composable to integrate custom inputs with the Form component'
+navigation:
+  badge:
+    label: Todo
+---
+
+## Usage
+
+Use the auto-imported `useFormField` composable to integrate custom inputs with a [Form](/components/form).
+
+```vue
+<script setup lang="ts">
+const { inputId, emitFormBlur, emitFormInput, emitFormChange } = useFormField()
+</script>
+```

docs/content/3.components/0.app.md

@@ -4,7 +4,7 @@ description: Wraps your app to provide global configurations and more.
 links:
   - label: GitHub
     icon: i-simple-icons-github
-    to: https://github.com/benjamincanac/ui3/tree/dev/src/runtime/components/App.vue
+    to: https://github.com/nuxt/ui/tree/v3/src/runtime/components/App.vue
 ---
 
 ## Usage

docs/content/3.components/accordion.md

@@ -6,7 +6,7 @@ links:
     to: https://www.radix-vue.com/components/accordion.html
   - label: GitHub
     icon: i-simple-icons-github
-    to: https://github.com/benjamincanac/ui3/tree/dev/src/runtime/components/Accordion.vue
+    to: https://github.com/nuxt/ui/tree/v3/src/runtime/components/Accordion.vue
 ---
 
 ## Usage
@@ -139,7 +139,9 @@ props:
 
 Use the `trailing-icon` prop to customize the trailing [Icon](/components/icon) of each item. Defaults to `i-heroicons-chevron-down-20-solid`.
 
+::note
 You can also set an icon for a specific item by using the `trailingIcon` property in the item object.
+::
 
 ::component-code
 ---

docs/content/3.components/alert.md

@@ -3,7 +3,7 @@ description: A callout to draw user's attention.
 links:
   - label: GitHub
     icon: i-simple-icons-github
-    to: https://github.com/benjamincanac/ui3/tree/dev/src/runtime/components/Alert.vue
+    to: https://github.com/nuxt/ui/tree/v3/src/runtime/components/Alert.vue
 ---
 
 ## Usage
@@ -238,6 +238,7 @@ ignore:
   - rel
   - noRel
   - prefetch
+  - prefetchOn
   - noPrefetch
   - prefetchedClass
   - replace

docs/content/3.components/avatar-group.md

@@ -4,7 +4,7 @@ description: Stack multiple avatars in a group.
 links:
   - label: GitHub
     icon: i-simple-icons-github
-    to: https://github.com/benjamincanac/ui3/tree/dev/src/runtime/components/AvatarGroup.vue
+    to: https://github.com/nuxt/ui/tree/v3/src/runtime/components/AvatarGroup.vue
 ---
 
 ## Usage

docs/content/3.components/avatar.md

@@ -6,7 +6,7 @@ links:
     to: https://www.radix-vue.com/components/avatar.html
   - label: GitHub
     icon: i-simple-icons-github
-    to: https://github.com/benjamincanac/ui3/tree/dev/src/runtime/components/Avatar.vue
+    to: https://github.com/nuxt/ui/tree/v3/src/runtime/components/Avatar.vue
 ---
 
 ## Usage

docs/content/3.components/badge.md

@@ -3,7 +3,7 @@ description: A short text to represent a status or a category.
 links:
   - label: GitHub
     icon: i-simple-icons-github
-    to: https://github.com/benjamincanac/ui3/tree/dev/src/runtime/components/Badge.vue
+    to: https://github.com/nuxt/ui/tree/v3/src/runtime/components/Badge.vue
 ---
 
 ## Usage

docs/content/3.components/breadcrumb.md

@@ -3,7 +3,7 @@ description: A hierarchy of links to navigate through a website.
 links:
   - label: GitHub
     icon: i-simple-icons-github
-    to: https://github.com/benjamincanac/ui3/tree/dev/src/runtime/components/Breadcrumb.vue
+    to: https://github.com/nuxt/ui/tree/v3/src/runtime/components/Breadcrumb.vue
 ---
 
 ## Usage
@@ -115,6 +115,7 @@ ignore:
   - rel
   - noRel
   - prefetch
+  - prefetchOn
   - noPrefetch
   - prefetchedClass
   - replace

docs/content/3.components/button-group.md

@@ -4,7 +4,7 @@ description: Group multiple button-like elements together.
 links:
   - label: GitHub
     icon: i-simple-icons-github
-    to: https://github.com/benjamincanac/ui3/tree/dev/src/runtime/components/ButtonGroup.vue
+    to: https://github.com/nuxt/ui/tree/v3/src/runtime/components/ButtonGroup.vue
 ---
 
 ## Usage

docs/content/3.components/button.md

@@ -3,7 +3,7 @@ description: A button element that can act as a link or trigger an action.
 links:
   - label: GitHub
     icon: i-simple-icons-github
-    to: https://github.com/benjamincanac/ui3/tree/dev/src/runtime/components/Button.vue
+    to: https://github.com/nuxt/ui/tree/v3/src/runtime/components/Button.vue
 ---
 
 ## Usage
@@ -140,7 +140,6 @@ props:
 slots:
   default: Button
 ---
-
 Button
 ::
 
@@ -148,6 +147,14 @@ Button
 You can customize this icon globally in your `app.config.ts` under `ui.icons.loading` key.
 ::
 
+Use the `loading-auto` prop to show the loading icon automatically while the `@click` promise is pending.
+
+:component-example{name="button-loading-auto-example"}
+
+This also works with the [Form](/components/form) component.
+
+:component-example{name="button-loading-auto-form-example"}
+
 ### Disabled
 
 Use the `disabled` prop to disable the Button.
@@ -220,6 +227,7 @@ ignore:
   - rel
   - noRel
   - prefetch
+  - prefetchOn
   - noPrefetch
   - prefetchedClass
   - replace
@@ -231,7 +239,7 @@ ignore:
 ---
 ::
 
-::callout{icon="i-simple-icons-github" to="https://github.com/benjamincanac/ui3/blob/dev/src/runtime/components/Link.vue#L13"}
+::callout{icon="i-simple-icons-github" to="https://github.com/nuxt/ui/blob/v3/src/runtime/components/Link.vue#L13"}
 The `Button` component extends the `Link` component. Check out the source code on GitHub.
 ::
 

docs/content/3.components/card.md

@@ -3,7 +3,7 @@ description: Display content in a card with a header, body and footer.
 links:
   - label: GitHub
     icon: i-simple-icons-github
-    to: https://github.com/benjamincanac/ui3/tree/dev/src/runtime/components/Card.vue
+    to: https://github.com/nuxt/ui/tree/v3/src/runtime/components/Card.vue
 ---
 
 ## Usage

docs/content/3.components/carousel.md

@@ -3,7 +3,7 @@ description: A carousel with motion and swipe support.
 links:
   - label: GitHub
     icon: i-simple-icons-github
-    to: https://github.com/benjamincanac/ui3/tree/dev/src/runtime/components/Carousel.vue
+    to: https://github.com/nuxt/ui/tree/v3/src/runtime/components/Carousel.vue
 navigation:
   badge:
     label: Todo

docs/content/3.components/checkbox.md

@@ -6,7 +6,7 @@ links:
     to: https://www.radix-vue.com/components/checkbox.html
   - label: GitHub
     icon: i-simple-icons-github
-    to: https://github.com/benjamincanac/ui3/tree/dev/src/runtime/components/Checkbox.vue
+    to: https://github.com/nuxt/ui/tree/v3/src/runtime/components/Checkbox.vue
 ---
 
 ## Usage

docs/content/3.components/chip.md

@@ -3,7 +3,7 @@ description: An indicator of a numeric value or a state.
 links:
   - label: GitHub
     icon: i-simple-icons-github
-    to: https://github.com/benjamincanac/ui3/tree/dev/src/runtime/components/Chip.vue
+    to: https://github.com/nuxt/ui/tree/v3/src/runtime/components/Chip.vue
 ---
 
 ## Usage

docs/content/3.components/collapsible.md

@@ -6,7 +6,7 @@ links:
     to: https://www.radix-vue.com/components/collapsible.html
   - label: GitHub
     icon: i-simple-icons-github
-    to: https://github.com/benjamincanac/ui3/tree/dev/src/runtime/components/Collapsible.vue
+    to: https://github.com/nuxt/ui/tree/v3/src/runtime/components/Collapsible.vue
 ---
 
 ## Usage

docs/content/3.components/command-palette.md

@@ -7,7 +7,7 @@ links:
     to: https://www.radix-vue.com/components/combobox.html
   - label: GitHub
     icon: i-simple-icons-github
-    to: https://github.com/benjamincanac/ui3/tree/dev/src/runtime/components/CommandPalette.vue
+    to: https://github.com/nuxt/ui/tree/v3/src/runtime/components/CommandPalette.vue
 navigation:
   badge:
     label: Todo
@@ -15,8 +15,146 @@ navigation:
 
 ## Usage
 
+Use the `v-model` directive to control the value of the CommandPalette or the `default-value` prop to set the initial value when you do not need to control its state.
+
+::note
+You can also use it without any of these and either use the `select` field on each item and/or the `@update:model-value` event to handle the selection.
+::
+
+### Groups
+
+Use the `groups` prop as an array of objects with the following properties:
+
+- `id: string`{lang="ts-type"}
+- `label?: string`{lang="ts-type"}
+- `slot?: string`{lang="ts-type"}
+- `items?: CommandPaletteItem[]`{lang="ts-type"}
+- `filter?: boolean`{lang="ts-type"}
+- `postFilter?: (searchTerm: string, items: T[]) => T[]`{lang="ts-type"}
+- `highlightedIcon?: string`{lang="ts-type"}
+
+Each group takes some `items` as an array of objects with the following properties:
+
+- `prefix?: string`{lang="ts-type"}
+- `label?: string`{lang="ts-type"}
+- `suffix?: string`{lang="ts-type"}
+- `icon?: string`{lang="ts-type"}
+- `avatar?: AvatarProps`{lang="ts-type"}
+- `chip?: ChipProps`{lang="ts-type"}
+- `kbds?: string[] | KbdProps[]`{lang="ts-type"}
+- `disabled?: boolean`{lang="ts-type"}
+- `slot?: string`{lang="ts-type"}
+- `select?(e?: Event): void`{lang="ts-type"}
+
+::component-code
+---
+collapse: true
+ignore:
+  - groups
+  - class
+external:
+  - groups
+class: '!p-0'
+props:
+  groups:
+    - id: 'users'
+      label: 'Users'
+      items:
+        - label: 'John Doe'
+          suffix: 'john.doe@example.com'
+          icon: 'i-heroicons-user'
+        - label: 'Jane Doe'
+          suffix: 'jane.doe@example.com'
+          icon: 'i-heroicons-user'
+        - label: 'John Smith'
+          suffix: 'john.smith@example.com'
+          icon: 'i-heroicons-user'
+  class: 'flex-1'
+---
+::
+
+### Multiple
+
+Use the `multiple` prop to allow multiple selections.
+
+::component-code
+---
+collapse: true
+ignore:
+  - groups
+  - class
+external:
+  - groups
+class: '!p-0'
+props:
+  groups:
+    - id: 'actions'
+      label: 'Actions'
+      items:
+        - label: 'Add new file'
+          suffix: 'Create a new file in the current directory or workspace.'
+          icon: 'i-heroicons-document-plus'
+          kbds:
+            - 'meta'
+            - 'N'
+        - label: 'Add new folder'
+          suffix: 'Create a new folder in the current directory or workspace.'
+          icon: 'i-heroicons-folder-plus'
+          kbds:
+            - 'meta'
+            - 'F'
+        - label: 'Add hashtag'
+          suffix: 'Add a hashtag to the current item.'
+          icon: 'i-heroicons-hashtag'
+          kbds:
+            - 'meta'
+            - 'H'
+        - label: 'Add label'
+          suffix: 'Add a label to the current item.'
+          icon: 'i-heroicons-tag'
+          kbds:
+            - 'meta'
+            - 'L'
+  class: 'flex-1'
+---
+::
+
+### Placeholder
+
+### Icon
+
+### Loading
+
+### Disabled
+
+### Close
+
 ## Examples
 
+### Control search term
+
+### Control selected value
+
+### With fetched items
+
+### With filtered items
+
+### Within a modal
+
+### Within a drawer
+
+### Within a popover
+
+### Listen open state
+
+### With custom search
+
+### With highlighted search
+
+### With custom slot
+
+### With empty slot
+
 ## API
 
 ### Props
@@ -36,6 +174,7 @@ ignore:
   - rel
   - noRel
   - prefetch
+  - prefetchOn
   - noPrefetch
   - prefetchedClass
   - replace

docs/content/3.components/container.md

@@ -3,7 +3,7 @@ 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/benjamincanac/ui3/tree/dev/src/runtime/components/Container.vue
+    to: https://github.com/nuxt/ui/tree/v3/src/runtime/components/Container.vue
 ---
 
 ## Usage

docs/content/3.components/context-menu.md

@@ -7,7 +7,7 @@ links:
     to: https://www.radix-vue.com/components/context-menu.html
   - label: GitHub
     icon: i-simple-icons-github
-    to: https://github.com/benjamincanac/ui3/tree/dev/src/runtime/components/ContextMenu.vue
+    to: https://github.com/nuxt/ui/tree/v3/src/runtime/components/ContextMenu.vue
 ---
 
 ## Usage
@@ -288,6 +288,7 @@ ignore:
   - rel
   - noRel
   - prefetch
+  - prefetchOn
   - noPrefetch
   - prefetchedClass
   - replace

docs/content/3.components/drawer.md

@@ -6,7 +6,7 @@ links:
     to: https://github.com/radix-vue/vaul-vue
   - label: GitHub
     icon: i-simple-icons-github
-    to: https://github.com/benjamincanac/ui3/tree/dev/src/runtime/components/Drawer.vue
+    to: https://github.com/nuxt/ui/tree/v3/src/runtime/components/Drawer.vue
 ---
 
 ## Usage

docs/content/3.components/dropdown-menu.md

@@ -7,7 +7,7 @@ links:
     to: https://www.radix-vue.com/components/dropdown-menu.html
   - label: GitHub
     icon: i-simple-icons-github
-    to: https://github.com/benjamincanac/ui3/tree/dev/src/runtime/components/DropdownMenu.vue
+    to: https://github.com/nuxt/ui/tree/v3/src/runtime/components/DropdownMenu.vue
 ---
 
 ## Usage
@@ -360,6 +360,7 @@ ignore:
   - rel
   - noRel
   - prefetch
+  - prefetchOn
   - noPrefetch
   - prefetchedClass
   - replace

docs/content/3.components/form-field.md

@@ -4,7 +4,7 @@ description: A wrapper for form elements that provides validation and error hand
 links:
   - label: GitHub
     icon: i-simple-icons-github
-    to: https://github.com/benjamincanac/ui3/tree/dev/src/runtime/components/FormField.vue
+    to: https://github.com/nuxt/ui/tree/v3/src/runtime/components/FormField.vue
 ---
 
 ## Usage

docs/content/3.components/form.md

@@ -1,17 +1,155 @@
 ---
-description: A form element that provides validation and submission handling.
+description: A form component with built-in validation and submission handling.
 links:
   - label: GitHub
     icon: i-simple-icons-github
-    to: https://github.com/benjamincanac/ui3/tree/dev/src/runtime/components/Form.vue
-navigation:
-  badge:
-    label: Todo
+    to: https://github.com/nuxt/ui/tree/v3/src/runtime/components/Form.vue
 ---
 
 ## Usage
 
-## Examples
+Use the Form component to validate form data using schema libraries such as [Zod](https://github.com/colinhacks/zod), [Yup](https://github.com/jquense/yup), [Joi](https://github.com/hapijs/joi), [Valibot](https://github.com/fabian-hiller/valibot), or your own validation logic.
+
+It works with the [FormField](/components/form-field) component to display error messages around form elements automatically.
+
+### Schema Validation
+
+It requires two props:
+- `state` - a reactive object holding the form's state.
+- `schema` - a schema object from a validation library like [Zod](https://github.com/colinhacks/zod), [Yup](https://github.com/jquense/yup), [Joi](https://github.com/hapijs/joi) or [Valibot](https://github.com/fabian-hiller/valibot).
+
+::warning
+**No validation library is included** by default, ensure you **install the one you need**.
+::
+
+::tabs
+  ::component-example{label="Zod"}
+  ---
+  name: 'form-example-zod'
+  props:
+    class: 'w-60'
+  ---
+  ::
+
+  ::component-example{label="Yup"}
+  ---
+  name: 'form-example-yup'
+  props:
+    class: 'w-60'
+  ---
+  ::
+
+  ::component-example{label="Joi"}
+  ---
+  name: 'form-example-joi'
+  props:
+    class: 'w-60'
+  ---
+  ::
+
+  ::component-example{label="Valibot"}
+  ---
+  name: 'form-example-valibot'
+  props:
+    class: 'w-60'
+  ---
+  ::
+::
+
+Errors are reported directly to the [FormField](/components/form-field) component based on the `name` prop. This means the validation rules defined for the `email` attribute in your schema will be applied to `<FormField name="email">`{lang="vue"}.
+
+Nested validation rules are handled using dot notation. For example, a rule like `{ user: z.object({ email: z.string() }) }`{lang="ts"} will be applied to `<FormField name="user.email">`{lang="vue"}.
+
+### Custom Validation
+
+Use the `validate` prop to apply your own validation logic.
+
+The validation function must return a list of errors with the following attributes:
+- `message` - the error message to display.
+- `name` - the `name` of the `FormField` to send the error to.
+
+::tip
+It can be used alongside the `schema` prop to handle complex use cases.
+::
+
+::component-example
+---
+name: 'form-example-basic'
+props:
+  class: 'w-60'
+---
+::
+
+### Input Events
+
+The Form component automatically triggers validation when an input emits an `input`, `change`, or `blur` event.
+- Validation on `input` occurs **as you type**.
+- Validation on `change` occurs when you **commit to a value**.
+- Validation on `blur` happens when an input **loses focus**.
+
+You can control when validation happens this using the `validate-on` prop.
+
+::component-example{label="Default"}
+---
+source: false
+name: 'form-example-elements'
+options:
+  - name: 'validate-on'
+    label: 'validate-on'
+    items:
+    - 'input'
+    - 'change'
+    - 'blur'
+    default:
+    - 'input'
+    - 'change'
+    - 'blur'
+    multiple: true
+---
+::
+
+::tip
+You can use the [useFormField](/composables/use-form-field) composable to implement this inside your own components.
+::
+
+### Error Event
+
+You can listen to the `@error` event to handle errors. This event is triggered when the form is submitted and contains an array of `FormError` objects with the following fields:
+
+- `id` - the input's `id`.
+- `name` - the `name` of the `FormField`
+- `message` - the error message to display.
+
+Here's an example that focuses the first input element with an error after the form is submitted:
+
+::component-example
+---
+name: 'form-example-on-error'
+collapse: true
+props:
+  class: 'w-60'
+---
+::
+
+### Nesting Forms
+
+Nesting form components allows you to manage complex data structures, such as lists or conditional fields, more efficiently.
+
+For example, it can be used to dynamically add fields based on user's input:
+::component-example
+---
+collapse: true
+name: 'form-example-nested'
+---
+::
+
+Or to validate list inputs:
+::component-example
+---
+collapse: true
+name: 'form-example-nested-list'
+---
+::
 
 ## API
 

docs/content/3.components/icon.md

@@ -8,16 +8,16 @@ links:
 
 ## Usage
 
-You can use any name from the https://icones.js.org collection such as the `i-` prefix:
+You can use any name from the https://icones.js.org collection:
 
 ::component-code
 ---
 props:
   name: 'i-heroicons-light-bulb'
-  class: 'w-5 h-5'
+  class: 'size-5'
 ---
 ::
 
 ::caution
-It's highly recommended to install the icons collections you need, read more about this in [Icons](/getting-started/icons).
+It's highly recommended to install the icons collections you need, read more about this in [Icons](/getting-started/icons#collections).
 ::

docs/content/3.components/input-menu.md

@@ -7,7 +7,7 @@ links:
     to: https://www.radix-vue.com/components/combobox.html
   - label: GitHub
     icon: i-simple-icons-github
-    to: https://github.com/benjamincanac/ui3/tree/dev/src/runtime/components/InputMenu.vue
+    to: https://github.com/nuxt/ui/tree/v3/src/runtime/components/InputMenu.vue
 navigation:
   badge:
     label: Todo

docs/content/3.components/input.md

@@ -3,7 +3,7 @@ description: An input element to enter text.
 links:
   - label: GitHub
     icon: i-simple-icons-github
-    to: https://github.com/benjamincanac/ui3/tree/dev/src/runtime/components/Input.vue
+    to: https://github.com/nuxt/ui/tree/v3/src/runtime/components/Input.vue
 ---
 
 ## Usage

docs/content/3.components/kbd.md

@@ -4,7 +4,7 @@ description: A kbd element to display a keyboard key.
 links:
   - label: GitHub
     icon: i-simple-icons-github
-    to: https://github.com/benjamincanac/ui3/tree/dev/src/runtime/components/Kbd.vue
+    to: https://github.com/nuxt/ui/tree/v3/src/runtime/components/Kbd.vue
 navigation:
   title: Kbd
 ---
@@ -31,7 +31,7 @@ props:
 ---
 ::
 
-You can pass special keys to the `value` prop that goes through the [`useKbd`](https://github.com/benjamincanac/ui3/blob/dev/src/runtime/composables/useKbd.ts) composable. For example, the `meta` key displays as `⌘` on macOS and `Ctrl` on other platforms.
+You can pass special keys to the `value` prop that goes through the [`useKbd`](https://github.com/nuxt/ui/blob/v3/src/runtime/composables/useKbd.ts) composable. For example, the `meta` key displays as `⌘` on macOS and `Ctrl` on other platforms.
 
 ::component-code
 ---

docs/content/3.components/link.md

@@ -3,7 +3,7 @@ description: A wrapper around <NuxtLink> with extra props.
 links:
   - label: GitHub
     icon: i-simple-icons-github
-    to: https://github.com/benjamincanac/ui3/tree/dev/src/runtime/components/Link.vue
+    to: https://github.com/nuxt/ui/tree/v3/src/runtime/components/Link.vue
 ---
 
 ## Usage

docs/content/3.components/meter.md

@@ -3,7 +3,7 @@ description: A gauge meter that fills or depletes.
 links:
   - label: GitHub
     icon: i-simple-icons-github
-    to: https://github.com/benjamincanac/ui3/tree/dev/src/runtime/components/Meter.vue
+    to: https://github.com/nuxt/ui/tree/v3/src/runtime/components/Meter.vue
 navigation: false
 ---
 

docs/content/3.components/modal.md

@@ -6,7 +6,7 @@ links:
     to: https://www.radix-vue.com/components/dialog.html
   - label: GitHub
     icon: i-simple-icons-github
-    to: https://github.com/benjamincanac/ui3/tree/dev/src/runtime/components/Modal.vue
+    to: https://github.com/nuxt/ui/tree/v3/src/runtime/components/Modal.vue
 ---
 
 ## Usage
@@ -281,7 +281,7 @@ This allows you to move the trigger outside of the Modal or remove it entirely.
 You can use the [`useModal`](/composables/use-modal) composable to open a Modal programatically.
 
 ::important
-Make sure to wrap your app with the [App](/components/app) component which uses the [ModalProvider](https://github.com/benjamincanac/ui3/blob/dev/src/runtime/components/ModalProvider.vue) component.
+Make sure to wrap your app with the [App](/components/app) component which uses the [ModalProvider](https://github.com/nuxt/ui/blob/v3/src/runtime/components/ModalProvider.vue) component.
 ::
 
 First, create a modal component that will be opened programatically:
@@ -359,6 +359,7 @@ ignore:
   - rel
   - noRel
   - prefetch
+  - prefetchOn
   - noPrefetch
   - prefetchedClass
   - replace

docs/content/3.components/navigation-menu.md

@@ -7,10 +7,7 @@ links:
     to: https://www.radix-vue.com/components/navigation-menu.html
   - label: GitHub
     icon: i-simple-icons-github
-    to: https://github.com/benjamincanac/ui3/tree/dev/src/runtime/components/NavigationMenu.vue
-navigation:
-  badge:
-    label: Todo
+    to: https://github.com/nuxt/ui/tree/v3/src/runtime/components/NavigationMenu.vue
 ---
 
 ## Usage
@@ -24,6 +21,8 @@ Use the `items` prop as an array of objects with the following properties:
 - `avatar?: AvatarProps`{lang="ts-type"}
 - `badge?: string | number | BadgeProps`{lang="ts-type"}
 - `trailingIcon?: string`{lang="ts-type"}
+- `value?: string`{lang="ts-type"}
+- `disabled?: boolean`{lang="ts-type"}
 - `class?: any`{lang="ts-type"}
 - [`slot?: string`{lang="ts-type"}](#with-custom-slot)
 - `select?(e: Event): void`{lang="ts-type"}
@@ -42,6 +41,7 @@ props:
   items:
     - label: Guide
       icon: i-heroicons-book-open
+      to: /getting-started
       children:
         - label: Introduction
           description: Fully styled and customizable components for Nuxt.
@@ -123,7 +123,7 @@ props:
 You can pass an array of arrays to the `items` prop to display groups of items.
 ::
 
-::tip{class="[&_ul]:my-0 [&_ul]:marker:text-green-500/50 dark:[&_ul]:marker:text-green-400/50"}
+::tip
 Each item can take a `children` array of objects with the following properties to create submenus:
 
 - `label: string`
@@ -139,10 +139,8 @@ Use the `orientation` prop to change the orientation of the NavigationMenu.
 
 ::component-code
 ---
-collapse: true
 ignore:
   - items
-  - class
 external:
   - items
 props:
@@ -150,6 +148,7 @@ props:
   items:
     - - label: Guide
         icon: i-heroicons-book-open
+        to: /getting-started
       - label: Composables
         icon: i-heroicons-circle-stack
         to: /composables
@@ -166,7 +165,7 @@ props:
 ::
 
 ::note
-Groups will be spaced between each other when orientation is `horizontal` and separated by a line when orientation is `vertical`.
+Groups will be spaced when orientation is `horizontal` and separated when orientation is `vertical`.
 ::
 
 ### Highlight
@@ -178,7 +177,6 @@ Use the `highlight-color` prop to change the color of the border. It defaults to
 ::component-code
 ---
 prettier: true
-collapse: true
 ignore:
   - items
   - highlight
@@ -192,6 +190,7 @@ props:
   items:
     - - label: Guide
         icon: i-heroicons-book-open
+        to: /getting-started
       - label: Composables
         icon: i-heroicons-circle-stack
         to: /composables
@@ -218,10 +217,8 @@ Use the `color` prop to change the color of the NavigationMenu.
 
 ::component-code
 ---
-collapse: true
 ignore:
   - items
-  - class
 external:
   - items
 props:
@@ -229,6 +226,7 @@ props:
   items:
     - - label: Guide
         icon: i-heroicons-book-open
+        to: /getting-started
       - label: Composables
         icon: i-heroicons-circle-stack
         to: /composables
@@ -250,10 +248,8 @@ Use the `variant` prop to change the variant of the NavigationMenu.
 
 ::component-code
 ---
-collapse: true
 ignore:
   - items
-  - class
 external:
   - items
 props:
@@ -263,6 +259,7 @@ props:
   items:
     - - label: Guide
         icon: i-heroicons-book-open
+        to: /getting-started
       - label: Composables
         icon: i-heroicons-circle-stack
         to: /composables
@@ -282,8 +279,232 @@ props:
 The `highlight` prop changes the `pill` variant active item style. Try it out to see the difference.
 ::
 
+### Icon
+
+Use the `trailing-icon` prop to customize the trailing [Icon](/components/icon) of each item. Defaults to `i-heroicons-chevron-down-20-solid`. This icon is only displayed when an item has children.
+
+::note
+You can also set an icon for a specific item by using the `trailingIcon` property in the item object.
+::
+
+::component-code
+---
+collapse: true
+ignore:
+  - items
+  - class
+external:
+  - items
+props:
+  trailingIcon: 'i-heroicons-plus'
+  items:
+    - label: Guide
+      icon: i-heroicons-book-open
+      to: /getting-started
+      children:
+        - label: Introduction
+          description: Fully styled and customizable components for Nuxt.
+          icon: i-heroicons-home
+        - label: Installation
+          description: Learn how to install and configure Nuxt UI in your application.
+          icon: i-heroicons-cloud-arrow-down
+        - label: 'Icons'
+          icon: 'i-heroicons-face-smile'
+          description: 'You have nothing to do, @nuxt/icon will handle it automatically.'
+        - label: 'Colors'
+          icon: 'i-heroicons-swatch'
+          description: 'Choose a primary and a gray color from your Tailwind CSS theme.'
+        - label: 'Theme'
+          icon: 'i-heroicons-cog'
+          description: 'You can customize components by using the `class` / `ui` props or in your app.config.ts.'
+    - label: Composables
+      icon: i-heroicons-circle-stack
+      to: /composables
+      children:
+        - label: defineShortcuts
+          icon: i-heroicons-document-text-20-solid
+          description: Define shortcuts for your application.
+          to: /composables/define-shortcuts
+        - label: useModal
+          icon: i-heroicons-document-text-20-solid
+          description: Display a modal within your application.
+          to: /composables/use-modal
+        - label: useSlideover
+          icon: i-heroicons-document-text-20-solid
+          description: Display a slideover within your application.
+          to: /composables/use-slideover
+        - label: useToast
+          icon: i-heroicons-document-text-20-solid
+          description: Display a toast within your application.
+          to: /composables/use-toast
+    - label: Components
+      icon: i-heroicons-cube-transparent
+      to: /components
+      active: true
+      children:
+        - label: Link
+          icon: i-heroicons-document-text-20-solid
+          description: Use NuxtLink with superpowers.
+          to: /components/link
+        - label: Modal
+          icon: i-heroicons-document-text-20-solid
+          description: Display a modal within your application.
+          to: /components/modal
+        - label: NavigationMenu
+          icon: i-heroicons-document-text-20-solid
+          description: Display a list of links.
+          to: /components/navigation-menu
+        - label: Pagination
+          icon: i-heroicons-document-text-20-solid
+          description: Display a list of pages.
+          to: /components/pagination
+        - label: Popover
+          icon: i-heroicons-document-text-20-solid
+          description: Display a non-modal dialog that floats around a trigger element.
+          to: /components/popover
+        - label: Progress
+          icon: i-heroicons-document-text-20-solid
+          description: Show a horizontal bar to indicate task progression.
+          to: /components/progress
+  class: 'justify-center'
+---
+::
+
+::tip
+You can customize this icon globally in your `app.config.ts` under `ui.icons.chevronDown` key.
+::
+
+### Arrow
+
+Use the `arrow` prop to display an arrow on the NavigationMenu content when items have children.
+
+::component-code
+---
+collapse: true
+ignore:
+  - items
+  - arrow
+  - class
+external:
+  - items
+props:
+  arrow: true
+  items:
+    - label: Guide
+      icon: i-heroicons-book-open
+      to: /getting-started
+      children:
+        - label: Introduction
+          description: Fully styled and customizable components for Nuxt.
+          icon: i-heroicons-home
+        - label: Installation
+          description: Learn how to install and configure Nuxt UI in your application.
+          icon: i-heroicons-cloud-arrow-down
+        - label: 'Icons'
+          icon: 'i-heroicons-face-smile'
+          description: 'You have nothing to do, @nuxt/icon will handle it automatically.'
+        - label: 'Colors'
+          icon: 'i-heroicons-swatch'
+          description: 'Choose a primary and a gray color from your Tailwind CSS theme.'
+        - label: 'Theme'
+          icon: 'i-heroicons-cog'
+          description: 'You can customize components by using the `class` / `ui` props or in your app.config.ts.'
+    - label: Composables
+      icon: i-heroicons-circle-stack
+      to: /composables
+      children:
+        - label: defineShortcuts
+          icon: i-heroicons-document-text-20-solid
+          description: Define shortcuts for your application.
+          to: /composables/define-shortcuts
+        - label: useModal
+          icon: i-heroicons-document-text-20-solid
+          description: Display a modal within your application.
+          to: /composables/use-modal
+        - label: useSlideover
+          icon: i-heroicons-document-text-20-solid
+          description: Display a slideover within your application.
+          to: /composables/use-slideover
+        - label: useToast
+          icon: i-heroicons-document-text-20-solid
+          description: Display a toast within your application.
+          to: /composables/use-toast
+    - label: Components
+      icon: i-heroicons-cube-transparent
+      to: /components
+      active: true
+      children:
+        - label: Link
+          icon: i-heroicons-document-text-20-solid
+          description: Use NuxtLink with superpowers.
+          to: /components/link
+        - label: Modal
+          icon: i-heroicons-document-text-20-solid
+          description: Display a modal within your application.
+          to: /components/modal
+        - label: NavigationMenu
+          icon: i-heroicons-document-text-20-solid
+          description: Display a list of links.
+          to: /components/navigation-menu
+        - label: Pagination
+          icon: i-heroicons-document-text-20-solid
+          description: Display a list of pages.
+          to: /components/pagination
+        - label: Popover
+          icon: i-heroicons-document-text-20-solid
+          description: Display a non-modal dialog that floats around a trigger element.
+          to: /components/popover
+        - label: Progress
+          icon: i-heroicons-document-text-20-solid
+          description: Show a horizontal bar to indicate task progression.
+          to: /components/progress
+  class: 'justify-center'
+---
+::
+
+::note
+The arrow is animated to follow the active item.
+::
+
 ## Examples
 
+### Control active item
+
+You can control the active item by using the `default-value` prop or the `v-model` directive with the index of the item.
+
+::component-example
+---
+collapse: true
+name: 'navigation-menu-model-value-example'
+---
+::
+
+::tip
+You can also pass the `value` of one of the items if provided.
+::
+
+### With custom slot
+
+Use the `slot` property to customize a specific item.
+
+You will have access to the following slots:
+
+- `#{{ item.slot }}`{lang="ts-type"}
+- `#{{ item.slot }}-leading`{lang="ts-type"}
+- `#{{ item.slot }}-label`{lang="ts-type"}
+- `#{{ item.slot }}-trailing`{lang="ts-type"}
+
+::component-example
+---
+name: 'navigation-menu-custom-slot-example'
+class: 'justify-center'
+---
+::
+
+::tip{to="#slots"}
+You can also use the `#item`, `#item-leading`, `#item-label` and `#item-trailing` slots to customize all items.
+::
+
 ## API
 
 ### Props

docs/content/3.components/pagination.md

@@ -6,7 +6,7 @@ links:
     to: https://www.radix-vue.com/components/pagination.html
   - label: GitHub
     icon: i-simple-icons-github
-    to: https://github.com/benjamincanac/ui3/tree/dev/src/runtime/components/Pagination.vue
+    to: https://github.com/nuxt/ui/tree/v3/src/runtime/components/Pagination.vue
 navigation:
   badge:
     label: Todo

docs/content/3.components/popover.md

@@ -6,7 +6,7 @@ links:
     to: https://www.radix-vue.com/components/popover.html
   - label: GitHub
     icon: i-simple-icons-github
-    to: https://github.com/benjamincanac/ui3/tree/dev/src/runtime/components/Popover.vue
+    to: https://github.com/nuxt/ui/tree/v3/src/runtime/components/Popover.vue
 ---
 
 ## Usage

docs/content/3.components/progress.md

@@ -6,7 +6,7 @@ links:
     to: https://www.radix-vue.com/components/progress.html
   - label: GitHub
     icon: i-simple-icons-github
-    to: https://github.com/benjamincanac/ui3/tree/dev/src/runtime/components/Progress.vue
+    to: https://github.com/nuxt/ui/tree/v3/src/runtime/components/Progress.vue
 ---
 
 ## Usage

docs/content/3.components/radio-group.md

@@ -7,7 +7,7 @@ links:
     to: https://www.radix-vue.com/components/radio-group.html
   - label: GitHub
     icon: i-simple-icons-github
-    to: https://github.com/benjamincanac/ui3/tree/dev/src/runtime/components/RadioGroup.vue
+    to: https://github.com/nuxt/ui/tree/v3/src/runtime/components/RadioGroup.vue
 ---
 
 ## Usage
@@ -40,7 +40,7 @@ You can also pass an array of objects with the following properties:
 
 - `label?: string`{lang="ts-type"}
 - `description?: string`{lang="ts-type"}
-- `value?: string`{lang="ts-type"}
+- [`value?: string`{lang="ts-type"}](#value-key)
 - `disabled?: boolean`{lang="ts-type"}
 
 ::component-code
@@ -70,6 +70,8 @@ props:
 When using objects, you need to reference the `value` property of the object in the `v-model` directive or the `default-value` prop.
 ::
 
+#### Value Key
+
 You can change the property that is used to set the value by using the `value-key` prop.
 
 ::component-code

docs/content/3.components/select-menu.md

@@ -7,7 +7,7 @@ links:
     to: https://www.radix-vue.com/components/combobox.html
   - label: GitHub
     icon: i-simple-icons-github
-    to: https://github.com/benjamincanac/ui3/tree/dev/src/runtime/components/SelectMenu.vue
+    to: https://github.com/nuxt/ui/tree/v3/src/runtime/components/SelectMenu.vue
 navigation:
   badge:
     label: Todo

docs/content/3.components/select.md

@@ -6,7 +6,7 @@ links:
     to: https://www.radix-vue.com/components/select.html
   - label: GitHub
     icon: i-simple-icons-github
-    to: https://github.com/benjamincanac/ui3/tree/dev/src/runtime/components/Select.vue
+    to: https://github.com/nuxt/ui/tree/v3/src/runtime/components/Select.vue
 ---
 
 ## Usage

docs/content/3.components/separator.md

@@ -6,7 +6,7 @@ links:
     to: https://www.radix-vue.com/components/separator.html
   - label: GitHub
     icon: i-simple-icons-github
-    to: https://github.com/benjamincanac/ui3/tree/dev/src/runtime/components/Separator.vue
+    to: https://github.com/nuxt/ui/tree/v3/src/runtime/components/Separator.vue
 ---
 
 ## Usage

docs/content/3.components/skeleton.md

@@ -3,7 +3,7 @@ description: A placeholder to show while content is loading.
 links:
   - label: GitHub
     icon: i-simple-icons-github
-    to: https://github.com/benjamincanac/ui3/tree/dev/src/runtime/components/Skeleton.vue
+    to: https://github.com/nuxt/ui/tree/v3/src/runtime/components/Skeleton.vue
 ---
 
 ## Usage

docs/content/3.components/slideover.md

@@ -6,7 +6,7 @@ links:
     to: https://www.radix-vue.com/components/dialog.html
   - label: GitHub
     icon: i-simple-icons-github
-    to: https://github.com/benjamincanac/ui3/tree/dev/src/runtime/components/Slideover.vue
+    to: https://github.com/nuxt/ui/tree/v3/src/runtime/components/Slideover.vue
 ---
 
 ## Usage
@@ -280,7 +280,7 @@ This allows you to move the trigger outside of the Slideover or remove it entire
 You can use the [`useSlideover`](/composables/use-slideover) composable to open a Slideover programatically.
 
 ::important
-Make sure to wrap your app with the [App](/components/app) component which uses the [SlideoverProvider](https://github.com/benjamincanac/ui3/blob/dev/src/runtime/components/SlideoverProvider.vue) component.
+Make sure to wrap your app with the [App](/components/app) component which uses the [SlideoverProvider](https://github.com/nuxt/ui/blob/v3/src/runtime/components/SlideoverProvider.vue) component.
 ::
 
 First, create a slideover component that will be opened programatically:
@@ -346,6 +346,7 @@ ignore:
   - rel
   - noRel
   - prefetch
+  - prefetchOn
   - noPrefetch
   - prefetchedClass
   - replace

docs/content/3.components/slider.md

@@ -6,7 +6,7 @@ links:
     to: https://www.radix-vue.com/components/slider.html
   - label: GitHub
     icon: i-simple-icons-github
-    to: https://github.com/benjamincanac/ui3/tree/dev/src/runtime/components/Slider.vue
+    to: https://github.com/nuxt/ui/tree/v3/src/runtime/components/Slider.vue
 ---
 
 ## Usage

docs/content/3.components/switch.md

@@ -6,7 +6,7 @@ links:
     to: https://www.radix-vue.com/components/switch.html
   - label: GitHub
     icon: i-simple-icons-github
-    to: https://github.com/benjamincanac/ui3/tree/dev/src/runtime/components/Switch.vue
+    to: https://github.com/nuxt/ui/tree/v3/src/runtime/components/Switch.vue
 ---
 
 ## Usage

docs/content/3.components/table.md

@@ -3,7 +3,7 @@ description: A responsive table element to display data in rows and columns.
 links:
   - label: GitHub
     icon: i-simple-icons-github
-    to: https://github.com/benjamincanac/ui3/tree/dev/src/runtime/components/Table.vue
+    to: https://github.com/nuxt/ui/tree/v3/src/runtime/components/Table.vue
 navigation:
   badge:
     label: Todo

docs/content/3.components/tabs.md

@@ -6,7 +6,7 @@ links:
     to: https://www.radix-vue.com/components/tabs.html
   - label: GitHub
     icon: i-simple-icons-github
-    to: https://github.com/benjamincanac/ui3/tree/dev/src/runtime/components/Tabs.vue
+    to: https://github.com/nuxt/ui/tree/v3/src/runtime/components/Tabs.vue
 ---
 
 ## Usage

docs/content/3.components/textarea.md

@@ -3,7 +3,7 @@ description: A textarea element to input multi-line text.
 links:
   - label: GitHub
     icon: i-simple-icons-github
-    to: https://github.com/benjamincanac/ui3/tree/dev/src/runtime/components/Textarea.vue
+    to: https://github.com/nuxt/ui/tree/v3/src/runtime/components/Textarea.vue
 ---
 
 ## Usage

docs/content/3.components/toast.md

@@ -6,7 +6,7 @@ links:
     to: https://www.radix-vue.com/components/toast.html
   - label: GitHub
     icon: i-simple-icons-github
-    to: https://github.com/benjamincanac/ui3/tree/dev/src/runtime/components/Toast.vue
+    to: https://github.com/nuxt/ui/tree/v3/src/runtime/components/Toast.vue
 navigation:
   badge:
     label: Todo
@@ -17,7 +17,7 @@ navigation:
 Use the [useToast](/composables/use-toast) composable to display a toast in your application.
 
 ::important
-Make sure to wrap your app with the [App](/components/app) component which uses our [Toaster](https://github.com/benjamincanac/ui3/blob/dev/src/runtime/components/Toaster.vue) component which uses the [ToastProvider](https://www.radix-vue.com/components/toast.html#provider) component from Radix Vue.
+Make sure to wrap your app with the [App](/components/app) component which uses our [Toaster](https://github.com/nuxt/ui/blob/v3/src/runtime/components/Toaster.vue) component which uses the [ToastProvider](https://www.radix-vue.com/components/toast.html#provider) component from Radix Vue.
 ::
 
 ::tip{to="/components/app#props"}
@@ -63,6 +63,7 @@ ignore:
   - rel
   - noRel
   - prefetch
+  - prefetchOn
   - noPrefetch
   - prefetchedClass
   - replace

docs/content/3.components/tooltip.md

@@ -6,7 +6,7 @@ links:
     to: https://www.radix-vue.com/components/tooltip.html
   - label: GitHub
     icon: i-simple-icons-github
-    to: https://github.com/benjamincanac/ui3/tree/dev/src/runtime/components/Tooltip.vue
+    to: https://github.com/nuxt/ui/tree/v3/src/runtime/components/Tooltip.vue
 ---
 
 ## Usage

docs/modules/component-example.ts

@@ -72,7 +72,7 @@ export default defineNuxtModule({
         .reduce((acc, component) => {
           acc[component.pascalName] = component
           return acc
-        }, {})
+        }, {} as Record<string, any>)
       await stubOutput()
     })
 
@@ -94,10 +94,10 @@ export default defineNuxtModule({
           await fetchComponents()
           await updateOutput()
         },
-        configResolved(config) {
+        configResolved(config: any) {
           _configResolved = config
         },
-        async handleHotUpdate({ file }) {
+        async handleHotUpdate({ file }: { file: any }) {
           if (
             Object.entries(components).some(
               ([, comp]: any) => comp.filePath === file

docs/nuxt.config.ts

@@ -20,7 +20,6 @@ export default defineNuxtConfig({
     module,
     '@nuxt/ui-pro',
     '@nuxt/content',
-    '@nuxt/fonts',
     '@nuxt/image',
     '@nuxtjs/plausible',
     '@vueuse/nuxt',
@@ -95,13 +94,12 @@ export default defineNuxtConfig({
       '@nuxt/content',
       '@nuxt/icon',
       '@nuxt/image',
-      // '@nuxt/ui-templates',
+      '@nuxt/ui-pro',
       '@nuxtjs/color-mode',
       '@nuxtjs/mdc',
       '@nuxtjs/plausible',
       'nuxt/dist',
       'nuxt-og-image',
-      // 'nuxt-site-config',
       resolve('./app/components')
       // process.env.NUXT_UI_PRO_PATH ? resolve(process.env.NUXT_UI_PRO_PATH, 'docs', 'components') : '.c12'
     ],
@@ -128,6 +126,7 @@ export default defineNuxtConfig({
         'UCheckbox',
         'UChip',
         'UCollapsible',
+        'UCommandPalette',
         'UContextMenu',
         'UDrawer',
         'UDropdownMenu',
@@ -159,9 +158,5 @@ export default defineNuxtConfig({
     url: 'https://ui3.nuxt.com'
   },
 
-  typescript: {
-    strict: false
-  },
-
   compatibilityDate: '2024-07-09'
 })

docs/package.json

@@ -4,23 +4,22 @@
   "type": "module",
   "dependencies": {
     "@iconify-json/heroicons": "^1.2.0",
-    "@iconify-json/simple-icons": "^1.2.1",
-    "@iconify-json/vscode-icons": "^1.2.0",
+    "@iconify-json/simple-icons": "^1.2.3",
+    "@iconify-json/vscode-icons": "^1.2.2",
     "@nuxt/content": "^2.13.2",
-    "@nuxt/fonts": "^0.7.2",
     "@nuxt/image": "^1.8.0",
     "@nuxt/ui": "latest",
-    "@nuxt/ui-pro": "file:../../ui-pro2",
+    "@nuxt/ui-pro": "2.0.0-alpha.2",
     "@nuxtjs/plausible": "^1.0.2",
     "@octokit/rest": "^21.0.2",
-    "@vueuse/nuxt": "^11.0.3",
+    "@vueuse/nuxt": "^11.1.0",
     "joi": "^17.13.3",
-    "nuxt": "^3.13.1",
-    "nuxt-component-meta": "^0.7.0",
-    "nuxt-og-image": "^3.0.0-rc.66",
+    "nuxt": "^3.13.2",
+    "nuxt-component-meta": "^0.8.2",
+    "nuxt-og-image": "^3.0.2",
     "prettier": "^3.3.3",
     "ufo": "^1.5.4",
-    "valibot": "^0.41.0",
+    "valibot": "^0.42.0",
     "yup": "^1.4.0",
     "zod": "^3.23.8"
   }

docs/server/api/component-example.get.ts

@@ -5,7 +5,7 @@ import components from '#component-example/nitro'
 
 export default defineEventHandler((event) => {
   appendHeader(event, 'Access-Control-Allow-Origin', '*')
-  const componentName = (event.context.params['component?'] || '').replace(/\.json$/, '')
+  const componentName = (event.context.params?.['component?'] || '').replace(/\.json$/, '')
   if (componentName) {
     const component = components[pascalCase(componentName)]
     if (!component) {

docs/server/api/pulls.json.get.ts

@@ -1,6 +1,6 @@
 import { Octokit } from '@octokit/rest'
 
-function isUserABot(user) {
+function isUserABot(user: any) {
   return user?.login?.endsWith('-bot') || user?.login?.endsWith('[bot]')
 }
 

package.json

@@ -1,7 +1,8 @@
 {
   "name": "@nuxt/ui",
-  "version": "3.0.0-alpha.0",
-  "packageManager": "pnpm@9.9.0",
+  "description": "A UI Library for Modern Web Apps, powered by Vue & Tailwind CSS.",
+  "version": "3.0.0-alpha.2",
+  "packageManager": "pnpm@9.10.0",
   "repository": {
     "type": "git",
     "url": "git+https://github.com/nuxt/ui.git"
@@ -13,22 +14,21 @@
     ".": {
       "types": "./dist/module.d.ts",
       "import": "./dist/module.mjs",
-      "require": "./dist/module.cjs"
+      "require": "./dist/module.cjs",
+      "style": "./dist/runtime/index.css"
     },
     "./runtime/*": "./dist/runtime/*"
   },
   "bin": {
     "nuxt-ui": "./cli/index.mjs"
   },
+  "style": "./dist/runtime/index.css",
   "main": "./dist/module.cjs",
   "types": "./dist/types.d.ts",
   "files": [
     "dist",
     "cli"
   ],
-  "engines": {
-    "node": ">=v16.20.2"
-  },
   "scripts": {
     "build": "nuxt-module-build build",
     "prepack": "pnpm build",
@@ -42,39 +42,40 @@
     "lint:fix": "eslint . --fix",
     "typecheck": "vue-tsc --noEmit && nuxi typecheck playground && nuxi typecheck docs",
     "test": "vitest",
-    "release": "release-it"
+    "release": "release-it --preRelease=alpha --npm.tag=next"
   },
   "dependencies": {
+    "@nuxt/fonts": "^0.8.0",
     "@nuxt/icon": "^1.5.1",
-    "@nuxt/kit": "^3.13.1",
-    "@nuxt/schema": "^3.13.1",
-    "@nuxtjs/color-mode": "^3.4.4",
-    "@tailwindcss/postcss": "4.0.0-alpha.22",
-    "@tailwindcss/vite": "4.0.0-alpha.22",
-    "@vueuse/core": "^11.0.3",
-    "@vueuse/integrations": "^11.0.3",
+    "@nuxt/kit": "^3.13.2",
+    "@nuxt/schema": "^3.13.2",
+    "@nuxtjs/color-mode": "^3.5.1",
+    "@tailwindcss/postcss": "4.0.0-alpha.24",
+    "@tailwindcss/vite": "4.0.0-alpha.24",
+    "@vueuse/core": "^11.1.0",
+    "@vueuse/integrations": "^11.1.0",
     "defu": "^6.1.4",
     "fuse.js": "^7.0.0",
-    "ohash": "^1.1.3",
+    "ohash": "^1.1.4",
     "radix-vue": "^1.9.5",
     "scule": "^1.3.0",
     "tailwind-variants": "^0.2.1",
-    "tailwindcss": "4.0.0-alpha.22",
+    "tailwindcss": "4.0.0-alpha.24",
     "vaul-vue": "^0.2.0"
   },
   "devDependencies": {
-    "@nuxt/eslint-config": "^0.5.5",
-    "@nuxt/module-builder": "^0.8.3",
-    "@nuxt/test-utils": "^3.14.1",
-    "@release-it/conventional-changelog": "^8.0.1",
+    "@nuxt/eslint-config": "^0.5.7",
+    "@nuxt/module-builder": "^0.8.4",
+    "@nuxt/test-utils": "^3.14.2",
+    "@release-it/conventional-changelog": "^8.0.2",
     "@vue/test-utils": "^2.4.6",
-    "eslint": "^9.9.1",
-    "happy-dom": "^15.7.3",
+    "eslint": "^9.10.0",
+    "happy-dom": "^15.7.4",
     "joi": "^17.13.3",
-    "nuxt": "^3.13.1",
+    "nuxt": "^3.13.2",
     "release-it": "^17.6.0",
-    "valibot": "^0.41.0",
-    "vitest": "^2.0.5",
+    "valibot": "^0.42.0",
+    "vitest": "^2.1.1",
     "vitest-environment-nuxt": "^1.0.1",
     "vue-tsc": "^2.1.6",
     "yup": "^1.4.0",