chore: up

2026-01-15 20:48:12 +01:00 · 2025-03-28 16:22:31 +01:00 · 2025-03-28 08:58:21 +01:00 · 2025-03-26 13:45:17 +01:00 · 2025-03-26 11:40:23 +01:00 · 2025-03-24 15:08:07 +01:00
224 changed files with 8259 additions and 6324 deletions
--- a/.github/ISSUE_TEMPLATE/bug-report-v3.yml
+++ b/.github/ISSUE_TEMPLATE/bug-report-v3.yml
@@ -5,7 +5,7 @@ body:
  - type: markdown
    attributes:
      value: |
-        Before reporting a bug, please make sure that you have read through our [v3 documentation](https://ui3.nuxt.dev/) and existing [issues](https://github.com/nuxt/ui/issues?q=is%3Aissue%20is%3Aopen%20sort%3Aupdated-desc%20label%3Av3).
+        Before reporting a bug, please make sure that you have read through our [v3 documentation](https://ui.nuxt.com/) and existing [issues](https://github.com/nuxt/ui/issues?q=is%3Aissue%20is%3Aopen%20sort%3Aupdated-desc%20label%3Av3).
  - type: textarea
    id: env
    attributes:
@@ -37,7 +37,7 @@ body:
    id: version
    attributes:
      label: Version
-      placeholder: v3.0.0-alpha.x
+      placeholder: v3.0.0
    validations:
      required: true
  - type: textarea
--- a/.github/ISSUE_TEMPLATE/bug-report.yml
+++ b/.github/ISSUE_TEMPLATE/bug-report.yml
@@ -5,7 +5,7 @@ body:
  - type: markdown
    attributes:
      value: |
-        Before reporting a bug, please make sure that you have read through our [documentation](https://ui.nuxt.com) and existing [issues](https://github.com/nuxt/ui/issues?q=is%3Aissue+is%3Aopen+sort%3Aupdated-desc).
+        Before reporting a bug, please make sure that you have read through our [documentation](https://ui2.nuxt.com) and existing [issues](https://github.com/nuxt/ui/issues?q=is%3Aissue+is%3Aopen+sort%3Aupdated-desc).
  - type: textarea
    id: env
    attributes:
--- a/.github/ISSUE_TEMPLATE/feature-request-v3.yml
+++ b/.github/ISSUE_TEMPLATE/feature-request-v3.yml
@@ -5,7 +5,7 @@ body:
  - type: markdown
    attributes:
      value: |
-        Before requesting a feature, please make sure that you have read through our [v3 documentation](https://ui3.nuxt.dev/) and existing [issues](https://github.com/nuxt/ui/issues?q=is%3Aissue%20is%3Aopen%20sort%3Aupdated-desc%20label%3Av3).
+        Before requesting a feature, please make sure that you have read through our [v3 documentation](https://ui.nuxt.com/) and existing [issues](https://github.com/nuxt/ui/issues?q=is%3Aissue%20is%3Aopen%20sort%3Aupdated-desc%20label%3Av3).
  - type: textarea
    id: description
    attributes:
--- a/.github/ISSUE_TEMPLATE/feature-request.yml
+++ b/.github/ISSUE_TEMPLATE/feature-request.yml
@@ -5,7 +5,7 @@ body:
  - type: markdown
    attributes:
      value: |
-        Before requesting a feature, please make sure that you have read through our [documentation](https://ui.nuxt.com) and existing [issues](https://github.com/nuxt/ui/issues?q=is%3Aissue+is%3Aopen+sort%3Aupdated-desc).
+        Before requesting a feature, please make sure that you have read through our [documentation](https://ui2.nuxt.com) and existing [issues](https://github.com/nuxt/ui/issues?q=is%3Aissue+is%3Aopen+sort%3Aupdated-desc).
  - type: textarea
    id: description
    attributes:
--- a/.github/ISSUE_TEMPLATE/question-v3.yml
+++ b/.github/ISSUE_TEMPLATE/question-v3.yml
@@ -5,7 +5,7 @@ body:
  - type: markdown
    attributes:
      value: |
-        Before asking a question, please make sure that you have read through our [v3 documentation](https://ui3.nuxt.dev/) and existing [issues](https://github.com/nuxt/ui/issues?q=is%3Aissue%20is%3Aopen%20sort%3Aupdated-desc%20label%3Av3).
+        Before asking a question, please make sure that you have read through our [v3 documentation](https://ui.nuxt.com/) and existing [issues](https://github.com/nuxt/ui/issues?q=is%3Aissue%20is%3Aopen%20sort%3Aupdated-desc%20label%3Av3).
  - type: textarea
    id: description
    attributes:
--- a/.github/ISSUE_TEMPLATE/question.yml
+++ b/.github/ISSUE_TEMPLATE/question.yml
@@ -5,7 +5,7 @@ body:
  - type: markdown
    attributes:
      value: |
-        Before asking a question, please make sure that you have read through our [documentation](https://ui.nuxt.com) and existing [issues](https://github.com/nuxt/ui/issues?q=is%3Aissue+is%3Aopen+sort%3Aupdated-desc).
+        Before asking a question, please make sure that you have read through our [documentation](https://ui2.nuxt.com) and existing [issues](https://github.com/nuxt/ui/issues?q=is%3Aissue+is%3Aopen+sort%3Aupdated-desc).
  - type: textarea
    id: description
    attributes:
--- a/.github/workflows/module.yml
+++ b/.github/workflows/module.yml
@@ -50,16 +50,161 @@ jobs:
        run: pnpm run typecheck

      - name: Test
-        run: pnpm run test
+        run: pnpm run test run

      - name: Test (vue)
-        run: pnpm run test:vue
+        run: pnpm run test:vue run

      - name: Build
        run: pnpm run build

-      - name: Build vue fixture
-        run: pnpm run test:vue:build
+      - name: Build playground
+        run: pnpm run dev:build
+
+      - name: Build playground (vue)
+        run: pnpm run dev:vue:build

      - name: Publish
        run: pnpx pkg-pr-new publish --compact --no-template --pnpm
+
+  starter-nuxt:
+    needs: build
+
+    runs-on: ${{ matrix.os }}
+
+    permissions:
+      contents: read
+      pull-requests: read
+
+    strategy:
+      matrix:
+        os: [ubuntu-latest] # macos-latest, windows-latest
+        node: [22]
+
+    steps:
+      - name: Checkout
+        uses: actions/checkout@v4
+        with:
+          repository: nuxtlabs/nuxt-ui-starter
+
+      - 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
+
+      - name: Typecheck
+        run: pnpm run typecheck
+
+      - name: Build
+        run: pnpm run build
+
+  starter-vue:
+    needs: build
+
+    runs-on: ${{ matrix.os }}
+
+    permissions:
+      contents: read
+      pull-requests: read
+
+    strategy:
+      matrix:
+        os: [ubuntu-latest] # macos-latest, windows-latest
+        node: [22]
+
+    steps:
+      - name: Checkout
+        uses: actions/checkout@v4
+        with:
+          repository: nuxtlabs/nuxt-ui-vue-starter
+
+      - 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
+
+      - name: Typecheck
+        run: pnpm run typecheck
+
+      - name: Build
+        run: pnpm run build
+
+  nuxt-ui-pro:
+    needs: build
+
+    runs-on: ${{ matrix.os }}
+
+    permissions:
+      contents: read
+      pull-requests: read
+
+    strategy:
+      matrix:
+        os: [ubuntu-latest] # macos-latest, windows-latest
+        node: [22]
+
+    env:
+      NUXT_UI_PRO_LICENSE: ${{ secrets.NUXT_UI_PRO_LICENSE }}
+
+    steps:
+      - name: Checkout
+        uses: actions/checkout@v4
+        with:
+          repository: nuxt/ui-pro
+          token: ${{ secrets.NUXT_GITHUB_TOKEN }}
+
+      - 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
+
+      - name: Prepare
+        run: pnpm run dev:prepare
+
+      - name: Typecheck
+        run: pnpm run typecheck
+
+      - name: Build
+        run: pnpm run build
--- a/CHANGELOG.md
+++ b/CHANGELOG.md
@@ -1,5 +1,40 @@
 # Changelog

+## [3.0.1](https://github.com/nuxt/ui/compare/v3.0.0...v3.0.1) (2025-03-21)
+
+### ⚠ BREAKING CHANGES
+
+* **Form:** drop explicit support for `zod` and `valibot` (#3617)
+
+### Features
+
+* **components:** handle events in `content` prop ([5dec0e1](https://github.com/nuxt/ui/commit/5dec0e16e28549b8833aaab17a87fada63d6598c))
+* **locale:** add Catalan language ([#3550](https://github.com/nuxt/ui/issues/3550)) ([53cf1b4](https://github.com/nuxt/ui/commit/53cf1b4c14a2a0e076e1e77688852e6bd0a28a74))
+* **locale:** add Central Kurdish language ([#3566](https://github.com/nuxt/ui/issues/3566)) ([b2034cc](https://github.com/nuxt/ui/commit/b2034ccc91eec6a2842c6f83d159e5aa6fd5f2fd))
+* **locale:** add Romanian language ([#3587](https://github.com/nuxt/ui/issues/3587)) ([0229b0f](https://github.com/nuxt/ui/commit/0229b0fd4644a97db7eb3154c3c87a26634dcfbb))
+* **locale:** add Urdu language ([#3611](https://github.com/nuxt/ui/issues/3611)) ([126ba23](https://github.com/nuxt/ui/commit/126ba2326f8153e155e1013db92c6ee417117610))
+* **locale:** add Uzbek language ([#3548](https://github.com/nuxt/ui/issues/3548)) ([302e04b](https://github.com/nuxt/ui/commit/302e04bd77ae8b165046b264c8d23626e92f8fb5))
+
+### Bug Fixes
+
+* **Calendar:** grey out days outside of displayed month ([#3639](https://github.com/nuxt/ui/issues/3639)) ([a516866](https://github.com/nuxt/ui/commit/a5168666b7dff08e714d57f497737e7a670f457c))
+* **ContextMenu/DropdownMenu:** remove `any` from `proxySlots` ([#3623](https://github.com/nuxt/ui/issues/3623)) ([764c41a](https://github.com/nuxt/ui/commit/764c41a0c60dd1c12d39a86af9f5f11b9e6cdc8c))
+* **Modal/Slideover/Toast:** prevent unnecessary close instantiation ([f4c417d](https://github.com/nuxt/ui/commit/f4c417d9ef5409b52084bdf9d8cbccee3139709f))
+* **module:** handle tailwindcss import without `theme(static)` ([#3630](https://github.com/nuxt/ui/issues/3630)) ([ecff9ab](https://github.com/nuxt/ui/commit/ecff9abc720bdda3a279d5bcfb7b477ff885f2e4))
+* **module:** mark functions used in exports as pure ([#3604](https://github.com/nuxt/ui/issues/3604)) ([57efc78](https://github.com/nuxt/ui/commit/57efc78a3b3fa4a54bcd13df47d570a18fba2bc4))
+* **RadioGroup:** handle `disabled` on items ([fe0bd83](https://github.com/nuxt/ui/commit/fe0bd83d11b0dfa53b58d423bc917f8e21d73444)), closes [nuxt/ui-pro#911](https://github.com/nuxt/ui-pro/issues/911)
+* **Table:** allow links to be opened when [@select](https://github.com/select) is used ([#3580](https://github.com/nuxt/ui/issues/3580)) ([e80cc15](https://github.com/nuxt/ui/commit/e80cc1592fb244dd7692486a4c1ca5b1c2008112))
+* **types:** add missing export for Icon ([#3568](https://github.com/nuxt/ui/issues/3568)) ([5e62493](https://github.com/nuxt/ui/commit/5e624933216db95cbfd1b8034b2eb0f13846ae55))
+* **unplugin:** include `@compodium/examples` in auto-imports paths ([#3585](https://github.com/nuxt/ui/issues/3585)) ([cc504b8](https://github.com/nuxt/ui/commit/cc504b8a4b69dd76b49659d5c206ef23dcb9e475))
+* **useLocale:** unique symbol to use in `@nuxt/ui-pro` ([#3603](https://github.com/nuxt/ui/issues/3603)) ([dec2730](https://github.com/nuxt/ui/commit/dec2730aaea1327434837cfa022ea04056757cbf))
+* **vue:** missing unhead context ([#3589](https://github.com/nuxt/ui/issues/3589)) ([0897e9e](https://github.com/nuxt/ui/commit/0897e9ef05fbee4f021f317bb7c2d0b7007f1b75))
+
+### Code Refactoring
+
+* **Form:** drop explicit support for `zod` and `valibot` ([#3617](https://github.com/nuxt/ui/issues/3617)) ([9a4bb34](https://github.com/nuxt/ui/commit/9a4bb34d7d14add0a3199103f4b583e8307d1d6d))
+
+## [3.0.0](https://github.com/nuxt/ui/compare/v3.0.0-beta.4...v3.0.0) (2025-03-12)
+
 ## [3.0.0-beta.4](https://github.com/nuxt/ui/compare/v3.0.0-beta.3...v3.0.0-beta.4) (2025-03-12)

 ### Features
--- a/README.md
+++ b/README.md
@@ -11,31 +11,31 @@
 [![License][license-src]][license-href]
 [![Nuxt][nuxt-src]][nuxt-href]

-We're thrilled to introduce Nuxt UI v3, a significant upgrade to our UI library that delivers extensive improvements and robust new capabilities. This major update harnesses the combined strengths of [Reka UI](https://reka-ui.com/), [Tailwind CSS v4](https://tailwindcss.com/), and [Tailwind Variants](https://www.tailwind-variants.org/) to offer developers an unparalleled set of tools for creating sophisticated, accessible, and highly performant user interfaces.
+Nuxt UI harnesses the combined strengths of [Reka UI](https://reka-ui.com/), [Tailwind CSS](https://tailwindcss.com/), and [Tailwind Variants](https://www.tailwind-variants.org/) to offer developers an unparalleled set of tools for creating sophisticated, accessible, and highly performant user interfaces.

 > [!NOTE]
-> You are on the `v3` development branch, check out the [dev branch](https://github.com/nuxt/ui/tree/dev) for Nuxt UI v2.
+> You are on the `v3` development branch, check out the [v2 branch](https://github.com/nuxt/ui/tree/v2) for Nuxt UI v2.

 ## Documentation

-Visit https://ui3.nuxt.dev to explore the documentation.
+Visit https://ui.nuxt.com to explore the documentation.

 ## Installation

 ```bash [pnpm]
-pnpm add @nuxt/ui@next
+pnpm add @nuxt/ui
 ```

 ```bash [yarn]
-yarn add @nuxt/ui@next
+yarn add @nuxt/ui
 ```

 ```bash [npm]
-npm install @nuxt/ui@next
+npm install @nuxt/ui
 ```

 ```bash [bun]
-bun add @nuxt/ui@next
+bun add @nuxt/ui
 ```

 ### Nuxt
@@ -51,11 +51,11 @@ export default defineNuxtConfig({
 2. Import Tailwind CSS and Nuxt UI in your CSS:

 ```css [assets/css/main.css]
-@import "tailwindcss" theme(static);
+@import "tailwindcss";
@import "@nuxt/ui";
 ```

-Learn more in the [installation guide](https://ui3.nuxt.dev/getting-started/installation/nuxt).
+Learn more in the [installation guide](https://ui.nuxt.com/getting-started/installation/nuxt).

 ### Vue

@@ -98,11 +98,11 @@ app.mount('#app')
 3. Import Tailwind CSS and Nuxt UI in your CSS:

 ```css [assets/main.css]
-@import "tailwindcss" theme(static);
+@import "tailwindcss";
@import "@nuxt/ui";
 ```

-Learn more in the [installation guide](https://ui3.nuxt.dev/getting-started/installation/vue).
+Learn more in the [installation guide](https://ui.nuxt.com/getting-started/installation/vue).

 ## Credits

@@ -119,7 +119,7 @@ Learn more in the [installation guide](https://ui3.nuxt.dev/getting-started/inst
 Licensed under the [MIT license](https://github.com/nuxt/ui/blob/v3/LICENSE.md).

 <!-- Badges -->
-[npm-version-src]: https://img.shields.io/npm/v/@nuxt/ui/next.svg?style=flat&colorA=18181B&colorB=28CF8D
+[npm-version-src]: https://img.shields.io/npm/v/@nuxt/ui/latest.svg?style=flat&colorA=18181B&colorB=28CF8D
 [npm-version-href]: https://npmjs.com/package/@nuxt/ui

 [npm-downloads-src]: https://img.shields.io/npm/dm/@nuxt/ui.svg?style=flat&colorA=18181B&colorB=28CF8D
--- a/cli/package.json
+++ b/cli/package.json
@@ -6,7 +6,7 @@
  },
  "dependencies": {
    "citty": "^0.1.6",
-    "consola": "^3.4.0",
+    "consola": "^3.4.2",
    "pathe": "^2.0.3",
    "scule": "^1.3.0"
  }
--- a/docs/app/app.vue
+++ b/docs/app/app.vue
@@ -1,7 +1,6 @@
 <script setup lang="ts">
-// import { withoutTrailingSlash } from 'ufo'
+import { withoutTrailingSlash } from 'ufo'
 import colors from 'tailwindcss/colors'
-// import { debounce } from 'perfect-debounce'

 const route = useRoute()
 const appConfig = useAppConfig()
@@ -12,16 +11,6 @@ const { data: files } = useLazyAsyncData('search', () => queryCollectionSearchSe
  server: false
 })

-const searchTerm = ref('')
-
-// watch(searchTerm, debounce((query: string) => {
-//   if (!query) {
-//     return
-//   }
-
-//   useTrackEvent('Search', { props: { query: `${query} - ${searchTerm.value?.commandPaletteRef.results.length} results` } })
-// }, 500))
-
 const links = useLinks()
 const color = computed(() => colorMode.value === 'dark' ? (colors as any)[appConfig.ui.colors.neutral][900] : 'white')
 const radius = computed(() => `:root { --ui-radius: ${appConfig.theme.radius}rem; }`)
@@ -33,8 +22,8 @@ useHead({
    { key: 'theme-color', name: 'theme-color', content: color }
  ],
  link: [
-    { rel: 'icon', type: 'image/svg+xml', href: '/icon.svg' }
-    // { rel: 'canonical', href: `https://ui.nuxt.com${withoutTrailingSlash(route.path)}` }
+    { rel: 'icon', type: 'image/svg+xml', href: '/icon.svg' },
+    { rel: 'canonical', href: `https://ui.nuxt.com${withoutTrailingSlash(route.path)}` }
  ],
  style: [
    { innerHTML: radius, id: 'nuxt-ui-radius', tagPriority: -2 },
@@ -61,7 +50,7 @@ provide('navigation', mappedNavigation)
    <NuxtLoadingIndicator color="var(--ui-primary)" :height="2" />

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

      <Header :links="links" />
    </template>
@@ -75,7 +64,6 @@ provide('navigation', mappedNavigation)

      <ClientOnly>
        <LazyUContentSearch
-          v-model:search-term="searchTerm"
          :files="files"
          :groups="[{
            id: 'framework',
@@ -95,5 +83,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 !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 */
 </style>
--- a/docs/app/components/AdsCarbon.vue
+++ b/docs/app/components/AdsCarbon.vue
@@ -0,0 +1,50 @@
+<script setup lang="ts">
+const el = ref<HTMLDivElement | null>(null)
+
+onMounted(() => {
+  if (!el.value) {
+    return
+  }
+
+  const script = document.createElement('script')
+  script.setAttribute('type', 'text/javascript')
+  script.setAttribute('src', 'https://cdn.carbonads.com/carbon.js?serve=CWYIVK3E&placement=uinuxtcom')
+  script.setAttribute('id', '_carbonads_js')
+
+  el.value?.appendChild(script)
+})
+</script>
+
+<template>
+  <div ref="el" class="carbon" />
+</template>
+
+<style scoped>
+@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;
+
+  .carbon-img {
+    @apply flex justify-center w-full;
+
+    & > img {
+      @apply !max-w-full w-full rounded-(--ui-radius);
+    }
+  }
+
+  .carbon-text {
+    @apply text-sm text-(--ui-text-muted) transition-colors text-center text-pretty flex pt-2;
+  }
+
+  .carbon-poweredby {
+    @apply block text-[10px] text-center text-(--ui-text-dimmed) pt-2;
+  }
+
+  &:hover {
+    .carbon-text {
+      @apply text-(--ui-text);
+    }
+  }
+}
+</style>
--- a/docs/app/components/Banner.vue
+++ b/docs/app/components/Banner.vue
@@ -1,7 +1,18 @@
 <template>
-  <UBanner icon="i-lucide-construction" :actions="[{ label: 'Go to Nuxt UI v2', to: 'https://ui.nuxt.com', trailingIcon: 'i-lucide-arrow-right' }]" :close="false">
+  <UBanner
+    id="ui3-launch"
+    icon="i-lucide-rocket"
+    :actions="[
+      {
+        label: 'Discover Nuxt UI Pro',
+        to: '/pro/pricing',
+        trailingIcon: 'i-lucide-arrow-right'
+      }
+    ]"
+    close
+  >
    <template #title>
-      You're looking at the documentation for <span class="font-semibold">Nuxt UI v3</span>!
+      <span class="font-semibold">Nuxt UI v3</span> is officially released.
    </template>
  </UBanner>
 </template>
--- a/docs/app/components/Countdown.vue
+++ b/docs/app/components/Countdown.vue
@@ -0,0 +1,51 @@
+<script setup lang="ts">
+const endDate = new Date('2025-03-14T23:59:59Z')
+const second = 1000
+const minute = second * 60
+const hour = minute * 60
+const day = hour * 24
+
+function getCountdown() {
+  const distance = Math.floor((endDate.getTime() - Date.now()))
+  return {
+    day: Math.floor(distance / day),
+    hour: Math.floor((distance % (day)) / (hour)),
+    minute: Math.floor((distance % (hour)) / (minute)),
+    second: Math.floor((distance % (minute)) / (second)),
+    distance
+  }
+}
+const countdown = ref(getCountdown())
+let interval: any
+if (countdown.value.distance > 0) {
+  onMounted(() => {
+    interval = setInterval(() => {
+      countdown.value = getCountdown()
+      if (countdown.value.distance <= 0) {
+        clearInterval(interval)
+      }
+    }, 1000)
+  })
+}
+const plural = (value: number) => (value === 1 ? '' : 's')
+const double = (value: number) => (value < 10 ? `0${value}` : value)
+</script>
+
+<template>
+  <div>
+    <p class="font-semibold text-gray-900 dark:text-white text-sm mb-3">
+      Nuxt UI v3 launch offer ends in:
+    </p>
+
+    <div class="flex items-center justify-center gap-2 text-center">
+      <template v-for="(value, key) in countdown" :key="key">
+        <div v-if="key !== 'distance'" class="flex flex-col items-center gap-2">
+          <UBadge color="primary" class="w-14 h-14 font-bold text-2xl flex items-center justify-center tabular-nums" variant="subtle">
+            {{ double(value) }}
+          </UBadge>
+          <span class="text-[10px] font-semibold text-gray-900 dark:text-white tracking-wide tabular-nums uppercase">{{ key }}{{ plural(value) }}</span>
+        </div>
+      </template>
+    </div>
+  </div>
+</template>
--- a/docs/app/components/Header.vue
+++ b/docs/app/components/Header.vue
@@ -41,7 +41,7 @@ const mobileLinks = computed(() => props.links.map(link => ({ ...link, defaultOp
      <UDropdownMenu
        v-slot="{ open }"
        :modal="false"
-        :items="[{ label: `v${config.version}`, active: true, color: 'primary', checked: true, type: 'checkbox' }, { label: module === 'ui-pro' ? 'v1.5' : 'v2.19', to: module === 'ui-pro' ? 'https://ui.nuxt.com/pro' : 'https://ui.nuxt.com' }]"
+        :items="[{ label: `v${config.version}`, active: true, color: 'primary', checked: true, type: 'checkbox' }, { label: module === 'ui-pro' ? 'v1.7.1' : 'v2.21.1', to: module === 'ui-pro' ? 'https://ui2.nuxt.com/pro' : 'https://ui2.nuxt.com' }]"
        :ui="{ content: 'w-(--reka-dropdown-menu-trigger-width) min-w-0' }"
        size="xs"
      >
@@ -82,7 +82,7 @@ const mobileLinks = computed(() => props.links.map(link => ({ ...link, defaultOp
    </template>

    <template #body>
-      <UNavigationMenu orientation="vertical" :items="mobileLinks" class="-mx-2.5" default-open />
+      <UNavigationMenu orientation="vertical" :items="mobileLinks" class="-mx-2.5" />

      <USeparator type="dashed" class="mt-4 mb-6" />

--- a/docs/app/components/SkyBg.vue
+++ b/docs/app/components/SkyBg.vue
@@ -1,4 +1,6 @@
 <script setup lang="ts">
+import { kebabCase } from 'scule'
+
 interface Star {
  x: number
  y: number
@@ -22,6 +24,8 @@ const props = withDefaults(defineProps<{
  speed: 'normal'
 })

+const route = useRoute()
+
 // Generate random stars
 const generateStars = (count: number): Star[] => {
  return Array.from({ length: count }, () => {
@@ -35,7 +39,7 @@ const generateStars = (count: number): Star[] => {
 }

 // Generate all stars
-const stars = ref<Star[]>(generateStars(props.starCount))
+const stars = useState<Star[]>(`${kebabCase(route.path)}-sky`, () => generateStars(props.starCount))

 // Compute twinkle animation duration based on speed
 const twinkleDuration = computed(() => {
@@ -50,22 +54,20 @@ const twinkleDuration = computed(() => {

 <template>
  <div class="absolute pointer-events-none z-[-1] inset-y-0 left-4 right-4 lg:right-[50%] overflow-hidden">
-    <ClientOnly>
-      <div
-        v-for="star in stars"
-        :key="star.id"
-        class="star absolute"
-        :style="{
-          'left': `${star.x}%`,
-          'top': `${star.y}%`,
-          'transform': 'translate(-50%, -50%)',
-          '--star-size': `${star.size}px`,
-          '--star-color': color,
-          '--twinkle-delay': `${star.twinkleDelay}s`,
-          '--twinkle-duration': twinkleDuration
-        }"
-      />
-    </ClientOnly>
+    <div
+      v-for="star in stars"
+      :key="star.id"
+      class="star absolute"
+      :style="{
+        'left': `${star.x}%`,
+        'top': `${star.y}%`,
+        'transform': 'translate(-50%, -50%)',
+        '--star-size': `${star.size}px`,
+        '--star-color': color,
+        '--twinkle-delay': `${star.twinkleDelay}s`,
+        '--twinkle-duration': twinkleDuration
+      }"
+    />
  </div>
 </template>

--- a/docs/app/components/StarsBg.vue
+++ b/docs/app/components/StarsBg.vue
@@ -1,4 +1,12 @@
 <script setup lang="ts">
+import { kebabCase } from 'scule'
+
+interface Star {
+  x: number
+  y: number
+  size: number
+}
+
 const props = withDefaults(defineProps<{
  starCount?: number
  color?: string
@@ -14,8 +22,10 @@ const props = withDefaults(defineProps<{
  })
 })

+const route = useRoute()
+
 // Generate random star positions and sizes
-const generateStars = (count: number) => {
+const generateStars = (count: number): Star[] => {
  return Array.from({ length: count }, () => ({
    x: Math.floor(Math.random() * 2000),
    y: Math.floor(Math.random() * 2000),
@@ -25,52 +35,58 @@ const generateStars = (count: number) => {
  }))
 }

-// Compute star layers with different speeds and opacities
-const starLayers = computed(() => {
-  const speedMap = {
-    slow: { duration: 200, opacity: 0.5 },
-    normal: { duration: 150, opacity: 0.75 },
-    fast: { duration: 100, opacity: 1 }
-  }
+// Define speed configurations once
+const speedMap = {
+  slow: { duration: 200, opacity: 0.5, ratio: 0.3 },
+  normal: { duration: 150, opacity: 0.75, ratio: 0.3 },
+  fast: { duration: 100, opacity: 1, ratio: 0.4 }
+}

-  return [
-    { stars: generateStars(props.starCount), ...speedMap.fast },
-    { stars: generateStars(Math.floor(props.starCount * 0.6)), ...speedMap.normal },
-    { stars: generateStars(Math.floor(props.starCount * 0.3)), ...speedMap.slow }
-  ]
+// Use a more efficient approach to generate and store stars
+const stars = useState<{ slow: Star[], normal: Star[], fast: Star[] }>(`${kebabCase(route.path)}-stars`, () => {
+  return {
+    slow: generateStars(Math.floor(props.starCount * speedMap.slow.ratio)),
+    normal: generateStars(Math.floor(props.starCount * speedMap.normal.ratio)),
+    fast: generateStars(Math.floor(props.starCount * speedMap.fast.ratio))
+  }
 })
+
+// Compute star layers with different speeds and opacities
+const starLayers = computed(() => [
+  { stars: stars.value.fast, ...speedMap.fast },
+  { stars: stars.value.normal, ...speedMap.normal },
+  { stars: stars.value.slow, ...speedMap.slow }
+])
 </script>

 <template>
  <div class="absolute pointer-events-none z-[-1] inset-y-0 inset-x-5 sm:inset-x-7 lg:inset-x-9 overflow-hidden">
-    <ClientOnly>
-      <div class="stars size-full absolute inset-x-0 top-0">
+    <div class="stars size-full absolute inset-x-0 top-0">
+      <div
+        v-for="(layer, index) in starLayers"
+        :key="index"
+        class="star-layer"
+        :style="{
+          '--star-duration': `${layer.duration}s`,
+          '--star-opacity': layer.opacity,
+          '--star-color': color
+        }"
+      >
        <div
-          v-for="(layer, index) in starLayers"
-          :key="index"
-          class="star-layer"
+          v-for="(star, starIndex) in layer.stars"
+          :key="starIndex"
+          class="star absolute rounded-full"
          :style="{
-            '--star-duration': `${layer.duration}s`,
-            '--star-opacity': layer.opacity,
-            '--star-color': color
+            left: `${star.x}px`,
+            top: `${star.y}px`,
+            width: `${star.size}px`,
+            height: `${star.size}px`,
+            backgroundColor: 'var(--star-color)',
+            opacity: 'var(--star-opacity)'
          }"
-        >
-          <div
-            v-for="(star, starIndex) in layer.stars"
-            :key="starIndex"
-            class="star absolute rounded-full"
-            :style="{
-              left: `${star.x}px`,
-              top: `${star.y}px`,
-              width: `${star.size}px`,
-              height: `${star.size}px`,
-              backgroundColor: 'var(--star-color)',
-              opacity: 'var(--star-opacity)'
-            }"
-          />
-        </div>
+        />
      </div>
-    </ClientOnly>
+    </div>
  </div>
 </template>

--- a/docs/app/components/content/SupportedLanguages.vue
+++ b/docs/app/components/content/SupportedLanguages.vue
@@ -11,7 +11,9 @@ function getEmojiFlag(locale: string): string {
  const languageToCountry: Record<string, string> = {
    ar: 'sa', // Arabic -> Saudi Arabia
    bn: 'bd', // Bengali -> Bangladesh
+    ca: 'es', // Catalan -> Spain
    cs: 'cz', // Czech -> Czech Republic (note: modern country code is actually 'cz')
+    ckb: 'iq', // Central Kurdish -> Iraq
    da: 'dk', // Danish -> Denmark
    el: 'gr', // Greek -> Greece
    et: 'ee', // Estonian -> Estonia
@@ -24,7 +26,9 @@ function getEmojiFlag(locale: string): string {
    nb: 'no', // Norwegian Bokmål -> Norway
    sv: 'se', // Swedish -> Sweden
    uk: 'ua', // Ukrainian -> Ukraine
-    vi: 'vn' // Vietnamese -> Vietnam
+    ur: 'pk', // Urdu -> Pakistan
+    vi: 'vn', // Vietnamese -> Vietnam
+    hy: 'am' // Armenian -> Armenia
  }

  const baseLanguage = locale.split('-')[0]?.toLowerCase() || locale
--- a/docs/app/components/content/examples/form/FormExampleValibot.vue
+++ b/docs/app/components/content/examples/form/FormExampleValibot.vue
@@ -22,7 +22,7 @@ async function onSubmit(event: FormSubmitEvent<Schema>) {
 </script>

 <template>
-  <UForm :schema="v.safeParser(schema)" :state="state" class="space-y-4" @submit="onSubmit">
+  <UForm :schema="schema" :state="state" class="space-y-4" @submit="onSubmit">
    <UFormField label="Email" name="email">
      <UInput v-model="state.email" />
    </UFormField>
--- a/docs/app/components/og-image/OgImageComponent.vue
+++ b/docs/app/components/og-image/OgImageComponent.vue
@@ -3,7 +3,7 @@ withDefaults(defineProps<{
  title: string
  description: string
  component: string
-  module: string
+  module?: string
 }>(), {
  module: ''
 })
--- a/docs/app/components/og-image/OgImageDocs.vue
+++ b/docs/app/components/og-image/OgImageDocs.vue
@@ -3,8 +3,8 @@ withDefaults(defineProps<{
  title: string
  description: string
  headline: string
-  framework: string
-  module: string
+  framework?: string
+  module?: string
 }>(), {
  framework: 'nuxt',
  module: ''
--- a/docs/app/components/theme-picker/ThemePicker.vue
+++ b/docs/app/components/theme-picker/ThemePicker.vue
@@ -81,7 +81,6 @@ function setBlackAsPrimary(value: boolean) {

        <div class="grid grid-cols-3 gap-1 -mx-2">
          <ThemePickerButton
-            chip="primary"
            label="Black"
            :selected="appConfig.theme.blackAsPrimary"
            @click="setBlackAsPrimary(true)"
@@ -90,6 +89,7 @@ function setBlackAsPrimary(value: boolean) {
              <span class="inline-block w-2 h-2 rounded-full bg-black dark:bg-white" />
            </template>
          </ThemePickerButton>
+
          <ThemePickerButton
            v-for="color in primaryColors"
            :key="color"
--- a/docs/app/components/theme-picker/ThemePickerButton.vue
+++ b/docs/app/components/theme-picker/ThemePickerButton.vue
@@ -5,6 +5,10 @@ defineProps<{
  chip?: string
  selected?: boolean
 }>()
+
+const slots = defineSlots<{
+  leading: () => any
+}>()
 </script>

 <template>
@@ -17,7 +21,7 @@ defineProps<{
    class="capitalize ring-(--ui-border) rounded-[calc(var(--ui-radius))] text-[11px]"
    :class="[selected ? 'bg-(--ui-bg-elevated)' : 'hover:bg-(--ui-bg-elevated)/50']"
  >
-    <template v-if="chip" #leading>
+    <template v-if="chip || !!slots.leading" #leading>
      <slot name="leading">
        <span
          class="inline-block size-2 rounded-full"
--- a/docs/app/error.vue
+++ b/docs/app/error.vue
@@ -1,6 +1,5 @@
 <script setup lang="ts">
 import colors from 'tailwindcss/colors'
-// import { debounce } from 'perfect-debounce'
 import type { NuxtError } from '#app'

 const props = defineProps<{
@@ -15,16 +14,6 @@ const { data: files } = useLazyAsyncData('search', () => queryCollectionSearchSe
  server: false
 })

-const searchTerm = ref('')
-
-// watch(searchTerm, debounce((query: string) => {
-//   if (!query) {
-//     return
-//   }
-
-//   useTrackEvent('Search', { props: { query: `${query} - ${searchTerm.value?.commandPaletteRef.results.length} results` } })
-// }, 500))
-
 const links = useLinks()
 const color = computed(() => colorMode.value === 'dark' ? (colors as any)[appConfig.ui.colors.neutral][900] : 'white')
 const radius = computed(() => `:root { --ui-radius: ${appConfig.theme.radius}rem; }`)
@@ -48,7 +37,7 @@ useHead({
 })

 useSeoMeta({
-  titleTemplate: '%s - Nuxt UI v3',
+  titleTemplate: '%s - Nuxt UI',
  title: String(props.error.statusCode)
 })

@@ -67,17 +56,16 @@ provide('navigation', mappedNavigation)
  <UApp>
    <NuxtLoadingIndicator color="#FFF" />

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

    <Header :links="links" />

    <UError :error="error" />

-    <!-- <Footer /> -->
+    <Footer />

    <ClientOnly>
      <LazyUContentSearch
-        v-model:search-term="searchTerm"
        :files="files"
        :groups="[{
          id: 'framework',
--- a/docs/app/pages/.index.yml
+++ b/docs/app/pages/.index.yml
@@ -97,7 +97,7 @@ design_system:
    ```

    ```css [main.css]
-    @import "tailwindcss" theme(static);
+    @import "tailwindcss";
    @import "@nuxt/ui";

    :root {
--- a/docs/app/pages/[...slug].vue
+++ b/docs/app/pages/[...slug].vue
@@ -82,6 +82,8 @@ if (route.path.startsWith('/components')) {
  })
 } else {
  defineOgImageComponent('Docs', {
+    title: page.value.title,
+    description: page.value.description,
    headline: breadcrumb.value?.[breadcrumb.value.length - 1]?.label || 'Nuxt UI',
    framework: page.value?.framework,
    module: page.value.module
@@ -107,23 +109,6 @@ const communityLinks = computed(() => [{
  icon: 'i-lucide-map',
  to: '/roadmap'
 }])
-
-// const resourcesLinks = [{
-//   icon: 'i-simple-icons-figma',
-//   label: 'Figma Kit',
-//   to: 'https://www.figma.com/community/file/1288455405058138934',
-//   target: '_blank'
-// }, {
-//   label: 'Playground',
-//   icon: 'i-simple-icons-stackblitz',
-//   to: 'https://stackblitz.com/edit/nuxt-ui',
-//   target: '_blank'
-// }, {
-//   icon: 'i-simple-icons-nuxtdotjs',
-//   label: 'Nuxt docs',
-//   to: 'https://nuxt.com',
-//   target: '_blank'
-// }]
 </script>

 <template>
@@ -172,14 +157,9 @@ const communityLinks = computed(() => [{

          <UPageLinks title="Community" :links="communityLinks" />

-          <!-- <USeparator type="dashed" />
-
-          <UPageLinks title="Resources" :links="resourcesLinks" />
-
          <USeparator type="dashed" />

-          <AdsPro />
-          <AdsCarbon /> -->
+          <AdsCarbon />
        </template>
      </UContentToc>
    </template>
--- a/docs/app/pages/components.vue
+++ b/docs/app/pages/components.vue
@@ -119,7 +119,8 @@ onMounted(() => {
        />
      </template>

-      <StarsBg />
+      <LazyStarsBg />
+
      <div aria-hidden="true" class="hidden lg:block absolute z-[-1] border-x border-(--ui-border) inset-0 mx-4 sm:mx-6 lg:mx-8" />
    </UPageHero>

--- a/docs/app/pages/figma/.figma.yml
+++ b/docs/app/pages/figma/.figma.yml
@@ -178,6 +178,7 @@ pricing:
    - title: Solo License
      description: Design faster with all Nuxt UI Pro components.
      price: $149
+      # discount: $119
      billing_period: one-time payment
      billing_cycle: plus local taxes
      class: bg-(--ui-bg-elevated)/50
@@ -199,6 +200,7 @@ pricing:
    - title: Team License
      description: Everything you need to deliver faster as a team.
      price: $349
+      # discount: $279
      billing_period: one-time payment
      billing_cycle: plus local taxes
      class: bg-(--ui-bg-elevated)/50
--- a/docs/app/pages/figma/index.vue
+++ b/docs/app/pages/figma/index.vue
@@ -1,7 +1,7 @@
 <script setup lang="ts">
 // @ts-expect-error yaml is not typed
 import page from '.figma.yml'
-import { animate } from 'motion'
+import { animate } from 'motion-v'
 import { joinURL } from 'ufo'

 const { url } = useSiteConfig()
@@ -233,6 +233,7 @@ onMounted(async () => {
          :title="plan.title"
          :description="plan.description"
          :price="plan.price"
+          :discount="plan.discount"
          :billing-period="plan.billing_period"
          :billing-cycle="plan.billing_cycle"
          :highlight="plan.highlight"
--- a/docs/app/pages/index.vue
+++ b/docs/app/pages/index.vue
@@ -76,7 +76,7 @@ useIntersectionObserver(contributorsRef, ([entry]) => {
            :key="feature.title"
            as-child
            :initial="{ opacity: 0, transform: 'translateX(-10px)' }"
-            :in-view="{ opacity: 1, transform: 'translateX(0)' }"
+            :while-in-view="{ opacity: 1, transform: 'translateX(0)' }"
            :transition="{ delay: 0.2 + 0.4 * index }"
            :in-view-options="{ once: true }"
          >
@@ -85,7 +85,7 @@ useIntersectionObserver(contributorsRef, ([entry]) => {
        </div>
      </template>

-      <SkyBg />
+      <LazySkyBg />

      <div class="h-[344px] lg:h-full lg:relative w-full lg:min-h-[calc(100vh-var(--ui-header-height)-1px)] overflow-hidden">
        <UPageMarquee
@@ -93,7 +93,7 @@ useIntersectionObserver(contributorsRef, ([entry]) => {
          :overlay="false"
          :ui="{
            root: '[--gap:--spacing(4)] [--duration:40s] border-(--ui-border) absolute w-full left-0 border-y lg:border-x lg:border-y-0 lg:w-[calc(50%-6px)] 2xl:w-[320px] lg:flex-col',
-            content: 'lg:w-auto lg:h-full lg:flex-col lg:animate-[marquee-vertical_var(--duration)_linear_infinite] lg:rtl:animate-[marquee-vertical-rtl_var(--duration)_linear_infinite] lg:h-[fit-content]'
+            content: 'lg:w-auto lg:flex-col lg:animate-[marquee-vertical_var(--duration)_linear_infinite] lg:rtl:animate-[marquee-vertical-rtl_var(--duration)_linear_infinite] lg:h-[fit-content]'
          }"
        >
          <ULink
@@ -118,7 +118,7 @@ useIntersectionObserver(contributorsRef, ([entry]) => {
          :overlay="false"
          :ui="{
            root: '[--gap:--spacing(4)] [--duration:40s] border-(--ui-border) absolute w-full mt-[180px] left-0 border-y lg:mt-auto lg:left-auto lg:border-y-0 lg:border-x lg:w-[calc(50%-6px)] 2xl:w-[320px] lg:right-0 lg:flex-col',
-            content: 'lg:w-auto lg:h-full lg:flex-col lg:animate-[marquee-vertical_var(--duration)_linear_infinite] lg:rtl:animate-[marquee-vertical-rtl_var(--duration)_linear_infinite] lg:h-[fit-content] lg:[animation-direction:reverse]'
+            content: 'lg:w-auto lg:flex-col lg:animate-[marquee-vertical_var(--duration)_linear_infinite] lg:rtl:animate-[marquee-vertical-rtl_var(--duration)_linear_infinite] lg:h-[fit-content] lg:[animation-direction:reverse]'
          }"
        >
          <ULink
@@ -147,7 +147,7 @@ useIntersectionObserver(contributorsRef, ([entry]) => {
          :key="feature.title"
          as="li"
          :initial="{ opacity: 0, transform: 'translateY(10px)' }"
-          :in-view="{ opacity: 1, transform: 'translateY(0)' }"
+          :while-in-view="{ opacity: 1, transform: 'translateY(0)' }"
          :transition="{ delay: 0.1 * index }"
          :in-view-options="{ once: true }"
          class="flex items-start gap-x-3 relative group"
@@ -261,7 +261,7 @@ useIntersectionObserver(contributorsRef, ([entry]) => {
        </UButton>
      </template>

-      <StarsBg />
+      <LazyStarsBg />

      <div aria-hidden="true" class="hidden lg:block absolute z-[-1] border-x border-(--ui-border) inset-0 mx-4 sm:mx-6 lg:mx-8" />
      <div class="relative h-[400px] border border-(--ui-border) bg-(--ui-bg-muted) overflow-hidden border-x-0 -mx-4 sm:-mx-6 lg:mx-0 lg:border-x w-screen lg:w-full">
--- a/docs/app/pages/pro/.content/pricing.yml
+++ b/docs/app/pages/pro/.content/pricing.yml
@@ -17,7 +17,10 @@ pricing:
    title: Figma Kit Pro
    description: Get all Nuxt UI Pro components in a Figma kit to design your next application before coding. Everything you need, from wire-framing to high-fidelity web integration.
    orientation: horizontal
-    price: $149 - $349
+    price: $149
+    # discount: $119
+    billing_period: one-time payment
+    billing_cycle: plus local taxes
    terms: Solo & Team licenses available.
    features:
      - 1700+ components & variants from Nuxt UI & UI Pro
@@ -36,6 +39,7 @@ pricing:
    - title: Solo
      description: Tailored for indie hackers, freelancers and solo founders.
      price: $249
+      # discount: $199
      billing_period: one-time payment
      billing_cycle: plus local taxes
      features:
@@ -50,6 +54,7 @@ pricing:
    - title: Startup
      description: Best suited for small teams, startups and agencies.
      price: $499
+      # discount: $399
      billing_period: one-time payment
      billing_cycle: plus local taxes
      features:
@@ -65,6 +70,7 @@ pricing:
    - title: Organization
      description: Ideal for larger teams and organizations.
      price: $999
+      # discount: $799
      billing_period: one-time payment
      billing_cycle: plus local taxes
      features:
@@ -174,7 +180,7 @@ testimonials:
    - quote: "Nuxt UI Pro is my preferred choice for everything, from a POC to a web platform. It's ready to use out-of-the-box and assists me in crafting pixel-perfect UIs. It saves me a significant amount of time while remaining highly customizable. Give it a try, and you won't be let down."
      user:
        name: 'Estéban Soubiran'
-        description:  'Web developer and UnJS member'
+        description:  'Software engineer'
        to: 'https://x.com/soubiran_'
        target: _blank
        avatar:
--- a/docs/app/pages/pro/activate.vue
+++ b/docs/app/pages/pro/activate.vue
@@ -71,7 +71,8 @@ onMounted(() => {
 <template>
  <UMain>
    <UPageHero headline="License Activation" :title="title" :description="description" :ui="{ container: 'relative overflow-hidden', wrapper: 'lg:px-12', description: 'text-pretty' }">
-      <StarsBg />
+      <LazyStarsBg />
+
      <div aria-hidden="true" class="hidden lg:block absolute z-[-1] border-x border-(--ui-border) inset-0 mx-4 sm:mx-6 lg:mx-8" />

      <div class="px-4 py-10 lg:border border-(--ui-border) bg-(--ui-bg)">
--- a/docs/app/pages/pro/index.vue
+++ b/docs/app/pages/pro/index.vue
@@ -32,7 +32,7 @@ useSeoMeta({
        <MDC :value="page.hero.description" tag="span" unwrap="p" cache-key="pro-hero-description" />
      </template>

-      <StarsBg />
+      <LazyStarsBg />

      <Motion as-child :initial="{ height: 0 }" :animate="{ height: 'auto' }" :transition="{ delay: 0.2, duration: 1 }">
        <div aria-hidden="true" class="hidden lg:block absolute z-[-1] border-x border-(--ui-border) inset-0 mx-4 sm:mx-6 lg:mx-8" />
@@ -82,11 +82,11 @@ useSeoMeta({
      }"
    >
      <template #description>
-        <Motion :initial="{ opacity: 0, transform: 'translateY(10px)' }" :in-view="{ opacity: 1, transform: 'translateY(0)' }" :in-view-options="{ once: true }" :transition="{ delay: 0.2 }">
+        <Motion :initial="{ opacity: 0, transform: 'translateY(10px)' }" :while-in-view="{ opacity: 1, transform: 'translateY(0)' }" :in-view-options="{ once: true }" :transition="{ delay: 0.2 }">
          <MDC :value="page.testimonial.quote" tag="span" unwrap="p" class="before:content-[open-quote] after:content-[close-quote]" cache-key="pro-testimonial-quote" />
        </Motion>
      </template>
-      <Motion :initial="{ opacity: 0, transform: 'translateY(10px)' }" :in-view="{ opacity: 1, transform: 'translateY(0)' }" :in-view-options="{ once: true }" :transition="{ delay: 0.3 }">
+      <Motion :initial="{ opacity: 0, transform: 'translateY(10px)' }" :while-in-view="{ opacity: 1, transform: 'translateY(0)' }" :in-view-options="{ once: true }" :transition="{ delay: 0.3 }">
        <UUser
          v-bind="page.testimonial.user"
          class="justify-center"
@@ -103,7 +103,7 @@ useSeoMeta({
      }"
      class="border-t border-(--ui-border)"
    >
-      <Motion as-child :initial="{ height: 0 }" :in-view="{ height: 'auto' }" :transition="{ delay: 0.4, duration: 1 }">
+      <Motion as-child :initial="{ height: 0 }" :while-in-view="{ height: 'auto' }" :transition="{ delay: 0.4, duration: 1 }">
        <div aria-hidden="true" class="hidden lg:block absolute z-[-1] border-x border-(--ui-border) inset-0 mx-4 sm:mx-6 lg:mx-8" />
      </Motion>
    </UPageSection>
@@ -196,7 +196,7 @@ useSeoMeta({
      class="overflow-hidden"
      orientation="horizontal"
    >
-      <StarsBg />
+      <LazyStarsBg />

      <video
        class="rounded-[var(--ui-radius)] z-10"
--- a/docs/app/pages/pro/pricing.vue
+++ b/docs/app/pages/pro/pricing.vue
@@ -27,8 +27,10 @@ useSeoMeta({
        <MDC :value="page.pricing.title" unwrap="p" cache-key="pro-pricing-title" />
      </template>

-      <StarsBg />
+      <LazyStarsBg />
+
      <div aria-hidden="true" class="hidden lg:block absolute z-[-1] border-x border-(--ui-border) inset-0 mx-4 sm:mx-6 lg:mx-8" />
+
      <div class="flex flex-col bg-(--ui-bg) gap-8 lg:gap-0">
        <UPricingPlan
          v-bind="page.pricing.freePlan"
@@ -42,6 +44,7 @@ useSeoMeta({
            :title="plan.title"
            :description="plan.description"
            :price="plan.price"
+            :discount="plan.discount"
            :billing-period="plan.billing_period"
            :billing-cycle="plan.billing_cycle"
            :variant="plan.highlight ? 'soft' : 'outline'"
@@ -53,6 +56,8 @@ useSeoMeta({
        <UPricingPlan
          v-bind="page.pricing.figma"
          variant="naked"
+          :billing-period="page.pricing.figma.billing_period"
+          :billing-cycle="page.pricing.figma.billing_cycle"
          class="lg:rounded-none border lg:border-y-0 border-(--ui-border)"
        >
          <template #features>
--- a/docs/app/pages/pro/templates.vue
+++ b/docs/app/pages/pro/templates.vue
@@ -18,7 +18,8 @@ useSeoMeta({
 <template>
  <div class="relative">
    <UPageHero :links="page.links" :ui="{ container: 'relative' }">
-      <StarsBg />
+      <LazyStarsBg />
+
      <div aria-hidden="true" class="hidden lg:block absolute z-[-1] border-x border-(--ui-border) inset-0 mx-4 sm:mx-6 lg:mx-8" />

      <template #title>
@@ -50,7 +51,7 @@ useSeoMeta({
      </template>

      <div class="lg:border-x border-(--ui-border) h-full flex items-center lg:bg-(--ui-bg-muted)/20">
-        <Motion class="flex-1" :initial="{ opacity: 0, transform: 'translateY(10px)' }" :in-view="{ opacity: 1, transform: 'translateY(0px)' }" :in-view-options="{ once: true }" :transition="{ duration: 0.5, delay: 0.2 }">
+        <Motion class="flex-1" :initial="{ opacity: 0, transform: 'translateY(10px)' }" :while-in-view="{ opacity: 1, transform: 'translateY(0px)' }" :in-view-options="{ once: true }" :transition="{ duration: 0.5, delay: 0.2 }">
          <UColorModeImage
            v-if="template.thumbnail"
            v-bind="template.thumbnail"
--- a/docs/app/pages/roadmap.vue
+++ b/docs/app/pages/roadmap.vue
@@ -3,7 +3,7 @@ const title = 'Roadmap'
 const description = 'Discover our Volta board for @nuxt/ui development status.'

 useSeoMeta({
-  titleTemplate: '%s - Nuxt UI v3',
+  titleTemplate: '%s - Nuxt UI',
  title,
  ogTitle: 'Nuxt UI Roadmap',
  description
--- a/docs/app/plugins/theme.ts
+++ b/docs/app/plugins/theme.ts
@@ -41,16 +41,16 @@ export default defineNuxtPlugin({
              const primaryColor = localStorage.getItem('nuxt-ui-primary');
              if (primaryColor !== 'black') {
                html = html.replace(
-                  /(--ui-color-primary-\\d{2,3}:\\s*var\\()--color-${appConfig.ui.colors.primary}-(\\d{2,3}\\))/g,
-                  \`$1--color-\${primaryColor}-$2\`
+                  /(--ui-color-primary-\\d{2,3}:\\s*var\\(--color-)${appConfig.ui.colors.primary}(-\\d{2,3}.*?\\))/g,
+                  \`$1\${primaryColor}$2\`
                );
              }
            }
            if (localStorage.getItem('nuxt-ui-neutral')) {
              let neutralColor = localStorage.getItem('nuxt-ui-neutral');
              html = html.replace(
-                /(--ui-color-neutral-\\d{2,3}:\\s*var\\()--color-${appConfig.ui.colors.neutral}-(\\d{2,3}\\))/g,
-                \`$1--color-\${neutralColor === 'neutral' ? 'old-neutral' : neutralColor}-$2\`
+                /(--ui-color-neutral-\\d{2,3}:\\s*var\\(--color-)${appConfig.ui.colors.neutral}(-\\d{2,3}.*?\\))/g,
+                \`$1\${neutralColor === 'neutral' ? 'old-neutral' : neutralColor}$2\`
              );
            }

--- a/docs/content/1.getting-started/1.index.md
+++ b/docs/content/1.getting-started/1.index.md
@@ -1,14 +1,9 @@
 ---
-navigation.title: Introduction
-title: Nuxt UI v3
-description: 'A comprehensive, Nuxt-integrated UI library providing a rich set of fully-styled, accessible and highly customizable components for building modern web applications.'
+title: Introduction
+description: 'Nuxt UI harnesses the combined strengths of Reka UI, Tailwind CSS, and Tailwind Variants to offer developers an unparalleled set of tools for creating sophisticated, accessible, and highly performant user interfaces.'
 navigation.icon: i-lucide-house
 ---

-We're thrilled to introduce this major update to our UI library, bringing significant improvements and powerful new features. Nuxt UI v3 represents a leap forward in creating robust, accessible, and highly customizable user interfaces for Nuxt applications.
-
-## What's New in v3?
-
 <iframe width="100%" height="100%" src="https://www.youtube-nocookie.com/embed/_eQxomah-nA?si=pDSzchUBDKb2NQu7" title="YouTube video player" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share" referrerpolicy="strict-origin-when-cross-origin" allowfullscreen style="aspect-ratio: 16/9;" class="rounded-[calc(var(--ui-radius)*1.5)]"></iframe>

 ### Reka UI
@@ -24,7 +19,7 @@ This transition empowers Nuxt UI to become a more comprehensive and flexible UI

 ### Tailwind CSS v4

-Nuxt UI v3 integrates the latest Tailwind CSS v4, bringing significant improvements:
+Nuxt UI integrates the latest Tailwind CSS v4, bringing significant improvements:

 - **Built for performance**: Full builds in the new engine are up to 5x faster, and incremental builds are over 100x faster — and measured in microseconds.
 - **Unified toolchain**: Built-in import handling, vendor prefixing, and syntax transforms, with no additional tooling required.
@@ -47,7 +42,7 @@ This integration unifies the styling of components, ensuring consistency and cod

 ### TypeScript Integration

-Nuxt UI v3 offers significantly improved TypeScript integration, providing a superior developer experience:
+Nuxt UI offers significantly improved TypeScript integration, providing a superior developer experience:

 - **Enhanced Auto-completion**:
  - Full auto-completion for component props based on your theme
@@ -112,11 +107,7 @@ Key points to consider:
 ## FAQ

 ::accordion
-  ::accordion-item{label="What are the main considerations when upgrading to Nuxt UI v3?"}
-  The transition to v3 involves significant changes, including new component structures, updated theming approaches, and revised TypeScript definitions. We recommend a careful, incremental upgrade process, starting with thorough testing in a development environment.
-  ::
-
-  ::accordion-item{label="Is Nuxt UI v3 compatible with standalone Vue projects?"}
+  ::accordion-item{label="Is Nuxt UI compatible with standalone Vue projects?"}
  Nuxt UI is now compatible with Vue! You can follow the [installation guide](/getting-started/installation/vue) to get started.
  ::

@@ -124,23 +115,19 @@ Key points to consider:
  We've also rebuilt Nuxt UI Pro from scratch as v3 to match Nuxt UI version. The license you bought or will buy is valid for both Nuxt UI Pro v1 and v3, this is a **free update**. You can follow the [installation guide](/getting-started/installation/pro/nuxt) to get started.
  ::

-  ::accordion-item{label="Will Nuxt UI v3 work with other CSS frameworks like UnoCSS?"}
-  Nuxt UI v3 is currently designed to work exclusively with Tailwind CSS. While there's interest in UnoCSS support, implementing it would require significant changes to the theme structure due to differences in class naming conventions. As a result, we don't have plans to add UnoCSS support in v3.
+  ::accordion-item{label="Will Nuxt UI work with other CSS frameworks like UnoCSS?"}
+  Nuxt UI is currently designed to work exclusively with Tailwind CSS. While there's interest in UnoCSS support, implementing it would require significant changes to the theme structure due to differences in class naming conventions. As a result, we don't have plans to add UnoCSS support.
  ::

-  ::accordion-item{label="How does Nuxt UI v3 handle accessibility?"}
-  Nuxt UI v3 enhances accessibility through Reka UI integration. This provides automatic ARIA attributes, keyboard navigation support, intelligent focus management, and screen reader announcements. While offering a strong foundation, proper implementation and testing in your specific use case remains crucial for full accessibility compliance. For more detailed information, refer to [Reka UI's accessibility documentation](https://reka-ui.com/docs/overview/accessibility).
+  ::accordion-item{label="How does Nuxt UI handle accessibility?"}
+  Nuxt UI enhances accessibility through Reka UI integration. This provides automatic ARIA attributes, keyboard navigation support, intelligent focus management, and screen reader announcements. While offering a strong foundation, proper implementation and testing in your specific use case remains crucial for full accessibility compliance. For more detailed information, refer to [Reka UI's accessibility documentation](https://reka-ui.com/docs/overview/accessibility).
  ::

-  ::accordion-item{label="What is the testing approach for Nuxt UI v3?"}
-  Nuxt UI v3 ensures reliability with 1000+ Vitest tests, covering core functionality and accessibility. This robust testing suite supports the library's stability and serves as a reference for developers.
-  ::
-
-  ::accordion-item{label="Is this version stable and suitable for production use?"}
-  Nuxt UI v3 is now in beta and is stable enough to be used in production. We now recommend using v3 over v2. We welcome feedback from users to help improve the library further. Feel free to report any issues you encounter on our [GitHub repository](https://github.com/nuxt/ui/issues).
+  ::accordion-item{label="What is the testing approach for Nuxt UI?"}
+  Nuxt UI ensures reliability with 1000+ Vitest tests, covering core functionality and accessibility. This robust testing suite supports the library's stability and serves as a reference for developers.
  ::
 ::

 :hr

-We're excited about the possibilities Nuxt UI v3 brings to your projects. Explore our documentation to learn more about new features, components, and best practices for building powerful, accessible user interfaces with Nuxt UI v3.
+We're excited about the possibilities Nuxt UI v3 brings to your projects. Explore our documentation to learn more about new features, components, and best practices for building powerful, accessible user interfaces.
--- a/docs/content/1.getting-started/2.installation/1.nuxt.md
+++ b/docs/content/1.getting-started/2.installation/1.nuxt.md
@@ -20,24 +20,24 @@ Looking for the **Vue** version?

 ::steps{level="4"}

-#### Install the Nuxt UI v3 beta package
+#### Install the Nuxt UI package

 ::code-group{sync="pm"}

 ```bash [pnpm]
-pnpm add @nuxt/ui@next
+pnpm add @nuxt/ui
 ```

 ```bash [yarn]
-yarn add @nuxt/ui@next
+yarn add @nuxt/ui
 ```

 ```bash [npm]
-npm install @nuxt/ui@next
+npm install @nuxt/ui
 ```

 ```bash [bun]
-bun add @nuxt/ui@next
+bun add @nuxt/ui
 ```

 ::
@@ -59,7 +59,7 @@ export default defineNuxtConfig({
 ::code-group

 ```css [app/assets/css/main.css]
-@import "tailwindcss" theme(static);
+@import "tailwindcss";
@import "@nuxt/ui";
 ```

@@ -72,10 +72,6 @@ export default defineNuxtConfig({

 ::

-::warning
-The `theme(static)` is required since [`tailwindcss@4.0.8`](https://github.com/tailwindlabs/tailwindcss/releases/tag/v4.0.8) introduced a breaking change to only expose used CSS variables.
-::
-
 ::callout{icon="i-simple-icons-visualstudiocode"}
 It's recommended to install the [Tailwind CSS IntelliSense](https://marketplace.visualstudio.com/items?itemName=bradlc.vscode-tailwindcss) extension for VSCode and add the following settings:

@@ -85,7 +81,11 @@ It's recommended to install the [Tailwind CSS IntelliSense](https://marketplace.
 },
 "editor.quickSuggestions": {
  "strings": "on"
-}
+},
+"tailwindCSS.classAttributes": ["class", "ui"],
+"tailwindCSS.experimental.classRegex": [
+  ["ui:\\s*{([^)]*)\\s*}", "(?:'|\"|`)([^']*)(?:'|\"|`)"]
+]
 ```

 ::
@@ -108,12 +108,12 @@ The `App` component provides global configurations and is required for **Toast**

 ### Use our Nuxt Starter

-Start your project using the [nuxt/starter#ui3](https://github.com/nuxt/starter/tree/ui3) template with Nuxt UI v3 pre-configured.
+Start your project using the [nuxt/starter#ui](https://github.com/nuxt/starter/tree/ui) template with Nuxt UI pre-configured.

 Create a new project locally by running the following command:

 ```bash [Terminal]
-npx nuxi init -t ui3 <my-app>
+npx nuxi init -t ui <my-app>
 ```

 ::note
@@ -225,15 +225,15 @@ This option adds the `transition-colors` class on components with hover or activ

 ## Continuous Releases

-Nuxt UI v3 uses [pkg.pr.new](https://github.com/stackblitz-labs/pkg.pr.new) for continuous preview releases, providing developers with instant access to the latest features and bug fixes without waiting for official releases.
+Nuxt UI uses [pkg.pr.new](https://github.com/stackblitz-labs/pkg.pr.new) for continuous preview releases, providing developers with instant access to the latest features and bug fixes without waiting for official releases.

 Automatic preview releases are created for all commits and PRs to the `v3` branch. Use them by replacing your package version with the specific commit hash or PR number.

 ```diff [package.json]
 {
  "dependencies": {
-   "@nuxt/ui": "^3.0.0-beta.3",
-+   "@nuxt/ui": "https://pkg.pr.new/@nuxt/ui@83725ac",
+-   "@nuxt/ui": "^3.0.0",
+   "@nuxt/ui": "https://pkg.pr.new/@nuxt/ui@4c96909",
  }
 }
 ```
--- a/docs/content/1.getting-started/2.installation/2.vue.md
+++ b/docs/content/1.getting-started/2.installation/2.vue.md
@@ -20,24 +20,24 @@ Looking for the **Nuxt** version?

 ::steps{level="4"}

-#### Install the Nuxt UI v3 beta package
+#### Install the Nuxt UI package

 ::code-group{sync="pm"}

 ```bash [pnpm]
-pnpm add @nuxt/ui@next
+pnpm add @nuxt/ui
 ```

 ```bash [yarn]
-yarn add @nuxt/ui@next
+yarn add @nuxt/ui
 ```

 ```bash [npm]
-npm install @nuxt/ui@next
+npm install @nuxt/ui
 ```

 ```bash [bun]
-bun add @nuxt/ui@next
+bun add @nuxt/ui
 ```

 ::
@@ -102,14 +102,10 @@ app.mount('#app')
 #### Import Tailwind CSS and Nuxt UI in your CSS

 ```css [assets/main.css]
-@import "tailwindcss" theme(static);
+@import "tailwindcss";
@import "@nuxt/ui";
 ```

-::warning
-The `theme(static)` is required since [`tailwindcss@4.0.8`](https://github.com/tailwindlabs/tailwindcss/releases/tag/v4.0.8) introduced a breaking change to only expose used CSS variables.
-::
-
 ::tip
 Import the CSS file in your `main.ts`.

@@ -145,7 +141,11 @@ It's recommended to install the [Tailwind CSS IntelliSense](https://marketplace.
 },
 "editor.quickSuggestions": {
  "strings": "on"
-}
+},
+"tailwindCSS.classAttributes": ["class", "ui"],
+"tailwindCSS.experimental.classRegex": [
+  ["ui:\\s*{([^)]*)\\s*}", "(?:'|\"|`)([^']*)(?:'|\"|`)"]
+]
 ```

 ::
@@ -168,7 +168,7 @@ The `App` component provides global configurations and is required for **Toast**

 ### Use our Vue starter

-Start your project using the [nuxtlabs/nuxt-ui-vue-starter](https://github.com/nuxtlabs/nuxt-ui-vue-starter) template with Nuxt UI v3 pre-configured.
+Start your project using the [nuxtlabs/nuxt-ui-vue-starter](https://github.com/nuxtlabs/nuxt-ui-vue-starter) template with Nuxt UI pre-configured.

 Create a new project locally by running the following command:

@@ -313,15 +313,15 @@ This option adds the `transition-colors` class on components with hover or activ

 ## Continuous Releases

-Nuxt UI v3 uses [pkg.pr.new](https://github.com/stackblitz-labs/pkg.pr.new) for continuous preview releases, providing developers with instant access to the latest features and bug fixes without waiting for official releases.
+Nuxt UI uses [pkg.pr.new](https://github.com/stackblitz-labs/pkg.pr.new) for continuous preview releases, providing developers with instant access to the latest features and bug fixes without waiting for official releases.

 Automatic preview releases are created for all commits and PRs to the `v3` branch. Use them by replacing your package version with the specific commit hash or PR number.

 ```diff [package.json]
 {
  "dependencies": {
-   "@nuxt/ui": "^3.0.0-beta.3",
-+   "@nuxt/ui": "https://pkg.pr.new/@nuxt/ui@83725ac",
+-   "@nuxt/ui": "^3.0.0",
+   "@nuxt/ui": "https://pkg.pr.new/@nuxt/ui@4c96909",
  }
 }
 ```
--- a/docs/content/1.getting-started/2.migration.md
+++ b/docs/content/1.getting-started/2.migration.md
@@ -28,7 +28,7 @@ For a detailed walkthrough of all changes, refer to the official **Tailwind CSS
 ::code-group

 ```css [app/assets/css/main.css]
-@import "tailwindcss" theme(static);
+@import "tailwindcss";
 ```

 ```ts [nuxt.config.ts]
@@ -56,19 +56,19 @@ npx @tailwindcss/upgrade
 ::::code-group{sync="pm"}

 ```bash [pnpm]
-pnpm add @nuxt/ui@next
+pnpm add @nuxt/ui
 ```

 ```bash [yarn]
-yarn add @nuxt/ui@next
+yarn add @nuxt/ui
 ```

 ```bash [npm]
-npm install @nuxt/ui@next
+npm install @nuxt/ui
 ```

 ```bash [bun]
-bun add @nuxt/ui@next
+bun add @nuxt/ui
 ```

 ::::
@@ -81,19 +81,19 @@ bun add @nuxt/ui@next
 ::::code-group{sync="pm"}

 ```bash [pnpm]
-pnpm add @nuxt/ui-pro@next
+pnpm add @nuxt/ui-pro
 ```

 ```bash [yarn]
-yarn add @nuxt/ui-pro@next
+yarn add @nuxt/ui-pro
 ```

 ```bash [npm]
-npm install @nuxt/ui-pro@next
+npm install @nuxt/ui-pro
 ```

 ```bash [bun]
-bun add @nuxt/ui-pro@next
+bun add @nuxt/ui-pro
 ```

 ::::
@@ -109,7 +109,7 @@ bun add @nuxt/ui-pro@next
 :::div

 ```css [app/assets/css/main.css]{2}
-@import "tailwindcss" theme(static);
+@import "tailwindcss";
@import "@nuxt/ui";
 ```

@@ -119,7 +119,7 @@ bun add @nuxt/ui-pro@next
 :::div

 ```css [app/assets/css/main.css]{2}
-@import "tailwindcss" theme(static);
+@import "tailwindcss";
@import "@nuxt/ui-pro";
 ```

@@ -130,7 +130,7 @@ bun add @nuxt/ui-pro@next
 #ui

 :::div
-5. Wrap you app with the [App](/components/app) component:
+5. Wrap your app with the [App](/components/app) component:
 :::

 #ui-pro
@@ -145,7 +145,7 @@ export default defineNuxtConfig({
 })
 ```

-6. Wrap you app with the [App](/components/app) component:
+6. Wrap your app with the [App](/components/app) component:
 :::

 ::
@@ -458,8 +458,8 @@ const toast = useToast()
 Some important differences:
 - The `useOverlay` composable is now used to create overlay instances
 - Overlays that are opened, can be awaited for their result
- Overlays can no longer be closed using `modal.close()` or `slideover.close()`, rather, they close automatically: either when a `closed` event is fired explicitly from the opened component OR when the overlay closes itself (clicking on backdrop, pressing the ESC key, etc)
- To capture the return value in the parent component you must explictly emit a `closed` event with the desired value
+- Overlays can no longer be close using `modal.close()` or `slideover.close()`, rather, they close automatically: either when a `close` event is fired explicitly from the opened component OR when the overlay closes itself (clicking on backdrop, pressing the ESC key, etc)
+- To capture the return value in the parent component you must explictly emit a `close` event with the desired value


 ```diff
@@ -496,7 +496,7 @@ const count = ref(0)
 </script>
 ```

-Closing a modal is now done through the `closed` event. The `modal.open` method now returns a promise that resolves to the result of the modal whenever the modal is closed:
+Closing a modal is now done through the `close` event. The `modal.open` method now returns a promise that resolves to the result of the modal whenever the modal is close:

 ```diff
 <script setup lang="ts">
--- a/docs/content/1.getting-started/3.theme.md
+++ b/docs/content/1.getting-started/3.theme.md
@@ -6,7 +6,7 @@ navigation.icon: i-lucide-swatch-book

 ## Tailwind CSS

-Nuxt UI v3 uses Tailwind CSS v4, you can read the official [upgrade guide](https://tailwindcss.com/docs/upgrade-guide#changes-from-v3) to learn about all the breaking changes.
+Nuxt UI uses Tailwind CSS v4, you can read the official [upgrade guide](https://tailwindcss.com/docs/upgrade-guide#changes-from-v3) to learn about all the breaking changes.

 ### `@theme`

@@ -17,7 +17,7 @@ Tailwind CSS v4 takes a CSS-first configuration approach, you now customize your
 :::div

 ```css [app/assets/css/main.css]
-@import "tailwindcss" theme(static);
+@import "tailwindcss";
@import "@nuxt/ui";

@theme static {
@@ -45,7 +45,7 @@ Tailwind CSS v4 takes a CSS-first configuration approach, you now customize your
 :::div

 ```css [app/assets/css/main.css]
-@import "tailwindcss" theme(static);
+@import "tailwindcss";
@import "@nuxt/ui-pro";

@theme static {
@@ -87,7 +87,7 @@ This can be useful when writing Tailwind CSS classes in markdown files with [`@n
 :::div

 ```css [app/assets/css/main.css]
-@import "tailwindcss" theme(static);
+@import "tailwindcss";
@import "@nuxt/ui";

@source "../../../content";
@@ -101,7 +101,7 @@ This can be useful when writing Tailwind CSS classes in markdown files with [`@n
 :::div

 ```css [app/assets/css/main.css]
-@import "tailwindcss" theme(static);
+@import "tailwindcss";
@import "@nuxt/ui-pro";

@source "../../../content";
@@ -380,7 +380,7 @@ You can change which shade is used for each color on light and dark mode:
 :::div{class="*:!mb-0 *:!mt-2.5"}

 ```css [app/assets/css/main.css]
-@import "tailwindcss" theme(static);
+@import "tailwindcss";
@import "@nuxt/ui";

 :root {
@@ -398,7 +398,7 @@ You can change which shade is used for each color on light and dark mode:
 :::div{class="*:!mb-0 *:!mt-2.5"}

 ```css [app/assets/css/main.css]
-@import "tailwindcss" theme(static);
+@import "tailwindcss";
@import "@nuxt/ui-pro";

 :root {
@@ -434,7 +434,7 @@ You cannot set `primary: 'black'`{lang="ts-type"} in your [`vite.config.ts`](#co
 :::div{class="*:!mb-0 *:!mt-2.5"}

 ```css [app/assets/css/main.css]
-@import "tailwindcss" theme(static);
+@import "tailwindcss";
@import "@nuxt/ui";

 :root {
@@ -452,7 +452,7 @@ You cannot set `primary: 'black'`{lang="ts-type"} in your [`vite.config.ts`](#co
 :::div{class="*:!mb-0 *:!mt-2.5"}

 ```css [app/assets/css/main.css]
-@import "tailwindcss" theme(static);
+@import "tailwindcss";
@import "@nuxt/ui-pro";

 :root {
@@ -564,7 +564,7 @@ You can customize these CSS variables to tailor the appearance of your applicati
 :::div{class="*:!mb-0 *:!mt-2.5"}

 ```css [app/assets/css/main.css]
-@import "tailwindcss" theme(static);
+@import "tailwindcss";
@import "@nuxt/ui";

 :root {
@@ -584,7 +584,7 @@ You can customize these CSS variables to tailor the appearance of your applicati
 :::div{class="*:!mb-0 *:!mt-2.5"}

 ```css [app/assets/css/main.css]
-@import "tailwindcss" theme(static);
+@import "tailwindcss";
@import "@nuxt/ui-pro";

 :root {
@@ -625,7 +625,7 @@ You can customize the default radius value using the default Tailwind CSS variab
 :::div{class="*:!mb-0 *:!mt-2.5"}

 ```css [app/assets/css/main.css]
-@import "tailwindcss" theme(static);
+@import "tailwindcss";
@import "@nuxt/ui";

 :root {
@@ -639,7 +639,7 @@ You can customize the default radius value using the default Tailwind CSS variab
 :::div{class="*:!mb-0 *:!mt-2.5"}

 ```css [app/assets/css/main.css]
-@import "tailwindcss" theme(static);
+@import "tailwindcss";
@import "@nuxt/ui-pro";

 :root {
@@ -670,7 +670,7 @@ You can customize the default container width using the default Tailwind CSS var
 :::div{class="*:!mb-0 *:!mt-2.5"}

 ```css [app/assets/css/main.css]
-@import "tailwindcss" theme(static);
+@import "tailwindcss";
@import "@nuxt/ui";

@theme {
@@ -688,7 +688,7 @@ You can customize the default container width using the default Tailwind CSS var
 :::div{class="*:!mb-0 *:!mt-2.5"}

 ```css [app/assets/css/main.css]
-@import "tailwindcss" theme(static);
+@import "tailwindcss";
@import "@nuxt/ui-pro";

@theme {
--- a/docs/content/1.getting-started/5.fonts.md
+++ b/docs/content/1.getting-started/5.fonts.md
@@ -19,7 +19,7 @@ Nuxt UI automatically registers the [`@nuxt/fonts`](https://github.com/nuxt/font
 :::div

 ```css [app/assets/css/main.css]
-@import "tailwindcss" theme(static);
+@import "tailwindcss";
@import "@nuxt/ui";

@theme {
@@ -33,7 +33,7 @@ Nuxt UI automatically registers the [`@nuxt/fonts`](https://github.com/nuxt/font
 :::div

 ```css [app/assets/css/main.css]
-@import "tailwindcss" theme(static);
+@import "tailwindcss";
@import "@nuxt/ui-pro";

@theme {
--- a/docs/content/1.getting-started/contribution.md
+++ b/docs/content/1.getting-started/contribution.md
@@ -1,13 +1,13 @@
 ---
 title: Contribution Guide
-description: 'A comprehensive guide on contributing to Nuxt UI v3, including project structure, development workflow, and best practices.'
+description: 'A comprehensive guide on contributing to Nuxt UI, including project structure, development workflow, and best practices.'
 navigation: false
 ---

 Nuxt UI thrives thanks to its incredible community ❤️. We welcome all contributions through bug reports, pull requests, and feedback to help make this library even better.

 ::caution
-Before reporting a bug or requesting a feature, make sure that you have read through our [documentation](https://ui3.nuxt.dev/) and existing [issues](https://github.com/nuxt/ui/issues?q=is%3Aissue%20is%3Aopen%20sort%3Aupdated-desc%20label%3Av3).
+Before reporting a bug or requesting a feature, 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).
 ::

 ## Project Structure
--- a/docs/content/3.components/drawer.md
+++ b/docs/content/3.components/drawer.md
@@ -166,6 +166,31 @@ slots:
 :placeholder{class="h-48 m-4"}
 ::

+### Handle Only
+
+Use the `handle-only` prop to only allow the Drawer to be dragged by the handle.
+
+::component-code
+---
+prettier: true
+props:
+  handleOnly: true
+slots:
+  default: |
+
+    <UButton label="Open" color="neutral" variant="subtle" trailing-icon="i-lucide-chevron-up" />
+
+  content: |
+
+    <Placeholder class="h-48 m-4" />
+---
+
+:u-button{label="Open" color="neutral" variant="subtle" trailing-icon="i-lucide-chevron-up"}
+
+#content
+:placeholder{class="h-48 m-4"}
+::
+
 ### Overlay

 Use the `overlay` prop to control whether the Drawer has an overlay or not. Defaults to `true`.
@@ -193,13 +218,14 @@ slots:

 ### Scale background

-Use the `should-scale-background` prop to scale the background when the Drawer is open, creating a visual depth effect.
+Use the `should-scale-background` prop to scale the background when the Drawer is open, creating a visual depth effect. You can set the `set-background-color-on-scale` prop to `false` to prevent changing the background color.

 ::component-code
 ---
 prettier: true
 props:
  shouldScaleBackground: true
+  setBackgroundColorOnScale: true
 slots:
  default: |

@@ -217,12 +243,12 @@ slots:
 ::

 ::warning
-Make sure to add the `vaul-drawer-wrapper` directive to a parent element of your app to make this work.
+Make sure to add the `data-vaul-drawer-wrapper` directive to a parent element of your app to make this work.

 ```vue [app.vue]
 <template>
  <UApp>
-    <div class="bg-(--ui-bg)" vaul-drawer-wrapper>
+    <div class="bg-(--ui-bg)" data-vaul-drawer-wrapper>
      <NuxtLayout>
        <NuxtPage />
      </NuxtLayout>
@@ -235,7 +261,7 @@ Make sure to add the `vaul-drawer-wrapper` directive to a parent element of your
 export default defineNuxtConfig({
  app: {
    rootAttrs: {
-      'vaul-drawer-wrapper': '',
+      'data-vaul-drawer-wrapper': '',
      'class': 'bg-(--ui-bg)'
    }
  }
--- a/docs/content/3.components/form.md
+++ b/docs/content/3.components/form.md
@@ -9,7 +9,7 @@ links:

 ## Usage

-Use the Form component to validate form data using schema libraries such as [Valibot](https://github.com/fabian-hiller/valibot), [Zod](https://github.com/colinhacks/zod), [Yup](https://github.com/jquense/yup), [Joi](https://github.com/hapijs/joi), [Superstruct](https://github.com/ianstormtaylor/superstruct) or your own validation logic.
+Use the Form component to validate form data using validation libraries such as [Valibot](https://github.com/fabian-hiller/valibot), [Zod](https://github.com/colinhacks/zod), [Yup](https://github.com/jquense/yup), [Joi](https://github.com/hapijs/joi), [Superstruct](https://github.com/ianstormtaylor/superstruct) or your own validation logic.

 It works with the [FormField](/components/form-field) component to display error messages around form elements automatically.

@@ -18,7 +18,7 @@ It works with the [FormField](/components/form-field) component to display error
 It requires two props:

 - `state` - a reactive object holding the form's state.
- `schema` - a schema object from a validation library like [Valibot](https://github.com/fabian-hiller/valibot), [Zod](https://github.com/colinhacks/zod), [Yup](https://github.com/jquense/yup), [Joi](https://github.com/hapijs/joi) or [Superstruct](https://github.com/ianstormtaylor/superstruct).
+- `schema` - any [Standard Schema](https://standardschema.dev/) or a schema from [Yup](https://github.com/jquense/yup), [Joi](https://github.com/hapijs/joi) or [Superstruct](https://github.com/ianstormtaylor/superstruct).

 ::warning
 **No validation library is included** by default, ensure you **install the one you need**.
--- a/docs/content/3.components/tree.md
+++ b/docs/content/3.components/tree.md
@@ -8,7 +8,6 @@ links:
  - label: GitHub
    icon: i-simple-icons-github
    to: https://github.com/nuxt/ui/tree/v3/src/runtime/components/Tree.vue
-navigation.badge: New
 ---

 ## Usage
--- a/docs/nuxt.config.ts
+++ b/docs/nuxt.config.ts
@@ -34,7 +34,7 @@ export default defineNuxtConfig({
  },
  $production: {
    site: {
-      url: 'https://ui3.nuxt.dev'
+      url: 'https://ui.nuxt.com'
    }
  },

@@ -55,8 +55,7 @@ export default defineNuxtConfig({
      }]
    },
    rootAttrs: {
-      // @ts-expect-error - vaul-drawer-wrapper is not typed
-      'vaul-drawer-wrapper': '',
+      'data-vaul-drawer-wrapper': '',
      'class': 'bg-(--ui-bg)'
    }
  },
@@ -91,7 +90,56 @@ export default defineNuxtConfig({
    '/getting-started/icons': { redirect: '/getting-started/icons/nuxt', prerender: false },
    '/getting-started/color-mode': { redirect: '/getting-started/color-mode/nuxt', prerender: false },
    '/getting-started/i18n': { redirect: '/getting-started/i18n/nuxt', prerender: false },
-    '/composables': { redirect: '/composables/define-shortcuts', prerender: false }
+    '/composables': { redirect: '/composables/define-shortcuts', prerender: false },
+    // v2 redirects
+    '/getting-started/theming': { redirect: { to: '/getting-started/theme', statusCode: 301 }, prerender: false },
+    '/pro/getting-started/**': { redirect: { to: '/getting-started/installation/pro/nuxt', statusCode: 301 }, prerender: false },
+    '/playground': { redirect: { to: '/getting-started/installation/nuxt', statusCode: 301 }, prerender: false },
+    '/pro/guide/**': { redirect: { to: '/getting-started/installation/pro/nuxt', statusCode: 301 }, prerender: false },
+    '/pro/prose/**': { redirect: { to: '/getting-started/typography#vue-components', statusCode: 301 }, prerender: false },
+    '/components/range': { redirect: { to: '/components/slider', statusCode: 301 }, prerender: false },
+    '/components/date-picker': { redirect: { to: '/components/calendar#as-a-datepicker', statusCode: 301 }, prerender: false },
+    '/components/dropdown': { redirect: { to: '/components/dropdown-menu', statusCode: 301 }, prerender: false },
+    '/components/notification': { redirect: { to: '/components/toast', statusCode: 301 }, prerender: false },
+    '/components/vertical-navigation': { redirect: { to: '/components/navigation-menu', statusCode: 301 }, prerender: false },
+    '/components/horizontal-navigation': { redirect: { to: '/components/navigation-menu', statusCode: 301 }, prerender: false },
+    '/components/divider': { redirect: { to: '/components/separator', statusCode: 301 }, prerender: false },
+    '/components/toggle': { redirect: { to: '/components/switch', statusCode: 301 }, prerender: false },
+    '/components/form-group': { redirect: { to: '/components/form-field', statusCode: 301 }, prerender: false },
+    '/pro/components': { redirect: { to: '/components', statusCode: 301 }, prerender: false },
+    '/pro/components/docs/docs-search': { redirect: { to: '/components/content-search', statusCode: 301 }, prerender: false },
+    '/pro/components/docs-search': { redirect: { to: '/components/content-search', statusCode: 301 }, prerender: false },
+    '/pro/components/landing-hero': { redirect: { to: '/components/page-hero', statusCode: 301 }, prerender: false },
+    '/pro/components/landing-cta': { redirect: { to: '/components/page-cta', statusCode: 301 }, prerender: false },
+    '/pro/components/landing-card': { redirect: { to: '/components/page-card', statusCode: 301 }, prerender: false },
+    '/pro/components/landing-section': { redirect: { to: '/components/page-section', statusCode: 301 }, prerender: false },
+    '/pro/components/landing-faq': { redirect: { to: '/components/page-accordion', statusCode: 301 }, prerender: false },
+    '/pro/components/landing-grid': { redirect: { to: '/components/page-grid', statusCode: 301 }, prerender: false },
+    '/pro/components/landing-logos': { redirect: { to: '/components/page-logos', statusCode: 301 }, prerender: false },
+    '/pro/components/landing-testimonial': { redirect: { to: '/components/page-card#as-a-testimonial', statusCode: 301 }, prerender: false },
+    '/pro/components/blog-list': { redirect: { to: '/components/blog-posts', statusCode: 301 }, prerender: false },
+    '/pro/components/color-mode-toggle': { redirect: { to: '/components/color-mode-switch', statusCode: 301 }, prerender: false },
+    '/pro/components/dashboard-card': { redirect: { to: '/components/page-card', statusCode: 301 }, prerender: false },
+    '/pro/components/dashboard-layout': { redirect: { to: '/components/dashboard-group', statusCode: 301 }, prerender: false },
+    '/pro/components/dashboard-modal': { redirect: { to: '/components/modal', statusCode: 301 }, prerender: false },
+    '/pro/components/dashboard-navbar-toggle': { redirect: { to: '/components/dashboard-sidebar-toggle', statusCode: 301 }, prerender: false },
+    '/pro/components/dashboard-page': { redirect: { to: '/components/dashboard-panel', statusCode: 301 }, prerender: false },
+    '/pro/components/dashboard-panel-content': { redirect: { to: '/components/dashboard-panel', statusCode: 301 }, prerender: false },
+    '/pro/components/dashboard-panel-handle': { redirect: { to: '/components/dashboard-resize-handle', statusCode: 301 }, prerender: false },
+    '/pro/components/dashboard-section': { redirect: { to: '/components/page-card', statusCode: 301 }, prerender: false },
+    '/pro/components/dashboard-sidebar-links': { redirect: { to: '/components/navigation-menu', statusCode: 301 }, prerender: false },
+    '/pro/components/dashboard-slideover': { redirect: { to: '/components/slideover', statusCode: 301 }, prerender: false },
+    '/pro/components/navigation-accordion': { redirect: { to: '/components/content-navigation', statusCode: 301 }, prerender: false },
+    '/pro/components/navigation-links': { redirect: { to: '/components/content-navigation', statusCode: 301 }, prerender: false },
+    '/pro/components/navigation-tree': { redirect: { to: '/components/content-navigation', statusCode: 301 }, prerender: false },
+    '/pro/components/page-error': { redirect: { to: '/components/error', statusCode: 301 }, prerender: false },
+    '/pro/components/footer-links': { redirect: { to: '/components/navigation-menu', statusCode: 301 }, prerender: false },
+    '/pro/components/header-links': { redirect: { to: '/components/navigation-menu', statusCode: 301 }, prerender: false },
+    '/pro/components/pricing-card': { redirect: { to: '/components/pricing-plan', statusCode: 301 }, prerender: false },
+    '/pro/components/pricing-grid': { redirect: { to: '/components/pricing-plans', statusCode: 301 }, prerender: false },
+    '/pro/components/pricing-switch': { redirect: { to: '/components/switch', statusCode: 301 }, prerender: false },
+    '/pro/components/**': { redirect: { to: '/components/**', statusCode: 301 }, prerender: false },
+    '/releases': { redirect: 'https://github.com/nuxt/ui/releases', prerender: false }
  },

  future: {
@@ -105,9 +153,10 @@ export default defineNuxtConfig({
      routes: [
        '/getting-started',
        '/api/countries.json',
-        '/api/locales.json'
+        '/api/locales.json',
        // '/api/releases.json',
        // '/api/pulls.json'
+        '/404.html'
      ],
      crawlLinks: true,
      autoSubfolderIndex: false
@@ -128,7 +177,16 @@ export default defineNuxtConfig({
  vite: {
    plugins: [
      yaml()
-    ]
+    ],
+    server: {
+      fs: {
+        allow: process.env.NUXT_UI_PRO_PATH ? [resolve(process.env.NUXT_UI_PRO_PATH)] : undefined
+      }
+    },
+    optimizeDeps: {
+      // prevents reloading page when navigating between components
+      include: ['@internationalized/date', '@vueuse/shared', '@vueuse/integrations/useFuse', '@tanstack/vue-table', 'reka-ui', 'reka-ui/namespaced', 'embla-carousel-vue', 'embla-carousel-autoplay', 'embla-carousel-auto-scroll', 'embla-carousel-auto-height', 'embla-carousel-class-names', 'embla-carousel-fade', 'embla-carousel-wheel-gestures', 'colortranslator', 'tailwindcss/colors', 'tailwind-variants', 'ufo', 'zod', 'vaul-vue', 'scule', 'motion-v', 'json5', 'ohash']
+    }
  },

  componentMeta: {
@@ -170,12 +228,12 @@ export default defineNuxtConfig({
  },

  llms: {
-    domain: 'https://ui3.nuxt.dev',
-    title: 'Nuxt UI v3',
+    domain: 'https://ui.nuxt.com',
+    title: 'Nuxt UI',
    description: 'A comprehensive, Nuxt-integrated UI library providing a rich set of fully-styled, accessible and highly customizable components for building modern web applications.',
    full: {
-      title: 'Nuxt UI v3 Full Documentation',
-      description: 'This is the full documentation for Nuxt UI v3. It includes all the Markdown files written with the MDC syntax.'
+      title: 'Nuxt UI Full Documentation',
+      description: 'This is the full documentation for Nuxt UI. It includes all the Markdown files written with the MDC syntax.'
    },
    sections: [
      {
--- a/docs/package.json
+++ b/docs/package.json
@@ -4,34 +4,33 @@
  "type": "module",
  "dependencies": {
    "@iconify-json/logos": "^1.2.4",
-    "@iconify-json/lucide": "^1.2.29",
-    "@iconify-json/simple-icons": "^1.2.28",
-    "@iconify-json/vscode-icons": "^1.2.16",
-    "@nuxt/content": "^3.3.0",
-    "@nuxt/image": "^1.9.0",
+    "@iconify-json/lucide": "^1.2.32",
+    "@iconify-json/simple-icons": "^1.2.29",
+    "@iconify-json/vscode-icons": "^1.2.17",
+    "@nuxt/content": "^3.4.0",
+    "@nuxt/image": "^1.10.0",
    "@nuxt/ui": "latest",
-    "@nuxt/ui-pro": "https://pkg.pr.new/@nuxt/ui-pro@a2768ed",
+    "@nuxt/ui-pro": "https://pkg.pr.new/@nuxt/ui-pro@d96a086",
    "@nuxthub/core": "^0.8.18",
    "@nuxtjs/plausible": "^1.2.0",
    "@octokit/rest": "^21.1.1",
    "@rollup/plugin-yaml": "^4.1.2",
    "@vueuse/nuxt": "^13.0.0",
    "joi": "^17.13.3",
-    "motion": "^12.5.0",
-    "motion-v": "0.11.3",
-    "nuxt": "^3.16.0",
+    "motion-v": "0.13.1",
+    "nuxt": "^3.16.1",
    "nuxt-component-meta": "^0.10.0",
-    "nuxt-llms": "^0.1.0",
-    "nuxt-og-image": "^5.0.2",
+    "nuxt-llms": "^0.1.1",
+    "nuxt-og-image": "^5.0.5",
    "prettier": "^3.5.3",
    "shiki-transformer-color-highlight": "^1.0.0",
    "superstruct": "^2.0.2",
    "ufo": "^1.5.4",
-    "valibot": "^0.42.1",
+    "valibot": "^1.0.0",
    "yup": "^1.6.1",
    "zod": "^3.24.2"
  },
  "devDependencies": {
-    "wrangler": "^3.114.0"
+    "wrangler": "^3.114.2"
  }
 }
--- a/docs/public/pro/ad.png
+++ b/docs/public/pro/ad.png
--- a/docs/server/api/countries.json.get.ts
+++ b/docs/server/api/countries.json.get.ts
@@ -188,6 +188,7 @@ const countries: Country[] = [
  { name: 'United Arab Emirates', code: 'AE', emoji: '🇦🇪' },
  { name: 'United Kingdom', code: 'GB', emoji: '🇬🇧' },
  { name: 'United States', code: 'US', emoji: '🇺🇸' },
+  { name: 'Pakistan', code: 'PK', emoji: '🇵🇰' },
  { name: 'Uruguay', code: 'UY', emoji: '🇺🇾' },
  { name: 'Uzbekistan', code: 'UZ', emoji: '🇺🇿' },
  { name: 'Vanuatu', code: 'VU', emoji: '🇻🇺' },
--- a/package.json
+++ b/package.json
@@ -1,13 +1,13 @@
 {
  "name": "@nuxt/ui",
  "description": "A UI Library for Modern Web Apps, powered by Vue & Tailwind CSS.",
-  "version": "3.0.0-beta.4",
-  "packageManager": "pnpm@10.6.2",
+  "version": "3.0.1",
+  "packageManager": "pnpm@10.6.5",
  "repository": {
    "type": "git",
    "url": "git+https://github.com/nuxt/ui.git"
  },
-  "homepage": "https://ui3.nuxt.dev",
+  "homepage": "https://ui.nuxt.com",
  "type": "module",
  "license": "MIT",
  "exports": {
@@ -63,8 +63,9 @@
    "build": "nuxt-module-build build",
    "prepack": "pnpm build",
    "dev": "DEV=true nuxi dev playground",
-    "dev:vue": "DEV=true vite playground-vue",
    "dev:build": "nuxi build playground",
+    "dev:vue": "DEV=true pnpm --filter playground-vue dev",
+    "dev:vue:build": "vite build playground-vue",
    "dev:prepare": "nuxt-module-build build --stub && nuxt-module-build prepare && nuxi prepare playground && nuxi prepare docs && vite build playground-vue",
    "docs": "DEV=true nuxi dev docs",
    "docs:build": "NODE_OPTIONS='--max-old-space-size=8192' nuxi build docs",
@@ -74,8 +75,7 @@
    "typecheck": "vue-tsc --noEmit && nuxi typecheck playground && nuxi typecheck docs && cd playground-vue && vue-tsc --noEmit",
    "test": "vitest",
    "test:vue": "vitest -c vitest.vue.config.ts",
-    "test:vue:build": "vite build playground-vue",
-    "release": "release-it --preRelease=beta --npm.tag=next"
+    "release": "release-it"
  },
  "dependencies": {
    "@iconify/vue": "^4.3.0",
@@ -83,17 +83,18 @@
    "@internationalized/number": "^3.6.0",
    "@nuxt/fonts": "^0.11.0",
    "@nuxt/icon": "^1.11.0",
-    "@nuxt/kit": "^3.16.0",
-    "@nuxt/schema": "^3.16.0",
+    "@nuxt/kit": "^3.16.1",
+    "@nuxt/schema": "^3.16.1",
    "@nuxtjs/color-mode": "^3.5.2",
-    "@tailwindcss/postcss": "^4.0.13",
-    "@tailwindcss/vite": "^4.0.13",
+    "@standard-schema/spec": "^1.0.0",
+    "@tailwindcss/postcss": "^4.0.15",
+    "@tailwindcss/vite": "^4.0.15",
    "@tanstack/vue-table": "^8.21.2",
-    "@unhead/vue": "^2.0.0-rc.10",
+    "@unhead/vue": "^2.0.0",
    "@vueuse/core": "^13.0.0",
    "@vueuse/integrations": "^13.0.0",
    "colortranslator": "^4.1.0",
-    "consola": "^3.4.0",
+    "consola": "^3.4.2",
    "defu": "^6.1.4",
    "embla-carousel-auto-height": "^8.5.2",
    "embla-carousel-auto-scroll": "^8.5.2",
@@ -108,15 +109,15 @@
    "mlly": "^1.7.4",
    "ohash": "^2.0.11",
    "pathe": "^2.0.3",
-    "reka-ui": "^2.0.2",
+    "reka-ui": "^2.1.1",
    "scule": "^1.3.0",
    "tailwind-variants": "^1.0.0",
-    "tailwindcss": "^4.0.13",
+    "tailwindcss": "^4.0.15",
    "tinyglobby": "^0.2.12",
-    "unplugin": "^2.2.0",
+    "unplugin": "^2.2.2",
    "unplugin-auto-import": "^19.1.1",
    "unplugin-vue-components": "^28.4.1",
-    "vaul-vue": "^0.3.0",
+    "vaul-vue": "^0.4.1",
    "vue": "^3.5.13",
    "vue-router": "^4.5.0"
  },
@@ -125,24 +126,40 @@
    "@nuxt/module-builder": "^0.8.4",
    "@nuxt/test-utils": "^3.17.2",
    "@release-it/conventional-changelog": "^10.0.0",
-    "@standard-schema/spec": "^1.0.0",
    "@vue/test-utils": "^2.4.6",
    "embla-carousel": "^8.5.2",
-    "eslint": "^9.22.0",
+    "eslint": "^9.23.0",
    "happy-dom": "^17.4.4",
-    "joi": "^17.13.3",
-    "nuxt": "^3.16.0",
+    "nuxt": "^3.16.1",
    "release-it": "^18.1.2",
-    "superstruct": "^2.0.2",
-    "valibot": "^0.42.1",
-    "vitest": "^3.0.8",
+    "vitest": "^3.0.9",
    "vitest-environment-nuxt": "^1.0.1",
-    "vue-tsc": "^2.2.0",
-    "yup": "^1.6.1",
-    "zod": "^3.24.2"
+    "vue-tsc": "^2.2.0"
  },
  "peerDependencies": {
-    "typescript": "^5.6.3"
+    "joi": "^17.13.0",
+    "superstruct": "^2.0.0",
+    "typescript": "^5.6.3",
+    "valibot": "^1.0.0",
+    "yup": "^1.6.0",
+    "zod": "^3.24.0"
+  },
+  "peerDependenciesMeta": {
+    "joi": {
+      "optional": true
+    },
+    "valibot": {
+      "optional": true
+    },
+    "superstruct": {
+      "optional": true
+    },
+    "yup": {
+      "optional": true
+    },
+    "zod": {
+      "optional": true
+    }
  },
  "resolutions": {
    "@nuxt/ui": "workspace:*",
@@ -150,7 +167,7 @@
    "debug": "4.3.7",
    "rollup": "4.34.9",
    "typescript": "5.6.3",
-    "unplugin": "^2.2.0",
+    "unplugin": "^2.2.2",
    "vue-tsc": "2.2.0"
  },
  "pnpm": {
--- a/playground-vue/package.json
+++ b/playground-vue/package.json
@@ -12,12 +12,14 @@
  "dependencies": {
    "@nuxt/ui": "latest",
    "vue": "^3.5.13",
-    "vue-router": "^4.5.0"
+    "vue-router": "^4.5.0",
+    "zod": "^3.24.2"
  },
  "devDependencies": {
-    "@vitejs/plugin-vue": "^5.2.1",
+    "@compodium/vue": "https://pkg.pr.new/romhml/compodium/@compodium/vue@18f083d",
+    "@vitejs/plugin-vue": "^5.2.3",
    "typescript": "^5.6.3",
-    "vite": "^6.2.1",
+    "vite": "^6.2.3",
    "vue-tsc": "^2.2.0"
  }
 }
--- a/playground-vue/src/app.vue
+++ b/playground-vue/src/app.vue
@@ -84,7 +84,7 @@ defineShortcuts({

 <template>
  <UApp :toaster="(appConfig.toaster as any)">
-    <div class="h-screen w-screen overflow-hidden flex min-h-0 bg-(--ui-bg)" vaul-drawer-wrapper>
+    <div class="h-screen w-screen overflow-hidden flex min-h-0 bg-(--ui-bg)" data-vaul-drawer-wrapper>
      <UNavigationMenu :items="items" orientation="vertical" class="hidden lg:flex border-e border-(--ui-border) overflow-y-auto w-48 p-4" />
      <UNavigationMenu :items="items" orientation="horizontal" class="lg:hidden border-b border-(--ui-border) [&>div]:min-w-min overflow-x-auto" />

--- a/playground-vue/src/assets/css/main.css
+++ b/playground-vue/src/assets/css/main.css
@@ -1,4 +1,4 @@
-@import "tailwindcss" theme(static) source("../../../..");
+@import "tailwindcss" source("../../../..");
@import "@nuxt/ui";

@theme static {
--- a/playground-vue/src/main.ts
+++ b/playground-vue/src/main.ts
@@ -10,7 +10,7 @@ const pages = import.meta.glob('../../playground/app/pages/**/*.vue')
 const components = import.meta.glob('../../playground/app/components/**/*.vue')

 const routes = Object.keys(pages).map((path) => {
-  const name = path.match(/\.\.\/\.\.\/playground\/app\/pages(.*)\.vue$/)![1].toLowerCase()
+  const name = path.match(/\.\.\/\.\.\/playground\/app\/pages(.*)\.vue$/)!.[1].toLowerCase()
  return {
    path: name === '/index' ? '/' : name,
    component: pages[path]
--- a/playground-vue/vite.config.ts
+++ b/playground-vue/vite.config.ts
@@ -1,6 +1,7 @@
 import { defineConfig } from 'vite'
 import vue from '@vitejs/plugin-vue'

+import { compodium } from '@compodium/vue'
 import ui from '../src/vite'

 // https://vitejs.dev/config/
@@ -25,10 +26,24 @@ export default defineConfig({
      components: {
        dirs: ['../playground/app/components']
      }
+    }),
+    compodium({
+      dir: '../playground/compodium',
+      includeLibraryCollections: false,
+
+      componentDirs: [
+        { path: '../src/runtime/components', prefix: 'U', pathPrefix: false }
+      ],
+      extras: {
+        colors: {
+          neutral: 'slate'
+        }
+      }
    })
+
  ],
  optimizeDeps: {
    // prevents reloading page when navigating between components
-    include: ['reka-ui/namespaced', 'vaul-vue', 'embla-carousel-vue', 'embla-carousel-autoplay', 'embla-carousel-auto-scroll', 'embla-carousel-auto-height', 'embla-carousel-class-names', 'embla-carousel-fade', 'embla-carousel-wheel-gestures']
+    include: ['@unhead/vue/client', '@iconify/vue', '@internationalized/date', '@vueuse/shared', '@vueuse/integrations/useFuse', '@tanstack/vue-table', 'reka-ui', 'reka-ui/namespaced', 'embla-carousel-vue', 'embla-carousel-autoplay', 'embla-carousel-auto-scroll', 'embla-carousel-auto-height', 'embla-carousel-class-names', 'embla-carousel-fade', 'embla-carousel-wheel-gestures', 'colortranslator', 'tailwindcss/colors', 'tailwind-variants', 'ufo', 'zod', 'vaul-vue']
  }
 })
--- a/playground/app/app.vue
+++ b/playground/app/app.vue
@@ -1,123 +1,5 @@
-<script setup lang="ts">
-import { splitByCase, upperFirst } from 'scule'
-import { useColorMode } from '#imports'
-
-const router = useRouter()
-const appConfig = useAppConfig()
-const colorMode = useColorMode()
-
-const isDark = computed({
-  get() {
-    return colorMode.value === 'dark'
-  },
-  set() {
-    colorMode.preference = colorMode.value === 'dark' ? 'light' : 'dark'
-  }
-})
-
-const components = [
-  'accordion',
-  'alert',
-  'avatar',
-  'badge',
-  'breadcrumb',
-  'button',
-  'button-group',
-  'card',
-  'calendar',
-  'carousel',
-  'checkbox',
-  'chip',
-  'collapsible',
-  'color-picker',
-  'context-menu',
-  'command-palette',
-  'drawer',
-  'dropdown-menu',
-  'form',
-  'form-field',
-  'input',
-  'input-menu',
-  'input-number',
-  'kbd',
-  'link',
-  'modal',
-  'navigation-menu',
-  'pagination',
-  'pin-input',
-  'popover',
-  'progress',
-  'radio-group',
-  'select',
-  'select-menu',
-  'separator',
-  'shortcuts',
-  'skeleton',
-  'slideover',
-  'slider',
-  'stepper',
-  'switch',
-  'tabs',
-  'table',
-  'textarea',
-  'toast',
-  'tooltip',
-  'tree'
-]
-
-const items = components.map(component => ({ label: upperName(component), to: `/components/${component}` }))
-
-function upperName(name: string) {
-  return splitByCase(name).map(p => upperFirst(p)).join('')
-}
-
-const isCommandPaletteOpen = ref(false)
-
-function onSelect(item: any) {
-  router.push(item.to)
-}
-
-defineShortcuts({
-  meta_k: () => isCommandPaletteOpen.value = true
-})
-</script>
-
 <template>
-  <template v-if="!$route.path.startsWith('/__nuxt_ui__')">
-    <UApp :toaster="appConfig.toaster">
-      <div class="h-screen w-screen overflow-hidden flex flex-col lg:flex-row min-h-0 bg-(--ui-bg)" vaul-drawer-wrapper>
-        <UNavigationMenu :items="items" orientation="vertical" class="hidden lg:flex border-e border-(--ui-border) overflow-y-auto w-48 p-4" />
-        <UNavigationMenu :items="items" orientation="horizontal" class="lg:hidden border-b border-(--ui-border) [&>div]:min-w-min overflow-x-auto" />
-
-        <div class="fixed top-15 lg:top-3 right-4 flex items-center gap-2">
-          <ClientOnly v-if="!colorMode?.forced">
-            <UButton
-              :icon="isDark ? 'i-lucide-moon' : 'i-lucide-sun'"
-              color="neutral"
-              variant="ghost"
-              :aria-label="`Switch to ${isDark ? 'light' : 'dark'} mode`"
-              @click="isDark = !isDark"
-            />
-
-            <template #fallback>
-              <div class="size-8" />
-            </template>
-          </ClientOnly>
-        </div>
-
-        <div class="flex-1 flex flex-col items-center justify-around overflow-y-auto w-full py-14 px-4">
-          <NuxtPage />
-        </div>
-
-        <UModal v-model:open="isCommandPaletteOpen" class="sm:h-96">
-          <template #content>
-            <UCommandPalette placeholder="Search a component..." :groups="[{ id: 'items', items }]" :fuse="{ resultLimit: 100 }" @update:model-value="onSelect" @update:open="value => isCommandPaletteOpen = value" />
-          </template>
-        </UModal>
-      </div>
-    </UApp>
-  </template>
-  <template v-else>
+  <UApp>
    <NuxtPage />
-  </template>
+  </UApp>
 </template>
--- a/playground/app/assets/css/main.css
+++ b/playground/app/assets/css/main.css
@@ -1,4 +1,4 @@
-@import "tailwindcss" theme(static) source("../../../..");
+@import "tailwindcss" source("../../../..");
@import "@nuxt/ui";

@theme static {
--- a/playground/app/pages/components.vue
+++ b/playground/app/pages/components.vue
@@ -0,0 +1,118 @@
+<script setup lang="ts">
+import { splitByCase, upperFirst } from 'scule'
+import { useColorMode } from '#imports'
+
+const router = useRouter()
+const appConfig = useAppConfig()
+const colorMode = useColorMode()
+
+const isDark = computed({
+  get() {
+    return colorMode.value === 'dark'
+  },
+  set() {
+    colorMode.preference = colorMode.value === 'dark' ? 'light' : 'dark'
+  }
+})
+
+const components = [
+  'accordion',
+  'alert',
+  'avatar',
+  'badge',
+  'breadcrumb',
+  'button',
+  'button-group',
+  'card',
+  'calendar',
+  'carousel',
+  'checkbox',
+  'chip',
+  'collapsible',
+  'color-picker',
+  'context-menu',
+  'command-palette',
+  'drawer',
+  'dropdown-menu',
+  'form',
+  'form-field',
+  'input',
+  'input-menu',
+  'input-number',
+  'kbd',
+  'link',
+  'modal',
+  'navigation-menu',
+  'pagination',
+  'pin-input',
+  'popover',
+  'progress',
+  'radio-group',
+  'select',
+  'select-menu',
+  'separator',
+  'shortcuts',
+  'skeleton',
+  'slideover',
+  'slider',
+  'stepper',
+  'switch',
+  'tabs',
+  'table',
+  'textarea',
+  'toast',
+  'tooltip',
+  'tree'
+]
+
+const items = components.map(component => ({ label: upperName(component), to: `/components/${component}` }))
+
+function upperName(name: string) {
+  return splitByCase(name).map(p => upperFirst(p)).join('')
+}
+
+const isCommandPaletteOpen = ref(false)
+
+function onSelect(item: any) {
+  router.push(item.to)
+}
+
+defineShortcuts({
+  meta_k: () => isCommandPaletteOpen.value = true
+})
+</script>
+
+<template>
+  <UApp :toaster="appConfig.toaster">
+    <div class="h-screen w-screen overflow-hidden flex flex-col lg:flex-row min-h-0 bg-(--ui-bg)" data-vaul-drawer-wrapper>
+      <UNavigationMenu :items="items" orientation="vertical" class="hidden lg:flex border-e border-(--ui-border) overflow-y-auto w-48 p-4" />
+      <UNavigationMenu :items="items" orientation="horizontal" class="lg:hidden border-b border-(--ui-border) [&>div]:min-w-min overflow-x-auto" />
+
+      <div class="fixed top-15 lg:top-3 right-4 flex items-center gap-2">
+        <ClientOnly v-if="!colorMode?.forced">
+          <UButton
+            :icon="isDark ? 'i-lucide-moon' : 'i-lucide-sun'"
+            color="neutral"
+            variant="ghost"
+            :aria-label="`Switch to ${isDark ? 'light' : 'dark'} mode`"
+            @click="isDark = !isDark"
+          />
+
+          <template #fallback>
+            <div class="size-8" />
+          </template>
+        </ClientOnly>
+      </div>
+
+      <div class="flex-1 flex flex-col items-center justify-around overflow-y-auto w-full py-14 px-4">
+        <NuxtPage />
+      </div>
+
+      <UModal v-model:open="isCommandPaletteOpen" class="sm:h-96">
+        <template #content>
+          <UCommandPalette placeholder="Search a component..." :groups="[{ id: 'items', items }]" :fuse="{ resultLimit: 100 }" @update:model-value="onSelect" @update:open="value => isCommandPaletteOpen = value" />
+        </template>
+      </UModal>
+    </div>
+  </UApp>
+</template>
--- a/playground/app/pages/components/drawer.vue
+++ b/playground/app/pages/components/drawer.vue
@@ -20,7 +20,7 @@ const inset = ref(false)
      </template>
    </UDrawer>

-    <UDrawer should-scale-background title="Drawer with `should-scale-background`" description="You need to add the `vaul-drawer-wrapper` directive to your content to make it work." :inset="inset">
+    <UDrawer should-scale-background title="Drawer with `should-scale-background`" description="You need to add the `data-vaul-drawer-wrapper` directive to your content to make it work." :inset="inset">
      <UButton color="neutral" variant="outline" label="Open with scale" />

      <template #body>
@@ -28,7 +28,7 @@ const inset = ref(false)
      </template>
    </UDrawer>

-    <UDrawer title="Drawer with bottom direction" direction="bottom" :handle="false" :inset="inset">
+    <UDrawer title="Drawer with bottom direction" direction="bottom" :inset="inset">
      <UButton color="neutral" variant="outline" label="Open on bottom" />

      <template #body>
@@ -36,7 +36,7 @@ const inset = ref(false)
      </template>
    </UDrawer>

-    <UDrawer title="Drawer with left direction" direction="left" :handle="false" :inset="inset">
+    <UDrawer title="Drawer with left direction" direction="left" :inset="inset">
      <UButton color="neutral" variant="outline" label="Open on left" />

      <template #body>
@@ -44,7 +44,7 @@ const inset = ref(false)
      </template>
    </UDrawer>

-    <UDrawer title="Drawer with top direction" direction="top" :handle="false" :inset="inset">
+    <UDrawer title="Drawer with top direction" direction="top" :inset="inset">
      <UButton color="neutral" variant="outline" label="Open on top" />

      <template #body>
@@ -52,7 +52,7 @@ const inset = ref(false)
      </template>
    </UDrawer>

-    <UDrawer title="Drawer with right direction" direction="right" :handle="false" :inset="inset">
+    <UDrawer title="Drawer with right direction" direction="right" :inset="inset">
      <UButton color="neutral" variant="outline" label="Open on right" />

      <template #body>
--- a/playground/app/pages/index.vue
+++ b/playground/app/pages/index.vue
@@ -1,11 +1,20 @@
+<script setup lang="ts">
+
+</script>
+
 <template>
-  <div class="text-center">
-    <h1 class="font-semibold mb-1">
-      Playground
+  <div class="w-screen h-screen flex flex-col justify-center items-center gap-2">
+    <h1 class="text-3xl font-bold mb-1">
+      Nuxt UI Playground
    </h1>

    <div class="flex items-center justify-center gap-1">
-      <UKbd value="meta" /> <UKbd value="K" />
+      <UButton size="lg" to="/__compodium__/devtools" external>
+        Browse components
+      </UButton>
+      <UButton variant="outline" color="neutral" size="lg">
+        Documentation
+      </UButton>
    </div>
  </div>
 </template>
--- a/playground/compodium/examples/UAccordion/UAccordionExample.vue
+++ b/playground/compodium/examples/UAccordion/UAccordionExample.vue
@@ -0,0 +1,55 @@
+<script setup lang="ts">
+defineOptions({
+  inheritAttrs: false
+})
+
+extendCompodiumMeta({
+  defaultProps: {
+    items: [{
+      label: 'Getting Started',
+      icon: 'i-lucide-info',
+      content: 'Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed neque elit, tristique placerat feugiat ac, facilisis vitae arcu. Proin eget egestas augue. Praesent ut sem nec arcu pellentesque aliquet. Duis dapibus diam vel metus tempus vulputate.'
+    }, {
+      label: 'Installation',
+      icon: 'i-lucide-download',
+      disabled: true,
+      content: 'Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed neque elit, tristique placerat feugiat ac, facilisis vitae arcu. Proin eget egestas augue. Praesent ut sem nec arcu pellentesque aliquet. Duis dapibus diam vel metus tempus vulputate.'
+    }, {
+      label: 'Theming',
+      icon: 'i-lucide-pipette',
+      content: 'Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed neque elit, tristique placerat feugiat ac, facilisis vitae arcu. Proin eget egestas augue. Praesent ut sem nec arcu pellentesque aliquet. Duis dapibus diam vel metus tempus vulputate.'
+    }, {
+      label: 'Layouts',
+      icon: 'i-lucide-layout-dashboard',
+      content: 'Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed neque elit, tristique placerat feugiat ac, facilisis vitae arcu. Proin eget egestas augue. Praesent ut sem nec arcu pellentesque aliquet. Duis dapibus diam vel metus tempus vulputate.'
+    }, {
+      label: 'Components',
+      icon: 'i-lucide-layers-3',
+      content: 'Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed neque elit, tristique placerat feugiat ac, facilisis vitae arcu. Proin eget egestas augue. Praesent ut sem nec arcu pellentesque aliquet. Duis dapibus diam vel metus tempus vulputate.'
+    }, {
+      label: 'Utilities',
+      slot: 'custom' as const,
+      icon: 'i-lucide-wrench',
+      content: 'Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed neque elit, tristique placerat feugiat ac, facilisis vitae arcu. Proin eget egestas augue. Praesent ut sem nec arcu pellentesque aliquet. Duis dapibus diam vel metus tempus vulputate.'
+    }]
+  }
+})
+</script>
+
+<template>
+  <UCard :ui="{ body: 'p-0 sm:p-0' }">
+    <UAccordion v-bind="$attrs" class="w-96" :ui="{ trigger: 'px-3.5', body: 'px-3.5' }">
+      <template #body="{ item }">
+        <p class="text-(--ui-text-muted)">
+          {{ item.content }}
+        </p>
+      </template>
+
+      <template #custom-body="{ item }">
+        <p class="text-(--ui-text-muted)">
+          Custom: {{ item.content }}
+        </p>
+      </template>
+    </UAccordion>
+  </UCard>
+</template>
--- a/playground/compodium/examples/UAlert/UAlertExample.vue
+++ b/playground/compodium/examples/UAlert/UAlertExample.vue
@@ -0,0 +1,12 @@
+<script setup lang="ts">
+extendCompodiumMeta({
+  defaultProps: {
+    title: 'Heads up!',
+    description: 'You can change the primary color in your app config.'
+  }
+})
+</script>
+
+<template>
+  <UAlert />
+</template>
--- a/playground/compodium/examples/UAlert/UAlertExampleAction.vue
+++ b/playground/compodium/examples/UAlert/UAlertExampleAction.vue
@@ -0,0 +1,57 @@
+<script setup lang="ts">
+extendCompodiumMeta({
+  combo: ['variant'],
+  defaultProps: {
+    icon: 'i-lucide-terminal',
+    title: 'Heads up!',
+    description: 'You can change the primary color in your app config.',
+    close: true,
+    actions: [
+
+      {
+        label: 'Action',
+        onClick() {
+          console.log('Action clicked')
+        }
+      },
+      {
+        label: 'Another action',
+        color: 'warning',
+        onClick() {
+          console.log('Another action clicked')
+        }
+      },
+      {
+        label: 'One more action',
+        color: 'error',
+        onClick() {
+          console.log('One more action clicked')
+        }
+      },
+      {
+        label: 'And one more',
+        color: 'info',
+        icon: 'i-lucide-info',
+        onClick() {
+          console.log('And one more clicked')
+        }
+      },
+      {
+        label: 'Last one',
+        color: 'neutral',
+        icon: 'i-lucide-info',
+        onClick() {
+          console.log('Last one clicked')
+        }
+      }
+    ]
+  }
+})
+
+const multipleActions = (color: string) => [
+]
+</script>
+
+<template>
+  <UAlert />
+</template>
--- a/playground/compodium/examples/UAlert/UAlertExampleAvatar.vue
+++ b/playground/compodium/examples/UAlert/UAlertExampleAvatar.vue
@@ -0,0 +1,14 @@
+<script setup lang="ts">
+extendCompodiumMeta({
+  combo: ['variant'],
+  defaultProps: {
+    avatar: { src: 'https://github.com/benjamincanac.png' },
+    title: 'Heads up!',
+    description: 'You can change the primary color in your app config.'
+  }
+})
+</script>
+
+<template>
+  <UAlert />
+</template>
--- a/playground/compodium/examples/UAlert/UAlertExampleIcon.vue
+++ b/playground/compodium/examples/UAlert/UAlertExampleIcon.vue
@@ -0,0 +1,14 @@
+<script setup lang="ts">
+extendCompodiumMeta({
+  combo: ['variant'],
+  defaultProps: {
+    icon: 'i-lucide-terminal',
+    title: 'Heads up!',
+    description: 'You can change the primary color in your app config.'
+  }
+})
+</script>
+
+<template>
+  <UAlert />
+</template>
--- a/playground/compodium/examples/UAlert/UAlertExampleVariants.vue
+++ b/playground/compodium/examples/UAlert/UAlertExampleVariants.vue
@@ -0,0 +1,13 @@
+<script setup lang="ts">
+extendCompodiumMeta({
+  combo: ['variant', 'color'],
+  defaultProps: {
+    title: 'Heads up!',
+    description: 'You can change the primary color in your app config.'
+  }
+})
+</script>
+
+<template>
+  <UAlert />
+</template>
--- a/playground/compodium/examples/UAvatar/UAvatarExample.vue
+++ b/playground/compodium/examples/UAvatar/UAvatarExample.vue
@@ -0,0 +1,11 @@
+<script setup lang="ts">
+extendCompodiumMeta({
+  defaultProps: {
+    src: 'https://github.com/benjamincanac.png'
+  }
+})
+</script>
+
+<template>
+  <UAvatar />
+</template>
--- a/playground/compodium/examples/UAvatar/UAvatarExampleIcon.vue
+++ b/playground/compodium/examples/UAvatar/UAvatarExampleIcon.vue
@@ -0,0 +1,12 @@
+<script setup lang="ts">
+extendCompodiumMeta({
+  combo: ['size'],
+  defaultProps: {
+    icon: 'i-lucide-image'
+  }
+})
+</script>
+
+<template>
+  <UAvatar />
+</template>
--- a/playground/compodium/examples/UAvatar/UAvatarExampleLetters.vue
+++ b/playground/compodium/examples/UAvatar/UAvatarExampleLetters.vue
@@ -0,0 +1,12 @@
+<script setup lang="ts">
+extendCompodiumMeta({
+  combo: ['size'],
+  defaultProps: {
+    alt: 'Benjamin Canac'
+  }
+})
+</script>
+
+<template>
+  <UAvatar />
+</template>
--- a/playground/compodium/examples/UAvatar/UAvatarExampleSizes.vue
+++ b/playground/compodium/examples/UAvatar/UAvatarExampleSizes.vue
@@ -0,0 +1,12 @@
+<script setup lang="ts">
+extendCompodiumMeta({
+  combo: ['size'],
+  defaultProps: {
+    src: 'https://github.com/benjamincanac.png'
+  }
+})
+</script>
+
+<template>
+  <UAvatar />
+</template>
--- a/playground/compodium/examples/UAvatarGroup/UAvatarGroupExample.vue
+++ b/playground/compodium/examples/UAvatarGroup/UAvatarGroupExample.vue
@@ -0,0 +1,7 @@
+<template>
+  <UAvatarGroup>
+    <UAvatar src="https://github.com/benjamincanac.png" alt="Benjamin Canac" />
+    <UAvatar src="https://github.com/romhml.png" alt="Romain Hamel" />
+    <UAvatar src="https://github.com/noook.png" alt="Neil Richter" />
+  </UAvatarGroup>
+</template>
--- a/playground/compodium/examples/UAvatarGroup/UAvatarGroupExampleSizes.vue
+++ b/playground/compodium/examples/UAvatarGroup/UAvatarGroupExampleSizes.vue
@@ -0,0 +1,13 @@
+<script setup lang="ts">
+extendCompodiumMeta({
+  combo: ['size']
+})
+</script>
+
+<template>
+  <UAvatarGroup>
+    <UAvatar src="https://github.com/benjamincanac.png" alt="Benjamin Canac" />
+    <UAvatar src="https://github.com/romhml.png" alt="Romain Hamel" />
+    <UAvatar src="https://github.com/noook.png" alt="Neil Richter" />
+  </UAvatarGroup>
+</template>
--- a/playground/compodium/examples/UAvatarGroup/UAvatarGroupExampleWithChip.vue
+++ b/playground/compodium/examples/UAvatarGroup/UAvatarGroupExampleWithChip.vue
@@ -0,0 +1,15 @@
+<script setup lang="ts">
+extendCompodiumMeta({
+  combo: ['size']
+})
+</script>
+
+<template>
+  <UAvatarGroup>
+    <UChip inset text="1">
+      <UAvatar src="https://github.com/benjamincanac.png" alt="Benjamin Canac" />
+    </UChip>
+    <UAvatar src="https://github.com/romhml.png" alt="Romain Hamel" />
+    <UAvatar src="https://github.com/noook.png" alt="Neil Richter" />
+  </UAvatarGroup>
+</template>
--- a/playground/compodium/examples/UBadge/UBadgeExample.vue
+++ b/playground/compodium/examples/UBadge/UBadgeExample.vue
@@ -0,0 +1,11 @@
+<script setup lang="ts">
+extendCompodiumMeta({
+  defaultProps: {
+    label: 'Badge'
+  }
+})
+</script>
+
+<template>
+  <UBadge />
+</template>
--- a/playground/compodium/examples/UBadge/UBadgeExampleAvatar.vue
+++ b/playground/compodium/examples/UBadge/UBadgeExampleAvatar.vue
@@ -0,0 +1,13 @@
+<script setup lang="ts">
+extendCompodiumMeta({
+  combo: ['size', 'variant'],
+  defaultProps: {
+    label: 'Badge',
+    avatar: { src: 'https://github.com/benjamincanac.png' }
+  }
+})
+</script>
+
+<template>
+  <UBadge />
+</template>
--- a/playground/compodium/examples/UBadge/UBadgeExampleIcon.vue
+++ b/playground/compodium/examples/UBadge/UBadgeExampleIcon.vue
@@ -0,0 +1,13 @@
+<script setup lang="ts">
+extendCompodiumMeta({
+  combo: ['size', 'variant'],
+  defaultProps: {
+    label: 'Badge',
+    icon: 'i-lucide-rocket'
+  }
+})
+</script>
+
+<template>
+  <UBadge />
+</template>
--- a/playground/compodium/examples/UBadge/UBadgeExampleSizes.vue
+++ b/playground/compodium/examples/UBadge/UBadgeExampleSizes.vue
@@ -0,0 +1,13 @@
+<script setup lang="ts">
+extendCompodiumMeta({
+  combo: ['size', 'variant'],
+  defaultProps: {
+    label: 'Badge',
+    disabled: true
+  }
+})
+</script>
+
+<template>
+  <UBadge />
+</template>
--- a/playground/compodium/examples/UBadge/UBadgeExampleVariants.vue
+++ b/playground/compodium/examples/UBadge/UBadgeExampleVariants.vue
@@ -0,0 +1,12 @@
+<script setup lang="ts">
+extendCompodiumMeta({
+  combo: ['variant', 'color'],
+  defaultProps: {
+    label: 'Badge'
+  }
+})
+</script>
+
+<template>
+  <UBadge />
+</template>
--- a/playground/compodium/examples/UBreadcrumb/UBreadcrumbExample.vue
+++ b/playground/compodium/examples/UBreadcrumb/UBreadcrumbExample.vue
@@ -0,0 +1,30 @@
+<script setup lang="ts">
+extendCompodiumMeta({
+  defaultProps: {
+    items: [{
+      label: 'Home',
+      to: '/'
+    }, {
+      slot: 'dropdown' as const,
+      icon: 'i-lucide-ellipsis',
+      children: [{
+        label: 'Documentation'
+      }, {
+        label: 'Themes'
+      }, {
+        label: 'GitHub'
+      }]
+    }, {
+      label: 'Components',
+      disabled: true
+    }, {
+      label: 'Breadcrumb',
+      to: '/components/breadcrumb'
+    }]
+  }
+})
+</script>
+
+<template>
+  <UBreadcrumb />
+</template>
--- a/playground/compodium/examples/UButton/UButtonExample.vue
+++ b/playground/compodium/examples/UButton/UButtonExample.vue
@@ -0,0 +1,12 @@
+<script setup lang="ts">
+extendCompodiumMeta({
+  combo: ['variant', 'color'],
+  defaultProps: {
+    label: 'Click me!'
+  }
+})
+</script>
+
+<template>
+  <UButton />
+</template>
--- a/playground/compodium/examples/UButton/UButtonExampleAvatar.vue
+++ b/playground/compodium/examples/UButton/UButtonExampleAvatar.vue
@@ -0,0 +1,12 @@
+<script setup lang="ts">
+extendCompodiumMeta({
+  combo: ['size', 'variant'],
+  defaultProps: {
+    avatar: { src: 'https://github.com/benjamincanac.png' }
+  }
+})
+</script>
+
+<template>
+  <UButton />
+</template>
--- a/playground/compodium/examples/UButton/UButtonExampleIcon.vue
+++ b/playground/compodium/examples/UButton/UButtonExampleIcon.vue
@@ -0,0 +1,13 @@
+<script setup lang="ts">
+extendCompodiumMeta({
+  combo: ['size', 'variant'],
+  defaultProps: {
+    label: 'Click me!',
+    icon: 'i-lucide-rocket'
+  }
+})
+</script>
+
+<template>
+  <UButton />
+</template>
--- a/playground/compodium/examples/UButton/UButtonExampleLoading.vue
+++ b/playground/compodium/examples/UButton/UButtonExampleLoading.vue
@@ -0,0 +1,13 @@
+<script setup lang="ts">
+extendCompodiumMeta({
+  combo: ['size', 'variant'],
+  defaultProps: {
+    label: 'Click me!',
+    loading: true
+  }
+})
+</script>
+
+<template>
+  <UButton />
+</template>
--- a/playground/compodium/examples/UButton/UButtonExampleSizes.vue
+++ b/playground/compodium/examples/UButton/UButtonExampleSizes.vue
@@ -0,0 +1,12 @@
+<script setup lang="ts">
+extendCompodiumMeta({
+  combo: ['size', 'variant'],
+  defaultProps: {
+    label: 'Click me!'
+  }
+})
+</script>
+
+<template>
+  <UButton />
+</template>
--- a/playground/compodium/examples/UButtonGroup/UButtonGroupExample.vue
+++ b/playground/compodium/examples/UButtonGroup/UButtonGroupExample.vue
@@ -0,0 +1,55 @@
+<script setup lang="ts">
+defineOptions({
+  inheritAttrs: false
+})
+</script>
+
+<template>
+  <div class="flex flex-col gap-4">
+    <UButtonGroup v-bind="$attrs">
+      <UButton>Button</UButton>
+    </UButtonGroup>
+
+    <UButtonGroup v-bind="$attrs">
+      <UInput placeholder="Search..." />
+    </UButtonGroup>
+
+    <UButtonGroup v-bind="$attrs">
+      <UButton color="neutral" variant="outline">
+        Button
+      </UButton>
+      <UButton color="neutral" variant="subtle">
+        Button
+      </UButton>
+      <UButton color="neutral" variant="outline">
+        Button
+      </UButton>
+    </UButtonGroup>
+
+    <UButtonGroup v-bind="$attrs" orientation="vertical">
+      <UButton color="neutral" variant="outline">
+        Button
+      </UButton>
+      <UInput placeholder="Search..." />
+    </UButtonGroup>
+
+    <UButtonGroup v-bind="$attrs">
+      <UButton color="neutral" variant="outline">
+        Button
+      </UButton>
+      <UInput placeholder="Search..." />
+    </UButtonGroup>
+
+    <UButtonGroup v-bind="$attrs">
+      <UInput placeholder="Search..." />
+      <UButton color="neutral" variant="outline">
+        Button
+      </UButton>
+    </UButtonGroup>
+
+    <UButtonGroup v-bind="$attrs">
+      <UBadge color="neutral" variant="outline" size="lg" label="https://" />
+      <UInput color="neutral" variant="outline" placeholder="www.example.com" />
+    </UButtonGroup>
+  </div>
+</template>
--- a/playground/compodium/examples/UButtonGroup/UButtonGroupExampleSizes.vue
+++ b/playground/compodium/examples/UButtonGroup/UButtonGroupExampleSizes.vue
@@ -0,0 +1,14 @@
+<script setup lang="ts">
+extendCompodiumMeta({
+  combo: ['size', 'orientation']
+})
+</script>
+
+<template>
+  <UButtonGroup v-bind="$attrs">
+    <UButton color="neutral" variant="outline">
+      Button
+    </UButton>
+    <UInput placeholder="Search..." />
+  </UButtonGroup>
+</template>
--- a/playground/compodium/examples/UCard/UCardExample.vue
+++ b/playground/compodium/examples/UCard/UCardExample.vue
@@ -0,0 +1,13 @@
+<template>
+  <UCard class="w-96">
+    <template #header>
+      <Placeholder class="h-8" />
+    </template>
+
+    <Placeholder class="h-32" />
+
+    <template #footer>
+      <Placeholder class="h-8" />
+    </template>
+  </UCard>
+</template>
--- a/playground/compodium/examples/UCarousel/UCarouselExample.vue
+++ b/playground/compodium/examples/UCarousel/UCarouselExample.vue
@@ -0,0 +1,23 @@
+<script setup lang="ts">
+extendCompodiumMeta({
+  defaultProps: {
+    items: [
+      'https://picsum.photos/320/320?v=1',
+      'https://picsum.photos/320/320?v=2',
+      'https://picsum.photos/320/320?v=3'
+    ]
+  }
+})
+</script>
+
+<template>
+  <UCarousel
+    v-slot="{ item }"
+    class="w-xs h-xs"
+  >
+    <img
+      :src="item"
+      class="rounded-lg"
+    >
+  </UCarousel>
+</template>
--- a/playground/compodium/examples/UCheckbox/UCheckboxExample.vue
+++ b/playground/compodium/examples/UCheckbox/UCheckboxExample.vue
@@ -0,0 +1,13 @@
+<script setup lang="ts">
+extendCompodiumMeta({
+  combo: ['size', 'color'],
+  defaultProps: {
+    label: 'Click me!',
+    modelValue: true
+  }
+})
+</script>
+
+<template>
+  <UCheckbox />
+</template>
--- a/playground/compodium/examples/UCheckbox/UCheckboxExampleDescription.vue
+++ b/playground/compodium/examples/UCheckbox/UCheckboxExampleDescription.vue
@@ -0,0 +1,14 @@
+<script setup lang="ts">
+extendCompodiumMeta({
+  combo: ['size', 'color'],
+  defaultProps: {
+    label: 'Click me!',
+    description: 'This is a description',
+    modelValue: true
+  }
+})
+</script>
+
+<template>
+  <UCheckbox />
+</template>
--- a/playground/compodium/examples/UCheckbox/UCheckboxExampleIcon.vue
+++ b/playground/compodium/examples/UCheckbox/UCheckboxExampleIcon.vue
@@ -0,0 +1,14 @@
+<script setup lang="ts">
+extendCompodiumMeta({
+  combo: ['size', 'color'],
+  defaultProps: {
+    label: 'Click me!',
+    icon: 'lucide:heart',
+    modelValue: true
+  }
+})
+</script>
+
+<template>
+  <UCheckbox />
+</template>
--- a/playground/compodium/examples/UCheckbox/UCheckboxExampleIndeterminate.vue
+++ b/playground/compodium/examples/UCheckbox/UCheckboxExampleIndeterminate.vue
@@ -0,0 +1,14 @@
+<script setup lang="ts">
+extendCompodiumMeta({
+  combo: ['size', 'color'],
+  defaultProps: {
+    label: 'Click me!',
+    modelValue: 'indeterminate',
+    indeterminate: true
+  }
+})
+</script>
+
+<template>
+  <UCheckbox />
+</template>
--- a/playground/compodium/examples/UChip/UChipExample.vue
+++ b/playground/compodium/examples/UChip/UChipExample.vue
@@ -0,0 +1,5 @@
+<template>
+  <UChip>
+    <UButton icon="i-lucide-inbox" color="neutral" variant="subtle" />
+  </UChip>
+</template>
--- a/playground/compodium/examples/UChip/UChipExamplePositions.vue
+++ b/playground/compodium/examples/UChip/UChipExamplePositions.vue
@@ -0,0 +1,11 @@
+<script setup lang="ts">
+extendCompodiumMeta({
+  combo: ['position']
+})
+</script>
+
+<template>
+  <UChip>
+    <UButton icon="i-lucide-inbox" color="neutral" variant="subtle" />
+  </UChip>
+</template>
--- a/playground/compodium/examples/UChip/UChipExampleSizes.vue
+++ b/playground/compodium/examples/UChip/UChipExampleSizes.vue
@@ -0,0 +1,11 @@
+<script setup lang="ts">
+extendCompodiumMeta({
+  combo: ['size']
+})
+</script>
+
+<template>
+  <UChip>
+    <UAvatar src="https://github.com/benjamincanac.png" />
+  </UChip>
+</template>
--- a/playground/compodium/examples/UCollapsible/UCollapsibleExample.vue
+++ b/playground/compodium/examples/UCollapsible/UCollapsibleExample.vue
@@ -0,0 +1,24 @@
+<script setup lang="ts">
+import { useAppConfig } from '#imports'
+
+const appConfig = useAppConfig()
+</script>
+
+<template>
+  <UCollapsible class="flex flex-col gap-2 w-48">
+    <UButton
+      class="group"
+      icon="i-lucide-lightbulb"
+      :trailing-icon="appConfig.ui.icons.chevronDown"
+      color="neutral"
+      variant="outline"
+      label="Open"
+      block
+      :ui="{ trailingIcon: 'group-data-[state=open]:rotate-180 transition-transform duration-200' }"
+    />
+
+    <template #content>
+      <Placeholder class="h-96 w-full" />
+    </template>
+  </UCollapsible>
+</template>
--- a/playground/compodium/examples/UCommandPalette/UCommandPaletteExample.vue
+++ b/playground/compodium/examples/UCommandPalette/UCommandPaletteExample.vue
@@ -0,0 +1,104 @@
+<script setup lang="ts">
+import type { User } from '~/types'
+import { ref, computed, useFetch, useToast } from '#imports'
+
+const toast = useToast()
+
+const open = ref(false)
+const searchTerm = ref('')
+const selected = ref([])
+
+const { data: users, status } = await useFetch('https://jsonplaceholder.typicode.com/users', {
+  transform: (data: User[]) => {
+    return data?.map(user => ({ id: user.id, label: user.name, suffix: user.email, avatar: { src: `https://i.pravatar.cc/120?img=${user.id}` } })) || []
+  },
+  lazy: true
+})
+
+const loading = ref(false)
+
+const groups = computed(() => [{
+  id: 'users',
+  label: searchTerm.value ? `Users matching “${searchTerm.value}”...` : 'Users',
+  items: users.value || []
+}, {
+  id: 'actions',
+  items: [{
+    label: 'Add new file',
+    suffix: 'Create a new file in the current directory or workspace.',
+    icon: 'i-lucide-file-plus',
+    loading: loading.value,
+    onSelect(e: Event) {
+      e.preventDefault()
+
+      toast.add({ title: 'New file added!' })
+
+      loading.value = true
+
+      setTimeout(() => {
+        loading.value = false
+      }, 2000)
+    },
+    kbds: ['meta', 'N']
+  }, {
+    label: 'Add new folder',
+    suffix: 'Create a new folder in the current directory or workspace.',
+    icon: 'i-lucide-folder-plus',
+    onSelect(e: Event) {
+      e.preventDefault()
+
+      toast.add({ title: 'New folder added!' })
+    },
+    kbds: ['meta', 'F']
+  }, {
+    label: 'Add hashtag',
+    suffix: 'Add a hashtag to the current item.',
+    icon: 'i-lucide-hash',
+    onSelect(e: Event) {
+      e.preventDefault()
+
+      toast.add({ title: 'Hashtag added!' })
+    },
+    kbds: ['meta', 'H']
+  }, {
+    label: 'Add label',
+    suffix: 'Add a label to the current item.',
+    icon: 'i-lucide-tag',
+    onSelect(e: Event) {
+      e.preventDefault()
+
+      toast.add({ title: 'Label added!' })
+    },
+    kbds: ['meta', 'L']
+  }]
+}])
+
+// function onSelect(item: typeof groups.value[number]['items'][number]) {
+function onSelect(item: any) {
+  console.log('Selected', item)
+}
+
+defineShortcuts({
+  meta_k: () => open.value = !open.value,
+  ...extractShortcuts(groups.value)
+})
+</script>
+
+<template>
+  <UCard :ui="{ body: '!p-0' }">
+    <UCommandPalette
+      v-model="selected"
+      v-model:search-term="searchTerm"
+      :loading="status === 'pending'"
+      :groups="groups"
+      :fuse="{
+        fuseOptions: {
+          includeMatches: true
+        }
+      }"
+      multiple
+      class="sm:max-h-80"
+      @update:model-value="onSelect"
+    />
+  </UCard>
+</template>
--- a/playground/compodium/examples/UCommandPalette/UCommandPaletteExampleDrawer.vue
+++ b/playground/compodium/examples/UCommandPalette/UCommandPaletteExampleDrawer.vue
@@ -0,0 +1,121 @@
+<script setup lang="ts">
+import { ref, computed, useFetch, useToast } from '#imports'
+import type { User } from '~/types'
+
+const toast = useToast()
+
+const searchTerm = ref('')
+const selected = ref([])
+
+const { data: users, status } = await useFetch('https://jsonplaceholder.typicode.com/users', {
+  // params: { q: searchTermDebounced },
+  transform: (data: User[]) => {
+    return data?.map(user => ({ id: user.id, label: user.name, suffix: user.email, avatar: { src: `https://i.pravatar.cc/120?img=${user.id}` } })) || []
+  },
+  lazy: true
+})
+
+const loading = ref(false)
+
+const groups = computed(() => [{
+  id: 'users',
+  label: searchTerm.value ? `Users matching “${searchTerm.value}”...` : 'Users',
+  items: users.value || []
+}, {
+  id: 'actions',
+  items: [{
+    label: 'Add new file',
+    suffix: 'Create a new file in the current directory or workspace.',
+    icon: 'i-lucide-file-plus',
+    loading: loading.value,
+    onSelect(e: Event) {
+      e.preventDefault()
+
+      toast.add({ title: 'New file added!' })
+
+      loading.value = true
+
+      setTimeout(() => {
+        loading.value = false
+      }, 2000)
+    },
+    kbds: ['meta', 'N']
+  }, {
+    label: 'Add new folder',
+    suffix: 'Create a new folder in the current directory or workspace.',
+    icon: 'i-lucide-folder-plus',
+    onSelect(e: Event) {
+      e.preventDefault()
+
+      toast.add({ title: 'New folder added!' })
+    },
+    kbds: ['meta', 'F']
+  }, {
+    label: 'Add hashtag',
+    suffix: 'Add a hashtag to the current item.',
+    icon: 'i-lucide-hash',
+    onSelect(e: Event) {
+      e.preventDefault()
+
+      toast.add({ title: 'Hashtag added!' })
+    },
+    kbds: ['meta', 'H']
+  }, {
+    label: 'Add label',
+    suffix: 'Add a label to the current item.',
+    icon: 'i-lucide-tag',
+    onSelect(e: Event) {
+      e.preventDefault()
+
+      toast.add({ title: 'Label added!' })
+    },
+    kbds: ['meta', 'L']
+  }]
+}])
+
+const labels = [{
+  label: 'bug',
+  chip: {
+    color: 'error' as const
+  }
+}, {
+  label: 'feature',
+  chip: {
+    color: 'success' as const
+  }
+}, {
+  label: 'enhancement',
+  chip: {
+    color: 'info' as const
+  }
+}]
+
+// function onSelect(item: typeof groups.value[number]['items'][number]) {
+function onSelect(item: any) {
+  console.log('Selected', item)
+}
+</script>
+
+<template>
+  <UDrawer should-scale-background>
+    <UButton label="Open in drawer" color="neutral" variant="outline" />
+
+    <template #content>
+      <UCommandPalette
+        v-model="selected"
+        v-model:search-term="searchTerm"
+        v-bind="$attrs"
+        :loading="status === 'pending'"
+        :groups="groups"
+        :fuse="{
+          fuseOptions: {
+            includeMatches: true
+          }
+        }"
+        multiple
+        class="sm:max-h-80 border-t border-(--ui-border) mt-4"
+        @update:model-value="onSelect"
+      />
+    </template>
+  </UDrawer>
+</template>
--- a/Show More
+++ b/Show More
Author	SHA1	Message	Date
Romain Hamel	3d62371af0	chore: up	2025-03-28 16:22:31 +01:00
Romain Hamel	f941df1541	chore: up	2025-03-28 08:58:21 +01:00
Romain Hamel	664e940098	chore: up	2025-03-26 13:45:17 +01:00
Romain Hamel	15fe0039f0	chore(playground): compodium setup	2025-03-26 11:40:23 +01:00
Romain Hamel	f68061975c	chore: setup compodium in playground	2025-03-24 15:08:07 +01:00
Benjamin Canac	5465fcb61d	chore(deps): update `peerDependencies`	2025-03-24 14:12:19 +01:00
Benjamin Canac	ef8ebaf687	chore(renovate): ignore `peerDependencies`	2025-03-24 14:01:57 +01:00
Benjamin Canac	1094881878	playground(deps): add `zod`	2025-03-24 14:01:14 +01:00
Romain Hamel	d6fd18fc4f	chore(deps): declare form validation libraries as `peerDependencies` (#3666 )	2025-03-24 13:53:35 +01:00
Benjamin Canac	e2e079f0d8	chore(github): improve module workflow	2025-03-24 12:37:04 +01:00
Benjamin Canac	cec9dadc7a	chore(docs/playground): add `vite.optimizeDeps`	2025-03-24 12:37:04 +01:00
Vahe Sargsyan	c76f590097	feat(locale): add Armenian language (#3664 )	2025-03-24 11:29:32 +01:00
renovate[bot]	4dee7c3bd3	chore(deps): lock file maintenance (v3) (#3662 ) Co-authored-by: renovate[bot] <29139614+renovate[bot]@users.noreply.github.com>	2025-03-24 11:26:00 +01:00
renovate[bot]	47bbe35d2a	chore(deps): update all non-major dependencies (v3) (#3636 ) Co-authored-by: renovate[bot] <29139614+renovate[bot]@users.noreply.github.com> Co-authored-by: Benjamin Canac <canacb1@gmail.com>	2025-03-24 11:16:11 +01:00
Benjamin Canac	60bcd4fdf0	chore(defineLocale): put back `@__NO_SIDE_EFFECTS__`	2025-03-24 11:03:26 +01:00
Benjamin Canac	c231fe5f26	fix(Button): use `focus:outline-none` instead of `focus:outline-hidden` Resolves #3658	2025-03-24 10:50:06 +01:00
Benjamin Canac	1769d5ed6e	fix(Tabs): remove `focus:outline-hidden` class	2025-03-24 10:48:50 +01:00
Benjamin Canac	68787b26fd	fix(Switch): prevent transition on focus outline	2025-03-24 10:48:03 +01:00
Benjamin Canac	f7604e565f	fix(Drawer): remove `fadeFromIndex` prop proxy	2025-03-23 15:56:33 +01:00
Benjamin Canac	82e26655a4	fix(defineLocale/defineShortcuts): remove `@__NO_SIDE_EFFECTS__`	2025-03-23 14:53:58 +01:00
Benjamin Canac	2453714136	chore(deps): move `@standard-schema/spec` to `dependencies`	2025-03-23 12:52:33 +01:00
Benjamin Canac	973f36539d	chore(github): enable ui pro integration	2025-03-21 21:24:47 +01:00
Benjamin Canac	05ab54d03a	chore(release): v3.0.1	2025-03-21 16:10:20 +01:00
Benjamin Canac	db83df5f5e	chore(github): update integration workflow (#3643 )	2025-03-21 15:59:34 +01:00
Shadow	a5168666b7	fix(Calendar): grey out days outside of displayed month (#3639 )	2025-03-21 11:12:39 +01:00
renovate[bot]	f30d45c79a	chore(deps): update tailwindcss to ^4.0.15 (v3) (#3638 ) Co-authored-by: renovate[bot] <29139614+renovate[bot]@users.noreply.github.com>	2025-03-20 22:40:18 +01:00
Benjamin Canac	31be5f656e	chore(Drawer): put back `shrink-0` on handle	2025-03-20 22:25:37 +01:00
Benjamin Canac	0ef5f3b77b	chore(github): remove integration env	2025-03-20 22:15:05 +01:00
Benjamin Canac	a0fec4e467	docs(deps): use only one motion library	2025-03-20 22:14:14 +01:00
Benjamin Canac	f401766e26	chore(deps): update `vaul-vue`	2025-03-20 21:52:14 +01:00
Benjamin Canac	70f469b868	chore(github): update integration workflow	2025-03-20 17:38:09 +01:00
Benjamin Canac	f92df1f661	chore(github): update integration workflow	2025-03-20 16:59:06 +01:00
Benjamin Canac	16edbdf1f0	chore(github): update integration workflow	2025-03-20 16:45:34 +01:00
Benjamin Canac	fe0bd83d11	fix(RadioGroup): handle `disabled` on items Resolves nuxt/ui-pro#911	2025-03-20 16:36:58 +01:00
Benjamin Canac	8a26de230b	chore(github): update integration workflow	2025-03-20 16:29:38 +01:00
Benjamin Canac	65a6861b54	chore(github): update integration workflow	2025-03-20 16:19:22 +01:00
Sandro Circi	ecff9abc72	fix(module): handle tailwindcss import without `theme(static)` (#3630 ) Co-authored-by: Benjamin Canac <canacb1@gmail.com>	2025-03-20 15:53:57 +01:00
renovate[bot]	06bc7d3028	chore(deps): update all non-major dependencies (v3) (#3591 ) Co-authored-by: renovate[bot] <29139614+renovate[bot]@users.noreply.github.com>	2025-03-20 15:15:49 +01:00
Halwest Manguri	b2034ccc91	feat(locale): add Central Kurdish language (#3566 ) Co-authored-by: Benjamin Canac <canacb1@gmail.com>	2025-03-20 15:15:21 +01:00
Mickael Chanrion	53cf1b4c14	feat(locale): add Catalan language (#3550 ) Co-authored-by: Benjamin Canac <canacb1@gmail.com>	2025-03-20 15:09:43 +01:00
Mark	0229b0fd46	feat(locale): add Romanian language (#3587 )	2025-03-20 15:04:52 +01:00
Ulugbek Nagmatov	302e04bd77	feat(locale): add Uzbek language (#3548 ) Co-authored-by: Benjamin Canac <canacb1@gmail.com>	2025-03-20 15:03:51 +01:00
Arbaz Irshad	126ba2326f	feat(locale): add Urdu language (#3611 )	2025-03-20 15:00:57 +01:00
Sébastien Chopin	dfc27514ec	docs: add redirects from v2 structure (#3634 )	2025-03-20 12:55:27 +01:00
Benjamin Canac	26321c4857	test: update snapshots	2025-03-20 12:47:15 +01:00
Benjamin Canac	5dec0e16e2	feat(components): handle events in `content` prop	2025-03-20 12:39:57 +01:00
Benjamin Canac	f4c417d9ef	fix(Modal/Slideover/Toast): prevent unnecessary close instantiation	2025-03-20 12:14:21 +01:00
Benjamin Canac	9046b9d679	docs(Header): remove extraneous prop on navigation menu	2025-03-20 11:59:46 +01:00
Benjamin Canac	99df056cad	docs(app): remove hydrate attributes on stars	2025-03-20 00:06:35 +01:00
renovate[bot]	08bebcae48	chore(deps): update nuxt framework to ^3.16.1 (v3) (#3626 ) Co-authored-by: renovate[bot] <29139614+renovate[bot]@users.noreply.github.com>	2025-03-19 22:04:37 +01:00
Norbiros	764c41a0c6	fix(ContextMenu/DropdownMenu): remove `any` from `proxySlots` (#3623 )	2025-03-19 22:03:09 +01:00
Benjamin Canac	2abcc24018	chore(github): update integration workflow	2025-03-19 18:38:40 +01:00
Benjamin Canac	67f90f5f26	chore(github): update integration workflow	2025-03-19 18:06:22 +01:00
Benjamin Canac	024fccf8bb	chore(github): update integration workflow	2025-03-19 17:38:16 +01:00
Benjamin Canac	edb0f0afc6	docs(app): improve stars lazy loading	2025-03-19 14:54:14 +01:00
Benjamin Canac	fd160339a6	chore(deps): update `@nuxt/ui-pro`	2025-03-19 12:57:51 +01:00
Benjamin Canac	2a023b9060	docs(app): improve safelist	2025-03-19 12:33:23 +01:00
Benjamin Canac	ab52830dc8	docs(Banner): allow to close	2025-03-19 12:33:23 +01:00
Romain Hamel	9a4bb34d7d	refactor(Form)!: drop explicit support for `zod` and `valibot` (#3617 )	2025-03-19 12:18:26 +01:00
Romain Hamel	02184b016a	chore(Form): improve TSDoc (#3619 )	2025-03-19 12:17:52 +01:00
Daniel Roe	57efc78a3b	fix(module): mark functions used in exports as pure (#3604 )	2025-03-18 14:48:28 +01:00
Benjamin Canac	dec2730aae	fix(useLocale): unique symbol to use in `@nuxt/ui-pro` (#3603 )	2025-03-18 12:09:36 +01:00
Rizwan	c8ca604bdf	docs(migration): improve `useOverlay` section (#3601 )	2025-03-18 12:04:22 +01:00
Benjamin Canac	ef86108f14	chore(components): add eol in script tag to fix syntax highlight	2025-03-18 10:52:04 +01:00
Harlan Wilton	a1caac47c5	docs: broken 404 pages (#3598 )	2025-03-18 10:01:19 +01:00
renovate[bot]	fad715d8df	chore(deps): lock file maintenance (v3) (#3582 ) Co-authored-by: renovate[bot] <29139614+renovate[bot]@users.noreply.github.com>	2025-03-17 18:32:13 +01:00
Benjamin Canac	b0d0d926ab	chore(colors): put back `tagPriority` Partial revert of #3589	2025-03-17 18:24:14 +01:00
Romain Hamel	a8e6b74e38	docs(installation): improve vscode recommendations (#3592 ) Co-authored-by: Benjamin Canac <canacb1@gmail.com>	2025-03-17 17:01:44 +01:00
renovate[bot]	177fb79cb4	chore(deps): update all non-major dependencies (v3) (#3551 ) Co-authored-by: renovate[bot] <29139614+renovate[bot]@users.noreply.github.com> Co-authored-by: Benjamin Canac <canacb1@gmail.com>	2025-03-17 16:08:26 +01:00
Benjamin Canac	175c7027a3	docs(app): put back carbon ads	2025-03-17 16:05:32 +01:00
Romain Hamel	cc504b8a4b	fix(unplugin): include `@compodium/examples` in auto-imports paths (#3585 )	2025-03-17 15:16:42 +01:00
Harlan Wilton	0897e9ef05	fix(vue): missing unhead context (#3589 ) Co-authored-by: Benjamin Canac <canacb1@gmail.com>	2025-03-17 15:09:02 +01:00
Benjamin Canac	6588ae8669	docs: clean badges	2025-03-17 14:25:37 +01:00
Benjamin Canac	0b41cebee4	docs(nuxt.config): fix local extends Related to https://github.com/nuxt/nuxt/issues/31311	2025-03-17 14:24:40 +01:00
Kheuval	e80cc1592f	fix(Table): allow links to be opened when @select is used (#3580 )	2025-03-17 11:38:37 +01:00
Estéban	5d52af6292	docs(pro): update barbapapazes description (#3577 )	2025-03-16 12:06:46 +01:00
Nils Evers	5e62493321	fix(types): add missing export for Icon (#3568 )	2025-03-15 12:13:50 +01:00
Jeremy Woertink	37f8619c1a	docs(migration): fix typo (#3563 )	2025-03-15 12:12:34 +01:00
Benjamin Canac	5376a835f7	docs(pro): disable launch offer	2025-03-15 11:03:43 +01:00
Benjamin Canac	f2ba755ba5	chore(github): update integration workflow	2025-03-13 16:15:17 +01:00
Benjamin Canac	c8d712747f	chore(github): update integration workflow	2025-03-13 16:09:00 +01:00
Benjamin Canac	816cf50b37	chore(github): update integration workflow	2025-03-13 15:59:42 +01:00
Benjamin Canac	3c60f70cab	chore(github): add integration workflow	2025-03-13 15:27:09 +01:00
renovate[bot]	05758fa915	chore(deps): update tailwindcss to ^4.0.14 (v3) (#3553 ) Co-authored-by: renovate[bot] <29139614+renovate[bot]@users.noreply.github.com>	2025-03-13 14:43:05 +01:00
Maxime Pauvert	ce4b229264	chore(readme): fix npm badge (#3540 )	2025-03-13 14:30:39 +01:00
Benjamin Canac	09b4e9e282	chore(vercel): put back config	2025-03-13 13:59:57 +01:00
Sébastien Chopin	50d68a636c	docs: add ui pro banner	2025-03-12 18:16:15 +01:00
Sébastien Chopin	7646c95c73	docs(pro): launch offer	2025-03-12 17:05:52 +01:00
Benjamin Canac	4c30baffe0	chore(vercel): remove useless file	2025-03-12 16:19:12 +01:00
Benjamin Canac	0b411936c4	chore: use `ui.nuxt.com` url	2025-03-12 16:17:43 +01:00
Benjamin Canac	047582c246	chore(deps): update `@nuxt/ui-pro`	2025-03-12 16:17:43 +01:00
Benjamin Canac	b00f1206f6	docs: update for `v3.0.0` release	2025-03-12 16:17:43 +01:00
Benjamin Canac	9ba5cfe70c	chore(github): use `ui.nuxt.com` url in v3	2025-03-12 16:17:43 +01:00
Benjamin Canac	ee9aca33fd	chore(github): use `ui2.nuxt.com`	2025-03-12 16:17:43 +01:00
Sébastien Chopin	8d29e50340	docs: fix og image	2025-03-12 16:09:41 +01:00
Sébastien Chopin	0ad18d0a7a	docs(installation): rename template to ui	2025-03-12 15:39:52 +01:00
Benjamin Canac	4c96909020	chore(release): v3.0.0	2025-03-12 15:33:38 +01:00
Benjamin Canac	06dee66722	chore(package): update `release` command	2025-03-12 15:04:12 +01:00
Benjamin Canac	8494f50d98	docs: rename `dev` to `v2`	2025-03-12 15:04:05 +01:00