feat(Form): add validate-on error-input

Adds `error-input` option to the validate on prop to validate on input only when the field has an error. Resolves #2599
2026-01-15 12:39:35 +01:00 · 2025-06-14 18:09:02 +02:00
326 changed files with 5895 additions and 11271 deletions
--- a/.github/workflows/stale.yml
+++ b/.github/workflows/stale.yml
@@ -33,5 +33,5 @@ jobs:
            Thank you for your understanding and support!

            — Nuxt UI Team
-          exempt-issue-labels: 'feature,announcement,release,reka-ui,upstream'
-          operations-per-run: 300
+          exempt-issue-labels: 'feature,announcement'
+          operations-per-run: 300
--- a/.nuxtrc
+++ b/.nuxtrc
@@ -1 +0,0 @@
-experimental.normalizeComponentNames=false
--- a/CHANGELOG.md
+++ b/CHANGELOG.md
@@ -1,51 +1,5 @@
 # Changelog

-## [3.2.0](https://github.com/nuxt/ui/compare/v3.1.3...v3.2.0) (2025-06-25)
-
-### ⚠ BREAKING CHANGES
-
-* **useOverlay:** correct spelling of `unmount` function (#4051)
-
-### Features
-
-* **Avatar:** add `chip` prop ([#4224](https://github.com/nuxt/ui/issues/4224)) ([03ac395](https://github.com/nuxt/ui/commit/03ac395164c02c964361c68743268b1bc90aae59))
-* **Carousel:** allow customization of active dot color ([#4229](https://github.com/nuxt/ui/issues/4229)) ([2ee1c5a](https://github.com/nuxt/ui/commit/2ee1c5ac2e20ab9ce2f4037a8e8c64e561b0428b))
-* **CommandPalette:** handle `children` in items ([#4226](https://github.com/nuxt/ui/issues/4226)) ([59c26ec](https://github.com/nuxt/ui/commit/59c26ec1230375a24fbaf8a630a696ae854700c7))
-* **extendLocale:** new composable ([0f558fc](https://github.com/nuxt/ui/commit/0f558fc0d014d51549222accfc50286d1770d1aa)), closes [#3729](https://github.com/nuxt/ui/issues/3729)
-* **Form:** expose loading state to default slot ([#4247](https://github.com/nuxt/ui/issues/4247)) ([ea0c459](https://github.com/nuxt/ui/commit/ea0c459306be585bacaaf5b433114d072550c824))
-* **InputTags:** new component ([#4261](https://github.com/nuxt/ui/issues/4261)) ([54bb228](https://github.com/nuxt/ui/commit/54bb2282c58d3bf5a7dde4cdee687c68efd934a0))
-* **locale:** add Luxembourgish language ([#4264](https://github.com/nuxt/ui/issues/4264)) ([43cbb94](https://github.com/nuxt/ui/commit/43cbb94ee25106b414fc8fe979fa65ebaa9ccc76))
-* **Modal/Slideover:** add `actions` slot ([#4358](https://github.com/nuxt/ui/issues/4358)) ([8156971](https://github.com/nuxt/ui/commit/81569713e9da9d5531ecdf4614660b84c686fa81))
-* **Modal/Slideover:** add `close` method in slots ([#4219](https://github.com/nuxt/ui/issues/4219)) ([5835eb5](https://github.com/nuxt/ui/commit/5835eb5f0f835b5f03646dec78f85b2f556a109b))
-* **Select/SelectMenu/Tabs:** expose trigger refs ([7a2bd4e](https://github.com/nuxt/ui/commit/7a2bd4e6179373902ba6f285903ea896fd1d378f)), closes [#4292](https://github.com/nuxt/ui/issues/4292)
-* **Select/SelectMenu:** handle dynamic `autofocus` ([1a4de49](https://github.com/nuxt/ui/commit/1a4de49c1665c9ef65279315be0393d6272447b9)), closes [#4324](https://github.com/nuxt/ui/issues/4324)
-* **Table:** add `body-top` / `body-bottom` slots ([#4354](https://github.com/nuxt/ui/issues/4354)) ([595fc64](https://github.com/nuxt/ui/commit/595fc64515613fe82c3a56fc5518f2e3fcce6e19))
-* **Timeline:** add `reverse` prop ([#4316](https://github.com/nuxt/ui/issues/4316)) ([5170cfd](https://github.com/nuxt/ui/commit/5170cfd7eb44a25c64673cf12979f9ca1049695f))
-* **Timeline:** new component ([#4215](https://github.com/nuxt/ui/issues/4215)) ([8017767](https://github.com/nuxt/ui/commit/80177679f2aa0d7f0e39e639a02d527a06e6172c))
-
-### Bug Fixes
-
-* **Card/Drawer/Modal:** prevent scrollbars overflow ([#4368](https://github.com/nuxt/ui/issues/4368)) ([c3adc38](https://github.com/nuxt/ui/commit/c3adc381c90dad7152e27fc303ee678efc7c4c94))
-* **components:** remove default `md` size on buttons ([#4357](https://github.com/nuxt/ui/issues/4357)) ([be41aed](https://github.com/nuxt/ui/commit/be41aed1f3d3476801e1840dbb8766926bc93c05))
-* **defineShortcuts:** allow `meta_-` shortcut ([#4321](https://github.com/nuxt/ui/issues/4321)) ([4e7c1c9](https://github.com/nuxt/ui/commit/4e7c1c9c305b45dd76d4c238e70a6aeedae78c8b))
-* **Form:** conditionally type form data via `transform` prop ([#4188](https://github.com/nuxt/ui/issues/4188)) ([37abcc6](https://github.com/nuxt/ui/commit/37abcc6a5b0a678be626673af5067956657a50d6))
-* **Form:** expose reactive fields ([#4386](https://github.com/nuxt/ui/issues/4386)) ([1a8feb7](https://github.com/nuxt/ui/commit/1a8feb751e6827c414ef82fe9fb259ba7dcc7e08))
-* **InputMenu/SelectMenu:** dynamic `empty` size ([ba3c6e8](https://github.com/nuxt/ui/commit/ba3c6e8788ed75d86d4406749797da52d7816b84)), closes [#4377](https://github.com/nuxt/ui/issues/4377)
-* **InputTags:** extend emits interface ([8781a07](https://github.com/nuxt/ui/commit/8781a079096def0d3bae5b8d896db0df6ce37e23))
-* **Modal/Slideover:** don't emit `close:prevent` on `closeAutoFocus` ([150b334](https://github.com/nuxt/ui/commit/150b334b1d242c6dc132193e23359c03e6f35666))
-* **NavigationMenu:** nested accordion context at every level ([#4363](https://github.com/nuxt/ui/issues/4363)) ([2fa8db6](https://github.com/nuxt/ui/commit/2fa8db64ddf4c92a19e73774143518d87d001b72))
-* **NavigationMenu:** set content `max-height` in `horizontal` orientation ([62bc7b2](https://github.com/nuxt/ui/commit/62bc7b25a2d205d8dffb47a109196f91ff3e823a)), closes [#4208](https://github.com/nuxt/ui/issues/4208)
-* **Pagination:** match default button `size` ([#4350](https://github.com/nuxt/ui/issues/4350)) ([4dd56c8](https://github.com/nuxt/ui/commit/4dd56c8111e5a224105b82d541b7742b46abb34a))
-* **Select/SelectMenu:** display falsy values ([7df7ee3](https://github.com/nuxt/ui/commit/7df7ee336a925d7ee07f866551dad9350785c9fc))
-* **Select/SelectMenu:** prevent empty string display when multiple ([483e473](https://github.com/nuxt/ui/commit/483e473e3f5681cc97c3766ea47283dc95f76345))
-* **SelectMenu:** dynamic input size ([b0364b9](https://github.com/nuxt/ui/commit/b0364b96b73b9e543781a35962c03b5a983352c4))
-* **Table:** use `tr` as separator ([#4083](https://github.com/nuxt/ui/issues/4083)) ([edca3bc](https://github.com/nuxt/ui/commit/edca3bcb743c7eb63e6abbaa801d3858342a8777))
-* **Toast:** calc height on next tick ([3bf5acb](https://github.com/nuxt/ui/commit/3bf5acb683f0ad09735b2417d265d6fcfd901b11)), closes [#4265](https://github.com/nuxt/ui/issues/4265)
-* **Toaster:** smoother visibility transition for stacked toasts ([#4367](https://github.com/nuxt/ui/issues/4367)) ([abfd0ed](https://github.com/nuxt/ui/commit/abfd0ede036fa2953f9abc841d77ac71bbd3bba9))
-* **useOverlay:** correct spelling of `unmount` function ([#4051](https://github.com/nuxt/ui/issues/4051)) ([546df57](https://github.com/nuxt/ui/commit/546df572fca60325315bed17c9be3367052fb7a9))
-* **useOverlay:** set props to original props when `defaultOpen` is set ([#4308](https://github.com/nuxt/ui/issues/4308)) ([66355ba](https://github.com/nuxt/ui/commit/66355ba301d569b9f44527bafc5f8f09bcda63c0))
-* **useOverlay:** use original props when not provided to `open` ([#4269](https://github.com/nuxt/ui/issues/4269)) ([bf56e15](https://github.com/nuxt/ui/commit/bf56e15a2eed7d51199d5641649a822e91ca41ba))
-
 ## [3.1.3](https://github.com/nuxt/ui/compare/v3.1.2...v3.1.3) (2025-05-26)

 ### ⚠ BREAKING CHANGES
--- a/cli/templates.mjs
+++ b/cli/templates.mjs
@@ -31,11 +31,10 @@ const component = ({ name, primitive, pro, prose, content }) => {
      ? `
 <script lang="ts">
 import type { AppConfig } from '@nuxt/schema'
-${pro ? `import type { ComponentConfig } from '@nuxt/ui'` : ''}
 import theme from '#build/${path}/${prose ? 'prose/' : ''}${content ? 'content/' : ''}${kebabName}'
-${!pro ? `import type { ComponentConfig } from '../types/utils'` : ''}
+import type { ComponentConfig } from '../types/utils'

-type ${upperName} = ComponentConfig<typeof theme, AppConfig, '${camelName}'${pro ? `, '${key}'` : ''}>
+type ${upperName} = ComponentConfig<typeof theme, AppConfig, ${upperName}${pro ? `, '${key}'` : ''}>

 export interface ${upperName}Props {
  /**
@@ -63,7 +62,7 @@ defineSlots<${upperName}Slots>()

 const appConfig = useAppConfig() as ${upperName}['AppConfig']

-const ui = computed(() => tv({ extend: tv(theme), ...(appConfig.${pro ? 'uiPro' : 'ui'}?.${camelName} || {}) })())
+const ui = computed(() => tv({ extend: tv(theme), ...(appConfig.ui?.${camelName} || {}) })())
 </script>

 <template>
@@ -76,11 +75,10 @@ const ui = computed(() => tv({ extend: tv(theme), ...(appConfig.${pro ? 'uiPro'
 <script lang="ts">
 import type { ${upperName}RootProps, ${upperName}RootEmits } from 'reka-ui'
 import type { AppConfig } from '@nuxt/schema'
-${pro ? `import type { ComponentConfig } from '@nuxt/ui'` : ''}
 import theme from '#build/${path}/${prose ? 'prose/' : ''}${content ? 'content/' : ''}${kebabName}'
-${!pro ? `import type { ComponentConfig } from '../types/utils'` : ''}
+import type { ComponentConfig } from '../types/utils'

-type ${upperName} = ComponentConfig<typeof theme, AppConfig, '${camelName}'${pro ? `, '${key}'` : ''}>
+type ${upperName} = ComponentConfig<typeof theme, AppConfig, ${upperName}${pro ? `, '${key}'` : ''}>

 export interface ${upperName}Props extends Pick<${upperName}RootProps> {
  class?: any
@@ -107,7 +105,7 @@ const appConfig = useAppConfig() as ${upperName}['AppConfig']

 const rootProps = useForwardPropsEmits(reactivePick(props), emits)

-const ui = computed(() => tv({ extend: tv(theme), ...(appConfig.${pro ? 'uiPro' : 'ui'}?.${camelName} || {}) })())
+const ui = computed(() => tv({ extend: tv(theme), ...(appConfig.ui?.${camelName} || {}) })())
 </script>

 <template>
@@ -147,8 +145,7 @@ const test = ({ name, prose, content }) => {
      ? undefined
      : `
 import { describe, it, expect } from 'vitest'
-import ${upperName} from '../../${content ? '../' : ''}src/runtime/components/${content ? 'content/' : ''}${upperName}.vue'
-import type { ${upperName}Props, ${upperName}Slots } from '../../${content ? '../' : ''}src/runtime/components/${content ? 'content/' : ''}${upperName}.vue'
+import ${upperName}, { type ${upperName}Props, type ${upperName}Slots } from '../../${content ? '../' : ''}src/runtime/components/${content ? 'content/' : ''}${upperName}.vue'
 import ComponentRender from '../${content ? '../' : ''}component-render'

 describe('${upperName}', () => {
@@ -189,7 +186,6 @@ links:${primitive
  - label: GitHub
    icon: i-simple-icons-github
    to: https://github.com/nuxt/${pro ? 'ui-pro' : 'ui'}/tree/v3/src/runtime/components/${upperName}.vue
-navigation.badge: Soon
 ---

 ## Usage
--- a/docs/app/app.vue
+++ b/docs/app/app.vue
@@ -53,7 +53,7 @@ provide('navigation', mappedNavigation)
    <NuxtLoadingIndicator color="var(--ui-primary)" :height="2" />

    <template v-if="!route.path.startsWith('/examples')">
-      <Banner />
+      <!-- <Banner /> -->

      <Header :links="links" />
    </template>
--- a/docs/app/components/Banner.vue
+++ b/docs/app/components/Banner.vue
@@ -1,19 +1,18 @@
 <template>
  <UBanner
-    id="nuxtlabs-join-vercel"
-    title="NuxtLabs is joining Vercel"
-    icon="i-simple-icons-vercel"
-    to="https://nuxtlabs.com/?utm_source=nuxt-ui&utm_medium=banner&utm_campaign=nuxtlabs-vercel"
-    target="_blank"
+    id="ui3-launch"
+    icon="i-lucide-rocket"
+    :actions="[
+      {
+        label: 'Discover Nuxt UI Pro',
+        to: '/pro/pricing',
+        trailingIcon: 'i-lucide-arrow-right'
+      }
+    ]"
    close
-    :actions="[{
-      label: 'Read the announcement',
-      color: 'neutral',
-      variant: 'outline',
-      trailingIcon: 'i-lucide-arrow-right',
-      to: 'https://nuxtlabs.com/?utm_source=nuxt-ui&utm_medium=banner&utm_campaign=nuxtlabs-vercel',
-      target: '_blank',
-      class: 'ring-0'
-    }]"
-  />
+  >
+    <template #title>
+      <span class="font-semibold">Nuxt UI v3</span> is officially released.
+    </template>
+  </UBanner>
 </template>
--- a/docs/app/components/PageHeaderLinks.vue
+++ b/docs/app/components/PageHeaderLinks.vue
@@ -1,77 +0,0 @@
-<script setup lang="ts">
-const route = useRoute()
-const toast = useToast()
-const { copy, copied } = useClipboard()
-const site = useSiteConfig()
-
-const mdPath = computed(() => `${site.url}/raw${route.path}.md`)
-
-const items = [
-  {
-    label: 'Copy Markdown link',
-    icon: 'i-lucide-link',
-    onSelect() {
-      copy(mdPath.value)
-      toast.add({
-        title: 'Copied to clipboard',
-        icon: 'i-lucide-check-circle'
-      })
-    }
-  },
-  {
-    label: 'View as Markdown',
-    icon: 'i-simple-icons:markdown',
-    target: '_blank',
-    to: `/raw${route.path}.md`
-  },
-  {
-    label: 'Open in ChatGPT',
-    icon: 'i-simple-icons:openai',
-    target: '_blank',
-    to: `https://chatgpt.com/?hints=search&q=${encodeURIComponent(`Read ${mdPath.value} so I can ask questions about it.`)}`
-  },
-  {
-    label: 'Open in Claude',
-    icon: 'i-simple-icons:anthropic',
-    target: '_blank',
-    to: `https://claude.ai/new?q=${encodeURIComponent(`Read ${mdPath.value} so I can ask questions about it.`)}`
-  }
-]
-
-async function copyPage() {
-  copy(await $fetch<string>(`/raw${route.path}.md`))
-}
-</script>
-
-<template>
-  <UButtonGroup>
-    <UButton
-      label="Copy page"
-      :icon="copied ? 'i-lucide-copy-check' : 'i-lucide-copy'"
-      color="neutral"
-      variant="outline"
-      :ui="{
-        leadingIcon: [copied ? 'text-primary' : 'text-neutral', 'size-3.5']
-      }"
-      @click="copyPage"
-    />
-    <UDropdownMenu
-      :items="items"
-      :content="{
-        align: 'end',
-        side: 'bottom',
-        sideOffset: 8
-      }"
-      :ui="{
-        content: 'w-48'
-      }"
-    >
-      <UButton
-        icon="i-lucide-chevron-down"
-        size="sm"
-        color="neutral"
-        variant="outline"
-      />
-    </UDropdownMenu>
-  </UButtonGroup>
-</template>
--- a/docs/app/components/content/ComponentSlots.vue
+++ b/docs/app/components/content/ComponentSlots.vue
@@ -34,7 +34,7 @@ const meta = await fetchComponentMeta(name as any)
          </ProseCode>
        </ProseTd>
        <ProseTd>
-          <HighlightInlineType v-if="slot.type" :type="slot.type.replace(/ui:\s*\{[^}]*\}/g, 'ui: {}')" />
+          <HighlightInlineType v-if="slot.type" :type="slot.type" />

          <MDC v-if="slot.description" :value="slot.description" class="text-toned mt-1" :cache-key="`${kebabCase(route.path)}-${slot.name}-description`" />
        </ProseTd>
--- a/docs/app/components/content/examples/carousel/CarouselOrientationExample.vue
+++ b/docs/app/components/content/examples/carousel/CarouselOrientationExample.vue
@@ -14,8 +14,8 @@ const items = [
    v-slot="{ item }"
    orientation="vertical"
    :items="items"
-    :ui="{ container: 'h-[336px]' }"
    class="w-full max-w-xs mx-auto"
+    :ui="{ container: 'h-[336px]' }"
  >
    <img :src="item" width="320" height="320" class="rounded-lg">
  </UCarousel>
--- a/docs/app/components/content/examples/command-palette/CommandPaletteFooterSlotExample.vue
+++ b/docs/app/components/content/examples/command-palette/CommandPaletteFooterSlotExample.vue
@@ -1,78 +0,0 @@
-<script setup lang="ts">
-const groups = [
-  {
-    id: 'actions',
-    items: [
-      {
-        label: 'Add new file',
-        suffix: 'Create a new file in the current directory',
-        icon: 'i-lucide-file-plus',
-        kbds: ['meta', 'N']
-      },
-      {
-        label: 'Add new folder',
-        suffix: 'Create a new folder in the current directory',
-        icon: 'i-lucide-folder-plus',
-        kbds: ['meta', 'F']
-      },
-      {
-        label: 'Search files',
-        suffix: 'Search across all files in the project',
-        icon: 'i-lucide-search',
-        kbds: ['meta', 'P']
-      },
-      {
-        label: 'Settings',
-        suffix: 'Open application settings',
-        icon: 'i-lucide-settings',
-        kbds: ['meta', ',']
-      }
-    ]
-  },
-  {
-    id: 'recent',
-    label: 'Recent',
-    items: [
-      {
-        label: 'project.vue',
-        suffix: 'components/',
-        icon: 'i-vscode-icons-file-type-vue'
-      },
-      {
-        label: 'readme.md',
-        suffix: 'docs/',
-        icon: 'i-vscode-icons-file-type-markdown'
-      },
-      {
-        label: 'package.json',
-        suffix: 'root/',
-        icon: 'i-vscode-icons-file-type-node'
-      }
-    ]
-  }
-]
-</script>
-
-<template>
-  <UCommandPalette :groups="groups" class="flex-1 h-80">
-    <template #footer>
-      <div class="flex items-center justify-between gap-2">
-        <UIcon name="i-simple-icons-nuxtdotjs" class="size-5 text-dimmed ml-1" />
-        <div class="flex items-center gap-1">
-          <UButton color="neutral" variant="ghost" label="Open Command" class="text-dimmed" size="xs">
-            <template #trailing>
-              <UKbd value="enter" />
-            </template>
-          </UButton>
-          <USeparator orientation="vertical" class="h-4" />
-          <UButton color="neutral" variant="ghost" label="Actions" class="text-dimmed" size="xs">
-            <template #trailing>
-              <UKbd value="meta" />
-              <UKbd value="k" />
-            </template>
-          </UButton>
-        </div>
-      </div>
-    </template>
-  </UCommandPalette>
-</template>
--- a/docs/app/components/content/examples/drawer/DrawerNestedExample.vue
+++ b/docs/app/components/content/examples/drawer/DrawerNestedExample.vue
@@ -1,15 +0,0 @@
-<template>
-  <UDrawer :ui="{ content: 'h-full', overlay: 'bg-inverted/30' }">
-    <UButton label="Open" color="neutral" variant="subtle" trailing-icon="i-lucide-chevron-up" />
-
-    <template #footer>
-      <UDrawer nested :ui="{ content: 'h-full', overlay: 'bg-inverted/30' }">
-        <UButton color="neutral" variant="outline" label="Open nested" />
-
-        <template #content>
-          <Placeholder class="flex-1 m-4" />
-        </template>
-      </UDrawer>
-    </template>
-  </UDrawer>
-</template>
--- a/docs/app/components/content/examples/form/FormExampleSuperstruct.vue
+++ b/docs/app/components/content/examples/form/FormExampleSuperstruct.vue
@@ -1,6 +1,5 @@
 <script setup lang="ts">
-import { object, string, nonempty, refine } from 'superstruct'
-import type { Infer } from 'superstruct'
+import { object, string, nonempty, refine, type Infer } from 'superstruct'
 import type { FormSubmitEvent } from '@nuxt/ui'

 const schema = object({
--- a/docs/app/components/content/examples/form/FormExampleYup.vue
+++ b/docs/app/components/content/examples/form/FormExampleYup.vue
@@ -1,6 +1,5 @@
 <script setup lang="ts">
-import { object, string } from 'yup'
-import type { InferType } from 'yup'
+import { object, string, type InferType } from 'yup'
 import type { FormSubmitEvent } from '@nuxt/ui'

 const schema = object({
--- a/docs/app/components/content/examples/input-menu/InputMenuContentWidthExample.vue
+++ b/docs/app/components/content/examples/input-menu/InputMenuContentWidthExample.vue
@@ -1,31 +0,0 @@
-<script setup lang="ts">
-const { data: users } = await useFetch('https://jsonplaceholder.typicode.com/users', {
-  key: 'typicode-users-email',
-  transform: (data: { id: number, name: string, email: string }[]) => {
-    return data?.map(user => ({
-      label: user.name,
-      value: String(user.id),
-      email: user.email,
-      avatar: { src: `https://i.pravatar.cc/120?img=${user.id}` }
-    }))
-  },
-  lazy: true
-})
-</script>
-
-<template>
-  <UInputMenu
-    :items="users"
-    icon="i-lucide-user"
-    placeholder="Select user"
-    :ui="{ content: 'min-w-fit' }"
-  >
-    <template #item-label="{ item }">
-      {{ item.label }}
-
-      <span class="text-muted">
-        {{ item.email }}
-      </span>
-    </template>
-  </UInputMenu>
-</template>
--- a/docs/app/components/content/examples/input-menu/InputMenuItemsAvatarExample.vue
+++ b/docs/app/components/content/examples/input-menu/InputMenuItemsAvatarExample.vue
@@ -35,7 +35,6 @@ const items = ref([
    }
  }
 ] satisfies InputMenuItem[])
-
 const value = ref(items.value[0])
 </script>

--- a/docs/app/components/content/examples/input/InputCopyButtonExample.vue
+++ b/docs/app/components/content/examples/input/InputCopyButtonExample.vue
@@ -1,9 +1,15 @@
 <script setup lang="ts">
-import { useClipboard } from '@vueuse/core'
-
 const value = ref('npx nuxt module add ui')
+const copied = ref(false)

-const { copy, copied } = useClipboard()
+function copy() {
+  navigator.clipboard.writeText(value.value)
+  copied.value = true
+
+  setTimeout(() => {
+    copied.value = false
+  }, 2000)
+}
 </script>

 <template>
@@ -19,7 +25,7 @@ const { copy, copied } = useClipboard()
          size="sm"
          :icon="copied ? 'i-lucide-copy-check' : 'i-lucide-copy'"
          aria-label="Copy to clipboard"
-          @click="copy(value)"
+          @click="copy"
        />
      </UTooltip>
    </template>
--- a/docs/app/components/content/examples/input/InputPasswordStrengthIndicatorExample.vue
+++ b/docs/app/components/content/examples/input/InputPasswordStrengthIndicatorExample.vue
@@ -40,9 +40,9 @@ const text = computed(() => {
        placeholder="Password"
        :color="color"
        :type="show ? 'text' : 'password'"
+        :ui="{ trailing: 'pe-1' }"
        :aria-invalid="score < 4"
        aria-describedby="password-strength"
-        :ui="{ trailing: 'pe-1' }"
        class="w-full"
      >
        <template #trailing>
--- a/docs/app/components/content/examples/input/InputPasswordToggleExample.vue
+++ b/docs/app/components/content/examples/input/InputPasswordToggleExample.vue
@@ -24,10 +24,3 @@ const password = ref('')
    </template>
  </UInput>
 </template>
-
-<style>
-/* Hide the password reveal button in Edge */
-::-ms-reveal {
-    display: none;
-}
-</style>
--- a/docs/app/components/content/examples/navigation-menu/NavigationMenuContentSlotExample.vue
+++ b/docs/app/components/content/examples/navigation-menu/NavigationMenuContentSlotExample.vue
@@ -62,13 +62,13 @@ const items = [
 <template>
  <UNavigationMenu
    :items="items"
+    class="w-full justify-center"
    :ui="{
      viewport: 'sm:w-(--reka-navigation-menu-viewport-width)',
      content: 'sm:w-auto',
      childList: 'sm:w-96',
      childLinkDescription: 'text-balance line-clamp-2'
    }"
-    class="w-full justify-center"
  >
    <template #docs-content="{ item }">
      <ul class="grid gap-2 p-4 lg:w-[500px] lg:grid-cols-[minmax(0,.75fr)_minmax(0,1fr)]">
--- a/docs/app/components/content/examples/popover/PopoverCursorExample.vue
+++ b/docs/app/components/content/examples/popover/PopoverCursorExample.vue
@@ -1,43 +0,0 @@
-<script setup lang="ts">
-const open = ref(false)
-const anchor = ref({ x: 0, y: 0 })
-
-const reference = computed(() => ({
-  getBoundingClientRect: () =>
-    ({
-      width: 0,
-      height: 0,
-      left: anchor.value.x,
-      right: anchor.value.x,
-      top: anchor.value.y,
-      bottom: anchor.value.y,
-      ...anchor.value
-    } as DOMRect)
-}))
-</script>
-
-<template>
-  <UPopover
-    :open="open"
-    :reference="reference"
-    :content="{ side: 'top', sideOffset: 16, updatePositionStrategy: 'always' }"
-  >
-    <div
-      class="flex items-center justify-center rounded-md border border-dashed border-accented text-sm aspect-video w-72"
-      @pointerenter="open = true"
-      @pointerleave="open = false"
-      @pointermove="(ev) => {
-        anchor.x = ev.clientX
-        anchor.y = ev.clientY
-      }"
-    >
-      Hover me
-    </div>
-
-    <template #content>
-      <div class="p-4">
-        {{ anchor.x.toFixed(0) }} - {{ anchor.y.toFixed(0) }}
-      </div>
-    </template>
-  </UPopover>
-</template>
--- a/docs/app/components/content/examples/select-menu/SelectMenuContentWidthExample.vue
+++ b/docs/app/components/content/examples/select-menu/SelectMenuContentWidthExample.vue
@@ -1,32 +0,0 @@
-<script setup lang="ts">
-const { data: users } = await useFetch('https://jsonplaceholder.typicode.com/users', {
-  key: 'typicode-users-email',
-  transform: (data: { id: number, name: string, email: string }[]) => {
-    return data?.map(user => ({
-      label: user.name,
-      value: String(user.id),
-      email: user.email,
-      avatar: { src: `https://i.pravatar.cc/120?img=${user.id}` }
-    }))
-  },
-  lazy: true
-})
-</script>
-
-<template>
-  <USelectMenu
-    :items="users"
-    icon="i-lucide-user"
-    placeholder="Select user"
-    :ui="{ content: 'min-w-fit' }"
-    class="w-48"
-  >
-    <template #item-label="{ item }">
-      {{ item.label }}
-
-      <span class="text-muted">
-        {{ item.email }}
-      </span>
-    </template>
-  </USelectMenu>
-</template>
--- a/docs/app/components/content/examples/select-menu/SelectMenuItemsAvatarExample.vue
+++ b/docs/app/components/content/examples/select-menu/SelectMenuItemsAvatarExample.vue
@@ -35,7 +35,6 @@ const items = ref([
    }
  }
 ] satisfies SelectMenuItem[])
-
 const value = ref(items.value[0])
 </script>

--- a/docs/app/components/content/examples/select-menu/SelectMenuItemsChipExample.vue
+++ b/docs/app/components/content/examples/select-menu/SelectMenuItemsChipExample.vue
@@ -24,7 +24,6 @@ const items = ref([
    }
  }
 ] satisfies SelectMenuItem[])
-
 const value = ref(items.value[0])
 </script>

--- a/docs/app/components/content/examples/select-menu/SelectMenuItemsIconExample.vue
+++ b/docs/app/components/content/examples/select-menu/SelectMenuItemsIconExample.vue
@@ -23,7 +23,6 @@ const items = ref([
    icon: 'i-lucide-circle-check'
  }
 ] satisfies SelectMenuItem[])
-
 const value = ref(items.value[0])
 </script>

--- a/docs/app/components/content/examples/select/SelectContentWidthExample.vue
+++ b/docs/app/components/content/examples/select/SelectContentWidthExample.vue
@@ -1,35 +0,0 @@
-<script setup lang="ts">
-const value = ref<string>()
-
-const { data: users } = await useFetch('https://jsonplaceholder.typicode.com/users', {
-  key: 'typicode-users-email',
-  transform: (data: { id: number, name: string, email: string }[]) => {
-    return data?.map(user => ({
-      label: user.name,
-      email: user.email,
-      value: String(user.id),
-      avatar: { src: `https://i.pravatar.cc/120?img=${user.id}` }
-    }))
-  },
-  lazy: true
-})
-</script>
-
-<template>
-  <USelect
-    v-model="value"
-    :items="users"
-    placeholder="Select user"
-    value-key="value"
-    :ui="{ content: 'min-w-fit' }"
-    class="w-48"
-  >
-    <template #item-label="{ item }">
-      {{ item.label }}
-
-      <span class="text-muted">
-        {{ item.email }}
-      </span>
-    </template>
-  </USelect>
-</template>
--- a/docs/app/components/content/examples/select/SelectFetchExample.vue
+++ b/docs/app/components/content/examples/select/SelectFetchExample.vue
@@ -24,8 +24,8 @@ function getUserAvatar(value: string) {
    :loading="status === 'pending'"
    icon="i-lucide-user"
    placeholder="Select user"
-    value-key="value"
    class="w-48"
+    value-key="value"
  >
    <template #leading="{ modelValue, ui }">
      <UAvatar
--- a/docs/app/components/content/examples/select/SelectItemsAvatarExample.vue
+++ b/docs/app/components/content/examples/select/SelectItemsAvatarExample.vue
@@ -35,7 +35,6 @@ const items = ref([
    }
  }
 ] satisfies SelectItem[])
-
 const value = ref(items.value[0]?.value)

 const avatar = computed(() => items.value.find(item => item.value === value.value)?.avatar)
--- a/docs/app/components/content/examples/select/SelectItemsIconExample.vue
+++ b/docs/app/components/content/examples/select/SelectItemsIconExample.vue
@@ -23,7 +23,6 @@ const items = ref([
    icon: 'i-lucide-circle-check'
  }
 ] satisfies SelectItem[])
-
 const value = ref(items.value[0]?.value)

 const icon = computed(() => items.value.find(item => item.value === value.value)?.icon)
--- a/docs/app/components/content/examples/table/TableColumnFooterExample.vue
+++ b/docs/app/components/content/examples/table/TableColumnFooterExample.vue
@@ -1,106 +0,0 @@
-<script setup lang="ts">
-import { h, resolveComponent } from 'vue'
-import type { TableColumn, TableRow } from '@nuxt/ui'
-
-const UBadge = resolveComponent('UBadge')
-
-type Payment = {
-  id: string
-  date: string
-  status: 'paid' | 'failed' | 'refunded'
-  email: string
-  amount: number
-}
-
-const data = ref<Payment[]>([{
-  id: '4600',
-  date: '2024-03-11T15:30:00',
-  status: 'paid',
-  email: 'james.anderson@example.com',
-  amount: 594
-}, {
-  id: '4599',
-  date: '2024-03-11T10:10:00',
-  status: 'failed',
-  email: 'mia.white@example.com',
-  amount: 276
-}, {
-  id: '4598',
-  date: '2024-03-11T08:50:00',
-  status: 'refunded',
-  email: 'william.brown@example.com',
-  amount: 315
-}, {
-  id: '4597',
-  date: '2024-03-10T19:45:00',
-  status: 'paid',
-  email: 'emma.davis@example.com',
-  amount: 529
-}, {
-  id: '4596',
-  date: '2024-03-10T15:55:00',
-  status: 'paid',
-  email: 'ethan.harris@example.com',
-  amount: 639
-}])
-
-const columns: TableColumn<Payment>[] = [{
-  accessorKey: 'id',
-  header: '#',
-  cell: ({ row }) => `#${row.getValue('id')}`
-}, {
-  accessorKey: 'date',
-  header: 'Date',
-  cell: ({ row }) => {
-    return new Date(row.getValue('date')).toLocaleString('en-US', {
-      day: 'numeric',
-      month: 'short',
-      hour: '2-digit',
-      minute: '2-digit',
-      hour12: false
-    })
-  }
-}, {
-  accessorKey: 'status',
-  header: 'Status',
-  cell: ({ row }) => {
-    const color = ({
-      paid: 'success' as const,
-      failed: 'error' as const,
-      refunded: 'neutral' as const
-    })[row.getValue('status') as string]
-
-    return h(UBadge, { class: 'capitalize', variant: 'subtle', color }, () => row.getValue('status'))
-  }
-}, {
-  accessorKey: 'email',
-  header: 'Email'
-}, {
-  accessorKey: 'amount',
-  header: () => h('div', { class: 'text-right' }, 'Amount'),
-  footer: ({ column }) => {
-    const total = column.getFacetedRowModel().rows.reduce((acc: number, row: TableRow<Payment>) => acc + Number.parseFloat(row.getValue('amount')), 0)
-
-    const formatted = new Intl.NumberFormat('en-US', {
-      style: 'currency',
-      currency: 'EUR'
-    }).format(total)
-
-    return h('div', { class: 'text-right font-medium' }, `Total: ${formatted}`)
-  },
-  cell: ({ row }) => {
-    const amount = Number.parseFloat(row.getValue('amount'))
-
-    const formatted = new Intl.NumberFormat('en-US', {
-      style: 'currency',
-      currency: 'EUR'
-    }).format(amount)
-
-    return h('div', { class: 'text-right font-medium' }, formatted)
-  }
-}]
-</script>
-
-<template>
-  <UTable :data="data" :columns="columns" class="flex-1" />
-</template>
--- a/docs/app/components/content/examples/table/TableExample.vue
+++ b/docs/app/components/content/examples/table/TableExample.vue
@@ -2,7 +2,6 @@
 import { h, resolveComponent } from 'vue'
 import { upperFirst } from 'scule'
 import type { TableColumn } from '@nuxt/ui'
-import { useClipboard } from '@vueuse/core'

 const UButton = resolveComponent('UButton')
 const UCheckbox = resolveComponent('UCheckbox')
@@ -10,7 +9,6 @@ const UBadge = resolveComponent('UBadge')
 const UDropdownMenu = resolveComponent('UDropdownMenu')

 const toast = useToast()
-const { copy } = useClipboard()

 type Payment = {
  id: string
@@ -222,7 +220,7 @@ const columns: TableColumn<Payment>[] = [{
    }, {
      label: 'Copy payment ID',
      onSelect() {
-        copy(row.original.id)
+        navigator.clipboard.writeText(row.original.id)

        toast.add({
          title: 'Payment ID copied to clipboard!',
--- a/docs/app/components/content/examples/table/TableGroupedRowsExample.vue
+++ b/docs/app/components/content/examples/table/TableGroupedRowsExample.vue
@@ -1,8 +1,7 @@
 <script setup lang="ts">
 import { h, resolveComponent } from 'vue'
 import type { TableColumn } from '@nuxt/ui'
-import { getGroupedRowModel } from '@tanstack/vue-table'
-import type { GroupingOptions } from '@tanstack/vue-table'
+import { getGroupedRowModel, type GroupingOptions } from '@tanstack/vue-table'

 const UBadge = resolveComponent('UBadge')

--- a/docs/app/components/content/examples/table/TableRowActionsExample.vue
+++ b/docs/app/components/content/examples/table/TableRowActionsExample.vue
@@ -2,14 +2,12 @@
 import { h, resolveComponent } from 'vue'
 import type { TableColumn } from '@nuxt/ui'
 import type { Row } from '@tanstack/vue-table'
-import { useClipboard } from '@vueuse/core'

 const UButton = resolveComponent('UButton')
 const UBadge = resolveComponent('UBadge')
 const UDropdownMenu = resolveComponent('UDropdownMenu')

 const toast = useToast()
-const { copy } = useClipboard()

 type Payment = {
  id: string
@@ -121,7 +119,7 @@ function getRowItems(row: Row<Payment>) {
  }, {
    label: 'Copy payment ID',
    onSelect() {
-      copy(row.original.id)
+      navigator.clipboard.writeText(row.original.id)

      toast.add({
        title: 'Payment ID copied to clipboard!',
--- a/docs/app/components/content/examples/table/TableRowContextMenuEventExample.vue
+++ b/docs/app/components/content/examples/table/TableRowContextMenuEventExample.vue
@@ -1,159 +0,0 @@
-<script setup lang="ts">
-import { h, resolveComponent } from 'vue'
-import type { ContextMenuItem, TableColumn, TableRow } from '@nuxt/ui'
-import { useClipboard } from '@vueuse/core'
-
-const UBadge = resolveComponent('UBadge')
-const UCheckbox = resolveComponent('UCheckbox')
-
-const toast = useToast()
-const { copy } = useClipboard()
-
-type Payment = {
-  id: string
-  date: string
-  status: 'paid' | 'failed' | 'refunded'
-  email: string
-  amount: number
-}
-
-const data = ref<Payment[]>([{
-  id: '4600',
-  date: '2024-03-11T15:30:00',
-  status: 'paid',
-  email: 'james.anderson@example.com',
-  amount: 594
-}, {
-  id: '4599',
-  date: '2024-03-11T10:10:00',
-  status: 'failed',
-  email: 'mia.white@example.com',
-  amount: 276
-}, {
-  id: '4598',
-  date: '2024-03-11T08:50:00',
-  status: 'refunded',
-  email: 'william.brown@example.com',
-  amount: 315
-}, {
-  id: '4597',
-  date: '2024-03-10T19:45:00',
-  status: 'paid',
-  email: 'emma.davis@example.com',
-  amount: 529
-}, {
-  id: '4596',
-  date: '2024-03-10T15:55:00',
-  status: 'paid',
-  email: 'ethan.harris@example.com',
-  amount: 639
-}])
-
-const columns: TableColumn<Payment>[] = [{
-  id: 'select',
-  header: ({ table }) => h(UCheckbox, {
-    'modelValue': table.getIsSomePageRowsSelected() ? 'indeterminate' : table.getIsAllPageRowsSelected(),
-    'onUpdate:modelValue': (value: boolean | 'indeterminate') => table.toggleAllPageRowsSelected(!!value),
-    'aria-label': 'Select all'
-  }),
-  cell: ({ row }) => h(UCheckbox, {
-    'modelValue': row.getIsSelected(),
-    'onUpdate:modelValue': (value: boolean | 'indeterminate') => row.toggleSelected(!!value),
-    'aria-label': 'Select row'
-  })
-}, {
-  accessorKey: 'id',
-  header: '#',
-  cell: ({ row }) => `#${row.getValue('id')}`
-}, {
-  accessorKey: 'date',
-  header: 'Date',
-  cell: ({ row }) => {
-    return new Date(row.getValue('date')).toLocaleString('en-US', {
-      day: 'numeric',
-      month: 'short',
-      hour: '2-digit',
-      minute: '2-digit',
-      hour12: false
-    })
-  }
-}, {
-  accessorKey: 'status',
-  header: 'Status',
-  cell: ({ row }) => {
-    const color = ({
-      paid: 'success' as const,
-      failed: 'error' as const,
-      refunded: 'neutral' as const
-    })[row.getValue('status') as string]
-
-    return h(UBadge, { class: 'capitalize', variant: 'subtle', color }, () => row.getValue('status'))
-  }
-}, {
-  accessorKey: 'email',
-  header: 'Email'
-}, {
-  accessorKey: 'amount',
-  header: () => h('div', { class: 'text-right' }, 'Amount'),
-  cell: ({ row }) => {
-    const amount = Number.parseFloat(row.getValue('amount'))
-
-    const formatted = new Intl.NumberFormat('en-US', {
-      style: 'currency',
-      currency: 'EUR'
-    }).format(amount)
-
-    return h('div', { class: 'text-right font-medium' }, formatted)
-  }
-}]
-
-const items = ref<ContextMenuItem[]>([])
-
-function getRowItems(row: TableRow<Payment>) {
-  return [{
-    type: 'label' as const,
-    label: 'Actions'
-  }, {
-    label: 'Copy payment ID',
-    onSelect() {
-      copy(row.original.id)
-
-      toast.add({
-        title: 'Payment ID copied to clipboard!',
-        color: 'success',
-        icon: 'i-lucide-circle-check'
-      })
-    }
-  }, {
-    label: row.getIsExpanded() ? 'Collapse' : 'Expand',
-    onSelect() {
-      row.toggleExpanded()
-    }
-  }, {
-    type: 'separator' as const
-  }, {
-    label: 'View customer'
-  }, {
-    label: 'View payment details'
-  }]
-}
-
-function onContextmenu(_e: Event, row: TableRow<Payment>) {
-  items.value = getRowItems(row)
-}
-</script>
-
-<template>
-  <UContextMenu :items="items">
-    <UTable
-      :data="data"
-      :columns="columns"
-      class="flex-1"
-      @contextmenu="onContextmenu"
-    >
-      <template #expanded="{ row }">
-        <pre>{{ row.original }}</pre>
-      </template>
-    </UTable>
-  </UContextMenu>
-</template>
--- a/docs/app/components/content/examples/table/TableRowHoverEventExample.vue
+++ b/docs/app/components/content/examples/table/TableRowHoverEventExample.vue
@@ -1,157 +0,0 @@
-<script setup lang="ts">
-import { h, resolveComponent } from 'vue'
-import type { TableColumn, TableRow } from '@nuxt/ui'
-
-const UBadge = resolveComponent('UBadge')
-const UCheckbox = resolveComponent('UCheckbox')
-
-type Payment = {
-  id: string
-  date: string
-  status: 'paid' | 'failed' | 'refunded'
-  email: string
-  amount: number
-}
-
-const data = ref<Payment[]>([{
-  id: '4600',
-  date: '2024-03-11T15:30:00',
-  status: 'paid',
-  email: 'james.anderson@example.com',
-  amount: 594
-}, {
-  id: '4599',
-  date: '2024-03-11T10:10:00',
-  status: 'failed',
-  email: 'mia.white@example.com',
-  amount: 276
-}, {
-  id: '4598',
-  date: '2024-03-11T08:50:00',
-  status: 'refunded',
-  email: 'william.brown@example.com',
-  amount: 315
-}, {
-  id: '4597',
-  date: '2024-03-10T19:45:00',
-  status: 'paid',
-  email: 'emma.davis@example.com',
-  amount: 529
-}, {
-  id: '4596',
-  date: '2024-03-10T15:55:00',
-  status: 'paid',
-  email: 'ethan.harris@example.com',
-  amount: 639
-}])
-
-const columns: TableColumn<Payment>[] = [{
-  id: 'select',
-  header: ({ table }) => h(UCheckbox, {
-    'modelValue': table.getIsSomePageRowsSelected() ? 'indeterminate' : table.getIsAllPageRowsSelected(),
-    'onUpdate:modelValue': (value: boolean | 'indeterminate') => table.toggleAllPageRowsSelected(!!value),
-    'aria-label': 'Select all'
-  }),
-  cell: ({ row }) => h(UCheckbox, {
-    'modelValue': row.getIsSelected(),
-    'onUpdate:modelValue': (value: boolean | 'indeterminate') => row.toggleSelected(!!value),
-    'aria-label': 'Select row'
-  })
-}, {
-  accessorKey: 'id',
-  header: '#',
-  cell: ({ row }) => `#${row.getValue('id')}`
-}, {
-  accessorKey: 'date',
-  header: 'Date',
-  cell: ({ row }) => {
-    return new Date(row.getValue('date')).toLocaleString('en-US', {
-      day: 'numeric',
-      month: 'short',
-      hour: '2-digit',
-      minute: '2-digit',
-      hour12: false
-    })
-  }
-}, {
-  accessorKey: 'status',
-  header: 'Status',
-  cell: ({ row }) => {
-    const color = ({
-      paid: 'success' as const,
-      failed: 'error' as const,
-      refunded: 'neutral' as const
-    })[row.getValue('status') as string]
-
-    return h(UBadge, { class: 'capitalize', variant: 'subtle', color }, () => row.getValue('status'))
-  }
-}, {
-  accessorKey: 'email',
-  header: 'Email'
-}, {
-  accessorKey: 'amount',
-  header: () => h('div', { class: 'text-right' }, 'Amount'),
-  cell: ({ row }) => {
-    const amount = Number.parseFloat(row.getValue('amount'))
-
-    const formatted = new Intl.NumberFormat('en-US', {
-      style: 'currency',
-      currency: 'EUR'
-    }).format(amount)
-
-    return h('div', { class: 'text-right font-medium' }, formatted)
-  }
-}]
-
-const anchor = ref({ x: 0, y: 0 })
-
-const reference = computed(() => ({
-  getBoundingClientRect: () =>
-    ({
-      width: 0,
-      height: 0,
-      left: anchor.value.x,
-      right: anchor.value.x,
-      top: anchor.value.y,
-      bottom: anchor.value.y,
-      ...anchor.value
-    } as DOMRect)
-}))
-
-const open = ref(false)
-const openDebounced = refDebounced(open, 10)
-const selectedRow = ref<TableRow<Payment> | null>(null)
-
-function onHover(_e: Event, row: TableRow<Payment> | null) {
-  selectedRow.value = row
-
-  open.value = !!row
-}
-</script>
-
-<template>
-  <div class="flex w-full flex-1 gap-1">
-    <UTable
-      :data="data"
-      :columns="columns"
-      class="flex-1"
-      @pointermove="(ev: PointerEvent) => {
-        anchor.x = ev.clientX
-        anchor.y = ev.clientY
-      }"
-      @hover="onHover"
-    />
-
-    <UPopover
-      :content="{ side: 'top', sideOffset: 16, updatePositionStrategy: 'always' }"
-      :open="openDebounced"
-      :reference="reference"
-    >
-      <template #content>
-        <div class="p-4">
-          {{ selectedRow?.original?.id }}
-        </div>
-      </template>
-    </UPopover>
-  </div>
-</template>
--- a/docs/app/components/content/examples/table/TableRowSelectionEventExample.vue
+++ b/docs/app/components/content/examples/table/TableRowSelectionEventExample.vue
@@ -112,7 +112,7 @@ function onSelect(row: TableRow<Payment>, e?: Event) {
 </script>

 <template>
-  <div class="flex w-full flex-1 gap-1">
+  <div class=" flex w-full flex-1 gap-1">
    <div class="flex-1">
      <UTable
        ref="table"
--- a/docs/app/components/content/examples/table/TableSlotsExample.vue
+++ b/docs/app/components/content/examples/table/TableSlotsExample.vue
@@ -1,6 +1,5 @@
 <script setup lang="ts">
 import type { TableColumn, DropdownMenuItem } from '@nuxt/ui'
-import { useClipboard } from '@vueuse/core'

 interface User {
  id: number
@@ -11,7 +10,6 @@ interface User {
 }

 const toast = useToast()
-const { copy } = useClipboard()

 const data = ref<User[]>([{
  id: 1,
@@ -73,8 +71,7 @@ function getDropdownActions(user: User): DropdownMenuItem[][] {
      label: 'Copy user Id',
      icon: 'i-lucide-copy',
      onSelect: () => {
-        copy(user.id.toString())
-
+        navigator.clipboard.writeText(user.id.toString())
        toast.add({
          title: 'User ID copied to clipboard!',
          color: 'success',
--- a/docs/app/components/content/examples/tabs/TabsCustomSlotExample.vue
+++ b/docs/app/components/content/examples/tabs/TabsCustomSlotExample.vue
@@ -26,7 +26,7 @@ const state = reactive({
 </script>

 <template>
-  <UTabs :items="items" variant="link" :ui="{ trigger: 'grow' }" class="gap-4 w-full">
+  <UTabs :items="items" variant="link" class="gap-4 w-full" :ui="{ trigger: 'grow' }">
    <template #account="{ item }">
      <p class="text-muted mb-4">
        {{ item.description }}
--- a/docs/app/components/content/examples/timeline/TimelineAlternatingLayoutExample.vue
+++ b/docs/app/components/content/examples/timeline/TimelineAlternatingLayoutExample.vue
@@ -27,8 +27,8 @@ const items: TimelineItem[] = [{
 <template>
  <UTimeline
    :items="items"
-    :default-value="2"
    :ui="{ item: 'even:flex-row-reverse even:-translate-x-[calc(100%-2rem)] even:text-right' }"
+    :default-value="2"
    class="translate-x-[calc(50%-1rem)]"
  />
 </template>
--- a/docs/app/components/content/examples/timeline/TimelineSlotsExample.vue
+++ b/docs/app/components/content/examples/timeline/TimelineSlotsExample.vue
@@ -42,11 +42,11 @@ const items = [{
  <UTimeline
    :items="items"
    size="xs"
+    class="w-96"
    :ui="{
      date: 'float-end ms-1',
      description: 'px-3 py-2 ring ring-default mt-2 rounded-md text-default'
    }"
-    class="w-96"
  >
    <template #title="{ item }">
      <span>{{ item.username }}</span>
--- a/docs/app/components/content/examples/toast/ToastProgressExample.vue
+++ b/docs/app/components/content/examples/toast/ToastProgressExample.vue
@@ -1,16 +0,0 @@
-<script setup lang="ts">
-const toast = useToast()
-
-function showToast() {
-  toast.add({
-    title: 'Uh oh! Something went wrong.',
-    description: 'There was a problem with your request.',
-    icon: 'i-lucide-wifi',
-    progress: false
-  })
-}
-</script>
-
-<template>
-  <UButton label="Show toast" color="neutral" variant="outline" @click="showToast" />
-</template>
--- a/docs/app/components/content/examples/toaster/ToasterDurationExample.vue
+++ b/docs/app/components/content/examples/toaster/ToasterDurationExample.vue
@@ -7,12 +7,12 @@ const appConfig = useAppConfig()
    <UFormField
      label="toaster.duration"
      size="sm"
+      class="inline-flex ring ring-accented rounded-sm"
      :ui="{
        wrapper: 'bg-elevated/50 rounded-l-sm flex border-r border-accented',
        label: 'text-muted px-2 py-1.5',
        container: 'mt-0'
      }"
-      class="inline-flex ring ring-accented rounded-sm"
    >
      <UInput
        v-model="appConfig.toaster.duration"
--- a/docs/app/components/content/examples/toaster/ToasterExpandExample.vue
+++ b/docs/app/components/content/examples/toaster/ToasterExpandExample.vue
@@ -7,12 +7,12 @@ const appConfig = useAppConfig()
    <UFormField
      label="toaster.expand"
      size="sm"
+      class="inline-flex ring ring-accented rounded-sm"
      :ui="{
        wrapper: 'bg-elevated/50 rounded-l-sm flex border-r border-accented',
        label: 'text-muted px-2 py-1.5',
        container: 'mt-0'
      }"
-      class="inline-flex ring ring-accented rounded-sm"
    >
      <USelectMenu
        v-model="appConfig.toaster.expand"
--- a/docs/app/components/content/examples/toaster/ToasterPositionExample.vue
+++ b/docs/app/components/content/examples/toaster/ToasterPositionExample.vue
@@ -10,12 +10,12 @@ const appConfig = useAppConfig()
    <UFormField
      label="toaster.position"
      size="sm"
+      class="inline-flex ring ring-accented rounded-sm"
      :ui="{
        wrapper: 'bg-elevated/50 rounded-l-sm flex border-r border-accented',
        label: 'text-muted px-2 py-1.5',
        container: 'mt-0'
      }"
-      class="inline-flex ring ring-accented rounded-sm"
    >
      <USelectMenu
        v-model="appConfig.toaster.position"
--- a/docs/app/components/content/examples/tooltip/TooltipCursorExample.vue
+++ b/docs/app/components/content/examples/tooltip/TooltipCursorExample.vue
@@ -1,41 +0,0 @@
-<script setup lang="ts">
-const open = ref(false)
-const anchor = ref({ x: 0, y: 0 })
-
-const reference = computed(() => ({
-  getBoundingClientRect: () =>
-    ({
-      width: 0,
-      height: 0,
-      left: anchor.value.x,
-      right: anchor.value.x,
-      top: anchor.value.y,
-      bottom: anchor.value.y,
-      ...anchor.value
-    } as DOMRect)
-}))
-</script>
-
-<template>
-  <UTooltip
-    :open="open"
-    :reference="reference"
-    :content="{ side: 'top', sideOffset: 16, updatePositionStrategy: 'always' }"
-  >
-    <div
-      class="flex items-center justify-center rounded-md border border-dashed border-accented text-sm aspect-video w-72"
-      @pointerenter="open = true"
-      @pointerleave="open = false"
-      @pointermove="(ev) => {
-        anchor.x = ev.clientX
-        anchor.y = ev.clientY
-      }"
-    >
-      Hover me
-    </div>
-
-    <template #content>
-      {{ anchor.x.toFixed(0) }} - {{ anchor.y.toFixed(0) }}
-    </template>
-  </UTooltip>
-</template>
--- a/docs/app/composables/useFaviconFromTheme.ts
+++ b/docs/app/composables/useFaviconFromTheme.ts
@@ -1,5 +1,5 @@
 import { onMounted, watch } from 'vue'
-import FaviconSvg from '../../public/icon.svg?raw'
+import FaviconSvg from 'public/icon.svg?raw'

 export function useFaviconFromTheme() {
  const colorMode = useColorMode()
--- a/docs/app/error.vue
+++ b/docs/app/error.vue
@@ -59,7 +59,7 @@ provide('navigation', mappedNavigation)
  <UApp>
    <NuxtLoadingIndicator color="#FFF" />

-    <Banner />
+    <!-- <Banner /> -->

    <Header :links="links" />

--- a/docs/app/pages/[...slug].vue
+++ b/docs/app/pages/[...slug].vue
@@ -2,8 +2,7 @@
 import { kebabCase } from 'scule'
 import type { ContentNavigationItem } from '@nuxt/content'
 import type { PageLink } from '@nuxt/ui-pro'
-import { mapContentNavigation } from '@nuxt/ui-pro/utils/content'
-import { findPageBreadcrumb } from '@nuxt/content/utils'
+import { findPageBreadcrumb, mapContentNavigation } from '@nuxt/ui-pro/utils/content'

 const route = useRoute()
 const { framework, module } = useSharedData()
@@ -38,7 +37,7 @@ const { data: surround } = await useAsyncData(`${kebabCase(route.path)}-surround

 const navigation = inject<Ref<ContentNavigationItem[]>>('navigation')

-const breadcrumb = computed(() => mapContentNavigation(findPageBreadcrumb(navigation?.value, page.value?.path, { indexAsChild: true })).map(({ icon, ...link }) => link))
+const breadcrumb = computed(() => mapContentNavigation(findPageBreadcrumb(navigation?.value, page.value)).map(({ icon, ...link }) => link))

 if (!import.meta.prerender) {
  // Redirect to the correct framework version if the page is not the current framework
@@ -142,7 +141,7 @@ const communityLinks = computed(() => [{
        <MDC v-if="page.description" :value="page.description" unwrap="p" :cache-key="`${kebabCase(route.path)}-description`" />
      </template>

-      <template #links>
+      <template v-if="page.links?.length" #links>
        <UButton
          v-for="link in page.links"
          :key="link.label"
@@ -155,7 +154,6 @@ const communityLinks = computed(() => [{
            <UAvatar v-bind="link.avatar" size="2xs" :alt="`${link.label} avatar`" />
          </template>
        </UButton>
-        <PageHeaderLinks />
      </template>
    </UPageHeader>

--- a/docs/app/pages/pro/.content/pricing.yml
+++ b/docs/app/pages/pro/.content/pricing.yml
@@ -5,17 +5,6 @@ pricing:
  title: Upgrade to Nuxt UI [Pro]{class="text-primary"}.
  description: On top of 40+ open source components from Nuxt UI, Pro gives you access to 50+ premium Vue components to create beautiful & responsive Nuxt applications in minutes. It includes all primitives to build landing pages, documentations, blogs, dashboards or entire SaaS products.
  freePlan:
-    description: "**NuxtLabs is joining Vercel** :tada: As part of this transition, Nuxt UI is becoming even more accessible.<br><br> **In September, we're launching Nuxt UI v4**: a free, open-source library that unifies Nuxt UI and Nuxt UI Pro, offering 100+ components and a complete free Figma Kit for everyone."
-    orientation: horizontal
-    button:
-      label: Read the announcement
-      to: 'https://nuxtlabs.com/?utm_source=nuxt-ui&utm_medium=banner&utm_campaign=nuxtlabs-vercel'
-      target: _blank
-      color: 'neutral'
-      trailingIcon: 'i-lucide-arrow-right'
-      ui:
-        trailingIcon: 'ms-0'
-  devPlan:
    title: Free in development
    description: Try Nuxt UI Pro for free in development, no credit card required. Upgrade when ready to deploy.
    orientation: horizontal
@@ -24,9 +13,6 @@ pricing:
      to: '/getting-started/installation/pro/nuxt'
      color: 'neutral'
      variant: 'subtle'
-      trailingIcon: 'i-lucide-arrow-right'
-      ui:
-        trailingIcon: 'ms-0'
  figma:
    title: Figma Kit Pro
    description: Get all Nuxt UI Pro components in a Figma kit to design your next application before coding. Everything you need, from wire-framing to high-fidelity web integration.
--- a/docs/app/pages/pro/pricing.vue
+++ b/docs/app/pages/pro/pricing.vue
@@ -34,19 +34,10 @@ useSeoMeta({
      <div class="flex flex-col bg-default gap-8 lg:gap-0">
        <UPricingPlan
          v-bind="page.pricing.freePlan"
-          class="lg:rounded-none ring-primary/15 ring-inset -mb-px bg-primary/5 z-[1]"
-          :ui="{ description: 'mt-0 text-primary' }"
-        >
-          <template #description>
-            <MDC :value="page.pricing.freePlan.description" unwrap="p" />
-          </template>
-        </UPricingPlan>
-
-        <UPricingPlan
-          v-bind="page.pricing.devPlan"
-          class="lg:rounded-none ring-inset -mb-px"
+          variant="naked"
+          class="lg:rounded-none border-x border-default border-t border-b lg:border-b-0"
        />
-        <UPricingPlans compact class="-space-x-px">
+        <UPricingPlans compact>
          <UPricingPlan
            v-for="(plan, index) in page.pricing.plans"
            :key="index"
@@ -56,17 +47,18 @@ useSeoMeta({
            :discount="plan.discount"
            :billing-period="plan.billing_period"
            :billing-cycle="plan.billing_cycle"
-            :variant="plan.highlight ? 'subtle' : 'outline'"
-            class="lg:rounded-none ring-inset -mb-px"
+            :variant="plan.highlight ? 'soft' : 'outline'"
+            :class="['lg:rounded-none', { 'border-2 lg:border lg:border-x-0 border-primary lg:border-default': plan.highlight }]"
            :features="plan.features"
            :button="plan.button"
          />
        </UPricingPlans>
        <UPricingPlan
          v-bind="page.pricing.figma"
+          variant="naked"
          :billing-period="page.pricing.figma.billing_period"
          :billing-cycle="page.pricing.figma.billing_cycle"
-          class="lg:rounded-none ring-inset -mb-px"
+          class="lg:rounded-none border lg:border-y-0 border-default"
        >
          <template #features>
            <li v-for="(feature, index) in page.pricing.figma.features" :key="index" class="flex items-center gap-2 min-w-0">
--- a/docs/app/workers/prettier.js
+++ b/docs/app/workers/prettier.js
@@ -16,12 +16,12 @@ function handleMessage(message) {
 async function handleFormatMessage(message) {
  if (!globalThis.prettier) {
    await Promise.all([
-      import('https://cdn.jsdelivr.net/npm/prettier@3.6.2/standalone.js'),
-      import('https://cdn.jsdelivr.net/npm/prettier@3.6.2/plugins/babel.js'),
-      import('https://cdn.jsdelivr.net/npm/prettier@3.6.2/plugins/estree.js'),
-      import('https://cdn.jsdelivr.net/npm/prettier@3.6.2/plugins/html.js'),
-      import('https://cdn.jsdelivr.net/npm/prettier@3.6.2/plugins/markdown.js'),
-      import('https://cdn.jsdelivr.net/npm/prettier@3.6.2/plugins/typescript.js')
+      import('https://cdn.jsdelivr.net/npm/prettier@3.5.2/standalone.js'),
+      import('https://cdn.jsdelivr.net/npm/prettier@3.5.2/plugins/babel.js'),
+      import('https://cdn.jsdelivr.net/npm/prettier@3.5.2/plugins/estree.js'),
+      import('https://cdn.jsdelivr.net/npm/prettier@3.5.2/plugins/html.js'),
+      import('https://cdn.jsdelivr.net/npm/prettier@3.5.2/plugins/markdown.js'),
+      import('https://cdn.jsdelivr.net/npm/prettier@3.5.2/plugins/typescript.js')
    ])
  }

--- a/docs/content/1.getting-started/2.installation/1.nuxt.md
+++ b/docs/content/1.getting-started/2.installation/1.nuxt.md
@@ -225,27 +225,6 @@ export default defineNuxtConfig({
 This option adds the `transition-colors` class on components with hover or active states.
 ::

-### `theme.defaultVariants` :badge{label="Soon" class="align-text-top"}
-
-Use the `theme.defaultVariants` option to override the default `color` and `size` variants for components.
-
- Default: `{ color: 'primary', size: 'md' }`{lang="ts-type"}
-
-```ts [nuxt.config.ts]
-export default defineNuxtConfig({
-  modules: ['@nuxt/ui'],
-  css: ['~/assets/css/main.css'],
-  ui: {
-    theme: {
-      defaultVariants: {
-        color: 'neutral',
-        size: 'sm'
-      }
-    }
-  }
-})
-```
-
 ## Continuous Releases

 Nuxt UI uses [pkg.pr.new](https://github.com/stackblitz-labs/pkg.pr.new) for continuous preview releases, providing developers with instant access to the latest features and bug fixes without waiting for official releases.
--- a/docs/content/1.getting-started/2.installation/2.vue.md
+++ b/docs/content/1.getting-started/2.installation/2.vue.md
@@ -333,32 +333,6 @@ export default defineConfig({
 This option adds the `transition-colors` class on components with hover or active states.
 ::

-### `theme.defaultVariants` :badge{label="Soon" class="align-text-top"}
-
-Use the `theme.defaultVariants` option to override the default `color` and `size` variants for components.
-
- Default: `{ color: 'primary', size: 'md' }`{lang="ts-type"}
-
-```ts [vite.config.ts]
-import { defineConfig } from 'vite'
-import vue from '@vitejs/plugin-vue'
-import ui from '@nuxt/ui/vite'
-
-export default defineConfig({
-  plugins: [
-    vue(),
-    ui({
-      theme: {
-        defaultVariants: {
-          color: 'neutral',
-          size: 'sm'
-        }
-      }
-    })
-  ]
-})
-```
-
 ### `inertia`

 Use the `inertia` option to enable compatibility with [Inertia.js](https://inertiajs.com/).
--- a/docs/content/1.getting-started/2.migration.md
+++ b/docs/content/1.getting-started/2.migration.md
@@ -536,33 +536,6 @@ import { ModalExampleComponent } from '#components'
 </script>
 ```

-### Changed form validation
-
- The error object property for targeting form fields has been renamed from `path` to `name`:
-
-```diff
-<script setup lang="ts">
-const validate = (state: any): FormError[] => {
-  const errors = []
-  if (!state.email) {
-    errors.push({ 
-     path: 'email', 
-+     name: 'email',
-      message: 'Required' 
-    })
-  }
-  if (!state.password) {
-    errors.push({ 
-     path: 'password', 
-+     name: 'password',
-      message: 'Required' 
-    })
-  }
-  return errors
-}
-</script>
-```
-
 ---

 ::warning
--- a/docs/content/1.getting-started/4.icons/1.nuxt.md
+++ b/docs/content/1.getting-started/4.icons/1.nuxt.md
@@ -87,7 +87,7 @@ Read more about this in the `@nuxt/icon` documentation.

 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, `./app/assets/icons`:
+For example, place your icons' SVG files under a folder of your choice, for example, `./assets/icons`:

 ```bash
 assets/icons
@@ -104,7 +104,7 @@ export default defineNuxtConfig({
  icon: {
    customCollections: [{
      prefix: 'custom',
-      dir: './app/assets/icons'
+      dir: './assets/icons'
    }]
  }
 })
--- a/docs/content/1.getting-started/4.icons/2.vue.md
+++ b/docs/content/1.getting-started/4.icons/2.vue.md
@@ -32,12 +32,6 @@ props:
 You can use any name from the <https://icones.js.org> collection.
 ::

-::warning
-When using collections with a dash (`-`), you need to separate the icon name from the collection name with a colon (`:`) as `@iconify/vue` does not handle this case like `@nuxt/icon`. For example, instead of `i-simple-icons-github` you need to write `i-simple-icons:github` or `simple-icons:github`.
-
-Learn more about the [Iconify naming convention](https://iconify.design/docs/icon-components/vue/#icon).
-::
-
 ### Component Props

 Some components also have an `icon` prop to display an icon, like the [Button](/components/button) for example:
--- a/docs/content/1.getting-started/7.i18n/1.nuxt.md
+++ b/docs/content/1.getting-started/7.i18n/1.nuxt.md
@@ -125,7 +125,7 @@ Look at the `code` parameter, there you need to pass the iso code of the languag

 ::

-### Extend locale :badge{label="New" class="align-text-top"}
+### Extend locale :badge{label="Soon" class="align-text-top"}

 You can customize an existing locale by overriding its `messages` or `code` using the `extendLocale` composable:

--- a/docs/content/1.getting-started/7.i18n/2.vue.md
+++ b/docs/content/1.getting-started/7.i18n/2.vue.md
@@ -127,7 +127,7 @@ Look at the `code` parameter, there you need to pass the iso code of the languag

 ::

-### Extend locale :badge{label="New" class="align-text-top"}
+### Extend locale :badge{label="Soon" class="align-text-top"}

 You can customize an existing locale by overriding its `messages` or `code` using the `extendLocale` composable:

--- a/docs/content/3.components/checkbox-group.md
+++ b/docs/content/3.components/checkbox-group.md
@@ -9,6 +9,7 @@ links:
  - label: GitHub
    icon: i-simple-icons-github
    to: https://github.com/nuxt/ui/tree/v3/src/runtime/components/CheckboxGroup.vue
+navigation.badge: New
 ---


--- a/docs/content/3.components/checkbox.md
+++ b/docs/content/3.components/checkbox.md
@@ -156,7 +156,7 @@ props:
 ---
 ::

-### Variant
+### Variant :badge{label="New" class="align-text-top"}

 Use the `variant` prop to change the variant of the Checkbox.

@@ -190,7 +190,7 @@ props:
 ---
 ::

-### Indicator
+### Indicator :badge{label="New" class="align-text-top"}

 Use the `indicator` prop to change the position or hide the indicator. Defaults to `start`.

--- a/docs/content/3.components/command-palette.md
+++ b/docs/content/3.components/command-palette.md
@@ -52,8 +52,8 @@ Each group contains an `items` array of objects that define the commands. Each i
 - `loading?: boolean`{lang="ts-type"}
 - `disabled?: boolean`{lang="ts-type"}
 - [`slot?: string`{lang="ts-type"}](#with-custom-slot)
- `placeholder?: string`{lang="ts-type"}
- `children?: CommandPaletteItem[]`{lang="ts-type"}
+- `placeholder?: string`{lang="ts-type"} :badge{label="Soon"}
+- `children?: CommandPaletteItem[]`{lang="ts-type"} :badge{label="Soon"}
 - `onSelect?(e?: Event): void`{lang="ts-type"}
 - `class?: any`{lang="ts-type"}
 - `ui?: { item?: ClassNameValue, itemLeadingIcon?: ClassNameValue, itemLeadingAvatarSize?: ClassNameValue, itemLeadingAvatar?: ClassNameValue, itemLeadingChipSize?: ClassNameValue, itemLeadingChip?: ClassNameValue, itemLabel?: ClassNameValue, itemLabelPrefix?: ClassNameValue, itemLabelBase?: ClassNameValue, itemLabelSuffix?: ClassNameValue, itemTrailing?: ClassNameValue, itemTrailingKbds?: ClassNameValue, itemTrailingKbdsSize?: ClassNameValue, itemTrailingHighlightedIcon?: ClassNameValue, itemTrailingIcon?: ClassNameValue }`{lang="ts-type"}
@@ -327,7 +327,7 @@ You can customize this icon globally in your `vite.config.ts` under `ui.icons.ch
 :::
 ::

-### Trailing Icon :badge{label="New" class="align-text-top"}
+### Trailing Icon :badge{label="Soon" class="align-text-top"}

 Use the `trailing-icon` prop to customize the trailing [Icon](/components/icon) when an item has children. Defaults to `i-lucide-chevron-right`.

@@ -565,7 +565,7 @@ You can customize this icon globally in your `vite.config.ts` under `ui.icons.cl
 :::
 ::

-### Back :badge{label="New" class="align-text-top"}
+### Back :badge{label="Soon" class="align-text-top"}

 Use the `back` prop to customize or hide the back button (with `false` value) displayed when navigating into a submenu.

@@ -604,7 +604,7 @@ props:
 ---
 ::

-### Back Icon :badge{label="New" class="align-text-top"}
+### Back Icon :badge{label="Soon" class="align-text-top"}

 Use the `back-icon` prop to customize the back button [Icon](/components/icon). Defaults to `i-lucide-arrow-left`.

@@ -717,7 +717,7 @@ props:
 This example uses the `@update:model-value` event to reset the search term when an item is selected.
 ::

-### With children in items :badge{label="New" class="align-text-top"}
+### With children in items :badge{label="Soon" class="align-text-top"}

 You can create hierarchical menus by using the `children` property in items. When an item has children, it will automatically display a chevron icon and enable navigation into a submenu.

@@ -877,20 +877,6 @@ props:
 This can be useful when using the CommandPalette inside a [`Modal`](/components/modal) for example.
 ::

-### With footer slot :badge{label="Soon" class="align-text-top"}
-
-Use the `#footer` slot to add custom content at the bottom of the CommandPalette, such as keyboard shortcuts help or additional actions.
-
-::component-example
---
-collapse: true
-name: 'command-palette-footer-slot-example'
-class: '!p-0'
-props:
-  autofocus: false
---
-::
-
 ### With custom slot

 Use the `slot` property to customize a specific item or group.
--- a/docs/content/3.components/drawer.md
+++ b/docs/content/3.components/drawer.md
@@ -328,17 +328,6 @@ name: 'drawer-responsive-example'
 ---
 ::

-### Nested drawers :badge{label="Soon" class="align-text-top"}
-
-You can nest drawers within each other by using the `nested` prop.
-
-::component-example
---
-prettier: true
-name: 'drawer-nested-example'
---
-::
-
 ### With footer slot

 Use the `#footer` slot to add content after the Drawer's body.
--- a/docs/content/3.components/file-upload.md
+++ b/docs/content/3.components/file-upload.md
@@ -1,31 +0,0 @@
---
-title: FileUpload
-description: ''
-links:
-  - label: GitHub
-    icon: i-simple-icons-github
-    to: https://github.com/nuxt/ui/tree/v3/src/runtime/components/FileUpload.vue
-navigation.badge: Soon
---
-
-## Usage
-
-## Examples
-
-## API
-
-### Props
-
-:component-props
-
-### Slots
-
-:component-slots
-
-### Emits
-
-:component-emits
-
-## Theme
-
-:component-theme
--- a/docs/content/3.components/form.md
+++ b/docs/content/3.components/form.md
@@ -98,6 +98,7 @@ The Form component automatically triggers validation when an input emits an `inp
 - 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**.
+- Validation on `error-input` happens when as you type on an input with an error.

 You can control when validation happens this using the `validate-on` prop.

--- a/docs/content/3.components/input-menu.md
+++ b/docs/content/3.components/input-menu.md
@@ -757,33 +757,6 @@ name: 'input-menu-filter-fields-example'
 ---
 ::

-### With full content width
-
-You can expand the content to the full width of its items by using the `ui.content` key.
-
-::component-example
---
-name: 'input-menu-content-width-example'
-collapse: true
---
-::
-
-::tip
-You can also change the content width globally in your `app.config.ts`:
-
-```
-export default defineAppConfig({
-  ui: {
-    inputMenu: {
-      slots: {
-        content: 'min-w-fit'
-      }
-    }
-  }
-})
-```
-::
-
 ### As a CountryPicker

 This example demonstrates using the InputMenu as a country picker with lazy loading - countries are only fetched when the menu is opened.
--- a/docs/content/3.components/input-tags.md
+++ b/docs/content/3.components/input-tags.md
@@ -9,7 +9,7 @@ links:
  - label: GitHub
    icon: i-simple-icons-github
    to: https://github.com/nuxt/ui/tree/v3/src/runtime/components/InputTags.vue
-navigation.badge: New
+navigation.badge: Soon
 ---

 ## Usage
@@ -51,17 +51,6 @@ props:
 ---
 ::

-### Max Length :badge{label="Soon" class="align-text-top"}
-
-Use the `max-length` prop to set the maximum number of characters allowed in a tag.
-
-::component-code
---
-props:
-  maxLength: 4
---
-::
-
 ### Color

 Use the `color` prop to change the ring color when the InputTags is focused.
--- a/docs/content/3.components/kbd.md
+++ b/docs/content/3.components/kbd.md
@@ -62,19 +62,6 @@ items:
 ---
 ::

-### Color :badge{label="Soon" class="align-text-top"}
-
-Use the `color` prop to change the color of the Kbd.
-
-::component-code
---
-props:
-  color: neutral
-slots:
-  default: K
---
-::
-
 ### Variant

 Use the `variant` prop to change the variant of the Kbd.
@@ -82,7 +69,6 @@ Use the `variant` prop to change the variant of the Kbd.
 ::component-code
 ---
 props:
-  color: neutral
  variant: solid
 slots:
  default: K
--- a/docs/content/3.components/navigation-menu.md
+++ b/docs/content/3.components/navigation-menu.md
@@ -889,7 +889,7 @@ You can inspect the DOM to see each item's content being rendered.

 ## Examples

-### With tooltip in items
+### With tooltip in items :badge{label="New" class="align-text-top"}

 When orientation is `vertical` and the menu is `collapsed`, you can set the `tooltip` prop to `true` to display a [Tooltip](/components/tooltip) around items with their label but you can also use the `tooltip` property on each item to override the default tooltip.

@@ -994,7 +994,7 @@ props:
 ---
 ::

-### With popover in items
+### With popover in items :badge{label="New" class="align-text-top"}

 When orientation is `vertical` and the menu is `collapsed`, you can set the `popover` prop to `true` to display a [Popover](/components/popover) around items with their children but you can also use the `popover` property on each item to override the default popover.

--- a/docs/content/3.components/popover.md
+++ b/docs/content/3.components/popover.md
@@ -202,17 +202,7 @@ name: 'popover-command-palette-example'
 ---
 ::

-### With following cursor :badge{label="Soon" class="align-text-top"}
-
-You can make the Popover follow the cursor when hovering over an element using the [`reference`](https://reka-ui.com/docs/components/tooltip#trigger) prop:
-
-::component-example
---
-name: 'popover-cursor-example'
---
-::
-
-### With anchor slot
+### With anchor slot :badge{label="New" class="align-text-top"}

 You can use the `#anchor` slot to position the Popover against a custom element.

--- a/docs/content/3.components/radio-group.md
+++ b/docs/content/3.components/radio-group.md
@@ -159,7 +159,7 @@ props:
 ---
 ::

-### Variant
+### Variant :badge{label="New" class="align-text-top"}

 Use the `variant` prop to change the variant of the RadioGroup.

@@ -240,7 +240,7 @@ props:
 ---
 ::

-### Indicator
+### Indicator :badge{label="New" class="align-text-top"}

 Use the `indicator` prop to change the position or hide the indicator. Defaults to `start`.

--- a/docs/content/3.components/select-menu.md
+++ b/docs/content/3.components/select-menu.md
@@ -790,33 +790,6 @@ name: 'select-menu-filter-fields-example'
 ---
 ::

-### With full content width
-
-You can expand the content to the full width of its items by using the `ui.content` key.
-
-::component-example
---
-name: 'select-menu-content-width-example'
-collapse: true
---
-::
-
-::tip
-You can also change the content width globally in your `app.config.ts`:
-
-```
-export default defineAppConfig({
-  ui: {
-    selectMenu: {
-      slots: {
-        content: 'min-w-fit'
-      }
-    }
-  }
-})
-```
-::
-
 ### As a CountryPicker

 This example demonstrates using the SelectMenu as a country picker with lazy loading - countries are only fetched when the menu is opened.
@@ -828,8 +801,6 @@ name: 'select-menu-countries-example'
 ---
 ::

-
-
 ## API

 ### Props
--- a/docs/content/3.components/select.md
+++ b/docs/content/3.components/select.md
@@ -695,33 +695,6 @@ collapse: true
 ---
 ::

-### With full content width
-
-You can expand the content to the full width of its items by using the `ui.content` key.
-
-::component-example
---
-name: 'select-content-width-example'
-collapse: true
---
-::
-
-::tip
-You can also change the content width globally in your `app.config.ts`:
-
-```
-export default defineAppConfig({
-  ui: {
-    select: {
-      slots: {
-        content: 'min-w-fit'
-      }
-    }
-  }
-})
-```
-::
-
 ## API

 ### Props
--- a/docs/content/3.components/slider.md
+++ b/docs/content/3.components/slider.md
@@ -136,7 +136,7 @@ props:
 ---
 ::

-### Tooltip
+### Tooltip :badge{label="New" class="align-text-top"}

 Use the `tooltip` prop to display a [Tooltip](/components/tooltip) around the Slider thumbs with the current value. You can set it to `true` for default behavior or pass an object to customize it with any property from the [Tooltip](/components/tooltip#props) component.

--- a/docs/content/3.components/table.md
+++ b/docs/content/3.components/table.md
@@ -77,15 +77,11 @@ Use the `columns` prop as an array of [ColumnDef](https://tanstack.com/table/lat

 - `accessorKey`: [The key of the row object to use when extracting the value for the column.]{class="text-muted"}
 - `header`: [The header to display for the column. If a string is passed, it can be used as a default for the column ID. If a function is passed, it will be passed a props object for the header and should return the rendered header value (the exact type depends on the adapter being used).]{class="text-muted"}
- `footer`: [The footer to display for the column. Works exactly like header, but is displayed under the table.]{class="text-muted"}
 - `cell`: [The cell to display each row for the column. If a function is passed, it will be passed a props object for the cell and should return the rendered cell value (the exact type depends on the adapter being used).]{class="text-muted"}
 - `meta`: [Extra properties for the column.]{class="text-muted"}
  - `class`:
    - `td`: [The classes to apply to the `td` element.]{class="text-muted"}
    - `th`: [The classes to apply to the `th` element.]{class="text-muted"}
-  - `style`:
-    - `td`: [The style to apply to the `td` element.]{class="text-muted"}
-    - `th`: [The style to apply to the `th` element.]{class="text-muted"}

 In order to render components or other HTML elements, you will need to use the Vue [`h` function](https://vuejs.org/api/render-function.html#h) inside the `header` and `cell` props. This is different from other components that use slots but allows for more flexibility.

@@ -115,8 +111,6 @@ Use the `meta` prop as an object ([TableMeta](https://tanstack.com/table/latest/

 - `class`:
  - `tr`: [The classes to apply to the `tr` element.]{class="text-muted"}
- `style`:
-  - `tr`: [The style to apply to the `tr` element.]{class="text-muted"}

 ### Loading

@@ -167,7 +161,7 @@ props:

 ### Sticky

-Use the `sticky` prop to make the header or footer sticky.
+Use the `sticky` prop to make the header sticky.

 ::component-code
 ---
@@ -178,10 +172,6 @@ ignore:
  - class
 external:
  - data
-items:
-  sticky:
-    - true
-    - false
 props:
  sticky: true
  data:
@@ -276,8 +266,8 @@ You can group rows based on a given column value and show/hide sub rows via some

 #### Important parts:

-* Add `grouping` prop with an array of column ids you want to group by.
-* Add `grouping-options` prop. It must include `getGroupedRowModel`, you can import it from `@tanstack/vue-table` or implement your own.
+* Add prop `grouping` to `UTable` component with an array of column ids you want to group by.
+* Add prop `grouping-options` to `UTable`. It must include `getGroupedRowModel`, you can import it from `@tanstack/vue-table` or implement your own.
 * Expand rows via `row.toggleExpanded()` method on any cell of the row. Keep in mind, it also toggles `#expanded` slot.
 * Use `aggregateFn` on column definition to define how to aggregate the rows.
 * `agregatedCell` renderer on column definition only works if there is no `cell` renderer.
@@ -314,86 +304,22 @@ class: '!p-0'
 You can use the `row-selection` prop to control the selection state of the rows (can be binded with `v-model`).
 ::

-### With row select event
+### With `@select` event

-You can add a `@select` listener to make rows clickable with or without a checkbox column.
+You can add a `@select` listener to make rows clickable. The handler function receives the `TableRow` instance as the first argument and an optional `Event` as the second argument.

 ::note
-The handler function receives the `TableRow` instance as the first argument and an optional `Event` as the second argument.
-::
-
-::component-example
---
-prettier: true
-collapse: true
-name: 'table-row-select-event-example'
-highlights:
-  - 123
-  - 130
-class: '!p-0'
---
-::
-
-::tip
 You can use this to navigate to a page, open a modal or even to select the row manually.
 ::

-### With row context menu event :badge{label="Soon" class="align-text-top"}
-
-You can add a `@contextmenu` listener to make rows right clickable and wrap the Table in a [ContextMenu](/components/context-menu) component to display row actions for example.
-
-::note
-The handler function receives the `Event` and `TableRow` instance as the first and second arguments respectively.
-::
-
 ::component-example
 ---
 prettier: true
 collapse: true
-name: 'table-row-context-menu-event-example'
+name: 'table-row-selection-event-example'
 highlights:
+  - 123
  - 130
-  - 170
-class: '!p-0'
---
-::
-
-### With row hover event :badge{label="Soon" class="align-text-top"}
-
-You can add a `@hover` listener to make rows hoverable and use a [Popover](/components/popover) or a [Tooltip](/components/tooltip) component to display row details for example.
-
-::note
-The handler function receives the `Event` and `TableRow` instance as the first and second arguments respectively.
-::
-
-::component-example
---
-prettier: true
-collapse: true
-name: 'table-row-hover-event-example'
-highlights:
-  - 126
-  - 149
-class: '!p-0'
---
-::
-
-::note
-This example is similar as the Popover [with following cursor example](/components/popover#with-following-cursor) and uses a [`refDebounced`](https://vueuse.org/shared/refDebounced/#refdebounced) to prevent the Popover from opening and closing too quickly when moving the cursor from one row to another.
-::
-
-### With column footer :badge{label="Soon" class="align-text-top"}
-
-You can add a `footer` property to the column definition to render a footer for the column.
-
-::component-example
---
-prettier: true
-collapse: true
-name: 'table-column-footer-example'
-highlights:
-  - 94
-  - 108
 class: '!p-0'
 ---
 ::
--- a/docs/content/3.components/tabs.md
+++ b/docs/content/3.components/tabs.md
@@ -19,13 +19,12 @@ Use the `items` prop as an array of objects with the following properties:
 - `label?: string`{lang="ts-type"}
 - `icon?: string`{lang="ts-type"}
 - `avatar?: AvatarProps`{lang="ts-type"}
- `badge?: string | number | BadgeProps`{lang="ts-type"}
 - `content?: string`{lang="ts-type"}
 - `value?: string | number`{lang="ts-type"}
 - `disabled?: boolean`{lang="ts-type"}
 - [`slot?: string`{lang="ts-type"}](#with-custom-slot)
 - `class?: any`{lang="ts-type"}
- `ui?: { trigger?: ClassNameValue, leadingIcon?: ClassNameValue, leadingAvatar?: ClassNameValue, leadingAvatarSize?: ClassNameValue, label?: ClassNameValue, trailingBadge?: ClassNameValue, trailingBadgeSize?: ClassNameValue, content?: ClassNameValue }`{lang="ts-type"}
+- `ui?: { trigger?: ClassNameValue, leadingIcon?: ClassNameValue, leadingAvatar?: ClassNameValue, label?: ClassNameValue, content?: ClassNameValue }`{lang="ts-type"}

 ::component-code
 ---
--- a/docs/content/3.components/textarea.md
+++ b/docs/content/3.components/textarea.md
@@ -124,7 +124,7 @@ props:
 ---
 ::

-### Icon
+### Icon :badge{label="New" class="align-text-top"}

 Use the `icon` prop to show an [Icon](/components/icon) inside the Textarea.

@@ -157,7 +157,7 @@ props:
 ---
 ::

-### Avatar
+### Avatar :badge{label="New" class="align-text-top"}

 Use the `avatar` prop to show an [Avatar](/components/avatar) inside the Textarea.

@@ -176,7 +176,7 @@ props:
 ---
 ::

-### Loading
+### Loading :badge{label="New" class="align-text-top"}

 Use the `loading` prop to show a loading icon on the Textarea.

@@ -192,7 +192,7 @@ props:
 ---
 ::

-### Loading Icon
+### Loading Icon :badge{label="New" class="align-text-top"}

 Use the `loading-icon` prop to customize the loading icon. Defaults to `i-lucide-loader-circle`.

--- a/docs/content/3.components/timeline.md
+++ b/docs/content/3.components/timeline.md
@@ -6,7 +6,7 @@ links:
  - label: GitHub
    icon: i-simple-icons-github
    to: https://github.com/nuxt/ui/tree/v3/src/runtime/components/Timeline.vue
-navigation.badge: New
+navigation.badge: Soon
 ---

 ## Usage
--- a/docs/content/3.components/toast.md
+++ b/docs/content/3.components/toast.md
@@ -107,7 +107,7 @@ name: 'toast-color-example'

 ### Close

-Pass a `close` field to customize or hide the close [Button](/components/button) (with `false` value).
+Pass a `close` field to customize or hide the close button (with `false` value).

 ::component-example
 ---
@@ -143,7 +143,7 @@ You can customize this icon globally in your `vite.config.ts` under `ui.icons.cl

 ### Actions

-Pass an `actions` field to add some [Button](/components/button) actions to the Toast.
+Pass an `actions` field to add some [Button](/components/button) actions to the Alert.

 ::component-example
 ---
@@ -155,23 +155,9 @@ name: 'toast-actions-example'
 ---
 ::

-### Progress :badge{label="Soon" class="align-text-top"}
-
-Pass a `progress` field to customize or hide the [Progress](/components/progress) bar (with `false` value).
-
-::tip
-The Progress bar inherits the Toast color by default, but you can override it using the `progress.color` field.
-::
-
-::component-example
---
-name: 'toast-progress-example'
---
-::
-
 ### Orientation

-Pass an `orientation` field to the `toast.add` method to change the orientation of the Toast.
+Use the `orientation` prop to change the orientation of the Toast.

 ::component-example
 ---
--- a/docs/content/3.components/tooltip.md
+++ b/docs/content/3.components/tooltip.md
@@ -186,16 +186,6 @@ name: 'tooltip-open-example'
 In this example, leveraging [`defineShortcuts`](/composables/define-shortcuts), you can toggle the Tooltip by pressing :kbd{value="O"}.
 ::

-### With following cursor :badge{label="Soon" class="align-text-top"}
-
-You can make the Tooltip follow the cursor when hovering over an element using the [`reference`](https://reka-ui.com/docs/components/tooltip#trigger) prop:
-
-::component-example
---
-name: 'tooltip-cursor-example'
---
-::
-
 ## API

 ### Props
--- a/docs/nuxt.config.ts
+++ b/docs/nuxt.config.ts
@@ -143,6 +143,10 @@ export default defineNuxtConfig({
    '/releases': { redirect: 'https://github.com/nuxt/ui/releases', prerender: false }
  },

+  future: {
+    compatibilityVersion: 4
+  },
+
  compatibilityDate: '2024-07-09',

  nitro: {
--- a/docs/package.json
+++ b/docs/package.json
@@ -11,40 +11,39 @@
  "dependencies": {
    "@ai-sdk/vue": "^1.2.12",
    "@iconify-json/logos": "^1.2.4",
-    "@iconify-json/lucide": "^1.2.57",
-    "@iconify-json/simple-icons": "^1.2.44",
-    "@iconify-json/vscode-icons": "^1.2.23",
-    "@nuxt/content": "^3.6.3",
+    "@iconify-json/lucide": "^1.2.47",
+    "@iconify-json/simple-icons": "^1.2.38",
+    "@iconify-json/vscode-icons": "^1.2.22",
+    "@nuxt/content": "^3.5.1",
    "@nuxt/image": "^1.10.0",
    "@nuxt/ui": "workspace:*",
-    "@nuxt/ui-pro": "https://pkg.pr.new/@nuxt/ui-pro@17684e4",
+    "@nuxt/ui-pro": "https://pkg.pr.new/@nuxt/ui-pro@beebbd4",
    "@nuxthub/core": "^0.9.0",
    "@nuxtjs/plausible": "^1.2.0",
    "@octokit/rest": "^22.0.0",
    "@rollup/plugin-yaml": "^4.1.2",
-    "@vueuse/integrations": "^13.5.0",
-    "@vueuse/nuxt": "^13.5.0",
-    "ai": "^4.3.19",
-    "better-sqlite3": "^12.2.0",
+    "@vueuse/integrations": "^13.3.0",
+    "@vueuse/nuxt": "^13.3.0",
+    "ai": "^4.3.16",
    "capture-website": "^4.2.0",
    "joi": "^17.13.3",
-    "maska": "^3.2.0",
-    "motion-v": "^1.5.0",
-    "nuxt": "^4.0.1",
-    "nuxt-component-meta": "^0.12.1",
+    "maska": "^3.1.1",
+    "motion-v": "^1.2.1",
+    "nuxt": "^3.17.5",
+    "nuxt-component-meta": "^0.11.0",
    "nuxt-llms": "^0.1.3",
-    "nuxt-og-image": "^5.1.9",
-    "prettier": "^3.6.2",
+    "nuxt-og-image": "^5.1.6",
+    "prettier": "^3.5.3",
    "shiki-transformer-color-highlight": "^1.0.0",
    "sortablejs": "^1.15.6",
    "superstruct": "^2.0.2",
    "ufo": "^1.6.1",
    "valibot": "^1.1.0",
-    "workers-ai-provider": "^0.7.2",
+    "workers-ai-provider": "^0.6.0",
    "yup": "^1.6.1",
-    "zod": "^4.0.5"
+    "zod": "^3.25.57"
  },
  "devDependencies": {
-    "wrangler": "^4.25.0"
+    "wrangler": "^4.19.1"
  }
 }
--- a/docs/public/components/dark/changelog-version.png
+++ b/docs/public/components/dark/changelog-version.png
--- a/docs/public/components/dark/changelog-versions.png
+++ b/docs/public/components/dark/changelog-versions.png
--- a/docs/public/components/light/changelog-version.png
+++ b/docs/public/components/light/changelog-version.png
--- a/docs/public/components/light/changelog-versions.png
+++ b/docs/public/components/light/changelog-versions.png
--- a/docs/server/plugins/llms.ts
+++ b/docs/server/plugins/llms.ts
@@ -1,8 +1,412 @@
+import json5 from 'json5'
+import { camelCase, kebabCase } from 'scule'
+import { visit } from '@nuxt/content/runtime'
 import type { H3Event } from 'h3'
 import type { PageCollectionItemBase } from '@nuxt/content'
+import * as theme from '../../.nuxt/ui'
+import * as themePro from '../../.nuxt/ui-pro'
+import meta from '#nuxt-component-meta'
+// @ts-expect-error - no types available
+import components from '#component-example/nitro'
+
+type ComponentAttributes = {
+  ':pro'?: string
+  ':prose'?: string
+  ':props'?: string
+  ':external'?: string
+  ':externalTypes'?: string
+  ':ignore'?: string
+  ':hide'?: string
+  ':slots'?: string
+}
+
+type ThemeConfig = {
+  pro: boolean
+  prose: boolean
+  componentName: string
+}
+
+type CodeConfig = {
+  pro: boolean
+  props: Record<string, unknown>
+  external: string[]
+  externalTypes: string[]
+  ignore: string[]
+  hide: string[]
+  componentName: string
+  slots?: Record<string, string>
+}
+
+type Document = {
+  title: string
+  body: any
+}
+
+const parseBoolean = (value?: string): boolean => value === 'true'
+
+function getComponentMeta(componentName: string) {
+  const pascalCaseName = componentName.charAt(0).toUpperCase() + componentName.slice(1)
+
+  const strategies = [
+    `U${pascalCaseName}`,
+    `Prose${pascalCaseName}`,
+    pascalCaseName
+  ]
+
+  let componentMeta: any
+  let finalMetaComponentName: string = pascalCaseName
+
+  for (const nameToTry of strategies) {
+    finalMetaComponentName = nameToTry
+    const metaAttempt = (meta as Record<string, any>)[nameToTry]?.meta
+    if (metaAttempt) {
+      componentMeta = metaAttempt
+      break
+    }
+  }
+
+  if (!componentMeta) {
+    console.warn(`[getComponentMeta] Metadata not found for ${pascalCaseName} using strategies: U, Prose, or no prefix. Last tried: ${finalMetaComponentName}`)
+  }
+
+  return {
+    pascalCaseName,
+    metaComponentName: finalMetaComponentName,
+    componentMeta
+  }
+}
+
+function replaceNodeWithPre(node: any[], language: string, code: string, filename?: string) {
+  node[0] = 'pre'
+  node[1] = { language, code }
+  if (filename) node[1].filename = filename
+}
+
+function visitAndReplace(doc: Document, type: string, handler: (node: any[]) => void) {
+  visit(doc.body, (node) => {
+    if (Array.isArray(node) && node[0] === type) {
+      handler(node)
+    }
+    return true
+  }, node => node)
+}
+
+function generateTSInterface(
+  name: string,
+  items: any[],
+  itemHandler: (item: any) => string,
+  description: string
+) {
+  let code = `/**\n * ${description}\n */\ninterface ${name} {\n`
+  for (const item of items) {
+    code += itemHandler(item)
+  }
+  code += `}`
+  return code
+}
+
+function propItemHandler(propValue: any): string {
+  if (!propValue?.name) return ''
+  const propName = propValue.name
+  const propType = propValue.type
+    ? Array.isArray(propValue.type)
+      ? propValue.type.map((t: any) => t.name || t).join(' | ')
+      : propValue.type.name || propValue.type
+    : 'any'
+  const isRequired = propValue.required || false
+  const hasDescription = propValue.description && propValue.description.trim().length > 0
+  const hasDefault = propValue.default !== undefined
+  let result = ''
+  if (hasDescription || hasDefault) {
+    result += `  /**\n`
+    if (hasDescription) {
+      const descLines = propValue.description.split(/\r?\n/)
+      descLines.forEach((line: string) => {
+        result += `   * ${line}\n`
+      })
+    }
+    if (hasDefault) {
+      let defaultValue = propValue.default
+      if (typeof defaultValue === 'string') {
+        defaultValue = `"${defaultValue.replace(/"/g, '\\"')}"`
+      } else {
+        defaultValue = JSON.stringify(defaultValue)
+      }
+      result += `   * @default ${defaultValue}\n`
+    }
+    result += `   */\n`
+  }
+  result += `  ${propName}${isRequired ? '' : '?'}: ${propType};\n`
+  return result
+}
+
+function slotItemHandler(slotValue: any): string {
+  if (!slotValue?.name) return ''
+  const slotName = slotValue.name
+  const hasDescription = slotValue.description && slotValue.description.trim().length > 0
+  let result = ''
+  if (hasDescription) {
+    result += `  /**\n`
+    const descLines = slotValue.description.split(/\r?\n/)
+    descLines.forEach((line: string) => {
+      result += `   * ${line}\n`
+    })
+    result += `   */\n`
+  }
+  if (slotValue.bindings && Object.keys(slotValue.bindings).length > 0) {
+    let bindingsType = '{\n'
+    Object.entries(slotValue.bindings).forEach(([bindingName, bindingValue]: [string, any]) => {
+      const bindingType = bindingValue.type || 'any'
+      bindingsType += `    ${bindingName}: ${bindingType};\n`
+    })
+    bindingsType += '  }'
+    result += `  ${slotName}(bindings: ${bindingsType}): any;\n`
+  } else {
+    result += `  ${slotName}(): any;\n`
+  }
+  return result
+}
+
+function emitItemHandler(event: any): string {
+  if (!event?.name) return ''
+  let payloadType = 'void'
+  if (event.type) {
+    payloadType = Array.isArray(event.type)
+      ? event.type.map((t: any) => t.name || t).join(' | ')
+      : event.type.name || event.type
+  }
+  let result = ''
+  if (event.description && event.description.trim().length > 0) {
+    result += `  /**\n`
+    event.description.split(/\r?\n/).forEach((line: string) => {
+      result += `   * ${line}\n`
+    })
+    result += `   */\n`
+  }
+  result += `  ${event.name}: (payload: ${payloadType}) => void;\n`
+  return result
+}
+
+const generateThemeConfig = ({ pro, prose, componentName }: ThemeConfig) => {
+  const computedTheme = pro ? (prose ? themePro.prose : themePro) : theme
+  const componentTheme = computedTheme[componentName as keyof typeof computedTheme]
+
+  return {
+    [pro ? 'uiPro' : 'ui']: prose
+      ? { prose: { [componentName]: componentTheme } }
+      : { [componentName]: componentTheme }
+  }
+}
+
+const generateComponentCode = ({
+  pro,
+  props,
+  external,
+  externalTypes,
+  hide,
+  componentName,
+  slots
+}: CodeConfig) => {
+  const filteredProps = Object.fromEntries(
+    Object.entries(props).filter(([key]) => !hide.includes(key))
+  )
+
+  const imports = pro
+    ? ''
+    : external
+        .filter((_, index) => externalTypes[index] && externalTypes[index] !== 'undefined')
+        .map((ext, index) => {
+          const type = externalTypes[index]?.replace(/[[\]]/g, '')
+          return `import type { ${type} } from '@nuxt/${pro ? 'ui-pro' : 'ui'}'`
+        })
+        .join('\n')
+
+  let itemsCode = ''
+  if (props.items) {
+    itemsCode = pro
+      ? `const items = ref(${json5.stringify(props.items, null, 2)})`
+      : `const items = ref<${externalTypes[0]}>(${json5.stringify(props.items, null, 2)})`
+    delete filteredProps.items
+  }
+
+  let calendarValueCode = ''
+  if (componentName === 'calendar' && props.modelValue && Array.isArray(props.modelValue)) {
+    calendarValueCode = `const value = ref(new CalendarDate(${props.modelValue.join(', ')}))`
+  }
+
+  const propsString = Object.entries(filteredProps)
+    .map(([key, value]) => {
+      const formattedKey = kebabCase(key)
+      if (typeof value === 'string') {
+        return `${formattedKey}="${value}"`
+      } else if (typeof value === 'number') {
+        return `:${formattedKey}="${value}"`
+      } else if (typeof value === 'boolean') {
+        return value ? formattedKey : `:${formattedKey}="false"`
+      }
+      return ''
+    })
+    .filter(Boolean)
+    .join(' ')
+
+  const itemsProp = props.items ? ':items="items"' : ''
+  const vModelProp = componentName === 'calendar' && props.modelValue ? 'v-model="value"' : ''
+  const allProps = [propsString, itemsProp, vModelProp].filter(Boolean).join(' ')
+  const formattedProps = allProps ? ` ${allProps}` : ''
+
+  let scriptSetup = ''
+  if (imports || itemsCode || calendarValueCode) {
+    scriptSetup = '<script setup lang="ts">'
+    if (imports) scriptSetup += `\n${imports}`
+    if (imports && (itemsCode || calendarValueCode)) scriptSetup += '\n'
+    if (calendarValueCode) scriptSetup += `\n${calendarValueCode}`
+    if (itemsCode) scriptSetup += `\n${itemsCode}`
+    scriptSetup += '\n</script>\n\n'
+  }
+
+  let componentContent = ''
+  let slotContent = ''
+
+  if (slots && Object.keys(slots).length > 0) {
+    const defaultSlot = slots.default?.trim()
+    if (defaultSlot) {
+      const indentedContent = defaultSlot
+        .split('\n')
+        .map(line => line.trim() ? `    ${line}` : line)
+        .join('\n')
+      componentContent = `\n${indentedContent}\n  `
+    }
+
+    Object.entries(slots).forEach(([slotName, content]) => {
+      if (slotName !== 'default' && content?.trim()) {
+        const indentedSlotContent = content.trim()
+          .split('\n')
+          .map(line => line.trim() ? `      ${line}` : line)
+          .join('\n')
+        slotContent += `\n    <template #${slotName}>\n${indentedSlotContent}\n    </template>`
+      }
+    })
+  }
+
+  const pascalCaseName = componentName.charAt(0).toUpperCase() + componentName.slice(1)
+
+  let componentTemplate = ''
+  if (componentContent || slotContent) {
+    componentTemplate = `<U${pascalCaseName}${formattedProps}>${componentContent}${slotContent}</U${pascalCaseName}>` // Removed space before closing tag
+  } else {
+    componentTemplate = `<U${pascalCaseName}${formattedProps} />`
+  }
+
+  return `${scriptSetup}<template>
+  ${componentTemplate}
+</template>`
+}

 export default defineNitroPlugin((nitroApp) => {
  nitroApp.hooks.hook('content:llms:generate:document', async (_: H3Event, doc: PageCollectionItemBase) => {
-    transformMDC(doc as any)
+    const componentName = camelCase(doc.title)
+
+    visitAndReplace(doc, 'component-theme', (node) => {
+      const attributes = node[1] as Record<string, string>
+      const mdcSpecificName = attributes?.slug
+
+      const finalComponentName = mdcSpecificName ? camelCase(mdcSpecificName) : componentName
+
+      const pro = parseBoolean(attributes[':pro'])
+      const prose = parseBoolean(attributes[':prose'])
+      const appConfig = generateThemeConfig({ pro, prose, componentName: finalComponentName })
+
+      replaceNodeWithPre(
+        node,
+        'ts',
+        `export default defineAppConfig(${json5.stringify(appConfig, null, 2)?.replace(/,([ |\t\n]+[}|\])])/g, '$1')})`,
+        'app.config.ts'
+      )
+    })
+
+    visitAndReplace(doc, 'component-code', (node) => {
+      const attributes = node[1] as ComponentAttributes
+      const pro = parseBoolean(attributes[':pro'])
+      const props = attributes[':props'] ? json5.parse(attributes[':props']) : {}
+      const external = attributes[':external'] ? json5.parse(attributes[':external']) : []
+      const externalTypes = attributes[':externalTypes'] ? json5.parse(attributes[':externalTypes']) : []
+      const ignore = attributes[':ignore'] ? json5.parse(attributes[':ignore']) : []
+      const hide = attributes[':hide'] ? json5.parse(attributes[':hide']) : []
+      const slots = attributes[':slots'] ? json5.parse(attributes[':slots']) : {}
+
+      const code = generateComponentCode({
+        pro,
+        props,
+        external,
+        externalTypes,
+        ignore,
+        hide,
+        componentName,
+        slots
+      })
+
+      replaceNodeWithPre(node, 'vue', code)
+    })
+
+    visitAndReplace(doc, 'component-props', (node) => {
+      const attributes = node[1] as Record<string, string>
+      const mdcSpecificName = attributes?.name
+      const isProse = parseBoolean(attributes[':prose'])
+
+      const finalComponentName = mdcSpecificName ? camelCase(mdcSpecificName) : componentName
+
+      const { pascalCaseName, componentMeta } = getComponentMeta(finalComponentName)
+
+      if (!componentMeta?.props) return
+
+      const interfaceName = isProse ? `Prose${pascalCaseName}Props` : `${pascalCaseName}Props`
+
+      const interfaceCode = generateTSInterface(
+        interfaceName,
+        Object.values(componentMeta.props),
+        propItemHandler,
+        `Props for the ${isProse ? 'Prose' : ''}${pascalCaseName} component`
+      )
+      replaceNodeWithPre(node, 'ts', interfaceCode)
+    })
+
+    visitAndReplace(doc, 'component-slots', (node) => {
+      const { pascalCaseName, componentMeta } = getComponentMeta(componentName)
+      if (!componentMeta?.slots) return
+
+      const interfaceCode = generateTSInterface(
+        `${pascalCaseName}Slots`,
+        Object.values(componentMeta.slots),
+        slotItemHandler,
+        `Slots for the ${pascalCaseName} component`
+      )
+      replaceNodeWithPre(node, 'ts', interfaceCode)
+    })
+
+    visitAndReplace(doc, 'component-emits', (node) => {
+      const { pascalCaseName, componentMeta } = getComponentMeta(componentName)
+      const hasEvents = componentMeta?.events && Object.keys(componentMeta.events).length > 0
+
+      if (hasEvents) {
+        const interfaceCode = generateTSInterface(
+          `${pascalCaseName}Emits`,
+          Object.values(componentMeta.events),
+          emitItemHandler,
+          `Emitted events for the ${pascalCaseName} component`
+        )
+        replaceNodeWithPre(node, 'ts', interfaceCode)
+      } else {
+        node[0] = 'p'
+        node[1] = {}
+        node[2] = 'No events available for this component.'
+      }
+    })
+
+    visitAndReplace(doc, 'component-example', (node) => {
+      const camelName = camelCase(node[1]['name'])
+      const name = camelName.charAt(0).toUpperCase() + camelName.slice(1)
+      const code = components[name].code
+      replaceNodeWithPre(node, 'vue', code, `${name}.vue`)
+    })
  })
 })
--- a/docs/server/routes/raw/[...slug].md.get.ts
+++ b/docs/server/routes/raw/[...slug].md.get.ts
@@ -1,30 +0,0 @@
-import { stringify } from 'minimark/stringify'
-import { withLeadingSlash } from 'ufo'
-
-export default eventHandler(async (event) => {
-  const slug = getRouterParams(event)['slug.md']
-  if (!slug?.endsWith('.md')) {
-    throw createError({ statusCode: 404, statusMessage: 'Page not found', fatal: true })
-  }
-
-  const path = withLeadingSlash(slug.replace('.md', ''))
-  // @ts-expect-error TODO: fix this
-  const page = await queryCollection(event, 'content').path(path).first()
-  if (!page) {
-    throw createError({ statusCode: 404, statusMessage: 'Page not found', fatal: true })
-  }
-
-  // Add title and description to the top of the page if missing
-  if (page.body.value[0]?.[0] !== 'h1') {
-    page.body.value.unshift(['blockquote', {}, page.description])
-    page.body.value.unshift(['h1', {}, page.title])
-  }
-
-  const transformedPage = transformMDC({
-    title: page.title,
-    body: page.body
-  })
-
-  setHeader(event, 'Content-Type', 'text/markdown; charset=utf-8')
-  return stringify({ ...transformedPage.body, type: 'minimark' }, { format: 'markdown/html' })
-})
--- a/docs/server/utils/transformMDC.ts
+++ b/docs/server/utils/transformMDC.ts
@@ -1,410 +0,0 @@
-import json5 from 'json5'
-import { camelCase, kebabCase } from 'scule'
-import { visit } from '@nuxt/content/runtime'
-import * as theme from '../../.nuxt/ui'
-import * as themePro from '../../.nuxt/ui-pro'
-import meta from '#nuxt-component-meta'
-// @ts-expect-error - no types available
-import components from '#component-example/nitro'
-
-type ComponentAttributes = {
-  ':pro'?: string
-  ':prose'?: string
-  ':props'?: string
-  ':external'?: string
-  ':externalTypes'?: string
-  ':ignore'?: string
-  ':hide'?: string
-  ':slots'?: string
-}
-
-type ThemeConfig = {
-  pro: boolean
-  prose: boolean
-  componentName: string
-}
-
-type CodeConfig = {
-  pro: boolean
-  props: Record<string, unknown>
-  external: string[]
-  externalTypes: string[]
-  ignore: string[]
-  hide: string[]
-  componentName: string
-  slots?: Record<string, string>
-}
-
-type Document = {
-  title: string
-  body: any
-}
-
-const parseBoolean = (value?: string): boolean => value === 'true'
-
-function getComponentMeta(componentName: string) {
-  const pascalCaseName = componentName.charAt(0).toUpperCase() + componentName.slice(1)
-
-  const strategies = [
-    `U${pascalCaseName}`,
-    `Prose${pascalCaseName}`,
-    pascalCaseName
-  ]
-
-  let componentMeta: any
-  let finalMetaComponentName: string = pascalCaseName
-
-  for (const nameToTry of strategies) {
-    finalMetaComponentName = nameToTry
-    const metaAttempt = (meta as Record<string, any>)[nameToTry]?.meta
-    if (metaAttempt) {
-      componentMeta = metaAttempt
-      break
-    }
-  }
-
-  if (!componentMeta) {
-    console.warn(`[getComponentMeta] Metadata not found for ${pascalCaseName} using strategies: U, Prose, or no prefix. Last tried: ${finalMetaComponentName}`)
-  }
-
-  return {
-    pascalCaseName,
-    metaComponentName: finalMetaComponentName,
-    componentMeta
-  }
-}
-
-function replaceNodeWithPre(node: any[], language: string, code: string, filename?: string) {
-  node[0] = 'pre'
-  node[1] = { language, code }
-  if (filename) node[1].filename = filename
-}
-
-function visitAndReplace(doc: Document, type: string, handler: (node: any[]) => void) {
-  visit(doc.body, (node) => {
-    if (Array.isArray(node) && node[0] === type) {
-      handler(node)
-    }
-    return true
-  }, node => node)
-}
-
-function generateTSInterface(
-  name: string,
-  items: any[],
-  itemHandler: (item: any) => string,
-  description: string
-) {
-  let code = `/**\n * ${description}\n */\ninterface ${name} {\n`
-  for (const item of items) {
-    code += itemHandler(item)
-  }
-  code += `}`
-  return code
-}
-
-function propItemHandler(propValue: any): string {
-  if (!propValue?.name) return ''
-  const propName = propValue.name
-  const propType = propValue.type
-    ? Array.isArray(propValue.type)
-      ? propValue.type.map((t: any) => t.name || t).join(' | ')
-      : propValue.type.name || propValue.type
-    : 'any'
-  const isRequired = propValue.required || false
-  const hasDescription = propValue.description && propValue.description.trim().length > 0
-  const hasDefault = propValue.default !== undefined
-  let result = ''
-  if (hasDescription || hasDefault) {
-    result += `  /**\n`
-    if (hasDescription) {
-      const descLines = propValue.description.split(/\r?\n/)
-      descLines.forEach((line: string) => {
-        result += `   * ${line}\n`
-      })
-    }
-    if (hasDefault) {
-      let defaultValue = propValue.default
-      if (typeof defaultValue === 'string') {
-        defaultValue = `"${defaultValue.replace(/"/g, '\\"')}"`
-      } else {
-        defaultValue = JSON.stringify(defaultValue)
-      }
-      result += `   * @default ${defaultValue}\n`
-    }
-    result += `   */\n`
-  }
-  result += `  ${propName}${isRequired ? '' : '?'}: ${propType};\n`
-  return result
-}
-
-function slotItemHandler(slotValue: any): string {
-  if (!slotValue?.name) return ''
-  const slotName = slotValue.name
-  const hasDescription = slotValue.description && slotValue.description.trim().length > 0
-  let result = ''
-  if (hasDescription) {
-    result += `  /**\n`
-    const descLines = slotValue.description.split(/\r?\n/)
-    descLines.forEach((line: string) => {
-      result += `   * ${line}\n`
-    })
-    result += `   */\n`
-  }
-  if (slotValue.bindings && Object.keys(slotValue.bindings).length > 0) {
-    let bindingsType = '{\n'
-    Object.entries(slotValue.bindings).forEach(([bindingName, bindingValue]: [string, any]) => {
-      const bindingType = bindingValue.type || 'any'
-      bindingsType += `    ${bindingName}: ${bindingType};\n`
-    })
-    bindingsType += '  }'
-    result += `  ${slotName}(bindings: ${bindingsType}): any;\n`
-  } else {
-    result += `  ${slotName}(): any;\n`
-  }
-  return result
-}
-
-function emitItemHandler(event: any): string {
-  if (!event?.name) return ''
-  let payloadType = 'void'
-  if (event.type) {
-    payloadType = Array.isArray(event.type)
-      ? event.type.map((t: any) => t.name || t).join(' | ')
-      : event.type.name || event.type
-  }
-  let result = ''
-  if (event.description && event.description.trim().length > 0) {
-    result += `  /**\n`
-    event.description.split(/\r?\n/).forEach((line: string) => {
-      result += `   * ${line}\n`
-    })
-    result += `   */\n`
-  }
-  result += `  ${event.name}: (payload: ${payloadType}) => void;\n`
-  return result
-}
-
-const generateThemeConfig = ({ pro, prose, componentName }: ThemeConfig) => {
-  const computedTheme = pro ? (prose ? themePro.prose : themePro) : theme
-  const componentTheme = computedTheme[componentName as keyof typeof computedTheme]
-
-  return {
-    [pro ? 'uiPro' : 'ui']: prose
-      ? { prose: { [componentName]: componentTheme } }
-      : { [componentName]: componentTheme }
-  }
-}
-
-const generateComponentCode = ({
-  pro,
-  props,
-  external,
-  externalTypes,
-  hide,
-  componentName,
-  slots
-}: CodeConfig) => {
-  const filteredProps = Object.fromEntries(
-    Object.entries(props).filter(([key]) => !hide.includes(key))
-  )
-
-  const imports = pro
-    ? ''
-    : external
-        .filter((_, index) => externalTypes[index] && externalTypes[index] !== 'undefined')
-        .map((ext, index) => {
-          const type = externalTypes[index]?.replace(/[[\]]/g, '')
-          return `import type { ${type} } from '@nuxt/${pro ? 'ui-pro' : 'ui'}'`
-        })
-        .join('\n')
-
-  let itemsCode = ''
-  if (props.items) {
-    itemsCode = pro
-      ? `const items = ref(${json5.stringify(props.items, null, 2)})`
-      : `const items = ref<${externalTypes[0]}>(${json5.stringify(props.items, null, 2)})`
-    delete filteredProps.items
-  }
-
-  let calendarValueCode = ''
-  if (componentName === 'calendar' && props.modelValue && Array.isArray(props.modelValue)) {
-    calendarValueCode = `const value = ref(new CalendarDate(${props.modelValue.join(', ')}))`
-  }
-
-  const propsString = Object.entries(filteredProps)
-    .map(([key, value]) => {
-      const formattedKey = kebabCase(key)
-      if (typeof value === 'string') {
-        return `${formattedKey}="${value}"`
-      } else if (typeof value === 'number') {
-        return `:${formattedKey}="${value}"`
-      } else if (typeof value === 'boolean') {
-        return value ? formattedKey : `:${formattedKey}="false"`
-      }
-      return ''
-    })
-    .filter(Boolean)
-    .join(' ')
-
-  const itemsProp = props.items ? ':items="items"' : ''
-  const vModelProp = componentName === 'calendar' && props.modelValue ? 'v-model="value"' : ''
-  const allProps = [propsString, itemsProp, vModelProp].filter(Boolean).join(' ')
-  const formattedProps = allProps ? ` ${allProps}` : ''
-
-  let scriptSetup = ''
-  if (imports || itemsCode || calendarValueCode) {
-    scriptSetup = '<script setup lang="ts">'
-    if (imports) scriptSetup += `\n${imports}`
-    if (imports && (itemsCode || calendarValueCode)) scriptSetup += '\n'
-    if (calendarValueCode) scriptSetup += `\n${calendarValueCode}`
-    if (itemsCode) scriptSetup += `\n${itemsCode}`
-    scriptSetup += '\n</script>\n\n'
-  }
-
-  let componentContent = ''
-  let slotContent = ''
-
-  if (slots && Object.keys(slots).length > 0) {
-    const defaultSlot = slots.default?.trim()
-    if (defaultSlot) {
-      const indentedContent = defaultSlot
-        .split('\n')
-        .map(line => line.trim() ? `    ${line}` : line)
-        .join('\n')
-      componentContent = `\n${indentedContent}\n  `
-    }
-
-    Object.entries(slots).forEach(([slotName, content]) => {
-      if (slotName !== 'default' && content?.trim()) {
-        const indentedSlotContent = content.trim()
-          .split('\n')
-          .map(line => line.trim() ? `      ${line}` : line)
-          .join('\n')
-        slotContent += `\n    <template #${slotName}>\n${indentedSlotContent}\n    </template>`
-      }
-    })
-  }
-
-  const pascalCaseName = componentName.charAt(0).toUpperCase() + componentName.slice(1)
-
-  let componentTemplate = ''
-  if (componentContent || slotContent) {
-    componentTemplate = `<U${pascalCaseName}${formattedProps}>${componentContent}${slotContent}</U${pascalCaseName}>` // Removed space before closing tag
-  } else {
-    componentTemplate = `<U${pascalCaseName}${formattedProps} />`
-  }
-
-  return `${scriptSetup}<template>
-  ${componentTemplate}
-</template>`
-}
-
-export function transformMDC(doc: Document): Document {
-  const componentName = camelCase(doc.title)
-
-  visitAndReplace(doc, 'component-theme', (node) => {
-    const attributes = node[1] as Record<string, string>
-    const mdcSpecificName = attributes?.slug
-
-    const finalComponentName = mdcSpecificName ? camelCase(mdcSpecificName) : componentName
-
-    const pro = parseBoolean(attributes[':pro'])
-    const prose = parseBoolean(attributes[':prose'])
-    const appConfig = generateThemeConfig({ pro, prose, componentName: finalComponentName })
-
-    replaceNodeWithPre(
-      node,
-      'ts',
-      `export default defineAppConfig(${json5.stringify(appConfig, null, 2)?.replace(/,([ |\t\n]+[}|\])])/g, '$1')})`,
-      'app.config.ts'
-    )
-  })
-
-  visitAndReplace(doc, 'component-code', (node) => {
-    const attributes = node[1] as ComponentAttributes
-    const pro = parseBoolean(attributes[':pro'])
-    const props = attributes[':props'] ? json5.parse(attributes[':props']) : {}
-    const external = attributes[':external'] ? json5.parse(attributes[':external']) : []
-    const externalTypes = attributes[':externalTypes'] ? json5.parse(attributes[':externalTypes']) : []
-    const ignore = attributes[':ignore'] ? json5.parse(attributes[':ignore']) : []
-    const hide = attributes[':hide'] ? json5.parse(attributes[':hide']) : []
-    const slots = attributes[':slots'] ? json5.parse(attributes[':slots']) : {}
-
-    const code = generateComponentCode({
-      pro,
-      props,
-      external,
-      externalTypes,
-      ignore,
-      hide,
-      componentName,
-      slots
-    })
-
-    replaceNodeWithPre(node, 'vue', code)
-  })
-
-  visitAndReplace(doc, 'component-props', (node) => {
-    const attributes = node[1] as Record<string, string>
-    const mdcSpecificName = attributes?.name
-    const isProse = parseBoolean(attributes[':prose'])
-
-    const finalComponentName = mdcSpecificName ? camelCase(mdcSpecificName) : componentName
-
-    const { pascalCaseName, componentMeta } = getComponentMeta(finalComponentName)
-
-    if (!componentMeta?.props) return
-
-    const interfaceName = isProse ? `Prose${pascalCaseName}Props` : `${pascalCaseName}Props`
-
-    const interfaceCode = generateTSInterface(
-      interfaceName,
-      Object.values(componentMeta.props),
-      propItemHandler,
-      `Props for the ${isProse ? 'Prose' : ''}${pascalCaseName} component`
-    )
-    replaceNodeWithPre(node, 'ts', interfaceCode)
-  })
-
-  visitAndReplace(doc, 'component-slots', (node) => {
-    const { pascalCaseName, componentMeta } = getComponentMeta(componentName)
-    if (!componentMeta?.slots) return
-
-    const interfaceCode = generateTSInterface(
-      `${pascalCaseName}Slots`,
-      Object.values(componentMeta.slots),
-      slotItemHandler,
-      `Slots for the ${pascalCaseName} component`
-    )
-    replaceNodeWithPre(node, 'ts', interfaceCode)
-  })
-
-  visitAndReplace(doc, 'component-emits', (node) => {
-    const { pascalCaseName, componentMeta } = getComponentMeta(componentName)
-    const hasEvents = componentMeta?.events && Object.keys(componentMeta.events).length > 0
-
-    if (hasEvents) {
-      const interfaceCode = generateTSInterface(
-        `${pascalCaseName}Emits`,
-        Object.values(componentMeta.events),
-        emitItemHandler,
-        `Emitted events for the ${pascalCaseName} component`
-      )
-      replaceNodeWithPre(node, 'ts', interfaceCode)
-    } else {
-      node[0] = 'p'
-      node[1] = {}
-      node[2] = 'No events available for this component.'
-    }
-  })
-
-  visitAndReplace(doc, 'component-example', (node) => {
-    const camelName = camelCase(node[1]['name'])
-    const name = camelName.charAt(0).toUpperCase() + camelName.slice(1)
-    const code = components[name].code
-    replaceNodeWithPre(node, 'vue', code, `${name}.vue`)
-  })
-
-  return doc
-}
--- a/package.json
+++ b/package.json
@@ -1,8 +1,8 @@
 {
  "name": "@nuxt/ui",
  "description": "A UI Library for Modern Web Apps, powered by Vue & Tailwind CSS.",
-  "version": "3.2.0",
-  "packageManager": "pnpm@10.13.1",
+  "version": "3.1.3",
+  "packageManager": "pnpm@10.12.1",
  "repository": {
    "type": "git",
    "url": "git+https://github.com/nuxt/ui.git"
@@ -98,9 +98,9 @@
    "prepack": "pnpm build",
    "dev": "nuxt dev playground --uiDev",
    "dev:build": "nuxt build playground",
-    "dev:vue": "pnpm --filter playground-vue dev -- --uiDev",
-    "dev:vue:build": "pnpm --filter playground-vue build",
-    "dev:prepare": "nuxt-module-build build --stub && nuxt-module-build prepare && nuxt prepare playground && nuxt prepare docs && pnpm dev:vue:build",
+    "dev:vue": "vite playground-vue -- --uiDev",
+    "dev:vue:build": "vite build playground-vue",
+    "dev:prepare": "nuxt-module-build build --stub && nuxt-module-build prepare && nuxt prepare playground && nuxt prepare docs && vite build playground-vue",
    "docs": "nuxt dev docs --uiDev",
    "docs:build": "nuxt build docs",
    "lint": "eslint .",
@@ -115,17 +115,17 @@
    "@internationalized/date": "^3.8.2",
    "@internationalized/number": "^3.6.3",
    "@nuxt/fonts": "^0.11.4",
-    "@nuxt/icon": "^1.15.0",
-    "@nuxt/kit": "^4.0.1",
-    "@nuxt/schema": "^4.0.1",
+    "@nuxt/icon": "^1.13.0",
+    "@nuxt/kit": "^3.17.5",
+    "@nuxt/schema": "^3.17.5",
    "@nuxtjs/color-mode": "^3.5.2",
    "@standard-schema/spec": "^1.0.0",
-    "@tailwindcss/postcss": "^4.1.11",
-    "@tailwindcss/vite": "^4.1.11",
+    "@tailwindcss/postcss": "^4.1.10",
+    "@tailwindcss/vite": "^4.1.10",
    "@tanstack/vue-table": "^8.21.3",
-    "@unhead/vue": "^2.0.12",
-    "@vueuse/core": "^13.5.0",
-    "@vueuse/integrations": "^13.5.0",
+    "@unhead/vue": "^2.0.10",
+    "@vueuse/core": "^13.3.0",
+    "@vueuse/integrations": "^13.3.0",
    "colortranslator": "^5.0.0",
    "consola": "^3.4.2",
    "defu": "^6.1.4",
@@ -143,31 +143,31 @@
    "mlly": "^1.7.4",
    "ohash": "^2.0.11",
    "pathe": "^2.0.3",
-    "reka-ui": "2.3.2",
+    "reka-ui": "2.3.1",
    "scule": "^1.3.0",
    "tailwind-variants": "^1.0.0",
-    "tailwindcss": "^4.1.11",
+    "tailwindcss": "^4.1.10",
    "tinyglobby": "^0.2.14",
    "unplugin": "^2.3.5",
    "unplugin-auto-import": "^19.3.0",
-    "unplugin-vue-components": "^28.8.0",
+    "unplugin-vue-components": "^28.7.0",
    "vaul-vue": "0.4.1",
-    "vue-component-type-helpers": "^3.0.1"
+    "vue-component-type-helpers": "^2.2.10"
  },
  "devDependencies": {
-    "@nuxt/eslint-config": "^1.6.0",
+    "@nuxt/eslint-config": "^1.4.1",
    "@nuxt/module-builder": "^1.0.1",
-    "@nuxt/test-utils": "^3.19.2",
+    "@nuxt/test-utils": "^3.19.1",
    "@release-it/conventional-changelog": "^10.0.1",
    "@vue/test-utils": "^2.4.6",
    "embla-carousel": "^8.6.0",
-    "eslint": "^9.31.0",
-    "happy-dom": "^18.0.1",
-    "nuxt": "^4.0.1",
-    "release-it": "^19.0.4",
-    "vitest": "^3.2.4",
+    "eslint": "^9.28.0",
+    "happy-dom": "^17.6.3",
+    "nuxt": "^3.17.5",
+    "release-it": "^19.0.3",
+    "vitest": "^3.2.3",
    "vitest-environment-nuxt": "^1.0.1",
-    "vue-tsc": "^3.0.1"
+    "vue-tsc": "^2.2.10"
  },
  "peerDependencies": {
    "@inertiajs/vue3": "^2.0.7",
@@ -177,7 +177,7 @@
    "valibot": "^1.0.0",
    "vue-router": "^4.5.0",
    "yup": "^1.6.0",
-    "zod": "^3.24.0 || ^4.0.0"
+    "zod": "^3.24.0"
  },
  "peerDependenciesMeta": {
    "@inertiajs/vue3": {
--- a/playground-vue/package.json
+++ b/playground-vue/package.json
@@ -11,14 +11,14 @@
  },
  "dependencies": {
    "@nuxt/ui": "workspace:*",
-    "vue": "^3.5.17",
+    "vue": "^3.5.16",
    "vue-router": "^4.5.1",
-    "zod": "^4.0.5"
+    "zod": "^3.25.57"
  },
  "devDependencies": {
-    "@vitejs/plugin-vue": "^6.0.0",
+    "@vitejs/plugin-vue": "^5.2.4",
    "typescript": "^5.8.3",
-    "vite": "^7.0.5",
-    "vue-tsc": "^3.0.1"
+    "vite": "^6.3.5",
+    "vue-tsc": "^2.2.10"
  }
 }
--- a/playground-vue/src/app.vue
+++ b/playground-vue/src/app.vue
@@ -35,7 +35,6 @@ const components = [
  'command-palette',
  'drawer',
  'dropdown-menu',
-  'file-upload',
  'form',
  'form-field',
  'input',
--- a/playground/app/app.vue
+++ b/playground/app/app.vue
@@ -35,7 +35,6 @@ const components = [
  'command-palette',
  'drawer',
  'dropdown-menu',
-  'file-upload',
  'form',
  'form-field',
  'input',
--- a/playground/app/pages/components/color-picker.vue
+++ b/playground/app/pages/components/color-picker.vue
@@ -1,16 +1,12 @@
 <script setup lang="ts">
 const colorHex = ref('#9C27B0')
-
-function handleColorChange(event: Event) {
-  colorHex.value = (event.target as HTMLInputElement).value
-}
 </script>

 <template>
  <div class="flex flex-col gap-5">
    <div class="flex items-center gap-2">
      <span :style="{ backgroundColor: colorHex }" class="inline-flex w-5 h-5 rounded" />
-      <UInput :model-value="colorHex" @change="handleColorChange" />
+      <code class="font-mono">{{ colorHex }}</code>
    </div>
    <USeparator />
    <div class="flex justify-between gap-2">
@@ -25,6 +21,6 @@ function handleColorChange(event: Event) {
      </UButton>
    </div>
    <USeparator />
-    <UColorPicker v-model="colorHex" />
+    <UColorPicker v-model="colorHex" @update:model-value="() => console.log('model update')" />
  </div>
 </template>
--- a/playground/app/pages/components/command-palette.vue
+++ b/playground/app/pages/components/command-palette.vue
@@ -166,27 +166,7 @@ defineShortcuts({
      multiple
      class="sm:max-h-80"
      @update:model-value="onSelect"
-    >
-      <template #footer>
-        <div class="flex items-center justify-between gap-2">
-          <UIcon name="i-simple-icons-nuxtdotjs" class="size-5 text-dimmed ml-1" />
-          <div class="flex items-center gap-1">
-            <UButton color="neutral" variant="ghost" label="Open Command" class="text-dimmed" size="xs">
-              <template #trailing>
-                <UKbd value="enter" />
-              </template>
-            </UButton>
-            <USeparator orientation="vertical" class="h-4" />
-            <UButton color="neutral" variant="ghost" label="Actions" class="text-dimmed" size="xs">
-              <template #trailing>
-                <UKbd value="meta" />
-                <UKbd value="k" />
-              </template>
-            </UButton>
-          </div>
-        </div>
-      </template>
-    </UCommandPalette>
+    />
  </DefineTemplate>

  <div class="flex-1 flex flex-col gap-12 w-full max-w-lg">
--- a/playground/app/pages/components/drawer.vue
+++ b/playground/app/pages/components/drawer.vue
@@ -28,20 +28,6 @@ const inset = ref(false)
      </template>
    </UDrawer>

-    <UDrawer title="Drawer with nested" :inset="inset" :ui="{ content: 'h-full' }" should-scale-background>
-      <UButton color="neutral" variant="outline" label="Open nested" />
-
-      <template #footer>
-        <UDrawer :inset="inset" nested :ui="{ content: 'h-full' }">
-          <UButton color="neutral" variant="outline" label="Open nested" />
-
-          <template #content>
-            <Placeholder class="flex-1 m-4" />
-          </template>
-        </UDrawer>
-      </template>
-    </UDrawer>
-
    <UDrawer title="Drawer with bottom direction" direction="bottom" :inset="inset">
      <UButton color="neutral" variant="outline" label="Open on bottom" />

--- a/playground/app/pages/components/file-upload.vue
+++ b/playground/app/pages/components/file-upload.vue
@@ -1,126 +0,0 @@
-<script setup lang="ts">
-import * as z from 'zod'
-import type { FormSubmitEvent } from '@nuxt/ui'
-import theme from '#build/ui/file-upload'
-
-const sizes = Object.keys(theme.variants.size) as Array<keyof typeof theme.variants.size>
-
-const size = ref<keyof typeof theme.variants.size>('md')
-
-const MAX_FILE_SIZE = 2 * 1024 * 1024 // 2MB
-const MIN_DIMENSIONS = { width: 200, height: 200 }
-const MAX_DIMENSIONS = { width: 4096, height: 4096 }
-const ACCEPTED_IMAGE_TYPES = ['image/jpeg', 'image/jpg', 'image/png', 'image/webp']
-
-const formatBytes = (bytes: number, decimals = 2) => {
-  if (bytes === 0) return '0 Bytes'
-  const k = 1024
-  const dm = decimals < 0 ? 0 : decimals
-  const sizes = ['Bytes', 'KB', 'MB', 'GB', 'TB', 'PB', 'EB', 'ZB', 'YB']
-  const i = Math.floor(Math.log(bytes) / Math.log(k))
-  return Number.parseFloat((bytes / Math.pow(k, i)).toFixed(dm)) + ' ' + sizes[i]
-}
-
-const schema = z.object({
-  avatar: z
-    .instanceof(File, {
-      message: 'Please select an image file.'
-    })
-    .refine(file => file.size <= MAX_FILE_SIZE, {
-      message: `The image is too large. Please choose an image smaller than ${formatBytes(MAX_FILE_SIZE)}.`
-    })
-    .refine(file => ACCEPTED_IMAGE_TYPES.includes(file.type), {
-      message: 'Please upload a valid image file (JPEG, PNG, or WebP).'
-    })
-    .refine(
-      file =>
-        new Promise((resolve) => {
-          const reader = new FileReader()
-          reader.onload = (e) => {
-            const img = new Image()
-            img.onload = () => {
-              const meetsDimensions
-                  = img.width >= MIN_DIMENSIONS.width
-                    && img.height >= MIN_DIMENSIONS.height
-                    && img.width <= MAX_DIMENSIONS.width
-                    && img.height <= MAX_DIMENSIONS.height
-              resolve(meetsDimensions)
-            }
-            img.src = e.target?.result as string
-          }
-          reader.readAsDataURL(file)
-        }),
-      {
-        message: `The image dimensions are invalid. Please upload an image between ${MIN_DIMENSIONS.width}x${MIN_DIMENSIONS.height} and ${MAX_DIMENSIONS.width}x${MAX_DIMENSIONS.height} pixels.`
-      }
-    )
-})
-
-type schema = z.output<typeof schema>
-
-const state = reactive<Partial<schema>>({
-  avatar: undefined
-})
-
-const value = ref<File[]>([new File(['foo'], 'file1.txt', { type: 'text/plain' })])
-
-const upload = useUpload('/api/blob', { method: 'PUT' })
-
-function createObjectUrl(file: File): string {
-  return URL.createObjectURL(file)
-}
-
-async function onSubmit(event: FormSubmitEvent<schema>) {
-  const res = await upload(event.data.avatar)
-
-  console.log(res)
-}
-</script>
-
-<template>
-  <div class="flex flex-col items-center gap-8">
-    <div class="flex flex-wrap items-center gap-3">
-      <USelect v-model="size" :items="sizes" />
-    </div>
-
-    <UForm :schema="schema" :state="state" class="space-y-4 w-80" @submit="onSubmit">
-      <UFormField name="avatar" label="Avatar" description="JPG, GIF or PNG. 1MB Max." :size="size">
-        <UFileUpload v-slot="{ open, remove }" v-model="state.avatar" accept="image/*">
-          <div class="flex flex-wrap items-center gap-3">
-            <UAvatar size="lg" :src="state.avatar ? createObjectUrl(state.avatar) : undefined" icon="i-lucide-image" />
-
-            <UButton :label="state.avatar ? 'Change image' : 'Upload image'" color="neutral" @click="open()" />
-          </div>
-
-          <p v-if="state.avatar" class="text-xs text-muted mt-1.5">
-            {{ state.avatar.name }}
-
-            <UButton
-              label="Remove"
-              color="error"
-              variant="link"
-              size="xs"
-              class="p-0"
-              @click="remove()"
-            />
-          </p>
-        </UFileUpload>
-      </UFormField>
-
-      <UButton label="Submit" type="submit" />
-    </UForm>
-
-    <UFileUpload
-      v-model="value"
-      label="Drop your image here"
-      description="SVG, PNG, JPG or GIF (max. 2MB)"
-      class="w-full"
-      multiple
-      :size="size"
-    >
-      <template #files-bottom="{ remove }">
-        <UButton label="Remove all" @click="remove()" />
-      </template>
-    </UFileUpload>
-  </div>
-</template>
--- a/playground/app/pages/components/form.vue
+++ b/playground/app/pages/components/form.vue
@@ -57,7 +57,7 @@ const disabled = ref(false)
    <div class="border border-default rounded-lg">
      <div class="py-2 px-4 flex gap-4 items-center">
        <UFormField label="Validate on" class="flex items-center gap-2">
-          <USelectMenu v-model="validateOn" :items="['input', 'change', 'blur']" multiple class="w-48" />
+          <USelectMenu v-model="validateOn" :items="['input', 'change', 'blur', 'error-input']" multiple class="w-48" />
        </UFormField>
        <UCheckbox v-model="disabled" label="Disabled" />
      </div>
--- a/playground/app/pages/components/kbd.vue
+++ b/playground/app/pages/components/kbd.vue
@@ -3,16 +3,20 @@ import theme from '#build/ui/kbd'
 import { kbdKeysMap } from '@nuxt/ui/composables/useKbd.js'

 const sizes = Object.keys(theme.variants.size) as Array<keyof typeof theme.variants.size>
-const variants = Object.keys(theme.variants.variant) as Array<keyof typeof theme.variants.variant>
-const colors = Object.keys(theme.variants.color) as Array<keyof typeof theme.variants.color>

 const kbdKeys = Object.keys(kbdKeysMap)
 </script>

 <template>
  <div class="flex flex-col gap-2">
-    <div v-for="color in colors" :key="color" class="flex items-center gap-1 ms-[-22px]">
-      <UKbd v-for="variant in variants" :key="`${color}-${variant}`" value="meta" :variant="variant" :color="color" />
+    <div class="flex items-center gap-1">
+      <UKbd value="meta" />
+    </div>
+    <div class="flex items-center gap-1">
+      <UKbd value="meta" variant="subtle" />
+    </div>
+    <div class="flex items-center gap-1">
+      <UKbd value="meta" variant="solid" />
    </div>
    <div class="flex items-center gap-1 ms-[-220px]">
      <UKbd v-for="(kdbKey, index) in kbdKeys" :key="index" :value="kdbKey" />
--- a/playground/app/pages/components/table.vue
+++ b/playground/app/pages/components/table.vue
@@ -3,7 +3,6 @@ import { h, resolveComponent } from 'vue'
 import { upperFirst } from 'scule'
 import type { TableColumn, TableRow } from '@nuxt/ui'
 import { getPaginationRowModel } from '@tanstack/vue-table'
-import { useClipboard, refDebounced } from '@vueuse/core'

 const UButton = resolveComponent('UButton')
 const UCheckbox = resolveComponent('UCheckbox')
@@ -11,7 +10,6 @@ const UBadge = resolveComponent('UBadge')
 const UDropdownMenu = resolveComponent('UDropdownMenu')

 const toast = useToast()
-const { copy } = useClipboard()

 type Payment = {
  id: string
@@ -147,35 +145,6 @@ const data = ref<Payment[]>([{

 const currentID = ref(4601)

-function getRowItems(row: TableRow<Payment>) {
-  return [{
-    type: 'label' as const,
-    label: 'Actions'
-  }, {
-    label: 'Copy payment ID',
-    onSelect() {
-      copy(row.original.id)
-
-      toast.add({
-        title: 'Payment ID copied to clipboard!',
-        color: 'success',
-        icon: 'i-lucide-circle-check'
-      })
-    }
-  }, {
-    label: row.getIsExpanded() ? 'Collapse' : 'Expand',
-    onSelect() {
-      row.toggleExpanded()
-    }
-  }, {
-    type: 'separator' as const
-  }, {
-    label: 'View customer'
-  }, {
-    label: 'View payment details'
-  }]
-}
-
 const columns: TableColumn<Payment>[] = [{
  id: 'select',
  header: ({ table }) => h(UCheckbox, {
@@ -242,16 +211,6 @@ const columns: TableColumn<Payment>[] = [{
 }, {
  accessorKey: 'amount',
  header: () => h('div', { class: 'text-right' }, 'Amount'),
-  footer: ({ column }) => {
-    const total = column.getFacetedRowModel().rows.reduce((acc: number, row: TableRow<Payment>) => acc + Number.parseFloat(row.getValue('amount')), 0)
-
-    const formatted = new Intl.NumberFormat('en-US', {
-      style: 'currency',
-      currency: 'EUR'
-    }).format(total)
-
-    return h('div', { class: 'text-right font-medium' }, `Total: ${formatted}`)
-  },
  cell: ({ row }) => {
    const amount = Number.parseFloat(row.getValue('amount'))

@@ -266,11 +225,38 @@ const columns: TableColumn<Payment>[] = [{
  id: 'actions',
  enableHiding: false,
  cell: ({ row }) => {
+    const items = [{
+      type: 'label',
+      label: 'Actions'
+    }, {
+      label: 'Copy payment ID',
+      onSelect() {
+        navigator.clipboard.writeText(row.original.id)
+
+        toast.add({
+          title: 'Payment ID copied to clipboard!',
+          color: 'success',
+          icon: 'i-lucide-circle-check'
+        })
+      }
+    }, {
+      label: row.getIsExpanded() ? 'Collapse' : 'Expand',
+      onSelect() {
+        row.toggleExpanded()
+      }
+    }, {
+      type: 'separator'
+    }, {
+      label: 'View customer'
+    }, {
+      label: 'View payment details'
+    }]
+
    return h('div', { class: 'text-right' }, h(UDropdownMenu, {
      'content': {
        align: 'end'
      },
-      'items': getRowItems(row),
+      items,
      'aria-label': 'Actions dropdown'
    }, () => h(UButton, {
      'icon': 'i-lucide-ellipsis-vertical',
@@ -308,41 +294,8 @@ function randomize() {
  data.value = data.value.sort(() => Math.random() - 0.5)
 }

-const rowSelection = ref<Record<string, boolean>>({})
-
 function onSelect(row: TableRow<Payment>) {
-  row.toggleSelected(!row.getIsSelected())
-}
-
-const contextmenuRow = ref<TableRow<Payment> | null>(null)
-const contextmenuItems = computed(() => contextmenuRow.value ? getRowItems(contextmenuRow.value) : [])
-
-function onContextmenu(e: Event, row: TableRow<Payment>) {
-  contextmenuRow.value = row
-}
-
-const popoverOpen = ref(false)
-const popoverOpenDebounced = refDebounced(popoverOpen, 1)
-const popoverAnchor = ref({ x: 0, y: 0 })
-const popoverRow = ref<TableRow<Payment> | null>(null)
-
-const reference = computed(() => ({
-  getBoundingClientRect: () =>
-    ({
-      width: 0,
-      height: 0,
-      left: popoverAnchor.value.x,
-      right: popoverAnchor.value.x,
-      top: popoverAnchor.value.y,
-      bottom: popoverAnchor.value.y,
-      ...popoverAnchor.value
-    } as DOMRect)
-}))
-
-function onHover(_e: Event, row: TableRow<Payment> | null) {
-  popoverRow.value = row
-
-  popoverOpen.value = !!row
+  console.log(row)
 }

 onMounted(() => {
@@ -389,44 +342,27 @@ onMounted(() => {
      </UDropdownMenu>
    </div>

-    <UContextMenu :items="contextmenuItems">
-      <UTable
-        ref="table"
-        :data="data"
-        :columns="columns"
-        :column-pinning="columnPinning"
-        :row-selection="rowSelection"
-        :loading="loading"
-        :pagination="pagination"
-        :pagination-options="{
-          getPaginationRowModel: getPaginationRowModel()
-        }"
-        :ui="{
-          tr: 'divide-x divide-default'
-        }"
-        sticky
-        class="border border-accented rounded-sm"
-        @select="onSelect"
-        @contextmenu="onContextmenu"
-        @pointermove="(ev: PointerEvent) => {
-          popoverAnchor.x = ev.clientX
-          popoverAnchor.y = ev.clientY
-        }"
-        @hover="onHover"
-      >
-        <template #expanded="{ row }">
-          <pre>{{ row.original }}</pre>
-        </template>
-      </UTable>
-    </UContextMenu>
-
-    <UPopover :content="{ side: 'top', sideOffset: 16, updatePositionStrategy: 'always' }" :open="popoverOpenDebounced" :reference="reference">
-      <template #content>
-        <div class="p-4">
-          {{ popoverRow?.original?.id }}
-        </div>
+    <UTable
+      ref="table"
+      :data="data"
+      :columns="columns"
+      :column-pinning="columnPinning"
+      :loading="loading"
+      :pagination="pagination"
+      :pagination-options="{
+        getPaginationRowModel: getPaginationRowModel()
+      }"
+      :ui="{
+        tr: 'divide-x divide-default'
+      }"
+      sticky
+      class="border border-accented rounded-sm"
+      @select="onSelect"
+    >
+      <template #expanded="{ row }">
+        <pre>{{ row.original }}</pre>
      </template>
-    </UPopover>
+    </UTable>

    <div class="flex items-center justify-between gap-3">
      <div class="text-sm text-muted">
--- a/playground/app/pages/components/tabs.vue
+++ b/playground/app/pages/components/tabs.vue
@@ -25,8 +25,7 @@ const items = [{
  label: 'Tab3',
  icon: 'i-lucide-bell',
  content: 'Finally, this is the content for Tab3',
-  slot: 'custom' as const,
-  badge: '300'
+  slot: 'custom' as const
 }]
 </script>

--- a/playground/nuxt.config.ts
+++ b/playground/nuxt.config.ts
@@ -10,12 +10,12 @@ export default defineNuxtConfig({

  css: ['~/assets/css/main.css'],

-  compatibilityDate: '2024-07-09',
-
-  hub: {
-    blob: true
+  future: {
+    compatibilityVersion: 4
  },

+  compatibilityDate: '2024-07-09',
+
  vite: {
    optimizeDeps: {
      // prevents reloading page when navigating between components
--- a/Show More
+++ b/Show More