upgrade component meta

.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

.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:

.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:

.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>

.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
 

.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 }}

.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

.release-it.json

@@ -3,9 +3,6 @@
     "commitMessage": "chore(release): v${version}",
     "tagName": "v${version}"
   },
-  "npm": {
-    "publish": false
-  },
   "github": {
     "release": true,
     "releaseName": "v${version}",

CHANGELOG.md

@@ -1,96 +1,5 @@
 # Changelog
 
-## [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

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.

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'
       }
     }
   },

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>
 `
   }

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)"

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)"

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' }]

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>

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>

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}` } })) || []

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>

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 => ({

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++

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'
     }"

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 => ({

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++

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>

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>

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>

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 }}

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>
 

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',

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>

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

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',

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.

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

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

@@ -727,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);
@@ -973,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>

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/

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
 

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 })

docs/content/3.components/accordion.md

@@ -247,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.
@@ -302,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

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.

docs/content/3.components/carousel.md

@@ -229,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
@@ -252,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).

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

@@ -1,349 +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"}
-
-::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
-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
-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
-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
-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

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
 ---

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

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
 ---

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'

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

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
 ---

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
 ---

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

@@ -21,12 +21,8 @@ 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"}
@@ -144,7 +140,7 @@ Each item can take a `children` array of objects with the following properties t
 Use the `orientation` prop to change the orientation of the NavigationMenu.
 
 ::note
-When orientation is `vertical`, a [Collapsible](/components/collapsible) component is used to display children. You can control the open state of each item using the `open` and `defaultOpen` properties. You can also use the `collapsible` property to control if the item is collapsible.
+When orientation is `vertical`, a [Collapsible](/components/collapsible) component is used to display children. You can control the open state of each item using the `open` and `defaultOpen` properties.
 ::
 
 ::component-code

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

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
 ---

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

@@ -157,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.
 
@@ -169,8 +169,6 @@ ignore:
   - items
 external:
   - items
-externalTypes:
-  - RadioGroupItem[]
 props:
   color: 'primary'
   variant: 'table'
@@ -238,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`.
 

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
 ---

docs/content/3.components/slider.md

@@ -136,21 +136,6 @@ props:
 ---
 ::
 
-### Tooltip :badge{label="Soon" 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.

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
 ---

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

docs/content/3.components/tabs.md

@@ -210,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.

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`.
 

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.
 ::
 

docs/package.json

@@ -3,40 +3,40 @@
   "name": "@nuxt/ui-docs",
   "type": "module",
   "dependencies": {
-    "@ai-sdk/vue": "^1.2.11",
+    "@ai-sdk/vue": "^1.2.8",
     "@iconify-json/logos": "^1.2.4",
-    "@iconify-json/lucide": "^1.2.41",
-    "@iconify-json/simple-icons": "^1.2.33",
-    "@iconify-json/vscode-icons": "^1.2.20",
-    "@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": "https://pkg.pr.new/@nuxt/ui-pro@a30de4d",
-    "@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.1.0",
     "@vueuse/nuxt": "^13.1.0",
-    "ai": "^4.3.15",
+    "ai": "^4.3.9",
     "capture-website": "^4.2.0",
     "joi": "^17.13.3",
-    "motion-v": "^1.0.2",
-    "nuxt": "^3.17.2",
-    "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-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.3.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.14.4"
+    "wrangler": "^4.12.0"
   }
 }

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)
     })

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.1",
-  "packageManager": "pnpm@10.10.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,14 +115,14 @@
     "@iconify/vue": "^4.3.0",
     "@internationalized/date": "^3.8.0",
     "@internationalized/number": "^3.6.1",
-    "@nuxt/fonts": "^0.11.2",
+    "@nuxt/fonts": "^0.11.1",
     "@nuxt/icon": "^1.12.0",
-    "@nuxt/kit": "^3.17.2",
-    "@nuxt/schema": "^3.17.2",
+    "@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.5",
-    "@tailwindcss/vite": "^4.1.5",
+    "@tailwindcss/postcss": "^4.1.4",
+    "@tailwindcss/vite": "^4.1.4",
     "@tanstack/vue-table": "^8.21.3",
     "@unhead/vue": "^2.0.8",
     "@vueuse/core": "^13.1.0",
@@ -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.5",
+    "tailwindcss": "^4.1.4",
     "tinyglobby": "^0.2.13",
     "unplugin": "^2.3.2",
