upgrade component meta

HTMLElement is not defined
chore: upgrade component meta
2026-01-15 20:48:12 +01:00 · 2025-04-22 10:22:18 +02:00 · 2025-04-22 10:14:11 +02:00 · 2025-04-22 09:42:15 +02:00 · 2025-04-22 09:39:54 +02:00 · 2025-03-19 14:49:33 +01:00
231 changed files with 6998 additions and 12889 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/release.yml
+++ b/.github/workflows/release.yml
@@ -1,54 +0,0 @@
-name: release
-
-on:
-  push:
-    tags:
-      - 'v3*'
-
-jobs:
-  publish:
-    runs-on: ${{ matrix.os }}
-
-    strategy:
-      matrix:
-        os: [ubuntu-latest] # macos-latest, windows-latest
-        node: [22]
-
-    env:
-      NUXT_GITHUB_TOKEN: ${{ secrets.NUXT_GITHUB_TOKEN }}
-
-    steps:
-      - name: Checkout
-        uses: actions/checkout@v4
-
-      - name: Install pnpm
-        uses: pnpm/action-setup@v4
-
-      - name: Install node
-        uses: actions/setup-node@v4
-        with:
-          node-version: ${{ matrix.node }}
-          cache: pnpm
-
-      - name: Install dependencies
-        run: pnpm install
-
-      - name: Prepare
-        run: pnpm run dev:prepare
-
-      - name: Lint
-        run: pnpm run lint
-
-      - name: Typecheck
-        run: pnpm run typecheck
-
-      - name: Test
-        run: pnpm run test run
-
-      - name: Test (vue)
-        run: pnpm run test:vue run
-
-      - name: Publish
-        run: ./scripts/release.sh
-        env:
-          NODE_AUTH_TOKEN: ${{ secrets.NODE_AUTH_TOKEN }}
--- 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/.release-it.json
+++ b/.release-it.json
@@ -3,9 +3,6 @@
    "commitMessage": "chore(release): v${version}",
    "tagName": "v${version}"
  },
