up

Co-authored-by: renovate[bot] <29139614+renovate[bot]@users.noreply.github.com>

.github/ISSUE_TEMPLATE/bug-report-v3.yml

@@ -10,7 +10,7 @@ body:
     id: env
     attributes:
       label: Environment
-      description: You can use `npx nuxi info` to fill this section
+      description: You can use `npx nuxt info` to fill this section
       placeholder: |
         - Operating System: `Darwin`
         - Node Version:     `v18.16.0`

.github/ISSUE_TEMPLATE/bug-report.yml

@@ -10,7 +10,7 @@ body:
     id: env
     attributes:
       label: Environment
-      description: You can use `npx nuxi info` to fill this section
+      description: You can use `npx nuxt info` to fill this section
       placeholder: |
         - Operating System: `Darwin`
         - Node Version:     `v18.16.0`

.github/workflows/docs.yml

@@ -6,10 +6,6 @@ jobs:
   deploy:
     runs-on: ${{ matrix.os }}
 
-    environment:
-      name: ${{ github.ref == 'refs/heads/v3' && 'production' || 'preview' }}
-      url: ${{ steps.deploy.outputs.deployment-url }}
-
     permissions:
       contents: read
       id-token: write
@@ -40,14 +36,10 @@ jobs:
       - name: Prepare build
         run: pnpm run dev:prepare
 
-      - name: Build application
-        run: pnpm run docs:build
+      - name: Deploy to NuxtHub
+        uses: nuxt-hub/action@v2
         env:
           NODE_OPTIONS: '--max-old-space-size=8192'
-
-      - name: Deploy to NuxtHub
-        uses: nuxt-hub/action@v1
-        id: deploy
         with:
           project-key: ui-7eg3
-          directory: docs/dist
+          directory: docs

.github/workflows/module.yml

@@ -93,7 +93,7 @@ jobs:
 
       - name: Store commit SHA
         run: |
-          echo "COMMIT_SHA=$(echo ${{ github.workflow_sha }} | cut -c1-7)" >> $GITHUB_ENV
+          echo "COMMIT_SHA=$(echo ${{ github.event.pull_request.head.sha || github.sha }} | cut -c1-7)" >> $GITHUB_ENV
 
       - name: Install pnpm
         uses: pnpm/action-setup@v4
@@ -111,7 +111,7 @@ jobs:
         run: pnpm install --ignore-workspace
 
       - name: Prepare
-        run: pnpm nuxi prepare
+        run: pnpm nuxt prepare
 
       - name: Typecheck
         run: pnpm run typecheck
@@ -138,7 +138,7 @@ jobs:
 
       - name: Store commit SHA
         run: |
-          echo "COMMIT_SHA=$(echo ${{ github.workflow_sha }} | cut -c1-7)" >> $GITHUB_ENV
+          echo "COMMIT_SHA=$(echo ${{ github.event.pull_request.head.sha || github.sha }} | cut -c1-7)" >> $GITHUB_ENV
 
       - name: Install pnpm
         uses: pnpm/action-setup@v4
@@ -183,7 +183,7 @@ jobs:
 
       - name: Store commit SHA
         run: |
-          echo "COMMIT_SHA=$(echo ${{ github.workflow_sha }} | cut -c1-7)" >> $GITHUB_ENV
+          echo "COMMIT_SHA=$(echo ${{ github.event.pull_request.head.sha || github.sha }} | cut -c1-7)" >> $GITHUB_ENV
 
       - name: Install pnpm
         uses: pnpm/action-setup@v4
@@ -235,7 +235,7 @@ jobs:
 
       - name: Store commit SHA
         run: |
-          echo "COMMIT_SHA=$(echo ${{ github.workflow_sha }} | cut -c1-7)" >> $GITHUB_ENV
+          echo "COMMIT_SHA=$(echo ${{ github.event.pull_request.head.sha || github.sha }} | cut -c1-7)" >> $GITHUB_ENV
 
       - name: Install pnpm
         uses: pnpm/action-setup@v4

.github/workflows/playground.yml

@@ -9,10 +9,6 @@ jobs:
   deploy:
     runs-on: ${{ matrix.os }}
 
-    environment:
-      name: ${{ github.ref == 'refs/heads/v3' && 'production' || 'preview' }}
-      url: ${{ steps.deploy.outputs.deployment-url }}
-
     permissions:
       contents: read
       id-token: write
@@ -40,14 +36,10 @@ jobs:
       - name: Prepare build
         run: pnpm run dev:prepare
 
-      - name: Build application
-        run: pnpm run dev:build
-        env:
-          NITRO_PRESET: cloudflare-pages
-
       - name: Deploy to NuxtHub
-        uses: nuxt-hub/action@v1
-        id: deploy
+        uses: nuxt-hub/action@v2
+        env:
+          NODE_OPTIONS: '--max-old-space-size=8192'
         with:
           project-key: ui3-playground-pb9b
-          directory: playground/dist
+          directory: playground

.github/workflows/reproduction.yml

@@ -0,0 +1,27 @@
+name: reproduction
+
+on:
+  workflow_dispatch:
+  schedule:
+    - cron: '30 1 * * *'
+
+jobs:
+  reproduction:
+    runs-on: ubuntu-latest
+
+    permissions:
+      actions: write
+      issues: write
+
+    steps:
+      - uses: actions/stale@v9
+        with:
+          days-before-stale: -1 # Issues and PR will never be flagged stale automatically.
+          stale-issue-label: 'needs reproduction' # Label that flags an issue as stale.
+          only-labels: 'needs reproduction' # Only process these issues
+          days-before-issue-close: 7
+          ignore-updates: true
+          remove-stale-when-updated: false
+          close-issue-message: This issue was closed because it was open for 7 days without a reproduction.
+          close-issue-label: closed-by-bot
+          operations-per-run: 300 #default 30

.github/workflows/stale.yml

@@ -1,6 +1,7 @@
 name: stale
 
 on:
+  workflow_dispatch:
   schedule:
     - cron: '30 1 * * *'
 
@@ -9,17 +10,28 @@ jobs:
     runs-on: ubuntu-latest
 
     permissions:
+      actions: write
       issues: write
 
     steps:
-      - uses: actions/stale@v9
+      - uses: actions/stale@4c023f01d613e60293d8004f251a18bfb9bbd71d
         with:
-          days-before-stale: -1 # Issues and PR will never be flagged stale automatically.
-          stale-issue-label: 'needs reproduction' # Label that flags an issue as stale.
-          only-labels: 'needs reproduction' # Only process these issues
-          days-before-issue-close: 7
-          ignore-updates: true
-          remove-stale-when-updated: false
-          close-issue-message: This issue was closed because it was open for 7 days without a reproduction.
-          close-issue-label: closed-by-bot
-          operations-per-run: 300 #default 30
+          days-before-pr-stale: -1
+          days-before-stale: 60
+          days-before-close: 7
+          stale-issue-label: 'stale'
+          close-issue-label: 'closed-by-bot'
+          close-issue-message: |
+            Hi! 👋
+
+            This issue has been automatically **closed** due to prolonged inactivity.
+
+            We're a small team and can't address every report, but we appreciate your feedback and contributions.
+
+            If this issue is still relevant with the latest version of Nuxt UI, please feel free to reopen or create a new issue with updated details.
+
+            Thank you for your understanding and support!
+
+            — Nuxt UI Team
+          exempt-issue-labels: 'feature,announcement'
+          operations-per-run: 300

CHANGELOG.md

@@ -1,5 +1,51 @@
 # 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

cli/templates.mjs

@@ -31,8 +31,9 @@ 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}'
-import type { ComponentConfig } from '../types/utils'
+${!pro ? `import type { ComponentConfig } from '../types/utils'` : ''}
 
 type ${upperName} = ComponentConfig<typeof theme, AppConfig, ${upperName}${pro ? `, '${key}'` : ''}>
 
@@ -62,7 +63,7 @@ defineSlots<${upperName}Slots>()
 
 const appConfig = useAppConfig() as ${upperName}['AppConfig']
 
-const ui = computed(() => tv({ extend: tv(theme), ...(appConfig.ui?.${camelName} || {}) })())
+const ui = computed(() => tv({ extend: tv(theme), ...(appConfig.${pro ? 'uiPro' : 'ui'}?.${camelName} || {}) })())
 </script>
 
 <template>
