feat(FormField): wrap error with Presence to be animated

Co-authored-by: Jakub <jakub.michalek@freelo.io>
Co-authored-by: Benjamin Canac <canacb1@gmail.com>

.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 [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).
+        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).
   - 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 we might close it.
+      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.
       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 [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).
+        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).
   - 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 [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).
+        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).
   - type: textarea
     id: description
     attributes:

.github/reproduire/needs-reproduction.md

@@ -0,0 +1,30 @@
+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/docs.yml

@@ -42,6 +42,8 @@ jobs:
 
       - name: Build application
         run: pnpm run docs:build
+        env:
+          NODE_OPTIONS: '--max-old-space-size=8192'
 
       - name: Deploy to NuxtHub
         uses: nuxt-hub/action@v1

.github/workflows/module.yml

@@ -18,7 +18,7 @@ jobs:
 
     strategy:
       matrix:
-        os: [ubuntu-latest] # macos-latest, windows-latest
+        os: ${{ github.event_name == 'pull_request' && fromJSON('["ubuntu-latest"]') || fromJSON('["ubuntu-latest", "windows-latest"]') }} # macos-latest
         node: [22]
 
     env:
@@ -65,8 +65,57 @@ jobs:
         run: pnpm run dev:vue:build
 
       - name: Publish
+        # Only publish preview package on ubuntu during PRs
+        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

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

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

.npmrc

@@ -1,4 +1,3 @@
 shamefully-hoist=true
 auto-install-peers=true
 ignore-workspace-root-check=true
-shell-emulator=true

.release-it.json

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

CHANGELOG.md

@@ -1,5 +1,96 @@
 # 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,6 +16,10 @@ 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