-    "unplugin-auto-import": "^19.2.0",
+    "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.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.6",
-    "nuxt": "^3.17.2",
-    "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.2"
+    "unplugin": "^2.3.2",
+    "vue-tsc": "2.2.0"
   },
   "pnpm": {
     "onlyBuiltDependencies": [
       "better-sqlite3",
-      "puppeteer",
       "sharp"
     ],
     "ignoredBuiltDependencies": [

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>

playground-vue/package.json

@@ -12,13 +12,13 @@
   "dependencies": {
     "@nuxt/ui": "latest",
     "vue": "^3.5.13",
-    "vue-router": "^4.5.1",
-    "zod": "^3.24.4"
+    "vue-router": "^4.5.0",
+    "zod": "^3.24.3"
   },
   "devDependencies": {
     "@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"
   }
 }

playground-vue/src/app.vue

@@ -27,7 +27,6 @@ const components = [
   'calendar',
   'carousel',
   'checkbox',
-  'checkbox-group',
   'chip',
   'collapsible',
   'color-picker',

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({

playground/app/app.vue

@@ -27,7 +27,6 @@ const components = [
   'calendar',
   'carousel',
   'checkbox',
-  'checkbox-group',
   'chip',
   'collapsible',
   'color-picker',

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>

playground/app/pages/components/checkbox-group.vue

@@ -1,73 +0,0 @@
-<script setup lang="ts">
-import themeCheckbox from '#build/ui/checkbox'
-import theme from '#build/ui/checkbox-group'
-
-const sizes = Object.keys(theme.variants.size) as Array<keyof typeof theme.variants.size>
-const variants = Object.keys(themeCheckbox.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>

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>

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>

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 => ({

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>

playground/nuxt.config.ts

@@ -1,6 +1,6 @@
 export default defineNuxtConfig({
   modules: [
-    '@nuxt/ui',
+    '../src/module',
     '@nuxthub/core'
   ],
 

playground/package.json

@@ -5,22 +5,14 @@
   "scripts": {
     "dev": "nuxi dev",
     "build": "nuxi build",
-    "generate": "nuxi generate",
-    "typecheck": "nuxt typecheck"
+    "generate": "nuxi generate"
   },
   "dependencies": {
-    "@iconify-json/lucide": "^1.2.41",
-    "@iconify-json/simple-icons": "^1.2.33",
+    "@iconify-json/lucide": "^1.2.37",
+    "@iconify-json/simple-icons": "^1.2.32",
     "@nuxt/ui": "latest",
-    "@nuxthub/core": "^0.8.27",
-    "nuxt": "^3.17.2",
-    "zod": "^3.24.4"
-  },
-  "devDependencies": {
-    "typescript": "^5.8.3",
-    "vue-tsc": "^2.2.10"
-  },
-  "resolutions": {
-    "unimport": "4.1.1"
+    "@nuxthub/core": "^0.8.24",
+    "nuxt": "^3.16.2",
+    "zod": "^3.24.3"
   }
 }

renovate.json

@@ -5,6 +5,9 @@
   "lockFileMaintenance": {
     "enabled": true
   },
+  "ignoreDeps": [
+    "vue-tsc"
+  ],
   "baseBranches": ["v2", "v3"],
   "packageRules": [{
     "matchBaseBranches": ["v3"],
@@ -16,11 +19,6 @@
       "@tailwindcss/postcss",
       "@tailwindcss/vite"
     ]
-  }, {
-    "groupName": "reka-ui",
-    "matchPackageNames": [
-      "reka-ui"
-    ]
   }, {
     "matchDepTypes": ["peerDependencies"],
     "enabled": false

scripts/release.sh

@@ -1,16 +0,0 @@
-#!/bin/bash
-
-# Restore all git changes
-git restore -s@ -SW  -- .
-
-# Update token
-if [[ ! -z ${NODE_AUTH_TOKEN} ]] ; then
-  echo "//registry.npmjs.org/:_authToken=${NODE_AUTH_TOKEN}" >> ~/.npmrc
-  echo "registry=https://registry.npmjs.org/" >> ~/.npmrc
-  echo "always-auth=true" >> ~/.npmrc
-  npm whoami
-fi
-
-# Release package
-echo "Publishing @nuxt/ui"
-npm publish --access public

src/module.ts

@@ -93,7 +93,7 @@ export default defineNuxtModule<ModuleOptions>({
 
     await registerModule('@nuxt/icon', 'icon', { cssLayer: 'components' })
     if (options.fonts) {
-      await registerModule('@nuxt/fonts', 'fonts', {})
+      await registerModule('@nuxt/fonts', 'fonts', { experimental: { processCSSVariables: true } })
     }
     if (options.colorMode) {
       await registerModule('@nuxtjs/color-mode', 'colorMode', { classSuffix: '', disableTransition: true })

src/plugins/plugins.ts

@@ -16,7 +16,6 @@ export default function PluginsPlugin(options: NuxtUIOptions) {
   const plugins = globSync(['**/*', '!*.d.ts'], { cwd: join(runtimeDir, 'plugins'), absolute: true })
 
   plugins.unshift(resolvePathSync('../runtime/vue/plugins/head', { extensions: ['.ts', '.mjs', '.js'], url: import.meta.url }))
-  plugins.push(resolvePathSync('../runtime/vue/plugins/colors', { extensions: ['.ts', '.mjs', '.js'], url: import.meta.url }))
   if (options.colorMode) {
     plugins.push(resolvePathSync('../runtime/vue/plugins/color-mode', { extensions: ['.ts', '.mjs', '.js'], url: import.meta.url }))
   }

src/runtime/components/Accordion.vue

@@ -89,7 +89,7 @@ const ui = computed(() => tv({ extend: tv(theme), ...(appConfig.ui?.accordion ||
 </script>
 
 <template>
-  <AccordionRoot v-bind="rootProps" :class="ui.root({ class: [props.ui?.root, props.class] })">
+  <AccordionRoot v-bind="rootProps" :class="ui.root({ class: [props.class, props.ui?.root] })">
     <AccordionItem
       v-for="(item, index) in props.items"
       v-slot="{ open }"
@@ -98,7 +98,7 @@ const ui = computed(() => tv({ extend: tv(theme), ...(appConfig.ui?.accordion ||
       :disabled="item.disabled"
       :class="ui.item({ class: props.ui?.item })"
     >
-      <AccordionHeader as="div" :class="ui.header({ class: props.ui?.header })">
+      <AccordionHeader :class="ui.header({ class: props.ui?.header })">
         <AccordionTrigger :class="ui.trigger({ class: props.ui?.trigger, disabled: item.disabled })">
           <slot name="leading" :item="item" :index="index" :open="open">
             <UIcon v-if="item.icon" :name="item.icon" :class="ui.leadingIcon({ class: props.ui?.leadingIcon })" />

src/runtime/components/Alert.vue

@@ -97,7 +97,7 @@ const ui = computed(() => tv({ extend: tv(theme), ...(appConfig.ui?.alert || {})
 </script>
 
 <template>
-  <Primitive :as="as" :data-orientation="orientation" :class="ui.root({ class: [props.ui?.root, props.class] })">
+  <Primitive :as="as" :data-orientation="orientation" :class="ui.root({ class: [props.class, props.ui?.root] })">
     <slot name="leading">
       <UAvatar v-if="avatar" :size="((props.ui?.avatarSize || ui.avatarSize()) as AvatarProps['size'])" v-bind="avatar" :class="ui.avatar({ class: props.ui?.avatar })" />
       <UIcon v-else-if="icon" :name="icon" :class="ui.icon({ class: props.ui?.icon })" />

src/runtime/components/Avatar.vue

@@ -81,7 +81,7 @@ function onError() {
 </script>
 
 <template>
-  <Primitive :as="as" :class="ui.root({ class: [props.ui?.root, props.class] })" :style="props.style">
+  <Primitive :as="as" :class="ui.root({ class: [props.class, props.ui?.root] })" :style="props.style">
     <component
       :is="ImageComponent"
       v-if="src && !error"

src/runtime/components/AvatarGroup.vue

@@ -93,7 +93,7 @@ provide(avatarGroupInjectionKey, computed(() => ({
 </script>
 
 <template>
-  <Primitive :as="as" :class="ui.root({ class: [props.ui?.root, props.class] })">
+  <Primitive :as="as" :class="ui.root({ class: [props.class, props.ui?.root] })">
     <UAvatar v-if="hiddenCount > 0" :text="`+${hiddenCount}`" :class="ui.base({ class: props.ui?.base })" />
     <component :is="avatar" v-for="(avatar, count) in visibleAvatars" :key="count" :class="ui.base({ class: props.ui?.base })" />
   </Primitive>

src/runtime/components/Badge.vue

@@ -65,14 +65,14 @@ const ui = computed(() => tv({ extend: tv(theme), ...(appConfig.ui?.badge || {})
 </script>
 
 <template>
-  <Primitive :as="as" :class="ui.base({ class: [props.ui?.base, props.class] })">
+  <Primitive :as="as" :class="ui.base({ class: [props.class, props.ui?.base] })">
     <slot name="leading">
       <UIcon v-if="isLeading && leadingIconName" :name="leadingIconName" :class="ui.leadingIcon({ class: props.ui?.leadingIcon })" />
       <UAvatar v-else-if="!!avatar" :size="((props.ui?.leadingAvatarSize || ui.leadingAvatarSize()) as AvatarProps['size'])" v-bind="avatar" :class="ui.leadingAvatar({ class: props.ui?.leadingAvatar })" />
     </slot>
 
     <slot>
-      <span v-if="label !== undefined && label !== null" :class="ui.label({ class: props.ui?.label })">
+      <span v-if="label" :class="ui.label({ class: props.ui?.label })">
         {{ label }}
       </span>
     </slot>

src/runtime/components/Breadcrumb.vue

@@ -81,7 +81,7 @@ const ui = computed(() => tv({ extend: tv(theme), ...(appConfig.ui?.breadcrumb |
 </script>
 
 <template>
-  <Primitive :as="as" aria-label="breadcrumb" :class="ui.root({ class: [props.ui?.root, props.class] })">
+  <Primitive :as="as" aria-label="breadcrumb" :class="ui.root({ class: [props.class, props.ui?.root] })">
     <ol :class="ui.list({ class: props.ui?.list })">
       <template v-for="(item, index) in items" :key="index">
         <li :class="ui.item({ class: props.ui?.item })">

src/runtime/components/Button.vue

@@ -123,7 +123,7 @@ const ui = computed(() => tv({
     v-slot="{ active, ...slotProps }"
     :type="type"
     :disabled="disabled || isLoading"
-    :class="ui.base({ class: [props.ui?.base, props.class] })"
+    :class="ui.base({ class: [props.class, props.ui?.base] })"
     v-bind="omit(linkProps, ['type', 'disabled', 'onClick'])"
     custom
   >
@@ -143,7 +143,7 @@ const ui = computed(() => tv({
       </slot>
 
       <slot>
-        <span v-if="label !== undefined && label !== null" :class="ui.label({ class: props.ui?.label, active })">
+        <span v-if="label" :class="ui.label({ class: props.ui?.label, active })">
           {{ label }}
         </span>
       </slot>

src/runtime/components/Calendar.vue

@@ -157,7 +157,7 @@ const Calendar = computed(() => props.range ? RangeCalendar : SingleCalendar)
     :default-value="defaultValue"
     :locale="locale"
     :dir="dir"
-    :class="ui.root({ class: [props.ui?.root, props.class] })"
+    :class="ui.root({ class: [props.class, props.ui?.root] })"
   >
     <Calendar.Header :class="ui.header({ class: props.ui?.header })">
       <Calendar.Prev v-if="props.yearControls" :prev-page="(date: DateValue) => paginateYear(date, -1)" :aria-label="t('calendar.prevYear')" as-child>

src/runtime/components/Card.vue

@@ -43,7 +43,7 @@ const ui = computed(() => tv({ extend: tv(theme), ...(appConfig.ui?.card || {})
 </script>
 
 <template>
-  <Primitive :as="as" :class="ui.root({ class: [props.ui?.root, props.class] })">
+  <Primitive :as="as" :class="ui.root({ class: [props.class, props.ui?.root] })">
     <div v-if="!!slots.header" :class="ui.header({ class: props.ui?.header })">
       <slot name="header" />
     </div>

src/runtime/components/Carousel.vue

@@ -99,13 +99,6 @@ export type CarouselSlots<T extends CarouselItem = CarouselItem> = {
   default(props: { item: T, index: number }): any
 }
 
-export interface CarouselEmits {
-  /**
-   * Emitted when the selected slide changes
-   * @param selectedIndex The index of the selected slide
-   */
-  select: [selectedIndex: number]
-}
 </script>
 
 <script setup lang="ts" generic="T extends CarouselItem">
@@ -148,7 +141,6 @@ const props = withDefaults(defineProps<CarouselProps<T>>(), {
   wheelGestures: false
 })
 defineSlots<CarouselSlots<T>>()
-const emits = defineEmits<CarouselEmits>()
 
 const { dir, t } = useLocale()
 const appConfig = useAppConfig() as Carousel['AppConfig']
@@ -250,8 +242,6 @@ function onSelect(api: EmblaCarouselType) {
   canScrollNext.value = api?.canScrollNext() || false
   canScrollPrev.value = api?.canScrollPrev() || false
   selectedIndex.value = api?.selectedScrollSnap() || 0
-
-  emits('select', selectedIndex.value)
 }
 
 onMounted(() => {
@@ -278,7 +268,7 @@ defineExpose({
     role="region"
     aria-roledescription="carousel"
     tabindex="0"
-    :class="ui.root({ class: [props.ui?.root, props.class] })"
+    :class="ui.root({ class: [props.class, props.ui?.root] })"
     @keydown="onKeyDown"
   >
     <div ref="emblaRef" :class="ui.viewport({ class: props.ui?.viewport })">

src/runtime/components/Checkbox.vue

@@ -18,19 +18,10 @@ export interface CheckboxProps extends Pick<CheckboxRootProps, 'disabled' | 'req
    * @defaultValue 'primary'
    */
   color?: Checkbox['variants']['color']
-  /**
-   * @defaultValue 'list'
-   */
-  variant?: Checkbox['variants']['variant']
   /**
    * @defaultValue 'md'
    */
   size?: Checkbox['variants']['size']
-  /**
-   * Position of the indicator.
-   * @defaultValue 'start'
-   */
-  indicator?: Checkbox['variants']['indicator']
   /**
    * The icon displayed when checked.
    * @defaultValue appConfig.ui.icons.check
@@ -84,10 +75,9 @@ const id = _id.value ?? useId()
 const ui = computed(() => tv({ extend: tv(theme), ...(appConfig.ui?.checkbox || {}) })({
   size: size.value,
   color: color.value,
-  variant: props.variant,
-  indicator: props.indicator,
   required: props.required,
-  disabled: disabled.value
+  disabled: disabled.value,
+  checked: Boolean(modelValue.value ?? props.defaultValue)
 }))
 
 function onUpdate(value: any) {
@@ -101,7 +91,7 @@ function onUpdate(value: any) {
 
 <!-- eslint-disable vue/no-template-shadow -->
 <template>
-  <Primitive :as="variant === 'list' ? as : Label" :class="ui.root({ class: [props.ui?.root, props.class] })">
+  <Primitive :as="as" :class="ui.root({ class: [props.class, props.ui?.root] })">
     <div :class="ui.container({ class: props.ui?.container })">
       <CheckboxRoot
         :id="id"
@@ -113,7 +103,7 @@ function onUpdate(value: any) {
         @update:model-value="onUpdate"
       >
         <template #default="{ modelValue }">
-          <CheckboxIndicator :class="ui.indicator({ class: props.ui?.indicator })">
+          <CheckboxIndicator as-child>
             <UIcon v-if="modelValue === 'indeterminate'" :name="indeterminateIcon || appConfig.ui.icons.minus" :class="ui.icon({ class: props.ui?.icon })" />
             <UIcon v-else :name="icon || appConfig.ui.icons.check" :class="ui.icon({ class: props.ui?.icon })" />
           </CheckboxIndicator>
@@ -122,11 +112,11 @@ function onUpdate(value: any) {
     </div>
 
     <div v-if="(label || !!slots.label) || (description || !!slots.description)" :class="ui.wrapper({ class: props.ui?.wrapper })">
-      <component :is="variant === 'list' ? Label : 'p'" v-if="label || !!slots.label" :for="id" :class="ui.label({ class: props.ui?.label })">
+      <Label v-if="label || !!slots.label" :for="id" :class="ui.label({ class: props.ui?.label })">
         <slot name="label" :label="label">
           {{ label }}
         </slot>
-      </component>
+      </Label>
       <p v-if="description || !!slots.description" :class="ui.description({ class: props.ui?.description })">
         <slot name="description" :description="description">
           {{ description }}

src/runtime/components/CheckboxGroup.vue

@@ -1,183 +0,0 @@
-<script lang="ts">
-import type { CheckboxGroupRootProps, CheckboxGroupRootEmits } from 'reka-ui'
-import type { AppConfig } from '@nuxt/schema'
-import theme from '#build/ui/checkbox-group'
-import type { CheckboxProps } from '../types'
-import type { AcceptableValue, ComponentConfig } from '../types/utils'
-
-type CheckboxGroup = ComponentConfig<typeof theme, AppConfig, 'checkboxGroup'>
-
-export type CheckboxGroupValue = AcceptableValue
-
-export type CheckboxGroupItem = {
-  label?: string
-  description?: string
-  disabled?: boolean
-  value?: string
-  [key: string]: any
-} | CheckboxGroupValue
-
-export interface CheckboxGroupProps<T extends CheckboxGroupItem = CheckboxGroupItem> extends Pick<CheckboxGroupRootProps, 'defaultValue' | 'disabled' | 'loop' | 'modelValue' | 'name' | 'required'>, Pick<CheckboxProps, 'color' | 'variant' | 'indicator' | 'icon'> {
-  /**
-   * The element or component this component should render as.
-   * @defaultValue 'div'
-   */
-  as?: any
-  legend?: string
-  /**
-   * When `items` is an array of objects, select the field to use as the value.
-   * @defaultValue 'value'
-   */
-  valueKey?: string
-  /**
-   * When `items` is an array of objects, select the field to use as the label.
-   * @defaultValue 'label'
-   */
-  labelKey?: string
-  /**
-   * When `items` is an array of objects, select the field to use as the description.
-   * @defaultValue 'description'
-   */
-  descriptionKey?: string
-  items?: T[]
-  /**
-   * @defaultValue 'md'
-   */
-  size?: CheckboxGroup['variants']['size']
-  /**
-   * The orientation the checkbox buttons are laid out.
-   * @defaultValue 'vertical'
-   */
-  orientation?: CheckboxGroupRootProps['orientation']
-  class?: any
-  ui?: CheckboxGroup['slots'] & CheckboxProps['ui']
-}
-
-export type CheckboxGroupEmits = CheckboxGroupRootEmits & {
-  change: [payload: Event]
-}
-
-type SlotProps<T extends CheckboxGroupItem> = (props: { item: T & { id: string } }) => any
-
-export interface CheckboxGroupSlots<T extends CheckboxGroupItem = CheckboxGroupItem> {
-  legend(props?: {}): any
-  label: SlotProps<T>
-  description: SlotProps<T>
-}
-</script>
-
-<script setup lang="ts" generic="T extends CheckboxGroupItem">
-import { computed, useId } from 'vue'
-import { CheckboxGroupRoot, useForwardProps, useForwardPropsEmits } from 'reka-ui'
-import { reactivePick } from '@vueuse/core'
-import { useAppConfig } from '#imports'
-import { useFormField } from '../composables/useFormField'
-import { get, omit } from '../utils'
-import { tv } from '../utils/tv'
-import UCheckbox from './Checkbox.vue'
-
-const props = withDefaults(defineProps<CheckboxGroupProps<T>>(), {
-  valueKey: 'value',
-  labelKey: 'label',
-  descriptionKey: 'description',
-  orientation: 'vertical'
-})
-const emits = defineEmits<CheckboxGroupEmits>()
-const slots = defineSlots<CheckboxGroupSlots<T>>()
-
-const appConfig = useAppConfig() as CheckboxGroup['AppConfig']
-
-const rootProps = useForwardPropsEmits(reactivePick(props, 'as', 'modelValue', 'defaultValue', 'orientation', 'loop', 'required'), emits)
-const checkboxProps = useForwardProps(reactivePick(props, 'variant', 'indicator', 'icon'))
-const proxySlots = omit(slots, ['legend'])
-
-const { emitFormChange, emitFormInput, color, name, size, id: _id, disabled, ariaAttrs } = useFormField<CheckboxGroupProps<T>>(props, { bind: false })
-const id = _id.value ?? useId()
-
-const ui = computed(() => tv({ extend: theme, ...(appConfig.ui?.checkboxGroup || {}) })({
-  size: size.value,
-  required: props.required,
-  orientation: props.orientation
-}))
-
-function normalizeItem(item: any) {
-  if (item === null) {
-    return {
-      id: `${id}:null`,
-      value: undefined,
-      label: undefined
-    }
-  }
-
-  if (typeof item === 'string' || typeof item === 'number') {
-    return {
-      id: `${id}:${item}`,
-      value: String(item),
-      label: String(item)
-    }
-  }
-
-  const value = get(item, props.valueKey as string)
-  const label = get(item, props.labelKey as string)
-  const description = get(item, props.descriptionKey as string)
-
-  return {
-    ...item,
-    value,
-    label,
-    description,
-    id: `${id}:${value}`
-  }
-}
-
-const normalizedItems = computed(() => {
-  if (!props.items) {
-    return []
-  }
-  return props.items.map(normalizeItem)
-})
-
-function onUpdate(value: any) {
-  // @ts-expect-error - 'target' does not exist in type 'EventInit'
-  const event = new Event('change', { target: { value } })
-  emits('change', event)
-  emitFormChange()
-  emitFormInput()
-}
-</script>
-
-<!-- eslint-disable vue/no-template-shadow -->
-<template>
-  <CheckboxGroupRoot
-    :id="id"
-    v-bind="rootProps"
-    :name="name"
-    :disabled="disabled"
-    :class="ui.root({ class: [props.ui?.root, props.class] })"
-    @update:model-value="onUpdate"
-  >
-    <fieldset :class="ui.fieldset({ class: props.ui?.fieldset })" v-bind="ariaAttrs">
-      <legend v-if="legend || !!slots.legend" :class="ui.legend({ class: props.ui?.legend })">
-        <slot name="legend">
-          {{ legend }}
-        </slot>
-      </legend>
-
-      <UCheckbox
-        v-for="item in normalizedItems"
-        :key="item.value"
-        v-bind="{ ...item, ...checkboxProps }"
-        :color="color"
-        :size="size"
-        :name="name"
-        :disabled="item.disabled || disabled"
-        :ui="props.ui ? omit(props.ui, ['root']) : undefined"
-        :class="ui.item({ class: props.ui?.item })"
-      >
-        <template v-for="(_, name) in proxySlots" #[name]>
-          <slot :name="(name as keyof CheckboxGroupSlots<T>)" :item="item" />
-        </template>
-      </UCheckbox>
-    </fieldset>
-  </CheckboxGroupRoot>
-</template>

src/runtime/components/Chip.vue

@@ -74,7 +74,7 @@ const ui = computed(() => tv({ extend: tv(theme), ...(appConfig.ui?.chip || {})
 </script>
 
 <template>
-  <Primitive :as="as" :class="ui.root({ class: [props.ui?.root, props.class] })">
+  <Primitive :as="as" :class="ui.root({ class: [props.class, props.ui?.root] })">
     <Slot v-bind="$attrs">
       <slot />
     </Slot>

src/runtime/components/Collapsible.vue

@@ -46,7 +46,7 @@ const ui = computed(() => tv({ extend: tv(theme), ...(appConfig.ui?.collapsible
 </script>
 
 <template>
-  <CollapsibleRoot v-slot="{ open }" v-bind="rootProps" :class="ui.root({ class: [props.ui?.root, props.class] })">
+  <CollapsibleRoot v-slot="{ open }" v-bind="rootProps" :class="ui.root({ class: [props.class, props.ui?.root] })">
     <CollapsibleTrigger v-if="!!slots.default" as-child>
       <slot :open="open" />
     </CollapsibleTrigger>

src/runtime/components/ColorPicker.vue

@@ -263,7 +263,7 @@ const trackThumbStyle = computed(() => ({
 </script>
 
 <template>
-  <Primitive :as="as" :class="ui.root({ class: [props.ui?.root, props.class] })" :data-disabled="disabled ? true : undefined">
+  <Primitive :as="as" :class="ui.root({ class: [props.class, props.ui?.root] })" :data-disabled="disabled ? true : undefined">
     <div :class="ui.picker({ class: props.ui?.picker })">
       <div
         ref="selectorRef"

src/runtime/components/CommandPalette.vue

@@ -249,7 +249,7 @@ const groups = computed(() => {
 
 <!-- eslint-disable vue/no-v-html -->
 <template>
-  <ListboxRoot v-bind="rootProps" :class="ui.root({ class: [props.ui?.root, props.class] })">
+  <ListboxRoot v-bind="rootProps" :class="ui.root({ class: [props.class, props.ui?.root] })">
     <ListboxFilter v-model="searchTerm" as-child>
       <UInput
         :placeholder="placeholder || t('commandPalette.placeholder')"