-  "npm": {
-    "publish": false
-  },
  "github": {
    "release": true,
    "releaseName": "v${version}",
--- a/CHANGELOG.md
+++ b/CHANGELOG.md
@@ -1,137 +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
-
-* **OverlayProvider:** return an overlay instance from `.open()` (#3829)
-
-### Features
-
-* **App:** add global `portal` prop ([#3688](https://github.com/nuxt/ui/issues/3688)) ([29fa462](https://github.com/nuxt/ui/commit/29fa46276d6bf69b5b87880c476c6f778c2820bf))
-* **Carousel:** add `select` event ([#3678](https://github.com/nuxt/ui/issues/3678)) ([22edfd7](https://github.com/nuxt/ui/commit/22edfd708ae3eeadbd4ff6c830cdfd5632948286))
-* **CheckboxGroup:** new component ([#3862](https://github.com/nuxt/ui/issues/3862)) ([9c3d53a](https://github.com/nuxt/ui/commit/9c3d53a02d6254f6b5c90e5fed826b8aefcdb042))
-* **components:** add new `content-top` and `content-bottom` slots ([#3886](https://github.com/nuxt/ui/issues/3886)) ([1a46394](https://github.com/nuxt/ui/commit/1a463946681e152aa18372118d0fef4a7d8055a5))
-* **Form:** add `attach` prop to opt-out of nested form attachement ([#3939](https://github.com/nuxt/ui/issues/3939)) ([1a0d7a3](https://github.com/nuxt/ui/commit/1a0d7a3103cf7591b019ef3ad685e2f3786ef6f2))
-* **Form:** export loading state ([#3861](https://github.com/nuxt/ui/issues/3861)) ([fdee252](https://github.com/nuxt/ui/commit/fdee2522bb9d8361ff3e9fdd4aa2350be8e49b05))
-* **InputMenu/SelectMenu:** handle `resetSearchTermOnSelect` ([cea881a](https://github.com/nuxt/ui/commit/cea881abdc139b39df89b503cf2ab872f4246c8f)), closes [#3782](https://github.com/nuxt/ui/issues/3782)
-* **InputNumber:** add support for `stepSnapping` & `disableWheelChange` props ([#3731](https://github.com/nuxt/ui/issues/3731)) ([f5e6284](https://github.com/nuxt/ui/commit/f5e62849c9313063396ab0e3a9b7d22d98ef69bc))
-* **locale:** add Bulgarian language ([#3783](https://github.com/nuxt/ui/issues/3783)) ([a0c9731](https://github.com/nuxt/ui/commit/a0c9731f634020e76aa98a9a68d673591d35e8c9))
-* **locale:** add Kazakh language ([#3875](https://github.com/nuxt/ui/issues/3875)) ([43153c4](https://github.com/nuxt/ui/commit/43153c4e91034b728059e7a9bed05888e48f8890))
-* **locale:** add Tajik language ([#3850](https://github.com/nuxt/ui/issues/3850)) ([f42a79b](https://github.com/nuxt/ui/commit/f42a79b5efe8dc65430a83799ebb0ee737773820))
-* **locale:** add Uyghur language ([#3878](https://github.com/nuxt/ui/issues/3878)) ([b7fc69b](https://github.com/nuxt/ui/commit/b7fc69baa718ff65b3988d0fa9f143306fa8fac4))
-* **Modal/Popover/Slideover:** add `close:prevent` event ([#3958](https://github.com/nuxt/ui/issues/3958)) ([f486423](https://github.com/nuxt/ui/commit/f4864233812eac0ed37e0a2d076a95c285a22c01))
-* **module:** define default color shades ([#3916](https://github.com/nuxt/ui/issues/3916)) ([7ac7aa9](https://github.com/nuxt/ui/commit/7ac7aa9ba73b6aca1bc29b0de2e95c60b2700135))
-* **module:** define neutral utilities ([#3629](https://github.com/nuxt/ui/issues/3629)) ([d49e0da](https://github.com/nuxt/ui/commit/d49e0dadeea2a58e05e60b2c461b29ce1d334d2b))
-* **module:** dynamic `rounded-*` utilities ([#3906](https://github.com/nuxt/ui/issues/3906)) ([f9737c8](https://github.com/nuxt/ui/commit/f9737c8f401bf8bc5307674fad6defe2aeeeb907))
-* **OverlayProvider:** return an overlay instance from `.open()` ([#3829](https://github.com/nuxt/ui/issues/3829)) ([f3098df](https://github.com/nuxt/ui/commit/f3098df84a3b7f58f7ccc1233bc8b45eab99ee10))
-* **PinInput:** add `autofocus` / `autofocus-delay` props ([0456670](https://github.com/nuxt/ui/commit/0456670dac1153340220603c8c116e3b71f72ae7)), closes [#3717](https://github.com/nuxt/ui/issues/3717)
-* **RadioGroup:** add `card` and `table`  variants ([#3178](https://github.com/nuxt/ui/issues/3178)) ([4d138ad](https://github.com/nuxt/ui/commit/4d138ad6719a074f5f994006d12745ca05bec9c4))
-* **Select:** handle `onSelect` field in items ([8640831](https://github.com/nuxt/ui/commit/864083156a79dfb5d0be868658b7f9fc77570178))
-* **Table:** conditionally apply classes to `tr` and `td` ([#3866](https://github.com/nuxt/ui/issues/3866)) ([80dfa88](https://github.com/nuxt/ui/commit/80dfa88ea442571ee1dc673317cc7baa8cacd8a3))
-* **Tabs:** add `list-leading` and `list-trailing` slots ([#3837](https://github.com/nuxt/ui/issues/3837)) ([3447a06](https://github.com/nuxt/ui/commit/3447a062b636a469089d6e9bdcfcb3dce9063ee5))
-* **Textarea:** add `autoresize-delay` prop ([06414d3](https://github.com/nuxt/ui/commit/06414d344b151ad6e1a3225a9f5f1f76d58d319c)), closes [#3730](https://github.com/nuxt/ui/issues/3730)
-* **Textarea:** add `icon`, `loading`, etc. props to match Input ([cb193f1](https://github.com/nuxt/ui/commit/cb193f1d25b5c73ca03dcf10864800350dd1c290))
-* **Textarea:** add `resize-none` class with `autoresize` prop ([ffafd81](https://github.com/nuxt/ui/commit/ffafd81e1ed25074430668c792e5e1c6afc22bd0))
-* **unplugin:** routing support for inertia ([#3845](https://github.com/nuxt/ui/issues/3845)) ([d059efc](https://github.com/nuxt/ui/commit/d059efca258da7ae5116e829189a492824ac1d87))
-
-### Bug Fixes
-
-* **Accordion:** use `div` instead of `h3` for header tag ([75e4792](https://github.com/nuxt/ui/commit/75e4792f7f00c55229253289c4f806f2b6fc9854)), closes [#3963](https://github.com/nuxt/ui/issues/3963)
-* **Alert/Toast:** display actions when using slots ([5086363](https://github.com/nuxt/ui/commit/50863635d653c8083772046ddc5b828fba7047d0)), closes [#3950](https://github.com/nuxt/ui/issues/3950)
-* **Carousel:** move arrows inside container on mobile ([d339dcb](https://github.com/nuxt/ui/commit/d339dcbfb8fe244bd198d247d8448e3ef856dfef)), closes [#3813](https://github.com/nuxt/ui/issues/3813)
-* **CheckboxGroup:** proxy slots & `ui` prop ([bc06185](https://github.com/nuxt/ui/commit/bc061852822edd2dfb832a46dd6388123ec5771e))
-* **CommandPalette:** consistent alignement with other components ([d25265c](https://github.com/nuxt/ui/commit/d25265c8b7d34e01af8827d9af5eccb98bf30e9e))
-* **CommandPalette:** increase input font size to avoid zoom ([d227a10](https://github.com/nuxt/ui/commit/d227a105d8d409ea0753153afaecf639ddb80fed))
-* **CommandPalette:** prevent hover background on disabled items ([ba534f1](https://github.com/nuxt/ui/commit/ba534f18b94383c97b2654d892ee4b8b024b3fab))
-* **components:** refactor types after `@nuxt/module-builder` upgrade ([#3855](https://github.com/nuxt/ui/issues/3855)) ([39c861a](https://github.com/nuxt/ui/commit/39c861a64bbd452256ebd1a14a257b94c35855d4))
-* **components:** respect `transform-origin` in popper content ([#3919](https://github.com/nuxt/ui/issues/3919)) ([01d8dc7](https://github.com/nuxt/ui/commit/01d8dc72adb0b32ad68bb4a98bf24b17f435a89c))
-* **ContextMenu/DropdownMenu:** handle RTL mode ([#3744](https://github.com/nuxt/ui/issues/3744)) ([1ae5cc0](https://github.com/nuxt/ui/commit/1ae5cc09cb2eca6b6f53eb04db9dcc731b696cae))
-* **ContextMenuContent/DropdownMenuContent:** remove unwanted `any` ([#3741](https://github.com/nuxt/ui/issues/3741)) ([97274f1](https://github.com/nuxt/ui/commit/97274f15b8bfe457e7e206f81b32e3febf0f875d))
-* **Form:** input and output type inference ([#3938](https://github.com/nuxt/ui/issues/3938)) ([f429498](https://github.com/nuxt/ui/commit/f42949820be9be9fca41abc653dc12c033e1eeec))
-* **Form:** loses focus on submit ([#3796](https://github.com/nuxt/ui/issues/3796)) ([8e78eb1](https://github.com/nuxt/ui/commit/8e78eb15c85beef1c814206c4a192d4eb00a7e86))
-* **InputMenu/Select/SelectMenu:** add `min-w-fit` to `content` slot ([#3922](https://github.com/nuxt/ui/issues/3922)) ([f6b3761](https://github.com/nuxt/ui/commit/f6b376110c8bee2c41ae3137bb972aad402ebff1))
-* **InputMenu/SelectMenu:** correctly call `onSelect` events ([#3735](https://github.com/nuxt/ui/issues/3735)) ([f25fed5](https://github.com/nuxt/ui/commit/f25fed58e988b304e79cdb536d544d257395cf89))
-* **InputMenu/SelectMenu:** prevent `disabled` items to be selected ([8435a0f](https://github.com/nuxt/ui/commit/8435a0fe1622eb5b6863b6e4751c9d2d1be36db9)), closes [#3474](https://github.com/nuxt/ui/issues/3474)
-* **InputMenu/SelectMenu:** remove `valueKey` string case ([9ca213b](https://github.com/nuxt/ui/commit/9ca213bd3340492d7503a34bd142e1f79a697050)), closes [#3949](https://github.com/nuxt/ui/issues/3949) [#3331](https://github.com/nuxt/ui/issues/3331)
-* **InputMenu/SelectMenu:** support arbitrary `value` ([#3779](https://github.com/nuxt/ui/issues/3779)) ([52a97e2](https://github.com/nuxt/ui/commit/52a97e2df7903f91e3134931eb0d6bd4c528f71f))
-* **InputMenu:** emit `change` on multiple item removal ([9d2fed1](https://github.com/nuxt/ui/commit/9d2fed125013e3bbfbf9435678729cd05254a5e8)), closes [#3756](https://github.com/nuxt/ui/issues/3756)
-* **Link:** proxy `download` property ([#3879](https://github.com/nuxt/ui/issues/3879)) ([47cdc2e](https://github.com/nuxt/ui/commit/47cdc2e1d8cd9803ebc954ccae110d62b9a08779))
-* **NavigationMenu:** add `sm:w-auto` content slot ([abe0859](https://github.com/nuxt/ui/commit/abe0859691e06564f68335bd82dcd121e976408e)), closes [#3788](https://github.com/nuxt/ui/issues/3788)
-* **Skeleton:** improve accessibility ([#3613](https://github.com/nuxt/ui/issues/3613)) ([3484832](https://github.com/nuxt/ui/commit/3484832822015a224ce6fbeae5132018875557e6))
-* **Stepper:** ui prop override on `icon` and `content` slots ([1d45980](https://github.com/nuxt/ui/commit/1d459803dc052a16b8966ee89c71646bf6ef1c16)), closes [#3785](https://github.com/nuxt/ui/issues/3785)
-* **Table:** improve `data` reactivity ([#3967](https://github.com/nuxt/ui/issues/3967)) ([6e27304](https://github.com/nuxt/ui/commit/6e27304d8ca459a04667bac404084264a8cf58fd))
-* **Table:** pass header `colspan` to `th` ([#3926](https://github.com/nuxt/ui/issues/3926)) ([122e8ac](https://github.com/nuxt/ui/commit/122e8ac8f41ba093cd350c3ce642263263f77296))
-* **Tree:** simplify reusable template types ([#3836](https://github.com/nuxt/ui/issues/3836)) ([3deed4c](https://github.com/nuxt/ui/commit/3deed4c271cad4adc2a4c47d5dd02e95a14ce11a))
-* **types:** allow color identifiers with dashes ([#3896](https://github.com/nuxt/ui/issues/3896)) ([e5a1e26](https://github.com/nuxt/ui/commit/e5a1e26f9db763b54caed4ca313f44d1b5fe269d))
-* **types:** handle `ClassValue` in `ui` prop ([eea1415](https://github.com/nuxt/ui/commit/eea14155aa612649bc969d806ec5df4295945c70)), closes [#3860](https://github.com/nuxt/ui/issues/3860)
-* **types:** improve dynamic slots ([#3857](https://github.com/nuxt/ui/issues/3857)) ([8dd9d08](https://github.com/nuxt/ui/commit/8dd9d08209e47a7d9a5654db4fb936b4cbcfc021))
-* **usePortal:** adjust portal target resolution logic ([#3954](https://github.com/nuxt/ui/issues/3954)) ([db11db6](https://github.com/nuxt/ui/commit/db11db6ff1ce4b27a66aaa03f07870ba36426181))
-* **vite:** vitest skipping nuxt imports transformations ([#3925](https://github.com/nuxt/ui/issues/3925)) ([c31bffa](https://github.com/nuxt/ui/commit/c31bffad1b8afeda584bca8c73bb7f790eb12a9f))
-
 ## [3.0.2](https://github.com/nuxt/ui/compare/v3.0.1...v3.0.2) (2025-03-28)

 ### Features
--- a/README.md
+++ b/README.md
@@ -16,10 +16,6 @@ Nuxt UI harnesses the combined strengths of [Reka UI](https://reka-ui.com/), [Ta
 > [!NOTE]
 > You are on the `v3` development branch, check out the [v2 branch](https://github.com/nuxt/ui/tree/v2) for Nuxt UI v2.

-> [!TIP]
-> **Looking for more components ?**
-> Check out [Nuxt UI Pro](https://ui.nuxt.com/pro), a collection of premium Vue components, composables, and utilities built on top of Nuxt UI for faster and more powerful app development.
-
 ## Documentation

 Visit https://ui.nuxt.com to explore the documentation.
--- 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/ComponentCode.vue
+++ b/docs/app/components/content/ComponentCode.vue
@@ -153,8 +153,7 @@ const options = computed(() => {
    const items = propItems.length
      ? propItems.map((item: any) => ({
          value: item,
-          label: String(item),
-          chip: key.toLowerCase().endsWith('color') ? { color: item } : undefined
+          label: String(item)
        }))
      : prop?.type === 'boolean' || prop?.type === 'boolean | undefined'
        ? [{ value: true, label: 'true' }, { value: false, label: 'false' }]
--- 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/calendar/CalendarExternalControlsExample.vue
+++ b/docs/app/components/content/examples/calendar/CalendarExternalControlsExample.vue
@@ -1,21 +0,0 @@
-<script setup lang="ts">
-import { CalendarDate } from '@internationalized/date'
-
-const date = shallowRef(new CalendarDate(2025, 4, 2))
-</script>
-
-<template>
-  <div class="flex flex-col gap-4">
-    <UCalendar v-model="date" :month-controls="false" :year-controls="false" />
-
-    <div class="flex justify-between gap-4">
-      <UButton color="neutral" variant="outline" @click="date = date.subtract({ months: 1 })">
-        Prev
-      </UButton>
-
-      <UButton color="neutral" variant="outline" @click="date = date.add({ months: 1 })">
-        Next
-      </UButton>
-    </div>
-  </div>
-</template>
--- a/docs/app/components/content/examples/carousel/CarouselThumbnailsExample.vue
+++ b/docs/app/components/content/examples/carousel/CarouselThumbnailsExample.vue
@@ -1,58 +0,0 @@
-<script setup lang="ts">
-const items = [
-  'https://picsum.photos/640/640?random=1',
-  'https://picsum.photos/640/640?random=2',
-  'https://picsum.photos/640/640?random=3',
-  'https://picsum.photos/640/640?random=4',
-  'https://picsum.photos/640/640?random=5',
-  'https://picsum.photos/640/640?random=6'
-]
-
-const carousel = useTemplateRef('carousel')
-const activeIndex = ref(0)
-
-function onClickPrev() {
-  activeIndex.value--
-}
-function onClickNext() {
-  activeIndex.value++
-}
-function onSelect(index: number) {
-  activeIndex.value = index
-}
-
-function select(index: number) {
-  activeIndex.value = index
-
-  carousel.value?.emblaApi?.scrollTo(index)
-}
-</script>
-
-<template>
-  <div class="flex-1 w-full">
-    <UCarousel
-      ref="carousel"
-      v-slot="{ item }"
-      arrows
-      :items="items"
-      :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>
-
-    <div class="flex gap-1 justify-between pt-4 max-w-xs mx-auto">
-      <div
-        v-for="(item, index) in items"
-        :key="index"
-        class="size-11 opacity-25 hover:opacity-100 transition-opacity"
-        :class="{ 'opacity-100': activeIndex === index }"
-        @click="select(index)"
-      >
-        <img :src="item" width="44" height="44" class="rounded-lg">
-      </div>
-    </div>
-  </div>
-</template>
--- 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/form/FormExampleElements.vue
+++ b/docs/app/components/content/examples/form/FormExampleElements.vue
@@ -30,9 +30,6 @@ const schema = z.object({
  radioGroup: z.string().refine(value => value === 'option-2', {
    message: 'Select Option 2'
  }),
-  checkboxGroup: z.any().refine(values => !!values?.find((option: any) => option === 'option-2'), {
-    message: 'Include Option 2'
-  }),
  slider: z.number().max(20, { message: 'Must be less than 20' }),
  pin: z.string().regex(/^\d$/).array().length(5)
 })
@@ -104,14 +101,11 @@ async function onSubmit(event: FormSubmitEvent<Schema>) {
      <UFormField label="Textarea" name="textarea">
        <UTextarea v-model="state.textarea" class="w-full" />
      </UFormField>
-      <div class="flex gap-4">
-        <UFormField name="radioGroup">
-          <URadioGroup v-model="state.radioGroup" legend="Radio group" :items="items" />
-        </UFormField>
-        <UFormField name="checkboxGroup">
-          <UCheckboxGroup v-model="state.checkboxGroup" legend="Checkbox group" :items="items" />
-        </UFormField>
-      </div>
+
+      <UFormField name="radioGroup">
+        <URadioGroup v-model="state.radioGroup" legend="Radio group" :items="items" />
+      </UFormField>
+
      <UFormField name="pin" label="Pin Input" :error-pattern="/(pin)\..*/">
        <UPinInput v-model="state.pin" />
      </UFormField>
--- 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/TableDragAndDropExample.vue
+++ b/docs/app/components/content/examples/table/TableDragAndDropExample.vue
@@ -1,82 +0,0 @@
-<script setup lang="ts">
-import type { TableColumn } from '@nuxt/ui'
-import { useSortable } from '@vueuse/integrations/useSortable.mjs'
-
-type Payment = {
-  id: string
-  date: string
-  email: string
-  amount: number
-}
-
-const data = ref<Payment[]>([{
-  id: '4600',
-  date: '2024-03-11T15:30:00',
-  email: 'james.anderson@example.com',
-  amount: 594
-}, {
-  id: '4599',
-  date: '2024-03-11T10:10:00',
-  email: 'mia.white@example.com',
-  amount: 276
-}, {
-  id: '4598',
-  date: '2024-03-11T08:50:00',
-  email: 'william.brown@example.com',
-  amount: 315
-}, {
-  id: '4597',
-  date: '2024-03-10T19:45:00',
-  email: 'emma.davis@example.com',
-  amount: 529
-}])
-
-const columns: TableColumn<Payment>[] = [{
-  accessorKey: 'id',
-  header: '#',
-  cell: ({ row }) => `#${row.getValue('id')}`
-}, {
-  accessorKey: 'date',
-  header: 'Date',
-  cell: ({ row }) => {
-    return new Date(row.getValue('date')).toLocaleString('en-US', {
-      day: 'numeric',
-      month: 'short',
-      hour: '2-digit',
-      minute: '2-digit',
-      hour12: false
-    })
-  }
-}, {
-  accessorKey: 'email',
-  header: 'Email'
-}, {
-  accessorKey: 'amount',
-  header: () => h('div', { class: 'text-right' }, 'Amount'),
-  cell: ({ row }) => {
-    const amount = Number.parseFloat(row.getValue('amount'))
-    const formatted = new Intl.NumberFormat('en-US', {
-      style: 'currency',
-      currency: 'EUR'
-    }).format(amount)
-    return h('div', { class: 'text-right font-medium' }, formatted)
-  }
-}]
-
-useSortable('.my-table-tbody', data, {
-  animation: 150
-})
-</script>
-
-<template>
-  <div class="w-full">
-    <UTable
-      ref="table"
-      :data="data"
-      :columns="columns"
-      :ui="{
-        tbody: 'my-table-tbody'
-      }"
-    />
-  </div>
-</template>
--- 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/table/TableInfiniteScrollExample.vue
+++ b/docs/app/components/content/examples/table/TableInfiniteScrollExample.vue
@@ -1,88 +0,0 @@
-<script setup lang="ts">
-import type { TableColumn } from '@nuxt/ui'
-import { useInfiniteScroll } from '@vueuse/core'
-
-const UAvatar = resolveComponent('UAvatar')
-
-type User = {
-  id: number
-  firstName: string
-  username: string
-  email: string
-  image: string
-}
-
-type UserResponse = {
-  users: User[]
-  total: number
-  skip: number
-  limit: number
-}
-
-const skip = ref(0)
-
-const { data, status, execute } = await useFetch('https://dummyjson.com/users?limit=10&select=firstName,username,email,image', {
-  key: 'table-users-infinite-scroll',
-  params: { skip },
-  transform: (data?: UserResponse) => {
-    return data?.users
-  },
-  lazy: true,
-  immediate: false
-})
-
-const columns: TableColumn<User>[] = [{
-  accessorKey: 'id',
-  header: 'ID'
-}, {
-  accessorKey: 'image',
-  header: 'Avatar',
-  cell: ({ row }) => h(UAvatar, { src: row.original.image })
-}, {
-  accessorKey: 'firstName',
-  header: 'First name'
-}, {
-  accessorKey: 'email',
-  header: 'Email'
-}, {
-  accessorKey: 'username',
-  header: 'Username'
-}]
-
-const users = ref<User[]>([])
-
-watch(data, () => {
-  users.value = [
-    ...users.value,
-    ...(data.value || [])
-  ]
-})
-
-execute()
-
-const table = useTemplateRef<ComponentPublicInstance>('table')
-
-onMounted(() => {
-  useInfiniteScroll(table.value?.$el, () => {
-    skip.value += 10
-  }, {
-    distance: 200,
-    canLoadMore: () => {
-      return status.value !== 'pending'
-    }
-  })
-})
-</script>
-
-<template>
-  <div class="w-full">
-    <UTable
-      ref="table"
-      :data="users"
-      :columns="columns"
-      :loading="status === 'pending'"
-      sticky
-      class="flex-1 h-80"
-    />
-  </div>
-</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.installation/2.vue.md
+++ b/docs/content/1.getting-started/2.installation/2.vue.md
@@ -99,10 +99,6 @@ app.use(ui)
 app.mount('#app')
 ```

-::note{to="#inertia"}
-If you're using [Inertia.js](https://inertiajs.com/), you can skip the `vue-router` setup as Inertia provides its own routing system.
-::
-
 #### Import Tailwind CSS and Nuxt UI in your CSS

 ```css [assets/main.css]
@@ -317,29 +313,6 @@ export default defineConfig({
 This option adds the `transition-colors` class on components with hover or active states.
 ::

-### `inertia`
-
-Use the `inertia` option to enable compatibility with [Inertia.js](https://inertiajs.com/).
-
-```ts [vite.config.ts]
-import { defineConfig } from 'vite'
-import vue from '@vitejs/plugin-vue'
-import ui from '@nuxt/ui/vite'
-
-export default defineConfig({
-  plugins: [
-    vue(),
-    ui({
-      inertia: true
-    })
-  ]
-})
-```
-
-::note
-When using this option, `vue-router` is not required as Inertia.js provides its own routing system. The components that would normally use `RouterLink` will automatically use Inertia's `InertiaLink` component instead.
-::
-
 ## Continuous Releases

 Nuxt UI uses [pkg.pr.new](https://github.com/stackblitz-labs/pkg.pr.new) for continuous preview releases, providing developers with instant access to the latest features and bug fixes without waiting for official releases.
--- a/docs/content/1.getting-started/2.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
 ---
@@ -249,16 +247,6 @@ You can also pass the `value` of one of the items if provided.
 When `type="multiple"`, ensure to pass an array to the `default-value` prop or the `v-model` directive.
 ::

-### With drag and drop
-
-Use the [`useSortable`](https://vueuse.org/integrations/useSortable/) composable from [`@vueuse/integrations`](https://vueuse.org/integrations/README.html) to enable drag and drop functionality on the Accordion. This integration wraps [Sortable.js](https://sortablejs.github.io/Sortable/) to provide a seamless drag and drop experience.
-
-::component-example
---
-name: 'accordion-drag-and-drop-example'
---
-::
-
 ### With body slot

 Use the `#body` slot to customize the body of each item.
@@ -304,6 +292,18 @@ props:
 ---
 ::

+### With drag and drop
+
+Use the [`useSortable`](https://vueuse.org/integrations/useSortable/) composable from [`@vueuse/integrations`](https://vueuse.org/integrations/README.html) to enable drag and drop functionality on the accordion. This integration wraps [Sortable.js](https://sortablejs.github.io/Sortable/) to provide a seamless drag and drop experience.
+
+The `useSortable` composable accepts various options, see the [Usage](https://vueuse.org/integrations/useSortable/#usage) for more examples.
+
+::component-example
+---
+name: 'accordion-drag-and-drop-example'
+---
+::
+
 ## API

 ### Props
--- 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/calendar.md
+++ b/docs/content/3.components/calendar.md
@@ -223,16 +223,6 @@ name: 'calendar-other-system-example'
 You can check all the available calendars on `@internationalized/date` docs.
 ::

-### With external controls
-
-You can control the calendar with external controls by manipulating the date passed in the `v-model`.
-
-::component-example
---
-name: 'calendar-external-controls-example'
---
-::
-
 ### As a DatePicker

 Use a [Button](/components/button) and a [Popover](/components/popover) component to create a date picker.
--- 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
@@ -234,19 +229,6 @@ class: 'p-8 px-16'
 ---
 ::

-## Examples
-
-### With thumbnails
-
-You can use the [`emblaApi`](#expose) function [scrollTo](https://www.embla-carousel.com/api/methods/#scrollto) to display thumbnails under the carousel that allows you to navigate to a specific slide.
-
-::component-example
---
-name: 'carousel-thumbnails-example'
-class: 'p-8 px-16'
---
-::
-
 ## API

 ### Props
@@ -257,10 +239,6 @@ class: 'p-8 px-16'

 :component-slots

-### Emits
-
-:component-emits
-
 ### Expose

 You can access the typed component instance using [`useTemplateRef`](https://vuejs.org/api/composition-api-helpers.html#usetemplateref).
--- a/docs/content/3.components/checkbox-group.md
+++ b/docs/content/3.components/checkbox-group.md
@@ -1,355 +0,0 @@
---
-title: CheckboxGroup
-description: A set of checklist buttons to select multiple option from a list.
-category: form
-links:
-  - label: CheckboxGroup
-    icon: i-custom-reka-ui
-    to: https://reka-ui.com/docs/components/checkbox#group-root
-  - label: GitHub
-    icon: i-simple-icons-github
-    to: https://github.com/nuxt/ui/tree/v3/src/runtime/components/CheckboxGroup.vue
-navigation.badge: New
---
-
-
-## Usage
-
-Use the `v-model` directive to control the value of the CheckboxGroup or the `default-value` prop to set the initial value when you do not need to control its state.
-
-### Items
-
-Use the `items` prop as an array of strings or numbers:
-
-::component-code
---
-prettier: true
-ignore:
-  - modelValue
-  - items
-external:
-  - items
-  - modelValue
-externalTypes:
-  - CheckboxGroupItem[]
-  - CheckboxGroupValue[]
-props:
-  modelValue:
-    - 'System'
-  items:
-    - 'System'
-    - 'Light'
-    - 'Dark'
---
-::
-
-You can also pass an array of objects with the following properties:
-
- `label?: string`{lang="ts-type"}
- `description?: string`{lang="ts-type"}
- [`value?: string`{lang="ts-type"}](#value-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
---
-ignore:
-  - modelValue
-  - items
-external:
-  - items
-  - modelValue
-externalTypes:
-  - CheckboxGroupItem[]
-  - CheckboxGroupValue[]
-props:
-  modelValue:
-    - 'system'
-  items:
-    - label: 'System'
-      description: 'This is the first option.'
-      value: 'system'
-    - label: 'Light'
-      description: 'This is the second option.'
-      value: 'light'
-    - label: 'Dark'
-      description: 'This is the third option.'
-      value: 'dark'
---
-::
-
-::caution
-When using objects, you need to reference the `value` property of the object in the `v-model` directive or the `default-value` prop.
-::
-
-### Value Key
-
-You can change the property that is used to set the value by using the `value-key` prop. Defaults to `value`.
-
-::component-code
---
-ignore:
-  - modelValue
-  - items
-  - valueKey
-external:
-  - items
-  - modelValue
-externalTypes:
-  - CheckboxGroupItem[]
-  - CheckboxGroupValue[]
-props:
-  modelValue:
-    - 'light'
-  valueKey: 'id'
-  items:
-    - label: 'System'
-      description: 'This is the first option.'
-      id: 'system'
-    - label: 'Light'
-      description: 'This is the second option.'
-      id: 'light'
-    - label: 'Dark'
-      description: 'This is the third option.'
-      id: 'dark'
---
-::
-
-### Legend
-
-Use the `legend` prop to set the legend of the CheckboxGroup.
-
-::component-code
---
-prettier: true
-ignore:
-  - defaultValue
-  - items
-external:
-  - items
-externalTypes:
-  - CheckboxGroupItem[]
-props:
-  legend: 'Theme'
-  defaultValue:
-    - 'System'
-  items:
-    - 'System'
-    - 'Light'
-    - 'Dark'
---
-::
-
-### Color
-
-Use the `color` prop to change the color of the CheckboxGroup.
-
-::component-code
---
-prettier: true
-ignore:
-  - defaultValue
-  - items
-external:
-  - items
-externalTypes:
-  - CheckboxGroupItem[]
-items:
-  color:
-    - primary
-    - secondary
-    - success
-    - info
-    - warning
-    - error
-    - neutral
-props:
-  color: neutral
-  defaultValue:
-    - 'System'
-  items:
-    - 'System'
-    - 'Light'
-    - 'Dark'
---
-::
-
-### Variant
-
-Use the `variant` prop to change the variant of the CheckboxGroup.
-
-::component-code
---
-prettier: true
-ignore:
-  - defaultValue
-  - items
-external:
-  - items
-externalTypes:
-  - CheckboxGroupItem[]
-items:
-  color:
-    - primary
-    - secondary
-    - success
-    - info
-    - warning
-    - error
-    - neutral
-  variant:
-    - list
-    - card
-    - table
-props:
-  color: 'primary'
-  variant: 'card'
-  defaultValue:
-    - 'System'
-  items:
-    - 'System'
-    - 'Light'
-    - 'Dark'
---
-::
-
-### Size
-
-Use the `size` prop to change the size of the CheckboxGroup.
-
-::component-code
---
-prettier: true
-ignore:
-  - defaultValue
-  - items
-external:
-  - items
-externalTypes:
-  - CheckboxGroupItem[]
-items:
-  variant:
-    - list
-    - card
-    - table
-props:
-  size: 'xl'
-  variant: 'list'
-  defaultValue:
-    - 'System'
-  items:
-    - 'System'
-    - 'Light'
-    - 'Dark'
---
-::
-
-### Orientation
-
-Use the `orientation` prop to change the orientation of the CheckboxGroup. Defaults to `vertical`.
-
-::component-code
---
-prettier: true
-ignore:
-  - defaultValue
-  - items
-external:
-  - items
-externalTypes:
-  - CheckboxGroupItem[]
-items:
-  variant:
-    - list
-    - card
-    - table
-props:
-  orientation: 'horizontal'
-  variant: 'list'
-  defaultValue:
-    - 'System'
-  items:
-    - 'System'
-    - 'Light'
-    - 'Dark'
---
-::
-
-### Indicator
-
-Use the `indicator` prop to change the position or hide the indicator. Defaults to `start`.
-
-::component-code
---
-prettier: true
-ignore:
-  - defaultValue
-  - items
-external:
-  - items
-externalTypes:
-  - CheckboxGroupItem[]
-items:
-  indicator:
-    - start
-    - end
-    - hidden
-  variant:
-    - list
-    - card
-    - table
-props:
-  indicator: 'end'
-  variant: 'card'
-  defaultValue:
-    - 'System'
-  items:
-    - 'System'
-    - 'Light'
-    - 'Dark'
---
-::
-
-### Disabled
-
-Use the `disabled` prop to disable the CheckboxGroup.
-
-::component-code
---
-prettier: true
-ignore:
-  - defaultValue
-  - items
-external:
-  - items
-externalTypes:
-  - CheckboxGroupItem[]
-props:
-  disabled: true
-  defaultValue:
-    - 'System'
-  items:
-    - 'System'
-    - 'Light'
-    - 'Dark'
---
-::
-
-## API
-
-### Props
-
-:component-props
-
-### Slots
-
-:component-slots
-
-### Emits
-
-:component-emits
-
-## Theme
-
-:component-theme
--- a/docs/content/3.components/checkbox.md
+++ b/docs/content/3.components/checkbox.md
@@ -156,23 +156,6 @@ props:
 ---
 ::

-### Variant :badge{label="New" class="align-text-top"}
-
-Use the `variant` prop to change the variant of the Checkbox.
-
-::component-code
---
-ignore:
-  - label
-  - defaultValue
-props:
-  color: 'primary'
-  variant: 'card'
-  defaultValue: true
-  label: Check me
---
-::
-
 ### Size

 Use the `size` prop to change the size of the Checkbox.
@@ -184,24 +167,6 @@ ignore:
  - defaultValue
 props:
  size: xl
-  variant: list
-  defaultValue: true
-  label: Check me
---
-::
-
-### Indicator :badge{label="New" class="align-text-top"}
-
-Use the `indicator` prop to change the position or hide the indicator. Defaults to `start`.
-
-::component-code
---
-ignore:
-  - label
-  - defaultValue
-props:
-  indicator: 'end'
-  variant: 'card'
  defaultValue: true
  label: Check me
 ---
--- 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/modal.md
+++ b/docs/content/3.components/modal.md
@@ -276,7 +276,7 @@ This allows you to move the trigger outside of the Modal or remove it entirely.

 ### Prevent closing

-Set the `dismissible` prop to `false` to prevent the Modal from being closed when clicking outside of it or pressing escape. A `close:prevent` event will be emitted when the user tries to close it.
+Set the `dismissible` prop to `false` to prevent the Modal from being closed when clicking outside of it or pressing escape.

 ::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/popover.md
+++ b/docs/content/3.components/popover.md
@@ -183,7 +183,7 @@ In this example, leveraging [`defineShortcuts`](/composables/define-shortcuts),

 ### Prevent closing

-Set the `dismissible` prop to `false` to prevent the Popover from being closed when clicking outside of it or pressing escape. A `close:prevent` event will be emitted when the user tries to close it.
+Set the `dismissible` prop to `false` to prevent the Popover from being closed when clicking outside of it or pressing escape.

 ::component-example
 ---
--- 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
 ---
@@ -159,7 +157,7 @@ props:
 ---
 ::

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

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

@@ -171,8 +169,6 @@ ignore:
  - items
 external:
  - items
-externalTypes:
-  - RadioGroupItem[]
 props:
  color: 'primary'
  variant: 'table'
@@ -240,7 +236,7 @@ props:
 ---
 ::

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

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

--- a/docs/content/3.components/select-menu.md
+++ b/docs/content/3.components/select-menu.md
@@ -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/slideover.md
+++ b/docs/content/3.components/slideover.md
@@ -275,7 +275,7 @@ This allows you to move the trigger outside of the Slideover or remove it entire

 ### Prevent closing

-Set the `dismissible` prop to `false` to prevent the Slideover from being closed when clicking outside of it or pressing escape. A `close:prevent` event will be emitted when the user tries to close it.
+Set the `dismissible` prop to `false` to prevent the Slideover from being closed when clicking outside of it or pressing escape.

 ::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
@@ -105,13 +105,6 @@ highlights:
 When rendering components with `h`, you can either use the `resolveComponent` function or import from `#components`.
 ::

-### Meta
-
-Use the `meta` prop as an object ([TableMeta](https://tanstack.com/table/latest/docs/api/core/table#meta)) to pass properties like:
-
- `class`:
-  - `tr`: [The classes to apply to the `tr` element.]{class="text-muted"}
-
 ### Loading

 Use the `loading` prop to display a loading state, the `loading-color` prop to change its color and the `loading-animation` prop to change its animation.
@@ -260,30 +253,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).
@@ -475,37 +444,6 @@ class: '!p-0'
 ---
 ::

-### With infinite scroll
-
-If you use server-side pagination, you can use the [`useInfiniteScroll`](https://vueuse.org/core/useInfiniteScroll/#useinfinitescroll) composable to load more data when scrolling.
-
-::component-example
---
-prettier: true
-collapse: true
-overflowHidden: true
-name: 'table-infinite-scroll-example'
-class: '!p-0'
---
-::
-
-### With drag and drop
-
-Use the [`useSortable`](https://vueuse.org/integrations/useSortable/) composable from [`@vueuse/integrations`](https://vueuse.org/integrations/README.html) to enable drag and drop functionality on the Table. This integration wraps [Sortable.js](https://sortablejs.github.io/Sortable/) to provide a seamless drag and drop experience.
-
-::note
-Since the table ref doesn't expose the tbody element, add a unique class to it via the `:ui` prop to target it with `useSortable` (e.g. `:ui="{ tbody: 'my-table-tbody' }"`).
-::
-
-::component-example
---
-prettier: true
-collapse: true
-name: 'table-drag-and-drop-example'
-class: '!p-0'
---
-::
-
 ### With slots

 You can use slots to customize the header and data cells of the table.
@@ -551,7 +489,6 @@ This will give you access to the following:

 | Name | Type |
 | ---- | ---- |
-| `tableRef`{lang="ts-type"} | `Ref<HTMLTableElement \| null>`{lang="ts-type"} |
 | `tableApi`{lang="ts-type"} | [`Ref<Table \| null>`{lang="ts-type"}](https://tanstack.com/table/latest/docs/api/core/table#table-api) |

 ## Theme
--- 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/textarea.md
+++ b/docs/content/3.components/textarea.md
@@ -124,7 +124,7 @@ props:
 ---
 ::

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

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

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

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

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

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

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

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

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

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

 Use the `loading-icon` prop to customize the loading icon. Defaults to `i-lucide-refresh-cw`.

--- 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",
-    "@nuxt/content": "^3.5.1",
+    "@iconify-json/lucide": "^1.2.37",
+    "@iconify-json/simple-icons": "^1.2.32",
+    "@iconify-json/vscode-icons": "^1.2.19",
+    "@nuxt/content": "https://pkg.pr.new/@nuxt/content@754e480",
    "@nuxt/image": "^1.10.0",
    "@nuxt/ui": "latest",
-    "@nuxt/ui-pro": "^3.1.2",
-    "@nuxthub/core": "^0.8.27",
+    "@nuxt/ui-pro": "https://pkg.pr.new/@nuxt/ui-pro@5eebbb9",
+    "@nuxthub/core": "^0.8.24",
    "@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",
-    "nuxt-component-meta": "^0.11.0",
+    "motion-v": "0.13.1",
+    "nuxt": "^3.16.2",
+    "nuxt-component-meta": "https://pkg.pr.new/nuxt-component-meta@9d23978",
    "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.12.0"
  }
 }
--- a/docs/public/components/dark/checkbox-group.png
+++ b/docs/public/components/dark/checkbox-group.png
--- a/docs/public/components/light/checkbox-group.png
+++ b/docs/public/components/light/checkbox-group.png
--- 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
@@ -1,8 +1,6 @@
 import json5 from 'json5'
 import { camelCase, kebabCase } from 'scule'
 import { visit } from '@nuxt/content/runtime'
-import type { H3Event } from 'h3'
-import type { PageCollectionItemBase } from '@nuxt/content'
 import * as theme from '../../.nuxt/ui'
 import * as themePro from '../../.nuxt/ui-pro'
 import meta from '#nuxt-component-meta'
@@ -46,33 +44,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 +166,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 } }
@@ -303,18 +278,14 @@ const generateComponentCode = ({
 }

 export default defineNitroPlugin((nitroApp) => {
-  nitroApp.hooks.hook('content:llms:generate:document', async (_: H3Event, doc: PageCollectionItemBase) => {
+  nitroApp.hooks.hook('content:llms:generate:document' as any, async (doc: Document) => {
    const componentName = camelCase(doc.title)

    visitAndReplace(doc, 'component-theme', (node) => {
-      const attributes = node[1] as Record<string, string>
-      const mdcSpecificName = attributes?.slug
-
-      const finalComponentName = mdcSpecificName ? camelCase(mdcSpecificName) : componentName
-
+      const 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 +320,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.0.2",
+  "packageManager": "pnpm@10.9.0",
  "repository": {
    "type": "git",
    "url": "git+https://github.com/nuxt/ui.git"
@@ -96,12 +96,12 @@
  "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 +115,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 +144,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.0",
+    "happy-dom": "^17.4.4",
+    "nuxt": "^3.16.2",
+    "release-it": "^19.0.1",
+    "vitest": "^3.1.1",
    "vitest-environment-nuxt": "^1.0.1",
-    "vue-tsc": "^2.2.10"
+    "vue-tsc": "^2.2.0"
  },
  "peerDependencies": {
    "@inertiajs/vue3": "^2.0.7",
@@ -208,13 +207,12 @@
    "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": [
      "better-sqlite3",
-      "puppeteer",
      "sharp"
    ],
    "ignoredBuiltDependencies": [
--- 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.2",
+    "vue-tsc": "^2.2.0"
  }
 }
--- a/playground-vue/src/app.vue
+++ b/playground-vue/src/app.vue
@@ -27,7 +27,6 @@ const components = [
  'calendar',
  'carousel',
  'checkbox',
-  'checkbox-group',
  'chip',
  'collapsible',
  'color-picker',
--- 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/app.vue
+++ b/playground/app/app.vue
@@ -27,7 +27,6 @@ const components = [
  'calendar',
  'carousel',
  'checkbox',
-  'checkbox-group',
  'chip',
  'collapsible',
  'color-picker',
--- 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,72 +0,0 @@
-<script setup lang="ts">
-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 variant = ref('list' as const)
-
-const literalOptions = [
-  'Option 1',
-  'Option 2',
-  'Option 3'
-]
-const items = [
-  { value: '1', label: 'Option 1' },
-  { value: '2', label: 'Option 2' },
-  { value: '3', label: 'Option 3' }
-]
-
-const itemsWithDescription = [
-  { value: '1', label: 'Option 1', description: 'Description 1' },
-  { value: '2', label: 'Option 2', description: 'Description 2' },
-  { value: '3', label: 'Option 3', description: 'Description 3' }
-]
-</script>
-
-<template>
-  <div>
-    <div class="flex flex-col items-center gap-4">
-      <USelect v-model="variant" :items="variants" />
-
-      <div class="flex flex-wrap gap-4 ms-[100px]">
-        <UCheckboxGroup :variant="variant" :items="items" :default-value="['1']" />
-        <UCheckboxGroup :variant="variant" :items="items" color="neutral" :default-value="['1']" />
-        <UCheckboxGroup :variant="variant" :items="items" color="error" :default-value="['2']" />
-        <UCheckboxGroup :variant="variant" :items="literalOptions" />
-        <UCheckboxGroup :variant="variant" :items="items" disabled />
-      </div>
-
-      <div class="flex flex-wrap gap-4 ms-[100px]">
-        <UCheckboxGroup :variant="variant" :items="items" :default-value="['3']" indicator="start" />
-        <UCheckboxGroup :variant="variant" :items="items" :default-value="['3']" indicator="end" />
-        <UCheckboxGroup :variant="variant" :items="items" :default-value="['3']" indicator="hidden" />
-      </div>
-
-      <UCheckboxGroup :variant="variant" :items="items" orientation="horizontal" class="ms-[95px]" />
-
-      <div class="flex items-center gap-4 ms-[34px]">
-        <UCheckboxGroup v-for="size in sizes" :key="size" :size="size" :variant="variant" :items="items" />
-      </div>
-      <div class="flex items-center gap-4 ms-[74px]">
-        <UCheckboxGroup v-for="size in sizes" :key="size" :size="size" :variant="variant" :items="itemsWithDescription" />
-      </div>
-      <div class="flex gap-4">
-        <UCheckboxGroup :variant="variant" :items="items" legend="Legend" />
-        <UCheckboxGroup :variant="variant" :items="items" legend="Legend" required />
-        <UCheckboxGroup :variant="variant" :items="items">
-          <template #legend>
-            <span class="italic font-bold">
-              With slots
-            </span>
-          </template>
-          <template #label="{ item }">
-            <span class="italic">
-              {{ item.label }}
-            </span>
-          </template>
-        </UCheckboxGroup>
-      </div>
-      <UCheckboxGroup :variant="variant" :items="items" legend="Legend" orientation="horizontal" required />
-    </div>
-  </div>
-</template>
--- a/playground/app/pages/components/checkbox.vue
+++ b/playground/app/pages/components/checkbox.vue
@@ -2,51 +2,27 @@
 import theme from '#build/ui/checkbox'

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

 const checked = ref(true)
 </script>

 <template>
  <div class="flex flex-col items-center gap-4">
-    <div class="flex gap-4">
-      <USelect v-model="variant" :items="variants" />
-      <USelect v-model="indicator" :items="indicators" />
-    </div>
-
    <div class="flex flex-col gap-4">
-      <UCheckbox v-model="checked" label="Primary" :variant="variant" :indicator="indicator" orientation="horizontal" />
-      <UCheckbox label="Neutral" color="neutral" :variant="variant" :indicator="indicator" :default-value="true" />
-      <UCheckbox label="Error" color="error" :variant="variant" :indicator="indicator" :model-value="true" />
-      <UCheckbox label="Icon" icon="i-lucide-heart" :variant="variant" :indicator="indicator" :model-value="true" />
-      <UCheckbox label="Default value" :variant="variant" :indicator="indicator" :default-value="true" />
-      <UCheckbox label="Indeterminate" :variant="variant" :indicator="indicator" default-value="indeterminate" />
-      <UCheckbox label="Required" :variant="variant" :indicator="indicator" required />
-      <UCheckbox label="Disabled" :variant="variant" :indicator="indicator" disabled />
+      <UCheckbox v-model="checked" label="Primary" />
+      <UCheckbox label="Neutral" color="neutral" :default-value="true" />
+      <UCheckbox label="Error" color="error" :model-value="true" />
+      <UCheckbox label="Icon" icon="i-lucide-heart" :model-value="true" />
+      <UCheckbox label="Default value" :default-value="true" />
+      <UCheckbox label="Indeterminate" default-value="indeterminate" />
+      <UCheckbox label="Required" required />
+      <UCheckbox label="Disabled" disabled />
    </div>
    <div class="flex items-center gap-4 me-[-11px]">
-      <UCheckbox
-        v-for="size in sizes"
-        :key="size"
-        label="Check me"
-        :size="size"
-        :variant="variant"
-        :indicator="indicator"
-      />
+      <UCheckbox v-for="size in sizes" :key="size" label="Check me" :size="size" />
    </div>
    <div class="flex items-center gap-4 me-[-96px]">
-      <UCheckbox
-        v-for="size in sizes"
-        :key="size"
-        label="Check me"
-        description="This is a description"
-        :size="size"
-        :variant="variant"
-        :indicator="indicator"
-      />
+      <UCheckbox v-for="size in sizes" :key="size" label="Check me" description="This is a description" :size="size" />
    </div>
  </div>
 </template>
--- 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/app/pages/components/table.vue
+++ b/playground/app/pages/components/table.vue
@@ -143,8 +143,6 @@ const data = ref<Payment[]>([{
  amount: 567
 }])

-const currentID = ref(4601)
-
 const columns: TableColumn<Payment>[] = [{
  id: 'select',
  header: ({ table }) => h(UCheckbox, {
@@ -279,19 +277,8 @@ const pagination = ref({
  pageSize: 10
 })

-function addElement() {
-  data.value.unshift({
-    id: currentID.value.toString(),
-    date: new Date().toISOString(),
-    status: 'paid',
-    email: 'new@example.com',
-    amount: Math.random() * 1000
-  })
-  currentID.value++
-}
-
 function randomize() {
-  data.value = data.value.sort(() => Math.random() - 0.5)
+  data.value = [...data.value].sort(() => Math.random() - 0.5)
 }

 function onSelect(row: TableRow<Payment>) {
@@ -316,7 +303,6 @@ onMounted(() => {
      />

      <UButton color="neutral" label="Randomize" @click="randomize" />
-      <UButton color="neutral" label="Add element" @click="addElement" />

      <UDropdownMenu
        :items="table?.tableApi?.getAllColumns().filter(column => column.getCanHide()).map(column => ({
--- a/playground/app/pages/components/tabs.vue
+++ b/playground/app/pages/components/tabs.vue
@@ -59,6 +59,14 @@ const items = [{
        <template #custom="{ item }">
          <span class="text-muted">Custom: {{ item.content }}</span>
        </template>
+
+        <template #list-trailing>
+          <UButton
+            icon="lucide:refresh-cw"
+            variant="soft"
+            class="ml-2"
+          />
+        </template>
      </UTabs>
    </div>
  </div>
--- 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/Show More
+++ b/Show More
Author	SHA1	Message	Date
Farnabaz	c8b4bcbfeb	upgrade component meta	2025-04-22 10:22:18 +02:00
Farnabaz	6e3c3ba186	`HTMLElement` is not defined	2025-04-22 10:14:11 +02:00
Farnabaz	02f0847732	chore: upgrade component meta	2025-04-22 09:42:15 +02:00
Farnabaz	fb72012b01	Merge branch 'v3' into chore/content-3.3	2025-04-22 09:39:54 +02:00
Farnabaz	956da52e1f	Merge branch 'v3' into chore/content-3.3	2025-03-19 14:49:33 +01:00
Farnabaz	3c10dbb0f1	chore: upgrade content module	2025-03-04 15:02:11 +01:00