chore(package): simplify files array in package.json

2026-01-15 20:48:12 +01:00 · 2025-04-25 00:20:03 +02:00
192 changed files with 5625 additions and 8818 deletions
--- a/.github/ISSUE_TEMPLATE/bug-report-v3.yml
+++ b/.github/ISSUE_TEMPLATE/bug-report-v3.yml
@@ -5,7 +5,7 @@ body:
  - type: markdown
    attributes:
      value: |
-        Before reporting a bug, please make sure that you have read through our [documentation](https://ui.nuxt.com/) and existing [issues](https://github.com/nuxt/ui/issues?q=is%3Aissue%20is%3Aopen%20sort%3Aupdated-desc%20label%3Av3).
+        Before reporting a bug, please make sure that you have read through our [v3 documentation](https://ui.nuxt.com/) and existing [issues](https://github.com/nuxt/ui/issues?q=is%3Aissue%20is%3Aopen%20sort%3Aupdated-desc%20label%3Av3).
  - type: textarea
    id: env
    attributes:
@@ -44,7 +44,7 @@ body:
    id: reproduction
    attributes:
      label: Reproduction
-      description: Please provide a reproduction link using the Nuxt template https://codesandbox.io/p/devbox/nuxt-ui3-n3sxks or the Vue template https://codesandbox.io/p/devbox/nuxt-ui3-vue-4h5gqn. A minimal [reproduction is required](https://antfu.me/posts/why-reproductions-are-required) unless you are absolutely sure that the issue is obvious and the provided information is enough to understand the problem. If a report is vague (e.g. just a generic error message) and has no reproduction, it will receive a "needs reproduction" label. If no reproduction is provided, it will be closed automatically after a while.
+      description: Please provide a reproduction link using the Nuxt template https://codesandbox.io/p/devbox/nuxt-ui3-n3sxks or the Vue template https://codesandbox.io/p/devbox/nuxt-ui3-vue-4h5gqn. A minimal [reproduction is required](https://antfu.me/posts/why-reproductions-are-required) unless you are absolutely sure that the issue is obvious and the provided information is enough to understand the problem. If a report is vague (e.g. just a generic error message) and has no reproduction, it will receive a "needs reproduction" label. If no reproduction is provided we might close it.
      placeholder: https://github.com/my/reproduction
    validations:
      required: true
--- a/.github/ISSUE_TEMPLATE/feature-request-v3.yml
+++ b/.github/ISSUE_TEMPLATE/feature-request-v3.yml
@@ -5,7 +5,7 @@ body:
  - type: markdown
    attributes:
      value: |
-        Before requesting a feature, please make sure that you have read through our [documentation](https://ui.nuxt.com/) and existing [issues](https://github.com/nuxt/ui/issues?q=is%3Aissue%20is%3Aopen%20sort%3Aupdated-desc%20label%3Av3).
+        Before requesting a feature, please make sure that you have read through our [v3 documentation](https://ui.nuxt.com/) and existing [issues](https://github.com/nuxt/ui/issues?q=is%3Aissue%20is%3Aopen%20sort%3Aupdated-desc%20label%3Av3).
  - type: textarea
    id: description
    attributes:
--- a/.github/ISSUE_TEMPLATE/question-v3.yml
+++ b/.github/ISSUE_TEMPLATE/question-v3.yml
@@ -5,7 +5,7 @@ body:
  - type: markdown
    attributes:
      value: |
-        Before asking a question, please make sure that you have read through our [documentation](https://ui.nuxt.com/) and existing [issues](https://github.com/nuxt/ui/issues?q=is%3Aissue%20is%3Aopen%20sort%3Aupdated-desc%20label%3Av3).
+        Before asking a question, please make sure that you have read through our [v3 documentation](https://ui.nuxt.com/) and existing [issues](https://github.com/nuxt/ui/issues?q=is%3Aissue%20is%3Aopen%20sort%3Aupdated-desc%20label%3Av3).
  - type: textarea
    id: description
    attributes:
--- a/.github/reproduire/needs-reproduction.md
+++ b/.github/reproduire/needs-reproduction.md
@@ -1,30 +0,0 @@
-Would you be able to provide a [reproduction](https://nuxt.com/docs/community/reporting-bugs/#create-a-minimal-reproduction)? 🙏
-
-<details>
-<summary>More info</summary>
-
-### Why do I need to provide a reproduction?
-
-Reproductions make it possible for us to triage and fix issues quickly with a relatively small team. It helps us discover the source of the problem, and also can reveal assumptions you or we might be making.
-
-### What will happen?
-
-If you've provided a reproduction, we'll remove the label and try to reproduce the issue. If we can, we'll mark it as a bug and prioritise it based on its severity and how many people we think it might affect.
-
-If `needs reproduction` labeled issues don't receive any substantial activity (e.g., new comments featuring a reproduction link), they will be closed automatically after a while. That's not because we don't care! At any point, feel free to comment with a reproduction and we'll reopen it.
-
-### How can I create a reproduction?
-
-We have templates to create a minimal reproduction:
-
-* **Nuxt**: https://codesandbox.io/p/devbox/nuxt-ui3-n3sxks
-* **Vue**: https://codesandbox.io/p/devbox/nuxt-ui3-vue-4h5gqn
-
-Please ensure that the reproduction is as **minimal** as possible. See more details [in our guide](https://nuxt.com/docs/community/reporting-bugs/#create-a-minimal-reproduction).
-
-You might also find these other articles interesting and/or helpful:
-
- [The Importance of Reproductions](https://antfu.me/posts/why-reproductions-are-required)
- [How to Generate a Minimal, Complete, and Verifiable Example](https://stackoverflow.com/help/mcve)
-
-</details>
--- a/.github/workflows/module.yml
+++ b/.github/workflows/module.yml
@@ -69,53 +69,6 @@ jobs:
        if: matrix.os == 'ubuntu-latest'
        run: pnpx pkg-pr-new publish --compact --no-template --pnpm

-  playground:
-    needs: build
-
-    runs-on: ${{ matrix.os }}
-
-    defaults:
-      run:
-        working-directory: ./playground
-
-    permissions:
-      contents: read
-      pull-requests: read
-
-    strategy:
-      matrix:
-        os: [ubuntu-latest] # macos-latest, windows-latest
-        node: [22]
-
-    steps:
-      - name: Checkout
-        uses: actions/checkout@v4
-
-      - name: Store commit SHA
-        run: |
-          echo "COMMIT_SHA=$(echo ${{ github.workflow_sha }} | cut -c1-7)" >> $GITHUB_ENV
-
-      - name: Install pnpm
-        uses: pnpm/action-setup@v4
-
-      - name: Install node
-        uses: actions/setup-node@v4
-        with:
-          node-version: 22
-          cache: pnpm
-
-      - name: Install latest nuxt/ui
-        run: pnpm install https://pkg.pr.new/@nuxt/ui@${{ env.COMMIT_SHA }} --lockfile-only
-
-      - name: Install dependencies
-        run: pnpm install --ignore-workspace
-
-      - name: Prepare
-        run: pnpm nuxi prepare
-
-      - name: Typecheck
-        run: pnpm run typecheck
-
  starter-nuxt:
    needs: build

--- a/.github/workflows/reproduire.yml
+++ b/.github/workflows/reproduire.yml
@@ -1,17 +0,0 @@
-name: reproduire
-
-on:
-  issues:
-    types: [labeled]
-
-permissions:
-  issues: write
-
-jobs:
-  reproduire:
-    runs-on: ubuntu-latest
-    steps:
-      - uses: actions/checkout@11bd71901bbe5b1630ceea73d27597364c9af683 # v4.2.2
-      - uses: Hebilicious/reproduire@4b686ae9cbb72dad60f001d278b6e3b2ce40a9ac # v0.0.9-mp
-        with:
-          label: needs reproduction
--- a/CHANGELOG.md
+++ b/CHANGELOG.md
@@ -1,68 +1,5 @@
 # Changelog

-## [3.1.2](https://github.com/nuxt/ui/compare/v3.1.1...v3.1.2) (2025-05-15)
-
-### Features
-
-* **Badge:** add `square` prop ([#4008](https://github.com/nuxt/ui/issues/4008)) ([894e8a6](https://github.com/nuxt/ui/commit/894e8a61b6fea3618fc863bd77678385e9d021c2))
-* **CheckboxGroup:** add `table` variant ([#3997](https://github.com/nuxt/ui/issues/3997)) ([1b6ab27](https://github.com/nuxt/ui/commit/1b6ab271ea3875a7c77ffe9367c7c341083dd53c))
-* **components:** add `ui` field in items ([#4060](https://github.com/nuxt/ui/issues/4060)) ([b9adc83](https://github.com/nuxt/ui/commit/b9adc83e787db02507e6e7bb1aabc684eccc197b))
-* **InputNumber:** add `increment-disabled` / `decrement-disabled` props ([#4141](https://github.com/nuxt/ui/issues/4141)) ([c7fba2e](https://github.com/nuxt/ui/commit/c7fba2e0ebfb7153f3bfb727165d653bbd3dbe54))
-* **locale:** add Slovenian language ([#4140](https://github.com/nuxt/ui/issues/4140)) ([e86dc79](https://github.com/nuxt/ui/commit/e86dc79e51b2773a77ada5f12d4f0964fbc83354))
-* **NavigationMenu:** add `collapsible` field in items ([2be60cd](https://github.com/nuxt/ui/commit/2be60cddfe10fd1e2466900fd53e21ee0c877227)), closes [#3353](https://github.com/nuxt/ui/issues/3353) [#3911](https://github.com/nuxt/ui/issues/3911)
-* **NavigationMenu:** handle `tooltip` in items ([46c2987](https://github.com/nuxt/ui/commit/46c2987ebfd30b2b071a96a745b7270e852e96de)), closes [#4050](https://github.com/nuxt/ui/issues/4050)
-* **Slider:** handle `tooltip` around thumbs ([d140acc](https://github.com/nuxt/ui/commit/d140acc608c6ae11c0a0531fe443588776ea7807)), closes [#1469](https://github.com/nuxt/ui/issues/1469)
-* **Toast:** add `progress` prop to hide progress bar ([#4125](https://github.com/nuxt/ui/issues/4125)) ([92632e9](https://github.com/nuxt/ui/commit/92632e969eaa11521a166e50e346753929b7f523))
-
-### Bug Fixes
-
-* **Badge/Button:** handle zero value in label correctly ([#4108](https://github.com/nuxt/ui/issues/4108)) ([f244d15](https://github.com/nuxt/ui/commit/f244d15b96d97cd8ba34ba9c18f23965e17e3cef))
-* **ButtonGroup:** add `z-index` on focused element ([204953b](https://github.com/nuxt/ui/commit/204953b780bde08dbfde230fc8887674449227b7))
-* **Calendar:** wrong color for today date with `neutral` color ([7d51a9e](https://github.com/nuxt/ui/commit/7d51a9e479cb6105ea37759c5cd67ff9f7702c49)), closes [#4084](https://github.com/nuxt/ui/issues/4084) [#3629](https://github.com/nuxt/ui/issues/3629)
-* **Checkbox/RadioGroup:** render correct element without `variant` ([f2fd778](https://github.com/nuxt/ui/commit/f2fd778c0a604f2d65aec9f3fe2d54b6d4e8c3a2)), closes [#3998](https://github.com/nuxt/ui/issues/3998)
-* **CheckboxGroup:** relative `UCheckbox` import ([7551a85](https://github.com/nuxt/ui/commit/7551a85ad2d92b59e2909396affb862403d5b27a)), closes [#4090](https://github.com/nuxt/ui/issues/4090)
-* **ColorPicker:** make thumb touch draggable ([#4101](https://github.com/nuxt/ui/issues/4101)) ([cc20a26](https://github.com/nuxt/ui/commit/cc20a26f07268d19119ab4c7c254033143bb63f4))
-* **components:** `class` should have priority over `ui` prop ([e6e510b](https://github.com/nuxt/ui/commit/e6e510b848d995a286a51d50a120d67483e11232))
-* **FormField:** block form field injection after use ([#4150](https://github.com/nuxt/ui/issues/4150)) ([d79da9d](https://github.com/nuxt/ui/commit/d79da9d7b60c9972af64acd8e6eef4ae7d6bc3eb))
-* **FormField:** use `div` for `error` and `help` slots ([459a041](https://github.com/nuxt/ui/commit/459a0410ab729fde60865e84632b36903465f57e))
-* **inertia:** link always render as anchor tag ([#3989](https://github.com/nuxt/ui/issues/3989)) ([e81464a](https://github.com/nuxt/ui/commit/e81464a43ede4e63ce3dc92429bbfef48614f731))
-* **inertia:** make `useAppConfig` reactive ([12303a8](https://github.com/nuxt/ui/commit/12303a87be62dae84ef774e3a9795deb0ac90cc7))
-* **Input/Textarea:** handle generic types ([3c8d6cd](https://github.com/nuxt/ui/commit/3c8d6cd01dfafed5844c376f52adbdda0c814420)), closes [nuxt/ui-pro#887](https://github.com/nuxt/ui-pro/issues/887)
-* **InputNumber:** handle inside button group ([2e4c308](https://github.com/nuxt/ui/commit/2e4c3082a1e66fa597086dc3431fec37fa29ef62)), closes [#4155](https://github.com/nuxt/ui/issues/4155)
-* **Link:** consistent behavior between nuxt, vue and inertia ([#4134](https://github.com/nuxt/ui/issues/4134)) ([67da90a](https://github.com/nuxt/ui/commit/67da90a2f638124f640c4271d3376c5ff3fab6a1))
-* **module:** configure `@nuxt/fonts` with default weights ([276268d](https://github.com/nuxt/ui/commit/276268d311f57715cec47bc600a0ccc3d3885682))
-* **NavigationMenu:** arrow position conflict ([#4137](https://github.com/nuxt/ui/issues/4137)) ([0dc4678](https://github.com/nuxt/ui/commit/0dc4678c68e4b500be49c38336dc75b73843e38d))
-* **Select:** support more primitive types in `value` field ([#4105](https://github.com/nuxt/ui/issues/4105)) ([09b4699](https://github.com/nuxt/ui/commit/09b4699aeadaa195ea081509f8e237bb2c346238))
-* **Slider:** handle generic types ([d7a4d02](https://github.com/nuxt/ui/commit/d7a4d029b77d2dfa0b8efcd2755d482fa5e31fd3))
-* **Stepper:** use `div` tag for `title` & `description` ([a57844e](https://github.com/nuxt/ui/commit/a57844e41676c13ed1af861424961b88cee7b4da)), closes [#4096](https://github.com/nuxt/ui/issues/4096)
-* **Tabs:** prevent trigger truncate without parent width ([06e5689](https://github.com/nuxt/ui/commit/06e5689da80b36205d0548d5d6b58510938e4a6e)), closes [#4056](https://github.com/nuxt/ui/issues/4056)
-* **Tabs:** set `focus:outline-none` with `link` variant ([999a0f8](https://github.com/nuxt/ui/commit/999a0f84671fad20fa3dc50c6774af2e0200b32e))
-* **templates:** dont write unused variants in theme files ([d3df3bb](https://github.com/nuxt/ui/commit/d3df3bb929fe6732f27b182d1664213884a662ec))
-* **Toaster:** allow `base` slot override ([c63d2f3](https://github.com/nuxt/ui/commit/c63d2f380aac16f1d1e812516df3dca7fa7c8034))
-* **vue:** make `useAppConfig` reactive ([869c070](https://github.com/nuxt/ui/commit/869c0708bd351c7be44e5e430c348b19dd316db9)), closes [#3952](https://github.com/nuxt/ui/issues/3952)
-
-## [3.1.1](https://github.com/nuxt/ui/compare/v3.1.0...v3.1.1) (2025-05-02)
-
-### Features
-
-* **useOverlay:** add `closeAll` method ([#3984](https://github.com/nuxt/ui/issues/3984)) ([ac4c194](https://github.com/nuxt/ui/commit/ac4c1946ec399aec59b4bce9d538e3ff67868abf))
-* **useOverlay:** add `isOpen` method to check overlay state ([#4041](https://github.com/nuxt/ui/issues/4041)) ([a4f3f6d](https://github.com/nuxt/ui/commit/a4f3f6d531f9c0281f99085a6688d296f8f13f2f))
-
-### Bug Fixes
-
-* **Calendar:** add `place-items-center` to grid row ([#4034](https://github.com/nuxt/ui/issues/4034)) ([8dfdd63](https://github.com/nuxt/ui/commit/8dfdd63ce3b3a0e904f7c013c774cf9aaf46b240))
-* **defineShortcuts:** bring back `meta` to `ctrl` convert on non macos platforms ([f3b8b17](https://github.com/nuxt/ui/commit/f3b8b17dc5f43936ef7ffb11c1ed7f9a5f94d0bb)), closes [#3869](https://github.com/nuxt/ui/issues/3869) [#3318](https://github.com/nuxt/ui/issues/3318)
-* **module:** support `nuxt-nightly` ([#3996](https://github.com/nuxt/ui/issues/3996)) ([bc0a296](https://github.com/nuxt/ui/commit/bc0a296f9d68ca72cd991b11cd3489b63c7b13db))
-* **NavigationMenu:** remove `sm:w-auto` from content slot ([aebf0b3](https://github.com/nuxt/ui/commit/aebf0b3dca50c51c093cb6abf16c4fd995fc1b39)), closes [#3987](https://github.com/nuxt/ui/issues/3987)
-* **RadioGroup:** improve items `value` field type ([#3995](https://github.com/nuxt/ui/issues/3995)) ([195773e](https://github.com/nuxt/ui/commit/195773ec7dac12ccc3a0a67867751e8ca634cc04))
-* **templates:** put back args to watch in dev ([#4033](https://github.com/nuxt/ui/issues/4033)) ([c5bdec0](https://github.com/nuxt/ui/commit/c5bdec0f64963ef602975270a09a1ee795cdacf9))
-* **theme:** add missing `border-bg` / `divide-bg` utilities ([82b5f32](https://github.com/nuxt/ui/commit/82b5f322ebd8a08e63588122bd4ef567dcb8ba8c))
-* **theme:** add missing `ring-offset-*` utilities ([#3992](https://github.com/nuxt/ui/issues/3992)) ([e5df026](https://github.com/nuxt/ui/commit/e5df0269935be59df759fe0e1378acb2b0d9014a))
-* **theme:** define default shades for named tailwindcss colors ([8acf3c5](https://github.com/nuxt/ui/commit/8acf3c51db6c2f9443d04be6ba7d9f062c5cf8ab)), closes [#3977](https://github.com/nuxt/ui/issues/3977)
-* **theme:** improve app config types for `ui` object ([591d59f](https://github.com/nuxt/ui/commit/591d59fe89f1d9bf016c121bf9160f73fe0a290d)), closes [#3579](https://github.com/nuxt/ui/issues/3579)
-* **theme:** use `[@theme](https://github.com/theme) inline` to properly reference css variables ([6131871](https://github.com/nuxt/ui/commit/6131871a0d124c5942d60dc5dff20981e8542e51)), closes [#4018](https://github.com/nuxt/ui/issues/4018)
-* **useOverlay:** improve types and docs ([#4012](https://github.com/nuxt/ui/issues/4012)) ([39e29fc](https://github.com/nuxt/ui/commit/39e29fccf1840c723a13237d65002501b2829b70))
-
 ## [3.1.0](https://github.com/nuxt/ui/compare/v3.0.2...v3.1.0) (2025-04-24)

 ### ⚠ BREAKING CHANGES
--- a/build.config.ts
+++ b/build.config.ts
@@ -11,7 +11,7 @@ export default defineBuildConfig({
      delimiters: ['', ''],
      values: {
        // Used in development to import directly from theme
-        'process.argv.includes(\'--uiDev\')': 'false'
+        'const isUiDev = true': 'const isUiDev = false'
      }
    }
  },
--- a/cli/templates.mjs
+++ b/cli/templates.mjs
@@ -66,7 +66,7 @@ const ui = computed(() => tv({ extend: tv(theme), ...(appConfig.ui?.${camelName}
 </script>

 <template>
-  <Primitive :as="as" :class="ui.root({ class: [props.ui?.root, props.class] })">
+  <Primitive :as="as" :class="ui.root({ class: [props.class, props.ui?.root] })">
    <slot />
  </Primitive>
 </template>
@@ -109,7 +109,7 @@ const ui = computed(() => tv({ extend: tv(theme), ...(appConfig.ui?.${camelName}
 </script>

 <template>
-  <${upperName}Root v-bind="rootProps" :class="ui.root({ class: [props.ui?.root, props.class] })" />
+  <${upperName}Root v-bind="rootProps" :class="ui.root({ class: [props.class, props.ui?.root] })" />
 </template>
 `
  }
--- a/docs/app/app.vue
+++ b/docs/app/app.vue
@@ -12,6 +12,7 @@ const { data: files } = useLazyAsyncData('search', () => queryCollectionSearchSe
 })

 const links = useLinks()
+const searchLinks = useSearchLinks()
 const color = computed(() => colorMode.value === 'dark' ? (colors as any)[appConfig.ui.colors.neutral][900] : 'white')
 const radius = computed(() => `:root { --ui-radius: ${appConfig.theme.radius}rem; }`)
 const blackAsPrimary = computed(() => appConfig.theme.blackAsPrimary ? `:root { --ui-primary: black; } .dark { --ui-primary: white; }` : ':root {}')
@@ -41,6 +42,7 @@ useServerSeoMeta({

 useFaviconFromTheme()

+const { frameworks, modules } = useSharedData()
 const { mappedNavigation, filteredNavigation } = useContentNavigation(navigation)

 provide('navigation', mappedNavigation)
@@ -51,7 +53,7 @@ provide('navigation', mappedNavigation)
    <NuxtLoadingIndicator color="var(--ui-primary)" :height="2" />

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

      <Header :links="links" />
    </template>
@@ -63,7 +65,23 @@ provide('navigation', mappedNavigation)
    <template v-if="!route.path.startsWith('/examples')">
      <Footer />

-      <Search :files="files" :navigation="filteredNavigation" />
+      <ClientOnly>
+        <LazyUContentSearch
+          :links="searchLinks"
+          :files="files"
+          :groups="[{
+            id: 'framework',
+            label: 'Framework',
+            items: frameworks
+          }, {
+            id: 'module',
+            label: 'Module',
+            items: modules
+          }]"
+          :navigation="filteredNavigation"
+          :fuse="{ resultLimit: 100 }"
+        />
+      </ClientOnly>
    </template>
  </UApp>
 </template>
--- a/docs/app/components/FrameworkSelect.vue
+++ b/docs/app/components/FrameworkSelect.vue
@@ -20,7 +20,7 @@ watch(framework, () => {
    color="neutral"
    :ui="{
      indicator: 'bg-default',
-      trigger: 'px-1 data-[state=active]:text-highlighted w-full'
+      trigger: 'px-1 data-[state=active]:text-highlighted'
    }"
    size="xs"
    @update:model-value="(framework = $event as string)"
--- a/docs/app/components/ModuleSelect.vue
+++ b/docs/app/components/ModuleSelect.vue
@@ -20,7 +20,7 @@ watch(module, () => {
    color="neutral"
    :ui="{
      indicator: 'bg-default',
-      trigger: 'px-1 data-[state=active]:text-highlighted w-full'
+      trigger: 'px-1 data-[state=active]:text-highlighted'
    }"
    size="xs"
    @update:model-value="(module = $event as string)"
--- a/docs/app/components/Search.client.vue
+++ b/docs/app/components/Search.client.vue
@@ -1,199 +0,0 @@
-<script setup lang="ts">
-import type { DefineComponent } from 'vue'
-import type { ContentNavigationItem } from '@nuxt/content'
-import { useChat } from '@ai-sdk/vue'
-import ProseStreamPre from './prose/PreStream.vue'
-
-const components = {
-  pre: ProseStreamPre as unknown as DefineComponent
-}
-
-interface ContentSearchFile {
-  id: string
-  title: string
-  titles: string[]
-  level: number
-  content: string
-}
-
-defineProps<{
-  files?: ContentSearchFile[]
-  navigation?: ContentNavigationItem[]
-}>()
-
-const { frameworks, modules } = useSharedData()
-const { messages, input, handleSubmit, status, error, reload, setMessages } = useChat({
-  maxSteps: 2
-})
-
-const ai = ref(false)
-const searchTerm = ref('')
-
-const links = computed(() => [{
-  label: 'Ask AI',
-  icon: 'i-lucide-bot',
-  onSelect: (e: any) => {
-    e.preventDefault()
-
-    ai.value = true
-  }
-}, {
-  label: 'Docs',
-  icon: 'i-lucide-square-play',
-  to: '/getting-started'
-}, {
-  label: 'Components',
-  icon: 'i-lucide-square-code',
-  to: '/components'
-}, {
-  icon: 'i-lucide-sparkles',
-  label: 'Pro > Features',
-  description: 'A collection of premium Vue components.',
-  to: '/pro'
-}, {
-  icon: 'i-lucide-credit-card',
-  label: 'Pro > Pricing',
-  description: 'Free in development, buy when ready to launch.',
-  to: '/pro/pricing'
-}, {
-  icon: 'i-lucide-panels-top-left',
-  label: 'Pro > Templates',
-  description: 'Official templates made with Nuxt UI Pro.',
-  to: '/pro/templates'
-}, {
-  icon: 'i-lucide-circle-check',
-  label: 'Pro > Activate',
-  description: 'Enable Nuxt UI Pro in your production projects.',
-  to: '/pro/activate'
-}, {
-  label: 'Figma',
-  icon: 'i-simple-icons-figma',
-  to: '/figma'
-}, {
-  icon: 'i-lucide-presentation',
-  label: 'Community > Showcase',
-  description: 'Check out some of the amazing projects built with Nuxt UI.',
-  to: '/showcase'
-}, {
-  label: 'Community > Contribution',
-  description: 'A comprehensive guide on contributing to Nuxt UI, including project structure, development workflow, and best practices.',
-  icon: 'i-lucide-git-pull-request-arrow',
-  to: '/getting-started/contribution'
-}, {
-  label: 'Community > Roadmap',
-  description: 'Track our development progress in real-time.',
-  icon: 'i-lucide-map',
-  to: '/roadmap'
-}, {
-  label: 'Community > Devtools',
-  description: 'Integrate Nuxt UI with Nuxt Devtools with Compodium.',
-  icon: 'i-lucide-code',
-  to: 'https://github.com/romhml/compodium',
-  target: '_blank'
-}, {
-  label: 'Community > Team',
-  description: 'Meet the team behind Nuxt UI.',
-  icon: 'i-lucide-users',
-  to: '/team'
-}, {
-  label: 'Releases',
-  icon: 'i-lucide-rocket',
-  to: 'https://github.com/nuxt/ui/releases',
-  target: '_blank'
-}])
-
-const groups = computed(() => [{
-  id: 'ai',
-  label: 'AI',
-  ignoreFilter: true,
-  items: [{
-    label: searchTerm.value ? `Ask Nuxt AI for “${searchTerm.value}”` : 'Ask Nuxt AI',
-    icon: 'i-lucide-bot',
-    onSelect: (e: any) => {
-      e.preventDefault()
-
-      ai.value = true
-
-      if (searchTerm.value) {
-        setMessages([{
-          id: '1',
-          role: 'user',
-          content: searchTerm.value
-        }])
-
-        reload()
-      }
-    }
-  }]
-}, {
-  id: 'framework',
-  label: 'Framework',
-  items: frameworks.value
-}, {
-  id: 'module',
-  label: 'Module',
-  items: modules.value
-}])
-
-function onClose(e: Event) {
-  console.log('onClose')
-  e.preventDefault()
-
-  ai.value = false
-}
-</script>
-
-<template>
-  <LazyUContentSearch
-    v-model:search-term="searchTerm"
-    :links="links"
-    :files="files"
-    :groups="groups"
-    :navigation="navigation"
-    :fuse="{ resultLimit: 100 }"
-  >
-    <template v-if="ai" #content>
-      <UChatPalette>
-        <UChatMessages
-          :messages="messages"
-          :status="status"
-          :user="{ side: 'left', variant: 'naked', icon: 'i-lucide-user' }"
-          :assistant="{ icon: 'i-lucide-bot' }"
-        >
-          <template #content="{ message }">
-            <MDCCached
-              v-if="message.toolInvocations?.[0]?.state === 'result'"
-              :value="message.toolInvocations?.[0]?.result"
-              :cache-key="message.id"
-              unwrap="p"
-              :components="components"
-              :parser-options="{ highlight: false }"
-            />
-            <MDCCached
-              v-else-if="message.content.length > 0"
-              :value="message.content"
-              :cache-key="message.id"
-              unwrap="p"
-              :components="components"
-              :parser-options="{ highlight: false }"
-            />
-            <span v-else class="italic font-light">
-              Searching documentation...
-            </span>
-          </template>
-        </UChatMessages>
-
-        <template #prompt>
-          <UChatPrompt
-            v-model="input"
-            icon="i-lucide-search"
-            variant="naked"
-            :error="error"
-            @submit="handleSubmit"
-            @close="onClose"
-          />
-        </template>
-      </UChatPalette>
-    </template>
-  </LazyUContentSearch>
-</template>
--- a/docs/app/components/content/ComponentPropsSchema.vue
+++ b/docs/app/components/content/ComponentPropsSchema.vue
@@ -38,7 +38,7 @@ const schemaProps = computed(() => {
 </script>

 <template>
-  <ProseCollapsible v-if="schemaProps?.length" class="mt-1 mb-0">
+  <ProseCollapsible v-if="schemaProps?.length" class="mt-1">
    <ProseUl>
      <ProseLi v-for="schemaProp in schemaProps" :key="schemaProp.name">
        <HighlightInlineType :type="`${schemaProp.name}${schemaProp.required === false ? '?' : ''}: ${schemaProp.type}`" />
--- a/docs/app/components/content/SupportedLanguages.vue
+++ b/docs/app/components/content/SupportedLanguages.vue
@@ -26,7 +26,6 @@ function getEmojiFlag(locale: string): string {
    km: 'kh', // Khmer -> Cambodia
    ko: 'kr', // Korean -> South Korea
    nb: 'no', // Norwegian Bokmål -> Norway
-    sl: 'si', // Slovenian -> Slovenia
    sv: 'se', // Swedish -> Sweden
    uk: 'ua', // Ukrainian -> Ukraine
    ur: 'pk', // Urdu -> Pakistan
--- a/docs/app/components/content/examples/carousel/CarouselThumbnailsExample.vue
+++ b/docs/app/components/content/examples/carousel/CarouselThumbnailsExample.vue
@@ -17,11 +17,8 @@ function onClickPrev() {
 function onClickNext() {
  activeIndex.value++
 }
-function onSelect(index: number) {
-  activeIndex.value = index
-}

-function select(index: number) {
+function onSelect(index: number) {
  activeIndex.value = index

  carousel.value?.emblaApi?.scrollTo(index)
@@ -38,7 +35,6 @@ function select(index: number) {
      :prev="{ onClick: onClickPrev }"
      :next="{ onClick: onClickNext }"
      class="w-full max-w-xs mx-auto"
-      @select="onSelect"
    >
      <img :src="item" width="320" height="320" class="rounded-lg">
    </UCarousel>
@@ -49,7 +45,7 @@ function select(index: number) {
        :key="index"
        class="size-11 opacity-25 hover:opacity-100 transition-opacity"
        :class="{ 'opacity-100': activeIndex === index }"
-        @click="select(index)"
+        @click="onSelect(index)"
      >
        <img :src="item" width="44" height="44" class="rounded-lg">
      </div>
--- a/docs/app/components/content/examples/command-palette/CommandPaletteIgnoreFilterExample.vue
+++ b/docs/app/components/content/examples/command-palette/CommandPaletteIgnoreFilterExample.vue
@@ -1,10 +1,9 @@
 <script setup lang="ts">
-import { refDebounced } from '@vueuse/core'
-
 const searchTerm = ref('')
 const searchTermDebounced = refDebounced(searchTerm, 200)

 const { data: users, status } = await useFetch('https://jsonplaceholder.typicode.com/users', {
+  key: 'command-palette-users',
  params: { q: searchTermDebounced },
  transform: (data: { id: number, name: string, email: string }[]) => {
    return data?.map(user => ({ id: user.id, label: user.name, suffix: user.email, avatar: { src: `https://i.pravatar.cc/120?img=${user.id}` } })) || []
--- a/docs/app/components/content/examples/input-menu/InputMenuIgnoreFilterExample.vue
+++ b/docs/app/components/content/examples/input-menu/InputMenuIgnoreFilterExample.vue
@@ -1,11 +1,11 @@
 <script setup lang="ts">
-import { refDebounced } from '@vueuse/core'
 import type { AvatarProps } from '@nuxt/ui'

 const searchTerm = ref('')
 const searchTermDebounced = refDebounced(searchTerm, 200)

 const { data: users, status } = await useFetch('https://jsonplaceholder.typicode.com/users', {
+  key: 'typicode-users',
  params: { q: searchTermDebounced },
  transform: (data: { id: number, name: string }[]) => {
    return data?.map(user => ({
--- a/docs/app/components/content/examples/modal/ModalProgrammaticExample.vue
+++ b/docs/app/components/content/examples/modal/ModalProgrammaticExample.vue
@@ -13,9 +13,7 @@ const modal = overlay.create(LazyModalExample, {
 })

 async function open() {
-  const instance = modal.open()
-
-  const shouldIncrement = await instance.result
+  const shouldIncrement = await modal.open()

  if (shouldIncrement) {
    count.value++
--- a/docs/app/components/content/examples/navigation-menu/NavigationMenuContentSlotExample.vue
+++ b/docs/app/components/content/examples/navigation-menu/NavigationMenuContentSlotExample.vue
@@ -65,7 +65,6 @@ const items = [
    class="w-full justify-center"
    :ui="{
      viewport: 'sm:w-(--reka-navigation-menu-viewport-width)',
-      content: 'sm:w-auto',
      childList: 'sm:w-96',
      childLinkDescription: 'text-balance line-clamp-2'
    }"
--- a/docs/app/components/content/examples/select-menu/SelectMenuIgnoreFilterExample.vue
+++ b/docs/app/components/content/examples/select-menu/SelectMenuIgnoreFilterExample.vue
@@ -1,11 +1,11 @@
 <script setup lang="ts">
-import { refDebounced } from '@vueuse/core'
 import type { AvatarProps } from '@nuxt/ui'

 const searchTerm = ref('')
 const searchTermDebounced = refDebounced(searchTerm, 200)

 const { data: users, status } = await useFetch('https://jsonplaceholder.typicode.com/users', {
+  key: 'typicode-users',
  params: { q: searchTermDebounced },
  transform: (data: { id: number, name: string }[]) => {
    return data?.map(user => ({
--- a/docs/app/components/content/examples/slideover/SlideoverProgrammaticExample.vue
+++ b/docs/app/components/content/examples/slideover/SlideoverProgrammaticExample.vue
@@ -13,9 +13,7 @@ const slideover = overlay.create(LazySlideoverExample, {
 })

 async function open() {
-  const instance = slideover.open()
-
-  const shouldIncrement = await instance.result
+  const shouldIncrement = await slideover.open()

  if (shouldIncrement) {
    count.value++
--- a/docs/app/components/content/examples/table/TableGroupedRowsExample.vue
+++ b/docs/app/components/content/examples/table/TableGroupedRowsExample.vue
@@ -1,203 +0,0 @@
-<script setup lang="ts">
-import { h, resolveComponent } from 'vue'
-import type { TableColumn } from '@nuxt/ui'
-import { getGroupedRowModel, type GroupingOptions } from '@tanstack/vue-table'
-
-const UBadge = resolveComponent('UBadge')
-
-type Account = {
-  id: string
-  name: string
-}
-
-type PaymentStatus = 'paid' | 'failed' | 'refunded'
-
-type Payment = {
-  id: string
-  date: string
-  status: PaymentStatus
-  email: string
-  amount: number
-  account: Account
-}
-
-const getColorByStatus = (status: PaymentStatus) => {
-  return {
-    paid: 'success',
-    failed: 'error',
-    refunded: 'neutral'
-  }[status]
-}
-
-const data = ref<Payment[]>([
-  {
-    id: '4600',
-    date: '2024-03-11T15:30:00',
-    status: 'paid',
-    email: 'james.anderson@example.com',
-    amount: 594,
-    account: {
-      id: '1',
-      name: 'Account 1'
-    }
-  },
-  {
-    id: '4599',
-    date: '2024-03-11T10:10:00',
-    status: 'failed',
-    email: 'mia.white@example.com',
-    amount: 276,
-    account: {
-      id: '2',
-      name: 'Account 2'
-    }
-  },
-  {
-    id: '4598',
-    date: '2024-03-11T08:50:00',
-    status: 'refunded',
-    email: 'william.brown@example.com',
-    amount: 315,
-    account: {
-      id: '1',
-      name: 'Account 1'
-    }
-  },
-  {
-    id: '4597',
-    date: '2024-03-10T19:45:00',
-    status: 'paid',
-    email: 'emma.davis@example.com',
-    amount: 529,
-    account: {
-      id: '2',
-      name: 'Account 2'
-    }
-  },
-  {
-    id: '4596',
-    date: '2024-03-10T15:55:00',
-    status: 'paid',
-    email: 'ethan.harris@example.com',
-    amount: 639,
-    account: {
-      id: '1',
-      name: 'Account 1'
-    }
-  }
-])
-
-const columns: TableColumn<Payment>[] = [
-  {
-    id: 'title',
-    header: 'Item'
-  },
-  {
-    id: 'account_id',
-    accessorKey: 'account.id'
-  },
-  {
-    accessorKey: 'id',
-    header: '#',
-    cell: ({ row }) =>
-      row.getIsGrouped()
-        ? `${row.getValue('id')} records`
-        : `#${row.getValue('id')}`,
-    aggregationFn: 'count'
-  },
-  {
-    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
-      })
-    },
-    aggregationFn: 'max'
-  },
-  {
-    accessorKey: 'status',
-    header: 'Status'
-  },
-  {
-    accessorKey: 'email',
-    header: 'Email',
-    meta: {
-      class: {
-        td: 'w-full'
-      }
-    },
-    cell: ({ row }) =>
-      row.getIsGrouped()
-        ? `${row.getValue('email')} customers`
-        : row.getValue('email'),
-    aggregationFn: 'uniqueCount'
-  },
-  {
-    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)
-    },
-    aggregationFn: 'sum'
-  }
-]
-
-const grouping_options = ref<GroupingOptions>({
-  groupedColumnMode: 'remove',
-  getGroupedRowModel: getGroupedRowModel()
-})
-</script>
-
-<template>
-  <UTable
-    :data="data"
-    :columns="columns"
-    :grouping="['account_id', 'status']"
-    :grouping-options="grouping_options"
-    :ui="{
-      root: 'min-w-full',
-      td: 'empty:p-0' // helps with the colspaned row added for expand slot
-    }"
-  >
-    <template #title-cell="{ row }">
-      <div v-if="row.getIsGrouped()" class="flex items-center">
-        <span
-          class="inline-block"
-          :style="{ width: `calc(${row.depth} * 1rem)` }"
-        />
-
-        <UButton
-          variant="outline"
-          color="neutral"
-          class="mr-2"
-          size="xs"
-          :icon="row.getIsExpanded() ? 'i-lucide-minus' : 'i-lucide-plus'"
-          @click="row.toggleExpanded()"
-        />
-        <strong v-if="row.groupingColumnId === 'account_id'">{{
-          row.original.account.name
-        }}</strong>
-        <UBadge
-          v-else-if="row.groupingColumnId === 'status'"
-          :color="getColorByStatus(row.original.status)"
-          class="capitalize"
-          variant="subtle"
-        >
-          {{ row.original.status }}
-        </UBadge>
-      </div>
-    </template>
-  </UTable>
-</template>
--- a/docs/app/components/content/examples/tabs/TabsCustomSlotExample.vue
+++ b/docs/app/components/content/examples/tabs/TabsCustomSlotExample.vue
@@ -26,7 +26,7 @@ const state = reactive({
 </script>

 <template>
-  <UTabs :items="items" variant="link" class="gap-4 w-full" :ui="{ trigger: 'grow' }">
+  <UTabs :items="items" variant="link" class="gap-4 w-full" :ui="{ trigger: 'flex-1' }">
    <template #account="{ item }">
      <p class="text-muted mb-4">
        {{ item.description }}
--- a/docs/app/components/content/examples/tabs/TabsModelValueExample.vue
+++ b/docs/app/components/content/examples/tabs/TabsModelValueExample.vue
@@ -1,32 +1,22 @@
 <script setup lang="ts">
 import type { TabsItem } from '@nuxt/ui'

-const route = useRoute()
-const router = useRouter()
-
 const items: TabsItem[] = [
  {
-    label: 'Account',
-    value: 'account'
+    label: 'Account'
  },
  {
-    label: 'Password',
-    value: 'password'
+    label: 'Password'
  }
 ]

-const active = computed({
-  get() {
-    return (route.query.tab as string) || 'account'
-  },
-  set(tab) {
-    // Hash is specified here to prevent the page from scrolling to the top
-    router.push({
-      path: '/components/tabs',
-      query: { tab },
-      hash: '#control-active-item'
-    })
-  }
+const active = ref('0')
+
+// Note: This is for demonstration purposes only. Don't do this at home.
+onMounted(() => {
+  setInterval(() => {
+    active.value = String((Number(active.value) + 1) % items.length)
+  }, 2000)
 })
 </script>

--- a/docs/app/components/prose/PreStream.vue
+++ b/docs/app/components/prose/PreStream.vue
@@ -1,44 +0,0 @@
-<script setup lang="ts">
-import { ShikiCachedRenderer } from 'shiki-stream/vue'
-
-const colorMode = useColorMode()
-const highlighter = await useHighlighter()
-const props = defineProps<{
-  code: string
-  language: string
-  class?: string
-  meta?: string
-}>()
-const trimmedCode = computed(() => {
-  return props.code.trim().replace(/`+$/, '')
-})
-const lang = computed(() => {
-  switch (props.language) {
-    case 'vue':
-      return 'vue'
-    case 'javascript':
-      return 'js'
-    case 'typescript':
-      return 'ts'
-    case 'css':
-      return 'css'
-    default:
-      return props.language
-  }
-})
-const key = computed(() => {
-  return `${lang.value}-${colorMode.value}`
-})
-</script>
-
-<template>
-  <ProsePre v-bind="props">
-    <ShikiCachedRenderer
-      :key="key"
-      :highlighter="highlighter"
-      :code="trimmedCode"
-      :lang="lang"
-      :theme="colorMode.value === 'dark' ? 'material-theme-palenight' : 'material-theme-lighter'"
-    />
-  </ProsePre>
-</template>
--- a/docs/app/composables/useHighlighter.ts
+++ b/docs/app/composables/useHighlighter.ts
@@ -1,21 +0,0 @@
-import { createHighlighter, type HighlighterGeneric } from 'shiki'
-import { createJavaScriptRegexEngine } from 'shiki/engine-javascript.mjs'
-
-let highlighter: HighlighterGeneric<any, any> | null = null
-
-let promise: Promise<HighlighterGeneric<any, any>> | null = null
-
-export const useHighlighter = async () => {
-  if (!promise) {
-    promise = createHighlighter({
-      langs: ['vue', 'js', 'ts', 'css', 'html', 'json', 'yaml', 'markdown', 'bash'],
-      themes: ['material-theme-palenight', 'material-theme-lighter'],
-      engine: createJavaScriptRegexEngine()
-    })
-  }
-  if (!highlighter) {
-    highlighter = await promise
-  }
-
-  return highlighter
-}
--- a/docs/app/composables/useLinks.ts
+++ b/docs/app/composables/useLinks.ts
@@ -98,7 +98,7 @@ export function useLinks() {
      label: 'Raycast Extension',
      description: 'Access Nuxt UI components without leaving your editor.',
      icon: 'i-simple-icons-raycast',
-      to: 'https://www.raycast.com/HugoRCD/nuxt',
+      to: 'https://www.raycast.com/HugoRCD/nuxt-ui',
      target: '_blank'
    }, {
      label: 'Figma to Code',
--- a/docs/app/composables/useSearchLinks.ts
+++ b/docs/app/composables/useSearchLinks.ts
@@ -0,0 +1,66 @@
+export function useSearchLinks() {
+  return [{
+    label: 'Docs',
+    icon: 'i-lucide-square-play',
+    to: '/getting-started'
+  }, {
+    label: 'Components',
+    icon: 'i-lucide-square-code',
+    to: '/components'
+  }, {
+    icon: 'i-lucide-sparkles',
+    label: 'Pro > Features',
+    description: 'A collection of premium Vue components.',
+    to: '/pro'
+  }, {
+    icon: 'i-lucide-credit-card',
+    label: 'Pro > Pricing',
+    description: 'Free in development, buy when ready to launch.',
+    to: '/pro/pricing'
+  }, {
+    icon: 'i-lucide-panels-top-left',
+    label: 'Pro > Templates',
+    description: 'Official templates made with Nuxt UI Pro.',
+    to: '/pro/templates'
+  }, {
+    icon: 'i-lucide-circle-check',
+    label: 'Pro > Activate',
+    description: 'Enable Nuxt UI Pro in your production projects.',
+    to: '/pro/activate'
+  }, {
+    label: 'Figma',
+    icon: 'i-simple-icons-figma',
+    to: '/figma'
+  }, {
+    icon: 'i-lucide-presentation',
+    label: 'Community > Showcase',
+    description: 'Check out some of the amazing projects built with Nuxt UI.',
+    to: '/showcase'
+  }, {
+    label: 'Community > Contribution',
+    description: 'A comprehensive guide on contributing to Nuxt UI, including project structure, development workflow, and best practices.',
+    icon: 'i-lucide-git-pull-request-arrow',
+    to: '/getting-started/contribution'
+  }, {
+    label: 'Community > Roadmap',
+    description: 'Track our development progress in real-time.',
+    icon: 'i-lucide-map',
+    to: '/roadmap'
+  }, {
+    label: 'Community > Devtools',
+    description: 'Integrate Nuxt UI with Nuxt Devtools with Compodium.',
+    icon: 'i-lucide-code',
+    to: 'https://github.com/romhml/compodium',
+    target: '_blank'
+  }, {
+    label: 'Community > Team',
+    description: 'Meet the team behind Nuxt UI.',
+    icon: 'i-lucide-users',
+    to: '/team'
+  }, {
+    label: 'Releases',
+    icon: 'i-lucide-rocket',
+    to: 'https://github.com/nuxt/ui/releases',
+    target: '_blank'
+  }]
+}
--- a/docs/app/error.vue
+++ b/docs/app/error.vue
@@ -15,6 +15,7 @@ const { data: files } = useLazyAsyncData('search', () => queryCollectionSearchSe
 })

 const links = useLinks()
+const searchLinks = useSearchLinks()
 const color = computed(() => colorMode.value === 'dark' ? (colors as any)[appConfig.ui.colors.neutral][900] : 'white')
 const radius = computed(() => `:root { --ui-radius: ${appConfig.theme.radius}rem; }`)
 const blackAsPrimary = computed(() => appConfig.theme.blackAsPrimary ? `:root { --ui-primary: black; } .dark { --ui-primary: white; }` : ':root {}')
@@ -48,6 +49,7 @@ useServerSeoMeta({

 useFaviconFromTheme()

+const { frameworks, modules } = useSharedData()
 const { mappedNavigation, filteredNavigation } = useContentNavigation(navigation)

 provide('navigation', mappedNavigation)
@@ -57,7 +59,7 @@ provide('navigation', mappedNavigation)
  <UApp>
    <NuxtLoadingIndicator color="#FFF" />

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

    <Header :links="links" />

@@ -65,6 +67,22 @@ provide('navigation', mappedNavigation)

    <Footer />

-    <Search :files="files" :navigation="filteredNavigation" />
+    <ClientOnly>
+      <LazyUContentSearch
+        :links="searchLinks"
+        :files="files"
+        :groups="[{
+          id: 'framework',
+          label: 'Framework',
+          items: frameworks
+        }, {
+          id: 'module',
+          label: 'Module',
+          items: modules
+        }]"
+        :navigation="filteredNavigation"
+        :fuse="{ resultLimit: 100 }"
+      />
+    </ClientOnly>
  </UApp>
 </template>
--- a/docs/app/pages/[...slug].vue
+++ b/docs/app/pages/[...slug].vue
@@ -65,17 +65,13 @@ if (!import.meta.prerender) {
  })
 }

-const title = page.value?.navigation?.title ? page.value.navigation.title : page.value?.title
-const prefix = page.value?.path.includes('components') || page.value?.path.includes('composables') ? 'Vue ' : ''
-const suffix = page.value?.path.includes('components') ? 'Component ' : page.value?.path.includes('composables') ? 'Composable ' : ''
-const description = page.value?.description
-
+const type = page.value?.path.includes('components') ? 'Vue Component ' : page.value?.path.includes('composables') ? 'Vue Composable ' : ''
 useSeoMeta({
-  titleTemplate: `${prefix}%s ${suffix}- Nuxt UI ${page.value?.module === 'ui-pro' ? 'Pro' : ''} ${page.value?.framework === 'vue' ? ' for Vue' : ''}`,
-  title,
-  ogTitle: `${prefix}${title} ${suffix}- Nuxt UI ${page.value?.module === 'ui-pro' ? 'Pro' : ''} ${page.value?.framework === 'vue' ? ' for Vue' : ''}`,
-  description,
-  ogDescription: description
+  titleTemplate: `%s ${type}- Nuxt UI ${page.value.module === 'ui-pro' ? 'Pro' : ''} ${page.value.framework === 'vue' ? ' for Vue' : ''}`,
+  title: page.value.navigation?.title ? page.value.navigation.title : page.value.title,
+  ogTitle: `${page.value.navigation?.title ? page.value.navigation.title : page.value.title} ${type}- Nuxt UI ${page.value.module === 'ui-pro' ? 'Pro' : ''} ${page.value.framework === 'vue' ? ' for Vue' : ''}`,
+  description: page.value.description,
+  ogDescription: page.value.description
 })

 if (route.path.startsWith('/components')) {
--- a/docs/app/pages/examples/[...slug].vue
+++ b/docs/app/pages/examples/[...slug].vue
@@ -1,20 +1,8 @@
 <script setup lang="ts">
 const route = useRoute()
-const colorMode = useColorMode()
-const appConfig = useAppConfig()

 const name = route.params.slug?.[0]

-if (route.query.theme) {
-  colorMode.preference = route.query.theme === 'light' ? 'light' : 'dark'
-}
-if (route.query.neutral) {
-  appConfig.ui.colors.neutral = route.query.neutral as string
-}
-if (route.query.primary) {
-  appConfig.ui.colors.primary = route.query.primary as string
-}
-
 const width = computed(() => route.query.width && Number.parseInt(route.query.width as string) > 0 ? `${Number.parseInt(route.query.width as string) - 2}px` : '864px')
 </script>

--- a/docs/app/pages/figma/index.vue
+++ b/docs/app/pages/figma/index.vue
@@ -24,41 +24,32 @@ onMounted(async () => {
  const nuxtWordPosition = document.querySelector('#nuxt')?.getBoundingClientRect()
  const initialScrollX = window.scrollX
  const initialScrollY = window.scrollY
-
  if (figmaWordPosition && nuxtWordPosition) {
-    const cursor1Sequence = async () => {
-      await animate('#cursor1', { left: Math.round(Math.random() * window.outerWidth), top: Math.round(Math.random() * window.outerHeight) }, { duration: 0.1 }).finished
-      await animate('#cursor1', { opacity: 1 }, { duration: 0.3 }).finished
-      await animate('#cursor1', {
-        left: Math.round(figmaWordPosition.left + initialScrollX + figmaWordPosition.width / 2),
-        top: Math.round(figmaWordPosition.top + initialScrollY - figmaWordPosition.height / 4)
-      }, { duration: 1.5, delay: 0.2, ease: 'easeInOut' }).finished
-      await animate('#cursor1', { scale: 0.8 }, { duration: 0.1, ease: 'easeOut' }).finished
-      await animate('#cursor1', { scale: 1 }, { duration: 0.1, ease: 'easeOut' }).finished
-      await animate('#figma', { color: 'var(--ui-info)' }, { duration: 0.3, ease: 'easeOut' }).finished
-      await animate('#cursor1', {
-        left: Math.round(figmaWordPosition.left + initialScrollX + figmaWordPosition.width),
-        top: Math.round(figmaWordPosition.top + initialScrollY)
-      }, { duration: 0.6, ease: 'easeInOut' }).finished
-    }
+    animate('#cursor1', { left: Math.round(Math.random() * window.outerWidth), top: Math.round(Math.random() * window.outerHeight) }, { duration: 0.1 })
+      .then(() => animate('#cursor1', { opacity: 1 }, { duration: 0.3 }))
+      .then(() => {
+        return animate('#cursor1', {
+          left: Math.round(figmaWordPosition.left + initialScrollX + figmaWordPosition.width / 2),
+          top: Math.round(figmaWordPosition.top + initialScrollY - figmaWordPosition.height / 4)
+        }, { duration: 1.5, delay: 0.2, ease: 'easeInOut' })
+      })
+      .then(() => animate('#cursor1', { scale: 0.8 }, { duration: 0.1, ease: 'easeOut' }))
+      .then(() => animate('#cursor1', { scale: 1 }, { duration: 0.1, ease: 'easeOut' }))
+      .then(() => animate('#figma', { color: 'var(--ui-info)' }, { duration: 0.3, ease: 'easeOut' }))
+      .then(() => animate('#cursor1', { left: Math.round(figmaWordPosition.left + initialScrollX + figmaWordPosition.width), top: Math.round(figmaWordPosition.top + initialScrollY) }, { duration: 0.6, ease: 'easeInOut' }))

-    const cursor2Sequence = async () => {
-      await animate('#cursor2', { left: Math.round(Math.random() * window.outerWidth), top: Math.round(Math.random() * window.outerHeight) }, { duration: 0.1, delay: 0.6 }).finished
-      await animate('#cursor2', { opacity: 1 }, { duration: 0.3 }).finished
-      await animate('#cursor2', {
-        left: Math.round(nuxtWordPosition.left + initialScrollX + nuxtWordPosition.width / 2),
-        top: Math.round(nuxtWordPosition.top + initialScrollY - nuxtWordPosition.height / 4)
-      }, { duration: 1.5, delay: 0.2, ease: 'easeInOut' }).finished
-      await animate('#cursor2', { scale: 0.8 }, { duration: 0.1, ease: 'easeOut' }).finished
-      await animate('#cursor2', { scale: 1 }, { duration: 0.1, ease: 'easeOut' }).finished
-      await animate('#nuxt', { color: 'var(--ui-success)' }, { duration: 0.3, ease: 'easeOut' }).finished
-      await animate('#cursor2', {
-        left: Math.round(nuxtWordPosition.left + initialScrollX + nuxtWordPosition.width),
-        top: Math.round(nuxtWordPosition.top + initialScrollY)
-      }, { duration: 0.6, ease: 'easeInOut' }).finished
-    }
-
-    await Promise.all([cursor1Sequence(), cursor2Sequence()])
+    animate('#cursor2', { left: Math.round(Math.random() * window.outerWidth), top: Math.round(Math.random() * window.outerHeight) }, { duration: 0.1, delay: 0.6 })
+      .then(() => animate('#cursor2', { opacity: 1 }, { duration: 0.3 }))
+      .then(() => {
+        return animate('#cursor2', {
+          left: Math.round(nuxtWordPosition.left + initialScrollX + nuxtWordPosition.width / 2),
+          top: Math.round(nuxtWordPosition.top + initialScrollY - nuxtWordPosition.height / 4)
+        }, { duration: 1.5, delay: 0.2, ease: 'easeInOut' })
+      })
+      .then(() => animate('#cursor2', { scale: 0.8 }, { duration: 0.1, ease: 'easeOut' }))
+      .then(() => animate('#cursor2', { scale: 1 }, { duration: 0.1, ease: 'easeOut' }))
+      .then(() => animate('#nuxt', { color: 'var(--ui-success)' }, { duration: 0.3, ease: 'easeOut' }))
+      .then(() => animate('#cursor2', { left: Math.round(nuxtWordPosition.left + initialScrollX + nuxtWordPosition.width), top: Math.round(nuxtWordPosition.top + initialScrollY) }, { duration: 0.6, ease: 'easeInOut' }))
  }
 })
 </script>
--- a/docs/app/pages/index.vue
+++ b/docs/app/pages/index.vue
@@ -239,7 +239,7 @@ useIntersectionObserver(contributorsRef, ([entry]) => {
        <li>
          <NuxtLink to="https://github.com/nuxt/ui/graphs/contributors" target="_blank" class="min-w-0">
            <p class="text-4xl font-semibold text-highlighted truncate">
-              200+
+              175+
            </p>
            <p class="text-muted text-sm truncate">Contributors</p>
          </NuxtLink>
--- a/docs/app/pages/pro/.content/templates.yml
+++ b/docs/app/pages/pro/.content/templates.yml
@@ -16,32 +16,6 @@ links:
    variant: outline
    trailingIcon: i-lucide-arrow-right
 templates:
-  - title: 'Portfolio'
-    description: "A sleek, modern portfolio template to showcase your work, skills, blog posts, speaking engagements, and provide contact information. Which can customized easily from the `content/` directory."
-    icon: i-lucide-user
-    thumbnail:
-      dark: https://assets.hub.nuxt.com/eyJ0eXAiOiJKV1QiLCJhbGciOiJIUzI1NiJ9.eyJ1cmwiOiJodHRwczovL3BvcnRmb2xpby10ZW1wbGF0ZS5udXh0LmRldiIsImlhdCI6MTc0NTkzNDczMX0.XDWnQoyVy3XVtKQD6PLQ8RFUwr4yr1QnVwPxRrjCrro.jpg?theme=dark
-      light: https://assets.hub.nuxt.com/eyJ0eXAiOiJKV1QiLCJhbGciOiJIUzI1NiJ9.eyJ1cmwiOiJodHRwczovL3BvcnRmb2xpby10ZW1wbGF0ZS5udXh0LmRldiIsImlhdCI6MTc0NTkzNDczMX0.XDWnQoyVy3XVtKQD6PLQ8RFUwr4yr1QnVwPxRrjCrro.jpg?theme=light
-    features:
-      - title: Sections for Projects, Blog, Speaking & About
-        icon: i-lucide-layout-list
-      - title: Easily editable content via Markdown & YAML
-        icon: i-simple-icons-markdown
-      - title: Fully responsive design
-        icon: i-lucide-smartphone
-    links:
-      - label: Preview
-        to: https://portfolio-template.nuxt.dev
-        target: _blank
-        leadingIcon: i-logos-nuxt-icon
-        trailingIcon: i-lucide-arrow-up-right
-        color: neutral
-      - label: Nuxt Template
-        to: https://github.com/nuxt-ui-pro/portfolio
-        target: _blank
-        icon: i-simple-icons-github
-        color: neutral
-        variant: outline
  - title: 'Chat'
    description: "An AI chatbot template designed to help you build your own chatbot with Nuxt UI Pro components and deployed on [NuxtHub](https://hub.nuxt.com)."
    icon: i-lucide-message-circle
--- a/docs/app/pages/showcase.vue
+++ b/docs/app/pages/showcase.vue
@@ -67,6 +67,17 @@ defineOgImageComponent('Docs', {
          </li>
        </ul>
      </div>
+
+      <div class="flex justify-center -mb-[36px]">
+        <UButton
+          label="Submit your project"
+          trailing-icon="i-lucide-plus"
+          color="neutral"
+          size="lg"
+          to="https://github.com/nuxt/ui/edit/v3/docs/content/showcase.yml"
+          target="_blank"
+        />
+      </div>
    </UPageHero>
  </UMain>
 </template>
--- a/docs/app/pages/team.vue
+++ b/docs/app/pages/team.vue
@@ -48,14 +48,13 @@ const icons = {
    </UPageHero>

    <UPageSection :ui="{ container: '!pt-0' }">
-      <UPageGrid class="xl:grid-cols-5">
+      <UPageGrid class="xl:grid-cols-4">
        <UPageCard
          v-for="(user, index) in module?.team"
          :key="index"
          :title="user.name"
          :description="[user.pronouns, user.location].filter(Boolean).join(' ・ ')"
          :ui="{
-            wrapper: 'items-center',
            container: 'gap-y-4 lg:p-8',
            leading: 'flex justify-center',
            title: 'text-center',
@@ -124,7 +123,6 @@ const icons = {
          :key="contributor.username"
          :title="contributor.username"
          :ui="{
-            wrapper: 'items-center',
            container: 'gap-y-2',
            leading: 'flex justify-center',
            title: 'text-center',
--- a/docs/content/1.getting-started/2.migration.md
+++ b/docs/content/1.getting-started/2.migration.md
@@ -504,7 +504,7 @@ const count = ref(0)
 </script>
 ```

-Closing a modal is now done through the `close` event. The `modal.open` method now returns an instance that can be used to await for the result of the modal whenever the modal is closed:
+Closing a modal is now done through the `close` event. The `modal.open` method now returns a promise that resolves to the result of the modal whenever the modal is close:

 ```diff
 <script setup lang="ts">
@@ -523,12 +523,10 @@ import { ModalExampleComponent } from '#components'
 -   })
 - }
 + async function openModal() {
-+   const instance = modal.open(ModalExampleComponent, {
+   const result = await modal.open(ModalExampleComponent, {
 +     count: count.value
 +   })
 +
-+   const result = await instance.result
-+
 +   if (result) {
 +     toast.add({ title: 'Success!' })
 +   }
--- a/docs/content/1.getting-started/3.theme.md
+++ b/docs/content/1.getting-started/3.theme.md
@@ -229,10 +229,6 @@ export default defineConfig({

 ::

-::caution
-When configuring your theme colors, you must use either color names from the [default Tailwind palette](https://tailwindcss.com/docs/colors) (like 'blue', 'green', etc.) or reference custom colors that you've previously defined in your [CSS file](#theme).
-::
-
 ### Extend colors

 ::framework-only
@@ -731,22 +727,15 @@ This is how the `@theme` is generated for each design token:
  --border-color-muted: var(--ui-border-muted);
  --border-color-accented: var(--ui-border-accented);
  --border-color-inverted: var(--ui-border-inverted);
-  --border-color-bg: var(--ui-bg);
  --ring-color-default: var(--ui-border);
  --ring-color-muted: var(--ui-border-muted);
  --ring-color-accented: var(--ui-border-accented);
  --ring-color-inverted: var(--ui-border-inverted);
  --ring-color-bg: var(--ui-bg);
-  --ring-offset-color-default: var(--ui-border);
-  --ring-offset-color-muted: var(--ui-border-muted);
-  --ring-offset-color-accented: var(--ui-border-accented);
-  --ring-offset-color-inverted: var(--ui-border-inverted);
-  --ring-offset-color-bg: var(--ui-bg);
  --divide-color-default: var(--ui-border);
  --divide-color-muted: var(--ui-border-muted);
  --divide-color-accented: var(--ui-border-accented);
  --divide-color-inverted: var(--ui-border-inverted);
-  --divide-color-bg: var(--ui-bg);
  --outline-color-default: var(--ui-border);
  --outline-color-inverted: var(--ui-border-inverted);
  --stroke-color-default: var(--ui-border);
@@ -977,7 +966,7 @@ export default {

 ```vue [src/runtime/components/Card.vue]
 <template>
-  <div :class="ui.root({ class: [props.ui?.root, props.class] })">
+  <div :class="ui.root({ class: [props.class, props.ui?.root] })">
    <div :class="ui.header({ class: props.ui?.header })">
      <slot name="header" />
    </div>
--- a/docs/content/1.getting-started/contribution.md
+++ b/docs/content/1.getting-started/contribution.md
@@ -16,7 +16,7 @@ Here's an overview of the key directories and files in the Nuxt UI project struc

 ### Documentation

-The documentation lives in the `docs` folder as a Nuxt app using `@nuxt/content` v3 to generate pages from Markdown files. See the [Nuxt Content documentation](https://content.nuxt.com/docs/getting-started) for details on how it works. Here's a breakdown of its structure:
+The documentation lives in the `docs` folder as a Nuxt app using `@nuxt/content` v3 to generate pages from Markdown files. See the [Content v3 Docs](https://content3.nuxt.dev/docs/getting-started) for details on how it works. Here's a breakdown of its structure:

 ```bash
 ├── app/
--- a/docs/content/2.composables/define-shortcuts.md
+++ b/docs/content/2.composables/define-shortcuts.md
@@ -19,7 +19,6 @@ defineShortcuts({
 </script>
 ```

- Shortcuts are automatically adjusted for non-macOS platforms, converting `meta` to `ctrl`.
 - The composable uses VueUse's [`useEventListener`](https://vueuse.org/core/useEventListener/) to handle keydown events.
 - For a complete list of available shortcut keys, refer to the [`KeyboardEvent.key`](https://developer.mozilla.org/en-US/docs/Web/API/UI_Events/Keyboard_event_key_values) API documentation. Note that the key should be written in lowercase.

@@ -47,7 +46,7 @@ Shortcuts are defined using the following format:

 #### Modifiers

- `meta`: Represents `⌘ Command` on macOS and `Ctrl` on other platforms
+- `meta`: Represents `⌘ Command` on macOS and `⊞ Windows` on Windows
 - `ctrl`: Represents `Ctrl` on all platforms
 - `shift`: Used for alphabetic keys when Shift is required

--- a/docs/content/2.composables/use-overlay.md
+++ b/docs/content/2.composables/use-overlay.md
@@ -22,14 +22,14 @@ async function openModal() {
 - The `useOverlay` composable is created using `createSharedComposable`, ensuring that the same overlay state is shared across your entire application.

 ::note
-In order to return a value from the overlay, the `overlay.open().instance.result` can be awaited. In order for this to work, however, the **overlay component must emit a `close` event**. See example below for details.
+In order to return a value from the overlay, the `overlay.open()` can be awaited. In order for this to work, however, the **overlay component must emit a `close` event**. See example below for details.
 ::

 ## API

 ### `create(component: T, options: OverlayOptions): OverlayInstance`

-Creates an overlay, and returns a factory instance
+Creates an overlay, and returns its instance

 - Parameters:
  - `component`: The overlay component
@@ -38,7 +38,7 @@ Creates an overlay, and returns a factory instance
    - `props?: ComponentProps`: An optional object of props to pass to the rendered component.
    - `destroyOnClose?: boolean` Removes the overlay from memory when closed `default: false`

-### `open(id: symbol, props?: ComponentProps<T>): OpenedOverlay<T>`
+### `open(id: symbol, props?: ComponentProps<T>): Promise<any>`

 Opens the overlay using its `id`

@@ -62,17 +62,10 @@ Update an overlay using its `id`
  - `id`: The identifier of the overlay
  - `props`: An object of props to update on the rendered component.

-### `unMount(id: symbol): void`
+### `unmount(id: symbol): void`

 Removes the overlay from the DOM using its `id`

- Parameters:
-  - `id`: The identifier of the overlay
-
-### `isOpen(id: symbol): boolean`
-
-Checks if an overlay its open using its `id`
-
 - Parameters:
  - `id`: The identifier of the overlay

@@ -82,7 +75,7 @@ In-memory list of overlays that were created

 ## Overlay Instance API

-### `open(props?: ComponentProps<T>): Promise<OpenedOverlay<T>>`
+### `open(props?: ComponentProps<T>): Promise<any>`

 Opens the overlay

@@ -145,7 +138,7 @@ const overlay = useOverlay()

 // Create with default props
 const modalA = overlay.create(ModalA, { title: 'Welcome' })
-const modalB = overlay.create(ModalB)
+const modalB = overlay.create(modalB)

 const slideoverA = overlay.create(SlideoverA)

@@ -156,9 +149,7 @@ const openModalA = () => {

 const openModalB = async () => {
  // Open modalB, and wait for its result
-  const modalBInstance = modalB.open()
-
-  const input = await modalBInstance.result
+  const input = await modalB.open()

  // Pass the result from modalB to the slideover, and open it.
  slideoverA.open({ input })
--- a/docs/content/3.components/accordion.md
+++ b/docs/content/3.components/accordion.md
@@ -23,8 +23,6 @@ Use the `items` prop as an array of objects with the following properties:
 - `value?: string`{lang="ts-type"}
 - `disabled?: boolean`{lang="ts-type"}
 - [`slot?: string`{lang="ts-type"}](#with-custom-slot)
- `class?: any`{lang="ts-type"}
- `ui?: { item?: ClassNameValue, header?: ClassNameValue, trigger?: ClassNameValue, leadingIcon?: ClassNameValue, label?: ClassNameValue, trailingIcon?: ClassNameValue, content?: ClassNameValue, body?: ClassNameValue }`{lang="ts-type"}

 ::component-code
 ---
--- a/docs/content/3.components/breadcrumb.md
+++ b/docs/content/3.components/breadcrumb.md
@@ -16,9 +16,8 @@ Use the `items` prop as an array of objects with the following properties:
 - `label?: string`{lang="ts-type"}
 - `icon?: string`{lang="ts-type"}
 - `avatar?: AvatarProps`{lang="ts-type"}
- [`slot?: string`{lang="ts-type"}](#with-custom-slot)
 - `class?: any`{lang="ts-type"}
- `ui?: { item?: ClassNameValue, link?: ClassNameValue, linkLeadingIcon?: ClassNameValue, linkLeadingAvatar?: ClassNameValue, linkLabel?: ClassNameValue, separator?: ClassNameValue, separatorIcon?: ClassNameValue }`{lang="ts-type"}
+- [`slot?: string`{lang="ts-type"}](#with-custom-slot)

 You can pass any property from the [Link](/components/link#props) component such as `to`, `target`, etc.

--- a/docs/content/3.components/carousel.md
+++ b/docs/content/3.components/carousel.md
@@ -27,11 +27,6 @@ class: 'p-8'
 ---
 ::

-You can also pass an array of objects with the following properties:
-
- `class?: any`{lang="ts-type"}
- `ui?: { item?: ClassNameValue }`{lang="ts-type"}
-
 You can control how many items are visible by using the [`basis`](https://tailwindcss.com/docs/flex-basis) / [`width`](https://tailwindcss.com/docs/width) utility classes on the `item`:

 ::component-example
--- a/docs/content/3.components/checkbox-group.md
+++ b/docs/content/3.components/checkbox-group.md
@@ -49,8 +49,6 @@ You can also pass an array of objects with the following properties:
 - `description?: string`{lang="ts-type"}
 - [`value?: string`{lang="ts-type"}](#value-key)
 - `disabled?: boolean`{lang="ts-type"}
- `class?: any`{lang="ts-type"}
- `ui?: { item?: ClassNameValue, container?: ClassNameValue, base?: ClassNameValue, 'indicator'?: ClassNameValue, icon?: ClassNameValue, wrapper?: ClassNameValue, label?: ClassNameValue, description?: ClassNameValue }`{lang="ts-type"}

 ::component-code
 ---
@@ -201,7 +199,6 @@ items:
  variant:
    - list
    - card
-    - table
 props:
  color: 'primary'
  variant: 'card'
@@ -232,7 +229,6 @@ items:
  variant:
    - list
    - card
-    - table
 props:
  size: 'xl'
  variant: 'list'
@@ -263,7 +259,6 @@ items:
  variant:
    - list
    - card
-    - table
 props:
  orientation: 'horizontal'
  variant: 'list'
@@ -298,7 +293,6 @@ items:
  variant:
    - list
    - card
-    - table
 props:
  indicator: 'end'
  variant: 'card'
--- a/docs/content/3.components/command-palette.md
+++ b/docs/content/3.components/command-palette.md
@@ -7,9 +7,9 @@ links:
    icon: i-custom-fuse-js
    to: https://fusejs.io/
    target: _blank
-  - label: Listbox
+  - label: Combobox
    icon: i-custom-reka-ui
-    to: https://reka-ui.com/docs/components/listbox
+    to: https://reka-ui.com/docs/components/combobox
  - label: GitHub
    icon: i-simple-icons-github
    to: https://github.com/nuxt/ui/tree/v3/src/runtime/components/CommandPalette.vue
@@ -53,8 +53,6 @@ Each group contains an `items` array of objects that define the commands. Each i
 - `disabled?: boolean`{lang="ts-type"}
 - [`slot?: string`{lang="ts-type"}](#with-custom-slot)
 - `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"}

 You can pass any property from the [Link](/components/link#props) component such as `to`, `target`, etc.

--- a/docs/content/3.components/context-menu.md
+++ b/docs/content/3.components/context-menu.md
@@ -28,12 +28,11 @@ Use the `items` prop as an array of objects with the following properties:
 - [`color?: "error" | "primary" | "secondary" | "success" | "info" | "warning" | "neutral"`{lang="ts-type"}](#with-color-items)
 - [`checked?: boolean`{lang="ts-type"}](#with-checkbox-items)
 - `disabled?: boolean`{lang="ts-type"}
+- `class?: any`{lang="ts-type"}
 - [`slot?: string`{lang="ts-type"}](#with-custom-slot)
 - `onSelect?(e: Event): void`{lang="ts-type"}
 - [`onUpdateChecked?(checked: boolean): void`{lang="ts-type"}](#with-checkbox-items)
 - `children?: ContextMenuItem[] | ContextMenuItem[][]`{lang="ts-type"}
- `class?: any`{lang="ts-type"}
- `ui?: { item?: ClassNameValue, label?: ClassNameValue, separator?: ClassNameValue, itemLeadingIcon?: ClassNameValue, itemLeadingAvatarSize?: ClassNameValue, itemLeadingAvatar?: ClassNameValue, itemLabel?: ClassNameValue, itemLabelExternalIcon?: ClassNameValue, itemTrailing?: ClassNameValue, itemTrailingIcon?: ClassNameValue, itemTrailingKbds?: ClassNameValue, itemTrailingKbdsSize?: ClassNameValue }`{lang="ts-type"}

 You can pass any property from the [Link](/components/link#props) component such as `to`, `target`, etc.

--- a/docs/content/3.components/dropdown-menu.md
+++ b/docs/content/3.components/dropdown-menu.md
@@ -28,12 +28,11 @@ Use the `items` prop as an array of objects with the following properties:
 - [`color?: "error" | "primary" | "secondary" | "success" | "info" | "warning" | "neutral"`{lang="ts-type"}](#with-color-items)
 - [`checked?: boolean`{lang="ts-type"}](#with-checkbox-items)
 - `disabled?: boolean`{lang="ts-type"}
+- `class?: any`{lang="ts-type"}
 - [`slot?: string`{lang="ts-type"}](#with-custom-slot)
 - `onSelect?(e: Event): void`{lang="ts-type"}
 - [`onUpdateChecked?(checked: boolean): void`{lang="ts-type"}](#with-checkbox-items)
 - `children?: DropdownMenuItem[] | DropdownMenuItem[][]`{lang="ts-type"}
- `class?: any`{lang="ts-type"}
- `ui?: { item?: ClassNameValue, label?: ClassNameValue, separator?: ClassNameValue, itemLeadingIcon?: ClassNameValue, itemLeadingAvatarSize?: ClassNameValue, itemLeadingAvatar?: ClassNameValue, itemLabel?: ClassNameValue, itemLabelExternalIcon?: ClassNameValue, itemTrailing?: ClassNameValue, itemTrailingIcon?: ClassNameValue, itemTrailingKbds?: ClassNameValue, itemTrailingKbdsSize?: ClassNameValue }`{lang="ts-type"}

 You can pass any property from the [Link](/components/link#props) component such as `to`, `target`, etc.

--- a/docs/content/3.components/form-field.md
+++ b/docs/content/3.components/form-field.md
@@ -34,7 +34,7 @@ slots:
 The label `for` attribute and the form control are associated with a unique `id` if not provided.
 ::

-When using the `required` prop, an asterisk is added next to the label.
+When using the `required` prop, an asterisk is be added next to the label.

 ::component-code
 ---
--- a/docs/content/3.components/form.md
+++ b/docs/content/3.components/form.md
@@ -24,7 +24,7 @@ It requires two props:
 **No validation library is included** by default, ensure you **install the one you need**.
 ::

-::tabs{class="gap-0"}
+::tabs
  ::component-example{label="Valibot"}
  ---
  name: 'form-example-valibot'
--- a/docs/content/3.components/input-menu.md
+++ b/docs/content/3.components/input-menu.md
@@ -55,8 +55,6 @@ You can also pass an array of objects with the following properties:
 - [`chip?: ChipProps`{lang="ts-type"}](#with-chip-in-items)
 - `disabled?: boolean`{lang="ts-type"}
 - `onSelect?(e: Event): void`{lang="ts-type"}
- `class?: any`{lang="ts-type"}
- `ui?: { tagsItem?: ClassNameValue, tagsItemText?: ClassNameValue, tagsItemDelete?: ClassNameValue, tagsItemDeleteIcon?: ClassNameValue, label?: ClassNameValue, separator?: ClassNameValue, item?: ClassNameValue, itemLeadingIcon?: ClassNameValue, itemLeadingAvatarSize?: ClassNameValue, itemLeadingAvatar?: ClassNameValue, itemLeadingChip?: ClassNameValue, itemLeadingChipSize?: ClassNameValue, itemLabel?: ClassNameValue, itemTrailing?: ClassNameValue, itemTrailingIcon?: ClassNameValue }`{lang="ts-type"}

 ::component-code
 ---
--- a/docs/content/3.components/input-number.md
+++ b/docs/content/3.components/input-number.md
@@ -3,9 +3,9 @@ title: InputNumber
 description: Input numerical values with a customizable range.
 category: form
 links:
-  - label: NumberField
+  - label: Number Field
    icon: i-custom-reka-ui
-    to: https://www.reka-ui.com/docs/components/number-field
+    to: https://www.reka-ui.com/components/input-number
  - label: GitHub
    icon: i-simple-icons-github
    to: https://github.com/nuxt/ui/tree/v3/src/runtime/components/InputNumber.vue
--- a/docs/content/3.components/kbd.md
+++ b/docs/content/3.components/kbd.md
@@ -1,11 +1,13 @@
 ---
-title: Kbd
+title: Keyboard Key
 description: A kbd element to display a keyboard key.
 category: element
 links:
  - label: GitHub
    icon: i-simple-icons-github
    to: https://github.com/nuxt/ui/tree/v3/src/runtime/components/Kbd.vue
+navigation:
+  title: Kbd
 ---

 ## Usage
@@ -30,7 +32,7 @@ props:
 ---
 ::

-You can pass special keys to the `value` prop that goes through the [`useKbd`](https://github.com/nuxt/ui/blob/v3/src/runtime/composables/useKbd.ts) composable. For example, the `meta` key displays as `⌘` on macOS and `Ctrl` on other platforms.
+You can pass special keys to the `value` prop that goes through the [`useKbd`](https://github.com/nuxt/ui/blob/v3/src/runtime/composables/useKbd.ts) composable. For example, the `meta` key displays as `⌘` on macOS and `⊞` on other platforms.

 ::component-code
 ---
--- a/docs/content/3.components/navigation-menu.md
+++ b/docs/content/3.components/navigation-menu.md
@@ -21,19 +21,14 @@ Use the `items` prop as an array of objects with the following properties:
 - `icon?: string`{lang="ts-type"}
 - `avatar?: AvatarProps`{lang="ts-type"}
 - `badge?: string | number | BadgeProps`{lang="ts-type"}
- `tooltip?: TooltipProps`{lang="ts-type"}
 - `trailingIcon?: string`{lang="ts-type"}
 - `type?: 'label' | 'link'`{lang="ts-type"}
- `collapsible?: boolean`{lang="ts-type"}
- `defaultOpen?: boolean`{lang="ts-type"}
- `open?: boolean`{lang="ts-type"}
 - `value?: string`{lang="ts-type"}
 - `disabled?: boolean`{lang="ts-type"}
+- `class?: any`{lang="ts-type"}
 - [`slot?: string`{lang="ts-type"}](#with-custom-slot)
 - `onSelect?(e: Event): void`{lang="ts-type"}
 - `children?: NavigationMenuChildItem[]`{lang="ts-type"}
- `class?: any`{lang="ts-type"}
- `ui?: { linkLeadingAvatarSize?: ClassNameValue, linkLeadingAvatar?: ClassNameValue, linkLeadingIcon?: ClassNameValue, linkLabel?: ClassNameValue, linkLabelExternalIcon?: ClassNameValue, linkTrailing?: ClassNameValue, linkTrailingBadgeSize?: ClassNameValue, linkTrailingBadge?: ClassNameValue, linkTrailingIcon?: ClassNameValue, label?: ClassNameValue, link?: ClassNameValue, content?: ClassNameValue, childList?: ClassNameValue, childItem?: ClassNameValue, childLink?: ClassNameValue, childLinkIcon?: ClassNameValue, childLinkWrapper?: ClassNameValue, childLinkLabel?: ClassNameValue, childLinkLabelExternalIcon?: ClassNameValue, childLinkDescription?: ClassNameValue }`{lang="ts-type"}

 You can pass any property from the [Link](/components/link#props) component such as `to`, `target`, etc.

@@ -135,8 +130,8 @@ Each item can take a `children` array of objects with the following properties t
 - `label: string`
 - `description?: string`
 - `icon?: string`
- `onSelect?(e: Event): void`
 - `class?: any`
+- `onSelect?(e: Event): void`

 ::

@@ -242,108 +237,6 @@ props:
 Groups will be spaced when orientation is `horizontal` and separated when orientation is `vertical`.
 ::

-### Collapsed
-
-Use the `collapsed` prop to collapse the NavigationMenu, this can be useful in a sidebar for example.
-
-::component-code
---
-collapse: true
-ignore:
-  - items
-  - orientation
-  - class
-external:
-  - items
-externalTypes:
-  - NavigationMenuItem[][]
-props:
-  collapsed: true
-  orientation: 'vertical'
-  items:
-    - - label: Links
-        type: 'label'
-      - label: Guide
-        icon: i-lucide-book-open
-        children:
-          - label: Introduction
-            description: Fully styled and customizable components for Nuxt.
-            icon: i-lucide-house
-          - label: Installation
-            description: Learn how to install and configure Nuxt UI in your application.
-            icon: i-lucide-cloud-download
-          - label: 'Icons'
-            icon: 'i-lucide-smile'
-            description: 'You have nothing to do, @nuxt/icon will handle it automatically.'
-          - label: 'Colors'
-            icon: 'i-lucide-swatch-book'
-            description: 'Choose a primary and a neutral color from your Tailwind CSS theme.'
-          - label: 'Theme'
-            icon: 'i-lucide-cog'
-            description: 'You can customize components by using the `class` / `ui` props or in your app.config.ts.'
-      - label: Composables
-        icon: i-lucide-database
-        collapsible: false
-        open: false
-        children:
-          - label: defineShortcuts
-            icon: i-lucide-file-text
-            description: Define shortcuts for your application.
-            to: /composables/define-shortcuts
-          - label: useOverlay
-            icon: i-lucide-file-text
-            description: Display a modal/slideover within your application.
-            to: /composables/use-overlay
-          - label: useToast
-            icon: i-lucide-file-text
-            description: Display a toast within your application.
-            to: /composables/use-toast
-      - label: Components
-        icon: i-lucide-box
-        collapsible: false
-        open: false
-        to: /components
-        active: true
-        children:
-          - label: Link
-            icon: i-lucide-file-text
-            description: Use NuxtLink with superpowers.
-            to: /components/link
-          - label: Modal
-            icon: i-lucide-file-text
-            description: Display a modal within your application.
-            to: /components/modal
-          - label: NavigationMenu
-            icon: i-lucide-file-text
-            description: Display a list of links.
-            to: /components/navigation-menu
-          - label: Pagination
-            icon: i-lucide-file-text
-            description: Display a list of pages.
-            to: /components/pagination
-          - label: Popover
-            icon: i-lucide-file-text
-            description: Display a non-modal dialog that floats around a trigger element.
-            to: /components/popover
-          - label: Progress
-            icon: i-lucide-file-text
-            description: Show a horizontal bar to indicate task progression.
-            to: /components/progress
-    - - label: GitHub
-        icon: i-simple-icons-github
-        badge: 3.8k
-        to: https://github.com/nuxt/ui
-        target: _blank
-      - label: Help
-        icon: i-lucide-circle-help
-        disabled: true
---
-::
-
-::tip
-You can set the `collapsible: false` property on items with children to prevent them from being collapsible. This allows the item to act as a regular link while still displaying its children in a submenu.
-::
-
 ### Highlight

 Use the `highlight` prop to display a highlighted border for the active item.
@@ -885,126 +778,6 @@ You can inspect the DOM to see each item's content being rendered.

 ## Examples

-### With tooltips in items :badge{label="New" class="align-text-top"}
-
-You can use the `tooltip` property to display a [Tooltip](/components/tooltip) around an item. This can be useful when the menu is collapsed.
-
-::component-code
---
-collapse: true
-ignore:
-  - items
-  - orientation
-  - class
-external:
-  - items
-externalTypes:
-  - NavigationMenuItem[][]
-props:
-  collapsed: true
-  orientation: 'vertical'
-  items:
-    - - label: Links
-        type: 'label'
-      - label: Guide
-        icon: i-lucide-book-open
-        tooltip:
-          text: 'Guide'
-        children:
-          - label: Introduction
-            description: Fully styled and customizable components for Nuxt.
-            icon: i-lucide-house
-            tooltip:
-              text: 'Introduction'
-          - label: Installation
-            description: Learn how to install and configure Nuxt UI in your application.
-            icon: i-lucide-cloud-download
-            tooltip:
-              text: 'Installation'
-          - label: 'Icons'
-            icon: 'i-lucide-smile'
-            description: 'You have nothing to do, @nuxt/icon will handle it automatically.'
-            tooltip:
-              text: 'Icons'
-          - label: 'Colors'
-            icon: 'i-lucide-swatch-book'
-            description: 'Choose a primary and a neutral color from your Tailwind CSS theme.'
-            tooltip:
-              text: 'Colors'
-          - label: 'Theme'
-            icon: 'i-lucide-cog'
-            description: 'You can customize components by using the `class` / `ui` props or in your app.config.ts.'
-            tooltip:
-              text: 'Theme'
-      - label: Composables
-        icon: i-lucide-database
-        tooltip:
-          text: 'Composables'
-        collapsible: false
-        open: false
-        children:
-          - label: defineShortcuts
-            icon: i-lucide-file-text
-            description: Define shortcuts for your application.
-            to: /composables/define-shortcuts
-          - label: useOverlay
-            icon: i-lucide-file-text
-            description: Display a modal/slideover within your application.
-            to: /composables/use-overlay
-          - label: useToast
-            icon: i-lucide-file-text
-            description: Display a toast within your application.
-            to: /composables/use-toast
-      - label: Components
-        icon: i-lucide-box
-        tooltip:
-          text: 'Components'
-        to: /components
-        active: true
-        collapsible: false
-        open: false
-        children:
-          - label: Link
-            icon: i-lucide-file-text
-            description: Use NuxtLink with superpowers.
-            to: /components/link
-          - label: Modal
-            icon: i-lucide-file-text
-            description: Display a modal within your application.
-            to: /components/modal
-          - label: NavigationMenu
-            icon: i-lucide-file-text
-            description: Display a list of links.
-            to: /components/navigation-menu
-          - label: Pagination
-            icon: i-lucide-file-text
-            description: Display a list of pages.
-            to: /components/pagination
-          - label: Popover
-            icon: i-lucide-file-text
-            description: Display a non-modal dialog that floats around a trigger element.
-            to: /components/popover
-          - label: Progress
-            icon: i-lucide-file-text
-            description: Show a horizontal bar to indicate task progression.
-            to: /components/progress
-    - - label: GitHub
-        icon: i-simple-icons-github
-        badge: 3.8k
-        to: https://github.com/nuxt/ui
-        target: _blank
-        tooltip:
-          text: 'GitHub'
-          kbds:
-            - 3.8k
-      - label: Help
-        icon: i-lucide-circle-help
-        disabled: true
-        tooltip:
-          text: 'Help'
---
-::
-
 ### Control active item

 You can control the active item by using the `default-value` prop or the `v-model` directive with the index of the item.
--- a/docs/content/3.components/pin-input.md
+++ b/docs/content/3.components/pin-input.md
@@ -3,9 +3,6 @@ title: PinInput
 description: An input element to enter a pin.
 category: form
 links:
-  - label: PinInput
-    icon: i-custom-reka-ui
-    to: https://reka-ui.com/docs/components/pin-input
  - label: GitHub
    icon: i-simple-icons-github
    to: https://github.com/nuxt/ui/tree/v3/src/runtime/components/PinInput.vue
--- a/docs/content/3.components/radio-group.md
+++ b/docs/content/3.components/radio-group.md
@@ -46,8 +46,6 @@ You can also pass an array of objects with the following properties:
 - `description?: string`{lang="ts-type"}
 - [`value?: string`{lang="ts-type"}](#value-key)
 - `disabled?: boolean`{lang="ts-type"}
- `class?: any`{lang="ts-type"}
- `ui?: { item?: ClassNameValue, container?: ClassNameValue, base?: ClassNameValue, 'indicator'?: ClassNameValue, wrapper?: ClassNameValue, label?: ClassNameValue, description?: ClassNameValue }`{lang="ts-type"}

 ::component-code
 ---
--- a/docs/content/3.components/select-menu.md
+++ b/docs/content/3.components/select-menu.md
@@ -57,8 +57,6 @@ You can also pass an array of objects with the following properties:
 - [`chip?: ChipProps`{lang="ts-type"}](#with-chip-in-items)
 - `disabled?: boolean`{lang="ts-type"}
 - `onSelect?(e: Event): void`{lang="ts-type"}
- `class?: any`{lang="ts-type"}
- `ui?: { label?: ClassNameValue, separator?: ClassNameValue, item?: ClassNameValue, itemLeadingIcon?: ClassNameValue, itemLeadingAvatarSize?: ClassNameValue, itemLeadingAvatar?: ClassNameValue, itemLeadingChipSize?: ClassNameValue, itemLeadingChip?: ClassNameValue, itemLabel?: ClassNameValue, itemTrailing?: ClassNameValue, itemTrailingIcon?: ClassNameValue }`{lang="ts-type"}

 ::component-code
 ---
--- a/docs/content/3.components/select.md
+++ b/docs/content/3.components/select.md
@@ -48,8 +48,6 @@ You can also pass an array of objects with the following properties:
 - [`avatar?: AvatarProps`{lang="ts-type"}](#with-avatar-in-items)
 - [`chip?: ChipProps`{lang="ts-type"}](#with-chip-in-items)
 - `disabled?: boolean`{lang="ts-type"}
- `class?: any`{lang="ts-type"}
- `ui?: { label?: ClassNameValue, separator?: ClassNameValue, item?: ClassNameValue, itemLeadingIcon?: ClassNameValue, itemLeadingAvatarSize?: ClassNameValue, itemLeadingAvatar?: ClassNameValue, itemLeadingChipSize?: ClassNameValue, itemLeadingChip?: ClassNameValue, itemLabel?: ClassNameValue, itemTrailing?: ClassNameValue, itemTrailingIcon?: ClassNameValue }`{lang="ts-type"}

 ::component-code
 ---
--- a/docs/content/3.components/slider.md
+++ b/docs/content/3.components/slider.md
@@ -136,21 +136,6 @@ props:
 ---
 ::

-### Tooltip :badge{label="New" class="align-text-top"}
-
-Use the `tooltip` prop to display a [Tooltip](/components/tooltip) around the Slider thumbs with the current value. You can set it to `true` for default behavior or pass an object to customize it with any property from the [Tooltip](/components/tooltip#props) component.
-
-::component-code
---
-ignore:
-  - defaultValue
-  - tooltip
-props:
-  defaultValue: 50
-  tooltip: true
---
-::
-
 ### Disabled

 Use the `disabled` prop to disable the Slider.
--- a/docs/content/3.components/stepper.md
+++ b/docs/content/3.components/stepper.md
@@ -23,8 +23,6 @@ Use the `items` prop as an array of objects with the following properties:
 - `value?: string | number`{lang="ts-type"}
 - `disabled?: boolean`{lang="ts-type"}
 - [`slot?: string`{lang="ts-type"}](#with-custom-slot)
- `class?: any`{lang="ts-type"}
- `ui?: { item?: ClassNameValue, container?: ClassNameValue, trigger?: ClassNameValue, indicator?: ClassNameValue, icon?: ClassNameValue, separator?: ClassNameValue, wrapper?: ClassNameValue, title?: ClassNameValue, description?: ClassNameValue }`{lang="ts-type"}

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

-When using the `required` prop, an asterisk is added next to the label.
+When using the `required` prop, an asterisk is be added next to the label.

 ::component-code
 ---
--- a/docs/content/3.components/table.md
+++ b/docs/content/3.components/table.md
@@ -260,30 +260,6 @@ You can use the `expanded` prop to control the expandable state of the rows (can
 You could also add this action to the [`DropdownMenu`](/components/dropdown-menu) component inside the `actions` column.
 ::

-### With grouped rows
-
-You can group rows based on a given column value and show/hide sub rows via some button added to the cell using the TanStack Table [Grouping APIs](https://tanstack.com/table/latest/docs/api/features/grouping).
-
-#### 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.
-* 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.
-
-::component-example
---
-prettier: true
-collapse: true
-name: 'table-grouped-rows-example'
-highlights:
-  - 159
-  - 169
-class: '!p-0'
---
-::
-
 ### With row selection

 You can add a new column that renders a [Checkbox](/components/checkbox) component inside the `header` and `cell` to select rows using the TanStack Table [Row Selection APIs](https://tanstack.com/table/latest/docs/api/features/row-selection).
--- a/docs/content/3.components/tabs.md
+++ b/docs/content/3.components/tabs.md
@@ -23,8 +23,6 @@ Use the `items` prop as an array of objects with the following properties:
 - `value?: string | number`{lang="ts-type"}
 - `disabled?: boolean`{lang="ts-type"}
 - [`slot?: string`{lang="ts-type"}](#with-custom-slot)
- `class?: any`{lang="ts-type"}
- `ui?: { trigger?: ClassNameValue, leadingIcon?: ClassNameValue, leadingAvatar?: ClassNameValue, label?: ClassNameValue, content?: ClassNameValue }`{lang="ts-type"}

 ::component-code
 ---
@@ -212,6 +210,10 @@ You can control the active item by using the `default-value` prop or the `v-mode

 :component-example{name="tabs-model-value-example"}

+::tip
+You can also pass the `value` of one of the items if provided.
+::
+
 ### With content slot

 Use the `#content` slot to customize the content of each item.
--- a/docs/content/3.components/toast.md
+++ b/docs/content/3.components/toast.md
@@ -188,7 +188,7 @@ name: 'toast-example'
 :toaster-position-example
 ::

-::note{to="https://github.com/nuxt/ui/blob/v3/docs/app/app.config.ts#L3"}
+::note{to="https://github.com/nuxt/ui/blob/v3/docs/app/app.vue#L77"}
 In this example, we use the `AppConfig` to configure the `position` prop of the `Toaster` component globally.
 ::

@@ -206,7 +206,7 @@ name: 'toast-example'
 :toaster-duration-example
 ::

-::note{to="https://github.com/nuxt/ui/blob/v3/docs/app/app.config.ts#L5"}
+::note{to="https://github.com/nuxt/ui/blob/v3/docs/app/app.vue#L77"}
 In this example, we use the `AppConfig` to configure the `duration` prop of the `Toaster` component globally.
 ::

@@ -228,7 +228,7 @@ name: 'toast-example'
 :toaster-expand-example
 ::

-::note{to="https://github.com/nuxt/ui/blob/v3/docs/app/app.config.ts#L4"}
+::note{to="https://github.com/nuxt/ui/blob/v3/docs/app/app.vue#L77"}
 In this example, we use the `AppConfig` to configure the `expand` prop of the `Toaster` component globally.
 ::

--- a/docs/content/3.components/tree.md
+++ b/docs/content/3.components/tree.md
@@ -26,8 +26,6 @@ Use the `items` prop as an array of objects with the following properties:
 - `children?: TreeItem[]`{lang="ts-type"}
 - `onToggle?(e: Event): void`{lang="ts-type"}
 - `onSelect?(e?: Event): void`{lang="ts-type"}
- `class?: any`{lang="ts-type"}
- `ui?: { item?: ClassNameValue, itemWithChildren?: ClassNameValue, link?: ClassNameValue, linkLeadingIcon?: ClassNameValue, linkLabel?: ClassNameValue, linkTrailing?: ClassNameValue, linkTrailingIcon?: ClassNameValue, listWithChildren?: ClassNameValue }`{lang="ts-type"}

 ::note
 A unique identifier is required for each item. The component will use the `value` prop as identifier, falling back to `label` if `value` is not provided. One of these must be provided for the component to work properly.
--- a/docs/package.json
+++ b/docs/package.json
@@ -3,41 +3,40 @@
  "name": "@nuxt/ui-docs",
  "type": "module",
  "dependencies": {
-    "@ai-sdk/vue": "^1.2.12",
+    "@ai-sdk/vue": "^1.2.8",
    "@iconify-json/logos": "^1.2.4",
-    "@iconify-json/lucide": "^1.2.43",
-    "@iconify-json/simple-icons": "^1.2.34",
-    "@iconify-json/vscode-icons": "^1.2.21",
+    "@iconify-json/lucide": "^1.2.38",
+    "@iconify-json/simple-icons": "^1.2.33",
+    "@iconify-json/vscode-icons": "^1.2.19",
    "@nuxt/content": "^3.5.1",
    "@nuxt/image": "^1.10.0",
    "@nuxt/ui": "latest",
-    "@nuxt/ui-pro": "^3.1.2",
-    "@nuxthub/core": "^0.8.27",
+    "@nuxt/ui-pro": "^3.1.0",
+    "@nuxthub/core": "^0.8.25",
    "@nuxtjs/plausible": "^1.2.0",
    "@octokit/rest": "^21.1.1",
    "@rollup/plugin-yaml": "^4.1.2",
-    "@vueuse/integrations": "^13.2.0",
-    "@vueuse/nuxt": "^13.2.0",
-    "ai": "^4.3.15",
+    "@vueuse/integrations": "^13.1.0",
+    "@vueuse/nuxt": "^13.1.0",
+    "ai": "^4.3.9",
    "capture-website": "^4.2.0",
    "joi": "^17.13.3",
-    "motion-v": "^1.0.2",
-    "nuxt": "^3.17.3",
+    "motion-v": "^0.13.1",
+    "nuxt": "^3.16.2",
    "nuxt-component-meta": "^0.11.0",
    "nuxt-llms": "^0.1.2",
-    "nuxt-og-image": "^5.1.3",
+    "nuxt-og-image": "^5.1.2",
    "prettier": "^3.5.3",
-    "shiki-stream": "^0.1.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.4.1",
+    "valibot": "^1.0.0",
+    "workers-ai-provider": "^0.3.0",
    "yup": "^1.6.1",
-    "zod": "^3.24.4"
+    "zod": "^3.24.3"
  },
  "devDependencies": {
-    "wrangler": "^4.15.1"
+    "wrangler": "^4.13.0"
  }
 }
--- a/docs/server/api/chat.ts
+++ b/docs/server/api/chat.ts
@@ -1,6 +1,5 @@
-import { streamText, tool } from 'ai'
+import { streamText } from 'ai'
 import { createWorkersAI } from 'workers-ai-provider'
-import { z } from 'zod'

 export default defineEventHandler(async (event) => {
  const { messages } = await readBody(event)
@@ -13,30 +12,11 @@ export default defineEventHandler(async (event) => {
      }
    : undefined
  const workersAI = createWorkersAI({ binding: hubAI(), gateway })
-  const autorag = hubAutoRAG('ui3')

  return streamText({
-    model: workersAI('@cf/meta/llama-3.3-70b-instruct-fp8-fast'),
-    messages,
-    system: `You are a helpful assistant for Nuxt UI. Check your knowledge base before answering any questions.
-    Only respond to questions using information from tool calls.
-    if no relevant information is found in the tool calls, respond, "Sorry, I don't know."
-    Format your markdown response using the following rules:
-    - Use the vue lang for code blocks syntax highlighting.
-    - Don't use markdown headings.
-    `,
-    tools: {
-      searchDocumentation: tool({
-        description: `search the documentation for information to answer questions.`,
-        parameters: z.object({
-          question: z.string().describe('the users question')
-        }),
-        execute: async ({ question }) => {
-          return (await autorag.aiSearch({
-            query: question
-          })).response
-        }
-      })
-    }
+    model: workersAI('@cf/meta/llama-3.2-3b-instruct'),
+    maxTokens: 10000,
+    system: 'You are a helpful assistant that can answer questions and help.',
+    messages
  }).toDataStreamResponse()
 })
--- a/docs/server/plugins/llms.ts
+++ b/docs/server/plugins/llms.ts
@@ -46,33 +46,11 @@ 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}`)
-  }
-
+  const metaComponentName = `U${pascalCaseName}`
  return {
    pascalCaseName,
-    metaComponentName: finalMetaComponentName,
-    componentMeta
+    metaComponentName,
+    componentMeta: (meta as Record<string, any>)[metaComponentName]?.meta
  }
 }

@@ -190,7 +168,6 @@ function emitItemHandler(event: any): string {
 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 } }
@@ -307,14 +284,10 @@ export default defineNitroPlugin((nitroApp) => {
    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 attributes = node[1] as ComponentAttributes
      const pro = parseBoolean(attributes[':pro'])
      const prose = parseBoolean(attributes[':prose'])
-      const appConfig = generateThemeConfig({ pro, prose, componentName: finalComponentName })
+      const appConfig = generateThemeConfig({ pro, prose, componentName })

      replaceNodeWithPre(
        node,
@@ -349,23 +322,14 @@ export default defineNitroPlugin((nitroApp) => {
    })

    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)
-
+      const { pascalCaseName, componentMeta } = getComponentMeta(componentName)
      if (!componentMeta?.props) return

-      const interfaceName = isProse ? `Prose${pascalCaseName}Props` : `${pascalCaseName}Props`
-
      const interfaceCode = generateTSInterface(
-        interfaceName,
+        `${pascalCaseName}Props`,
        Object.values(componentMeta.props),
        propItemHandler,
-        `Props for the ${isProse ? 'Prose' : ''}${pascalCaseName} component`
+        `Props for the ${pascalCaseName} component`
      )
      replaceNodeWithPre(node, 'ts', interfaceCode)
    })
--- a/package.json
+++ b/package.json
@@ -1,8 +1,8 @@
 {
  "name": "@nuxt/ui",
  "description": "A UI Library for Modern Web Apps, powered by Vue & Tailwind CSS.",
-  "version": "3.1.2",
-  "packageManager": "pnpm@10.11.0",
+  "version": "3.1.0",
+  "packageManager": "pnpm@10.9.0",
  "repository": {
    "type": "git",
    "url": "git+https://github.com/nuxt/ui.git"
@@ -87,21 +87,17 @@
  "style": "./dist/runtime/index.css",
  "main": "./dist/module.mjs",
  "files": [
-    ".nuxt/ui",
-    ".nuxt/ui.css",
-    "dist",
-    "cli",
-    "vue-plugin.d.ts"
+    "dist"
  ],
  "scripts": {
    "build": "nuxt-module-build build",
    "prepack": "pnpm build",
-    "dev": "nuxi dev playground --uiDev",
+    "dev": "nuxi dev playground",
    "dev:build": "nuxi build playground",
-    "dev:vue": "vite playground-vue -- --uiDev",
+    "dev:vue": "vite playground-vue",
    "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": "nuxi dev docs",
    "docs:build": "nuxi build docs",
    "docs:prepare": "nuxt-component-meta docs",
    "lint": "eslint .",
@@ -115,18 +111,18 @@
    "@iconify/vue": "^4.3.0",
    "@internationalized/date": "^3.8.0",
    "@internationalized/number": "^3.6.1",
-    "@nuxt/fonts": "^0.11.4",
+    "@nuxt/fonts": "^0.11.1",
    "@nuxt/icon": "^1.12.0",
-    "@nuxt/kit": "^3.17.3",
-    "@nuxt/schema": "^3.17.3",
+    "@nuxt/kit": "^3.16.2",
+    "@nuxt/schema": "^3.16.2",
    "@nuxtjs/color-mode": "^3.5.2",
    "@standard-schema/spec": "^1.0.0",
-    "@tailwindcss/postcss": "^4.1.6",
-    "@tailwindcss/vite": "^4.1.6",
+    "@tailwindcss/postcss": "^4.1.4",
+    "@tailwindcss/vite": "^4.1.4",
    "@tanstack/vue-table": "^8.21.3",
    "@unhead/vue": "^2.0.8",
-    "@vueuse/core": "^13.2.0",
-    "@vueuse/integrations": "^13.2.0",
+    "@vueuse/core": "^13.1.0",
+    "@vueuse/integrations": "^13.1.0",
    "colortranslator": "^4.1.0",
    "consola": "^3.4.2",
    "defu": "^6.1.4",
@@ -144,31 +140,30 @@
    "mlly": "^1.7.4",
    "ohash": "^2.0.11",
    "pathe": "^2.0.3",
-    "reka-ui": "^2.2.1",
+    "reka-ui": "^2.2.0",
    "scule": "^1.3.0",
    "tailwind-variants": "^1.0.0",
-    "tailwindcss": "^4.1.6",
+    "tailwindcss": "^4.1.4",
    "tinyglobby": "^0.2.13",
-    "unplugin": "^2.3.4",
-    "unplugin-auto-import": "^19.2.0",
+    "unplugin": "^2.3.2",
+    "unplugin-auto-import": "^19.1.2",
    "unplugin-vue-components": "^28.5.0",
-    "vaul-vue": "^0.4.1",
-    "vue-component-type-helpers": "^2.2.10"
+    "vaul-vue": "^0.4.1"
  },
  "devDependencies": {
-    "@nuxt/eslint-config": "^1.3.1",
+    "@nuxt/eslint-config": "^1.3.0",
    "@nuxt/module-builder": "^1.0.1",
-    "@nuxt/test-utils": "^3.18.0",
+    "@nuxt/test-utils": "^3.17.2",
    "@release-it/conventional-changelog": "^10.0.1",
    "@vue/test-utils": "^2.4.6",
    "embla-carousel": "^8.6.0",
-    "eslint": "^9.26.0",
-    "happy-dom": "^17.4.7",
-    "nuxt": "^3.17.3",
-    "release-it": "^19.0.2",
-    "vitest": "^3.1.3",
+    "eslint": "^9.25.1",
+    "happy-dom": "^17.4.4",
+    "nuxt": "^3.16.2",
+    "release-it": "^19.0.1",
+    "vitest": "^3.1.2",
    "vitest-environment-nuxt": "^1.0.1",
-    "vue-tsc": "^2.2.10"
+    "vue-tsc": "^2.2.0"
  },
  "peerDependencies": {
    "@inertiajs/vue3": "^2.0.7",
@@ -208,8 +203,8 @@
    "chokidar": "3.6.0",
    "debug": "4.3.7",
    "rollup": "4.34.9",
-    "unimport": "4.1.1",
-    "unplugin": "^2.3.4"
+    "unplugin": "^2.3.2",
+    "vue-tsc": "2.2.0"
  },
  "pnpm": {
    "onlyBuiltDependencies": [
--- a/playground-vue/index.html
+++ b/playground-vue/index.html
@@ -4,8 +4,6 @@
    <meta charset="UTF-8" />
    <link rel="icon" type="image/svg+xml" href="/logo.svg" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
-    <link rel="preconnect" href="https://fonts.bunny.net">
-    <link href="https://fonts.bunny.net/css?family=public-sans:400,500,600,700" rel="stylesheet" />
    <title>Nuxt UI - Vue Playground</title>
  </head>
  <body>
--- a/playground-vue/package.json
+++ b/playground-vue/package.json
@@ -11,14 +11,14 @@
  },
  "dependencies": {
    "@nuxt/ui": "latest",
-    "vue": "^3.5.14",
-    "vue-router": "^4.5.1",
-    "zod": "^3.24.4"
+    "vue": "^3.5.13",
+    "vue-router": "^4.5.0",
+    "zod": "^3.24.3"
  },
  "devDependencies": {
-    "@vitejs/plugin-vue": "^5.2.4",
+    "@vitejs/plugin-vue": "^5.2.3",
    "typescript": "^5.8.3",
-    "vite": "^6.3.5",
-    "vue-tsc": "^2.2.10"
+    "vite": "^6.3.3",
+    "vue-tsc": "^2.2.0"
  }
 }
--- a/playground-vue/vite.config.ts
+++ b/playground-vue/vite.config.ts
@@ -1,9 +1,15 @@
 import { defineConfig } from 'vite'
 import vue from '@vitejs/plugin-vue'
-import ui from '@nuxt/ui/vite'
+
+import ui from '../src/vite'

 // https://vitejs.dev/config/
 export default defineConfig({
+  server: {
+    fs: {
+      allow: ['..']
+    }
+  },
  plugins: [
    vue(),
    ui({
--- a/playground/app/pages/components/badge.vue
+++ b/playground/app/pages/components/badge.vue
@@ -36,27 +36,14 @@ const variants = Object.keys(theme.variants.variant) as Array<keyof typeof theme
        color="neutral"
      />
    </div>
-    <div class="flex items-center gap-2 ms-[-90px]">
+    <div class="flex items-center gap-2 ms-[-56px]">
      <UBadge v-for="size in sizes" :key="size" label="Badge" :size="size" />
    </div>
-    <div class="flex items-center gap-2 ms-[-122px]">
+    <div class="flex items-center gap-2 ms-[-86px]">
      <UBadge v-for="size in sizes" :key="size" icon="i-lucide-rocket" label="Badge" :size="size" />
    </div>
-    <div class="flex items-center gap-2 ms-[-130px]">
+    <div class="flex items-center gap-2 ms-[-86px]">
      <UBadge v-for="size in sizes" :key="size" :avatar="{ src: 'https://github.com/benjamincanac.png' }" label="Badge" :size="size" />
    </div>
-    <div class="flex items-center gap-2 ms-[-52px]">
-      <UBadge v-for="size in sizes" :key="size" icon="i-lucide-rocket" :size="size" />
-    </div>
-    <div class="flex items-center gap-2 ms-[-60px]">
-      <UBadge
-        v-for="size in sizes"
-        :key="size"
-        :avatar="{ src: 'https://github.com/benjamincanac.png' }"
-        :size="size"
-        color="neutral"
-        variant="outline"
-      />
-    </div>
  </div>
 </template>
--- a/playground/app/pages/components/carousel.vue
+++ b/playground/app/pages/components/carousel.vue
@@ -28,12 +28,7 @@ const bind = computed(() => ({
  dots: dots.value
 }))

-const items = Array.from({ length: 6 }).map((_, index) => ({
-  id: index,
-  title: `Item ${index + 1}`,
-  description: `Description for item ${index + 1}`,
-  src: `https://picsum.photos/640/640?v=${index}`
-}))
+const items = Array.from({ length: 6 }).map((_, index) => index)
 </script>

 <template>
@@ -65,23 +60,23 @@ const items = Array.from({ length: 6 }).map((_, index) => ({
    </div>

    <template v-if="classNames">
-      <UCarousel v-slot="{ item }" v-bind="bind" :items="items" :ui="{ item: 'basis-[70%] transition-opacity ease-in-out [&:not(.is-snapped)]:opacity-10', container: 'h-[352px]' }" class="w-full max-w-xl mx-auto">
-        <img :src="item.src" class="rounded-lg">
+      <UCarousel v-slot="{ index }" v-bind="bind" :items="items" :ui="{ item: 'basis-[70%] transition-opacity ease-in-out [&:not(.is-snapped)]:opacity-10', container: 'h-[352px]' }" class="w-full max-w-xl mx-auto">
+        <img :src="`https://picsum.photos/600/350?v=${index}`" class="rounded-lg">
      </UCarousel>
    </template>
    <template v-else-if="autoHeight">
-      <UCarousel v-slot="{ item }" v-bind="bind" :items="items" :ui="{ container: 'transition-[height] duration-200' }" class="w-full max-w-md mx-auto">
-        <img :src="item.src" class="rounded-lg">
+      <UCarousel v-slot="{ index }" v-bind="bind" :items="items" :ui="{ container: 'transition-[height] duration-200' }" class="w-full max-w-md mx-auto">
+        <img :src="`https://picsum.photos/600/${index % 2 === 0 ? 350 : 450}?v=${index}`" :class="index % 2 === 0 ? 'h-[350px]' : 'h-[450px]'" class="rounded-lg">
      </UCarousel>
    </template>
    <template v-else>
-      <UCarousel v-slot="{ item }" v-bind="bind" :items="items" class="w-[320px] mx-auto" :ui="{ container: 'h-[336px]' }">
-        <img :src="item.src" class="rounded-lg">
+      <UCarousel v-slot="{ index }" v-bind="bind" :items="items" class="w-[320px] mx-auto" :ui="{ container: 'h-[336px]' }">
+        <img :src="`https://picsum.photos/640/640?v=${index}`" class="rounded-lg">
      </UCarousel>

      <template v-if="orientation === 'horizontal'">
-        <UCarousel v-slot="{ item }" v-bind="bind" :items="items" :ui="{ item: 'basis-1/3' }" class="w-full max-w-xs mx-auto">
-          <img :src="item.src" class="rounded-lg">
+        <UCarousel v-slot="{ index }" v-bind="bind" :items="items" :ui="{ item: 'basis-1/3' }" class="w-full max-w-xs mx-auto">
+          <img :src="`https://picsum.photos/320/320?v=${index}`" class="rounded-lg">
        </UCarousel>
      </template>
    </template>
--- a/playground/app/pages/components/checkbox-group.vue
+++ b/playground/app/pages/components/checkbox-group.vue
@@ -1,8 +1,9 @@
 <script setup lang="ts">
+import themeCheckbox from '#build/ui/checkbox'
 import theme from '#build/ui/checkbox-group'

 const sizes = Object.keys(theme.variants.size) as Array<keyof typeof theme.variants.size>
-const variants = Object.keys(theme.variants.variant)
+const variants = Object.keys(themeCheckbox.variants.variant)
 const variant = ref('list' as const)

 const literalOptions = [
--- a/playground/app/pages/components/shortcuts.vue
+++ b/playground/app/pages/components/shortcuts.vue
@@ -1,40 +1,3 @@
-<script setup lang="ts">
-import type { ShortcutsConfig } from '@nuxt/ui/composables/defineShortcuts.js'
-
-const logs = ref<string[]>([])
-const shortcutsState = ref({
-  'a': {
-    label: 'A',
-    disabled: false,
-    usingInput: false
-  },
-  'shift_i': {
-    label: 'Shift+I',
-    disabled: false,
-    usingInput: false
-  },
-  'g-i': {
-    label: 'G->I',
-    disabled: false,
-    usingInput: false
-  }
-})
-
-const shortcuts = computed(() => {
-  return Object.entries(shortcutsState.value).reduce<ShortcutsConfig>((acc, [key, { label, disabled, usingInput }]) => {
-    if (disabled) {
-      return acc
-    }
-    acc[key] = {
-      handler: () => { logs.value.unshift(`"${label}" triggered`) },
-      usingInput
-    }
-    return acc
-  }, {})
-})
-defineShortcuts(shortcuts)
-</script>
-
 <template>
  <div class="w-full flex flex-col gap-4">
    <UCard class="flex-1">
@@ -80,3 +43,38 @@ defineShortcuts(shortcuts)
    </UCard>
  </div>
 </template>
+
+<script setup lang="ts">
+const logs = ref<string[]>([])
+const shortcutsState = ref({
+  'a': {
+    label: 'A',
+    disabled: false,
+    usingInput: false
+  },
+  'shift_i': {
+    label: 'Shift+I',
+    disabled: false,
+    usingInput: false
+  },
+  'g-i': {
+    label: 'G->I',
+    disabled: false,
+    usingInput: false
+  }
+})
+
+const shortcuts = computed(() => {
+  return Object.entries(shortcutsState.value).reduce<ShortcutsConfig>((acc, [key, { label, disabled, usingInput }]) => {
+    if (disabled) {
+      return acc
+    }
+    acc[key] = {
+      handler: () => { logs.value.unshift(`"${label}" triggered`) },
+      usingInput
+    }
+    return acc
+  }, {})
+})
+defineShortcuts(shortcuts)
+</script>
--- a/playground/nuxt.config.ts
+++ b/playground/nuxt.config.ts
@@ -1,6 +1,6 @@
 export default defineNuxtConfig({
  modules: [
-    '@nuxt/ui',
+    '../src/module',
    '@nuxthub/core'
  ],

--- a/playground/package.json
+++ b/playground/package.json
@@ -5,22 +5,14 @@
  "scripts": {
    "dev": "nuxi dev",
    "build": "nuxi build",
-    "generate": "nuxi generate",
-    "typecheck": "nuxt typecheck"
+    "generate": "nuxi generate"
  },
  "dependencies": {
-    "@iconify-json/lucide": "^1.2.43",
-    "@iconify-json/simple-icons": "^1.2.34",
+    "@iconify-json/lucide": "^1.2.38",
+    "@iconify-json/simple-icons": "^1.2.33",
    "@nuxt/ui": "latest",
-    "@nuxthub/core": "^0.8.27",
-    "nuxt": "^3.17.3",
-    "zod": "^3.24.4"
-  },
-  "devDependencies": {
-    "typescript": "^5.8.3",
-    "vue-tsc": "^2.2.10"
-  },
-  "resolutions": {
-    "unimport": "4.1.1"
+    "@nuxthub/core": "^0.8.25",
+    "nuxt": "^3.16.2",
+    "zod": "^3.24.3"
  }
 }
--- a/pnpm-lock.yaml
+++ b/pnpm-lock.yaml
--- a/renovate.json
+++ b/renovate.json
@@ -5,6 +5,9 @@
  "lockFileMaintenance": {
    "enabled": true
  },
+  "ignoreDeps": [
+    "vue-tsc"
+  ],
  "baseBranches": ["v2", "v3"],
  "packageRules": [{
    "matchBaseBranches": ["v3"],
@@ -16,11 +19,6 @@
      "@tailwindcss/postcss",
      "@tailwindcss/vite"
    ]
-  }, {
-    "groupName": "reka-ui",
-    "matchPackageNames": [
-      "reka-ui"
-    ]
  }, {
    "matchDepTypes": ["peerDependencies"],
    "enabled": false
--- a/src/module.ts
+++ b/src/module.ts
@@ -91,21 +91,12 @@ export default defineNuxtModule<ModuleOptions>({
      }
    }

-    await registerModule('@nuxt/icon', 'icon', {
-      cssLayer: 'components'
-    })
+    await registerModule('@nuxt/icon', 'icon', { cssLayer: 'components' })
    if (options.fonts) {
-      await registerModule('@nuxt/fonts', 'fonts', {
-        defaults: {
-          weights: [400, 500, 600, 700]
-        }
-      })
+      await registerModule('@nuxt/fonts', 'fonts', { experimental: { processCSSVariables: true } })
    }
    if (options.colorMode) {
-      await registerModule('@nuxtjs/color-mode', 'colorMode', {
-        classSuffix: '',
-        disableTransition: true
-      })
+      await registerModule('@nuxtjs/color-mode', 'colorMode', { classSuffix: '', disableTransition: true })
    }

    addPlugin({ src: resolve('./runtime/plugins/colors') })
--- a/src/runtime/components/Accordion.vue
+++ b/src/runtime/components/Accordion.vue
@@ -22,8 +22,6 @@ export interface AccordionItem {
  /** A unique value for the accordion item. Defaults to the index. */
  value?: string
  disabled?: boolean
-  class?: any
-  ui?: Pick<Accordion['slots'], 'item' | 'header' | 'trigger' | 'leadingIcon' | 'label' | 'trailingIcon' | 'content' | 'body'>
  [key: string]: any
 }

@@ -91,34 +89,34 @@ const ui = computed(() => tv({ extend: tv(theme), ...(appConfig.ui?.accordion ||
 </script>

 <template>
-  <AccordionRoot v-bind="rootProps" :class="ui.root({ class: [props.ui?.root, props.class] })">
+  <AccordionRoot v-bind="rootProps" :class="ui.root({ class: [props.class, props.ui?.root] })">
    <AccordionItem
      v-for="(item, index) in props.items"
      v-slot="{ open }"
      :key="index"
      :value="item.value || String(index)"
      :disabled="item.disabled"
-      :class="ui.item({ class: [props.ui?.item, item.ui?.item, item.class] })"
+      :class="ui.item({ class: props.ui?.item })"
    >
-      <AccordionHeader as="div" :class="ui.header({ class: [props.ui?.header, item.ui?.header] })">
-        <AccordionTrigger :class="ui.trigger({ class: [props.ui?.trigger, item.ui?.trigger], disabled: item.disabled })">
+      <AccordionHeader as="div" :class="ui.header({ class: props.ui?.header })">
+        <AccordionTrigger :class="ui.trigger({ class: props.ui?.trigger, disabled: item.disabled })">
          <slot name="leading" :item="item" :index="index" :open="open">
-            <UIcon v-if="item.icon" :name="item.icon" :class="ui.leadingIcon({ class: [props.ui?.leadingIcon, item?.ui?.leadingIcon] })" />
+            <UIcon v-if="item.icon" :name="item.icon" :class="ui.leadingIcon({ class: props.ui?.leadingIcon })" />
          </slot>

-          <span v-if="get(item, props.labelKey as string) || !!slots.default" :class="ui.label({ class: [props.ui?.label, item.ui?.label] })">
+          <span v-if="get(item, props.labelKey as string) || !!slots.default" :class="ui.label({ class: props.ui?.label })">
            <slot :item="item" :index="index" :open="open">{{ get(item, props.labelKey as string) }}</slot>
          </span>

          <slot name="trailing" :item="item" :index="index" :open="open">
-            <UIcon :name="item.trailingIcon || trailingIcon || appConfig.ui.icons.chevronDown" :class="ui.trailingIcon({ class: [props.ui?.trailingIcon, item.ui?.trailingIcon] })" />
+            <UIcon :name="item.trailingIcon || trailingIcon || appConfig.ui.icons.chevronDown" :class="ui.trailingIcon({ class: props.ui?.trailingIcon })" />
          </slot>
        </AccordionTrigger>
      </AccordionHeader>

-      <AccordionContent v-if="item.content || !!slots.content || (item.slot && !!slots[item.slot as keyof AccordionSlots<T>]) || !!slots.body || (item.slot && !!slots[`${item.slot}-body` as keyof AccordionSlots<T>])" :class="ui.content({ class: [props.ui?.content, item.ui?.content] })">
+      <AccordionContent v-if="item.content || !!slots.content || (item.slot && !!slots[item.slot as keyof AccordionSlots<T>]) || !!slots.body || (item.slot && !!slots[`${item.slot}-body` as keyof AccordionSlots<T>])" :class="ui.content({ class: props.ui?.content })">
        <slot :name="((item.slot || 'content') as keyof AccordionSlots<T>)" :item="(item as Extract<T, { slot: string; }>)" :index="index" :open="open">
-          <div :class="ui.body({ class: [props.ui?.body, item.ui?.body] })">
+          <div :class="ui.body({ class: props.ui?.body })">
            <slot :name="((item.slot ? `${item.slot}-body`: 'body') as keyof AccordionSlots<T>)" :item="(item as Extract<T, { slot: string; }>)" :index="index" :open="open">
              {{ item.content }}
            </slot>
--- a/src/runtime/components/Alert.vue
+++ b/src/runtime/components/Alert.vue
@@ -97,7 +97,7 @@ const ui = computed(() => tv({ extend: tv(theme), ...(appConfig.ui?.alert || {})
 </script>

 <template>
-  <Primitive :as="as" :data-orientation="orientation" :class="ui.root({ class: [props.ui?.root, props.class] })">
+  <Primitive :as="as" :data-orientation="orientation" :class="ui.root({ class: [props.class, props.ui?.root] })">
    <slot name="leading">
      <UAvatar v-if="avatar" :size="((props.ui?.avatarSize || ui.avatarSize()) as AvatarProps['size'])" v-bind="avatar" :class="ui.avatar({ class: props.ui?.avatar })" />
      <UIcon v-else-if="icon" :name="icon" :class="ui.icon({ class: props.ui?.icon })" />
--- a/src/runtime/components/Avatar.vue
+++ b/src/runtime/components/Avatar.vue
@@ -81,7 +81,7 @@ function onError() {
 </script>

 <template>
-  <Primitive :as="as" :class="ui.root({ class: [props.ui?.root, props.class] })" :style="props.style">
+  <Primitive :as="as" :class="ui.root({ class: [props.class, props.ui?.root] })" :style="props.style">
    <component
      :is="ImageComponent"
      v-if="src && !error"
--- a/src/runtime/components/AvatarGroup.vue
+++ b/src/runtime/components/AvatarGroup.vue
@@ -93,7 +93,7 @@ provide(avatarGroupInjectionKey, computed(() => ({
 </script>

 <template>
-  <Primitive :as="as" :class="ui.root({ class: [props.ui?.root, props.class] })">
+  <Primitive :as="as" :class="ui.root({ class: [props.class, props.ui?.root] })">
    <UAvatar v-if="hiddenCount > 0" :text="`+${hiddenCount}`" :class="ui.base({ class: props.ui?.base })" />
    <component :is="avatar" v-for="(avatar, count) in visibleAvatars" :key="count" :class="ui.base({ class: props.ui?.base })" />
  </Primitive>
--- a/src/runtime/components/Badge.vue
+++ b/src/runtime/components/Badge.vue
@@ -26,8 +26,6 @@ export interface BadgeProps extends Omit<UseComponentIconsProps, 'loading' | 'lo
   * @defaultValue 'md'
   */
  size?: Badge['variants']['size']
-  /** Render the badge with equal padding on all sides. */
-  square?: boolean
  class?: any
  ui?: Badge['slots']
 }
@@ -52,7 +50,7 @@ import UAvatar from './Avatar.vue'
 const props = withDefaults(defineProps<BadgeProps>(), {
  as: 'span'
 })
-const slots = defineSlots<BadgeSlots>()
+defineSlots<BadgeSlots>()

 const appConfig = useAppConfig() as Badge['AppConfig']
 const { orientation, size: buttonGroupSize } = useButtonGroup<BadgeProps>(props)
@@ -62,20 +60,19 @@ const ui = computed(() => tv({ extend: tv(theme), ...(appConfig.ui?.badge || {})
  color: props.color,
  variant: props.variant,
  size: buttonGroupSize.value || props.size,
-  square: props.square || (!slots.default && !props.label),
  buttonGroup: orientation.value
 }))
 </script>

 <template>
-  <Primitive :as="as" :class="ui.base({ class: [props.ui?.base, props.class] })">
+  <Primitive :as="as" :class="ui.base({ class: [props.class, props.ui?.base] })">
    <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>

    <slot>
-      <span v-if="label !== undefined && label !== null" :class="ui.label({ class: props.ui?.label })">
+      <span v-if="label" :class="ui.label({ class: props.ui?.label })">
        {{ label }}
      </span>
    </slot>
--- a/src/runtime/components/Breadcrumb.vue
+++ b/src/runtime/components/Breadcrumb.vue
@@ -15,8 +15,6 @@ export interface BreadcrumbItem extends Omit<LinkProps, 'raw' | 'custom'> {
  icon?: string
  avatar?: AvatarProps
  slot?: string
-  class?: any
-  ui?: Pick<Breadcrumb['slots'], 'item' | 'link' | 'linkLeadingIcon' | 'linkLeadingAvatar' | 'linkLabel' | 'separator' | 'separatorIcon'>
  [key: string]: any
 }

@@ -83,19 +81,19 @@ const ui = computed(() => tv({ extend: tv(theme), ...(appConfig.ui?.breadcrumb |
 </script>

 <template>
-  <Primitive :as="as" aria-label="breadcrumb" :class="ui.root({ class: [props.ui?.root, props.class] })">
+  <Primitive :as="as" aria-label="breadcrumb" :class="ui.root({ class: [props.class, props.ui?.root] })">
    <ol :class="ui.list({ class: props.ui?.list })">
      <template v-for="(item, index) in items" :key="index">
-        <li :class="ui.item({ class: [props.ui?.item, item.ui?.item] })">
+        <li :class="ui.item({ class: props.ui?.item })">
          <ULink v-slot="{ active, ...slotProps }" v-bind="pickLinkProps(item)" custom>
-            <ULinkBase v-bind="slotProps" as="span" :aria-current="active && (index === items!.length - 1) ? 'page' : undefined" :class="ui.link({ class: [props.ui?.link, item.ui?.link, item.class], active: index === items!.length - 1, disabled: !!item.disabled, to: !!item.to })">
+            <ULinkBase v-bind="slotProps" as="span" :aria-current="active && (index === items!.length - 1) ? 'page' : undefined" :class="ui.link({ class: [props.ui?.link, item.class], active: index === items!.length - 1, disabled: !!item.disabled, to: !!item.to })">
              <slot :name="((item.slot || 'item') as keyof BreadcrumbSlots<T>)" :item="item" :index="index">
                <slot :name="((item.slot ? `${item.slot}-leading`: 'item-leading') as keyof BreadcrumbSlots<T>)" :item="item" :active="index === items!.length - 1" :index="index">
-                  <UIcon v-if="item.icon" :name="item.icon" :class="ui.linkLeadingIcon({ class: [props.ui?.linkLeadingIcon, item.ui?.linkLeadingIcon], active: index === items!.length - 1 })" />
-                  <UAvatar v-else-if="item.avatar" :size="((props.ui?.linkLeadingAvatarSize || ui.linkLeadingAvatarSize()) as AvatarProps['size'])" v-bind="item.avatar" :class="ui.linkLeadingAvatar({ class: [props.ui?.linkLeadingAvatar, item.ui?.linkLeadingAvatar], active: index === items!.length - 1 })" />
+                  <UIcon v-if="item.icon" :name="item.icon" :class="ui.linkLeadingIcon({ class: props.ui?.linkLeadingIcon, active: index === items!.length - 1 })" />
+                  <UAvatar v-else-if="item.avatar" :size="((props.ui?.linkLeadingAvatarSize || ui.linkLeadingAvatarSize()) as AvatarProps['size'])" v-bind="item.avatar" :class="ui.linkLeadingAvatar({ class: props.ui?.linkLeadingAvatar, active: index === items!.length - 1 })" />
                </slot>

-                <span v-if="get(item, props.labelKey as string) || !!slots[(item.slot ? `${item.slot}-label`: 'item-label') as keyof BreadcrumbSlots<T>]" :class="ui.linkLabel({ class: [props.ui?.linkLabel, item.ui?.linkLabel] })">
+                <span v-if="get(item, props.labelKey as string) || !!slots[(item.slot ? `${item.slot}-label`: 'item-label') as keyof BreadcrumbSlots<T>]" :class="ui.linkLabel({ class: props.ui?.linkLabel })">
                  <slot :name="((item.slot ? `${item.slot}-label`: 'item-label') as keyof BreadcrumbSlots<T>)" :item="item" :active="index === items!.length - 1" :index="index">
                    {{ get(item, props.labelKey as string) }}
                  </slot>
@@ -107,9 +105,9 @@ const ui = computed(() => tv({ extend: tv(theme), ...(appConfig.ui?.breadcrumb |
          </ULink>
        </li>

-        <li v-if="index < items!.length - 1" role="presentation" aria-hidden="true" :class="ui.separator({ class: [props.ui?.separator, item.ui?.separator] })">
+        <li v-if="index < items!.length - 1" role="presentation" aria-hidden="true" :class="ui.separator({ class: props.ui?.separator })">
          <slot name="separator">
-            <UIcon :name="separatorIcon" :class="ui.separatorIcon({ class: [props.ui?.separatorIcon, item.ui?.separatorIcon] })" />
+            <UIcon :name="separatorIcon" :class="ui.separatorIcon({ class: props.ui?.separatorIcon })" />
          </slot>
        </li>
      </template>
--- a/src/runtime/components/Button.vue
+++ b/src/runtime/components/Button.vue
@@ -1,8 +1,9 @@
 <script lang="ts">
 import type { AppConfig } from '@nuxt/schema'
 import theme from '#build/ui/button'
+import type { LinkProps } from './Link.vue'
 import type { UseComponentIconsProps } from '../composables/useComponentIcons'
-import type { LinkProps, AvatarProps } from '../types'
+import type { AvatarProps } from '../types'
 import type { ComponentConfig } from '../types/utils'

 type Button = ComponentConfig<typeof theme, AppConfig, 'button'>
@@ -122,13 +123,14 @@ const ui = computed(() => tv({
    v-slot="{ active, ...slotProps }"
    :type="type"
    :disabled="disabled || isLoading"
+    :class="ui.base({ class: [props.class, props.ui?.base] })"
    v-bind="omit(linkProps, ['type', 'disabled', 'onClick'])"
    custom
  >
    <ULinkBase
      v-bind="slotProps"
      :class="ui.base({
-        class: [props.ui?.base, props.class],
+        class: [props.class, props.ui?.base],
        active,
        ...(active && activeVariant ? { variant: activeVariant } : {}),
        ...(active && activeColor ? { color: activeColor } : {})
@@ -141,7 +143,7 @@ const ui = computed(() => tv({
      </slot>

      <slot>
-        <span v-if="label !== undefined && label !== null" :class="ui.label({ class: props.ui?.label, active })">
+        <span v-if="label" :class="ui.label({ class: props.ui?.label, active })">
          {{ label }}
        </span>
      </slot>
--- a/src/runtime/components/Calendar.vue
+++ b/src/runtime/components/Calendar.vue
@@ -157,7 +157,7 @@ const Calendar = computed(() => props.range ? RangeCalendar : SingleCalendar)
    :default-value="defaultValue"
    :locale="locale"
    :dir="dir"
-    :class="ui.root({ class: [props.ui?.root, props.class] })"
+    :class="ui.root({ class: [props.class, props.ui?.root] })"
  >
    <Calendar.Header :class="ui.header({ class: props.ui?.header })">
      <Calendar.Prev v-if="props.yearControls" :prev-page="(date: DateValue) => paginateYear(date, -1)" :aria-label="t('calendar.prevYear')" as-child>
--- a/src/runtime/components/Card.vue
+++ b/src/runtime/components/Card.vue
@@ -43,7 +43,7 @@ const ui = computed(() => tv({ extend: tv(theme), ...(appConfig.ui?.card || {})
 </script>

 <template>
-  <Primitive :as="as" :class="ui.root({ class: [props.ui?.root, props.class] })">
+  <Primitive :as="as" :class="ui.root({ class: [props.class, props.ui?.root] })">
    <div v-if="!!slots.header" :class="ui.header({ class: props.ui?.header })">
      <slot name="header" />
    </div>
--- a/src/runtime/components/Carousel.vue
+++ b/src/runtime/components/Carousel.vue
@@ -15,13 +15,7 @@ import type { ComponentConfig } from '../types/utils'

 type Carousel = ComponentConfig<typeof theme, AppConfig, 'carousel'>

-interface _CarouselItem {
-  class?: any
-  ui?: Pick<Carousel['slots'], 'item'>
-  [key: string]: any
-}
-
-export type CarouselItem = _CarouselItem | AcceptableValue
+export type CarouselItem = AcceptableValue

 export interface CarouselProps<T extends CarouselItem = CarouselItem> extends Omit<EmblaOptionsType, 'axis' | 'container' | 'slides' | 'direction'> {
  /**
@@ -260,10 +254,6 @@ function onSelect(api: EmblaCarouselType) {
  emits('select', selectedIndex.value)
 }

-function isCarouselItem(item: CarouselItem): item is _CarouselItem {
-  return typeof item === 'object' && item !== null
-}
-
 onMounted(() => {
  if (!emblaApi.value) {
    return
@@ -288,7 +278,7 @@ defineExpose({
    role="region"
    aria-roledescription="carousel"
    tabindex="0"
-    :class="ui.root({ class: [props.ui?.root, props.class] })"
+    :class="ui.root({ class: [props.class, props.ui?.root] })"
    @keydown="onKeyDown"
  >
    <div ref="emblaRef" :class="ui.viewport({ class: props.ui?.viewport })">
@@ -298,7 +288,7 @@ defineExpose({
          :key="index"
          role="group"
          aria-roledescription="slide"
-          :class="ui.item({ class: [props.ui?.item, isCarouselItem(item) && item.ui?.item, isCarouselItem(item) && item.class] })"
+          :class="ui.item({ class: props.ui?.item })"
        >
          <slot :item="item" :index="index" />
        </div>
--- a/src/runtime/components/Checkbox.vue
+++ b/src/runtime/components/Checkbox.vue
@@ -101,7 +101,7 @@ function onUpdate(value: any) {

 <!-- eslint-disable vue/no-template-shadow -->
 <template>
-  <Primitive :as="(!variant || variant === 'list') ? as : Label" :class="ui.root({ class: [props.ui?.root, props.class] })">
+  <Primitive :as="variant === 'list' ? as : Label" :class="ui.root({ class: [props.class, props.ui?.root] })">
    <div :class="ui.container({ class: props.ui?.container })">
      <CheckboxRoot
        :id="id"
@@ -122,7 +122,7 @@ function onUpdate(value: any) {
    </div>

    <div v-if="(label || !!slots.label) || (description || !!slots.description)" :class="ui.wrapper({ class: props.ui?.wrapper })">
-      <component :is="(!variant || variant === 'list') ? Label : 'p'" v-if="label || !!slots.label" :for="id" :class="ui.label({ class: props.ui?.label })">
+      <component :is="variant === 'list' ? Label : 'p'" v-if="label || !!slots.label" :for="id" :class="ui.label({ class: props.ui?.label })">
        <slot name="label" :label="label">
          {{ label }}
        </slot>
--- a/src/runtime/components/CheckboxGroup.vue
+++ b/src/runtime/components/CheckboxGroup.vue
@@ -14,12 +14,10 @@ export type CheckboxGroupItem = {
  description?: string
  disabled?: boolean
  value?: string
-  class?: any
-  ui?: Pick<CheckboxGroup['slots'], 'item'> & Omit<Required<CheckboxProps>['ui'], 'root'>
  [key: string]: any
 } | CheckboxGroupValue

-export interface CheckboxGroupProps<T extends CheckboxGroupItem = CheckboxGroupItem> extends Pick<CheckboxGroupRootProps, 'defaultValue' | 'disabled' | 'loop' | 'modelValue' | 'name' | 'required'>, Pick<CheckboxProps, 'color' | 'indicator' | 'icon'> {
+export interface CheckboxGroupProps<T extends CheckboxGroupItem = CheckboxGroupItem> extends Pick<CheckboxGroupRootProps, 'defaultValue' | 'disabled' | 'loop' | 'modelValue' | 'name' | 'required'>, Pick<CheckboxProps, 'color' | 'variant' | 'indicator' | 'icon'> {
  /**
   * The element or component this component should render as.
   * @defaultValue 'div'
@@ -46,10 +44,6 @@ export interface CheckboxGroupProps<T extends CheckboxGroupItem = CheckboxGroupI
   * @defaultValue 'md'
   */
  size?: CheckboxGroup['variants']['size']
-  /**
-   * @defaultValue 'list'
-   */
-  variant?: CheckboxGroup['variants']['variant']
  /**
   * The orientation the checkbox buttons are laid out.
   * @defaultValue 'vertical'
@@ -80,7 +74,6 @@ import { useAppConfig } from '#imports'
 import { useFormField } from '../composables/useFormField'
 import { get, omit } from '../utils'
 import { tv } from '../utils/tv'
-import UCheckbox from './Checkbox.vue'

 const props = withDefaults(defineProps<CheckboxGroupProps<T>>(), {
  valueKey: 'value',
@@ -103,9 +96,7 @@ const id = _id.value ?? useId()
 const ui = computed(() => tv({ extend: theme, ...(appConfig.ui?.checkboxGroup || {}) })({
  size: size.value,
  required: props.required,
-  orientation: props.orientation,
-  color: props.color,
-  variant: props.variant
+  orientation: props.orientation
 }))

 function normalizeItem(item: any) {
@@ -161,7 +152,7 @@ function onUpdate(value: any) {
    v-bind="rootProps"
    :name="name"
    :disabled="disabled"
-    :class="ui.root({ class: [props.ui?.root, props.class] })"
+    :class="ui.root({ class: [props.class, props.ui?.root] })"
    @update:model-value="onUpdate"
  >
    <fieldset :class="ui.fieldset({ class: props.ui?.fieldset })" v-bind="ariaAttrs">
@@ -179,8 +170,8 @@ function onUpdate(value: any) {
        :size="size"
        :name="name"
        :disabled="item.disabled || disabled"
-        :ui="{ ...(props.ui ? omit(props.ui, ['root']) : undefined), ...(item.ui || {}) }"
-        :class="ui.item({ class: [props.ui?.item, item.ui?.item, item.class] })"
+        :ui="props.ui ? omit(props.ui, ['root']) : undefined"
+        :class="ui.item({ class: props.ui?.item })"
      >
        <template v-for="(_, name) in proxySlots" #[name]>
          <slot :name="(name as keyof CheckboxGroupSlots<T>)" :item="item" />
--- a/src/runtime/components/Chip.vue
+++ b/src/runtime/components/Chip.vue
@@ -74,7 +74,7 @@ const ui = computed(() => tv({ extend: tv(theme), ...(appConfig.ui?.chip || {})
 </script>

 <template>
-  <Primitive :as="as" :class="ui.root({ class: [props.ui?.root, props.class] })">
+  <Primitive :as="as" :class="ui.root({ class: [props.class, props.ui?.root] })">
    <Slot v-bind="$attrs">
      <slot />
    </Slot>
--- a/src/runtime/components/Collapsible.vue
+++ b/src/runtime/components/Collapsible.vue
@@ -46,7 +46,7 @@ const ui = computed(() => tv({ extend: tv(theme), ...(appConfig.ui?.collapsible
 </script>

 <template>
-  <CollapsibleRoot v-slot="{ open }" v-bind="rootProps" :class="ui.root({ class: [props.ui?.root, props.class] })">
+  <CollapsibleRoot v-slot="{ open }" v-bind="rootProps" :class="ui.root({ class: [props.class, props.ui?.root] })">
    <CollapsibleTrigger v-if="!!slots.default" as-child>
      <slot :open="open" />
    </CollapsibleTrigger>
--- a/src/runtime/components/ColorPicker.vue
+++ b/src/runtime/components/ColorPicker.vue
@@ -263,7 +263,7 @@ const trackThumbStyle = computed(() => ({
 </script>

 <template>
-  <Primitive :as="as" :class="ui.root({ class: [props.ui?.root, props.class] })" :data-disabled="disabled ? true : undefined">
+  <Primitive :as="as" :class="ui.root({ class: [props.class, props.ui?.root] })" :data-disabled="disabled ? true : undefined">
    <div :class="ui.picker({ class: props.ui?.picker })">
      <div
        ref="selectorRef"
--- a/src/runtime/components/CommandPalette.vue
+++ b/src/runtime/components/CommandPalette.vue
@@ -27,8 +27,6 @@ export interface CommandPaletteItem extends Omit<LinkProps, 'type' | 'raw' | 'cu
  disabled?: boolean
  slot?: 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
 }

@@ -251,7 +249,7 @@ const groups = computed(() => {

 <!-- eslint-disable vue/no-v-html -->
 <template>
-  <ListboxRoot v-bind="rootProps" :class="ui.root({ class: [props.ui?.root, props.class] })">
+  <ListboxRoot v-bind="rootProps" :class="ui.root({ class: [props.class, props.ui?.root] })">
    <ListboxFilter v-model="searchTerm" as-child>
      <UInput
        :placeholder="placeholder || t('commandPalette.placeholder')"
@@ -295,42 +293,42 @@ const groups = computed(() => {
            @select="item.onSelect"
          >
            <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 })">
+              <ULinkBase v-bind="slotProps" :class="ui.item({ class: props.ui?.item, active: active || item.active })">
                <slot :name="((item.slot || group.slot || 'item') as keyof CommandPaletteSlots<G, T>)" :item="(item as any)" :index="index">
                  <slot :name="((item.slot ? `${item.slot}-leading` : group.slot ? `${group.slot}-leading` : `item-leading`) as keyof CommandPaletteSlots<G, T>)" :item="(item as any)" :index="index">
-                    <UIcon v-if="item.loading" :name="loadingIcon || appConfig.ui.icons.loading" :class="ui.itemLeadingIcon({ class: [props.ui?.itemLeadingIcon, item.ui?.itemLeadingIcon], loading: true })" />
-                    <UIcon v-else-if="item.icon" :name="item.icon" :class="ui.itemLeadingIcon({ class: [props.ui?.itemLeadingIcon, item.ui?.itemLeadingIcon], active: active || item.active })" />
-                    <UAvatar v-else-if="item.avatar" :size="((item.ui?.itemLeadingAvatarSize || props.ui?.itemLeadingAvatarSize || ui.itemLeadingAvatarSize()) as AvatarProps['size'])" v-bind="item.avatar" :class="ui.itemLeadingAvatar({ class: [props.ui?.itemLeadingAvatar, item.ui?.itemLeadingAvatar], active: active || item.active })" />
+                    <UIcon v-if="item.loading" :name="loadingIcon || appConfig.ui.icons.loading" :class="ui.itemLeadingIcon({ class: props.ui?.itemLeadingIcon, loading: true })" />
+                    <UIcon v-else-if="item.icon" :name="item.icon" :class="ui.itemLeadingIcon({ class: props.ui?.itemLeadingIcon, active: active || item.active })" />
+                    <UAvatar v-else-if="item.avatar" :size="((props.ui?.itemLeadingAvatarSize || ui.itemLeadingAvatarSize()) as AvatarProps['size'])" v-bind="item.avatar" :class="ui.itemLeadingAvatar({ class: props.ui?.itemLeadingAvatar, active: active || item.active })" />
                    <UChip
                      v-else-if="item.chip"
-                      :size="((item.ui?.itemLeadingChipSize || props.ui?.itemLeadingChipSize || ui.itemLeadingChipSize()) as ChipProps['size'])"
+                      :size="((props.ui?.itemLeadingChipSize || ui.itemLeadingChipSize()) as ChipProps['size'])"
                      inset
                      standalone
                      v-bind="item.chip"
-                      :class="ui.itemLeadingChip({ class: [props.ui?.itemLeadingChip, item.ui?.itemLeadingChip], active: active || item.active })"
+                      :class="ui.itemLeadingChip({ class: props.ui?.itemLeadingChip, active: active || item.active })"
                    />
                  </slot>

-                  <span v-if="item.labelHtml || get(item, props.labelKey as string) || !!slots[(item.slot ? `${item.slot}-label` : group.slot ? `${group.slot}-label` : `item-label`) as keyof CommandPaletteSlots<G, T>]" :class="ui.itemLabel({ class: [props.ui?.itemLabel, item.ui?.itemLabel], active: active || item.active })">
+                  <span v-if="item.labelHtml || get(item, props.labelKey as string) || !!slots[(item.slot ? `${item.slot}-label` : group.slot ? `${group.slot}-label` : `item-label`) as keyof CommandPaletteSlots<G, T>]" :class="ui.itemLabel({ class: props.ui?.itemLabel, active: active || item.active })">
                    <slot :name="((item.slot ? `${item.slot}-label` : group.slot ? `${group.slot}-label` : `item-label`) as keyof CommandPaletteSlots<G, T>)" :item="(item as any)" :index="index">
-                      <span v-if="item.prefix" :class="ui.itemLabelPrefix({ class: [props.ui?.itemLabelPrefix, item.ui?.itemLabelPrefix] })">{{ item.prefix }}</span>
+                      <span v-if="item.prefix" :class="ui.itemLabelPrefix({ class: props.ui?.itemLabelPrefix })">{{ item.prefix }}</span>

-                      <span :class="ui.itemLabelBase({ class: [props.ui?.itemLabelBase, item.ui?.itemLabelBase], active: active || item.active })" v-html="item.labelHtml || get(item, props.labelKey as string)" />
+                      <span :class="ui.itemLabelBase({ class: props.ui?.itemLabelBase, active: active || item.active })" v-html="item.labelHtml || get(item, props.labelKey as string)" />

-                      <span :class="ui.itemLabelSuffix({ class: [props.ui?.itemLabelSuffix, item.ui?.itemLabelSuffix], active: active || item.active })" v-html="item.suffixHtml || item.suffix" />
+                      <span :class="ui.itemLabelSuffix({ class: props.ui?.itemLabelSuffix, active: active || item.active })" v-html="item.suffixHtml || item.suffix" />
                    </slot>
                  </span>

-                  <span :class="ui.itemTrailing({ class: [props.ui?.itemTrailing, item.ui?.itemTrailing] })">
+                  <span :class="ui.itemTrailing({ class: props.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] })">
-                        <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 v-if="item.kbds?.length" :class="ui.itemTrailingKbds({ class: props.ui?.itemTrailingKbds })">
+                        <UKbd v-for="(kbd, kbdIndex) in item.kbds" :key="kbdIndex" :size="((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] })" />
+                      <UIcon v-else-if="group.highlightedIcon" :name="group.highlightedIcon" :class="ui.itemTrailingHighlightedIcon({ class: props.ui?.itemTrailingHighlightedIcon })" />
                    </slot>

                    <ListboxItemIndicator as-child>
-                      <UIcon :name="selectedIcon || appConfig.ui.icons.check" :class="ui.itemTrailingIcon({ class: [props.ui?.itemTrailingIcon, item.ui?.itemTrailingIcon] })" />
+                      <UIcon :name="selectedIcon || appConfig.ui.icons.check" :class="ui.itemTrailingIcon({ class: props.ui?.itemTrailingIcon })" />
                    </ListboxItemIndicator>
                  </span>
                </slot>
--- a/src/runtime/components/ContextMenu.vue
+++ b/src/runtime/components/ContextMenu.vue
@@ -32,8 +32,6 @@ export interface ContextMenuItem extends Omit<LinkProps, 'type' | 'raw' | 'custo
  children?: ArrayOrNested<ContextMenuItem>
  onSelect?(e: Event): void
  onUpdateChecked?(checked: boolean): void
-  class?: any
-  ui?: Pick<ContextMenu['slots'], 'item' | 'label' | 'separator' | 'itemLeadingIcon' | 'itemLeadingAvatarSize' | 'itemLeadingAvatar' | 'itemLabel' | 'itemLabelExternalIcon' | 'itemTrailing' | 'itemTrailingIcon' | 'itemTrailingKbds' | 'itemTrailingKbdsSize'>
  [key: string]: any
 }

--- a/src/runtime/components/ContextMenuContent.vue
+++ b/src/runtime/components/ContextMenuContent.vue
@@ -77,29 +77,29 @@ const groups = computed<ContextMenuItem[][]>(() =>
  <DefineItemTemplate v-slot="{ item, active, index }">
    <slot :name="((item.slot || 'item') as keyof ContextMenuSlots<T>)" :item="item" :index="index">
      <slot :name="((item.slot ? `${item.slot}-leading`: 'item-leading') as keyof ContextMenuSlots<T>)" :item="item" :active="active" :index="index">
-        <UIcon v-if="item.loading" :name="loadingIcon || appConfig.ui.icons.loading" :class="ui.itemLeadingIcon({ class: [uiOverride?.itemLeadingIcon, item.ui?.itemLeadingIcon], color: item?.color, loading: true })" />
-        <UIcon v-else-if="item.icon" :name="item.icon" :class="ui.itemLeadingIcon({ class: [uiOverride?.itemLeadingIcon, item.ui?.itemLeadingIcon], color: item?.color, active })" />
-        <UAvatar v-else-if="item.avatar" :size="((item.ui?.itemLeadingAvatarSize || props.uiOverride?.itemLeadingAvatarSize || ui.itemLeadingAvatarSize()) as AvatarProps['size'])" v-bind="item.avatar" :class="ui.itemLeadingAvatar({ class: [uiOverride?.itemLeadingAvatar, item.ui?.itemLeadingAvatar], active })" />
+        <UIcon v-if="item.loading" :name="loadingIcon || appConfig.ui.icons.loading" :class="ui.itemLeadingIcon({ class: uiOverride?.itemLeadingIcon, color: item?.color, loading: true })" />
+        <UIcon v-else-if="item.icon" :name="item.icon" :class="ui.itemLeadingIcon({ class: uiOverride?.itemLeadingIcon, color: item?.color, active })" />
+        <UAvatar v-else-if="item.avatar" :size="((props.uiOverride?.itemLeadingAvatarSize || ui.itemLeadingAvatarSize()) as AvatarProps['size'])" v-bind="item.avatar" :class="ui.itemLeadingAvatar({ class: uiOverride?.itemLeadingAvatar, active })" />
      </slot>

-      <span v-if="get(item, props.labelKey as string) || !!slots[(item.slot ? `${item.slot}-label`: 'item-label') as keyof ContextMenuSlots<T>]" :class="ui.itemLabel({ class: [uiOverride?.itemLabel, item.ui?.itemLabel], active })">
+      <span v-if="get(item, props.labelKey as string) || !!slots[(item.slot ? `${item.slot}-label`: 'item-label') as keyof ContextMenuSlots<T>]" :class="ui.itemLabel({ class: uiOverride?.itemLabel, active })">
        <slot :name="((item.slot ? `${item.slot}-label`: 'item-label') as keyof ContextMenuSlots<T>)" :item="item" :active="active" :index="index">
          {{ get(item, props.labelKey as string) }}
        </slot>

-        <UIcon v-if="item.target === '_blank' && externalIcon !== false" :name="typeof externalIcon === 'string' ? externalIcon : appConfig.ui.icons.external" :class="ui.itemLabelExternalIcon({ class: [uiOverride?.itemLabelExternalIcon, item.ui?.itemLabelExternalIcon], color: item?.color, active })" />
+        <UIcon v-if="item.target === '_blank' && externalIcon !== false" :name="typeof externalIcon === 'string' ? externalIcon : appConfig.ui.icons.external" :class="ui.itemLabelExternalIcon({ class: uiOverride?.itemLabelExternalIcon, color: item?.color, active })" />
      </span>

-      <span :class="ui.itemTrailing({ class: [uiOverride?.itemTrailing, item.ui?.itemTrailing] })">
+      <span :class="ui.itemTrailing({ class: uiOverride?.itemTrailing })">
        <slot :name="((item.slot ? `${item.slot}-trailing`: 'item-trailing') as keyof ContextMenuSlots<T>)" :item="item" :active="active" :index="index">
-          <UIcon v-if="item.children?.length" :name="childrenIcon" :class="ui.itemTrailingIcon({ class: [uiOverride?.itemTrailingIcon, item.ui?.itemTrailingIcon], color: item?.color, active })" />
-          <span v-else-if="item.kbds?.length" :class="ui.itemTrailingKbds({ class: [uiOverride?.itemTrailingKbds, item.ui?.itemTrailingKbds] })">
-            <UKbd v-for="(kbd, kbdIndex) in item.kbds" :key="kbdIndex" :size="((item.ui?.itemTrailingKbdsSize || props.uiOverride?.itemTrailingKbdsSize || ui.itemTrailingKbdsSize()) as KbdProps['size'])" v-bind="typeof kbd === 'string' ? { value: kbd } : kbd" />
+          <UIcon v-if="item.children?.length" :name="childrenIcon" :class="ui.itemTrailingIcon({ class: uiOverride?.itemTrailingIcon, color: item?.color, active })" />
+          <span v-else-if="item.kbds?.length" :class="ui.itemTrailingKbds({ class: uiOverride?.itemTrailingKbds })">
+            <UKbd v-for="(kbd, kbdIndex) in item.kbds" :key="kbdIndex" :size="((props.uiOverride?.itemTrailingKbdsSize || ui.itemTrailingKbdsSize()) as KbdProps['size'])" v-bind="typeof kbd === 'string' ? { value: kbd } : kbd" />
          </span>
        </slot>

        <ContextMenu.ItemIndicator as-child>
-          <UIcon :name="checkedIcon || appConfig.ui.icons.check" :class="ui.itemTrailingIcon({ class: [uiOverride?.itemTrailingIcon, item.ui?.itemTrailingIcon], color: item?.color })" />
+          <UIcon :name="checkedIcon || appConfig.ui.icons.check" :class="ui.itemTrailingIcon({ class: uiOverride?.itemTrailingIcon, color: item?.color })" />
        </ContextMenu.ItemIndicator>
      </span>
    </slot>
@@ -111,17 +111,17 @@ const groups = computed<ContextMenuItem[][]>(() =>

      <ContextMenu.Group v-for="(group, groupIndex) in groups" :key="`group-${groupIndex}`" :class="ui.group({ class: uiOverride?.group })">
        <template v-for="(item, index) in group" :key="`group-${groupIndex}-${index}`">
-          <ContextMenu.Label v-if="item.type === 'label'" :class="ui.label({ class: [uiOverride?.label, item.ui?.label, item.class] })">
+          <ContextMenu.Label v-if="item.type === 'label'" :class="ui.label({ class: uiOverride?.label })">
            <ReuseItemTemplate :item="item" :index="index" />
          </ContextMenu.Label>
-          <ContextMenu.Separator v-else-if="item.type === 'separator'" :class="ui.separator({ class: [uiOverride?.separator, item.ui?.separator, item.class] })" />
+          <ContextMenu.Separator v-else-if="item.type === 'separator'" :class="ui.separator({ class: uiOverride?.separator })" />
          <ContextMenu.Sub v-else-if="item?.children?.length" :open="item.open" :default-open="item.defaultOpen">
            <ContextMenu.SubTrigger
              as="button"
              type="button"
              :disabled="item.disabled"
              :text-value="get(item, props.labelKey as string)"
-              :class="ui.item({ class: [uiOverride?.item, item.ui?.item, item.class], color: item?.color })"
+              :class="ui.item({ class: uiOverride?.item, color: item?.color })"
            >
              <ReuseItemTemplate :item="item" :index="index" />
            </ContextMenu.SubTrigger>
@@ -150,7 +150,7 @@ const groups = computed<ContextMenuItem[][]>(() =>
            :model-value="item.checked"
            :disabled="item.disabled"
            :text-value="get(item, props.labelKey as string)"
-            :class="ui.item({ class: [uiOverride?.item, item.ui?.item, item.class], color: item?.color })"
+            :class="ui.item({ class: [uiOverride?.item, item.class], color: item?.color })"
            @update:model-value="item.onUpdateChecked"
            @select="item.onSelect"
          >
@@ -164,7 +164,7 @@ const groups = computed<ContextMenuItem[][]>(() =>
            @select="item.onSelect"
          >
            <ULink v-slot="{ active, ...slotProps }" v-bind="pickLinkProps(item as Omit<ContextMenuItem, 'type'>)" custom>
-              <ULinkBase v-bind="slotProps" :class="ui.item({ class: [uiOverride?.item, item.ui?.item, item.class], active, color: item?.color })">
+              <ULinkBase v-bind="slotProps" :class="ui.item({ class: [uiOverride?.item, item.class], active, color: item?.color })">
                <ReuseItemTemplate :item="item" :active="active" :index="index" />
              </ULinkBase>
            </ULink>
--- a/Show More
+++ b/Show More