@@ -7,10 +7,13 @@ export default defineBuildConfig({
     './src/vite'
   ],
   rollup: {
-    emitCJS: true
-  },
-  replace: {
-    'process.env.DEV': 'false'
+    replace: {
+      delimiters: ['', ''],
+      values: {
+        // Used in development to import directly from theme
+        'process.argv.includes(\'--uiDev\')': 'false'
+      }
+    }
   },
   hooks: {
     'mkdist:entry:options'(ctx, entry, options) {

cli/templates.mjs

@@ -31,13 +31,10 @@ const component = ({ name, primitive, pro, prose, content }) => {
       ? `
 <script lang="ts">
 import type { AppConfig } from '@nuxt/schema'
-import _appConfig from '#build/app.config'
 import theme from '#build/${path}/${prose ? 'prose/' : ''}${content ? 'content/' : ''}${kebabName}'
-import { tv } from '../utils/tv'
+import type { ComponentConfig } from '../types/utils'
 
-const appConfig${camelName} = _appConfig as AppConfig & { ${key}: { ${prose ? 'prose: { ' : ''}${camelName}: Partial<typeof theme> } }${prose ? ' }' : ''}
-
-const ${camelName} = tv({ extend: tv(theme), ...(appConfig${camelName}.${key}?.${prose ? 'prose?.' : ''}${camelName} || {}) })
+type ${upperName} = ComponentConfig<typeof theme, AppConfig, ${upperName}${pro ? `, '${key}'` : ''}>
 
 export interface ${upperName}Props {
   /**
@@ -46,7 +43,7 @@ export interface ${upperName}Props {
    */
   as?: any
   class?: any
-  ui?: Partial<typeof ${camelName}.slots>
+  ui?: ${upperName}['slots']
 }
 
 export interface ${upperName}Slots {
@@ -55,38 +52,37 @@ export interface ${upperName}Slots {
 </script>
 
 <script setup lang="ts">
+import { computed } from 'vue'
 import { Primitive } from 'reka-ui'
+import { useAppConfig } from '#imports'
+import { tv } from '../utils/tv'
 
 const props = defineProps<${upperName}Props>()
 defineSlots<${upperName}Slots>()
 
-const ui = ${camelName}()
+const appConfig = useAppConfig() as ${upperName}['AppConfig']
+
+const ui = computed(() => tv({ extend: tv(theme), ...(appConfig.ui?.${camelName} || {}) })())
 </script>
 
 <template>
-  <Primitive :as="as" :class="ui.root({ class: [props.class, props.ui?.root] })">
+  <Primitive :as="as" :class="ui.root({ class: [props.ui?.root, props.class] })">
     <slot />
   </Primitive>
 </template>
 `
       : `
 <script lang="ts">
-import type { VariantProps } from 'tailwind-variants'
 import type { ${upperName}RootProps, ${upperName}RootEmits } from 'reka-ui'
 import type { AppConfig } from '@nuxt/schema'
-import _appConfig from '#build/app.config'
 import theme from '#build/${path}/${prose ? 'prose/' : ''}${content ? 'content/' : ''}${kebabName}'
-import { tv } from '../utils/tv'
+import type { ComponentConfig } from '../types/utils'
 
-const appConfig${camelName} = _appConfig as AppConfig & { ${key}: { ${prose ? 'prose: { ' : ''}${camelName}: Partial<typeof theme> } }${prose ? ' }' : ''}
-
-const ${camelName} = tv({ extend: tv(theme), ...(appConfig${camelName}.${key}?.${prose ? 'prose?.' : ''}${camelName} || {}) })
-
-type ${upperName}Variants = VariantProps<typeof ${camelName}>
+type ${upperName} = ComponentConfig<typeof theme, AppConfig, ${upperName}${pro ? `, '${key}'` : ''}>
 
 export interface ${upperName}Props extends Pick<${upperName}RootProps> {
   class?: any
-  ui?: Partial<typeof ${camelName}.slots>
+  ui?: ${upperName}['slots']
 }
 
 export interface ${upperName}Emits extends ${upperName}RootEmits {}
@@ -95,20 +91,25 @@ export interface ${upperName}Slots {}
 </script>
 
 <script setup lang="ts">
+import { computed } from 'vue'
 import { ${upperName}Root, useForwardPropsEmits } from 'reka-ui'
 import { reactivePick } from '@vueuse/core'
+import { useAppConfig } from '#imports'
+import { tv } from '../utils/tv'
 
 const props = defineProps<${upperName}Props>()
 const emits = defineEmits<${upperName}Emits>()
 const slots = defineSlots<${upperName}Slots>()
 
+const appConfig = useAppConfig() as ${upperName}['AppConfig']
+
 const rootProps = useForwardPropsEmits(reactivePick(props), emits)
 
-const ui = ${camelName}()
+const ui = computed(() => tv({ extend: tv(theme), ...(appConfig.ui?.${camelName} || {}) })())
 </script>
 
 <template>
-  <${upperName}Root v-bind="rootProps" :class="ui.root({ class: [props.class, props.ui?.root] })" />
+  <${upperName}Root v-bind="rootProps" :class="ui.root({ class: [props.ui?.root, props.class] })" />
 </template>
 `
   }

docs/app/app.vue

@@ -23,7 +23,7 @@ useHead({
     { key: 'theme-color', name: 'theme-color', content: color }
   ],
   link: [
-    { rel: 'icon', type: 'image/svg+xml', href: '/icon.svg' },
+    // { rel: 'icon', type: 'image/svg+xml', href: '/icon.svg' },
     { rel: 'canonical', href: `https://ui.nuxt.com${withoutTrailingSlash(route.path)}` }
   ],
   style: [
@@ -40,6 +40,8 @@ useServerSeoMeta({
   twitterCard: 'summary_large_image'
 })
 
+useFaviconFromTheme()
+
 const { frameworks, modules } = useSharedData()
 const { mappedNavigation, filteredNavigation } = useContentNavigation(navigation)
 
@@ -51,7 +53,7 @@ provide('navigation', mappedNavigation)
     <NuxtLoadingIndicator color="var(--ui-primary)" :height="2" />
 
     <template v-if="!route.path.startsWith('/examples')">
-      <Banner />
+      <!-- <Banner /> -->
 
       <Header :links="links" />
     </template>
@@ -85,5 +87,5 @@ provide('navigation', mappedNavigation)
 </template>
 
 <style>
-/* Safelist (do not remove): [&>div]:*:my-0 [&>div]:*:w-full h-64 !px-0 !py-0 !pt-0 !pb-0 !p-0 !justify-start !justify-end !min-h-96 h-136 */
+/* Safelist (do not remove): [&>div]:*:my-0 [&>div]:*:w-full h-64 !px-0 !py-0 !pt-0 !pb-0 !p-0 !justify-start !justify-end !min-h-96 h-136 max-h-[341px] */
 </style>

docs/app/assets/css/main.css

@@ -1,7 +1,7 @@
 @import "tailwindcss" theme(static) source("../../../..");
 @import "@nuxt/ui-pro";
 
-@source "../../../content";
+@source "../../../content/**/*";
 @source "../../../node_modules/.c12";
 
 @theme static {

docs/app/components/AdsCarbon.vue

@@ -23,27 +23,27 @@ onMounted(() => {
 @reference "../assets/css/main.css";
 
 .carbon :deep(#carbonads) {
-  @apply relative border border-(--ui-border) rounded-[calc(var(--ui-radius)*1.5)] hover:bg-(--ui-bg-elevated)/50 w-full transition-colors min-h-[220px] p-2;
+  @apply relative border border-default rounded-md hover:bg-elevated/50 w-full transition-colors min-h-[220px] p-2;
 
   .carbon-img {
     @apply flex justify-center w-full;
 
     & > img {
-      @apply !max-w-full w-full rounded-(--ui-radius);
+      @apply !max-w-full w-full rounded-sm;
     }
   }
 
   .carbon-text {
-    @apply text-sm text-(--ui-text-muted) transition-colors text-center text-pretty flex pt-2;
+    @apply text-sm text-muted transition-colors text-center text-pretty flex pt-2;
   }
 
   .carbon-poweredby {
-    @apply block text-xs text-center text-(--ui-text-muted) pt-2;
+    @apply block text-xs text-center text-muted pt-2;
   }
 
   &:hover {
     .carbon-text {
-      @apply text-(--ui-text);
+      @apply text-default;
     }
   }
 }

docs/app/components/Footer.vue

@@ -22,8 +22,8 @@ const links = [{
 
   <UFooter>
     <template #left>
-      <NuxtLink to="https://github.com/nuxt/ui" target="_blank" class="text-sm text-(--ui-text-muted)">
-        Published under <span class="text-(--ui-text-highlighted)">MIT License</span>
+      <NuxtLink to="https://github.com/nuxt/ui" target="_blank" class="text-sm text-muted">
+        Published under <span class="text-highlighted">MIT License</span>
       </NuxtLink>
     </template>
 

docs/app/components/FrameworkSelect.vue

@@ -19,8 +19,8 @@ watch(framework, () => {
     :content="false"
     color="neutral"
     :ui="{
-      indicator: 'bg-(--ui-bg)',
-      trigger: 'px-1 data-[state=active]:text-(--ui-text-highlighted)'
+      indicator: 'bg-default',
+      trigger: 'px-1 data-[state=active]:text-highlighted w-full'
     }"
     size="xs"
     @update:model-value="(framework = $event as string)"

docs/app/components/Header.vue

@@ -41,7 +41,7 @@ const mobileLinks = computed(() => [
 <template>
   <UHeader :ui="{ left: 'min-w-0' }" :menu="{ shouldScaleBackground: true }">
     <template #left>
-      <NuxtLink to="/" class="flex items-end gap-2 font-bold text-xl text-(--ui-text-highlighted) min-w-0 focus-visible:outline-(--ui-primary) shrink-0" aria-label="Nuxt UI">
+      <NuxtLink to="/" class="flex items-end gap-2 font-bold text-xl text-highlighted min-w-0 focus-visible:outline-primary shrink-0" aria-label="Nuxt UI">
         <Logo v-if="route.path === '/'" class="w-auto h-6 shrink-0" />
         <LogoPro v-else-if="route.path.startsWith('/pro')" class="w-auto h-6 shrink-0" />
         <template v-else>
@@ -63,7 +63,7 @@ const mobileLinks = computed(() => [
           trailing-icon="i-lucide-chevron-down"
           size="xs"
           class="-mb-[6px] font-semibold rounded-full truncate"
-          :class="[open && 'bg-(--ui-primary)/15 ']"
+          :class="[open && 'bg-primary/15 ']"
           :ui="{
             trailingIcon: ['transition-transform duration-200', open ? 'rotate-180' : undefined].filter(Boolean).join(' ')
           }"
@@ -108,7 +108,7 @@ const mobileLinks = computed(() => [
           <span class="inline-flex items-center gap-0.5">
             {{ link.title }}
 
-            <sup v-if="link.module === 'ui-pro'" class="text-[8px] font-medium text-(--ui-primary)">PRO</sup>
+            <sup v-if="link.module === 'ui-pro'" class="text-[8px] font-medium text-primary">PRO</sup>
           </span>
         </template>
       </UContentNavigation>

docs/app/components/ModuleSelect.vue

@@ -19,8 +19,8 @@ watch(module, () => {
     :content="false"
     color="neutral"
     :ui="{
-      indicator: 'bg-(--ui-bg)',
-      trigger: 'px-1 data-[state=active]:text-(--ui-text-highlighted)'
+      indicator: 'bg-default',
+      trigger: 'px-1 data-[state=active]:text-highlighted w-full'
     }"
     size="xs"
     @update:model-value="(module = $event as string)"

docs/app/components/content/ComponentCode.vue

@@ -153,7 +153,8 @@ const options = computed(() => {
     const items = propItems.length
       ? propItems.map((item: any) => ({
           value: item,
-          label: String(item)
+          label: String(item),
+          chip: key.toLowerCase().endsWith('color') ? { color: item } : undefined
         }))
       : prop?.type === 'boolean' || prop?.type === 'boolean | undefined'
         ? [{ value: true, label: 'true' }, { value: false, label: 'false' }]
@@ -328,16 +329,16 @@ const { data: ast } = await useAsyncData(`component-code-${name}-${hash({ props:
 
 <template>
   <div class="my-5">
-    <div>
-      <div v-if="options.length" class="flex flex-wrap items-center gap-2.5 border border-(--ui-border-muted) border-b-0 relative rounded-t-[calc(var(--ui-radius)*1.5)] px-4 py-2.5 overflow-x-auto">
+    <div class="relative">
+      <div v-if="options.length" class="flex flex-wrap items-center gap-2.5 border border-muted border-b-0 relative rounded-t-md px-4 py-2.5 overflow-x-auto">
         <template v-for="option in options" :key="option.name">
           <UFormField
             :label="option.label"
             size="sm"
-            class="inline-flex ring ring-(--ui-border-accented) rounded-(--ui-radius)"
+            class="inline-flex ring ring-accented rounded-sm"
             :ui="{
-              wrapper: 'bg-(--ui-bg-elevated)/50 rounded-l-(--ui-radius) flex border-r border-(--ui-border-accented)',
-              label: 'text-(--ui-text-muted) px-2 py-1.5',
+              wrapper: 'bg-elevated/50 rounded-l-sm flex border-r border-accented',
+              label: 'text-muted px-2 py-1.5',
               container: 'mt-0'
             }"
           >
@@ -348,7 +349,7 @@ const { data: ast } = await useAsyncData(`component-code-${name}-${hash({ props:
               value-key="value"
               color="neutral"
               variant="soft"
-              class="rounded-(--ui-radius) rounded-l-none min-w-12"
+              class="rounded-sm rounded-l-none min-w-12"
               :class="[option.name.toLowerCase().endsWith('color') && 'pl-6']"
               :ui="{ itemLeadingChip: 'size-2' }"
               @update:model-value="setComponentProp(option.name, $event)"
@@ -370,14 +371,14 @@ const { data: ast } = await useAsyncData(`component-code-${name}-${hash({ props:
               :model-value="getComponentProp(option.name)"
               color="neutral"
               variant="soft"
-              :ui="{ base: 'rounded-(--ui-radius) rounded-l-none min-w-12' }"
+              :ui="{ base: 'rounded-sm rounded-l-none min-w-12' }"
               @update:model-value="setComponentProp(option.name, $event)"
             />
           </UFormField>
         </template>
       </div>
 
-      <div v-if="component" class="flex justify-center border border-b-0 border-(--ui-border-muted) relative p-4 z-[1]" :class="[!options.length && 'rounded-t-[calc(var(--ui-radius)*1.5)]', props.class, { 'overflow-hidden': props.overflowHidden }]">
+      <div v-if="component" class="flex justify-center border border-b-0 border-muted relative p-4 z-[1]" :class="[!options.length && 'rounded-t-md', props.class, { 'overflow-hidden': props.overflowHidden }]">
         <component :is="component" v-bind="{ ...componentProps, ...componentEvents }">
           <template v-for="slot in Object.keys(slots || {})" :key="slot" #[slot]>
             <slot :name="slot" mdc-unwrap="p">

docs/app/components/content/ComponentExample.vue

@@ -150,8 +150,8 @@ const urlSearchParams = computed(() => {
 <template>
   <div ref="el" class="my-5">
     <template v-if="preview">
-      <div class="border border-(--ui-border-muted) relative z-[1]" :class="[{ 'border-b-0 rounded-t-[calc(var(--ui-radius)*1.5)]': props.source, 'rounded-[calc(var(--ui-radius)*1.5)]': !props.source, 'overflow-hidden': props.overflowHidden }]">
-        <div v-if="props.options?.length || !!slots.options" class="flex gap-4 p-4 border-b border-(--ui-border-muted)">
+      <div class="border border-muted relative z-[1]" :class="[{ 'border-b-0 rounded-t-md': props.source, 'rounded-md': !props.source, 'overflow-hidden': props.overflowHidden }]">
+        <div v-if="props.options?.length || !!slots.options" class="flex gap-4 p-4 border-b border-muted">
           <slot name="options" />
 
           <UFormField
@@ -160,10 +160,10 @@ const urlSearchParams = computed(() => {
             :label="option.label"
             :name="option.name"
             size="sm"
-            class="inline-flex ring ring-(--ui-border-accented) rounded-(--ui-radius)"
+            class="inline-flex ring ring-accented rounded-sm"
             :ui="{
-              wrapper: 'bg-(--ui-bg-elevated)/50 rounded-l-(--ui-radius) flex border-r border-(--ui-border-accented)',
-              label: 'text-(--ui-text-muted) px-2 py-1.5',
+              wrapper: 'bg-elevated/50 rounded-l-sm flex border-r border-accented',
+              label: 'text-muted px-2 py-1.5',
               container: 'mt-0'
             }"
           >
@@ -175,7 +175,7 @@ const urlSearchParams = computed(() => {
               :value-key="option.name.toLowerCase().endsWith('color') ? 'value' : undefined"
               color="neutral"
               variant="soft"
-              class="rounded-(--ui-radius) rounded-l-none min-w-12"
+              class="rounded-sm rounded-l-none min-w-12"
               :multiple="option.multiple"
               :class="[option.name.toLowerCase().endsWith('color') && 'pl-6']"
               :ui="{ itemLeadingChip: 'size-2' }"
@@ -196,7 +196,7 @@ const urlSearchParams = computed(() => {
               :model-value="get(optionsValues, option.name)"
               color="neutral"
               variant="soft"
-              :ui="{ base: 'rounded-(--ui-radius) rounded-l-none min-w-12' }"
+              :ui="{ base: 'rounded-sm rounded-l-none min-w-12' }"
               @update:model-value="set(optionsValues, option.name, $event)"
             />
           </UFormField>

docs/app/components/content/ComponentProps.vue

@@ -112,7 +112,7 @@ const metaProps: ComputedRef<ComponentMeta['props']> = computed(() => {
         <ProseTd>
           <HighlightInlineType v-if="prop.type" :type="prop.type" />
 
-          <MDC v-if="prop.description" :value="prop.description" class="text-(--ui-text-toned) mt-1" :cache-key="`${kebabCase(route.path)}-${prop.name}-description`" />
+          <MDC v-if="prop.description" :value="prop.description" class="text-toned mt-1" :cache-key="`${kebabCase(route.path)}-${prop.name}-description`" />
 
           <ComponentPropsLinks v-if="prop.tags?.length" :prop="prop" />
           <ComponentPropsSchema v-if="prop.schema" :prop="prop" :ignore="ignore" />

docs/app/components/content/ComponentPropsSchema.vue

@@ -38,12 +38,12 @@ const schemaProps = computed(() => {
 </script>
 
 <template>
-  <ProseCollapsible v-if="schemaProps?.length" class="mt-1">
+  <ProseCollapsible v-if="schemaProps?.length" class="mt-1 mb-0">
     <ProseUl>
       <ProseLi v-for="schemaProp in schemaProps" :key="schemaProp.name">
         <HighlightInlineType :type="`${schemaProp.name}${schemaProp.required === false ? '?' : ''}: ${schemaProp.type}`" />
 
-        <MDC v-if="schemaProp.description" :value="schemaProp.description" class="text-(--ui-text-muted) my-1" :cache-key="`${kebabCase(route.path)}-${prop.name}-${schemaProp.name}-description`" />
+        <MDC v-if="schemaProp.description" :value="schemaProp.description" class="text-muted my-1" :cache-key="`${kebabCase(route.path)}-${prop.name}-${schemaProp.name}-description`" />
       </ProseLi>
     </ProseUl>
   </ProseCollapsible>

docs/app/components/content/ComponentSlots.vue

@@ -36,7 +36,7 @@ const meta = await fetchComponentMeta(name as any)
         <ProseTd>
           <HighlightInlineType v-if="slot.type" :type="slot.type" />
 
-          <MDC v-if="slot.description" :value="slot.description" class="text-(--ui-text-toned) mt-1" :cache-key="`${kebabCase(route.path)}-${slot.name}-description`" />
+          <MDC v-if="slot.description" :value="slot.description" class="text-toned mt-1" :cache-key="`${kebabCase(route.path)}-${slot.name}-description`" />
         </ProseTd>
       </ProseTr>
     </ProseTbody>

docs/app/components/content/Placeholder.vue

@@ -1,6 +1,6 @@
 <template>
-  <div class="relative overflow-hidden rounded-(--ui-radius) border border-dashed border-(--ui-border-accented) opacity-75 px-4 flex items-center justify-center">
-    <svg class="absolute inset-0 h-full w-full stroke-(--ui-border-inverted)/10" fill="none">
+  <div class="relative overflow-hidden rounded-sm border border-dashed border-accented opacity-75 px-4 flex items-center justify-center">
+    <svg class="absolute inset-0 h-full w-full stroke-inverted/10" fill="none">
       <defs>
         <pattern
           id="pattern-5c1e4f0e-62d5-498b-8ff0-cf77bb448c8e"

docs/app/components/content/SupportedLanguages.vue

@@ -22,9 +22,11 @@ function getEmojiFlag(locale: string): string {
     hi: 'in', // Hindi -> India
     hy: 'am', // Armenian -> Armenia
     ja: 'jp', // Japanese -> Japan
+    kk: 'kz', // Kazakh -> Kazakhstan
     km: 'kh', // Khmer -> Cambodia
     ko: 'kr', // Korean -> South Korea
     nb: 'no', // Norwegian Bokmål -> Norway
+    sl: 'si', // Slovenian -> Slovenia
     sv: 'se', // Swedish -> Sweden
     uk: 'ua', // Ukrainian -> Ukraine
     ur: 'pk', // Urdu -> Pakistan

docs/app/components/content/examples/accordion/AccordionContentSlotExample.vue

@@ -20,7 +20,7 @@ const items: AccordionItem[] = [
 <template>
   <UAccordion :items="items">
     <template #content="{ item }">
-      <p class="pb-3.5 text-sm text-(--ui-text-muted)">
+      <p class="pb-3.5 text-sm text-muted">
         This is the {{ item.label }} panel.
       </p>
     </template>

docs/app/components/content/examples/accordion/AccordionCustomSlotExample.vue

@@ -24,7 +24,7 @@ const items = [
 <template>
   <UAccordion :items="items">
     <template #colors="{ item }">
-      <p class="text-sm pb-3.5 text-(--ui-primary)">
+      <p class="text-sm pb-3.5 text-primary">
         {{ item.content }}
       </p>
     </template>

docs/app/components/content/examples/accordion/AccordionDragAndDropExample.vue

@@ -11,7 +11,6 @@ const items = shallowRef<AccordionItem[]>([
   {
     label: 'Colors',
     icon: 'i-lucide-swatch-book',
-    slot: 'colors' as const,
     content: 'Choose a primary and a neutral color from your Tailwind CSS theme.'
   },
   {

docs/app/components/content/examples/avatar-group/AvatarGroupLinkExample.vue

@@ -3,7 +3,7 @@
     <ULink
       to="https://github.com/benjamincanac"
       target="_blank"
-      class="hover:ring-(--ui-primary) transition"
+      class="hover:ring-primary transition"
       raw
     >
       <UAvatar
@@ -15,7 +15,7 @@
     <ULink
       to="https://github.com/romhml"
       target="_blank"
-      class="hover:ring-(--ui-primary) transition"
+      class="hover:ring-primary transition"
       raw
     >
       <UAvatar
@@ -27,7 +27,7 @@
     <ULink
       to="https://github.com/noook"
       target="_blank"
-      class="hover:ring-(--ui-primary) transition"
+      class="hover:ring-primary transition"
       raw
     >
       <UAvatar

docs/app/components/content/examples/breadcrumb/BreadcrumbCustomSlotExample.vue

@@ -1,26 +1,35 @@
 <script setup lang="ts">
 import type { BreadcrumbItem } from '@nuxt/ui'
 
-const items = [{
-  label: 'Home',
-  to: '/'
-}, {
-  slot: 'dropdown' as const,
-  icon: 'i-lucide-ellipsis',
-  children: [{
-    label: 'Documentation'
-  }, {
-    label: 'Themes'
-  }, {
-    label: 'GitHub'
-  }]
-}, {
-  label: 'Components',
-  to: '/components'
-}, {
-  label: 'Breadcrumb',
-  to: '/components/breadcrumb'
-}] satisfies BreadcrumbItem[]
+const items = [
+  {
+    label: 'Home',
+    to: '/'
+  },
+  {
+    slot: 'dropdown' as const,
+    icon: 'i-lucide-ellipsis',
+    children: [
+      {
+        label: 'Documentation'
+      },
+      {
+        label: 'Themes'
+      },
+      {
+        label: 'GitHub'
+      }
+    ]
+  },
+  {
+    label: 'Components',
+    to: '/components'
+  },
+  {
+    label: 'Breadcrumb',
+    to: '/components/breadcrumb'
+  }
+] satisfies BreadcrumbItem[]
 </script>
 
 <template>

docs/app/components/content/examples/breadcrumb/BreadcrumbSeparatorSlotExample.vue

@@ -1,22 +1,26 @@
 <script setup lang="ts">
 import type { BreadcrumbItem } from '@nuxt/ui'
 
-const items: BreadcrumbItem[] = [{
-  label: 'Home',
-  to: '/'
-}, {
-  label: 'Components',
-  to: '/components'
-}, {
-  label: 'Breadcrumb',
-  to: '/components/breadcrumb'
-}]
+const items: BreadcrumbItem[] = [
+  {
+    label: 'Home',
+    to: '/'
+  },
+  {
+    label: 'Components',
+    to: '/components'
+  },
+  {
+    label: 'Breadcrumb',
+    to: '/components/breadcrumb'
+  }
+]
 </script>
 
 <template>
   <UBreadcrumb :items="items">
     <template #separator>
-      <span class="mx-2 text-(--ui-text-muted)">/</span>
+      <span class="mx-2 text-muted">/</span>
     </template>
   </UBreadcrumb>
 </template>

docs/app/components/content/examples/button-group/ButtonGroupDropdownExample.vue

@@ -1,23 +1,30 @@
 <script setup lang="ts">
 import type { DropdownMenuItem } from '@nuxt/ui'
 
-const items: DropdownMenuItem[] = [{
-  label: 'Team',
-  icon: 'i-lucide-users'
-}, {
-  label: 'Invite users',
-  icon: 'i-lucide-user-plus',
-  children: [{
-    label: 'Invite by email',
-    icon: 'i-lucide-send-horizontal'
-  }, {
-    label: 'Invite by link',
-    icon: 'i-lucide-link'
-  }]
-}, {
-  label: 'New team',
-  icon: 'i-lucide-plus'
-}]
+const items: DropdownMenuItem[] = [
+  {
+    label: 'Team',
+    icon: 'i-lucide-users'
+  },
+  {
+    label: 'Invite users',
+    icon: 'i-lucide-user-plus',
+    children: [
+      {
+        label: 'Invite by email',
+        icon: 'i-lucide-send-horizontal'
+      },
+      {
+        label: 'Invite by link',
+        icon: 'i-lucide-link'
+      }
+    ]
+  },
+  {
+    label: 'New team',
+    icon: 'i-lucide-plus'
+  }
+]
 </script>
 
 <template>

docs/app/components/content/examples/calendar/CalendarExternalControlsExample.vue

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

@@ -0,0 +1,58 @@
+<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/CommandPaletteCustomSlotExample.vue

@@ -1,76 +1,79 @@
 <script setup lang="ts">
-const groups = [{
-  id: 'settings',
-  items: [
-    {
-      label: 'Profile',
-      icon: 'i-lucide-user',
-      kbds: ['meta', 'P']
-    },
-    {
-      label: 'Billing',
-      icon: 'i-lucide-credit-card',
-      kbds: ['meta', 'B'],
-      slot: 'billing' as const
-    },
-    {
-      label: 'Notifications',
-      icon: 'i-lucide-bell'
-    },
-    {
-      label: 'Security',
-      icon: 'i-lucide-lock'
-    }
-  ]
-}, {
-  id: 'users',
-  label: 'Users',
-  slot: 'users' as const,
-  items: [
-    {
-      label: 'Benjamin Canac',
-      suffix: 'benjamincanac',
-      to: 'https://github.com/benjamincanac',
-      target: '_blank'
-    },
-    {
-      label: 'Sylvain Marroufin',
-      suffix: 'smarroufin',
-      to: 'https://github.com/smarroufin',
-      target: '_blank'
-    },
-    {
-      label: 'Sébastien Chopin',
-      suffix: 'atinux',
-      to: 'https://github.com/atinux',
-      target: '_blank'
-    },
-    {
-      label: 'Romain Hamel',
-      suffix: 'romhml',
-      to: 'https://github.com/romhml',
-      target: '_blank'
-    },
-    {
-      label: 'Haytham A. Salama',
-      suffix: 'Haythamasalama',
-      to: 'https://github.com/Haythamasalama',
-      target: '_blank'
-    },
-    {
-      label: 'Daniel Roe',
-      suffix: 'danielroe',
-      to: 'https://github.com/danielroe',
-      target: '_blank'
-    },
-    {
-      label: 'Neil Richter',
-      suffix: 'noook',
-      to: 'https://github.com/noook',
-      target: '_blank'
-    }
-  ]
-}]
+const groups = [
+  {
+    id: 'settings',
+    items: [
+      {
+        label: 'Profile',
+        icon: 'i-lucide-user',
+        kbds: ['meta', 'P']
+      },
+      {
+        label: 'Billing',
+        icon: 'i-lucide-credit-card',
+        kbds: ['meta', 'B'],
+        slot: 'billing' as const
+      },
+      {
+        label: 'Notifications',
+        icon: 'i-lucide-bell'
+      },
+      {
+        label: 'Security',
+        icon: 'i-lucide-lock'
+      }
+    ]
+  },
+  {
+    id: 'users',
+    label: 'Users',
+    slot: 'users' as const,
+    items: [
+      {
+        label: 'Benjamin Canac',
+        suffix: 'benjamincanac',
+        to: 'https://github.com/benjamincanac',
+        target: '_blank'
+      },
+      {
+        label: 'Sylvain Marroufin',
+        suffix: 'smarroufin',
+        to: 'https://github.com/smarroufin',
+        target: '_blank'
+      },
+      {
+        label: 'Sébastien Chopin',
+        suffix: 'atinux',
+        to: 'https://github.com/atinux',
+        target: '_blank'
+      },
+      {
+        label: 'Romain Hamel',
+        suffix: 'romhml',
+        to: 'https://github.com/romhml',
+        target: '_blank'
+      },
+      {
+        label: 'Haytham A. Salama',
+        suffix: 'Haythamasalama',
+        to: 'https://github.com/Haythamasalama',
+        target: '_blank'
+      },
+      {
+        label: 'Daniel Roe',
+        suffix: 'danielroe',
+        to: 'https://github.com/danielroe',
+        target: '_blank'
+      },
+      {
+        label: 'Neil Richter',
+        suffix: 'noook',
+        to: 'https://github.com/noook',
+        target: '_blank'
+      }
+    ]
+  }
+]
 </script>
 
 <template>

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

@@ -1,9 +1,10 @@
 <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/context-menu/ContextMenuCheckboxItemsExample.vue

@@ -35,7 +35,7 @@ const items = computed<ContextMenuItem[]>(() => [{
 
 <template>
   <UContextMenu :items="items" :ui="{ content: 'w-48' }">
-    <div class="flex items-center justify-center rounded-md border border-dashed border-(--ui-border-accented) text-sm aspect-video w-72">
+    <div class="flex items-center justify-center rounded-md border border-dashed border-accented text-sm aspect-video w-72">
       Right click here
     </div>
   </UContextMenu>

docs/app/components/content/examples/context-menu/ContextMenuColorItemsExample.vue

@@ -28,7 +28,7 @@ const items: ContextMenuItem[][] = [
 
 <template>
   <UContextMenu :items="items" :ui="{ content: 'w-48' }">
-    <div class="flex items-center justify-center rounded-md border border-dashed border-(--ui-border-accented) text-sm aspect-video w-72">
+    <div class="flex items-center justify-center rounded-md border border-dashed border-accented text-sm aspect-video w-72">
       Right click here
     </div>
   </UContextMenu>

docs/app/components/content/examples/context-menu/ContextMenuCustomSlotExample.vue

@@ -3,19 +3,23 @@ import type { ContextMenuItem } from '@nuxt/ui'
 
 const loading = ref(true)
 
-const items: ContextMenuItem[] = [{
-  label: 'Refresh the Page',
-  slot: 'refresh'
-}, {
-  label: 'Clear Cookies and Refresh'
-}, {
-  label: 'Clear Cache and Refresh'
-}]
+const items = [
+  {
+    label: 'Refresh the Page',
+    slot: 'refresh' as const
+  },
+  {
+    label: 'Clear Cookies and Refresh'
+  },
+  {
+    label: 'Clear Cache and Refresh'
+  }
+] satisfies ContextMenuItem[]
 </script>
 
 <template>
   <UContextMenu :items="items" :ui="{ content: 'w-48' }">
-    <div class="flex items-center justify-center rounded-md border border-dashed border-(--ui-border-accented) text-sm aspect-video w-72">
+    <div class="flex items-center justify-center rounded-md border border-dashed border-accented text-sm aspect-video w-72">
       Right click here
     </div>
 
@@ -24,7 +28,7 @@ const items: ContextMenuItem[] = [{
     </template>
 
     <template #refresh-trailing>
-      <UIcon v-if="loading" name="i-lucide-refresh-cw" class="shrink-0 size-5 text-(--ui-primary) animate-spin" />
+      <UIcon v-if="loading" name="i-lucide-refresh-cw" class="shrink-0 size-5 text-primary animate-spin" />
     </template>
   </UContextMenu>
 </template>

docs/app/components/content/examples/drawer/DrawerDismissibleExample.vue

@@ -7,7 +7,7 @@ const open = ref(false)
     <UButton label="Open" color="neutral" variant="subtle" trailing-icon="i-lucide-chevron-up" />
 
     <template #header>
-      <h2 class="text-(--ui-text-highlighted) font-semibold">
+      <h2 class="text-highlighted font-semibold">
         Drawer non-dismissible
       </h2>
 

docs/app/components/content/examples/dropdown-menu/DropdownMenuCustomSlotExample.vue

@@ -21,7 +21,7 @@ const items = [
     <UButton label="Open" color="neutral" variant="outline" icon="i-lucide-menu" />
 
     <template #profile-trailing>
-      <UIcon name="i-lucide-badge-check" class="shrink-0 size-5 text-(--ui-primary)" />
+      <UIcon name="i-lucide-badge-check" class="shrink-0 size-5 text-primary" />
     </template>
   </UDropdownMenu>
 </template>

docs/app/components/content/examples/form-field/FormFieldErrorAnimationExample.vue

@@ -0,0 +1,47 @@
+<script setup lang="ts">
+import type { FormError } from '@nuxt/ui'
+
+const state = reactive({
+  email: undefined,
+  password: undefined
+})
+
+const form = useTemplateRef('form')
+
+const validate = (state: any): FormError[] => {
+  const errors = []
+  if (!state.email) errors.push({ name: 'email', message: 'Required' })
+  if (!state.password) errors.push({ name: 'password', message: 'Required' })
+  return errors
+}
+</script>
+
+<template>
+  <UForm ref="form" :validate="validate" :state="state" class="space-y-4">
+    <UFormField
+      label="Email"
+      name="email"
+      :ui="{
+        error: 'data-[state=open]:animate-[fade-in_200ms_ease-out] data-[state=closed]:animate-[fade-out_200ms_ease-in]'
+      }"
+    >
+      <UInput v-model="state.email" />
+    </UFormField>
+
+    <UFormField
+      label="Password"
+      name="password"
+      :ui="{
+        error: 'data-[state=open]:animate-[fade-in_200ms_ease-out] data-[state=closed]:animate-[fade-out_200ms_ease-in]'
+      }"
+    >
+      <UInput v-model="state.password" type="password" />
+    </UFormField>
+
+    <div class="flex gap-2">
+      <UButton label="Submit" type="submit" color="neutral" />
+
+      <UButton label="Clear" color="neutral" variant="outline" @click="form?.clear()" />
+    </div>
+  </UForm>
+</template>

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

@@ -14,7 +14,7 @@ const validate = (state: any): FormError[] => {
 }
 
 const toast = useToast()
-async function onSubmit(event: FormSubmitEvent<any>) {
+async function onSubmit(event: FormSubmitEvent<typeof state>) {
   toast.add({ title: 'Success', description: 'The form has been submitted.', color: 'success' })
   console.log(event.data)
 }

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

@@ -30,6 +30,9 @@ 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)
 })
@@ -47,7 +50,7 @@ const items = [
 ]
 
 const toast = useToast()
-async function onSubmit(event: FormSubmitEvent<any>) {
+async function onSubmit(event: FormSubmitEvent<Schema>) {
   toast.add({ title: 'Success', description: 'The form has been submitted.', color: 'success' })
   console.log(event.data)
 }
@@ -101,11 +104,14 @@ async function onSubmit(event: FormSubmitEvent<any>) {
       <UFormField label="Textarea" name="textarea">
         <UTextarea v-model="state.textarea" class="w-full" />
       </UFormField>
-
-      <UFormField name="radioGroup">
-        <URadioGroup v-model="state.radioGroup" legend="Radio group" :items="items" />
-      </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="pin" label="Pin Input" :error-pattern="/(pin)\..*/">
         <UPinInput v-model="state.pin" />
       </UFormField>

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

@@ -15,7 +15,7 @@ const state = reactive({
 })
 
 const toast = useToast()
-async function onSubmit(event: FormSubmitEvent<any>) {
+async function onSubmit(event: FormSubmitEvent<typeof state>) {
   toast.add({ title: 'Success', description: 'The form has been submitted.', color: 'success' })
   console.log(event.data)
 }

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

@@ -18,7 +18,7 @@ type NestedSchema = z.output<typeof nestedSchema>
 const state = reactive<Partial<Schema & NestedSchema>>({ })
 
 const toast = useToast()
-async function onSubmit(event: FormSubmitEvent<any>) {
+async function onSubmit(event: FormSubmitEvent<Schema>) {
   toast.add({ title: 'Success', description: 'The form has been submitted.', color: 'success' })
   console.log(event.data)
 }
@@ -39,7 +39,7 @@ async function onSubmit(event: FormSubmitEvent<any>) {
       <UCheckbox v-model="state.news" name="news" label="Register to our newsletter" @update:model-value="state.email = undefined" />
     </div>
 
-    <UForm v-if="state.news" :state="state" :schema="nestedSchema">
+    <UForm v-if="state.news" :state="state" :schema="nestedSchema" attach>
       <UFormField label="Email" name="email">
         <UInput v-model="state.email" placeholder="john@lennon.com" />
       </UFormField>

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

@@ -34,7 +34,7 @@ function removeItem() {
 
 const toast = useToast()
 
-async function onSubmit(event: FormSubmitEvent<any>) {
+async function onSubmit(event: FormSubmitEvent<Schema>) {
   toast.add({ title: 'Success', description: 'The form has been submitted.', color: 'success' })
   console.log(event.data)
 }
@@ -51,7 +51,14 @@ async function onSubmit(event: FormSubmitEvent<any>) {
       <UInput v-model="state.customer" placeholder="Wonka Industries" />
     </UFormField>
 
-    <UForm v-for="item, count in state.items" :key="count" :state="item" :schema="itemSchema" class="flex gap-2">
+    <UForm
+      v-for="item, count in state.items"
+      :key="count"
+      :state="item"
+      :schema="itemSchema"
+      attach
+      class="flex gap-2"
+    >
       <UFormField :label="!count ? 'Description' : undefined" name="description">
         <UInput v-model="item.description" />
       </UFormField>

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

@@ -14,7 +14,7 @@ const validate = (state: any): FormError[] => {
 }
 
 const toast = useToast()
-async function onSubmit(event: FormSubmitEvent<any>) {
+async function onSubmit(event: FormSubmitEvent<typeof state>) {
   toast.add({ title: 'Success', description: 'The form has been submitted.', color: 'success' })
   console.log(event.data)
 }

docs/app/components/content/examples/input-menu/InputMenuFilterFieldsExample.vue

@@ -36,7 +36,7 @@ const { data: users, status } = await useFetch('https://jsonplaceholder.typicode
     <template #item-label="{ item }">
       {{ item.label }}
 
-      <span class="text-(--ui-text-muted)">
+      <span class="text-muted">
         {{ item.email }}
       </span>
     </template>

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/input/InputButtonGroupExample.vue

@@ -15,7 +15,7 @@ const domain = ref(domains[0])
       }"
     >
       <template #leading>
-        <p class="text-sm text-(--ui-text-muted)">
+        <p class="text-sm text-muted">
           https://
         </p>
       </template>

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

@@ -13,7 +13,7 @@ const maxLength = 15
     <template #trailing>
       <div
         id="character-count"
-        class="text-xs text-(--ui-text-muted) tabular-nums"
+        class="text-xs text-muted tabular-nums"
         aria-live="polite"
         role="status"
       >

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

@@ -4,8 +4,8 @@ const value = ref('')
 
 <template>
   <UInput v-model="value" placeholder="" :ui="{ base: 'peer' }">
-    <label class="pointer-events-none absolute left-0 -top-2.5 text-(--ui-text-highlighted) text-xs font-medium px-1.5 transition-all peer-focus:-top-2.5 peer-focus:text-(--ui-text-highlighted) peer-focus:text-xs peer-focus:font-medium peer-placeholder-shown:text-sm peer-placeholder-shown:text-(--ui-text-dimmed) peer-placeholder-shown:top-1.5 peer-placeholder-shown:font-normal">
-      <span class="inline-flex bg-(--ui-bg) px-1">Email address</span>
+    <label class="pointer-events-none absolute left-0 -top-2.5 text-highlighted text-xs font-medium px-1.5 transition-all peer-focus:-top-2.5 peer-focus:text-highlighted peer-focus:text-xs peer-focus:font-medium peer-placeholder-shown:text-sm peer-placeholder-shown:text-dimmed peer-placeholder-shown:top-1.5 peer-placeholder-shown:font-normal">
+      <span class="inline-flex bg-default px-1">Email address</span>
     </label>
   </UInput>
 </template>

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

@@ -77,7 +77,7 @@ const text = computed(() => {
         v-for="(req, index) in strength"
         :key="index"
         class="flex items-center gap-0.5"
-        :class="req.met ? 'text-(--ui-success)' : 'text-(--ui-text-muted)'"
+        :class="req.met ? 'text-success' : 'text-muted'"
       >
         <UIcon :name="req.met ? 'i-lucide-circle-check' : 'i-lucide-circle-x'" class="size-4 shrink-0" />
 

docs/app/components/content/examples/modal/ModalProgrammaticExample.vue

@@ -13,7 +13,9 @@ const modal = overlay.create(LazyModalExample, {
 })
 
 async function open() {
-  const shouldIncrement = await modal.open()
+  const instance = modal.open()
+
+  const shouldIncrement = await instance.result
 
   if (shouldIncrement) {
     count.value++

docs/app/components/content/examples/navigation-menu/NavigationMenuContentSlotExample.vue

@@ -65,6 +65,7 @@ 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'
     }"
@@ -76,11 +77,11 @@ const items = [
         </li>
 
         <li v-for="child in item.children" :key="child.label">
-          <ULink class="text-sm text-left rounded-md p-3 transition-colors hover:bg-(--ui-bg-elevated)/50">
-            <p class="font-medium text-(--ui-text-highlighted)">
+          <ULink class="text-sm text-left rounded-md p-3 transition-colors hover:bg-elevated/50">
+            <p class="font-medium text-highlighted">
               {{ child.label }}
             </p>
-            <p class="text-(--ui-text-muted) line-clamp-2">
+            <p class="text-muted line-clamp-2">
               {{ child.description }}
             </p>
           </ULink>

docs/app/components/content/examples/navigation-menu/NavigationMenuCustomSlotExample.vue

@@ -1,23 +1,21 @@
 <script setup lang="ts">
 import type { NavigationMenuItem } from '@nuxt/ui'
 
-const items: NavigationMenuItem[] = [
+const items = [
   {
     label: 'Guide',
     icon: 'i-lucide-book-open'
-
   },
   {
     label: 'Composables',
     icon: 'i-lucide-database'
-
   },
   {
     label: 'Components',
     icon: 'i-lucide-box',
-    slot: 'components'
+    slot: 'components' as const
   }
-]
+] satisfies NavigationMenuItem[]
 </script>
 
 <template>

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

@@ -40,7 +40,7 @@ const label = ref([])
         multiple
         placeholder="Search labels..."
         :groups="[{ id: 'labels', items }]"
-        :ui="{ input: '[&>input]:h-8' }"
+        :ui="{ input: '[&>input]:h-8 [&>input]:text-sm' }"
       />
     </template>
   </UPopover>

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

@@ -8,7 +8,7 @@ const open = ref(false)
 
     <template #content>
       <div class="flex items-center gap-4 mb-4">
-        <h2 class="text-(--ui-text-highlighted) font-semibold">
+        <h2 class="text-highlighted font-semibold">
           Popover non-dismissible
         </h2>
 

docs/app/components/content/examples/select-menu/SelectMenuFilterFieldsExample.vue

@@ -36,7 +36,7 @@ const { data: users, status } = await useFetch('https://jsonplaceholder.typicode
     <template #item-label="{ item }">
       {{ item.label }}
 
-      <span class="text-(--ui-text-muted)">
+      <span class="text-muted">
         {{ item.email }}
       </span>
     </template>

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,7 +13,9 @@ const slideover = overlay.create(LazySlideoverExample, {
 })
 
 async function open() {
-  const shouldIncrement = await slideover.open()
+  const instance = slideover.open()
+
+  const shouldIncrement = await instance.result
 
   if (shouldIncrement) {
     count.value++

docs/app/components/content/examples/stepper/StepperCustomSlotExample.vue

@@ -1,23 +1,23 @@
 <script setup lang="ts">
 import type { StepperItem } from '@nuxt/ui'
 
-const items: StepperItem[] = [
+const items = [
   {
-    slot: 'address',
+    slot: 'address' as const,
     title: 'Address',
     description: 'Add your address here',
     icon: 'i-lucide-house'
   }, {
-    slot: 'shipping',
+    slot: 'shipping' as const,
     title: 'Shipping',
     description: 'Set your preferred shipping method',
     icon: 'i-lucide-truck'
   }, {
-    slot: 'checkout',
+    slot: 'checkout' as const,
     title: 'Checkout',
     description: 'Confirm your order'
   }
-]
+] satisfies StepperItem[]
 </script>
 
 <template>

docs/app/components/content/examples/stepper/StepperWithControlsExample.vue

@@ -3,17 +3,14 @@ import type { StepperItem } from '@nuxt/ui'
 
 const items: StepperItem[] = [
   {
-    slot: 'address',
     title: 'Address',
     description: 'Add your address here',
     icon: 'i-lucide-house'
   }, {
-    slot: 'shipping',
     title: 'Shipping',
     description: 'Set your preferred shipping method',
     icon: 'i-lucide-truck'
   }, {
-    slot: 'checkout',
     title: 'Checkout',
     description: 'Confirm your order'
   }

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

@@ -100,7 +100,7 @@ const columnFilters = ref([{
 
 <template>
   <div class="flex flex-col flex-1 w-full">
-    <div class="flex px-4 py-3.5 border-b border-(--ui-border-accented)">
+    <div class="flex px-4 py-3.5 border-b border-accented">
       <UInput
         :model-value="(table?.tableApi?.getColumn('email')?.getFilterValue() as string)"
         class="max-w-sm"

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

@@ -131,7 +131,7 @@ function getHeader(column: Column<Payment>, label: string) {
     'variant': 'ghost',
     label,
     'icon': isSorted ? (isSorted === 'asc' ? 'i-lucide-arrow-up-narrow-wide' : 'i-lucide-arrow-down-wide-narrow') : 'i-lucide-arrow-up-down',
-    'class': '-mx-2.5 data-[state=open]:bg-(--ui-bg-elevated)',
+    'class': '-mx-2.5 data-[state=open]:bg-elevated',
     'aria-label': `Sort by ${isSorted === 'asc' ? 'descending' : 'ascending'}`
   }))
 }

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

@@ -100,7 +100,7 @@ const columnVisibility = ref({
 
 <template>
   <div class="flex flex-col flex-1 w-full">
-    <div class="flex justify-end px-4 py-3.5 border-b  border-(--ui-border-accented)">
+    <div class="flex justify-end px-4 py-3.5 border-b  border-accented">
       <UDropdownMenu
         :items="table?.tableApi?.getAllColumns().filter(column => column.getCanHide()).map(column => ({
           label: upperFirst(column.id),

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

@@ -0,0 +1,82 @@
+<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/TableExample.vue

@@ -265,7 +265,7 @@ function randomize() {
 </script>
 
 <template>
-  <div class="flex-1 divide-y divide-(--ui-border-accented) w-full">
+  <div class="flex-1 divide-y divide-accented w-full">
     <div class="flex items-center gap-2 px-4 py-3.5 overflow-x-auto">
       <UInput
         :model-value="(table?.tableApi?.getColumn('email')?.getFilterValue() as string)"
@@ -313,7 +313,7 @@ function randomize() {
       </template>
     </UTable>
 
-    <div class="px-4 py-3.5 text-sm text-(--ui-text-muted)">
+    <div class="px-4 py-3.5 text-sm text-muted">
       {{ table?.tableApi?.getFilteredSelectedRowModel().rows.length || 0 }} of
       {{ table?.tableApi?.getFilteredRowModel().rows.length || 0 }} row(s) selected.
     </div>

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

@@ -36,7 +36,7 @@ const columns: TableColumn<User>[] = [{
         size: 'lg'
       }),
       h('div', undefined, [
-        h('p', { class: 'font-medium text-(--ui-text-highlighted)' }, row.original.name),
+        h('p', { class: 'font-medium text-highlighted' }, row.original.name),
         h('p', { class: '' }, `@${row.original.username}`)
       ])
     ])

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

@@ -95,7 +95,7 @@ const globalFilter = ref('45')
 
 <template>
   <div class="flex flex-col flex-1 w-full">
-    <div class="flex px-4 py-3.5 border-b border-(--ui-border-accented)">
+    <div class="flex px-4 py-3.5 border-b border-accented">
       <UInput
         v-model="globalFilter"
         class="max-w-sm"

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

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

@@ -0,0 +1,88 @@
+<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/table/TablePaginationExample.vue

@@ -162,7 +162,7 @@ const pagination = ref({
       class="flex-1"
     />
 
-    <div class="flex justify-center border-t border-(--ui-border) pt-4">
+    <div class="flex justify-center border-t border-default pt-4">
       <UPagination
         :default-page="(table?.tableApi?.getState().pagination.pageIndex || 0) + 1"
         :items-per-page="table?.tableApi?.getState().pagination.pageSize"

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

@@ -112,7 +112,7 @@ const expanded = ref({ 1: true })
     v-model:expanded="expanded"
     :data="data"
     :columns="columns"
-    :ui="{ tr: 'data-[expanded=true]:bg-(--ui-bg-elevated)/50' }"
+    :ui="{ tr: 'data-[expanded=true]:bg-elevated/50' }"
     class="flex-1"
   >
     <template #expanded="{ row }">

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

@@ -122,7 +122,7 @@ function onSelect(row: TableRow<Payment>, e?: Event) {
         @select="onSelect"
       />
 
-      <div class="px-4 py-3.5 border-t border-[var(--ui-border-accented)] text-sm text-[var(--ui-text-muted)]">
+      <div class="px-4 py-3.5 border-t border-accented text-sm text-muted">
         {{ table?.tableApi?.getFilteredSelectedRowModel().rows.length || 0 }} of
         {{ table?.tableApi?.getFilteredRowModel().rows.length || 0 }} row(s) selected.
       </div>

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

@@ -113,7 +113,7 @@ const rowSelection = ref({ 1: true })
       :columns="columns"
     />
 
-    <div class="px-4 py-3.5 border-t border-(--ui-border-accented) text-sm text-(--ui-text-muted)">
+    <div class="px-4 py-3.5 border-t border-accented text-sm text-muted">
       {{ table?.tableApi?.getFilteredSelectedRowModel().rows.length || 0 }} of
       {{ table?.tableApi?.getFilteredRowModel().rows.length || 0 }} row(s) selected.
     </div>

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

@@ -97,7 +97,7 @@ function getDropdownActions(user: User): DropdownMenuItem[][] {
       <div class="flex items-center gap-3">
         <UAvatar :src="`https://i.pravatar.cc/120?img=${row.original.id}`" size="lg" :alt="`${row.original.name} avatar`" />
         <div>
-          <p class="font-medium text-(--ui-text-highlighted)">
+          <p class="font-medium text-highlighted">
             {{ row.original.name }}
           </p>
           <p>

docs/app/components/content/examples/tabs/TabsCustomSlotExample.vue

@@ -26,9 +26,9 @@ const state = reactive({
 </script>
 
 <template>
-  <UTabs :items="items" variant="link" class="gap-4 w-full" :ui="{ trigger: 'flex-1' }">
+  <UTabs :items="items" variant="link" class="gap-4 w-full" :ui="{ trigger: 'grow' }">
     <template #account="{ item }">
-      <p class="text-(--ui-text-muted) mb-4">
+      <p class="text-muted mb-4">
         {{ item.description }}
       </p>
 
@@ -45,7 +45,7 @@ const state = reactive({
     </template>
 
     <template #password="{ item }">
-      <p class="text-(--ui-text-muted) mb-4">
+      <p class="text-muted mb-4">
         {{ item.description }}
       </p>
 

docs/app/components/content/examples/tabs/TabsModelValueExample.vue

@@ -1,22 +1,32 @@
 <script setup lang="ts">
 import type { TabsItem } from '@nuxt/ui'
 
+const route = useRoute()
+const router = useRouter()
+
 const items: TabsItem[] = [
   {
-    label: 'Account'
+    label: 'Account',
+    value: 'account'
   },
   {
-    label: 'Password'
+    label: 'Password',
+    value: 'password'
   }
 ]
 
-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)
+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'
+    })
+  }
 })
 </script>
 

docs/app/components/content/examples/toaster/ToasterDurationExample.vue

@@ -7,10 +7,10 @@ const appConfig = useAppConfig()
     <UFormField
       label="toaster.duration"
       size="sm"
-      class="inline-flex ring ring-(--ui-border-accented) rounded-(--ui-radius)"
+      class="inline-flex ring ring-accented rounded-sm"
       :ui="{
-        wrapper: 'bg-(--ui-bg-elevated)/50 rounded-l-(--ui-radius) flex border-r border-(--ui-border-accented)',
-        label: 'text-(--ui-text-muted) px-2 py-1.5',
+        wrapper: 'bg-elevated/50 rounded-l-sm flex border-r border-accented',
+        label: 'text-muted px-2 py-1.5',
         container: 'mt-0'
       }"
     >
@@ -18,7 +18,7 @@ const appConfig = useAppConfig()
         v-model="appConfig.toaster.duration"
         color="neutral"
         variant="soft"
-        :ui="{ base: 'rounded-(--ui-radius) rounded-l-none min-w-12' }"
+        :ui="{ base: 'rounded-sm rounded-l-none min-w-12' }"
       />
     </UFormField>
   </div>

docs/app/components/content/examples/toaster/ToasterExpandExample.vue

@@ -7,10 +7,10 @@ const appConfig = useAppConfig()
     <UFormField
       label="toaster.expand"
       size="sm"
-      class="inline-flex ring ring-(--ui-border-accented) rounded-(--ui-radius)"
+      class="inline-flex ring ring-accented rounded-sm"
       :ui="{
-        wrapper: 'bg-(--ui-bg-elevated)/50 rounded-l-(--ui-radius) flex border-r border-(--ui-border-accented)',
-        label: 'text-(--ui-text-muted) px-2 py-1.5',
+        wrapper: 'bg-elevated/50 rounded-l-sm flex border-r border-accented',
+        label: 'text-muted px-2 py-1.5',
         container: 'mt-0'
       }"
     >
@@ -19,7 +19,7 @@ const appConfig = useAppConfig()
         :items="[true, false]"
         color="neutral"
         variant="soft"
-        class="rounded-(--ui-radius) rounded-l-none min-w-12"
+        class="rounded-sm rounded-l-none min-w-12"
         :search-input="false"
       />
     </UFormField>

docs/app/components/content/examples/toaster/ToasterPositionExample.vue

@@ -10,10 +10,10 @@ const appConfig = useAppConfig()
     <UFormField
       label="toaster.position"
       size="sm"
-      class="inline-flex ring ring-(--ui-border-accented) rounded-(--ui-radius)"
+      class="inline-flex ring ring-accented rounded-sm"
       :ui="{
-        wrapper: 'bg-(--ui-bg-elevated)/50 rounded-l-(--ui-radius) flex border-r border-(--ui-border-accented)',
-        label: 'text-(--ui-text-muted) px-2 py-1.5',
+        wrapper: 'bg-elevated/50 rounded-l-sm flex border-r border-accented',
+        label: 'text-muted px-2 py-1.5',
         container: 'mt-0'
       }"
     >
@@ -22,7 +22,7 @@ const appConfig = useAppConfig()
         :items="positions"
         color="neutral"
         variant="soft"
-        class="rounded-(--ui-radius) rounded-l-none min-w-12"
+        class="rounded-sm rounded-l-none min-w-12"
         :search-input="false"
       />
     </UFormField>

docs/app/components/content/examples/tree/TreeCustomSlotExample.vue

@@ -6,21 +6,23 @@ const items = [
     label: 'app/',
     slot: 'app' as const,
     defaultExpanded: true,
-    children: [{
-      label: 'composables/',
-      children: [
-        { label: 'useAuth.ts', icon: 'i-vscode-icons-file-type-typescript' },
-        { label: 'useUser.ts', icon: 'i-vscode-icons-file-type-typescript' }
-      ]
-    },
-    {
-      label: 'components/',
-      defaultExpanded: true,
-      children: [
-        { label: 'Card.vue', icon: 'i-vscode-icons-file-type-vue' },
-        { label: 'Button.vue', icon: 'i-vscode-icons-file-type-vue' }
-      ]
-    }]
+    children: [
+      {
+        label: 'composables/',
+        children: [
+          { label: 'useAuth.ts', icon: 'i-vscode-icons-file-type-typescript' },
+          { label: 'useUser.ts', icon: 'i-vscode-icons-file-type-typescript' }
+        ]
+      },
+      {
+        label: 'components/',
+        defaultExpanded: true,
+        children: [
+          { label: 'Card.vue', icon: 'i-vscode-icons-file-type-vue' },
+          { label: 'Button.vue', icon: 'i-vscode-icons-file-type-vue' }
+        ]
+      }
+    ]
   },
   { label: 'app.vue', icon: 'i-vscode-icons-file-type-vue' },
   { label: 'nuxt.config.ts', icon: 'i-vscode-icons-file-type-nuxt' }

docs/app/components/content/examples/tree/TreeExpandedExample.vue

@@ -5,22 +5,24 @@ const items: TreeItem[] = [
   {
     label: 'app/',
     value: 'app',
-    children: [{
-      label: 'composables/',
-      value: 'composables',
-      children: [
-        { label: 'useAuth.ts', icon: 'i-vscode-icons-file-type-typescript' },
-        { label: 'useUser.ts', icon: 'i-vscode-icons-file-type-typescript' }
-      ]
-    },
-    {
-      label: 'components/',
-      value: 'components',
-      children: [
-        { label: 'Card.vue', icon: 'i-vscode-icons-file-type-vue' },
-        { label: 'Button.vue', icon: 'i-vscode-icons-file-type-vue' }
-      ]
-    }]
+    children: [
+      {
+        label: 'composables/',
+        value: 'composables',
+        children: [
+          { label: 'useAuth.ts', icon: 'i-vscode-icons-file-type-typescript' },
+          { label: 'useUser.ts', icon: 'i-vscode-icons-file-type-typescript' }
+        ]
+      },
+      {
+        label: 'components/',
+        value: 'components',
+        children: [
+          { label: 'Card.vue', icon: 'i-vscode-icons-file-type-vue' },
+          { label: 'Button.vue', icon: 'i-vscode-icons-file-type-vue' }
+        ]
+      }
+    ]
   },
   { label: 'app.vue', icon: 'i-vscode-icons-file-type-vue' },
   { label: 'nuxt.config.ts', icon: 'i-vscode-icons-file-type-nuxt' }

docs/app/components/content/examples/tree/TreeModelValueExample.vue

@@ -5,21 +5,23 @@ const items: TreeItem[] = [
   {
     label: 'app/',
     defaultExpanded: true,
-    children: [{
-      label: 'composables/',
-      children: [
-        { label: 'useAuth.ts', icon: 'i-vscode-icons-file-type-typescript' },
-        { label: 'useUser.ts', icon: 'i-vscode-icons-file-type-typescript' }
-      ]
-    },
-    {
-      label: 'components/',
-      defaultExpanded: true,
-      children: [
-        { label: 'Card.vue', icon: 'i-vscode-icons-file-type-vue' },
-        { label: 'Button.vue', icon: 'i-vscode-icons-file-type-vue' }
-      ]
-    }]
+    children: [
+      {
+        label: 'composables/',
+        children: [
+          { label: 'useAuth.ts', icon: 'i-vscode-icons-file-type-typescript' },
+          { label: 'useUser.ts', icon: 'i-vscode-icons-file-type-typescript' }
+        ]
+      },
+      {
+        label: 'components/',
+        defaultExpanded: true,
+        children: [
+          { label: 'Card.vue', icon: 'i-vscode-icons-file-type-vue' },
+          { label: 'Button.vue', icon: 'i-vscode-icons-file-type-vue' }
+        ]
+      }
+    ]
   },
   { label: 'app.vue', icon: 'i-vscode-icons-file-type-vue' },
   { label: 'nuxt.config.ts', icon: 'i-vscode-icons-file-type-nuxt' }

docs/app/components/content/examples/tree/TreeOnSelectExample.vue

@@ -8,21 +8,23 @@ const items: TreeItem[] = [
     onSelect: (e: Event) => {
       e.preventDefault()
     },
-    children: [{
-      label: 'composables/',
-      children: [
-        { label: 'useAuth.ts', icon: 'i-vscode-icons-file-type-typescript' },
-        { label: 'useUser.ts', icon: 'i-vscode-icons-file-type-typescript' }
-      ]
-    },
-    {
-      label: 'components/',
-      defaultExpanded: true,
-      children: [
-        { label: 'Card.vue', icon: 'i-vscode-icons-file-type-vue' },
-        { label: 'Button.vue', icon: 'i-vscode-icons-file-type-vue' }
-      ]
-    }]
+    children: [
+      {
+        label: 'composables/',
+        children: [
+          { label: 'useAuth.ts', icon: 'i-vscode-icons-file-type-typescript' },
+          { label: 'useUser.ts', icon: 'i-vscode-icons-file-type-typescript' }
+        ]
+      },
+      {
+        label: 'components/',
+        defaultExpanded: true,
+        children: [
+          { label: 'Card.vue', icon: 'i-vscode-icons-file-type-vue' },
+          { label: 'Button.vue', icon: 'i-vscode-icons-file-type-vue' }
+        ]
+      }
+    ]
   },
   { label: 'app.vue', icon: 'i-vscode-icons-file-type-vue' },
   { label: 'nuxt.config.ts', icon: 'i-vscode-icons-file-type-nuxt' }

docs/app/components/content/examples/tree/TreeOnToggleExample.vue

@@ -8,21 +8,23 @@ const items: TreeItem[] = [
     onToggle: (e: Event) => {
       e.preventDefault()
     },
-    children: [{
-      label: 'composables/',
-      children: [
-        { label: 'useAuth.ts', icon: 'i-vscode-icons-file-type-typescript' },
-        { label: 'useUser.ts', icon: 'i-vscode-icons-file-type-typescript' }
-      ]
-    },
-    {
-      label: 'components/',
-      defaultExpanded: true,
-      children: [
-        { label: 'Card.vue', icon: 'i-vscode-icons-file-type-vue' },
-        { label: 'Button.vue', icon: 'i-vscode-icons-file-type-vue' }
-      ]
-    }]
+    children: [
+      {
+        label: 'composables/',
+        children: [
+          { label: 'useAuth.ts', icon: 'i-vscode-icons-file-type-typescript' },
+          { label: 'useUser.ts', icon: 'i-vscode-icons-file-type-typescript' }
+        ]
+      },
+      {
+        label: 'components/',
+        defaultExpanded: true,
+        children: [
+          { label: 'Card.vue', icon: 'i-vscode-icons-file-type-vue' },
+          { label: 'Button.vue', icon: 'i-vscode-icons-file-type-vue' }
+        ]
+      }
+    ]
   },
   { label: 'app.vue', icon: 'i-vscode-icons-file-type-vue' },
   { label: 'nuxt.config.ts', icon: 'i-vscode-icons-file-type-nuxt' }

docs/app/components/home/HomeContributors.vue

@@ -20,7 +20,7 @@ const { width } = useElementSize(el)
 
 <template>
   <div
-    class="isolate rounded-full relative circle w-full aspect-[1/1] p-8 sm:p-12 md:p-14 lg:p-10 xl:p-16 before:absolute before:inset-px before:bg-(--ui-bg) before:rounded-full z-(--level)"
+    class="isolate rounded-full relative circle w-full aspect-[1/1] p-8 sm:p-12 md:p-14 lg:p-10 xl:p-16 before:absolute before:inset-px before:bg-default before:rounded-full z-(--level)"
     :class="{ 'animation-paused': paused }"
     :style="{
       '--duration': `${((level + 1) * 8)}s`,
@@ -65,7 +65,7 @@ const { width } = useElementSize(el)
             :src="`https://ipx.nuxt.com/s_56x56/gh_avatar/${contributor.username}`"
             :srcset="`https://ipx.nuxt.com/s_112x112/gh_avatar/${contributor.username} 2x`"
             :alt="contributor.username"
-            class="ring-2 ring-(--ui-border) lg:hover:ring-(--ui-border-inverted) transition rounded-full size-7"
+            class="ring-2 ring-default lg:hover:ring-inverted transition rounded-full size-7"
             loading="lazy"
           >
         </NuxtLink>

docs/app/components/theme-picker/ThemePicker.vue

@@ -69,7 +69,7 @@ function setBlackAsPrimary(value: boolean) {
         :variant="open ? 'soft' : 'ghost'"
         square
         aria-label="Color picker"
-        :ui="{ leadingIcon: 'text-(--ui-primary)' }"
+        :ui="{ leadingIcon: 'text-primary' }"
       />
     </template>
 

docs/app/components/theme-picker/ThemePickerButton.vue

@@ -18,8 +18,8 @@ const slots = defineSlots<{
     variant="outline"
     :icon="icon"
     :label="label"
-    class="capitalize ring-(--ui-border) rounded-[calc(var(--ui-radius))] text-[11px]"
-    :class="[selected ? 'bg-(--ui-bg-elevated)' : 'hover:bg-(--ui-bg-elevated)/50']"
+    class="capitalize ring-default rounded-sm text-[11px]"
+    :class="[selected ? 'bg-elevated' : 'hover:bg-elevated/50']"
   >
     <template v-if="chip || !!slots.leading" #leading>
       <slot name="leading">

docs/app/composables/useFaviconFromTheme.ts

@@ -0,0 +1,54 @@
+import { onMounted, watch } from 'vue'
+import FaviconSvg from 'public/icon.svg?raw'
+
+export function useFaviconFromTheme() {
+  const colorMode = useColorMode()
+
+  function generateFaviconSvg(color: string) {
+    const parser = new DOMParser()
+    const doc = parser.parseFromString(FaviconSvg, 'image/svg+xml')
+    const svg = doc.documentElement
+
+    svg.querySelectorAll('path').forEach((path) => {
+      path.setAttribute('fill', color)
+    })
+
+    return new XMLSerializer().serializeToString(svg)
+  }
+
+  function updateFavicon() {
+    const root = document.documentElement
+    const color = getComputedStyle(root).getPropertyValue('--ui-primary').trim() || '#00DC82'
+
+    const svg = generateFaviconSvg(color)
+    const encoded = `data:image/svg+xml,${encodeURIComponent(svg)}`
+
+    useFavicon(encoded)
+  }
+
+  function setupMutationObserver() {
+    const styleTag = document.getElementById('nuxt-ui-colors')
+    if (!styleTag) return
+
+    const observer = new MutationObserver(() => {
+      updateFavicon()
+    })
+
+    observer.observe(styleTag, {
+      characterData: true,
+      subtree: true,
+      childList: true
+    })
+  }
+
+  onMounted(() => {
+    watch(colorMode, () => {
+      updateFavicon()
+    }, {
+      immediate: true,
+      flush: 'post'
+    })
+
+    setupMutationObserver()
+  })
+}

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-ui',
+      to: 'https://www.raycast.com/HugoRCD/nuxt',
       target: '_blank'
     }, {
       label: 'Figma to Code',

docs/app/error.vue

@@ -26,7 +26,7 @@ useHead({
     { key: 'theme-color', name: 'theme-color', content: color }
   ],
   link: [
-    { rel: 'icon', type: 'image/svg+xml', href: '/icon.svg' }
+    // { rel: 'icon', type: 'image/svg+xml', href: '/icon.svg' }
   ],
   style: [
     { innerHTML: radius, id: 'nuxt-ui-radius', tagPriority: -2 },
@@ -47,6 +47,8 @@ useServerSeoMeta({
   twitterCard: 'summary_large_image'
 })
 
+useFaviconFromTheme()
+
 const { frameworks, modules } = useSharedData()
 const { mappedNavigation, filteredNavigation } = useContentNavigation(navigation)
 
@@ -57,7 +59,7 @@ provide('navigation', mappedNavigation)
   <UApp>
     <NuxtLoadingIndicator color="#FFF" />
 
-    <Banner />
+    <!-- <Banner /> -->
 
     <Header :links="links" />
 

docs/app/layouts/docs.vue

@@ -22,7 +22,7 @@ const navigation = inject<Ref<ContentNavigationItem[]>>('navigation')
                 <span class="inline-flex items-center gap-0.5">
                   {{ link.title }}
 
-                  <sup v-if="link.module === 'ui-pro'" class="text-[8px] font-medium text-(--ui-primary)">PRO</sup>
+                  <sup v-if="link.module === 'ui-pro'" class="text-[8px] font-medium text-primary">PRO</sup>
                 </span>
               </template>
             </UContentNavigation>

docs/app/pages/.index.yml

@@ -101,7 +101,7 @@ design_system:
     @import "@nuxt/ui";
 
     :root {
-      --ui-radius: var(--radius-sm);
+      --ui-radius: 0.25rem;
       --ui-container: 90rem;
       --ui-bg: var(--ui-color-neutral-50);
       --ui-text: var(--ui-color-neutral-900);

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

@@ -65,13 +65,17 @@ if (!import.meta.prerender) {
   })
 }
 
-const type = page.value?.path.includes('components') ? 'Vue Component ' : page.value?.path.includes('composables') ? 'Vue Composable ' : ''
+const title = page.value?.navigation?.title ? page.value.navigation.title : page.value?.title
+const prefix = page.value?.path.includes('components') || page.value?.path.includes('composables') ? 'Vue ' : ''
+const suffix = page.value?.path.includes('components') ? 'Component ' : page.value?.path.includes('composables') ? 'Composable ' : ''
+const description = page.value?.description
+
 useSeoMeta({
-  titleTemplate: `%s ${type}- Nuxt UI ${page.value.module === 'ui-pro' ? 'Pro' : ''} v3${page.value.framework === 'vue' ? ' for Vue' : ''}`,
-  title: page.value.navigation?.title ? page.value.navigation.title : page.value.title,
-  ogTitle: `${page.value.navigation?.title ? page.value.navigation.title : page.value.title} ${type}- Nuxt UI ${page.value.module === 'ui-pro' ? 'Pro' : ''} v3${page.value.framework === 'vue' ? ' for Vue' : ''}`,
-  description: page.value.description,
-  ogDescription: page.value.description
+  titleTemplate: `${prefix}%s ${suffix}- Nuxt UI ${page.value?.module === 'ui-pro' ? 'Pro' : ''} ${page.value?.framework === 'vue' ? ' for Vue' : ''}`,
+  title,
+  ogTitle: `${prefix}${title} ${suffix}- Nuxt UI ${page.value?.module === 'ui-pro' ? 'Pro' : ''} ${page.value?.framework === 'vue' ? ' for Vue' : ''}`,
+  description,
+  ogDescription: description
 })
 
 if (route.path.startsWith('/components')) {
@@ -130,7 +134,7 @@ const communityLinks = computed(() => [{
       </template>
 
       <template #title>
-        {{ page.title }}<sup v-if="page.module === 'ui-pro'" class="ml-1 text-xs align-super font-medium text-(--ui-primary)">PRO</sup>
+        {{ page.title }}<sup v-if="page.module === 'ui-pro'" class="ml-1 text-xs align-super font-medium text-primary">PRO</sup>
       </template>
 
       <template #description>