@@ -75,8 +76,9 @@ const ui = computed(() => tv({ extend: tv(theme), ...(appConfig.ui?.${camelName}
 <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}'
-import type { ComponentConfig } from '../types/utils'
+${!pro ? `import type { ComponentConfig } from '../types/utils'` : ''}
 
 type ${upperName} = ComponentConfig<typeof theme, AppConfig, ${upperName}${pro ? `, '${key}'` : ''}>
 
@@ -105,7 +107,7 @@ const appConfig = useAppConfig() as ${upperName}['AppConfig']
 
 const rootProps = useForwardPropsEmits(reactivePick(props), emits)
 
-const ui = computed(() => tv({ extend: tv(theme), ...(appConfig.ui?.${camelName} || {}) })())
+const ui = computed(() => tv({ extend: tv(theme), ...(appConfig.${pro ? 'uiPro' : 'ui'}?.${camelName} || {}) })())
 </script>
 
 <template>
@@ -145,7 +147,8 @@ const test = ({ name, prose, content }) => {
       ? undefined
       : `
 import { describe, it, expect } from 'vitest'
-import ${upperName}, { type ${upperName}Props, type ${upperName}Slots } from '../../${content ? '../' : ''}src/runtime/components/${content ? 'content/' : ''}${upperName}.vue'
+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 ComponentRender from '../${content ? '../' : ''}component-render'
 
 describe('${upperName}', () => {
@@ -186,6 +189,7 @@ 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

docs/app/components/Banner.vue

@@ -1,6 +1,7 @@
 <template>
   <UBanner
     id="ui3-launch"
+    title="Nuxt UI v3 is officially released!"
     icon="i-lucide-rocket"
     :actions="[
       {
@@ -10,9 +11,5 @@
       }
     ]"
     close
-  >
-    <template #title>
-      <span class="font-semibold">Nuxt UI v3</span> is officially released.
-    </template>
-  </UBanner>
+  />
 </template>

docs/app/components/Header.vue

@@ -22,9 +22,7 @@ onMounted(() => {
 
 const navigation = inject<Ref<ContentNavigationItem[]>>('navigation')
 
-const githubLink = computed(() => {
-  return `https://github.com/nuxt/${value.value}`
-})
+const githubLink = computed(() => `https://github.com/nuxt/${value.value}`)
 
 const desktopLinks = computed(() => props.links.map(({ icon, ...link }) => link))
 const mobileLinks = computed(() => [
@@ -36,6 +34,16 @@ const mobileLinks = computed(() => [
     target: '_blank'
   }
 ])
+
+const items = computed(() => {
+  const ui2 = { label: 'v2.22.0', to: 'https://ui2.nuxt.com' }
+  const uiPro1 = { label: 'v1.8.0', to: 'https://ui2.nuxt.com/pro' }
+
+  return [
+    { label: `v${config.version}`, active: true, color: 'primary' as const, checked: true, type: 'checkbox' as const },
+    route.path === '/' ? ui2 : route.path.startsWith('/pro') ? uiPro1 : module.value === 'ui-pro' ? uiPro1 : ui2
+  ]
+})
 </script>
 
 <template>
@@ -53,7 +61,7 @@ const mobileLinks = computed(() => [
       <UDropdownMenu
         v-slot="{ open }"
         :modal="false"
-        :items="[{ label: `v${config.version}`, active: true, color: 'primary', checked: true, type: 'checkbox' }, { label: module === 'ui-pro' ? 'v1.7.1' : 'v2.21.1', to: module === 'ui-pro' ? 'https://ui2.nuxt.com/pro' : 'https://ui2.nuxt.com' }]"
+        :items="items"
         :ui="{ content: 'w-(--reka-dropdown-menu-trigger-width) min-w-0' }"
         size="xs"
       >

docs/app/components/PageHeaderLinks.vue

@@ -0,0 +1,77 @@
+<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>

docs/app/components/content/SupportedLanguages.vue

@@ -26,6 +26,7 @@ function getEmojiFlag(locale: string): string {
     km: 'kh', // Khmer -> Cambodia
     ko: 'kr', // Korean -> South Korea
     ky: 'kg', // Kyrgyz -> Kyrgyzstan
+    lb: 'lu', // Luxembourgish -> Luxembourg
     ms: 'my', // Malay -> Malaysia
     nb: 'no', // Norwegian Bokmål -> Norway
     sl: 'si', // Slovenian -> Slovenia

docs/app/components/content/examples/command-palette/CommandPaletteCustomSlotExample.vue

@@ -83,7 +83,7 @@ const groups = [
     </template>
 
     <template #billing-label="{ item }">
-      {{ item.label }}
+      <span class="font-medium text-primary">{{ item.label }}</span>
 
       <UBadge variant="subtle" size="sm">
         50% off

docs/app/components/content/examples/command-palette/CommandPaletteItemsChildrenExample.vue

@@ -0,0 +1,119 @@
+<script setup lang="ts">
+const toast = useToast()
+
+const groups = [{
+  id: 'actions',
+  label: 'Actions',
+  items: [{
+    label: 'Create new',
+    icon: 'i-lucide-plus',
+    children: [{
+      label: 'New file',
+      icon: 'i-lucide-file-plus',
+      suffix: 'Create a new file in the current directory',
+      onSelect(e: Event) {
+        e.preventDefault()
+        toast.add({ title: 'New file created!' })
+      },
+      kbds: ['meta', 'N']
+    }, {
+      label: 'New folder',
+      icon: 'i-lucide-folder-plus',
+      suffix: 'Create a new folder in the current directory',
+      onSelect(e: Event) {
+        e.preventDefault()
+        toast.add({ title: 'New folder created!' })
+      },
+      kbds: ['meta', 'F']
+    }, {
+      label: 'New project',
+      icon: 'i-lucide-folder-git',
+      suffix: 'Create a new project from a template',
+      onSelect(e: Event) {
+        e.preventDefault()
+        toast.add({ title: 'New project created!' })
+      },
+      kbds: ['meta', 'P']
+    }]
+  }, {
+    label: 'Share',
+    icon: 'i-lucide-share',
+    children: [{
+      label: 'Copy link',
+      icon: 'i-lucide-link',
+      suffix: 'Copy a link to the current item',
+      onSelect(e: Event) {
+        e.preventDefault()
+        toast.add({ title: 'Link copied to clipboard!' })
+      },
+      kbds: ['meta', 'L']
+    }, {
+      label: 'Share via email',
+      icon: 'i-lucide-mail',
+      suffix: 'Share the current item via email',
+      onSelect(e: Event) {
+        e.preventDefault()
+        toast.add({ title: 'Share via email dialog opened!' })
+      }
+    }, {
+      label: 'Share on social',
+      icon: 'i-lucide-share-2',
+      suffix: 'Share the current item on social media',
+      children: [{
+        label: 'Twitter',
+        icon: 'i-simple-icons-twitter',
+        onSelect(e: Event) {
+          e.preventDefault()
+          toast.add({ title: 'Shared on Twitter!' })
+        }
+      }, {
+        label: 'LinkedIn',
+        icon: 'i-simple-icons-linkedin',
+        onSelect(e: Event) {
+          e.preventDefault()
+          toast.add({ title: 'Shared on LinkedIn!' })
+        }
+      }, {
+        label: 'Facebook',
+        icon: 'i-simple-icons-facebook',
+        onSelect(e: Event) {
+          e.preventDefault()
+          toast.add({ title: 'Shared on Facebook!' })
+        }
+      }]
+    }]
+  }, {
+    label: 'Settings',
+    icon: 'i-lucide-settings',
+    children: [{
+      label: 'General',
+      icon: 'i-lucide-sliders',
+      suffix: 'Configure general settings',
+      onSelect(e: Event) {
+        e.preventDefault()
+        toast.add({ title: 'General settings opened!' })
+      }
+    }, {
+      label: 'Appearance',
+      icon: 'i-lucide-palette',
+      suffix: 'Customize the appearance',
+      onSelect(e: Event) {
+        e.preventDefault()
+        toast.add({ title: 'Appearance settings opened!' })
+      }
+    }, {
+      label: 'Security',
+      icon: 'i-lucide-shield',
+      suffix: 'Manage security settings',
+      onSelect(e: Event) {
+        e.preventDefault()
+        toast.add({ title: 'Security settings opened!' })
+      }
+    }]
+  }]
+}]
+</script>
+
+<template>
+  <UCommandPalette :groups="groups" class="flex-1" />
+</template>

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

@@ -1,5 +1,6 @@
 <script setup lang="ts">
-import { object, string, nonempty, refine, type Infer } from 'superstruct'
+import { object, string, nonempty, refine } from 'superstruct'
+import type { Infer } from 'superstruct'
 import type { FormSubmitEvent } from '@nuxt/ui'
 
 const schema = object({

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

@@ -1,5 +1,6 @@
 <script setup lang="ts">
-import { object, string, type InferType } from 'yup'
+import { object, string } from 'yup'
+import type { InferType } from 'yup'
 import type { FormSubmitEvent } from '@nuxt/ui'
 
 const schema = object({

docs/app/components/content/examples/input-tags/InputTagsFormFieldExample.vue

@@ -0,0 +1,9 @@
+<script setup lang="ts">
+const tags = ref(['Vue'])
+</script>
+
+<template>
+  <UFormField label="Tags" required>
+    <UInputTags v-model="tags" placeholder="Enter tags..." />
+  </UFormField>
+</template>

docs/app/components/content/examples/input/InputCopyButtonExample.vue

@@ -1,15 +1,9 @@
 <script setup lang="ts">
-const value = ref('npx nuxi module add ui')
-const copied = ref(false)
+import { useClipboard } from '@vueuse/core'
 
-function copy() {
-  navigator.clipboard.writeText(value.value)
-  copied.value = true
+const value = ref('npx nuxt module add ui')
 
-  setTimeout(() => {
-    copied.value = false
-  }, 2000)
-}
+const { copy, copied } = useClipboard()
 </script>
 
 <template>
@@ -25,7 +19,7 @@ function copy() {
           size="sm"
           :icon="copied ? 'i-lucide-copy-check' : 'i-lucide-copy'"
           aria-label="Copy to clipboard"
-          @click="copy"
+          @click="copy(value)"
         />
       </UTooltip>
     </template>

docs/app/components/content/examples/input/InputMaskExample.vue

@@ -0,0 +1,14 @@
+<script setup lang="ts">
+import { vMaska } from 'maska/vue'
+</script>
+
+<template>
+  <div class="flex flex-col gap-2">
+    <UInput v-maska="'#### #### #### ####'" placeholder="4242 4242 4242 4242" icon="i-lucide-credit-card" />
+
+    <div class="flex items-center gap-2">
+      <UInput v-maska="'##/##'" placeholder="MM/YY" icon="i-lucide-calendar" />
+      <UInput v-maska="'###'" placeholder="CVC" />
+    </div>
+  </div>
+</template>

docs/app/components/content/examples/popover/PopoverCursorExample.vue

@@ -0,0 +1,43 @@
+<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>

docs/app/components/content/examples/table/TableColumnFooterExample.vue

@@ -0,0 +1,106 @@
+<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>

docs/app/components/content/examples/table/TableExample.vue

@@ -2,6 +2,7 @@
 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')
@@ -9,6 +10,7 @@ const UBadge = resolveComponent('UBadge')
 const UDropdownMenu = resolveComponent('UDropdownMenu')
 
 const toast = useToast()
+const { copy } = useClipboard()
 
 type Payment = {
   id: string
@@ -220,7 +222,7 @@ const columns: TableColumn<Payment>[] = [{
     }, {
       label: 'Copy payment ID',
       onSelect() {
-        navigator.clipboard.writeText(row.original.id)
+        copy(row.original.id)
 
         toast.add({
           title: 'Payment ID copied to clipboard!',

docs/app/components/content/examples/table/TableGroupedRowsExample.vue

@@ -1,7 +1,8 @@
 <script setup lang="ts">
 import { h, resolveComponent } from 'vue'
 import type { TableColumn } from '@nuxt/ui'
-import { getGroupedRowModel, type GroupingOptions } from '@tanstack/vue-table'
+import { getGroupedRowModel } from '@tanstack/vue-table'
+import type { GroupingOptions } from '@tanstack/vue-table'
 
 const UBadge = resolveComponent('UBadge')
 

docs/app/components/content/examples/table/TableRowActionsExample.vue

@@ -2,12 +2,14 @@
 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
@@ -119,7 +121,7 @@ function getRowItems(row: Row<Payment>) {
   }, {
     label: 'Copy payment ID',
     onSelect() {
-      navigator.clipboard.writeText(row.original.id)
+      copy(row.original.id)
 
       toast.add({
         title: 'Payment ID copied to clipboard!',

docs/app/components/content/examples/table/TableRowContextMenuEventExample.vue

@@ -0,0 +1,159 @@
+<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>

docs/app/components/content/examples/table/TableRowHoverEventExample.vue

@@ -0,0 +1,157 @@
+<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>

docs/app/components/content/examples/table/TableRowSelectEventExample.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"

docs/app/components/content/examples/table/TableSlotsExample.vue

@@ -1,5 +1,6 @@
 <script setup lang="ts">
 import type { TableColumn, DropdownMenuItem } from '@nuxt/ui'
+import { useClipboard } from '@vueuse/core'
 
 interface User {
   id: number
@@ -10,6 +11,7 @@ interface User {
 }
 
 const toast = useToast()
+const { copy } = useClipboard()
 
 const data = ref<User[]>([{
   id: 1,
@@ -71,7 +73,8 @@ function getDropdownActions(user: User): DropdownMenuItem[][] {
       label: 'Copy user Id',
       icon: 'i-lucide-copy',
       onSelect: () => {
-        navigator.clipboard.writeText(user.id.toString())
+        copy(user.id.toString())
+
         toast.add({
           title: 'User ID copied to clipboard!',
           color: 'success',

docs/app/components/content/examples/timeline/TimelineAlternatingLayoutExample.vue

@@ -29,6 +29,6 @@ const items: TimelineItem[] = [{
     :items="items"
     :ui="{ item: 'even:flex-row-reverse even:-translate-x-[calc(100%-2rem)] even:text-right' }"
     :default-value="2"
-    class="w-full translate-x-[calc(50%-2rem)]"
+    class="translate-x-[calc(50%-1rem)]"
   />
 </template>

docs/app/components/content/examples/tooltip/TooltipCursorExample.vue

@@ -0,0 +1,41 @@
+<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>

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

@@ -2,7 +2,8 @@
 import { kebabCase } from 'scule'
 import type { ContentNavigationItem } from '@nuxt/content'
 import type { PageLink } from '@nuxt/ui-pro'
-import { findPageBreadcrumb, mapContentNavigation } from '@nuxt/ui-pro/utils/content'
+import { mapContentNavigation } from '@nuxt/ui-pro/utils/content'
+import { findPageBreadcrumb } from '@nuxt/content/utils'
 
 const route = useRoute()
 const { framework, module } = useSharedData()
@@ -37,7 +38,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)).map(({ icon, ...link }) => link))
+const breadcrumb = computed(() => mapContentNavigation(findPageBreadcrumb(navigation?.value, page.value?.path, { indexAsChild: true })).map(({ icon, ...link }) => link))
 
 if (!import.meta.prerender) {
   // Redirect to the correct framework version if the page is not the current framework
@@ -141,7 +142,7 @@ const communityLinks = computed(() => [{
         <MDC v-if="page.description" :value="page.description" unwrap="p" :cache-key="`${kebabCase(route.path)}-description`" />
       </template>
 
-      <template v-if="page.links?.length" #links>
+      <template #links>
         <UButton
           v-for="link in page.links"
           :key="link.label"
@@ -154,6 +155,7 @@ const communityLinks = computed(() => [{
             <UAvatar v-bind="link.avatar" size="2xs" :alt="`${link.label} avatar`" />
           </template>
         </UButton>
+        <PageHeaderLinks />
       </template>
     </UPageHeader>
 

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.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')
+      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')
     ])
   }
 

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

@@ -84,7 +84,7 @@ You can play with Nuxt UI components as well as your app components directly fro
 Install the module to your Nuxt application with one command:
 
 ```bash [Terminal]
-npx nuxi module add compodium
+npx nuxt module add compodium
 ```
 ::
 

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

@@ -115,7 +115,7 @@ Start your project using the [nuxt/starter#ui](https://github.com/nuxt/starter/t
 Create a new project locally by running the following command:
 
 ```bash [Terminal]
-npx nuxi init -t ui <my-app>
+npm create nuxt@latest -- -t ui
 ```
 
 ::note

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

@@ -78,6 +78,22 @@ components.d.ts
 
 ::
 
+::tip
+Internally, Nuxt UI relies on custom alias to resolve the theme types. If you're using TypeScript, you should add an alias to your `tsconfig` to enable auto-completion in your `vite.config.ts`.
+
+```json [tsconfig.node.json]
+{
+  "compilerOptions": {
+    "paths": {
+      "#build/ui": [
+        "./node_modules/@nuxt/ui/.nuxt/ui"
+      ]
+    }
+  }
+}
+```
+::
+
 #### Use the Nuxt UI Vue plugin in your `main.ts`
 
 ```ts [main.ts]{3,14}
@@ -179,7 +195,7 @@ Start your project using the [nuxtlabs/nuxt-ui-vue-starter](https://github.com/n
 Create a new project locally by running the following command:
 
 ```bash [Terminal]
-npx nuxi init -t github:nuxtlabs/nuxt-ui-vue-starter <my-app>
+npm create nuxt@latest -- -t github:nuxtlabs/nuxt-ui-vue-starter
 ```
 
 ::note

docs/content/1.getting-started/4.icons/2.vue.md

@@ -32,6 +32,12 @@ 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:

docs/content/1.getting-started/7.i18n/1.nuxt.md

@@ -60,7 +60,7 @@ import { fr } from '@nuxt/ui-pro/locale'
 
 ### Custom locale
 
-You also have the option to add your own locale using `defineLocale`:
+You can create your own locale using the `defineLocale` composable:
 
 ::module-only
 
@@ -125,6 +125,65 @@ 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"}
+
+You can customize an existing locale by overriding its `messages` or `code` using the `extendLocale` composable:
+
+::module-only
+
+#ui
+:::div
+
+```vue [app.vue]
+<script setup lang="ts">
+import { en } from '@nuxt/ui/locale'
+
+const locale = extendLocale(en, {
+  code: 'en-GB',
+  messages: {
+    commandPalette: {
+      placeholder: 'Search a component...'
+    }
+  }
+})
+</script>
+
+<template>
+  <UApp :locale="locale">
+    <NuxtPage />
+  </UApp>
+</template>
+```
+
+:::
+
+#ui-pro
+:::div
+
+```vue [app.vue]
+<script setup lang="ts">
+import { en } from '@nuxt/ui-pro/locale'
+
+const locale = extendLocale(en, {
+  code: 'en-GB',
+  messages: {
+    commandPalette: {
+      placeholder: 'Search a component...'
+    }
+  }
+})
+</script>
+
+<template>
+  <UApp :locale="locale">
+    <NuxtPage />
+  </UApp>
+</template>
+```
+
+:::
+::
+
 ### Dynamic locale
 
 To dynamically switch between languages, you can use the [Nuxt I18n](https://i18n.nuxtjs.org/) module.

docs/content/1.getting-started/7.i18n/2.vue.md

@@ -60,7 +60,7 @@ import { fr } from '@nuxt/ui-pro/locale'
 
 ### Custom locale
 
-You also have the option to add your locale using `defineLocale`:
+You can create your own locale using the `defineLocale` composable:
 
 ::module-only
 
@@ -127,6 +127,67 @@ 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"}
+
+You can customize an existing locale by overriding its `messages` or `code` using the `extendLocale` composable:
+
+::module-only
+
+#ui
+:::div
+
+```vue [App.vue]
+<script setup lang="ts">
+import { en } from '@nuxt/ui/locale'
+import { extendLocale } from '@nuxt/ui/composables/defineLocale.js'
+
+const locale = extendLocale(en, {
+  code: 'en-GB',
+  messages: {
+    commandPalette: {
+      placeholder: 'Search a component...'
+    }
+  }
+})
+</script>
+
+<template>
+  <UApp :locale="locale">
+    <RouterView />
+  </UApp>
+</template>
+```
+
+:::
+
+#ui-pro
+:::div
+
+```vue [App.vue]
+<script setup lang="ts">
+import { en } from '@nuxt/ui-pro/locale'
+import { extendLocale } from '@nuxt/ui/composables/defineLocale.js'
+
+const locale = extendLocale(en, {
+  code: 'en-GB',
+  messages: {
+    commandPalette: {
+      placeholder: 'Search a component...'
+    }
+  }
+})
+</script>
+
+<template>
+  <UApp :locale="locale">
+    <RouterView />
+  </UApp>
+</template>
+```
+
+:::
+::
+
 ### Dynamic locale
 
 To dynamically switch between languages, you can use the [Vue I18n](https://vue-i18n.intlify.dev/) plugin.

docs/content/2.composables/use-overlay.md

@@ -1,6 +1,6 @@
 ---
 title: useOverlay
-description: "A composable to programmatically control overlays."
+description: 'A composable to programmatically control overlays.'
 ---
 
 ## Usage
@@ -9,9 +9,11 @@ Use the auto-imported `useOverlay` composable to programmatically control [Modal
 
 ```vue
 <script setup lang="ts">
+import { LazyModalExample } from '#components'
+
 const overlay = useOverlay()
 
-const modal = overlay.create(MyModal)
+const modal = overlay.create(LazyModalExample)
 
 async function openModal() {
   modal.open()
@@ -29,71 +31,73 @@ In order to return a value from the overlay, the `overlay.open().instance.result
 
 ### `create(component: T, options: OverlayOptions): OverlayInstance`
 
-Creates an overlay, and returns a factory instance
+Create an overlay, and return a factory instance.
 
 - Parameters:
-  - `component`: The overlay component
-  - `options` The overlay options
-    - `defaultOpen?: boolean` Opens the overlay immediately after being created `default: false`
+  - `component`: The overlay component.
+  - `options`:
+    - `defaultOpen?: boolean` Open the overlay immediately after being created. Defaults to `false`.
     - `props?: ComponentProps`: An optional object of props to pass to the rendered component.
-    - `destroyOnClose?: boolean` Removes the overlay from memory when closed `default: false`
+    - `destroyOnClose?: boolean` Removes the overlay from memory when closed. Defaults to `false`.
 
 ### `open(id: symbol, props?: ComponentProps<T>): OpenedOverlay<T>`
 
-Opens the overlay using its `id`
+Open an overlay by its `id`.
 
 - Parameters:
-  - `id`: The identifier of the overlay
+  - `id`: The identifier of the overlay.
   - `props`: An optional object of props to pass to the rendered component.
 
 ### `close(id: symbol, value?: any): void`
 
-Close an overlay using its `id`
+Close an overlay by its `id`.
 
 - Parameters:
-  - `id`: The identifier of the overlay
-  - `value`: A value to resolve the overlay promise with
+  - `id`: The identifier of the overlay.
+  - `value`: A value to resolve the overlay promise with.
 
 ### `patch(id: symbol, props: ComponentProps<T>): void`
 
-Update an overlay using its `id`
+Update an overlay by its `id`.
 
 - Parameters:
-  - `id`: The identifier of the overlay
+  - `id`: The identifier of the overlay.
   - `props`: An object of props to update on the rendered component.
 
 ### `unmount(id: symbol): void`
 
-Removes the overlay from the DOM using its `id`
+Remove an overlay from the DOM by its `id`.
 
 - Parameters:
-  - `id`: The identifier of the overlay
+  - `id`: The identifier of the overlay.
 
 ### `isOpen(id: symbol): boolean`
 
-Checks if an overlay its open using its `id`
+Check if an overlay is open using its `id`.
 
 - Parameters:
-  - `id`: The identifier of the overlay
+  - `id`: The identifier of the overlay.
 
 ### `overlays: Overlay[]`
 
-In-memory list of overlays that were created
+In-memory list of all overlays that were created.
 
-## Overlay Instance API
+## Instance API
 
 ### `open(props?: ComponentProps<T>): Promise<OpenedOverlay<T>>`
 
-Opens the overlay
+Open the overlay.
 
 - Parameters:
   - `props`: An optional object of props to pass to the rendered component.
 
 ```vue
 <script setup lang="ts">
+import { LazyModalExample } from '#components'
+
 const overlay = useOverlay()
 
-const modal = overlay.create(MyModalContent)
+const modal = overlay.create(LazyModalExample)
 
 function openModal() {
   modal.open({
@@ -105,23 +109,25 @@ function openModal() {
 
 ### `close(value?: any): void`
 
-Close the overlay
+Close the overlay.
 
 - Parameters:
-  - `value`: A value to resolve the overlay promise with
+  - `value`: A value to resolve the overlay promise with.
 
 ### `patch(props: ComponentProps<T>)`
 
-Updates the props of the overlay.
+Update the props of the overlay.
 
 - Parameters:
   - `props`: An object of props to update on the rendered component.
 
 ```vue
 <script setup lang="ts">
+import { LazyModalExample } from '#components'
+
 const overlay = useOverlay()
 
-const modal = overlay.create(MyModal, {
+const modal = overlay.create(LazyModalExample, {
   title: 'Welcome'
 })
 
@@ -141,6 +147,8 @@ Here's a complete example of how to use the `useOverlay` composable:
 
 ```vue
 <script setup lang="ts">
+import { ModalA, ModalB, SlideoverA } from '#components'
+
 const overlay = useOverlay()
 
 // Create with default props
@@ -150,7 +158,7 @@ const modalB = overlay.create(ModalB)
 const slideoverA = overlay.create(SlideoverA)
 
 const openModalA = () => {
-  // Open  Modal A, but override the title prop
+  // Open modalA, but override the title prop
   modalA.open({ title: 'Hello' })
 }
 
@@ -160,16 +168,37 @@ const openModalB = async () => {
 
   const input = await modalBInstance.result
 
-  // Pass the result from modalB to the slideover, and open it.
+  // Pass the result from modalB to the slideover, and open it
   slideoverA.open({ input })
 }
 </script>
 
 <template>
-  <div>
-    <button @click="openModal">Open Modal</button>
-  </div>
+  <button @click="openModalA">Open Modal</button>
 </template>
 ```
 
 In this example, we're using the `useOverlay` composable to control multiple modals and slideovers.
+
+## Caveats
+
+### Provide / Inject
+
+When opening overlays programmatically (e.g. modals, slideovers, etc), the overlay component can only access injected values from the component containing `UApp` (typically `app.vue` or layout components). This is because overlays are mounted outside of the page context by the `UApp` component.
+
+As such, using `provide()` in pages or parent components isn't supported directly. To pass provided values to overlays, the recommended approach is to use props instead:
+
+```vue
+<script setup lang="ts">
+import { LazyModalExample } from '#components'
+
+const providedValue = inject('valueProvidedInPage')
+
+const modal = overlay.create(LazyModalExample, {
+  props: {
+    providedValue,
+    otherData: someValue
+  }
+})
+</script>
+```

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

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

docs/content/3.components/checkbox.md

@@ -156,7 +156,7 @@ props:
 ---
 ::
 
-### Variant :badge{label="New" class="align-text-top"}
+### Variant
 
 Use the `variant` prop to change the variant of the Checkbox.
 
@@ -190,7 +190,7 @@ props:
 ---
 ::
 
-### Indicator :badge{label="New" class="align-text-top"}
+### Indicator
 
 Use the `indicator` prop to change the position or hide the indicator. Defaults to `start`.
 

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

@@ -52,9 +52,11 @@ 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"}
 - `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"}
+- `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"}
 
 You can pass any property from the [Link](/components/link#props) component such as `to`, `target`, etc.
 
@@ -110,6 +112,10 @@ props:
 ---
 ::
 
+::tip{to="#with-children-in-items"}
+Each item can take a `children` array of objects with the following properties to create submenus:
+::
+
 ### Multiple
 
 Use the `multiple` prop to allow multiple selections.
@@ -246,6 +252,128 @@ You can customize this icon globally in your `vite.config.ts` under `ui.icons.se
 :::
 ::
 
+### Selected Icon
+
+Use the `selected-icon` prop to customize the selected item [Icon](/components/icon). Defaults to `i-lucide-check`.
+
+::component-code
+---
+collapse: true
+hide:
+  - autofocus
+ignore:
+  - groups
+  - modelValue
+  - multiple
+  - class
+external:
+  - groups
+  - modelValue
+class: '!p-0'
+props:
+  multiple: true
+  autofocus: false
+  modelValue:
+    - label: 'Benjamin Canac'
+      suffix: 'benjamincanac'
+      avatar:
+        src: 'https://github.com/benjamincanac.png'
+  selectedIcon: 'i-lucide-circle-check'
+  groups:
+    - id: 'users'
+      label: 'Users'
+      items:
+        - label: 'Benjamin Canac'
+          suffix: 'benjamincanac'
+          avatar:
+            src: 'https://github.com/benjamincanac.png'
+        - label: 'Sylvain Marroufin'
+          suffix: 'smarroufin'
+          avatar:
+            src: 'https://github.com/smarroufin.png'
+        - label: 'Sébastien Chopin'
+          suffix: 'atinux'
+          avatar:
+            src: 'https://github.com/atinux.png'
+        - label: 'Romain Hamel'
+          suffix: 'romhml'
+          avatar:
+            src: 'https://github.com/romhml.png'
+        - label: 'Haytham A. Salama'
+          suffix: 'Haythamasalama'
+          avatar:
+            src: 'https://github.com/Haythamasalama.png'
+        - label: 'Daniel Roe'
+          suffix: 'danielroe'
+          avatar:
+            src: 'https://github.com/danielroe.png'
+        - label: 'Neil Richter'
+          suffix: 'noook'
+          avatar:
+            src: 'https://github.com/noook.png'
+  class: 'flex-1'
+---
+::
+
+::framework-only
+#nuxt
+:::tip{to="/getting-started/icons/nuxt#theme"}
+You can customize this icon globally in your `app.config.ts` under `ui.icons.check` key.
+:::
+
+#vue
+:::tip{to="/getting-started/icons/vue#theme"}
+You can customize this icon globally in your `vite.config.ts` under `ui.icons.check` key.
+:::
+::
+
+### Trailing Icon :badge{label="New" 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`.
+
+::component-code
+---
+collapse: true
+prettier: true
+hide:
+  - autofocus
+ignore:
+  - groups
+  - class
+external:
+  - groups
+class: '!p-0'
+props:
+  autofocus: false
+  trailingIcon: 'i-lucide-arrow-right'
+  groups:
+    - id: 'actions'
+      items:
+        - label: 'Share'
+          icon: 'i-lucide-share'
+          children:
+            - label: 'Email'
+              icon: 'i-lucide-mail'
+            - label: 'Copy'
+              icon: 'i-lucide-copy'
+            - label: 'Link'
+              icon: 'i-lucide-link'
+  class: 'flex-1'
+---
+::
+
+::framework-only
+#nuxt
+:::tip{to="/getting-started/icons/nuxt#theme"}
+You can customize this icon globally in your `app.config.ts` under `ui.icons.chevronRight` key.
+:::
+
+#vue
+:::tip{to="/getting-started/icons/vue#theme"}
+You can customize this icon globally in your `vite.config.ts` under `ui.icons.chevronRight` key.
+:::
+::
+
 ### Loading
 
 Use the `loading` prop to show a loading icon on the CommandPalette.
@@ -321,37 +449,6 @@ You can customize this icon globally in your `vite.config.ts` under `ui.icons.lo
 :::
 ::
 
-### Disabled
-
-Use the `disabled` prop to disable the CommandPalette.
-
-::component-code
----
-collapse: true
-hide:
-  - autofocus
-ignore:
-  - groups
-  - class
-external:
-  - groups
-class: '!p-0'
-props:
-  autofocus: false
-  disabled: true
-  groups:
-    - id: 'apps'
-      items:
-        - label: 'Calendar'
-          icon: 'i-lucide-calendar'
-        - label: 'Music'
-          icon: 'i-lucide-music'
-        - label: 'Maps'
-          icon: 'i-lucide-map'
-  class: 'flex-1'
----
-::
-
 ### Close
 
 Use the `close` prop to display a [Button](/components/button) to dismiss the CommandPalette.
@@ -468,6 +565,124 @@ You can customize this icon globally in your `vite.config.ts` under `ui.icons.cl
 :::
 ::
 
+### Back :badge{label="New" class="align-text-top"}
+
+Use the `back` prop to customize or hide the back button (with `false` value) displayed when navigating into a submenu.
+
+You can pass any property from the [Button](/components/button) component to customize it.
+
+::component-code
+---
+collapse: true
+prettier: true
+hide:
+  - autofocus
+ignore:
+  - back.color
+  - groups
+  - class
+external:
+  - groups
+class: '!p-0'
+props:
+  autofocus: false
+  back:
+    color: primary
+  groups:
+    - id: 'actions'
+      items:
+        - label: 'Share'
+          icon: 'i-lucide-share'
+          children:
+            - label: 'Email'
+              icon: 'i-lucide-mail'
+            - label: 'Copy'
+              icon: 'i-lucide-copy'
+            - label: 'Link'
+              icon: 'i-lucide-link'
+  class: 'flex-1'
+---
+::
+
+### Back Icon :badge{label="New" class="align-text-top"}
+
+Use the `back-icon` prop to customize the back button [Icon](/components/icon). Defaults to `i-lucide-arrow-left`.
+
+::component-code
+---
+collapse: true
+hide:
+  - autofocus
+ignore:
+  - class
+  - groups
+  - back
+external:
+  - groups
+class: '!p-0'
+props:
+  autofocus: false
+  back: true
+  backIcon: 'i-lucide-house'
+  groups:
+    - id: 'actions'
+      items:
+        - label: 'Share'
+          icon: 'i-lucide-share'
+          children:
+            - label: 'Email'
+              icon: 'i-lucide-mail'
+            - label: 'Copy'
+              icon: 'i-lucide-copy'
+            - label: 'Link'
+              icon: 'i-lucide-link'
+  class: 'flex-1'
+---
+::
+
+::framework-only
+#nuxt
+:::tip{to="/getting-started/icons/nuxt#theme"}
+You can customize this icon globally in your `app.config.ts` under `ui.icons.arrowLeft` key.
+:::
+
+#vue
+:::tip{to="/getting-started/icons/vue#theme"}
+You can customize this icon globally in your `vite.config.ts` under `ui.icons.arrowLeft` key.
+:::
+::
+
+### Disabled
+
+Use the `disabled` prop to disable the CommandPalette.
+
+::component-code
+---
+collapse: true
+hide:
+  - autofocus
+ignore:
+  - groups
+  - class
+external:
+  - groups
+class: '!p-0'
+props:
+  autofocus: false
+  disabled: true
+  groups:
+    - id: 'apps'
+      items:
+        - label: 'Calendar'
+          icon: 'i-lucide-calendar'
+        - label: 'Music'
+          icon: 'i-lucide-music'
+        - label: 'Maps'
+          icon: 'i-lucide-map'
+  class: 'flex-1'
+---
+::
+
 ## Examples
 
 ### Control selected item(s)
@@ -502,6 +717,28 @@ 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"}
+
+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.
+
+::component-example
+---
+collapse: true
+prettier: true
+name: 'command-palette-items-children-example'
+class: '!p-0'
+props:
+  autofocus: false
+---
+::
+
+::note
+When navigating into a submenu:
+- The search term is reset
+- A back button appears in the input
+- You can go back to the previous group by pressing the :kbd{value="backspace"} key
+::
+
 ### With fetched items
 
 You can fetch items from an API and use them in the CommandPalette.
@@ -658,6 +895,7 @@ You will have access to the following slots:
 
 ::component-example
 ---
+collapse: true
 name: 'command-palette-custom-slot-example'
 class: '!p-0'
 props:

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

@@ -135,7 +135,7 @@ props:
 
 ### Multiple
 
-Use the `multiple` prop to allow multiple selections, the selected items will be displayed as badges.
+Use the `multiple` prop to allow multiple selections, the selected items will be displayed as tags.
 
 ::component-code
 ---
@@ -166,7 +166,7 @@ Ensure to pass an array to the `default-value` prop or the `v-model` directive.
 
 ### Delete Icon
 
-With `multiple`, use the `delete-icon` prop to customize the delete [Icon](/components/icon) in the badges. Defaults to `i-lucide-x`.
+With `multiple`, use the `delete-icon` prop to customize the delete [Icon](/components/icon) in the tags. Defaults to `i-lucide-x`.
 
 ::component-code
 ---
@@ -782,6 +782,14 @@ name: 'input-menu-countries-example'
 
 :component-emits
 
+### Expose
+
+When accessing the component via a template ref, you can use the following:
+
+| Name | Type |
+| ---- | ---- |
+| `inputRef`{lang="ts-type"} | `Ref<InstanceType<typeof ComboboxTrigger> \| null>`{lang="ts-type"} |
+
 ## Theme
 
 :component-theme

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

@@ -1,6 +1,6 @@
 ---
 title: InputNumber
-description: Input numerical values with a customizable range.
+description: An input for numerical values with a customizable range.
 category: form
 links:
   - label: NumberField
@@ -287,8 +287,8 @@ name: 'input-number-slots-example'
 When accessing the component via a template ref, you can use the following:
 
 | Name                       | Type                                            |
-|----------------------------|-------------------------------------------------|
-| `inputRef`{lang="ts-type"} | `Ref<HTMLInputElement \| null>`{lang="ts-type"} |
+| -------------------------- | ----------------------------------------------- |
+| `inputRef`{lang="ts-type"} | `Ref<InstanceType<typeof NumberFieldInput> \| null>`{lang="ts-type"} |
 
 ## Theme
 

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

@@ -0,0 +1,296 @@
+---
+title: InputTags
+description: An input element that displays interactive tags.
+category: form
+links:
+  - label: InputTags
+    icon: i-custom-reka-ui
+    to: https://reka-ui.com/docs/components/tags-input
+  - label: GitHub
+    icon: i-simple-icons-github
+    to: https://github.com/nuxt/ui/tree/v3/src/runtime/components/InputTags.vue
+navigation.badge: New
+---
+
+## Usage
+
+Use the `v-model` directive to control the value of the InputTags.
+
+::component-code
+---
+prettier: true
+ignore:
+  - modelValue
+external:
+  - modelValue
+props:
+  modelValue: ['Vue']
+---
+::
+
+Use the `default-value` prop to set the initial value when you do not need to control its state.
+
+::component-code
+---
+prettier: true
+ignore:
+  - defaultValue
+props:
+  defaultValue: ['Vue']
+---
+::
+
+### Placeholder
+
+Use the `placeholder` prop to set a placeholder text.
+
+::component-code
+---
+props:
+  placeholder: 'Enter tags...'
+---
+::
+
+### 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.
+
+::component-code
+---
+prettier: true
+ignore:
+  - modelValue
+external:
+  - modelValue
+props:
+  modelValue: ['Vue']
+  color: neutral
+  highlight: true
+---
+::
+
+::note
+The `highlight` prop is used here to show the focus state. It's used internally when a validation error occurs.
+::
+
+### Variants
+
+Use the `variant` prop to change the appearance of the InputTags.
+
+::component-code
+---
+prettier: true
+ignore:
+  - modelValue
+external:
+  - modelValue
+props:
+  modelValue: ['Vue']
+  variant: subtle
+  color: neutral
+  highlight: false
+---
+::
+
+### Sizes
+
+Use the `size` prop to adjust the size of the InputTags.
+
+::component-code
+---
+prettier: true
+ignore:
+  - modelValue
+external:
+  - modelValue
+props:
+  modelValue: ['Vue']
+  size: xl
+---
+::
+
+### Icon
+
+Use the `icon` prop to show an [Icon](/components/icon) inside the InputTags.
+
+::component-code
+---
+prettier: true
+ignore:
+  - modelValue
+external:
+  - modelValue
+props:
+  modelValue: ['Vue']
+  icon: 'i-lucide-search'
+  size: md
+  variant: outline
+---
+::
+
+::note
+Use the `leading` and `trailing` props to set the icon position or the `leading-icon` and `trailing-icon` props to set a different icon for each position.
+::
+
+### Avatar
+
+Use the `avatar` prop to show an [Avatar](/components/avatar) inside the InputTags.
+
+::component-code
+---
+prettier: true
+ignore:
+  - modelValue
+external:
+  - modelValue
+props:
+  modelValue: ['Vue']
+  avatar:
+    src: 'https://github.com/vuejs.png'
+  size: md
+  variant: outline
+---
+::
+
+### Delete Icon
+
+Use the `delete-icon` prop to customize the delete [Icon](/components/icon) in the tags. Defaults to `i-lucide-x`.
+
+::component-code
+---
+prettier: true
+ignore:
+  - modelValue
+external:
+  - modelValue
+props:
+  modelValue: ['Vue']
+  deleteIcon: 'i-lucide-trash'
+---
+::
+
+::framework-only
+#nuxt
+:::tip{to="/getting-started/icons/nuxt#theme"}
+You can customize this icon globally in your `app.config.ts` under `ui.icons.close` key.
+:::
+
+#vue
+:::tip{to="/getting-started/icons/vue#theme"}
+You can customize this icon globally in your `vite.config.ts` under `ui.icons.close` key.
+:::
+::
+
+### Loading
+
+Use the `loading` prop to show a loading icon on the InputTags.
+
+::component-code
+---
+prettier: true
+ignore:
+  - modelValue
+external:
+  - modelValue
+props:
+  modelValue: ['Vue']
+  loading: true
+  trailing: false
+---
+::
+
+### Loading Icon
+
+Use the `loading-icon` prop to customize the loading icon. Defaults to `i-lucide-loader-circle`.
+
+::component-code
+---
+prettier: true
+ignore:
+  - modelValue
+external:
+  - modelValue
+props:
+  modelValue: ['Vue']
+  loading: true
+  loadingIcon: 'i-lucide-loader'
+---
+::
+
+::framework-only
+#nuxt
+:::tip{to="/getting-started/icons/nuxt#theme"}
+You can customize this icon globally in your `app.config.ts` under `ui.icons.loading` key.
+:::
+
+#vue
+:::tip{to="/getting-started/icons/vue#theme"}
+You can customize this icon globally in your `vite.config.ts` under `ui.icons.loading` key.
+:::
+::
+
+### Disabled
+
+Use the `disabled` prop to disable the InputTags.
+
+::component-code
+---
+prettier: true
+ignore:
+  - modelValue
+external:
+  - modelValue
+props:
+  modelValue: ['Vue']
+  disabled: true
+---
+::
+
+## Examples
+
+### Within a FormField
+
+You can use the InputTags within a [FormField](/components/form-field) component to display a label, help text, required indicator, etc.
+
+::component-example
+---
+name: 'input-tags-form-field-example'
+---
+::
+
+## API
+
+### Props
+
+:component-props
+
+### Slots
+
+:component-slots
+
+### Emits
+
+:component-emits
+
+### Expose
+
+When accessing the component via a template ref, you can use the following:
+
+| Name                       | Type                                            |
+| -------------------------- | ----------------------------------------------- |
+| `inputRef`{lang="ts-type"} | `Ref<InstanceType<typeof TagsInputInput> \| null>`{lang="ts-type"} |
+
+## Theme
+
+:component-theme

docs/content/3.components/input.md

@@ -278,6 +278,16 @@ name: 'input-kbd-example'
 This example uses the `defineShortcuts` composable to focus the Input when the :kbd{value="/"} key is pressed.
 ::
 
+### With mask
+
+There's no built-in support for masks, but you can use libraries like [maska](https://github.com/beholdr/maska) to mask the Input.
+
+::component-example
+---
+name: 'input-mask-example'
+---
+::
+
 ### With floating label
 
 You can use the `#default` slot to add a floating label to the Input.

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 :badge{label="New" class="align-text-top"}
+### With tooltip in items
 
 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 :badge{label="New" class="align-text-top"}
+### With popover in items
 
 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.
 

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

@@ -180,6 +180,8 @@ props:
 
 :component-emits
 
+### Expose
+
 When accessing the component via a template ref, you can use the following:
 
 | Name | Type |

docs/content/3.components/popover.md

@@ -202,7 +202,17 @@ name: 'popover-command-palette-example'
 ---
 ::
 
-### With anchor slot :badge{label="New" class="align-text-top"}
+### 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
 
 You can use the `#anchor` slot to position the Popover against a custom element.
 

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

@@ -159,7 +159,7 @@ props:
 ---
 ::
 
-### Variant :badge{label="New" class="align-text-top"}
+### Variant
 
 Use the `variant` prop to change the variant of the RadioGroup.
 
@@ -240,7 +240,7 @@ props:
 ---
 ::
 
-### Indicator :badge{label="New" class="align-text-top"}
+### Indicator
 
 Use the `indicator` prop to change the position or hide the indicator. Defaults to `start`.
 

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

@@ -815,6 +815,14 @@ name: 'select-menu-countries-example'
 
 :component-emits
 
+### Expose
+
+When accessing the component via a template ref, you can use the following:
+
+| Name | Type |
+| ---- | ---- |
+| `triggerRef`{lang="ts-type"} | `Ref<InstanceType<typeof ComboboxTrigger> \| null>`{lang="ts-type"} |
+
 ## Theme
 
 :component-theme

docs/content/3.components/select.md

@@ -709,6 +709,14 @@ collapse: true
 
 :component-emits
 
+### Expose
+
+When accessing the component via a template ref, you can use the following:
+
+| Name | Type |
+| ---- | ---- |
+| `triggerRef`{lang="ts-type"} | `Ref<InstanceType<typeof SelectTrigger> \| null>`{lang="ts-type"} |
+
 ## Theme
 
 :component-theme

docs/content/3.components/slider.md

@@ -136,7 +136,7 @@ props:
 ---
 ::
 
-### Tooltip :badge{label="New" class="align-text-top"}
+### Tooltip
 
 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.
 

docs/content/3.components/table.md

@@ -77,6 +77,7 @@ 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`:
@@ -161,7 +162,7 @@ props:
 
 ### Sticky
 
-Use the `sticky` prop to make the header sticky.
+Use the `sticky` prop to make the header or footer sticky.
 
 ::component-code
 ---
@@ -172,6 +173,10 @@ ignore:
   - class
 external:
   - data
+items:
+  sticky:
+    - true
+    - false
 props:
   sticky: true
   data:
@@ -266,8 +271,8 @@ You can group rows based on a given column value and show/hide sub rows via some
 
 #### Important parts:
 
-* 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.
+* 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.
 * 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.
@@ -304,19 +309,19 @@ 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 `@select` event
+### With row select event
 
-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.
+You can add a `@select` listener to make rows clickable with or without a checkbox column.
 
 ::note
-You can use this to navigate to a page, open a modal or even to select the row manually.
+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-selection-event-example'
+name: 'table-row-select-event-example'
 highlights:
   - 123
   - 130
@@ -324,6 +329,70 @@ 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'
+highlights:
+  - 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'
+---
+::
+
 ### With column sorting
 
 You can update a column `header` to render a [Button](/components/button) component inside the `header` to toggle the sorting state using the TanStack Table [Sorting APIs](https://tanstack.com/table/latest/docs/api/features/sorting).

docs/content/3.components/tabs.md

@@ -242,6 +242,14 @@ You will have access to the following slots:
 
 :component-emits
 
+### Expose
+
+When accessing the component via a template ref, you can use the following:
+
+| Name | Type |
+| ---- | ---- |
+| `triggersRef`{lang="ts-type"} | `Ref<ComponentPublicInstance[]>`{lang="ts-type"} |
+
 ## Theme
 
 :component-theme

docs/content/3.components/textarea.md

@@ -124,7 +124,7 @@ props:
 ---
 ::
 
-### Icon :badge{label="New" class="align-text-top"}
+### Icon
 
 Use the `icon` prop to show an [Icon](/components/icon) inside the Textarea.
 
@@ -157,7 +157,7 @@ props:
 ---
 ::
 
-### Avatar :badge{label="New" class="align-text-top"}
+### Avatar
 
 Use the `avatar` prop to show an [Avatar](/components/avatar) inside the Textarea.
 
@@ -176,7 +176,7 @@ props:
 ---
 ::
 
-### Loading :badge{label="New" class="align-text-top"}
+### Loading
 
 Use the `loading` prop to show a loading icon on the Textarea.
 
@@ -192,7 +192,7 @@ props:
 ---
 ::
 
-### Loading Icon :badge{label="New" class="align-text-top"}
+### Loading Icon
 
 Use the `loading-icon` prop to customize the loading icon. Defaults to `i-lucide-loader-circle`.
 

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: Soon
+navigation.badge: New
 ---
 
 ## Usage
@@ -23,7 +23,7 @@ Use the `items` prop as an array of objects with the following properties:
 - `value?: string | number`{lang="ts-type"}
 - [`slot?: string`{lang="ts-type"}](#with-custom-slot)
 - `class?: any`{lang="ts-type"}
-- `ui?: { item?: ClassNameValue, container?: ClassNameValue, indicator?: ClassNameValue, separator?: ClassNameValue, wrapper?: ClassNameValue, separator?: ClassNameValue, date?: ClassNameValue, title?: ClassNameValue, description?: ClassNameValue }`{lang="ts-type"}
+- `ui?: { item?: ClassNameValue, container?: ClassNameValue, indicator?: ClassNameValue, separator?: ClassNameValue, wrapper?: ClassNameValue, date?: ClassNameValue, title?: ClassNameValue, description?: ClassNameValue }`{lang="ts-type"}
 
 ::component-code
 ---
@@ -169,6 +169,47 @@ props:
       description: 'QA testing and performance optimization.'
       icon: 'i-lucide-check-circle'
   class: 'w-full'
+class: 'overflow-x-auto'
+---
+::
+
+### Reverse
+
+Use the reverse prop to reverse the direction of the Timeline.
+
+::component-code
+---
+ignore:
+  - items
+  - class
+  - defaultValue
+external:
+  - items
+externalTypes:
+  - TimelineItem[]
+props:
+  reverse: true
+  modelValue: 2
+  orientation: 'vertical'
+  items:
+    - date: 'Mar 15, 2025'
+      title: 'Project Kickoff'
+      description: 'Kicked off the project with team alignment.'
+      icon: 'i-lucide-rocket'
+    - date: 'Mar 22 2025'
+      title: 'Design Phase'
+      description: 'User research and design workshops.'
+      icon: 'i-lucide-palette'
+    - date: 'Mar 29 2025'
+      title: 'Development Sprint'
+      description: 'Frontend and backend development.'
+      icon: 'i-lucide-code'
+    - date: 'Apr 5 2025'
+      title: 'Testing & Deployment'
+      description: 'QA testing and performance optimization.'
+      icon: 'i-lucide-check-circle'
+  class: 'w-full'
+class: 'overflow-x-auto'
 ---
 ::
 

docs/content/3.components/tooltip.md

@@ -186,6 +186,16 @@ 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

docs/modules/showcase.ts

@@ -33,7 +33,7 @@ export default defineNuxtModule((_, nuxt) => {
       }
 
       const name = template.name.toLowerCase().replace(/\s/g, '-')
-      const filename = join(process.cwd(), 'docs/public/assets/showcase', `${name}.png`)
+      const filename = join(nuxt.options.rootDir, 'public/assets/showcase', `${name}.png`)
 
       if (existsSync(filename)) {
         continue

docs/package.json

@@ -2,41 +2,49 @@
   "private": true,
   "name": "@nuxt/ui-docs",
   "type": "module",
+  "scripts": {
+    "dev": "nuxt dev",
+    "build": "nuxt build",
+    "generate": "nuxt generate",
+    "typecheck": "nuxt typecheck"
+  },
   "dependencies": {
     "@ai-sdk/vue": "^1.2.12",
     "@iconify-json/logos": "^1.2.4",
-    "@iconify-json/lucide": "^1.2.44",
-    "@iconify-json/simple-icons": "^1.2.35",
-    "@iconify-json/vscode-icons": "^1.2.21",
-    "@nuxt/content": "^3.5.1",
+    "@iconify-json/lucide": "^1.2.56",
+    "@iconify-json/simple-icons": "^1.2.42",
+    "@iconify-json/vscode-icons": "^1.2.23",
+    "@nuxt/content": "^3.6.3",
     "@nuxt/image": "^1.10.0",
-    "@nuxt/ui": "latest",
-    "@nuxt/ui-pro": "https://pkg.pr.new/@nuxt/ui-pro@f06b49c",
-    "@nuxthub/core": "^0.8.27",
+    "@nuxt/ui": "workspace:*",
+    "@nuxt/ui-pro": "https://pkg.pr.new/@nuxt/ui-pro@22fdc5e",
+    "@nuxthub/core": "^0.9.0",
     "@nuxtjs/plausible": "^1.2.0",
     "@octokit/rest": "^22.0.0",
     "@rollup/plugin-yaml": "^4.1.2",
-    "@vueuse/integrations": "^13.2.0",
-    "@vueuse/nuxt": "^13.2.0",
+    "@vueuse/integrations": "^13.5.0",
+    "@vueuse/nuxt": "^13.5.0",
     "ai": "^4.3.16",
+    "better-sqlite3": "^12.2.0",
     "capture-website": "^4.2.0",
     "joi": "^17.13.3",
-    "motion-v": "^1.1.1",
-    "nuxt": "^3.17.4",
-    "nuxt-component-meta": "^0.11.0",
-    "nuxt-llms": "^0.1.2",
-    "nuxt-og-image": "^5.1.4",
-    "prettier": "^3.5.3",
+    "maska": "^3.2.0",
+    "motion-v": "^1.5.0",
+    "nuxt": "^3.17.6",
+    "nuxt-component-meta": "^0.12.1",
+    "nuxt-llms": "^0.1.3",
+    "nuxt-og-image": "^5.1.9",
+    "prettier": "^3.6.2",
     "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.5.2",
+    "workers-ai-provider": "^0.7.1",
     "yup": "^1.6.1",
-    "zod": "^3.25.28"
+    "zod": "^3.25.75"
   },
   "devDependencies": {
-    "wrangler": "^4.16.1"
+    "wrangler": "^4.23.0"
   }
 }

docs/server/plugins/llms.ts

@@ -1,412 +1,8 @@
-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) => {
-    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`)
-    })
+    transformMDC(doc as any)
   })
 })

docs/server/routes/raw/[...slug].md.get.ts

@@ -0,0 +1,30 @@
+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' })
+})

docs/server/utils/transformMDC.ts

@@ -0,0 +1,410 @@
+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
+}

package.json

@@ -1,8 +1,8 @@
 {
   "name": "@nuxt/ui",
   "description": "A UI Library for Modern Web Apps, powered by Vue & Tailwind CSS.",
-  "version": "3.1.3",
-  "packageManager": "pnpm@10.11.0",
+  "version": "3.2.0",
+  "packageManager": "pnpm@10.12.4",
   "repository": {
     "type": "git",
     "url": "git+https://github.com/nuxt/ui.git"
@@ -96,38 +96,37 @@
   "scripts": {
     "build": "nuxt-module-build build",
     "prepack": "pnpm build",
-    "dev": "nuxi dev playground --uiDev",
-    "dev:build": "nuxi build playground",
-    "dev:vue": "vite playground-vue -- --uiDev",
-    "dev:vue:build": "vite build playground-vue",
-    "dev:prepare": "nuxt-module-build build --stub && nuxt-module-build prepare && nuxi prepare playground && nuxi prepare docs && vite build playground-vue",
-    "docs": "nuxi dev docs --uiDev",
-    "docs:build": "nuxi build docs",
-    "docs:prepare": "nuxt-component-meta docs",
+    "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",
+    "docs": "nuxt dev docs --uiDev",
+    "docs:build": "nuxt build docs",
     "lint": "eslint .",
     "lint:fix": "eslint . --fix",
-    "typecheck": "vue-tsc --noEmit && nuxi typecheck playground && nuxi typecheck docs && cd playground-vue && vue-tsc --noEmit",
+    "typecheck": "vue-tsc --noEmit && nuxt typecheck playground && nuxt typecheck docs && cd playground-vue && vue-tsc --noEmit",
     "test": "vitest",
     "test:vue": "vitest -c vitest.vue.config.ts",
     "release": "release-it"
   },
   "dependencies": {
     "@iconify/vue": "^5.0.0",
-    "@internationalized/date": "^3.8.1",
-    "@internationalized/number": "^3.6.2",
+    "@internationalized/date": "^3.8.2",
+    "@internationalized/number": "^3.6.3",
     "@nuxt/fonts": "^0.11.4",
-    "@nuxt/icon": "^1.13.0",
-    "@nuxt/kit": "^3.17.4",
-    "@nuxt/schema": "^3.17.4",
+    "@nuxt/icon": "^1.15.0",
+    "@nuxt/kit": "^3.17.6",
+    "@nuxt/schema": "^3.17.6",
     "@nuxtjs/color-mode": "^3.5.2",
     "@standard-schema/spec": "^1.0.0",
-    "@tailwindcss/postcss": "^4.1.7",
-    "@tailwindcss/vite": "^4.1.7",
+    "@tailwindcss/postcss": "^4.1.11",
+    "@tailwindcss/vite": "^4.1.11",
     "@tanstack/vue-table": "^8.21.3",
-    "@unhead/vue": "^2.0.10",
-    "@vueuse/core": "^13.2.0",
-    "@vueuse/integrations": "^13.2.0",
-    "colortranslator": "^4.1.0",
+    "@unhead/vue": "^2.0.12",
+    "@vueuse/core": "^13.5.0",
+    "@vueuse/integrations": "^13.5.0",
+    "colortranslator": "^5.0.0",
     "consola": "^3.4.2",
     "defu": "^6.1.4",
     "embla-carousel-auto-height": "^8.6.0",
@@ -144,31 +143,31 @@
     "mlly": "^1.7.4",
     "ohash": "^2.0.11",
     "pathe": "^2.0.3",
-    "reka-ui": "^2.3.0",
+    "reka-ui": "2.3.2",
     "scule": "^1.3.0",
     "tailwind-variants": "^1.0.0",
-    "tailwindcss": "^4.1.7",
+    "tailwindcss": "^4.1.11",
     "tinyglobby": "^0.2.14",
-    "unplugin": "^2.3.4",
+    "unplugin": "^2.3.5",
     "unplugin-auto-import": "^19.3.0",
-    "unplugin-vue-components": "^28.7.0",
-    "vaul-vue": "^0.4.1",
-    "vue-component-type-helpers": "^2.2.10"
+    "unplugin-vue-components": "^28.8.0",
+    "vaul-vue": "0.4.1",
+    "vue-component-type-helpers": "^3.0.1"
   },
   "devDependencies": {
-    "@nuxt/eslint-config": "^1.4.1",
+    "@nuxt/eslint-config": "^1.5.2",
     "@nuxt/module-builder": "^1.0.1",
-    "@nuxt/test-utils": "^3.19.1",
+    "@nuxt/test-utils": "^3.19.2",
     "@release-it/conventional-changelog": "^10.0.1",
     "@vue/test-utils": "^2.4.6",
     "embla-carousel": "^8.6.0",
-    "eslint": "^9.27.0",
-    "happy-dom": "^17.4.7",
-    "nuxt": "^3.17.4",
-    "release-it": "^19.0.2",
-    "vitest": "^3.1.4",
+    "eslint": "^9.30.1",
+    "happy-dom": "^18.0.1",
+    "nuxt": "^3.17.6",
+    "release-it": "^19.0.3",
+    "vitest": "^3.2.4",
     "vitest-environment-nuxt": "^1.0.1",
-    "vue-tsc": "^2.2.10"
+    "vue-tsc": "^3.0.1"
   },
   "peerDependencies": {
     "@inertiajs/vue3": "^2.0.7",
@@ -209,7 +208,7 @@
     "debug": "4.3.7",
     "rollup": "4.34.9",
     "unimport": "4.1.1",
-    "unplugin": "^2.3.4"
+    "unplugin": "^2.3.5"
   },
   "pnpm": {
     "onlyBuiltDependencies": [

playground-vue/package.json

@@ -10,15 +10,15 @@
     "typecheck": "vue-tsc -p ./tsconfig.app.json"
   },
   "dependencies": {
-    "@nuxt/ui": "latest",
-    "vue": "^3.5.15",
+    "@nuxt/ui": "workspace:*",
+    "vue": "^3.5.17",
     "vue-router": "^4.5.1",
-    "zod": "^3.25.28"
+    "zod": "^3.25.75"
   },
   "devDependencies": {
     "@vitejs/plugin-vue": "^5.2.4",
     "typescript": "^5.8.3",
     "vite": "^6.3.5",
-    "vue-tsc": "^2.2.10"
+    "vue-tsc": "^3.0.1"
   }
 }

playground-vue/src/app.vue

@@ -40,6 +40,7 @@ const components = [
   'input',
   'input-menu',
   'input-number',
+  'input-tags',
   'kbd',
   'link',
   'modal',

playground/app/app.vue

@@ -40,6 +40,7 @@ const components = [
   'input',
   'input-menu',
   'input-number',
+  'input-tags',
   'kbd',
   'link',
   'modal',

playground/app/pages/components/command-palette.vue

@@ -10,8 +10,9 @@ const open = ref(false)
 const searchTerm = ref('')
 // const searchTermDebounced = refDebounced(searchTerm, 200)
 const selected = ref([])
+const commandPalette = useTemplateRef('commandPalette')
 
-const { data: users, status } = await useFetch('https://jsonplaceholder.typicode.com/users', {
+const { data: _users, status } = await useFetch('https://jsonplaceholder.typicode.com/users', {
   // params: { q: searchTermDebounced },
   transform: (data: User[]) => {
     return data?.map(user => ({ id: user.id, label: user.name, suffix: user.email, avatar: { src: `https://i.pravatar.cc/120?img=${user.id}` } })) || []
@@ -22,10 +23,6 @@ const { data: users, status } = await useFetch('https://jsonplaceholder.typicode
 const loading = ref(false)
 
 const groups = computed(() => [{
-  id: 'users',
-  label: searchTerm.value ? `Users matching “${searchTerm.value}”...` : 'Users',
-  items: users.value || []
-}, {
   id: 'actions',
   items: [{
     label: 'Add new file',
@@ -74,6 +71,57 @@ const groups = computed(() => [{
       toast.add({ title: 'Label added!' })
     },
     kbds: ['meta', 'L']
+  }, {
+    label: 'Set Wallpaper',
+    suffix: 'Choose from beautiful wallpaper collection.',
+    icon: 'i-lucide-image',
+    view: 'wallpaper',
+    placeholder: 'Search wallpapers...'
+  }, {
+    label: 'More actions',
+    placeholder: 'Search actions...',
+    children: [{
+      label: 'Create new file',
+      suffix: 'Create a new file in the current directory or workspace.',
+      icon: 'i-lucide-file-plus',
+      onSelect(e: Event) {
+        e.preventDefault()
+
+        toast.add({ title: 'New file added!' })
+      }
+    }, {
+      label: 'Create new folder',
+      suffix: 'Create a new folder in the current directory or workspace.',
+      icon: 'i-lucide-folder-plus',
+      onSelect(e: Event) {
+        e.preventDefault()
+
+        toast.add({ title: 'New folder added!' })
+      }
+    }, {
+      label: 'Share',
+      placeholder: 'Search share options...',
+      icon: 'i-lucide-share',
+      children: [{
+        label: 'Share with everyone',
+        suffix: 'Share with everyone in the current directory or workspace.',
+        icon: 'i-lucide-share',
+        onSelect(e: Event) {
+          e.preventDefault()
+
+          toast.add({ title: 'Shared with everyone!' })
+        }
+      }, {
+        label: 'Share with team',
+        suffix: 'Share with the team in the current directory or workspace.',
+        icon: 'i-lucide-users',
+        onSelect(e: Event) {
+          e.preventDefault()
+
+          toast.add({ title: 'Shared with team!' })
+        }
+      }]
+    }]
   }]
 }])
 
@@ -95,6 +143,116 @@ const labels = [{
 }]
 const label = ref()
 
+const wallpapers = [
+  {
+    id: 1,
+    name: 'red_distortion_1',
+    gradient: 'from-red-500 via-orange-500 to-pink-500',
+    category: 'Abstract',
+    featured: true
+  },
+  {
+    id: 2,
+    name: 'blue_distortion_1',
+    gradient: 'from-blue-600 via-purple-600 to-indigo-600',
+    category: 'Abstract',
+    featured: true
+  },
+  {
+    id: 3,
+    name: 'mono_dark_distortion_1',
+    gradient: 'from-gray-900 via-gray-700 to-gray-800',
+    category: 'Monochrome',
+    featured: false
+  },
+  {
+    id: 4,
+    name: 'chromatic_dark_1',
+    gradient: 'from-emerald-600 via-teal-600 to-cyan-600',
+    category: 'Chromatic',
+    featured: true
+  },
+  {
+    id: 5,
+    name: 'red_distortion_2',
+    gradient: 'from-rose-600 via-red-600 to-orange-600',
+    category: 'Abstract',
+    featured: false
+  },
+  {
+    id: 6,
+    name: 'purple_cosmic_1',
+    gradient: 'from-violet-700 via-purple-700 to-fuchsia-700',
+    category: 'Cosmic',
+    featured: true
+  },
+  {
+    id: 7,
+    name: 'golden_sunset_1',
+    gradient: 'from-yellow-500 via-orange-500 to-red-500',
+    category: 'Nature',
+    featured: false
+  },
+  {
+    id: 8,
+    name: 'ocean_deep_1',
+    gradient: 'from-blue-800 via-blue-900 to-indigo-900',
+    category: 'Nature',
+    featured: true
+  },
+  {
+    id: 9,
+    name: 'mono_light_distortion_1',
+    gradient: 'from-gray-200 via-gray-300 to-gray-400',
+    category: 'Monochrome',
+    featured: false
+  },
+  {
+    id: 10,
+    name: 'green_matrix_1',
+    gradient: 'from-green-800 via-emerald-700 to-teal-700',
+    category: 'Chromatic',
+    featured: false
+  },
+  {
+    id: 11,
+    name: 'pink_dreams_1',
+    gradient: 'from-pink-500 via-rose-500 to-purple-500',
+    category: 'Abstract',
+    featured: true
+  },
+  {
+    id: 12,
+    name: 'midnight_blue_1',
+    gradient: 'from-slate-900 via-blue-900 to-indigo-900',
+    category: 'Nature',
+    featured: false
+  }
+]
+
+const filteredWallpapers = computed(() => {
+  let filtered = wallpapers
+
+  // Filter by search term
+  if (searchTerm.value.trim()) {
+    const search = searchTerm.value.toLowerCase()
+    filtered = filtered.filter(w =>
+      w.name.toLowerCase().includes(search)
+      || w.category.toLowerCase().includes(search)
+    )
+  }
+
+  return filtered
+})
+
+function setWallpaper(wallpaper: any) {
+  toast.add({
+    title: `Wallpaper set to ${wallpaper.name}!`,
+    description: 'Your desktop wallpaper has been updated.',
+    icon: 'i-lucide-image'
+  })
+}
+
 // function onSelect(item: typeof groups.value[number]['items'][number]) {
 function onSelect(item: any) {
   console.log('Selected', item)
@@ -102,6 +260,12 @@ function onSelect(item: any) {
 
 defineShortcuts({
   meta_k: () => open.value = !open.value,
+  meta_shift_a: {
+    usingInput: true,
+    handler: () => {
+      commandPalette.value?.openView('askAI')
+    }
+  },
   ...extractShortcuts(groups.value)
 })
 </script>
@@ -109,6 +273,7 @@ defineShortcuts({
 <template>
   <DefineTemplate>
     <UCommandPalette
+      ref="commandPalette"
       v-model="selected"
       v-model:search-term="searchTerm"
       :loading="status === 'pending'"
@@ -121,7 +286,51 @@ defineShortcuts({
       multiple
       class="sm:max-h-80"
       @update:model-value="onSelect"
-    />
+    >
+      <template #wallpaper>
+        <div class="flex-1 overflow-y-auto p-6">
+          <div class="grid grid-cols-4 gap-4">
+            <div
+              v-for="wallpaper in filteredWallpapers"
+              :key="wallpaper.id"
+              class="group relative cursor-pointer"
+              @click="setWallpaper(wallpaper)"
+            >
+              <div
+                class="aspect-video rounded-lg bg-gradient-to-br shadow-lg ring-1 ring-black/5"
+                :class="wallpaper.gradient"
+              />
+              <div class="mt-2 px-1">
+                <div class="flex items-center gap-2">
+                  <h3 class="text-sm font-medium text-highlighted truncate">
+                    {{ wallpaper.name }}
+                  </h3>
+                  <UChip
+                    v-if="wallpaper.featured"
+                    label="★"
+                    size="xs"
+                    color="primary"
+                    class="shrink-0"
+                  />
+                </div>
+                <p class="text-xs text-dimmed">
+                  {{ wallpaper.category }}
+                </p>
+              </div>
+            </div>
+          </div>
+        </div>
+      </template>
+
+      <template #askAI>
+        <div class="flex flex-col items-center justify-center gap-4 p-6">
+          <UIcon name="i-lucide-sparkles" class="size-8 text-primary" />
+          <span class="text-lg font-semibold text-highlighted">
+            Ask me anything...
+          </span>
+        </div>
+      </template>
+    </UCommandPalette>
   </DefineTemplate>
 
   <div class="flex-1 flex flex-col gap-12 w-full max-w-lg">

playground/app/pages/components/input-menu.vue

@@ -145,5 +145,18 @@ const { data: users, status } = await useFetch('https://jsonplaceholder.typicode
         class="w-48"
       />
     </div>
+    <div class="flex items-center gap-4">
+      <UInputMenu
+        v-for="variant in variants"
+        :key="variant"
+        :items="items"
+        :model-value="[fruits[0]!]"
+        multiple
+        icon="i-lucide-search"
+        placeholder="Search..."
+        :variant="variant"
+        class="w-48"
+      />
+    </div>
   </div>
 </template>

playground/app/pages/components/input-tags.vue

@@ -0,0 +1,87 @@
+<script setup lang="ts">
+import { upperFirst } from 'scule'
+import theme from '#build/ui/input-tags'
+
+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 tags = ref(['Vue', 'Nuxt'])
+</script>
+
+<template>
+  <div class="flex flex-col items-center gap-4">
+    <div class="flex flex-col gap-4 w-48">
+      <UInputTags
+        v-model="tags"
+        placeholder="Enter tags..."
+        autofocus
+      />
+    </div>
+    <div class="flex items-center gap-2">
+      <UInputTags
+        v-for="variant in variants"
+        :key="variant"
+        :placeholder="upperFirst(variant)"
+        :variant="variant"
+        class="w-48"
+      />
+    </div>
+    <div class="flex items-center gap-2">
+      <UInputTags
+        v-for="variant in variants"
+        :key="variant"
+        :placeholder="upperFirst(variant)"
+        :variant="variant"
+        color="neutral"
+        class="w-48"
+      />
+    </div>
+    <div class="flex items-center gap-2">
+      <UInputTags
+        v-for="variant in variants"
+        :key="variant"
+        :placeholder="upperFirst(variant)"
+        :variant="variant"
+        color="error"
+        highlight
+        class="w-48"
+      />
+    </div>
+    <div class="flex flex-col gap-4 w-48">
+      <UInputTags placeholder="Disabled" disabled />
+      <UInputTags placeholder="Required" required />
+      <UInputTags loading placeholder="Loading..." />
+      <UInputTags loading trailing placeholder="Loading..." />
+    </div>
+    <div class="flex items-center gap-4">
+      <UInputTags
+        v-for="size in sizes"
+        :key="size"
+        :size="size"
+        :placeholder="upperFirst(size)"
+        class="w-48"
+      />
+    </div>
+    <div class="flex items-center gap-4">
+      <UInputTags
+        v-for="size in sizes"
+        :key="size"
+        icon="i-lucide-search"
+        placeholder="Search..."
+        :size="size"
+        class="w-48"
+      />
+    </div>
+    <div class="flex items-center gap-4">
+      <UInputTags
+        v-for="size in sizes"
+        :key="size"
+        icon="i-lucide-search"
+        trailing
+        placeholder="Search..."
+        :size="size"
+        class="w-48"
+      />
+    </div>
+  </div>
+</template>

playground/app/pages/components/table.vue

@@ -3,6 +3,7 @@ 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')
@@ -10,6 +11,7 @@ const UBadge = resolveComponent('UBadge')
 const UDropdownMenu = resolveComponent('UDropdownMenu')
 
 const toast = useToast()
+const { copy } = useClipboard()
 
 type Payment = {
   id: string
@@ -145,6 +147,35 @@ 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, {
@@ -211,6 +242,16 @@ 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'))
 
@@ -225,38 +266,11 @@ 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,
+      'items': getRowItems(row),
       'aria-label': 'Actions dropdown'
     }, () => h(UButton, {
       'icon': 'i-lucide-ellipsis-vertical',
@@ -294,8 +308,41 @@ function randomize() {
   data.value = data.value.sort(() => Math.random() - 0.5)
 }
 
+const rowSelection = ref<Record<string, boolean>>({})
+
 function onSelect(row: TableRow<Payment>) {
-  console.log(row)
+  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
 }
 
 onMounted(() => {
@@ -342,27 +389,44 @@ onMounted(() => {
       </UDropdownMenu>
     </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>
+    <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>
       </template>
-    </UTable>
+    </UPopover>
 
     <div class="flex items-center justify-between gap-3">
       <div class="text-sm text-muted">

playground/app/pages/components/timeline.vue

@@ -9,6 +9,7 @@ const orientations = Object.keys(theme.variants.orientation)
 const orientation = ref('vertical' as const)
 const color = ref('primary' as const)
 const size = ref('md' as const)
+const reverse = ref(false)
 
 const items = [{
   date: 'Mar 15, 2025',
@@ -46,6 +47,7 @@ const value = ref('kickoff')
       <USelect v-model="orientation" :items="orientations" placeholder="Orientation" />
       <USelect v-model="size" :items="sizes" placeholder="Size" />
       <USelect v-model="value" :items="items.map(item => item.value)" placeholder="Value" />
+      <USelect v-model="reverse" :items="[true, false]" placeholder="Reverse" />
     </div>
 
     <UTimeline
@@ -54,6 +56,7 @@ const value = ref('kickoff')
       :orientation="orientation"
       :size="size"
       :items="items"
+      :reverse="reverse"
       class="data-[orientation=horizontal]:w-full data-[orientation=vertical]:w-96"
     />
   </div>

playground/package.json

@@ -3,22 +3,23 @@
   "name": "@nuxt/ui-playground",
   "type": "module",
   "scripts": {
-    "dev": "nuxi dev",
-    "build": "nuxi build",
-    "generate": "nuxi generate",
+    "dev": "nuxt dev",
+    "build": "nuxt build",
+    "generate": "nuxt generate",
     "typecheck": "nuxt typecheck"
   },
   "dependencies": {
-    "@iconify-json/lucide": "^1.2.44",
-    "@iconify-json/simple-icons": "^1.2.35",
-    "@nuxt/ui": "latest",
-    "@nuxthub/core": "^0.8.27",
-    "nuxt": "^3.17.4",
-    "zod": "^3.25.28"
+    "@iconify-json/lucide": "^1.2.56",
+    "@iconify-json/simple-icons": "^1.2.42",
+    "@internationalized/date": "^3.8.2",
+    "@nuxt/ui": "workspace:*",
+    "@nuxthub/core": "^0.9.0",
+    "nuxt": "^3.17.6",
+    "zod": "^3.25.75"
   },
   "devDependencies": {
     "typescript": "^5.8.3",
-    "vue-tsc": "^2.2.10"
+    "vue-tsc": "^3.0.1"
   },
   "resolutions": {
     "unimport": "4.1.1"

renovate.json

@@ -19,7 +19,14 @@
   }, {
     "groupName": "reka-ui",
     "matchPackageNames": [
-      "reka-ui"
+      "reka-ui",
+      "vaul-vue"
+    ]
+  }, {
+    "groupName": "vue-tsc",
+    "matchPackageNames": [
+      "vue-tsc",
+      "vue-component-type-helpers"
     ]
   }, {
     "matchDepTypes": ["peerDependencies"],

src/plugins/components.ts

@@ -11,7 +11,7 @@ import { defu } from 'defu'
 /**
  * This plugin adds all the Nuxt UI components as auto-imports.
  */
-export default function ComponentImportPlugin(options: NuxtUIOptions & { prefix: NonNullable<NuxtUIOptions['prefix']> }, meta: UnpluginContextMeta) {
+export default function ComponentImportPlugin(options: NuxtUIOptions & { prefix: NonNullable<NuxtUIOptions['prefix']>, extraRuntimeDir?: string }, meta: UnpluginContextMeta) {
   const components = globSync('**/*.vue', { cwd: join(runtimeDir, 'components') })
   const componentNames = new Set(components.map(c => `${options.prefix}${c.replace(/\.vue$/, '')}`))
 
@@ -50,13 +50,15 @@ export default function ComponentImportPlugin(options: NuxtUIOptions & { prefix:
       name: 'nuxt:ui:components',
       enforce: 'pre',
       resolveId(id, importer) {
-        // only apply to runtime nuxt ui components
-        if (!importer || !normalize(importer).includes(runtimeDir)) {
+        if (!importer) {
+          return
+        }
+        if (!normalize(importer).includes(runtimeDir) && (!options.extraRuntimeDir || !normalize(importer).includes(options.extraRuntimeDir))) {
           return
         }
 
-        // only apply to relative imports
-        if (!RELATIVE_IMPORT_RE.test(id)) {
+        // only apply to relative imports or nuxt ui runtime components
+        if (!RELATIVE_IMPORT_RE.test(id) && !id.startsWith('@nuxt/ui/components/')) {
           return
         }
 

src/plugins/nuxt-environment.ts

@@ -3,7 +3,8 @@ import { normalize } from 'pathe'
 import { resolvePathSync } from 'mlly'
 import MagicString from 'magic-string'
 
-import { runtimeDir, type NuxtUIOptions } from '../unplugin'
+import { runtimeDir } from '../unplugin'
+import type { NuxtUIOptions } from '../unplugin'
 
 /**
  * This plugin normalises Nuxt environment (#imports) and `import.meta.client` within the Nuxt UI components.

src/plugins/plugins.ts

@@ -4,7 +4,8 @@ import { genSafeVariableName } from 'knitwork'
 import MagicString from 'magic-string'
 import { resolvePathSync } from 'mlly'
 
-import { runtimeDir, type NuxtUIOptions } from '../unplugin'
+import { runtimeDir } from '../unplugin'
+import type { NuxtUIOptions } from '../unplugin'
 
 import type { UnpluginOptions } from 'unplugin'
 

src/runtime/components/Alert.vue

@@ -133,7 +133,6 @@ const ui = computed(() => tv({ extend: tv(theme), ...(appConfig.ui?.alert || {})
         <UButton
           v-if="close"
           :icon="closeIcon || appConfig.ui.icons.close"
-          size="md"
           color="neutral"
           variant="link"
           :aria-label="t('alert.close')"

src/runtime/components/Button.vue

@@ -42,14 +42,15 @@ export interface ButtonSlots {
 </script>
 
 <script setup lang="ts">
-import { type Ref, computed, ref, inject } from 'vue'
+import { computed, ref, inject } from 'vue'
+import type { Ref } from 'vue'
 import { defu } from 'defu'
 import { useForwardProps } from 'reka-ui'
 import { useAppConfig } from '#imports'
 import { useComponentIcons } from '../composables/useComponentIcons'
 import { useButtonGroup } from '../composables/useButtonGroup'
 import { formLoadingInjectionKey } from '../composables/useFormField'
-import { omit } from '../utils'
+import { omit, mergeClasses } from '../utils'
 import { tv } from '../utils/tv'
 import { pickLinkProps } from '../utils/link'
 import UIcon from './Icon.vue'
@@ -57,11 +58,7 @@ import UAvatar from './Avatar.vue'
 import ULink from './Link.vue'
 import ULinkBase from './LinkBase.vue'
 
-const props = withDefaults(defineProps<ButtonProps>(), {
-  active: undefined,
-  activeClass: '',
-  inactiveClass: ''
-})
+const props = defineProps<ButtonProps>()
 const slots = defineSlots<ButtonSlots>()
 
 const appConfig = useAppConfig() as Button['AppConfig']
@@ -96,10 +93,10 @@ const ui = computed(() => tv({
     variants: {
       active: {
         true: {
-          base: props.activeClass
+          base: mergeClasses(appConfig.ui?.button?.variants?.active?.true?.base, props.activeClass)
         },
         false: {
-          base: props.inactiveClass
+          base: mergeClasses(appConfig.ui?.button?.variants?.active?.false?.base, props.inactiveClass)
         }
       }
     }

src/runtime/components/Carousel.vue

@@ -118,7 +118,7 @@ export interface CarouselEmits {
 import { computed, ref, watch, onMounted } from 'vue'
 import useEmblaCarousel from 'embla-carousel-vue'
 import { Primitive, useForwardProps } from 'reka-ui'
-import { reactivePick, computedAsync } from '@vueuse/core'
+import { reactivePick } from '@vueuse/core'
 import { useAppConfig } from '#imports'
 import { useLocale } from '../composables/useLocale'
 import { tv } from '../utils/tv'
@@ -175,41 +175,45 @@ const options = computed<EmblaOptionsType>(() => ({
   direction: dir.value === 'rtl' ? 'rtl' : 'ltr'
 }))
 
-const plugins = computedAsync<EmblaPluginType[]>(async () => {
-  const plugins = []
+const plugins = ref<EmblaPluginType[]>([])
+
+async function loadPlugins() {
+  const emblaPlugins: EmblaPluginType[] = []
 
   if (props.autoplay) {
     const AutoplayPlugin = await import('embla-carousel-autoplay').then(r => r.default)
-    plugins.push(AutoplayPlugin(typeof props.autoplay === 'boolean' ? {} : props.autoplay))
+    emblaPlugins.push(AutoplayPlugin(typeof props.autoplay === 'boolean' ? {} : props.autoplay))
   }
 
   if (props.autoScroll) {
     const AutoScrollPlugin = await import('embla-carousel-auto-scroll').then(r => r.default)
-    plugins.push(AutoScrollPlugin(typeof props.autoScroll === 'boolean' ? {} : props.autoScroll))
+    emblaPlugins.push(AutoScrollPlugin(typeof props.autoScroll === 'boolean' ? {} : props.autoScroll))
   }
 
   if (props.autoHeight) {
     const AutoHeightPlugin = await import('embla-carousel-auto-height').then(r => r.default)
-    plugins.push(AutoHeightPlugin(typeof props.autoHeight === 'boolean' ? {} : props.autoHeight))
+    emblaPlugins.push(AutoHeightPlugin(typeof props.autoHeight === 'boolean' ? {} : props.autoHeight))
   }
 
   if (props.classNames) {
     const ClassNamesPlugin = await import('embla-carousel-class-names').then(r => r.default)
-    plugins.push(ClassNamesPlugin(typeof props.classNames === 'boolean' ? {} : props.classNames))
+    emblaPlugins.push(ClassNamesPlugin(typeof props.classNames === 'boolean' ? {} : props.classNames))
   }
 
   if (props.fade) {
     const FadePlugin = await import('embla-carousel-fade').then(r => r.default)
-    plugins.push(FadePlugin(typeof props.fade === 'boolean' ? {} : props.fade))
+    emblaPlugins.push(FadePlugin(typeof props.fade === 'boolean' ? {} : props.fade))
   }
 
   if (props.wheelGestures) {
     const { WheelGesturesPlugin } = await import('embla-carousel-wheel-gestures')
-    plugins.push(WheelGesturesPlugin(typeof props.wheelGestures === 'boolean' ? {} : props.wheelGestures))
+    emblaPlugins.push(WheelGesturesPlugin(typeof props.wheelGestures === 'boolean' ? {} : props.wheelGestures))
   }
 
-  return plugins
-})
+  plugins.value = emblaPlugins
+}
+
+watch(() => [props.autoplay, props.autoScroll, props.autoHeight, props.classNames, props.fade, props.wheelGestures], loadPlugins, { immediate: true })
 
 const [emblaRef, emblaApi] = useEmblaCarousel(options.value, plugins.value)
 
@@ -310,7 +314,6 @@ defineExpose({
         <UButton
           :disabled="!canScrollPrev"
           :icon="prevIcon"
-          size="md"
           color="neutral"
           variant="outline"
           :aria-label="t('carousel.prev')"
@@ -321,7 +324,6 @@ defineExpose({
         <UButton
           :disabled="!canScrollNext"
           :icon="nextIcon"
-          size="md"
           color="neutral"
           variant="outline"
           :aria-label="t('carousel.next')"

src/runtime/components/CommandPalette.vue

@@ -26,13 +26,23 @@ export interface CommandPaletteItem extends Omit<LinkProps, 'type' | 'raw' | 'cu
   loading?: boolean
   disabled?: boolean
   slot?: string
+  /**
+   * The placeholder to display when the item has children.
+   */
+  placeholder?: string
+  children?: CommandPaletteItem[]
+  /**
+   * Custom view to display instead of children items.
+   * When defined, clicking this item will show the custom view.
+   */
+  view?: string
   onSelect?(e?: Event): void
   class?: any
   ui?: Pick<CommandPalette['slots'], 'item' | 'itemLeadingIcon' | 'itemLeadingAvatarSize' | 'itemLeadingAvatar' | 'itemLeadingChipSize' | 'itemLeadingChip' | 'itemLabel' | 'itemLabelPrefix' | 'itemLabelBase' | 'itemLabelSuffix' | 'itemTrailing' | 'itemTrailingKbds' | 'itemTrailingKbdsSize' | 'itemTrailingHighlightedIcon' | 'itemTrailingIcon'>
   [key: string]: any
 }
 
-export interface CommandPaletteGroup<T> {
+export interface CommandPaletteGroup<T extends CommandPaletteItem = CommandPaletteItem> {
   id: string
   label?: string
   slot?: string
@@ -52,7 +62,7 @@ export interface CommandPaletteGroup<T> {
   highlightedIcon?: string
 }
 
-export interface CommandPaletteProps<G, T> extends Pick<ListboxRootProps, 'multiple' | 'disabled' | 'modelValue' | 'defaultValue' | 'highlightOnHover'>, Pick<UseComponentIconsProps, 'loading' | 'loadingIcon'> {
+export interface CommandPaletteProps<G extends CommandPaletteGroup<T> = CommandPaletteGroup<any>, T extends CommandPaletteItem = CommandPaletteItem> extends Pick<ListboxRootProps, 'multiple' | 'disabled' | 'modelValue' | 'defaultValue' | 'highlightOnHover' | 'selectionBehavior'>, Pick<UseComponentIconsProps, 'loading' | 'loadingIcon'> {
   /**
    * The element or component this component should render as.
    * @defaultValue 'div'
@@ -70,6 +80,12 @@ export interface CommandPaletteProps<G, T> extends Pick<ListboxRootProps, 'multi
    * @IconifyIcon
    */
   selectedIcon?: string
+  /**
+   * The icon displayed when an item has children.
+   * @defaultValue appConfig.ui.icons.chevronRight
+   * @IconifyIcon
+   */
+  trailingIcon?: string
   /**
    * The placeholder text for the input.
    * @defaultValue t('commandPalette.placeholder')
@@ -93,6 +109,18 @@ export interface CommandPaletteProps<G, T> extends Pick<ListboxRootProps, 'multi
    * @IconifyIcon
    */
   closeIcon?: string
+  /**
+   * Display a button to navigate back in history.
+   * `{ size: 'md', color: 'neutral', variant: 'link' }`{lang="ts-type"}
+   * @defaultValue true
+   */
+  back?: boolean | ButtonProps
+  /**
+   * The icon displayed in the back button.
+   * @defaultValue appConfig.ui.icons.arrowLeft
+   * @IconifyIcon
+   */
+  backIcon?: string
   groups?: G[]
   /**
    * Options for [useFuse](https://vueuse.org/integrations/useFuse).
@@ -116,25 +144,26 @@ export interface CommandPaletteProps<G, T> extends Pick<ListboxRootProps, 'multi
   ui?: CommandPalette['slots']
 }
 
-export type CommandPaletteEmits<T> = ListboxRootEmits<T> & {
+export type CommandPaletteEmits<T extends CommandPaletteItem = CommandPaletteItem> = ListboxRootEmits<T> & {
   'update:open': [value: boolean]
 }
 
 type SlotProps<T> = (props: { item: T, index: number }) => any
 
-export type CommandPaletteSlots<G extends { slot?: string }, T extends { slot?: string }> = {
+export type CommandPaletteSlots<G extends CommandPaletteGroup<T> = CommandPaletteGroup<any>, T extends CommandPaletteItem = CommandPaletteItem> = {
   'empty'(props: { searchTerm?: string }): any
+  'back'(props: { ui: { [K in keyof Required<CommandPalette['slots']>]: (props?: Record<string, any>) => string } }): any
   'close'(props: { ui: { [K in keyof Required<CommandPalette['slots']>]: (props?: Record<string, any>) => string } }): any
   'item': SlotProps<T>
   'item-leading': SlotProps<T>
   'item-label': SlotProps<T>
   'item-trailing': SlotProps<T>
-} & Record<string, SlotProps<G>> & Record<string, SlotProps<T>>
+} & Record<string, SlotProps<G>> & Record<string, SlotProps<T>> & Record<string, (props: { current: any, searchTerm: string, navigateBack: () => void, close: () => void }) => any>
 
 </script>
 
 <script setup lang="ts" generic="G extends CommandPaletteGroup<T>, T extends CommandPaletteItem">
-import { computed } from 'vue'
+import { computed, ref, useTemplateRef } from 'vue'
 import { ListboxRoot, ListboxFilter, ListboxContent, ListboxGroup, ListboxGroupLabel, ListboxItem, ListboxItemIndicator, useForwardProps, useForwardPropsEmits } from 'reka-ui'
 import { defu } from 'defu'
 import { reactivePick } from '@vueuse/core'
@@ -157,7 +186,8 @@ import UKbd from './Kbd.vue'
 const props = withDefaults(defineProps<CommandPaletteProps<G, T>>(), {
   modelValue: '',
   labelKey: 'label',
-  autofocus: true
+  autofocus: true,
+  back: true
 })
 const emits = defineEmits<CommandPaletteEmits<T>>()
 const slots = defineSlots<CommandPaletteSlots<G, T>>()
@@ -167,7 +197,7 @@ const searchTerm = defineModel<string>('searchTerm', { default: '' })
 const { t } = useLocale()
 const appConfig = useAppConfig() as CommandPalette['AppConfig']
 
-const rootProps = useForwardPropsEmits(reactivePick(props, 'as', 'disabled', 'multiple', 'modelValue', 'defaultValue', 'highlightOnHover'), emits)
+const rootProps = useForwardPropsEmits(reactivePick(props, 'as', 'disabled', 'multiple', 'modelValue', 'defaultValue', 'highlightOnHover', 'selectionBehavior'), emits)
 const inputProps = useForwardProps(reactivePick(props, 'loading', 'loadingIcon'))
 
 // eslint-disable-next-line vue/no-dupe-keys
@@ -183,18 +213,27 @@ const fuse = computed(() => defu({}, props.fuse, {
   matchAllWhenSearchEmpty: true
 }))
 
-const items = computed(() => props.groups?.filter((group) => {
+const history = ref<(CommandPaletteGroup & { placeholder?: string, view?: string })[]>([])
+
+const placeholder = computed(() => history.value[history.value.length - 1]?.placeholder || props.placeholder || t('commandPalette.placeholder'))
+
+const groups = computed(() => history.value?.length ? [history.value[history.value.length - 1] as G] : props.groups)
+
+const currentView = computed(() => {
+  const current = history.value[history.value.length - 1]
+  return current?.view ? current : null
+})
+
+const items = computed(() => groups.value?.filter((group) => {
   if (!group.id) {
     console.warn(`[@nuxt/ui] CommandPalette group is missing an \`id\` property`)
     return false
   }
-
   if (group.ignoreFilter) {
     return false
   }
-
   return true
-}).flatMap(group => group.items?.map(item => ({ ...item, group: group.id })) || []) || [])
+})?.flatMap(group => group.items?.map(item => ({ ...item, group: group.id })) || []) || [])
 
 const { results: fuseResults } = useFuse<typeof items.value[number]>(searchTerm, items, fuse)
 
@@ -215,7 +254,7 @@ function getGroupWithItems(group: G, items: (T & { matches?: FuseResult<T>['matc
   }
 }
 
-const groups = computed(() => {
+const filteredGroups = computed(() => {
   const groupsById = fuseResults.value.reduce((acc, result) => {
     const { item, matches } = result
     if (!item.group) {
@@ -229,7 +268,7 @@ const groups = computed(() => {
   }, {} as Record<string, (T & { matches?: FuseResult<T>['matches'] })[]>)
 
   const fuseGroups = Object.entries(groupsById).map(([id, items]) => {
-    const group = props.groups?.find(group => group.id === id)
+    const group = groups.value?.find(group => group.id === id)
     if (!group) {
       return
     }
@@ -237,7 +276,7 @@ const groups = computed(() => {
     return getGroupWithItems(group, items)
   }).filter(group => !!group)
 
-  const nonFuseGroups = props.groups
+  const nonFuseGroups = groups.value
     ?.map((group, index) => ({ ...group, index }))
     ?.filter(group => group.ignoreFilter && group.items?.length)
     ?.map(group => ({ ...getGroupWithItems(group, group.items || []), index: group.index })) || []
@@ -247,26 +286,114 @@ const groups = computed(() => {
     return acc
   }, [...fuseGroups])
 })
+
+const listboxRootRef = useTemplateRef('listboxRootRef')
+
+// Exposed methods for programmatic control
+function openView(viewName: string) {
+  history.value.push({
+    id: `view-${viewName}`,
+    label: viewName,
+    view: viewName,
+    items: []
+  } as any)
+
+  searchTerm.value = ''
+  listboxRootRef.value?.highlightFirstItem()
+}
+
+function closeView() {
+  if (history.value.length > 0) {
+    navigateBack()
+  }
+}
+
+defineExpose({
+  openView,
+  closeView,
+  navigateBack
+})
+
+function navigate(item: T) {
+  if (!item.children?.length && !item.view) {
+    return
+  }
+
+  history.value.push({
+    id: `history-${history.value.length}`,
+    label: item.label,
+    slot: item.slot,
+    placeholder: item.placeholder,
+    view: item.view,
+    items: item.children || []
+  } as any)
+
+  searchTerm.value = ''
+
+  listboxRootRef.value?.highlightFirstItem()
+}
+
+function navigateBack() {
+  if (!history.value.length) {
+    return
+  }
+
+  history.value.pop()
+
+  searchTerm.value = ''
+
+  listboxRootRef.value?.highlightFirstItem()
+}
+
+function onBackspace() {
+  if (!searchTerm.value) {
+    navigateBack()
+  }
+}
+
+function onSelect(e: Event, item: T) {
+  if (item.children?.length || item.view) {
+    e.preventDefault()
+
+    navigate(item)
+  } else {
+    item.onSelect?.(e)
+  }
+}
 </script>
 
 <!-- eslint-disable vue/no-v-html -->
 <template>
-  <ListboxRoot v-bind="rootProps" :class="ui.root({ class: [props.ui?.root, props.class] })">
+  <ListboxRoot v-bind="rootProps" ref="listboxRootRef" :class="ui.root({ class: [props.ui?.root, props.class] })">
     <ListboxFilter v-model="searchTerm" as-child>
       <UInput
-        :placeholder="placeholder || t('commandPalette.placeholder')"
+        :placeholder="placeholder"
         variant="none"
         :autofocus="autofocus"
         v-bind="inputProps"
         :icon="icon || appConfig.ui.icons.search"
         :class="ui.input({ class: props.ui?.input })"
+        @keydown.backspace="onBackspace"
       >
+        <template v-if="history?.length && (back || !!slots.back)" #leading>
+          <slot name="back" :ui="ui">
+            <UButton
+              :icon="backIcon || appConfig.ui.icons.arrowLeft"
+              color="neutral"
+              variant="link"
+              :aria-label="t('commandPalette.back')"
+              v-bind="(typeof back === 'object' ? back as Partial<ButtonProps> : {})"
+              :class="ui.back({ class: props.ui?.back })"
+              @click="navigateBack"
+            />
+          </slot>
+        </template>
+
         <template v-if="close || !!slots.close" #trailing>
           <slot name="close" :ui="ui">
             <UButton
               v-if="close"
               :icon="closeIcon || appConfig.ui.icons.close"
-              size="md"
               color="neutral"
               variant="ghost"
               :aria-label="t('commandPalette.close')"
@@ -280,8 +407,18 @@ const groups = computed(() => {
     </ListboxFilter>
 
     <ListboxContent :class="ui.content({ class: props.ui?.content })">
-      <div v-if="groups?.length" role="presentation" :class="ui.viewport({ class: props.ui?.viewport })">
-        <ListboxGroup v-for="group in groups" :key="`group-${group.id}`" :class="ui.group({ class: props.ui?.group })">
+      <div v-if="currentView" :class="ui.viewport({ class: props.ui?.viewport })">
+        <slot
+          :name="currentView.view"
+          :current="currentView"
+          :search-term="searchTerm"
+          :navigate-back="navigateBack"
+          :close="closeView"
+        />
+      </div>
+
+      <div v-else-if="filteredGroups?.length" role="presentation" :class="ui.viewport({ class: props.ui?.viewport })">
+        <ListboxGroup v-for="group in filteredGroups" :key="`group-${group.id}`" :class="ui.group({ class: props.ui?.group })">
           <ListboxGroupLabel v-if="get(group, props.labelKey as string)" :class="ui.label({ class: props.ui?.label })">
             {{ get(group, props.labelKey as string) }}
           </ListboxGroupLabel>
@@ -289,10 +426,10 @@ const groups = computed(() => {
           <ListboxItem
             v-for="(item, index) in group.items"
             :key="`group-${group.id}-${index}`"
-            :value="omit(item, ['matches' as any, 'group' as any, 'onSelect', 'labelHtml', 'suffixHtml'])"
+            :value="omit(item, ['matches' as any, 'group' as any, 'onSelect', 'labelHtml', 'suffixHtml', 'children'])"
             :disabled="item.disabled"
             as-child
-            @select="item.onSelect"
+            @select="onSelect($event, item)"
           >
             <ULink v-slot="{ active, ...slotProps }" v-bind="pickLinkProps(item)" custom>
               <ULinkBase v-bind="slotProps" :class="ui.item({ class: [props.ui?.item, item.ui?.item, item.class], active: active || item.active })">
@@ -323,13 +460,20 @@ const groups = computed(() => {
 
                   <span :class="ui.itemTrailing({ class: [props.ui?.itemTrailing, item.ui?.itemTrailing] })">
                     <slot :name="((item.slot ? `${item.slot}-trailing` : group.slot ? `${group.slot}-trailing` : `item-trailing`) as keyof CommandPaletteSlots<G, T>)" :item="(item as any)" :index="index">
-                      <span v-if="item.kbds?.length" :class="ui.itemTrailingKbds({ class: [props.ui?.itemTrailingKbds, item.ui?.itemTrailingKbds] })">
+                      <UIcon
+                        v-if="(item.children && item.children.length > 0) || item.view"
+                        :name="trailingIcon || appConfig.ui.icons.chevronRight"
+                        :class="ui.itemTrailingIcon({ class: [props.ui?.itemTrailingIcon, item.ui?.itemTrailingIcon] })"
+                      />
+
+                      <span v-else-if="item.kbds?.length" :class="ui.itemTrailingKbds({ class: [props.ui?.itemTrailingKbds, item.ui?.itemTrailingKbds] })">
                         <UKbd v-for="(kbd, kbdIndex) in item.kbds" :key="kbdIndex" :size="((item.ui?.itemTrailingKbdsSize || props.ui?.itemTrailingKbdsSize || ui.itemTrailingKbdsSize()) as KbdProps['size'])" v-bind="typeof kbd === 'string' ? { value: kbd } : kbd" />
                       </span>
+
                       <UIcon v-else-if="group.highlightedIcon" :name="group.highlightedIcon" :class="ui.itemTrailingHighlightedIcon({ class: [props.ui?.itemTrailingHighlightedIcon, item.ui?.itemTrailingHighlightedIcon] })" />
                     </slot>
 
-                    <ListboxItemIndicator as-child>
+                    <ListboxItemIndicator v-if="!item.children?.length" as-child>
                       <UIcon :name="selectedIcon || appConfig.ui.icons.check" :class="ui.itemTrailingIcon({ class: [props.ui?.itemTrailingIcon, item.ui?.itemTrailingIcon] })" />
                     </ListboxItemIndicator>
                   </span>

src/runtime/components/ContextMenuContent.vue

@@ -47,7 +47,6 @@ import ULink from './Link.vue'
 import UAvatar from './Avatar.vue'
 import UIcon from './Icon.vue'
 import UKbd from './Kbd.vue'
-// eslint-disable-next-line import/no-self-import
 import UContextMenuContent from './ContextMenuContent.vue'
 
 const props = defineProps<ContextMenuContentProps<T>>()

src/runtime/components/DropdownMenuContent.vue

@@ -53,7 +53,6 @@ import ULink from './Link.vue'
 import UAvatar from './Avatar.vue'
 import UIcon from './Icon.vue'
 import UKbd from './Kbd.vue'
-// eslint-disable-next-line import/no-self-import
 import UDropdownMenuContent from './DropdownMenuContent.vue'
 
 const props = defineProps<DropdownMenuContentProps<T>>()

src/runtime/components/Form.vue

@@ -1,5 +1,4 @@
 <script lang="ts">
-import type { DeepReadonly } from 'vue'
 import type { AppConfig } from '@nuxt/schema'
 import theme from '#build/ui/form'
 import type { FormSchema, FormError, FormInputEvents, FormErrorEvent, FormSubmitEvent, FormEvent, Form, FormErrorWithId, InferInput, InferOutput, FormData } from '../types/form'
@@ -59,12 +58,12 @@ export interface FormEmits<S extends FormSchema, T extends boolean = true> {
 }
 
 export interface FormSlots {
-  default(props?: { errors: FormError[] }): any
+  default(props?: { errors: FormError[], loading: boolean }): any
 }
 </script>
 
 <script lang="ts" setup generic="S extends FormSchema, T extends boolean = true">
-import { provide, inject, nextTick, ref, onUnmounted, onMounted, computed, useId, readonly } from 'vue'
+import { provide, inject, nextTick, ref, onUnmounted, onMounted, computed, useId, readonly, reactive } from 'vue'
 import { useEventBus } from '@vueuse/core'
 import { useAppConfig } from '#imports'
 import { formOptionsInjectionKey, formInputsInjectionKey, formBusInjectionKey, formLoadingInjectionKey } from '../composables/useFormField'
@@ -155,9 +154,9 @@ provide('form-errors', errors)
 const inputs = ref<{ [P in keyof I]?: { id?: string, pattern?: RegExp } }>({})
 provide(formInputsInjectionKey, inputs as any)
 
-const dirtyFields = new Set<keyof I>()
-const touchedFields = new Set<keyof I>()
-const blurredFields = new Set<keyof I>()
+const dirtyFields: Set<keyof I> = reactive(new Set<keyof I>())
+const touchedFields: Set<keyof I> = reactive(new Set<keyof I>())
+const blurredFields: Set<keyof I> = reactive(new Set<keyof I>())
 
 function resolveErrorIds(errs: FormError[]): FormErrorWithId[] {
   return errs.map(err => ({
@@ -302,9 +301,9 @@ defineExpose<Form<S>>({
   loading,
   dirty: computed(() => !!dirtyFields.size),
 
-  dirtyFields: readonly(dirtyFields) as DeepReadonly<Set<keyof I>>,
-  blurredFields: readonly(blurredFields) as DeepReadonly<Set<keyof I>>,
-  touchedFields: readonly(touchedFields) as DeepReadonly<Set<keyof I>>
+  dirtyFields: readonly(dirtyFields),
+  blurredFields: readonly(blurredFields),
+  touchedFields: readonly(touchedFields)
 })
 </script>
 
@@ -315,6 +314,6 @@ defineExpose<Form<S>>({
     :class="ui({ class: props.class })"
     @submit.prevent="onSubmitWrapper"
   >
-    <slot :errors="errors" />
+    <slot :errors="errors" :loading="loading" />
   </component>
 </template>

src/runtime/components/FormField.vue

@@ -47,7 +47,8 @@ export interface FormFieldSlots {
 </script>
 
 <script setup lang="ts">
-import { computed, ref, inject, provide, type Ref, useId } from 'vue'
+import { computed, ref, inject, provide, useId } from 'vue'
+import type { Ref } from 'vue'
 import { Primitive, Label } from 'reka-ui'
 import { useAppConfig } from '#imports'
 import { formFieldInjectionKey, inputIdInjectionKey } from '../composables/useFormField'

src/runtime/components/Input.vue

@@ -8,7 +8,7 @@ import type { AcceptableValue, ComponentConfig } from '../types/utils'
 
 type Input = ComponentConfig<typeof theme, AppConfig, 'input'>
 
-export interface InputProps extends UseComponentIconsProps {
+export interface InputProps<T extends AcceptableValue = AcceptableValue> extends UseComponentIconsProps {
   /**
    * The element or component this component should render as.
    * @defaultValue 'div'
@@ -38,6 +38,8 @@ export interface InputProps extends UseComponentIconsProps {
   disabled?: boolean
   /** Highlight the ring color like a focus state. */
   highlight?: boolean
+  modelValue?: T
+  defaultValue?: T
   modelModifiers?: {
     string?: boolean
     number?: boolean
@@ -65,6 +67,7 @@ export interface InputSlots {
 <script setup lang="ts" generic="T extends AcceptableValue">
 import { ref, computed, onMounted } from 'vue'
 import { Primitive } from 'reka-ui'
+import { useVModel } from '@vueuse/core'
 import { useAppConfig } from '#imports'
 import { useButtonGroup } from '../composables/useButtonGroup'
 import { useComponentIcons } from '../composables/useComponentIcons'
@@ -76,7 +79,7 @@ import UAvatar from './Avatar.vue'
 
 defineOptions({ inheritAttrs: false })
 
-const props = withDefaults(defineProps<InputProps>(), {
+const props = withDefaults(defineProps<InputProps<T>>(), {
   type: 'text',
   autocomplete: 'off',
   autofocusDelay: 0
@@ -84,13 +87,12 @@ const props = withDefaults(defineProps<InputProps>(), {
 const emits = defineEmits<InputEmits<T>>()
 const slots = defineSlots<InputSlots>()
 
-// eslint-disable-next-line vue/no-dupe-keys
-const [modelValue, modelModifiers] = defineModel<T>()
+const modelValue = useVModel<InputProps<T>, 'modelValue', 'update:modelValue'>(props, 'modelValue', emits, { defaultValue: props.defaultValue })
 
 const appConfig = useAppConfig() as Input['AppConfig']
 
-const { emitFormBlur, emitFormInput, emitFormChange, size: formGroupSize, color, id, name, highlight, disabled, emitFormFocus, ariaAttrs } = useFormField<InputProps>(props, { deferInputValidation: true })
-const { orientation, size: buttonGroupSize } = useButtonGroup<InputProps>(props)
+const { emitFormBlur, emitFormInput, emitFormChange, size: formGroupSize, color, id, name, highlight, disabled, emitFormFocus, ariaAttrs } = useFormField<InputProps<T>>(props, { deferInputValidation: true })
+const { orientation, size: buttonGroupSize } = useButtonGroup<InputProps<T>>(props)
 const { isLeading, isTrailing, leadingIconName, trailingIconName } = useComponentIcons(props)
 
 const inputSize = computed(() => buttonGroupSize.value || formGroupSize.value)
@@ -111,15 +113,15 @@ const inputRef = ref<HTMLInputElement | null>(null)
 
 // Custom function to handle the v-model properties
 function updateInput(value: string | null) {
-  if (modelModifiers.trim) {
+  if (props.modelModifiers?.trim) {
     value = value?.trim() ?? null
   }
 
-  if (modelModifiers.number || props.type === 'number') {
+  if (props.modelModifiers?.number || props.type === 'number') {
     value = looseToNumber(value)
   }
 
-  if (modelModifiers.nullify) {
+  if (props.modelModifiers?.nullify) {
     value ||= null
   }
 
@@ -128,7 +130,7 @@ function updateInput(value: string | null) {
 }
 
 function onInput(event: Event) {
-  if (!modelModifiers.lazy) {
+  if (!props.modelModifiers?.lazy) {
     updateInput((event.target as HTMLInputElement).value)
   }
 }
@@ -136,12 +138,12 @@ function onInput(event: Event) {
 function onChange(event: Event) {
   const value = (event.target as HTMLInputElement).value
 
-  if (modelModifiers.lazy) {
+  if (props.modelModifiers?.lazy) {
     updateInput(value)
   }
 
   // Update trimmed input so that it has same behavior as native input https://github.com/vuejs/core/blob/5ea8a8a4fab4e19a71e123e4d27d051f5e927172/packages/runtime-dom/src/directives/vModel.ts#L63
-  if (modelModifiers.trim) {
+  if (props.modelModifiers?.trim) {
     (event.target as HTMLInputElement).value = value.trim()
   }
 

src/runtime/components/InputMenu.vue

@@ -379,6 +379,7 @@ function onSelect(e: Event, item: InputMenuItem) {
 function isInputItem(item: InputMenuItem): item is _InputMenuItem {
   return typeof item === 'object' && item !== null
 }
+
 defineExpose({
   inputRef
 })

src/runtime/components/InputTags.vue

@@ -0,0 +1,206 @@
+<script lang="ts">
+import type { AppConfig } from '@nuxt/schema'
+import type { TagsInputRootProps, TagsInputRootEmits, AcceptableInputValue } from 'reka-ui'
+import theme from '#build/ui/input-tags'
+import type { UseComponentIconsProps } from '../composables/useComponentIcons'
+import type { AvatarProps } from '../types'
+import type { ComponentConfig } from '../types/utils'
+
+type InputTags = ComponentConfig<typeof theme, AppConfig, 'inputTags'>
+
+export type InputTagItem = AcceptableInputValue
+
+export interface InputTagsProps<T extends InputTagItem = InputTagItem> extends Pick<TagsInputRootProps<T>, 'modelValue' | 'defaultValue' | 'addOnPaste' | 'addOnTab' | 'addOnBlur' | 'duplicate' | 'disabled' | 'delimiter' | 'max' | 'id' | 'convertValue' | 'displayValue' | 'name' | 'required'>, UseComponentIconsProps {
+  /**
+   * The element or component this component should render as.
+   * @defaultValue 'div'
+   */
+  as?: any
+  /** The placeholder text when the input is empty. */
+  placeholder?: string
+  /** The maximum number of character allowed. */
+  maxLength?: number
+  /**
+   * @defaultValue 'primary'
+   */
+  color?: InputTags['variants']['color']
+  /**
+   * @defaultValue 'outline'
+   */
+  variant?: InputTags['variants']['variant']
+  /**
+   * @defaultValue 'md'
+   */
+  size?: InputTags['variants']['size']
+  autofocus?: boolean
+  autofocusDelay?: number
+  /**
+   * The icon displayed to delete a tag.
+   * @defaultValue appConfig.ui.icons.close
+   * @IconifyIcon
+   */
+  deleteIcon?: string
+  /** Highlight the ring color like a focus state. */
+  highlight?: boolean
+  class?: any
+  ui?: InputTags['slots']
+}
+
+export interface InputTagsEmits<T extends InputTagItem> extends TagsInputRootEmits<T> {
+  change: [event: Event]
+  blur: [event: FocusEvent]
+  focus: [event: FocusEvent]
+}
+
+type SlotProps<T extends InputTagItem> = (props: { item: T, index: number }) => any
+
+export interface InputTagsSlots<T extends InputTagItem = InputTagItem> {
+  'leading'(props?: {}): any
+  'default'(props?: {}): any
+  'trailing'(props?: {}): any
+  'item-text': SlotProps<T>
+  'item-delete': SlotProps<T>
+}
+</script>
+
+<script setup lang="ts" generic="T extends InputTagItem">
+import { computed, ref, onMounted, toRaw } from 'vue'
+import { TagsInputRoot, TagsInputItem, TagsInputItemText, TagsInputItemDelete, TagsInputInput, useForwardPropsEmits } from 'reka-ui'
+import { reactivePick } from '@vueuse/core'
+import { useAppConfig } from '#imports'
+import { useButtonGroup } from '../composables/useButtonGroup'
+import { useComponentIcons } from '../composables/useComponentIcons'
+import { useFormField } from '../composables/useFormField'
+import { tv } from '../utils/tv'
+import UIcon from './Icon.vue'
+import UAvatar from './Avatar.vue'
+
+defineOptions({ inheritAttrs: false })
+
+const props = withDefaults(defineProps<InputTagsProps<T>>(), {
+  type: 'text',
+  autofocusDelay: 0
+})
+const emits = defineEmits<InputTagsEmits<T>>()
+const slots = defineSlots<InputTagsSlots<T>>()
+
+const appConfig = useAppConfig() as InputTags['AppConfig']
+
+const rootProps = useForwardPropsEmits(reactivePick(props, 'as', 'addOnPaste', 'addOnTab', 'addOnBlur', 'duplicate', 'delimiter', 'max', 'convertValue', 'displayValue', 'required'), emits)
+
+const { emitFormBlur, emitFormFocus, emitFormChange, emitFormInput, size: formGroupSize, color, id, name, highlight, disabled, ariaAttrs } = useFormField<InputTagsProps>(props)
+const { orientation, size: buttonGroupSize } = useButtonGroup<InputTagsProps>(props)
+const { isLeading, isTrailing, leadingIconName, trailingIconName } = useComponentIcons(props)
+
+const inputSize = computed(() => buttonGroupSize.value || formGroupSize.value)
+
+const ui = computed(() => tv({ extend: tv(theme), ...(appConfig.ui?.inputTags || {}) })({
+  color: color.value,
+  variant: props.variant,
+  size: inputSize?.value,
+  loading: props.loading,
+  highlight: highlight.value,
+  leading: isLeading.value || !!props.avatar || !!slots.leading,
+  trailing: isTrailing.value || !!slots.trailing,
+  buttonGroup: orientation.value
+}))
+
+const inputRef = ref<InstanceType<typeof TagsInputInput> | null>(null)
+
+onMounted(() => {
+  setTimeout(() => {
+    autoFocus()
+  }, props.autofocusDelay)
+})
+
+function autoFocus() {
+  if (props.autofocus) {
+    inputRef.value?.$el?.focus()
+  }
+}
+
+function onUpdate(value: T[]) {
+  if (toRaw(props.modelValue) === value) {
+    return
+  }
+  // @ts-expect-error - 'target' does not exist in type 'EventInit'
+  const event = new Event('change', { target: { value } })
+  emits('change', event)
+  emitFormChange()
+  emitFormInput()
+}
+
+function onBlur(event: FocusEvent) {
+  emits('blur', event)
+  emitFormBlur()
+}
+
+function onFocus(event: FocusEvent) {
+  emits('focus', event)
+  emitFormFocus()
+}
+
+defineExpose({
+  inputRef
+})
+</script>
+
+<!-- eslint-disable vue/no-template-shadow -->
+<template>
+  <TagsInputRoot
+    :id="id"
+    v-slot="{ modelValue: tags }"
+    :model-value="modelValue"
+    :default-value="defaultValue"
+    :class="ui.root({ class: [ui.base({ class: props.ui?.base }), props.ui?.root, props.class] })"
+    v-bind="rootProps"
+    :name="name"
+    :disabled="disabled"
+    @update:model-value="onUpdate"
+    @blur="onBlur"
+    @focus="onFocus"
+  >
+    <TagsInputItem
+      v-for="(item, index) in tags"
+      :key="index"
+      :value="item"
+      :class="ui.item({ class: [props.ui?.item] })"
+    >
+      <TagsInputItemText :class="ui.itemText({ class: [props.ui?.itemText] })">
+        <slot v-if="!!slots['item-text']" name="item-text" :item="(item as T)" :index="index" />
+      </TagsInputItemText>
+
+      <TagsInputItemDelete
+        :class="ui.itemDelete({ class: [props.ui?.itemDelete] })"
+        :disabled="disabled"
+      >
+        <slot name="item-delete" :item="(item as T)" :index="index">
+          <UIcon :name="deleteIcon || appConfig.ui.icons.close" :class="ui.itemDeleteIcon({ class: [props.ui?.itemDeleteIcon] })" />
+        </slot>
+      </TagsInputItemDelete>
+    </TagsInputItem>
+
+    <TagsInputInput
+      ref="inputRef"
+      v-bind="{ ...$attrs, ...ariaAttrs }"
+      :placeholder="placeholder"
+      :max-length="maxLength"
+      :class="ui.input({ class: props.ui?.input })"
+    />
+
+    <slot />
+
+    <span v-if="isLeading || !!avatar || !!slots.leading" :class="ui.leading({ class: props.ui?.leading })">
+      <slot name="leading">
+        <UIcon v-if="isLeading && leadingIconName" :name="leadingIconName" :class="ui.leadingIcon({ class: props.ui?.leadingIcon })" />
+        <UAvatar v-else-if="!!avatar" :size="((props.ui?.leadingAvatarSize || ui.leadingAvatarSize()) as AvatarProps['size'])" v-bind="avatar" :class="ui.leadingAvatar({ class: props.ui?.leadingAvatar })" />
+      </slot>
+    </span>
+
+    <span v-if="isTrailing || !!slots.trailing" :class="ui.trailing({ class: props.ui?.trailing })">
+      <slot name="trailing">
+        <UIcon v-if="trailingIconName" :name="trailingIconName" :class="ui.trailingIcon({ class: props.ui?.trailingIcon })" />
+      </slot>
+    </span>
+  </TagsInputRoot>
+</template>

src/runtime/components/Link.vue

@@ -88,11 +88,12 @@ export interface LinkSlots {
 
 <script setup lang="ts">
 import { computed } from 'vue'
-import { defu } from 'defu'
 import { isEqual } from 'ohash/utils'
 import { useForwardProps } from 'reka-ui'
+import { defu } from 'defu'
 import { reactiveOmit } from '@vueuse/core'
 import { useRoute, useAppConfig } from '#imports'
+import { mergeClasses } from '../utils'
 import { tv } from '../utils/tv'
 import { isPartiallyEqual } from '../utils/link'
 import ULinkBase from './LinkBase.vue'
@@ -103,9 +104,7 @@ const props = withDefaults(defineProps<LinkProps>(), {
   as: 'button',
   type: 'button',
   ariaCurrentValue: 'page',
-  active: undefined,
-  activeClass: '',
-  inactiveClass: ''
+  active: undefined
 })
 defineSlots<LinkSlots>()
 
@@ -119,8 +118,8 @@ const ui = computed(() => tv({
   ...defu({
     variants: {
       active: {
-        true: props.activeClass,
-        false: props.inactiveClass
+        true: mergeClasses(appConfig.ui?.link?.variants?.active?.true, props.activeClass),
+        false: mergeClasses(appConfig.ui?.link?.variants?.active?.false, props.inactiveClass)
       }
     }
   }, appConfig.ui?.link || {})

src/runtime/components/Modal.vue

@@ -65,6 +65,7 @@ export interface ModalSlots {
   header(props: { close: () => void }): any
   title(props?: {}): any
   description(props?: {}): any
+  actions(props?: {}): any
   close(props: { close: () => void, ui: { [K in keyof Required<Modal['slots']>]: (props?: Record<string, any>) => string } }): any
   body(props: { close: () => void }): any
   footer(props: { close: () => void }): any
@@ -104,15 +105,15 @@ const contentEvents = computed(() => {
   }
 
   if (!props.dismissible) {
-    const events = ['pointerDownOutside', 'interactOutside', 'escapeKeyDown', 'closeAutoFocus'] as const
-    type EventType = typeof events[number]
+    const events = ['pointerDownOutside', 'interactOutside', 'escapeKeyDown']
+
     return events.reduce((acc, curr) => {
       acc[curr] = (e: Event) => {
         e.preventDefault()
         emits('close:prevent')
       }
       return acc
-    }, {} as Record<EventType, (e: Event) => void>)
+    }, defaultEvents as Record<typeof events[number] | keyof typeof defaultEvents, (e: Event) => void>)
   }
 
   return defaultEvents
@@ -166,12 +167,13 @@ const ui = computed(() => tv({ extend: tv(theme), ...(appConfig.ui?.modal || {})
                 </DialogDescription>
               </div>
 
+              <slot name="actions" />
+
               <DialogClose v-if="props.close || !!slots.close" as-child>
                 <slot name="close" :close="close" :ui="ui">
                   <UButton
                     v-if="props.close"
                     :icon="closeIcon || appConfig.ui.icons.close"
-                    size="md"
                     color="neutral"
                     variant="ghost"
                     :aria-label="t('modal.close')"

src/runtime/components/NavigationMenu.vue

@@ -236,20 +236,13 @@ const lists = computed<NavigationMenuItem[][]>(() =>
     : []
 )
 
-function getAccordionDefaultValue(list: NavigationMenuItem[]) {
-  function findItemsWithDefaultOpen(items: NavigationMenuItem[], level = 0): string[] {
-    return items.reduce((acc: string[], item, index) => {
-      if (item.defaultOpen || item.open) {
-        acc.push(item.value || (level > 0 ? `item-${level}-${index}` : `item-${index}`))
-      }
-      if (item.children?.length) {
-        acc.push(...findItemsWithDefaultOpen(item.children, level + 1))
-      }
-      return acc
-    }, [])
-  }
-
-  const indexes = findItemsWithDefaultOpen(list)
+function getAccordionDefaultValue(list: NavigationMenuItem[], level = 0) {
+  const indexes = list.reduce((acc: string[], item, index) => {
+    if (item.defaultOpen || item.open) {
+      acc.push(item.value || (level > 0 ? `item-${level}-${index}` : `item-${index}`))
+    }
+    return acc
+  }, [])
 
   return props.type === 'single' ? indexes[0] : indexes
 }
@@ -378,7 +371,14 @@ function getAccordionDefaultValue(list: NavigationMenuItem[]) {
       </ULink>
 
       <AccordionContent v-if="orientation === 'vertical' && item.children?.length && !collapsed" :class="ui.content({ class: [props.ui?.content, item.ui?.content] })">
-        <ul :class="ui.childList({ class: props.ui?.childList })">
+        <AccordionRoot
+          v-bind="({
+            ...accordionProps,
+            defaultValue: getAccordionDefaultValue(item.children, level + 1)
+          } as AccordionRootProps)"
+          as="ul"
+          :class="ui.childList({ class: props.ui?.childList })"
+        >
           <ReuseItemTemplate
             v-for="(childItem, childIndex) in item.children"
             :key="childIndex"
@@ -387,7 +387,7 @@ function getAccordionDefaultValue(list: NavigationMenuItem[]) {
             :level="level + 1"
             :class="ui.childItem({ class: [props.ui?.childItem, childItem.ui?.childItem] })"
           />
-        </ul>
+        </AccordionRoot>
       </AccordionContent>
     </component>
   </DefineItemTemplate>

src/runtime/components/OverlayProvider.vue

@@ -1,6 +1,7 @@
 <script setup lang="ts">
 import { computed } from 'vue'
-import { useOverlay, type Overlay } from '../composables/useOverlay'
+import { useOverlay } from '../composables/useOverlay'
+import type { Overlay } from '../composables/useOverlay'
 
 const { overlays, unmount, close } = useOverlay()