chore(release): 2.10.0

Co-authored-by: Sma11X <540351143@qq.com>
Co-authored-by: saveliy <savelii.moshkota@ext.jumingo.com>

.github/ISSUE_TEMPLATE/bug-report.md

@@ -1,31 +0,0 @@
----
-name: Bug report
-about: Report a bug report to help us improve the module.
-title: ''
-labels: 'bug'
-assignees: ''
-
----
-
-<!-- **IMPORTANT!**
-Before reporting a bug, please make sure that you have read through our documentation and you think your problem is indeed an issue related to our module. -->
-
-### Version
-@nuxt/ui: <!-- ex: v2.0.0 -->
-nuxt: <!-- ex: v3.5.0 -->
-
-### Reproduction Link
-
-<!--
-A minimal test case based on one of:
-- a GitHub repository that can reproduce the bug
-- https://stackblitz.com/edit/nuxt-ui
--->
-
-### Steps to reproduce
-
-
-### What is Expected?
-
-
-### What is actually happening?

.github/ISSUE_TEMPLATE/bug-report.yml

@@ -0,0 +1,60 @@
+name: "🐛 Bug report"
+description: Report a bug to help us improve the module.
+labels: ["bug"]
+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).
+  - type: textarea
+    id: env
+    attributes:
+      label: Environment
+      description: You can use `npx nuxi info` to fill this section
+      placeholder: |
+        - Operating System: `Darwin`
+        - Node Version:     `v18.16.0`
+        - Nuxt Version:     `3.7.3`
+        - CLI Version:      `3.8.4`
+        - Nitro Version:    `2.6.3`
+        - Package Manager:  `pnpm@8.7.4`
+        - Builder:          `-`
+        - User Config:      `-`
+        - Runtime Modules:  `-`
+        - Build Modules:    `-`
+    validations:
+      required: true
+  - type: input
+    id: version
+    attributes:
+      label: Version
+      placeholder: v2.8.0
+    validations:
+      required: true
+  - type: textarea
+    id: reproduction
+    attributes:
+      label: Reproduction
+      description: Please provide a reproduction link using this template https://stackblitz.com/edit/nuxt-ui. A minimal [reproduction is required](https://antfu.me/posts/why-reproductions-are-required) unless you are absolutely sure that the issue is obvious and the provided information is enough to understand the problem. If a report is vague (e.g. just a generic error message) and has no reproduction, it will receive a "needs reproduction" label. If no reproduction is provided we might close it.
+      placeholder: https://stackblitz.com/edit/nuxt-ui
+    validations:
+      required: true
+  - type: textarea
+    id: description
+    attributes:
+      label: Description
+      description: A clear and concise description of what the bug is. If you intend to submit a PR for this issue, tell us in the description.
+    validations:
+      required: true
+  - type: textarea
+    id: additonal
+    attributes:
+      label: Additional context
+      description: If applicable, add any other context or screenshots here.
+  - type: textarea
+    id: logs
+    attributes:
+      label: Logs
+      description: |
+        Optional if provided reproduction. Please try not to insert an image but copy paste the log text.
+      render: shell-script

.github/ISSUE_TEMPLATE/config.yml

@@ -1,5 +1,8 @@
 blank_issues_enabled: false
 contact_links:
-  - name: Nuxt Community Discord
-    url: https://discord.nuxtjs.org/
-    about: Consider asking questions about the module here.
+  - name: 📖 Documentation
+    url: https://ui.nuxt.com
+    about: Check the documentation for guides and examples.
+  - name: 📚 Discord
+    url: https://discord.com/channels/473401852243869706/1153996761426300948
+    about: Consider asking questions in the `#ui` channel.

.github/ISSUE_TEMPLATE/feature-request.md

@@ -1,20 +0,0 @@
----
-name: Feature request
-about: Suggest an idea or enhancement for the module.
-title: ''
-labels: 'enhancement'
-assignees: ''
-
----
-
-### Is your feature request related to a problem? Please describe.
-<!-- A clear and concise description of what the problem is. Ex. I'm always frustrated when [...] -->
-
-### Describe the solution you'd like
-<!-- A clear and concise description of what you want to happen. -->
-
-### Describe alternatives you've considered
-<!-- A clear and concise description of any alternative solutions or features you've considered. -->
-
-### Additional context
-<!-- Add any other context or screenshots about the feature request here. -->

.github/ISSUE_TEMPLATE/feature-request.yml

@@ -0,0 +1,20 @@
+name: "🚀 Feature request"
+description: Suggest an idea or enhancement for the module.
+labels: ["enhancement"]
+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).
+  - type: textarea
+    id: description
+    attributes:
+      label: Description
+      description: A clear and concise description of what you think would be an helpful addition to the module, including the possible use cases and alternatives you have considered. If you have a working prototype or module that implements it, please include a link.
+    validations:
+      required: true
+  - type: textarea
+    id: additonal
+    attributes:
+      label: Additional context
+      description: If applicable, add any other context or screenshots here.

.github/ISSUE_TEMPLATE/question.md

@@ -1,16 +0,0 @@
----
-name: Question
-about: Ask a question about the module.
-title: ''
-labels: 'question'
-assignees: ''
-
----
-
-<!-- **IMPORTANT!**
-Please make sure to look for an answer to your question in our documentation and the documentation before asking a question here.
-
-If you have a general question regarding the module use Discord `modules` channel. Thanks!
-
-Nuxt Discord: https://discord.nuxtjs.org/
--->

.github/ISSUE_TEMPLATE/question.yml

@@ -0,0 +1,14 @@
+name: "💬 Question"
+description: Ask a question about the module.
+labels: ["question"]
+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).
+  - type: textarea
+    id: description
+    attributes:
+      label: Description
+    validations:
+      required: true

.github/PULL_REQUEST_TEMPLATE.md

@@ -0,0 +1,33 @@
+<!---
+☝️ PR title should follow conventional commits (https://conventionalcommits.org)
+-->
+
+### 🔗 Linked issue
+
+<!-- Please ensure there is an open issue and mention its number as #123 -->
+
+### ❓ Type of change
+
+<!-- What types of changes does your code introduce? Put an `x` in all the boxes that apply. -->
+
+- [ ] 📖 Documentation (updates to the documentation or readme)
+- [ ] 🐞 Bug fix (a non-breaking change that fixes an issue)
+- [ ] 👌 Enhancement (improving an existing functionality)
+- [ ] ✨ New feature (a non-breaking change that adds functionality)
+- [ ] 🧹 Chore (updates to the build process or auxiliary tools and libraries)
+- [ ] ⚠️ Breaking change (fix or feature that would cause existing functionality to change)
+
+### 📚 Description
+
+<!-- Describe your changes in detail -->
+<!-- Why is this change required? What problem does it solve? -->
+<!-- If it resolves an open issue, please link to the issue here. For example "Resolves #1337" -->
+
+### 📝 Checklist
+
+<!-- Put an `x` in all the boxes that apply. -->
+<!-- If your change requires a documentation PR, please link it appropriately -->
+<!-- If you're unsure about any of these, don't hesitate to ask. We're here to help! -->
+
+- [ ] I have linked an issue or discussion.
+- [ ] I have updated the documentation accordingly.

.github/workflows/ci-dev.yml

@@ -12,13 +12,17 @@ jobs:
   ci:
     runs-on: ${{ matrix.os }}
 
+    permissions:
+      contents: read
+      pull-requests: read
+
     strategy:
       matrix:
         os: [ubuntu-latest] # macos-latest, windows-latest
         node: [18]
 
     steps:
-      - uses: actions/setup-node@v3
+      - uses: actions/setup-node@v4
         with:
           node-version: ${{ matrix.node }}
 
@@ -46,20 +50,32 @@ jobs:
           restore-keys: |
             ${{ runner.os }}-pnpm-store-
 
+      - uses: dorny/paths-filter@v2
+        id: changes
+        with:
+          filters: |
+            src:
+              - 'src/**'
+              - 'package.json'
+              - 'pnpm-lock.yaml'
+
       - name: Install dependencies
         run: pnpm install
 
+      - name: Prepare
+        run: pnpm run dev:prepare
+
       - name: Lint
         run: pnpm run lint
 
-      - name: Build
-        run: pnpm run build
-
       - name: Typecheck
         run: pnpm run typecheck
 
+      - name: Build
+        run: pnpm run build
+
       - name: Release Edge
-        if: github.event_name == 'push'
+        if: github.event_name == 'push' && steps.changes.outputs.src == 'true'
         run: ./scripts/release-edge.sh
         env:
           NODE_AUTH_TOKEN: ${{secrets.NODE_AUTH_TOKEN}}

.github/workflows/ci.yml

@@ -4,9 +4,6 @@ on:
   push:
     branches:
       - main
-  pull_request:
-    branches:
-      - main
 
 jobs:
   ci:
@@ -18,7 +15,7 @@ jobs:
         node: [18]
 
     steps:
-      - uses: actions/setup-node@v3
+      - uses: actions/setup-node@v4
         with:
           node-version: ${{ matrix.node }}
 
@@ -49,15 +46,18 @@ jobs:
       - name: Install dependencies
         run: pnpm install
 
+      - name: Prepare
+        run: pnpm run dev:prepare
+
       - name: Lint
         run: pnpm run lint
 
-      - name: Build
-        run: pnpm run build
-
       - name: Typecheck
         run: pnpm run typecheck
 
+      - name: Build
+        run: pnpm run build
+
       - name: Version Check
         id: check
         uses: EndBug/version-check@v2

.nuxtrc

@@ -0,0 +1,3 @@
+imports.autoImport=false
+typescript.includeWorkspace=true
+typescript.strict=false

CHANGELOG.md

@@ -1,5 +1,82 @@
 # Changelog
 
+## [2.10.0](https://github.com/nuxt/ui/compare/v2.9.0...v2.10.0) (2023-10-31)
+
+
+### Features
+
+* **CommandPalette:** handle `filter` attribute in groups ([#871](https://github.com/nuxt/ui/issues/871)) ([8ba2a79](https://github.com/nuxt/ui/commit/8ba2a791e4877682705bd752d4ab6f9c52d0b37b))
+* **Divider:** new component ([#757](https://github.com/nuxt/ui/issues/757)) ([eb9ce6a](https://github.com/nuxt/ui/commit/eb9ce6a0ddb7d73e3d3accee000ac71c20b96d1b))
+* **Form:** handle `[@error](https://github.com/error)` event ([#718](https://github.com/nuxt/ui/issues/718)) ([e16379f](https://github.com/nuxt/ui/commit/e16379fdbdff6c98e96dc03cc67f3912f2f61075))
+* **Input/Textarea:** allow specifying autofocus delay for page transitions ([#816](https://github.com/nuxt/ui/issues/816)) ([8bfd359](https://github.com/nuxt/ui/commit/8bfd3591a624ad7b77bcd9d3c38961a1ba59f23c))
+* **Meter:** new component ([#827](https://github.com/nuxt/ui/issues/827)) ([abbcc37](https://github.com/nuxt/ui/commit/abbcc37fbb4b52b1503a69f8312cbecfe222f675))
+* **Pagination:** add first and last page buttons ([#842](https://github.com/nuxt/ui/issues/842)) ([c5ce997](https://github.com/nuxt/ui/commit/c5ce997ba9d7abdb8282fcd34b88c380a7a4c592))
+* **Popover:** manual mode & horizontal offset ([#781](https://github.com/nuxt/ui/issues/781)) ([92b8618](https://github.com/nuxt/ui/commit/92b86186e7b8a987eec1da9cf45a0ec378d421cf))
+* **popper:** `arrow` option & docs consistency across components ([#875](https://github.com/nuxt/ui/issues/875)) ([f785ecd](https://github.com/nuxt/ui/commit/f785ecd46fdff77ecb8579d8a7edc463bcce2407))
+* **Progress:** new component ([#697](https://github.com/nuxt/ui/issues/697)) ([2c5559b](https://github.com/nuxt/ui/commit/2c5559b73ea22f1021c18c2561de1e6cd6f9741f))
+* **RadioGroup:** configurable label size ([#881](https://github.com/nuxt/ui/issues/881)) ([5a2644b](https://github.com/nuxt/ui/commit/5a2644b329dd1bb85a8ca70f849e108dbb93c776))
+* **RadioGroup:** new component ([#730](https://github.com/nuxt/ui/issues/730)) ([23d5dc7](https://github.com/nuxt/ui/commit/23d5dc7b981d56127dd2bd3f03d752a76f36653c))
+* **Range:** add `2xs`, `xs`, `xl` and `2xl` sizes to match progress component ([3cb3914](https://github.com/nuxt/ui/commit/3cb3914386e465180337ff8bf3f78e07a14bbafb)), closes [#673](https://github.com/nuxt/ui/issues/673)
+* **Table:** add `v-model:sort` prop ([#803](https://github.com/nuxt/ui/issues/803)) ([9f4d88e](https://github.com/nuxt/ui/commit/9f4d88e0aa7ec8cbbdae3fccd372d8c5e81d7ad0))
+* **Tooltip:** adding option to show popper arrow ([#868](https://github.com/nuxt/ui/issues/868)) ([4ce2374](https://github.com/nuxt/ui/commit/4ce23746da27ad0ef9b1833e41105165045f1cb8))
+
+
+### Bug Fixes
+
+* **Accordion:** toggle correct element when keyboard press ([#805](https://github.com/nuxt/ui/issues/805)) ([96296c3](https://github.com/nuxt/ui/commit/96296c3d388a4f65f08e4a062f720d37f2c84ebc))
+* **Divider:** display a single border when no content ([3c5c338](https://github.com/nuxt/ui/commit/3c5c3389f8cdfcf9b70f1bb7d5553d0be55278a4))
+* **Dropdown:** use `NuxtLink` instead of `ULink` ([#882](https://github.com/nuxt/ui/issues/882)) ([c37ad8b](https://github.com/nuxt/ui/commit/c37ad8b79a61ffccbb8959ca07fdf54923313e00))
+* **FormGroup:** ensure size exists in config ([#695](https://github.com/nuxt/ui/issues/695)) ([f5f3388](https://github.com/nuxt/ui/commit/f5f33882f9ad48944e54f31cb784bedf26dccbd1))
+* **Modal:** remove padding on mobile with `fullscreen` enabled ([550ac10](https://github.com/nuxt/ui/commit/550ac10e49d15e0b5435e031ec61f7defdaee445)), closes [#811](https://github.com/nuxt/ui/issues/811)
+* **Notification:** add roles for accessibility ([#724](https://github.com/nuxt/ui/issues/724)) ([40f3b16](https://github.com/nuxt/ui/commit/40f3b161003f71ecacf57b9641de66acd14e3fab))
+* **Table:** enable sorting for nested column keys ([#835](https://github.com/nuxt/ui/issues/835)) ([b4f7b03](https://github.com/nuxt/ui/commit/b4f7b035f7e802427e57fc7359020648a23eb71e))
+* **Table:** prevent `[@select](https://github.com/select)` event call when selecting all rows ([#838](https://github.com/nuxt/ui/issues/838)) ([51f4d54](https://github.com/nuxt/ui/commit/51f4d549998c0d570adc843e1f3835cbd163ae69))
+* **Tabs:** truncate buttons content ([ddbb431](https://github.com/nuxt/ui/commit/ddbb4319539e9e306ed9fc6f4f2145f20f13683a)), closes [#796](https://github.com/nuxt/ui/issues/796)
+* **types:** handle sub-objects in `app.config.ts` (button colors) ([7be2af7](https://github.com/nuxt/ui/commit/7be2af7127acba2e1228b7994ecd8eb40e5c376b)), closes [#858](https://github.com/nuxt/ui/issues/858)
+* use explicit type imports ([#830](https://github.com/nuxt/ui/issues/830)) ([a8279d1](https://github.com/nuxt/ui/commit/a8279d1c97c2f2c6a5d9fd971abb27767b5beb4c))
+
+## [2.9.0](https://github.com/nuxt/ui/compare/v2.8.1...v2.9.0) (2023-10-02)
+
+
+### ⚠ BREAKING CHANGES
+
+* **module:** use `tailwind-merge` for `app.config` & move config to components & type props (#692)
+
+### Features
+
+* **FormGroup:** add slots ([#714](https://github.com/nuxt/ui/issues/714)) ([2fc9385](https://github.com/nuxt/ui/commit/2fc938575d2e409ba9df9fb2ddb8d51d021a1756))
+* **Link:** add `active` prop to override default behaviour ([#732](https://github.com/nuxt/ui/issues/732)) ([8257a11](https://github.com/nuxt/ui/commit/8257a11dcba9c34053f8061ed1383894d06b2a6c))
+* **Link:** add `as` prop ([#535](https://github.com/nuxt/ui/issues/535)) ([e404912](https://github.com/nuxt/ui/commit/e40491208ac1096e505803072df0d9e2e771008e))
+* **module:** use `tailwind-merge` for `app.config` & move config to components & type props ([#692](https://github.com/nuxt/ui/issues/692)) ([34d2f57](https://github.com/nuxt/ui/commit/34d2f57801d08d26262fdff4398ec3d3329b4bb0))
+* remove `lodash-es` ([#648](https://github.com/nuxt/ui/issues/648)) ([d6476d1](https://github.com/nuxt/ui/commit/d6476d17f9b17317a7160271dacdb854f30237ae))
+* **Table:** add ability to custom style for  `td` and  `tr` ([#741](https://github.com/nuxt/ui/issues/741)) ([874447c](https://github.com/nuxt/ui/commit/874447cb41a77868513459eee5d3301fe8b8e9a1))
+
+
+### Bug Fixes
+
+* **Accordion:** close other items in circular order ([#735](https://github.com/nuxt/ui/issues/735)) ([6887f73](https://github.com/nuxt/ui/commit/6887f732ee8e14625459a0576460523845cb0a6d))
+* **FormGroup:** prevent input click from propagating to label ([#651](https://github.com/nuxt/ui/issues/651)) ([4c58330](https://github.com/nuxt/ui/commit/4c5833083f0840add52f3c67efc42b8db5687d37))
+* **FormGroup:** use explicit label instead of implicit label ([#638](https://github.com/nuxt/ui/issues/638)) ([681f0e5](https://github.com/nuxt/ui/commit/681f0e5684feaad0c711130404751f2fd65ddbe4))
+* **module:** move `@headlessui/tailwindcss` to plugins on module install ([3e647e4](https://github.com/nuxt/ui/commit/3e647e4af154dad7fa186f062ce984e4d8d0e202))
+* **module:** retain props reactivity through `useUI` ([#745](https://github.com/nuxt/ui/issues/745)) ([109ec52](https://github.com/nuxt/ui/commit/109ec52d50b0b32b0f0b24ece5b92cd7bbce29da))
+* **Pagination:** handle `max > 5` and `max` equal total pages ([#728](https://github.com/nuxt/ui/issues/728)) ([a071e4b](https://github.com/nuxt/ui/commit/a071e4b8755f5dbbdfd05985c8fcb65c3cdab3ec))
+* **Range:** fix track pseudo-elements for mozilla ([#636](https://github.com/nuxt/ui/issues/636)) ([8955595](https://github.com/nuxt/ui/commit/8955595dc6904d0090ad7f82ed8b376a15e51f94))
+* **SelectMenu:** handle numbers ([0544a01](https://github.com/nuxt/ui/commit/0544a01c5b7ae534a595e6c91d2884a601ae3185)), closes [#574](https://github.com/nuxt/ui/issues/574)
+* **Table:** add missing classes in `app.config.ts` ([a603ea5](https://github.com/nuxt/ui/commit/a603ea56c165e9ad01482d092460da3991f3e41d)), closes [#655](https://github.com/nuxt/ui/issues/655)
+* **Table:** select all rows without select listener ([#652](https://github.com/nuxt/ui/issues/652)) ([83d609d](https://github.com/nuxt/ui/commit/83d609d53067b2639a55a0e367a5e7adbd8a22fc))
+* **Tabs:** add visible focus indicator on active tabs ([#690](https://github.com/nuxt/ui/issues/690)) ([be734fc](https://github.com/nuxt/ui/commit/be734fc026b75bc8c921e9401ba6e97f65356cec))
+* **Tabs:** allow custom keys in `TabItem` ([#671](https://github.com/nuxt/ui/issues/671)) ([15e418e](https://github.com/nuxt/ui/commit/15e418e6c6f981afd2c0e8f27dedb303b8cbad70))
+* **Tabs:** prevent focus of `TabPanel` with `tabindex="-1"` ([cbb2f28](https://github.com/nuxt/ui/commit/cbb2f28c3fd96e45c7af20675b5b67576ddc0d63))
+
+## [2.8.1](https://github.com/nuxt/ui/compare/v2.8.0...v2.8.1) (2023-09-09)
+
+
+### Bug Fixes
+
+* **Form:** fix `getValibotError` to avoid importing `safeParseAsync` ([#640](https://github.com/nuxt/ui/issues/640)) ([e8daf7f](https://github.com/nuxt/ui/commit/e8daf7f81018c01c28c2c38aed6ee57ef887f823))
+* **Form:** fix valibot imports ([#617](https://github.com/nuxt/ui/issues/617)) ([1a7eb27](https://github.com/nuxt/ui/commit/1a7eb27cad9f3357c4dcde188530cdb0001d3ae6))
+* **Pagination:** page numbers not clickable ([#624](https://github.com/nuxt/ui/issues/624)) ([c1e0654](https://github.com/nuxt/ui/commit/c1e0654417ad39df8be3f2172ab4e0af6dacb631))
+
 ## [2.8.0](https://github.com/nuxt/ui/compare/v2.7.0...v2.8.0) (2023-09-07)
 
 

README.md

@@ -20,6 +20,7 @@ Is has been developed by [NuxtLabs](https://nuxtlabs.com/) for [Volta](https://v
 - Keyboard shortcuts
 - Bundled icons
 - Fully typed
+- [Figma Kit](https://www.figma.com/community/file/1288455405058138934)
 
 Read more on [ui.nuxt.com](https://ui.nuxt.com)
 

docs/.env.example

@@ -1,4 +1,6 @@
-# To use Nuxt Elements in production
-NUXT_ELEMENTS_TOKEN=
+# To link Nuxt UI Pro in development
+NUXT_UI_PRO_PATH=
+# To use Nuxt UI Pro in production
+NUXT_UI_PRO_TOKEN=
 # Used when pre-rendering the docs for dynamic OG images
 NUXT_PUBLIC_SITE_URL=

docs/.nuxtrc

@@ -0,0 +1 @@
+imports.autoImport=true

docs/app.vue

@@ -10,7 +10,7 @@
     <Footer />
 
     <ClientOnly>
-      <LazyUDocsSearch :files="files" :navigation="navigation" />
+      <LazyUDocsSearch ref="searchRef" :files="files" :navigation="navigation" :groups="groups" />
     </ClientOnly>
 
     <UNotifications>
@@ -27,36 +27,52 @@
 
 <script setup lang="ts">
 import { withoutTrailingSlash } from 'ufo'
+import { debounce } from 'perfect-debounce'
+import type { ParsedContent } from '@nuxt/content/dist/runtime/types'
+
+const searchRef = ref()
+
 const route = useRoute()
 const colorMode = useColorMode()
-const { prefix, removePrefixFromNavigation, removePrefixFromFiles } = useContentSource()
+const { branch, branches } = useContentSource()
 
 const { data: nav } = await useAsyncData('navigation', () => fetchContentNavigation())
-
-const { data: search } = useLazyFetch('/api/search.json', {
-  default: () => [],
-  server: false
-})
+const { data: files } = useLazyFetch<ParsedContent[]>('/api/search.json', { default: () => [], server: false })
 
 // Computed
-const navigation = computed(() => {
-  const navigation = nav.value.find(link => link._path === prefix.value)?.children || []
 
-  return prefix.value === '/main' ? removePrefixFromNavigation(navigation) : navigation
+const navigation = computed(() => {
+  const main = nav.value.filter(item => item._path !== '/dev')
+  const dev = nav.value.find(item => item._path === '/dev')?.children
+
+  return branch.value?.name === 'dev' ? dev : main
 })
 
-const files = computed(() => {
-  const files = search.value.filter(file => file._path.startsWith(prefix.value))
+const groups = computed(() => {
+  if (route.path === '/') {
+    return []
+  }
 
-  return prefix.value === '/main' ? removePrefixFromFiles(files) : files
+  return [{ key: 'branch', label: 'Branch', commands: branches.value }]
 })
 
 const color = computed(() => colorMode.value === 'dark' ? '#18181b' : 'white')
 
+// Watch
+
+watch(() => searchRef.value?.commandPaletteRef?.query, debounce((query: string) => {
+  if (!query) {
+    return
+  }
+
+  useTrackEvent('Search', { props: { query: `${query} - ${searchRef.value?.commandPaletteRef.results.length} results` } })
+}, 500))
+
 // Head
+
 useHead({
   meta: [
-    { name: 'viewport', content: 'width=device-width, initial-scale=1, maximum-scale=1' },
+    { name: 'viewport', content: 'width=device-width, initial-scale=1' },
     { key: 'theme-color', name: 'theme-color', content: color }
   ],
   link: [
@@ -74,6 +90,7 @@ useServerSeoMeta({
 })
 
 // Provide
+
 provide('navigation', navigation)
 provide('files', files)
 </script>

docs/components/BranchSelect.vue

@@ -10,7 +10,7 @@
       color="gray"
       :ui="{ icon: { trailing: { padding: { sm: 'pe-1.5' } } } }"
       :ui-menu="{ option: { container: 'gap-1.5' } }"
-      @update:model-value="selectBranch"
+      @update:model-value="select"
     >
       <template #label>
         <UIcon v-if="branch.icon" :name="branch.icon" class="w-4 h-4 flex-shrink-0 text-gray-600 dark:text-gray-300" />
@@ -32,19 +32,5 @@
 </template>
 
 <script setup lang="ts">
-const route = useRoute()
-const router = useRouter()
-const { branches, branch } = useContentSource()
-
-function selectBranch (branch) {
-  if (branch.name === 'dev') {
-    if (route.path.startsWith('/dev')) {
-      return
-    }
-
-    router.push(`/dev${route.path}`)
-  } else {
-    router.push(route.path.replace('/dev', ''))
-  }
-}
+const { branches, branch, select } = useContentSource()
 </script>

docs/components/Footer.vue

@@ -1,5 +1,5 @@
 <template>
-  <div class="w-full h-px bg-gray-200 dark:bg-gray-800 flex items-center justify-center">
+  <div v-if="$route.path !== '/playground'" class="w-full h-px bg-gray-200 dark:bg-gray-800 flex items-center justify-center">
     <div class="bg-white dark:bg-gray-900 px-4">
       <LogoOnly class="w-5 h-5" />
     </div>
@@ -7,7 +7,7 @@
 
   <UFooter :links="[]" :ui="{ bottom: { container: 'lg:py-4' } }">
     <template #left>
-      <div class="text-sm text-gray-600 dark:text-gray-300">
+      <div class="text-sm text-gray-500 dark:text-gray-400">
         Made by
         <NuxtLink to="https://nuxtlabs.com" aria-label="NuxtLabs" class="inline-block">
           <LogoLabs class="text-gray-900 dark:text-white h-4 w-auto" />
@@ -16,7 +16,7 @@
     </template>
 
     <template #center>
-      <span class="text-sm text-gray-600 dark:text-gray-300">
+      <span class="text-sm text-gray-500 dark:text-gray-400">
         Published under <NuxtLink to="https://github.com/nuxt/ui" target="_blank" class="text-gray-900 dark:text-white">
           MIT License
         </NuxtLink>
@@ -24,9 +24,14 @@
     </template>
 
     <template #right>
-      <USocialButton aria-label="Nuxt Website" icon="i-simple-icons-nuxtdotjs" to="https://nuxt.com" />
-      <USocialButton aria-label="Nuxt on X" icon="i-simple-icons-x" to="https://x.com/nuxtlabs" />
-      <USocialButton aria-label="Nuxt UI on GitHub" icon="i-simple-icons-github" to="https://github.com/nuxt/ui" />
+      <UButton aria-label="Nuxt Website" icon="i-simple-icons-nuxtdotjs" to="https://nuxt.com" target="_blank" v-bind="($ui.button.secondary as any)" />
+      <UButton aria-label="Nuxt UI on Discord" icon="i-simple-icons-discord" to="https://discord.com/invite/ps2h6QT" target="_blank" v-bind="($ui.button.secondary as any)" />
+      <UButton aria-label="Nuxt on X" icon="i-simple-icons-x" to="https://x.com/nuxt_js" target="_blank" v-bind="($ui.button.secondary as any)" />
+      <UButton aria-label="Nuxt UI on GitHub" icon="i-simple-icons-github" to="https://github.com/nuxt/ui" target="_blank" v-bind="($ui.button.secondary as any)" />
     </template>
   </UFooter>
 </template>
+
+<script setup lang="ts">
+// force typescript
+</script>

docs/components/Header.vue

@@ -7,23 +7,27 @@
     }"
   >
     <template #left>
-      <NuxtLink to="/" class="flex items-end gap-1.5 font-bold text-xl text-gray-900 dark:text-white">
+      <NuxtLink to="/" class="flex items-end gap-1.5 font-bold text-xl text-gray-900 dark:text-white" aria-label="Nuxt UI">
         <Logo class="w-auto h-6" />
       </NuxtLink>
     </template>
 
-    <template v-if="$route.path !== '/'" #center>
-      <UDocsSearchButton class="ml-1.5 flg:w-64 xl:w-96" />
-    </template>
-
     <template #right>
       <ColorPicker />
 
-      <UDocsSearchButton v-if="$route.path === '/'" icon-only />
+      <UTooltip text="Search" :shortcuts="[metaSymbol, 'K']">
+        <UDocsSearchButton :label="null" />
+      </UTooltip>
 
-      <UColorModeButton v-if="!$colorMode.forced" />
+      <UColorModeButton />
 
-      <USocialButton to="https://github.com/nuxt/ui" target="_blank" icon="i-simple-icons-github" class="hidden lg:inline-flex" />
+      <UButton
+        to="https://github.com/nuxt/ui"
+        target="_blank"
+        icon="i-simple-icons-github"
+        aria-label="GitHub"
+        v-bind="($ui.button.secondary as any)"
+      />
     </template>
 
     <template #panel>
@@ -37,25 +41,27 @@
 <script setup lang="ts">
 import type { NavItem } from '@nuxt/content/dist/runtime/types'
 
-const route = useRoute()
-const { mapContentNavigation } = useElementsHelpers()
+const { metaSymbol } = useShortcuts()
 
 const navigation = inject<Ref<NavItem[]>>('navigation')
 
 const links = computed(() => {
-  if (route.path !== '/') {
-    return []
-  }
-
   return [{
     label: 'Documentation',
     icon: 'i-heroicons-book-open-solid',
     to: '/getting-started'
+  }, {
+    label: 'Examples',
+    icon: 'i-heroicons-square-3-stack-3d',
+    to: '/getting-started/examples'
   }, {
     label: 'Playground',
     icon: 'i-simple-icons-stackblitz',
-    to: 'https://stackblitz.com/edit/nuxt-ui?file=app.config.ts,app.vue',
-    target: '_blank'
+    to: '/playground'
+  }, {
+    label: 'Pro',
+    icon: 'i-heroicons-square-3-stack-3d',
+    to: '/pro'
   }, {
     label: 'Releases',
     icon: 'i-heroicons-rocket-launch-solid',

docs/components/color-picker/ColorPicker.vue

@@ -1,7 +1,7 @@
 <template>
   <UPopover mode="hover">
     <template #default="{ open }">
-      <UButton color="gray" variant="ghost" square :class="[open && 'bg-gray-50 dark:bg-gray-800']">
+      <UButton color="gray" variant="ghost" square :class="[open && 'bg-gray-50 dark:bg-gray-800']" aria-label="Color picker">
         <UIcon name="i-heroicons-swatch-20-solid" class="w-5 h-5 text-primary-500 dark:text-primary-400" />
       </UButton>
     </template>
@@ -30,7 +30,7 @@ const colorMode = useColorMode()
 
 // Computed
 
-const primaryColors = computed(() => useWithout(appConfig.ui.colors, 'primary').map(color => ({ value: color, text: color, hex: colors[color][colorMode.value === 'dark' ? 400 : 500] })))
+const primaryColors = computed(() => appConfig.ui.colors.filter(color => color !== 'primary').map(color => ({ value: color, text: color, hex: colors[color][colorMode.value === 'dark' ? 400 : 500] })))
 const primary = computed({
   get () {
     return primaryColors.value.find(option => option.value === appConfig.ui.primary)

docs/components/color-picker/ColorPickerPill.vue

@@ -1,12 +1,12 @@
 <template>
   <UTooltip :text="color.value" class="capitalize" :open-delay="500">
     <UButton
-      color="transparent"
+      color="white"
       square
       :ui="{
         color: {
-          transparent: {
-            solid: 'bg-gray-100 dark:bg-gray-800',
+          white: {
+            solid: 'ring-0 bg-gray-100 dark:bg-gray-800 hover:bg-gray-100 dark:hover:bg-gray-800',
             ghost: 'hover:bg-gray-50 dark:hover:bg-gray-800/50'
           }
         }

docs/components/content/ComponentCard.vue

@@ -41,18 +41,21 @@
         <ContentSlot v-if="$slots.default" :use="$slots.default" />
 
         <template v-for="slot in Object.keys(slots || {})" :key="slot" #[slot]>
-          <ContentSlot :name="slot" />
+          <ContentSlot :name="slot" unwrap="p" />
         </template>
       </component>
     </div>
 
-    <ContentRenderer v-if="!previewOnly" :value="ast" class="[&>div>pre]:!rounded-t-none" />
+    <ContentRenderer v-if="!previewOnly" :value="ast" class="[&>div>pre]:!rounded-t-none [&>div>pre]:!mt-0" />
   </div>
 </template>
 
 <script setup lang="ts">
 // @ts-expect-error
 import { transformContent } from '@nuxt/content/transformers'
+// @ts-ignore
+import { useShikiHighlighter } from '@nuxtjs/mdc/runtime'
+import { upperFirst, camelCase, kebabCase } from 'scule'
 
 // eslint-disable-next-line vue/no-dupe-keys
 const props = defineProps({
@@ -88,8 +91,8 @@ const props = defineProps({
     type: Array,
     default: () => []
   },
-  extraColors: {
-    type: Array,
+  options: {
+    type: Array as PropType<{ name: string; values: string[]; restriction: 'expected' | 'included' | 'excluded' | 'only' }[]>,
     default: () => []
   },
   backgroundClass: {
@@ -110,21 +113,19 @@ const props = defineProps({
 const baseProps = reactive({ ...props.baseProps })
 const componentProps = reactive({ ...props.props })
 
+const { $prettier } = useNuxtApp()
 const appConfig = useAppConfig()
 const route = useRoute()
 // eslint-disable-next-line vue/no-dupe-keys
 const slug = props.slug || route.params.slug[route.params.slug.length - 1]
-const camelName = useCamelCase(slug)
-const name = `U${useUpperFirst(camelName)}`
+const camelName = camelCase(slug)
+const name = `U${upperFirst(camelName)}`
 
 const meta = await fetchComponentMeta(name)
 
 // Computed
 
-// eslint-disable-next-line vue/no-dupe-keys
-const ui = computed(() => ({ ...appConfig.ui[camelName], ...props.ui }))
-
-const fullProps = computed(() => ({ ...baseProps, ...componentProps }))
+const fullProps = computed(() => ({ ...componentProps, ...baseProps }))
 const vModel = computed({
   get: () => baseProps.modelValue,
   set: (value) => {
@@ -132,24 +133,52 @@ const vModel = computed({
   }
 })
 
+const generateOptions = (key: string, schema: { kind: string, schema: [], type: string }) => {
+  let options = []
+  const optionItem = props?.options?.find(item => item?.name === key) || null
+  const types = schema?.type?.split('|')?.map(item => item.trim()?.replaceAll('"', '')) || []
+  const hasIgnoredTypes = types?.every(item => ['string', 'number', 'boolean', 'array', 'object', 'Function'].includes(item))
+
+  if (key.toLowerCase().endsWith('color')) {
+    options = [...appConfig.ui.colors]
+  }
+
+  if (schema?.schema?.length > 0 && schema?.kind === 'enum' && !hasIgnoredTypes && optionItem?.restriction !== 'only') {
+    options = schema.schema.filter(option => typeof option === 'string').map((option: string) => option.replaceAll('"', ''))
+  }
+
+  if (optionItem?.restriction === 'only') {
+    options = optionItem.values
+  }
+
+  if (optionItem?.restriction === 'expected') {
+    options = options.filter(item => optionItem.values.includes(item))
+  }
+
+  if (optionItem?.restriction === 'included') {
+    options = [...options, ...optionItem.values]
+  }
+
+  if (optionItem?.restriction === 'excluded') {
+    options = options.filter(item => !optionItem.values.includes(item))
+  }
+
+  return options
+}
+
 const propsToSelect = computed(() => Object.keys(componentProps).map((key) => {
   if (props.excludedProps.includes(key)) {
     return null
   }
 
   const prop = meta?.meta?.props?.find((prop: any) => prop.name === key)
-  const dottedKey = useKebabCase(key).replaceAll('-', '.')
-  const keys = useGet(ui.value, dottedKey, {})
-  let options = typeof keys === 'object' && Object.keys(keys)
-  if (key.toLowerCase().endsWith('color')) {
-    // @ts-ignore
-    options = [...appConfig.ui.colors, ...props.extraColors]
-  }
+  const schema = prop?.schema || {}
+  const options = generateOptions(key, schema)
 
   return {
     type: prop?.type || 'string',
     name: key,
-    label: key === 'modelValue' ? 'value' : useCamelCase(key),
+    label: key === 'modelValue' ? 'value' : camelCase(key),
     options
   }
 }).filter(Boolean))
@@ -158,12 +187,12 @@ const propsToSelect = computed(() => Object.keys(componentProps).map((key) => {
 const code = computed(() => {
   let code = `\`\`\`html
 <${name}`
-  for (const [key, value] of Object.entries(componentProps)) {
+  for (const [key, value] of Object.entries(fullProps.value)) {
     if (value === 'undefined' || value === null) {
       continue
     }
 
-    code += ` ${(typeof value === 'boolean' && value !== true) || typeof value === 'object' || typeof value === 'number' ? ':' : ''}${key === 'modelValue' ? 'value' : useKebabCase(key)}${typeof value === 'boolean' && !!value && key !== 'modelValue' ? '' : `="${typeof value === 'object' ? renderObject(value) : value}"`}`
+    code += ` ${(typeof value === 'boolean' && value !== true) || typeof value === 'object' || typeof value === 'number' ? ':' : ''}${key === 'modelValue' ? 'value' : kebabCase(key)}${typeof value === 'boolean' && !!value && key !== 'modelValue' ? '' : `="${typeof value === 'object' ? renderObject(value) : value}"`}`
   }
 
   if (props.slots) {
@@ -178,7 +207,7 @@ const code = computed(() => {
       code += `>
   ${props.code}</${name}>`
     } else {
-      code += `>${props.code}</${name}>`
+      code += `>${props.code.endsWith('>') ? `${props.code}\n` : props.code}</${name}>`
     }
   } else {
     code += ' />'
@@ -205,13 +234,29 @@ function renderObject (obj: any) {
   return obj
 }
 
-const { data: ast } = await useAsyncData(`${name}-ast-${JSON.stringify(props)}`, () => transformContent('content:_markdown.md', code.value, {
-  highlight: {
-    theme: {
-      light: 'material-theme-lighter',
-      default: 'material-theme',
-      dark: 'material-theme-palenight'
+const shikiHighlighter = useShikiHighlighter({})
+const codeHighlighter = async (code: string, lang: string, theme: any, highlights: number[]) => shikiHighlighter.getHighlightedAST(code, lang, theme, { highlights })
+const { data: ast } = await useAsyncData(
+  `${name}-ast-${JSON.stringify({ props: componentProps, slots: props.slots })}`,
+  async () => {
+    let formatted = ''
+    try {
+      formatted = await $prettier.format(code.value) || code.value
+    } catch (error) {
+      formatted = code.value
     }
-  }
-}), { watch: [code] })
+
+    return transformContent('content:_markdown.md', formatted, {
+      markdown: {
+        highlight: {
+          highlighter: codeHighlighter,
+          theme: {
+            light: 'material-theme-lighter',
+            default: 'material-theme',
+            dark: 'material-theme-palenight'
+          }
+        }
+      }
+    })
+  }, { watch: [code] })
 </script>

docs/components/content/ComponentExample.vue

@@ -1,15 +1,44 @@
 <template>
-  <div class="[&>div>pre]:!rounded-t-none">
-    <div class="flex border border-gray-200 dark:border-gray-700 relative not-prose rounded-t-md" :class="[{ 'p-4': padding, 'rounded-b-md': !$slots.code, 'border-b-0': !!$slots.code }, backgroundClass, overflowClass]">
+  <div class="[&>div>pre]:!rounded-t-none [&>div>pre]:!mt-0">
+    <div
+      class="flex border border-gray-200 dark:border-gray-700 relative not-prose rounded-t-md"
+      :class="[{ 'p-4': padding, 'rounded-b-md': !hasCode, 'border-b-0': hasCode }, backgroundClass, overflowClass]"
+    >
+      <component :is="camelName" v-if="component" v-bind="componentProps" />
       <ContentSlot v-if="$slots.default" :use="$slots.default" />
     </div>
-
-    <ContentSlot v-if="$slots.code" :use="$slots.code" />
+    <template v-if="hasCode">
+      <ContentSlot v-if="$slots.code" :use="$slots.code" />
+      <ContentRenderer v-else :value="ast" class="[&>div>pre]:!rounded-t-none [&>div>pre]:!mt-0" />
+    </template>
   </div>
 </template>
 
 <script setup lang="ts">
-defineProps({
+import { camelCase } from 'scule'
+import { fetchContentExampleCode } from '~/composables/useContentExamplesCode'
+// @ts-expect-error
+import { transformContent } from '@nuxt/content/transformers'
+// @ts-ignore
+import { useShikiHighlighter } from '@nuxtjs/mdc/runtime'
+
+const props = defineProps({
+  component: {
+    type: String,
+    default: null
+  },
+  componentClass: {
+    type: String,
+    default: ''
+  },
+  componentProps: {
+    type: Object,
+    default: () => ({})
+  },
+  hiddenCode: {
+    type: Boolean,
+    default: false
+  },
   padding: {
     type: Boolean,
     default: true
@@ -23,4 +52,25 @@ defineProps({
     default: ''
   }
 })
+
+const instance = getCurrentInstance()
+const camelName = camelCase(props.component)
+const data = await fetchContentExampleCode(camelName)
+
+const hasCode = computed(() => !props.hiddenCode && (data?.code || instance.slots.code))
+
+const shikiHighlighter = useShikiHighlighter({})
+const codeHighlighter = async (code: string, lang: string, theme: any, highlights: number[]) => shikiHighlighter.getHighlightedAST(code, lang, theme, { highlights })
+const { data: ast } = await useAsyncData(`content-example-${camelName}-ast`, () => transformContent('content:_markdown.md', `\`\`\`vue\n${data?.code ?? ''}\n\`\`\``, {
+  markdown: {
+    highlight: {
+      highlighter: codeHighlighter,
+      theme: {
+        light: 'material-theme-lighter',
+        default: 'material-theme',
+        dark: 'material-theme-palenight'
+      }
+    }
+  }
+}))
 </script>

docs/components/content/ComponentPreset.vue

@@ -5,6 +5,8 @@
 <script setup lang="ts">
 // @ts-expect-error
 import { transformContent } from '@nuxt/content/transformers'
+import { upperFirst, camelCase } from 'scule'
+import * as config from '#ui/ui.config'
 
 const props = defineProps({
   slug: {
@@ -13,17 +15,16 @@ const props = defineProps({
   }
 })
 
-const appConfig = useAppConfig()
 const route = useRoute()
 // eslint-disable-next-line vue/no-dupe-keys
 const slug = props.slug || route.params.slug[route.params.slug.length - 1]
-const camelName = useCamelCase(slug)
-const name = `U${useUpperFirst(camelName)}`
+const camelName = camelCase(slug)
+const name = `U${upperFirst(camelName)}`
 
-const preset = appConfig.ui[camelName]
+const preset = config[camelName]
 
 const { data: ast } = await useAsyncData(`${name}-preset`, () => transformContent('content:_markdown.md', `
-\`\`\`json [appConfig.ui.${camelName}]
+\`\`\`json [${name}.vue]
 ${JSON.stringify(preset, null, 2)}
 \`\`\`\
 `, {

docs/components/content/ComponentProps.vue

@@ -7,6 +7,8 @@
 </template>
 
 <script setup lang="ts">
+import { upperFirst, camelCase } from 'scule'
+
 const props = defineProps({
   slug: {
     type: String,
@@ -17,8 +19,8 @@ const props = defineProps({
 const route = useRoute()
 // eslint-disable-next-line vue/no-dupe-keys
 const slug = props.slug || route.params.slug[route.params.slug.length - 1]
-const camelName = useCamelCase(slug)
-const name = `U${useUpperFirst(camelName)}`
+const camelName = camelCase(slug)
+const name = `U${upperFirst(camelName)}`
 
 const meta = await fetchComponentMeta(name)
 </script>

docs/components/content/ComponentPropsField.vue

@@ -19,8 +19,8 @@
         <ComponentPropsField v-for="subProp in Object.values(prop.schema.schema)" :key="(subProp as any).name" :prop="subProp" />
       </FieldGroup>
     </Collapsible>
-    <div v-else-if="prop.schema?.kind === 'enum' && prop.schema.type !== 'boolean' && startsWithCapital(prop.schema.type)" class="space-x-1 leading-7 -my-1">
-      <code v-for="value in prop.schema.schema" :key="value">{{ value }}</code>
+    <div v-else-if="prop.schema?.kind === 'enum' && prop.schema.type !== 'boolean' && startsWithCapital(prop.schema.type) && !prop.schema.type.startsWith(prop.schema.schema[0])" class="space-x-1 leading-7 -my-1">
+      <code v-for="value in prop.schema.schema.filter(value => typeof value === 'string')" :key="value" class="whitespace-pre-wrap break-words">{{ value }}</code>
     </div>
   </Field>
 </template>

docs/components/content/ComponentSlots.vue

@@ -18,6 +18,8 @@
 </template>
 
 <script setup lang="ts">
+import { upperFirst, camelCase } from 'scule'
+
 const props = defineProps({
   slug: {
     type: String,
@@ -28,8 +30,8 @@ const props = defineProps({
 const route = useRoute()
 // eslint-disable-next-line vue/no-dupe-keys
 const slug = props.slug || route.params.slug[route.params.slug.length - 1]
-const camelName = useCamelCase(slug)
-const name = `U${useUpperFirst(camelName)}`
+const camelName = camelCase(slug)
+const name = `U${upperFirst(camelName)}`
 
 const meta = await fetchComponentMeta(name)
 </script>

docs/components/content/examples/AccordionExampleItemSlot.vue

@@ -61,9 +61,9 @@ const items = [{
       </div>
 
       <div class="flex flex-col items-center">
-        <code>$ npm install @nuxt/ui</code>
-        <code>$ nnpm install -D @nuxt/ui</code>
-        <code>$ pnpm i -D @nuxt/ui</code>
+        <code>$ npm i @nuxt/ui</code>
+        <code>$ yarn add @nuxt/ui</code>
+        <code>$ pnpm add @nuxt/ui</code>
       </div>
     </template>
   </UAccordion>

docs/components/content/examples/CommandPaletteExampleAsync.vue

@@ -1,19 +1,17 @@
 <script setup>
-const groups = computed(() => {
-  return [{
-    key: 'users',
-    label: q => q && `Users matching “${q}”...`,
-    search: async (q) => {
-      if (!q) {
-        return []
-      }
-
-      const users = await $fetch('https://jsonplaceholder.typicode.com/users', { params: { q } })
-
-      return users.map(user => ({ id: user.id, label: user.name, suffix: user.email }))
+const groups = [{
+  key: 'users',
+  label: q => q && `Users matching “${q}”...`,
+  search: async (q) => {
+    if (!q) {
+      return []
     }
-  }].filter(Boolean)
-})
+
+    const users = await $fetch('https://jsonplaceholder.typicode.com/users', { params: { q } })
+
+    return users.map(user => ({ id: user.id, label: user.name, suffix: user.email }))
+  }
+}]
 </script>
 
 <template>

docs/components/content/examples/CommandPaletteExampleFilter.vue

@@ -0,0 +1,30 @@
+<script setup>
+const people = [
+  { id: 1, label: 'Wade Cooper', child: true },
+  { id: 2, label: 'Arlene Mccoy' },
+  { id: 3, label: 'Devon Webb', child: true },
+  { id: 4, label: 'Tom Cook' },
+  { id: 5, label: 'Tanya Fox', child: true },
+  { id: 6, label: 'Hellen Schmidt' },
+  { id: 7, label: 'Caroline Schultz', child: true },
+  { id: 8, label: 'Mason Heaney' },
+  { id: 9, label: 'Claudie Smitham', child: true },
+  { id: 10, label: 'Emil Schaefer' }
+]
+
+const groups = [{
+  key: 'users',
+  commands: people,
+  filter: (q, commands) => {
+    if (!q) {
+      return commands?.filter(command => !command.child)
+    }
+
+    return commands
+  }
+}]
+</script>
+
+<template>
+  <UCommandPalette :groups="groups" :autoselect="false" />
+</template>

docs/components/content/examples/CommandPaletteExampleGroups.vue

@@ -5,9 +5,9 @@ const toast = useToast()
 const commandPaletteRef = ref()
 
 const users = [
-  { id: 'benjamincanac', label: 'benjamincanac', href: 'https://github.com/benjamincanac', target: '_blank', avatar: { src: 'https://ipx.nuxt.com/s_16x16/gh_avatar/benjamincanac', srcset: 'https://ipx.nuxt.com/s_32x32/gh_avatar/benjamincanac 2x' } },
-  { id: 'Atinux', label: 'Atinux', href: 'https://github.com/Atinux', target: '_blank', avatar: { src: 'https://ipx.nuxt.com/s_16x16/gh_avatar/Atinux', srcset: 'https://ipx.nuxt.com/s_32x32/gh_avatar/Atinux 2x' } },
-  { id: 'smarroufin', label: 'smarroufin', href: 'https://github.com/smarroufin', target: '_blank', avatar: { src: 'https://ipx.nuxt.com/s_16x16/gh_avatar/smarroufin', srcset: 'https://ipx.nuxt.com/s_32x32/gh_avatar/smarroufin 2x' } }
+  { id: 'benjamincanac', label: 'benjamincanac', href: 'https://github.com/benjamincanac', target: '_blank', avatar: { src: 'https://ipx.nuxt.com/s_16x16/gh_avatar/benjamincanac', srcset: 'https://ipx.nuxt.com/s_32x32/gh_avatar/benjamincanac 2x', loading: 'lazy' } },
+  { id: 'Atinux', label: 'Atinux', href: 'https://github.com/Atinux', target: '_blank', avatar: { src: 'https://ipx.nuxt.com/s_16x16/gh_avatar/Atinux', srcset: 'https://ipx.nuxt.com/s_32x32/gh_avatar/Atinux 2x', loading: 'lazy' } },
+  { id: 'smarroufin', label: 'smarroufin', href: 'https://github.com/smarroufin', target: '_blank', avatar: { src: 'https://ipx.nuxt.com/s_16x16/gh_avatar/smarroufin', srcset: 'https://ipx.nuxt.com/s_32x32/gh_avatar/smarroufin 2x', loading: 'lazy' } }
 ]
 
 const actions = [

docs/components/content/examples/ContextMenuExampleArrow.vue

@@ -0,0 +1,35 @@
+<script setup>
+const { x, y } = useMouse()
+const { y: windowY } = useWindowScroll()
+
+const isOpen = ref(false)
+const virtualElement = ref({ getBoundingClientRect: () => ({}) })
+
+function onContextMenu () {
+  const top = unref(y) - unref(windowY)
+  const left = unref(x)
+
+  virtualElement.value.getBoundingClientRect = () => ({
+    width: 0,
+    height: 0,
+    top,
+    left
+  })
+
+  isOpen.value = true
+}
+</script>
+
+<template>
+  <div class="w-full" @contextmenu.prevent="onContextMenu">
+    <Placeholder class="h-96 select-none w-full flex items-center justify-center">
+      Right click here
+    </Placeholder>
+
+    <UContextMenu v-model="isOpen" :virtual-element="virtualElement" :popper="{ arrow: true, placement: 'right' }">
+      <div class="p-4">
+        Menu
+      </div>
+    </UContextMenu>
+  </div>
+</template>

docs/components/content/examples/ContextMenuExampleOffset.vue

@@ -0,0 +1,35 @@
+<script setup>
+const { x, y } = useMouse()
+const { y: windowY } = useWindowScroll()
+
+const isOpen = ref(false)
+const virtualElement = ref({ getBoundingClientRect: () => ({}) })
+
+function onContextMenu () {
+  const top = unref(y) - unref(windowY)
+  const left = unref(x)
+
+  virtualElement.value.getBoundingClientRect = () => ({
+    width: 0,
+    height: 0,
+    top,
+    left
+  })
+
+  isOpen.value = true
+}
+</script>
+
+<template>
+  <div class="w-full" @contextmenu.prevent="onContextMenu">
+    <Placeholder class="h-96 select-none w-full flex items-center justify-center">
+      Right click here
+    </Placeholder>
+
+    <UContextMenu v-model="isOpen" :virtual-element="virtualElement" :popper="{ offset: 0 }">
+      <div class="p-4">
+        Menu
+      </div>
+    </UContextMenu>
+  </div>
+</template>

docs/components/content/examples/ContextMenuExamplePlacement.vue

@@ -0,0 +1,35 @@
+<script setup>
+const { x, y } = useMouse()
+const { y: windowY } = useWindowScroll()
+
+const isOpen = ref(false)
+const virtualElement = ref({ getBoundingClientRect: () => ({}) })
+
+function onContextMenu () {
+  const top = unref(y) - unref(windowY)
+  const left = unref(x)
+
+  virtualElement.value.getBoundingClientRect = () => ({
+    width: 0,
+    height: 0,
+    top,
+    left
+  })
+
+  isOpen.value = true
+}
+</script>
+
+<template>
+  <div class="w-full" @contextmenu.prevent="onContextMenu">
+    <Placeholder class="h-96 select-none w-full flex items-center justify-center">
+      Right click here
+    </Placeholder>
+
+    <UContextMenu v-model="isOpen" :virtual-element="virtualElement" :popper="{ placement: 'right-start' }">
+      <div class="p-4">
+        Menu
+      </div>
+    </UContextMenu>
+  </div>
+</template>

docs/components/content/examples/DatePickerExample.vue

@@ -10,7 +10,7 @@ const label = computed(() => date.value.toLocaleDateString('en-us', { weekday: '
     <UButton icon="i-heroicons-calendar-days-20-solid" :label="label" />
 
     <template #panel="{ close }">
-      <DatePicker v-model="date" @close="close" />
+      <LazyDatePicker v-model="date" @close="close" />
     </template>
   </UPopover>
 </template>

docs/components/content/examples/DividerExampleDefaultSlot.vue

@@ -0,0 +1,5 @@
+<template>
+  <UDivider>
+    <Logo class="w-28 h-6" />
+  </UDivider>
+</template>

docs/components/content/examples/DividerExampleOrientation.vue

@@ -0,0 +1,47 @@
+<script setup>
+const form = reactive({ email: 'mail@example.com', password: 'password' })
+</script>
+
+<template>
+  <div class="w-full flex flex-col gap-y-4">
+    <UCard :ui="{ body: { base: 'grid grid-cols-3' } }">
+      <div class="space-y-4">
+        <UFormGroup label="Email" name="email">
+          <UInput v-model="form.email" />
+        </UFormGroup>
+
+        <UFormGroup label="Password" name="password">
+          <UInput v-model="form.password" type="password" />
+        </UFormGroup>
+
+        <UButton label="Login" color="gray" block />
+      </div>
+
+      <UDivider label="OR" color="gray" orientation="vertical" />
+
+      <div class="space-y-4 flex flex-col justify-center">
+        <UButton color="black" label="Login with GitHub" icon="i-simple-icons-github" block />
+        <UButton color="black" label="Login with Google" icon="i-simple-icons-google" block />
+      </div>
+    </UCard>
+
+    <UCard>
+      <div class="space-y-4">
+        <UFormGroup label="Email" name="email">
+          <UInput v-model="form.email" />
+        </UFormGroup>
+
+        <UFormGroup label="Password" name="password">
+          <UInput v-model="form.password" type="password" />
+        </UFormGroup>
+
+        <UButton label="Login" color="gray" block />
+
+        <UDivider label="OR" color="gray" />
+
+        <UButton color="black" label="Login with GitHub" icon="i-simple-icons-github" block />
+        <UButton color="black" label="Login with Google" icon="i-simple-icons-google" block />
+      </div>
+    </UCard>
+  </div>
+</template>

docs/components/content/examples/DropdownExampleArrow.vue

@@ -0,0 +1,16 @@
+<script setup>
+const items = [
+  [{
+    label: 'Profile',
+    avatar: {
+      src: 'https://avatars.githubusercontent.com/u/739984?v=4'
+    }
+  }]
+]
+</script>
+
+<template>
+  <UDropdown :items="items" :popper="{ arrow: true }">
+    <UButton color="white" label="Options" trailing-icon="i-heroicons-chevron-down-20-solid" />
+  </UDropdown>
+</template>

docs/components/content/examples/DropdownExampleOffset.vue

@@ -0,0 +1,16 @@
+<script setup>
+const items = [
+  [{
+    label: 'Profile',
+    avatar: {
+      src: 'https://avatars.githubusercontent.com/u/739984?v=4'
+    }
+  }]
+]
+</script>
+
+<template>
+  <UDropdown :items="items" :popper="{ offsetDistance: 0, placement: 'right-start' }">
+    <UButton color="white" label="Options" trailing-icon="i-heroicons-chevron-down-20-solid" />
+  </UDropdown>
+</template>

docs/components/content/examples/DropdownExamplePlacement.vue

@@ -0,0 +1,16 @@
+<script setup>
+const items = [
+  [{
+    label: 'Profile',
+    avatar: {
+      src: 'https://avatars.githubusercontent.com/u/739984?v=4'
+    }
+  }]
+]
+</script>
+
+<template>
+  <UDropdown :items="items" :popper="{ placement: 'right-start' }">
+    <UButton color="white" label="Options" trailing-icon="i-heroicons-chevron-down-20-solid" />
+  </UDropdown>
+</template>

docs/components/content/examples/FormExampleBasic.vue

@@ -1,8 +1,7 @@
 <script setup lang="ts">
-import { ref } from 'vue'
-import type { FormError, FormSubmitEvent } from '@nuxt/ui/dist/runtime/types'
+import type { FormError, FormSubmitEvent } from '#ui/types'
 
-const state = ref({
+const state = reactive({
   email: undefined,
   password: undefined
 })
@@ -14,18 +13,14 @@ const validate = (state: any): FormError[] => {
   return errors
 }
 
-async function submit (event: FormSubmitEvent<any>) {
+async function onSubmit (event: FormSubmitEvent<any>) {
   // Do something with data
   console.log(event.data)
 }
 </script>
 
 <template>
-  <UForm
-    :validate="validate"
-    :state="state"
-    @submit="submit"
-  >
+  <UForm :validate="validate" :state="state" @submit="onSubmit">
     <UFormGroup label="Email" name="email">
       <UInput v-model="state.email" />
     </UFormGroup>

docs/components/content/examples/FormExampleElements.vue

@@ -1,7 +1,6 @@
 <script setup lang="ts">
-import { ref } from 'vue'
 import { z } from 'zod'
-import type { FormSubmitEvent } from '@nuxt/ui/dist/runtime/types'
+import type { FormSubmitEvent } from '#ui/types'
 
 const options = [
   { label: 'Option 1', value: 'option-1' },
@@ -9,7 +8,7 @@ const options = [
   { label: 'Option 3', value: 'option-3' }
 ]
 
-const state = ref({
+const state = reactive({
   input: undefined,
   textarea: undefined,
   select: undefined,
@@ -17,6 +16,7 @@ const state = ref({
   checkbox: undefined,
   toggle: undefined,
   radio: undefined,
+  radioGroup: undefined,
   switch: undefined,
   range: undefined
 })
@@ -39,6 +39,9 @@ const schema = z.object({
   radio: z.string().refine(value => value === 'option-2', {
     message: 'Select Option 2'
   }),
+  radioGroup: z.string().refine(value => value === 'option-2', {
+    message: 'Select Option 2'
+  }),
   range: z.number().max(20, { message: 'Must be less than 20' })
 })
 
@@ -46,19 +49,14 @@ type Schema = z.infer<typeof schema>
 
 const form = ref()
 
-async function submit (event: FormSubmitEvent<Schema>) {
+async function onSubmit (event: FormSubmitEvent<Schema>) {
   // Do something with event.data
   console.log(event.data)
 }
 </script>
 
 <template>
-  <UForm
-    ref="form"
-    :schema="schema"
-    :state="state"
-    @submit="submit"
-  >
+  <UForm ref="form" :schema="schema" :state="state" @submit="onSubmit">
     <UFormGroup name="input" label="Input">
       <UInput v-model="state.input" />
     </UFormGroup>
@@ -80,7 +78,11 @@ async function submit (event: FormSubmitEvent<Schema>) {
     </UFormGroup>
 
     <UFormGroup name="checkbox" label="Checkbox">
-      <UCheckbox v-model="state.checkbox" />
+      <UCheckbox v-model="state.checkbox" label="Check me" />
+    </UFormGroup>
+
+    <UFormGroup name="radioGroup" label="Radio Group">
+      <URadioGroup v-model="state.radioGroup" :options="options" />
     </UFormGroup>
 
     <UFormGroup name="radio" label="Radio">

docs/components/content/examples/FormExampleJoi.vue

@@ -1,7 +1,6 @@
 <script setup lang="ts">
-import { ref } from 'vue'
 import Joi from 'joi'
-import type { FormSubmitEvent } from '@nuxt/ui/dist/runtime/types'
+import type { FormSubmitEvent } from '#ui/types'
 
 const schema = Joi.object({
   email: Joi.string().required(),
@@ -10,23 +9,19 @@ const schema = Joi.object({
     .required()
 })
 
-const state = ref({
+const state = reactive({
   email: undefined,
   password: undefined
 })
 
-async function submit (event: FormSubmitEvent<any>) {
+async function onSubmit (event: FormSubmitEvent<any>) {
   // Do something with event.data
   console.log(event.data)
 }
 </script>
 
 <template>
-  <UForm
-    :schema="schema"
-    :state="state"
-    @submit="submit"
-  >
+  <UForm :schema="schema" :state="state" @submit="onSubmit">
     <UFormGroup label="Email" name="email">
       <UInput v-model="state.email" />
     </UFormGroup>

docs/components/content/examples/FormExampleOnError.vue

@@ -0,0 +1,42 @@
+<script setup lang="ts">
+import type { FormError, FormErrorEvent, FormSubmitEvent } from '#ui/types'
+
+const state = reactive({
+  email: undefined,
+  password: undefined
+})
+
+const validate = (state: any): FormError[] => {
+  const errors = []
+  if (!state.email) errors.push({ path: 'email', message: 'Required' })
+  if (!state.password) errors.push({ path: 'password', message: 'Required' })
+  return errors
+}
+
+async function onSubmit (event: FormSubmitEvent<any>) {
+  // Do something with data
+  console.log(event.data)
+}
+
+async function onError (event: FormErrorEvent) {
+  const element = document.getElementById(event.errors[0].id)
+  element?.focus()
+  element?.scrollIntoView({ behavior: 'smooth', block: 'center' })
+}
+</script>
+
+<template>
+  <UForm :validate="validate" :state="state" @submit="onSubmit" @error="onError">
+    <UFormGroup label="Email" name="email">
+      <UInput v-model="state.email" />
+    </UFormGroup>
+
+    <UFormGroup label="Password" name="password">
+      <UInput v-model="state.password" type="password" />
+    </UFormGroup>
+
+    <UButton type="submit">
+      Submit
+    </UButton>
+  </UForm>
+</template>

docs/components/content/examples/FormExampleValibot.vue

@@ -1,32 +1,27 @@
 <script setup lang="ts">
-import { ref } from 'vue'
-import { string, object, email, minLength, Input } from 'valibot'
-import type { FormSubmitEvent } from '@nuxt/ui/dist/runtime/types'
+import { string, objectAsync, email, minLength, type Input } from 'valibot'
+import type { FormSubmitEvent } from '#ui/types'
 
-const schema = object({
+const schema = objectAsync({
   email: string([email('Invalid email')]),
   password: string([minLength(8, 'Must be at least 8 characters')])
 })
 
 type Schema = Input<typeof schema>
 
-const state = ref({
+const state = reactive({
   email: undefined,
   password: undefined
 })
 
-async function submit (event: FormSubmitEvent<Schema>) {
+async function onSubmit (event: FormSubmitEvent<Schema>) {
   // Do something with event.data
   console.log(event.data)
 }
 </script>
 
 <template>
-  <UForm
-    :schema="schema"
-    :state="state"
-    @submit="submit"
-  >
+  <UForm :schema="schema" :state="state" @submit="onSubmit">
     <UFormGroup label="Email" name="email">
       <UInput v-model="state.email" />
     </UFormGroup>

docs/components/content/examples/FormExampleYup.vue

@@ -1,7 +1,6 @@
 <script setup lang="ts">
-import { ref } from 'vue'
-import { object, string, InferType } from 'yup'
-import type { FormSubmitEvent } from '@nuxt/ui/dist/runtime/types'
+import { object, string, type InferType } from 'yup'
+import type { FormSubmitEvent } from '#ui/types'
 
 const schema = object({
   email: string().email('Invalid email').required('Required'),
@@ -12,23 +11,19 @@ const schema = object({
 
 type Schema = InferType<typeof schema>
 
-const state = ref({
+const state = reactive({
   email: undefined,
   password: undefined
 })
 
-async function submit (event: FormSubmitEvent<Schema>) {
+async function onSubmit (event: FormSubmitEvent<Schema>) {
   // Do something with event.data
   console.log(event.data)
 }
 </script>
 
 <template>
-  <UForm
-    :schema="schema"
-    :state="state"
-    @submit="submit"
-  >
+  <UForm :schema="schema" :state="state" @submit="onSubmit">
     <UFormGroup label="Email" name="email">
       <UInput v-model="state.email" />
     </UFormGroup>

docs/components/content/examples/FormExampleZod.vue

@@ -1,7 +1,6 @@
 <script setup lang="ts">
-import { ref } from 'vue'
 import { z } from 'zod'
-import type { FormSubmitEvent } from '@nuxt/ui/dist/runtime/types'
+import type { FormSubmitEvent } from '#ui/types'
 
 const schema = z.object({
   email: z.string().email('Invalid email'),
@@ -10,23 +9,19 @@ const schema = z.object({
 
 type Schema = z.output<typeof schema>
 
-const state = ref({
+const state = reactive({
   email: undefined,
   password: undefined
 })
 
-async function submit (event: FormSubmitEvent<Schema>) {
+async function onSubmit (event: FormSubmitEvent<Schema>) {
   // Do something with data
   console.log(event.data)
 }
 </script>
 
 <template>
-  <UForm
-    :schema="schema"
-    :state="state"
-    @submit="submit"
-  >
+  <UForm :schema="schema" :state="state" @submit="onSubmit">
     <UFormGroup label="Email" name="email">
       <UInput v-model="state.email" />
     </UFormGroup>

docs/components/content/examples/FormGroupErrorSlotExample.vue

@@ -0,0 +1,17 @@
+<template>
+  <UFormGroup label="Email" :error="!email && 'You must enter an email'" help="This is a nice email!">
+    <template #default="{ error }">
+      <UInput v-model="email" type="email" placeholder="Enter email" :trailing-icon="error ? 'i-heroicons-exclamation-triangle-20-solid' : undefined" />
+    </template>
+
+    <template #error="{ error }">
+      <span :class="[error ? 'text-red-500 dark:text-red-400' : 'text-primary-500 dark:text-primary-400']">
+        {{ error ? error : 'Your email is valid' }}
+      </span>
+    </template>
+  </UFormGroup>
+</template>
+
+<script setup lang="ts">
+const email = ref('')
+</script>

docs/components/content/examples/MeterGroupExampleSlots.vue

@@ -0,0 +1,17 @@
+<template>
+  <UMeterGroup :max="128">
+    <template #indicator>
+      <div class="flex gap-1.5 justify-between text-sm">
+        <p>86GB used</p>
+        <p class="text-gray-500 dark:text-gray-400">
+          42GB remaining
+        </p>
+      </div>
+    </template>
+
+    <UMeter :value="24" color="gray" label="System" icon="i-heroicons-cog-6-tooth" />
+    <UMeter :value="8" color="red" label="Apps" icon="i-heroicons-window" />
+    <UMeter :value="12" color="yellow" label="Documents" icon="i-heroicons-document" />
+    <UMeter :value="42" color="green" label="Multimedia" icon="i-heroicons-film" />
+  </UMeterGroup>
+</template>

docs/components/content/examples/MeterSlotIndicatorExample.vue

@@ -0,0 +1,15 @@
+<script setup>
+const used = ref(84.2)
+
+const total = 238.42
+</script>
+
+<template>
+  <UMeter :value="used" :max="total">
+    <template #indicator="{ percent }">
+      <div class="text-sm text-right">
+        {{ used }}GB used ({{ Math.round(percent) }}%)
+      </div>
+    </template>
+  </UMeter>
+</template>

docs/components/content/examples/MeterSlotLabelExample.vue

@@ -0,0 +1,15 @@
+<script setup>
+const used = ref(84.2)
+
+const total = 238.42
+</script>
+
+<template>
+  <UMeter :value="used" :max="total">
+    <template #label="{ percent }">
+      <p class="text-sm">
+        You are using {{ Math.round(used) }}GB ({{ Math.round(100 - percent) }}%) of space
+      </p>
+    </template>
+  </UMeter>
+</template>

docs/components/content/examples/PaginationExampleFirstLastSlots.vue

@@ -0,0 +1,20 @@
+<script setup>
+const page = ref(1)
+const items = ref(Array(55))
+</script>
+
+<template>
+  <UPagination v-model="page" :total="items.length" :ui="{ rounded: 'first-of-type:rounded-s-md last-of-type:rounded-e-md' }">
+    <template #first="{ onClick }">
+      <UTooltip text="First page">
+        <UButton icon="i-heroicons-arrow-uturn-left" color="primary" :ui="{ rounded: 'rounded-full' }" class="rtl:[&_span:first-child]:rotate-180 me-2" @click="onClick" />
+      </UTooltip>
+    </template>
+
+    <template #last="{ onClick }">
+      <UTooltip text="Last page">
+        <UButton icon="i-heroicons-arrow-uturn-right-20-solid" color="primary" :ui="{ rounded: 'rounded-full' }" class="rtl:[&_span:last-child]:rotate-180 ms-2" @click="onClick" />
+      </UTooltip>
+    </template>
+  </UPagination>
+</template>

docs/components/content/examples/PaginationExampleRTL.vue

@@ -5,7 +5,7 @@ const items = ref(Array(55))
 
 <template>
   <div class="w-full divide-y divide-gray-200 dark:divide-gray-700 space-y-4">
-    <div class="flex justify-between w-full">
+    <div class="flex flex-wrap gap-1 justify-between w-full">
       <div dir="ltr">
         <UInput
           icon="i-heroicons-magnifying-glass-20-solid"
@@ -27,7 +27,7 @@ const items = ref(Array(55))
       </div>
     </div>
 
-    <div class="flex justify-between w-full pt-4">
+    <div class="flex flex-wrap gap-1 justify-between w-full pt-4">
       <div dir="ltr">
         <UPagination
           v-model="page"

docs/components/content/examples/PopoverExampleArrow.vue

@@ -0,0 +1,11 @@
+<template>
+  <UPopover :popper="{ arrow: true }">
+    <UButton color="white" label="Open" trailing-icon="i-heroicons-chevron-down-20-solid" />
+
+    <template #panel>
+      <div class="p-4">
+        <Placeholder class="h-20 w-48" />
+      </div>
+    </template>
+  </UPopover>
+</template>

docs/components/content/examples/PopoverExampleOffset.vue

@@ -0,0 +1,11 @@
+<template>
+  <UPopover :popper="{ offsetDistance: 0 }">
+    <UButton color="white" label="Open" trailing-icon="i-heroicons-chevron-down-20-solid" />
+
+    <template #panel>
+      <div class="p-4">
+        <Placeholder class="h-20 w-48" />
+      </div>
+    </template>
+  </UPopover>
+</template>

docs/components/content/examples/PopoverExampleOpen.vue

@@ -0,0 +1,18 @@
+<script setup>
+const open = ref(false)
+</script>
+
+<template>
+  <div class="flex gap-4 items-center">
+    <UToggle v-model="open" />
+    <UPopover :open="open">
+      <UButton color="white" label="Open" trailing-icon="i-heroicons-chevron-down-20-solid" />
+
+      <template #panel>
+        <div class="p-4">
+          <Placeholder class="h-20 w-48" />
+        </div>
+      </template>
+    </UPopover>
+  </div>
+</template>

docs/components/content/examples/PopoverExamplePlacement.vue

@@ -0,0 +1,11 @@
+<template>
+  <UPopover :popper="{ placement: 'top-end' }">
+    <UButton color="white" label="Open" trailing-icon="i-heroicons-chevron-down-20-solid" />
+
+    <template #panel>
+      <div class="p-4">
+        <Placeholder class="h-20 w-48" />
+      </div>
+    </template>
+  </UPopover>
+</template>

docs/components/content/examples/PopoverExampleSlot.vue

@@ -0,0 +1,11 @@
+<template>
+  <UPopover>
+    <UButton color="white" label="Open" trailing-icon="i-heroicons-chevron-down-20-solid" />
+
+    <template #panel="{ close }">
+      <div class="p-8">
+        <UButton label="Close" @click="close" />
+      </div>
+    </template>
+  </UPopover>
+</template>

docs/components/content/examples/ProgressExampleAnimation.vue

@@ -0,0 +1,34 @@
+<template>
+  <UProgress class="progress">
+    <template #indicator>
+      <div class="text-right text-amber-500">
+        🔥 This is too hot!
+      </div>
+    </template>
+  </UProgress>
+</template>
+
+<style scoped>
+.progress:deep(progress:indeterminate.animation-default) {
+  &:after {
+    @apply w-full text-red-500;
+    animation: my-glow-animation 3s ease-in-out infinite;
+  }
+
+  &::-webkit-progress-value {
+    @apply w-full text-red-500;
+    animation: my-glow-animation 3s ease-in-out infinite;
+  }
+
+  &::-moz-progress-bar {
+    @apply w-full text-red-500;
+    animation: my-glow-animation 3s ease-in-out infinite;
+  }
+}
+
+@keyframes my-glow-animation {
+  50% {
+    @apply text-amber-400;
+  }
+}
+</style>

docs/components/content/examples/ProgressExampleSlotIndicator.vue

@@ -0,0 +1,25 @@
+<script setup>
+const temp = ref(35)
+
+const color = computed(() => {
+  switch (true) {
+  case temp.value < 10: return 'blue'
+  case temp.value < 20: return 'amber'
+  case temp.value < 30: return 'orange'
+  default: return 'red'
+  }
+})
+</script>
+
+<template>
+  <UProgress :value="temp" :max="40" :color="color">
+    <template #indicator="{ percent }">
+      <div class="text-right" :style="{ width: `${percent}%` }">
+        <span v-if="temp < 10" class="text-blue-500">Too cold!</span>
+        <span v-else-if="temp < 20" class="text-amber-500">Warm</span>
+        <span v-else-if="temp < 30" class="text-orange-500">Hot</span>
+        <span v-else class="text-red-500 font-bold">🔥 Too hot!</span>
+      </div>
+    </template>
+  </UProgress>
+</template>

docs/components/content/examples/ProgressExampleSlotStep.vue

@@ -0,0 +1,31 @@
+<script setup>
+const task = ref(1)
+
+const steps = [
+  'Cloning...',
+  'Migrating...',
+  'Deploying...'
+]
+</script>
+
+<template>
+  <UProgress :value="task" :max="steps" indicator>
+    <template #step-0="{ step }">
+      <span class="text-lime-500">
+        <UIcon name="i-heroicons-arrow-down-circle" /> {{ step }}
+      </span>
+    </template>
+
+    <template #step-1="{ step }">
+      <span class="text-amber-500">
+        <UIcon name="i-heroicons-circle-stack" /> {{ step }}
+      </span>
+    </template>
+
+    <template #step-2="{ step }">
+      <span class="text-blue-500">
+        <UIcon name="i-heroicons-hand-thumb-up" /> {{ step }}
+      </span>
+    </template>
+  </UProgress>
+</template>

docs/components/content/examples/RadioExample.vue

@@ -1,23 +1,15 @@
 <script setup>
-const methods = [{
-  name: 'email',
-  value: 'email',
-  label: 'Email'
-}, {
-  name: 'sms',
-  value: 'sms',
-  label: 'Phone (SMS)'
-}, {
-  name: 'push',
-  value: 'push',
-  label: 'Push notification'
-}]
+const methods = [
+  { value: 'email', label: 'Email' },
+  { value: 'sms', label: 'Phone (SMS)' },
+  { value: 'push', label: 'Push notification' }
+]
 
 const selected = ref('sms')
 </script>
 
 <template>
   <div class="space-y-1">
-    <URadio v-for="method of methods" :key="method.name" v-model="selected" v-bind="method" />
+    <URadio v-for="method of methods" :key="method.value" v-model="selected" v-bind="method" />
   </div>
 </template>

docs/components/content/examples/RadioGroupExample.vue

@@ -0,0 +1,18 @@
+<script setup>
+const options = [{
+  value: 'email',
+  label: 'Email'
+}, {
+  value: 'sms',
+  label: 'Phone (SMS)'
+}, {
+  value: 'push',
+  label: 'Push notification'
+}]
+
+const selected = ref('sms')
+</script>
+
+<template>
+  <URadioGroup v-model="selected" legend="Choose something" :options="options" />
+</template>

docs/components/content/examples/RadioGroupLabelExample.vue

@@ -0,0 +1,20 @@
+<script setup>
+const options = [
+  { value: 'email', label: 'Email', icon: 'i-heroicons-at-symbol' },
+  { value: 'sms', label: 'Phone (SMS)', icon: 'i-heroicons-phone' },
+  { value: 'push', label: 'Push notification', icon: 'i-heroicons-bell' }
+]
+
+const selected = ref('sms')
+</script>
+
+<template>
+  <URadioGroup v-model="selected" :options="options">
+    <template #label="{ option }">
+      <p class="italic">
+        <UIcon :name="option.icon" />
+        {{ option.label }}
+      </p>
+    </template>
+  </URadioGroup>
+</template>

docs/components/content/examples/RangeExample.vue

@@ -3,5 +3,6 @@ const value = ref(50)
 </script>
 
 <template>
-  <URange v-model="value" />
+  <label for="range" class="sr-only" />
+  <URange id="range" v-model="value" name="range" />
 </template>

docs/components/content/examples/SelectMenuExampleArrow.vue

@@ -0,0 +1,9 @@
+<script setup>
+const people = ['Wade Cooper', 'Arlene Mccoy', 'Devon Webb', 'Tom Cook', 'Tanya Fox', 'Hellen Schmidt', 'Caroline Schultz', 'Mason Heaney', 'Claudie Smitham', 'Emil Schaefer']
+
+const selected = ref(people[0])
+</script>
+
+<template>
+  <USelectMenu v-model="selected" :options="people" :popper="{ arrow: true }" />
+</template>

docs/components/content/examples/SelectMenuExampleButton.vue

@@ -6,7 +6,7 @@ const selected = ref(people[3])
 
 <template>
   <USelectMenu v-slot="{ open }" v-model="selected" :options="people">
-    <UButton color="gray">
+    <UButton color="gray" class="flex-1 justify-between">
       {{ selected }}
 
       <UIcon name="i-heroicons-chevron-right-20-solid" class="w-5 h-5 transition-transform text-gray-400 dark:text-gray-500" :class="[open && 'transform rotate-90']" />

docs/components/content/examples/SelectMenuExampleOffset.vue

@@ -0,0 +1,9 @@
+<script setup>
+const people = ['Wade Cooper', 'Arlene Mccoy', 'Devon Webb', 'Tom Cook', 'Tanya Fox', 'Hellen Schmidt', 'Caroline Schultz', 'Mason Heaney', 'Claudie Smitham', 'Emil Schaefer']
+
+const selected = ref(people[0])
+</script>
+
+<template>
+  <USelectMenu v-model="selected" :options="people" :popper="{ offsetDistance: 0 }" />
+</template>

docs/components/content/examples/SelectMenuExamplePlacement.vue

@@ -0,0 +1,9 @@
+<script setup>
+const people = ['Wade Cooper', 'Arlene Mccoy', 'Devon Webb', 'Tom Cook', 'Tanya Fox', 'Hellen Schmidt', 'Caroline Schultz', 'Mason Heaney', 'Claudie Smitham', 'Emil Schaefer']
+
+const selected = ref(people[0])
+</script>
+
+<template>
+  <USelectMenu v-model="selected" :options="people" :popper="{ placement: 'left-end' }" />
+</template>

docs/components/content/examples/TableExampleAdvanced.vue

@@ -143,7 +143,7 @@ const { data: todos, pending } = await useLazyAsyncData('todos', () => $fetch<{
           <UButton
             icon="i-heroicons-chevron-down"
             trailing
-            variant="soft"
+            color="gray"
             size="xs"
           >
             Mark as
@@ -153,7 +153,7 @@ const { data: todos, pending } = await useLazyAsyncData('todos', () => $fetch<{
         <USelectMenu v-model="selectedColumns" :options="columns" multiple>
           <UButton
             icon="i-heroicons-view-columns"
-            variant="soft"
+            color="gray"
             size="xs"
           >
             Columns
@@ -162,8 +162,7 @@ const { data: todos, pending } = await useLazyAsyncData('todos', () => $fetch<{
 
         <UButton
           icon="i-heroicons-funnel"
-          variant="soft"
-          color="red"
+          color="gray"
           size="xs"
           :disabled="search === '' && selectedStatus.length === 0"
           @click="resetFilters"
@@ -181,6 +180,8 @@ const { data: todos, pending } = await useLazyAsyncData('todos', () => $fetch<{
       :loading="pending"
       sort-asc-icon="i-heroicons-arrow-up"
       sort-desc-icon="i-heroicons-arrow-down"
+      class="w-full"
+      :ui="{ td: { base: 'max-w-[0] truncate' } }"
       @select="select"
     >
       <template #completed-data="{ row }">
@@ -212,7 +213,7 @@ const { data: todos, pending } = await useLazyAsyncData('todos', () => $fetch<{
 
     <!-- Number of rows & Pagination -->
     <template #footer>
-      <div class="flex justify-between items-center">
+      <div class="flex flex-wrap justify-between items-center">
         <div>
           <span class="text-sm leading-5">
             Showing

docs/components/content/examples/TableExampleReactiveSorting.vue

@@ -0,0 +1,69 @@
+<script setup>
+const sort = ref({
+  column: 'name',
+  direction: 'desc'
+})
+
+const columns = [{
+  key: 'id',
+  label: 'ID'
+}, {
+  key: 'name',
+  label: 'Name',
+  sortable: true
+}, {
+  key: 'title',
+  label: 'Title',
+  sortable: true
+}, {
+  key: 'email',
+  label: 'Email'
+}, {
+  key: 'role',
+  label: 'Role',
+  sortable: true,
+  direction: 'desc'
+}]
+
+const people = [{
+  id: 1,
+  name: 'Lindsay Walton',
+  title: 'Front-end Developer',
+  email: 'lindsay.walton@example.com',
+  role: 'Member'
+}, {
+  id: 2,
+  name: 'Courtney Henry',
+  title: 'Designer',
+  email: 'courtney.henry@example.com',
+  role: 'Admin'
+}, {
+  id: 3,
+  name: 'Tom Cook',
+  title: 'Director of Product',
+  email: 'tom.cook@example.com',
+  role: 'Member'
+}, {
+  id: 4,
+  name: 'Whitney Francis',
+  title: 'Copywriter',
+  email: 'whitney.francis@example.com',
+  role: 'Admin'
+}, {
+  id: 5,
+  name: 'Leonard Krasner',
+  title: 'Senior Designer',
+  email: 'leonard.krasner@example.com',
+  role: 'Owner'
+}, {
+  id: 6,
+  name: 'Floyd Miles',
+  title: 'Principal Designer',
+  email: 'floyd.miles@example.com',
+  role: 'Member'
+}]
+</script>
+
+<template>
+  <UTable v-model:sort="sort" :columns="columns" :rows="people" />
+</template>

docs/components/content/examples/TableExampleStyle.vue

@@ -0,0 +1,40 @@
+<script setup>
+const columns = [{
+  key: 'id',
+  label: '#'
+}, {
+  key: 'quantity',
+  label: 'Quantity',
+  class: 'italic'
+}, {
+  key: 'name',
+  label: 'Name'
+}]
+
+const items = [{
+  id: 1,
+  name: 'Apple',
+  quantity: { value: 100, class: 'bg-green-500/50 dark:bg-green-400/50' }
+}, {
+  id: 2,
+  name: 'Orange',
+  quantity: { value: 0 },
+  class: 'bg-red-500/50 dark:bg-red-400/50 animate-pulse'
+}, {
+  id: 3,
+  name: 'Banana',
+  quantity: { value: 30, class: 'bg-green-500/50 dark:bg-green-400/50' }
+}, {
+  id: 4,
+  name: 'Mango',
+  quantity: { value: 5, class: 'bg-green-500/50 dark:bg-green-400/50' }
+}]
+</script>
+
+<template>
+  <UTable :rows="items" :columns="columns">
+    <template #quantity-data="{ row }">
+      {{ row.quantity.value }}
+    </template>
+  </UTable>
+</template>

docs/components/content/examples/TabsExampleItemCustomSlot.vue

@@ -24,9 +24,9 @@ function onSubmitPassword () {
     <template #account="{ item }">
       <UCard @submit.prevent="onSubmitAccount">
         <template #header>
-          <h3 class="text-base font-semibold leading-6 text-gray-900 dark:text-white">
+          <p class="text-base font-semibold leading-6 text-gray-900 dark:text-white">
             {{ item.label }}
-          </h3>
+          </p>
           <p class="mt-1 text-sm text-gray-500 dark:text-gray-400">
             Make changes to your account here. Click save when you're done.
           </p>

docs/components/content/examples/TabsExampleItemSlot.vue

@@ -22,9 +22,9 @@ function onSubmit (form) {
     <template #item="{ item }">
       <UCard @submit.prevent="() => onSubmit(item.key === 'account' ? accountForm : passwordForm)">
         <template #header>
-          <h3 class="text-base font-semibold leading-6 text-gray-900 dark:text-white">
+          <p class="text-base font-semibold leading-6 text-gray-900 dark:text-white">
             {{ item.label }}
-          </h3>
+          </p>
           <p class="mt-1 text-sm text-gray-500 dark:text-gray-400">
             {{ item.description }}
           </p>

docs/components/content/examples/TooltipExampleArrow.vue

@@ -0,0 +1,5 @@
+<template>
+  <UTooltip text="Tooltip example" :shortcuts="['⌘', 'O']" :popper="{ arrow: true }">
+    <UButton color="gray" label="Hover me" />
+  </UTooltip>
+</template>

docs/components/content/examples/TooltipExampleOffset.vue

@@ -0,0 +1,5 @@
+<template>
+  <UTooltip text="Tooltip example" :shortcuts="['⌘', 'O']" :popper="{ offsetDistance: 16 }">
+    <UButton color="gray" label="Hover me" />
+  </UTooltip>
+</template>

docs/components/content/examples/TooltipExamplePlacement.vue

@@ -0,0 +1,5 @@
+<template>
+  <UTooltip text="Tooltip example" :shortcuts="['⌘', 'O']" :popper="{ placement: 'right' }">
+    <UButton color="gray" label="Hover me" />
+  </UTooltip>
+</template>

docs/components/content/examples/VerticalNavigationExampleAvatarSlot.vue

@@ -2,7 +2,8 @@
 const links = [{
   avatar: {
     src: 'https://ipx.nuxt.com/s_16x16/gh_avatar/benjamincanac',
-    srcset: 'https://ipx.nuxt.com/s_32x32/gh_avatar/benjamincanac 2x'
+    srcset: 'https://ipx.nuxt.com/s_32x32/gh_avatar/benjamincanac 2x',
+    alt: ''
   },
   label: 'benjamincanac',
   to: 'https://github.com/benjamincanac',
@@ -10,7 +11,8 @@ const links = [{
 }, {
   avatar: {
     src: 'https://ipx.nuxt.com/s_16x16/gh_avatar/Atinux',
-    srcset: 'https://ipx.nuxt.com/s_32x32/gh_avatar/Atinux 2x'
+    srcset: 'https://ipx.nuxt.com/s_32x32/gh_avatar/Atinux 2x',
+    alt: ''
   },
   label: 'Atinux',
   to: 'https://github.com/Atinux',
@@ -18,14 +20,13 @@ const links = [{
 }, {
   avatar: {
     src: 'https://ipx.nuxt.com/s_16x16/gh_avatar/smarroufin',
-    srcset: 'https://ipx.nuxt.com/s_32x32/gh_avatar/smarroufin 2x'
+    srcset: 'https://ipx.nuxt.com/s_32x32/gh_avatar/smarroufin 2x',
+    alt: ''
   },
   label: 'smarroufin',
   to: 'https://github.com/smarroufin',
   target: '_blank'
 }]
-
-const { ui } = useAppConfig()
 </script>
 
 <template>
@@ -33,8 +34,9 @@ const { ui } = useAppConfig()
     <template #avatar="{ link }">
       <UAvatar
         v-if="link.avatar"
-        v-bind="{ size: ui.verticalNavigation.avatar.size, ...link.avatar }"
-        :class="[ui.verticalNavigation.avatar.base]"
+        v-bind="link.avatar"
+        size="3xs"
+        loading="lazy"
       />
       <UIcon v-else name="i-heroicons-user-circle-20-solid" class="text-lg" />
     </template>

docs/components/content/examples/VerticalNavigationExampleDefaultSlot.vue

@@ -1,31 +1,20 @@
 <script setup>
 const links = [{
-  label: 'Navigation',
-  children: [{
-    label: 'Vertical Navigation',
-    to: '/navigation/vertical-navigation'
-  }, {
-    label: 'Command Palette',
-    to: '/navigation/command-palette'
-  }]
+  label: 'Vertical Navigation',
+  to: '/navigation/vertical-navigation'
 }, {
-  label: 'Data',
-  children: [{
-    label: 'Table',
-    to: '/data/table'
-  }]
+  label: 'Command Palette',
+  to: '/navigation/command-palette'
+}, {
+  label: 'Table',
+  to: '/data/table'
 }]
 </script>
 
 <template>
   <UVerticalNavigation :links="links">
     <template #default="{ link }">
-      <div class="relative text-left w-full">
-        <div class="mb-2">
-          {{ link.label }}
-        </div>
-        <UVerticalNavigation v-if="link.children" :links="link.children" />
-      </div>
+      <span class="group-hover:text-primary relative">{{ link.label }}</span>
     </template>
   </UVerticalNavigation>
 </template>

docs/components/home/HomeDemo.vue

@@ -1,99 +1,206 @@
+<script setup lang="ts">
+const refs = ref([])
+const section = ref()
+
+const { stop } = useIntersectionObserver(
+  section,
+  ([{ isIntersecting }]) => {
+    if (!isIntersecting) {
+      return
+    }
+
+    refs.value.forEach(element => element.style.animationPlayState = 'running')
+
+    stop()
+  },
+  { threshold: 0.3 }
+)
+
+onMounted(() => {
+  refs.value.forEach((element) => {
+    if (!element) {
+      return
+    }
+
+    element.style.animationFillMode = 'forwards'
+    element.style.transformOrigin = 'center'
+    element.style.animationPlayState = 'paused'
+    element.style.animationDuration = '1s'
+  })
+})
+</script>
+
 <template>
-  <Transition appear name="fade">
-    <ULandingGrid class="lg:grid-cols-10 lg:gap-8">
-      <div class="col-span-8 flex items-center">
-        <RangeExample />
-      </div>
+  <ULandingGrid ref="section" class="lg:grid-cols-10 lg:gap-8">
+    <div :ref="(el) => (refs[1] = el)" class="col-span-8 flex items-center animate-top">
+      <RangeExample />
+    </div>
 
-      <div class="col-span-2 row-span-2 flex items-center">
-        <RadioExample />
-      </div>
+    <div :ref="(el) => (refs[2] = el)" class="col-span-2 row-span-2 flex items-center animate-right">
+      <RadioExample />
+    </div>
 
-      <div class="col-span-2">
-        <DropdownExampleBasic :popper="{ placement: 'bottom-start', strategy: 'absolute' }" />
-      </div>
+    <div :ref="(el) => (refs[4] = el)" class="col-span-2 animate-left z-10">
+      <DropdownExampleBasic :popper="{ placement: 'bottom-start', strategy: 'absolute' }" />
+    </div>
 
-      <div class="col-span-6 flex flex-wrap items-center justify-between gap-1">
-        <UAvatarGroup :max="2">
-          <UAvatar
-            src="https://ipx.nuxt.com/s_32x32/gh_avatar/benjamincanac"
-            srcset="https://ipx.nuxt.com/s_64x64/gh_avatar/benjamincanac 2x"
-            alt="benjamincanac"
-          />
-          <UAvatar
-            src="https://ipx.nuxt.com/s_32x32/gh_avatar/Atinux"
-            srcset="https://ipx.nuxt.com/s_64x64/gh_avatar/Atinux 2x"
-            alt="Atinux"
-          />
-          <UAvatar
-            src="https://ipx.nuxt.com/s_32x32/gh_avatar/smarroufin"
-            srcset="https://ipx.nuxt.com/s_64x64/gh_avatar/smarroufin 2x"
-            alt="smarroufin"
-          />
-        </UAvatarGroup>
+    <div
+      :ref="(el) => (refs[3] = el)"
+      class="col-span-6 flex flex-wrap items-center justify-between gap-1 animate-bottom"
+    >
+      <UAvatarGroup :max="2">
+        <UAvatar
+          src="https://ipx.nuxt.com/s_32x32/gh_avatar/benjamincanac"
+          srcset="https://ipx.nuxt.com/s_64x64/gh_avatar/benjamincanac 2x"
+          alt="benjamincanac"
+          width="40"
+          height="40"
+          loading="lazy"
+        />
+        <UAvatar
+          src="https://ipx.nuxt.com/s_32x32/gh_avatar/Atinux"
+          srcset="https://ipx.nuxt.com/s_64x64/gh_avatar/Atinux 2x"
+          alt="Atinux"
+          width="40"
+          height="40"
+          loading="lazy"
+        />
+        <UAvatar
+          src="https://ipx.nuxt.com/s_32x32/gh_avatar/smarroufin"
+          srcset="https://ipx.nuxt.com/s_64x64/gh_avatar/smarroufin 2x"
+          alt="smarroufin"
+          width="40"
+          height="40"
+          loading="lazy"
+        />
+      </UAvatarGroup>
 
-        <UButton label="Button" icon="i-heroicons-pencil-square" />
+      <UButton label="Button" icon="i-heroicons-pencil-square" />
 
-        <UBadge label="Badge" />
+      <UBadge label="Badge" />
 
-        <UColorModeToggle />
+      <UColorModeToggle />
 
-        <PaginationExampleBasic />
-      </div>
+      <PaginationExampleBasic />
+    </div>
 
-      <div class="col-span-3 row-span-8 gap-6 flex flex-col justify-between">
-        <UNotification :id="1" title="Notification" description="This is a notification!" icon="i-heroicons-command-line" />
+    <div :ref="(el) => (refs[5] = el)" class="col-span-3 row-span-8 gap-6 flex flex-col justify-between animate-left">
+      <UNotification
+        :id="1"
+        title="Notification"
+        description="This is a notification!"
+        icon="i-heroicons-command-line"
+        :ui="{ shadow: 'shadow' }"
+        :close-button="null"
+        :timeout="30000"
+      />
 
-        <TabsExampleItemCustomSlot />
+      <TabsExampleItemCustomSlot />
 
-        <UCard class="flex-shrink-0">
-          <div class="flex items-center gap-4 justify-center">
-            <USkeleton class="h-14 w-14 flex-shrink-0" :ui="{ rounded: 'rounded-full' }" />
-            <div class="space-y-3 flex-1">
-              <USkeleton class="h-4 w-full" />
-              <USkeleton class="h-4 w-2/3" />
-            </div>
+      <UCard class="flex-shrink-0">
+        <div class="flex items-center gap-4 justify-center">
+          <USkeleton class="h-14 w-14 flex-shrink-0" :ui="{ rounded: 'rounded-full' }" />
+          <div class="space-y-3 flex-1">
+            <USkeleton class="h-4 w-full" />
+            <USkeleton class="h-4 w-2/3" />
           </div>
-        </UCard>
-      </div>
+        </div>
+      </UCard>
+    </div>
 
-      <div class="col-span-5 row-span-2 flex flex-col">
-        <UCard :ui="{ body: { base: 'flex-1 flex flex-col overflow-y-auto', padding: '' } }" class="col-span-4 row-span-6 flex-1 flex flex-col">
-          <CommandPaletteExampleGroups />
-        </UCard>
-      </div>
+    <div :ref="(el) => (refs[6] = el)" class="col-span-5 row-span-2 flex flex-col animate-bottom">
+      <UCard
+        :ui="{ body: { base: 'flex-1 flex flex-col overflow-y-auto', padding: '' } }"
+        class="col-span-4 row-span-6 flex-1 flex flex-col"
+      >
+        <CommandPaletteExampleGroups />
+      </UCard>
+    </div>
 
-      <div class="col-span-2 row-span-2 gap-6 flex flex-col">
-        <CheckboxExample />
+    <div :ref="(el) => (refs[7] = el)" class="col-span-2 row-span-2 gap-6 flex flex-col animate-right z-10">
+      <CheckboxExample />
 
-        <InputExampleClearable />
+      <InputExampleClearable />
 
-        <UFormGroup label="Labels">
-          <SelectMenuExampleCreatable />
-        </UFormGroup>
+      <UFormGroup label="Labels">
+        <SelectMenuExampleCreatable />
+      </UFormGroup>
 
-        <UCard :ui="{ body: { padding: '!p-1' } }">
-          <VerticalNavigationExampleAvatarSlot />
-        </UCard>
-      </div>
+      <UCard :ui="{ body: { padding: '!p-1' } }">
+        <VerticalNavigationExampleAvatarSlot />
+      </UCard>
+    </div>
 
-      <div class="col-span-7 row-span-6">
-        <UCard :ui="{ body: { padding: '' } }">
-          <TableExampleClickable :ui="{ divide: 'divide-gray-200 dark:divide-gray-800' }" />
-        </UCard>
-      </div>
-    </ULandingGrid>
-  </Transition>
+    <div :ref="(el) => (refs[8] = el)" class="col-span-7 row-span-6 animate-bottom">
+      <UCard :ui="{ body: { padding: '' } }">
+        <TableExampleClickable :ui="{ divide: 'divide-gray-200 dark:divide-gray-800' }" />
+      </UCard>
+    </div>
+  </ULandingGrid>
 </template>
 
-<style scoped>
-.fade-enter-active,
-.fade-leave-active {
-  transition: opacity 0.5s ease;
+<style scoped lang="postcss">
+.animate-top {
+  animation: translateDown;
 }
 
-.fade-enter-from,
-.fade-leave-to {
-  opacity: 0;
+.animate-bottom {
+  animation: translateUp;
+}
+
+.animate-left {
+  animation: translateLeft;
+}
+
+.animate-right {
+  animation-name: translateRight;
+}
+
+@keyframes translateDown {
+  0% {
+    transform: translate3D(0, -100px, 0);
+    opacity: 0;
+  }
+
+  100% {
+    transform: translateY(0, 0, 0);
+    opacity: 1;
+  }
+}
+
+@keyframes translateUp {
+  0% {
+    transform: translate3D(0, 100px, 0);
+    opacity: 0;
+  }
+
+  100% {
+    transform: translateY(0, 0, 0);
+    opacity: 1;
+  }
+}
+
+@keyframes translateLeft {
+  0% {
+    transform: translate3D(-100px, 0, 0);
+    opacity: 0;
+  }
+
+  100% {
+    transform: translate3D(0, 0, 0);
+    opacity: 1;
+  }
+}
+
+@keyframes translateRight {
+  0% {
+    transform: translate3D(100px, 0, 0);
+    opacity: 0;
+  }
+
+  100% {
+    transform: translate3D(0, 0, 0);
+    opacity: 1;
+  }
 }
 </style>

docs/components/home/HomeTetris.vue

@@ -8,13 +8,19 @@
     >
       <div
         ref="el"
-        class="absolute inset-0 grid justify-center auto-rows-[var(--cell)] -space-y-px"
+        class="absolute inset-0 grid justify-center auto-rows-[--cell] -space-y-px"
       >
         <div v-for="(row, rowIndex) in grid" :key="rowIndex" class="grid grid-flow-col auto-cols-[--cell] flex-1 -space-x-px">
-          <div v-for="(cell, cellIndex) in row" :key="cellIndex" class="transition-[background] duration-1000 border border-primary-200/50 dark:border-primary-900/25 bg-opacity-10 hover:bg-opacity-20 dark:bg-opacity-5 dark:hover:bg-opacity-10" :class="[cell && `bg-primary-500 dark:bg-primary-400 cursor-pointer`]" @click="removeCell(rowIndex, cellIndex)" />
+          <div
+            v-for="(cell, cellIndex) in row"
+            :key="cellIndex"
+            class="relative border border-primary-200/50 dark:border-primary-900/25"
+          >
+            <div class="absolute inset-0 bg-primary-500/10 hover:bg-primary-500/20 dark:bg-primary-400/5 dark:hover:bg-primary-400/10 opacity-0 transition-opacity will-change-[opacity] duration-1000" :class="[cell && 'opacity-100 cursor-pointer']" @click="cell && removeCell(rowIndex, cellIndex)" />
+          </div>
         </div>
 
-        <div class="absolute top-[calc((var(--cell)*var(--rows))+1px)] inset-x-0 h-[calc(var(--cell)*2)] bg-gradient-to-t from-white dark:from-gray-900" />
+        <div class="absolute top-[calc((var(--cell)*var(--rows))+1px)] inset-x-0 h-[calc(var(--cell)*2)] bg-gradient-to-t from-white dark:from-gray-900 pointer-events-none" />
       </div>
     </div>
   </Transition>
@@ -28,13 +34,8 @@ const grid = ref([])
 const rows = ref(0)
 const cols = ref(0)
 
-const colors = useAppConfig()?.ui.colors
 const { width, height } = useElementSize(el)
 
-function getRandomColor () {
-  return colors[Math.floor(Math.random() * (colors.length - 1))]
-}
-
 function createGrid () {
   grid.value = []
 
@@ -44,10 +45,9 @@ function createGrid () {
 }
 
 function createNewCell () {
-  const color = getRandomColor()
   const x = Math.floor(Math.random() * cols.value)
 
-  grid.value[0][x] = color
+  grid.value[0][x] = true
 }
 
 function moveCellsDown () {

docs/composables/useContentExamplesCode.ts

@@ -0,0 +1,27 @@
+const useContentExamplesCodeState = () => useState('content-examples-code', () => ({}))
+
+export async function fetchContentExampleCode (name?: string) {
+  if (!name) return
+  const state = useContentExamplesCodeState()
+
+  if (state.value[name]?.then) {
+    await state.value[name]
+    return state.value[name]
+  }
+  if (state.value[name]) { return state.value[name] }
+
+  // add to nitro prerender
+  if (process.server) {
+    const event = useRequestEvent()
+    event.node.res.setHeader(
+      'x-nitro-prerender',
+      [event.node.res.getHeader('x-nitro-prerender'), `/api/content-examples-code/${name}.json`].filter(Boolean).join(',')
+    )
+  }
+  state.value[name] = $fetch(`/api/content-examples-code/${name}.json`).then((data) => {
+    state.value[name] = data
+  })
+
+  await state.value[name]
+  return state.value[name]
+}

docs/composables/useContentSource.ts

@@ -1,57 +1,43 @@
-import type { NavItem, ParsedContent } from '@nuxt/content/dist/runtime/types'
-
 export const useContentSource = () => {
   const route = useRoute()
+  const router = useRouter()
   const config = useRuntimeConfig().public
 
-  const branches = [{
+  const branches = computed(() => [{
+    id: 'dev',
     name: 'dev',
     icon: 'i-heroicons-cube',
     suffix: 'dev',
-    label: 'Edge'
+    label: 'Edge',
+    disabled: route.path.startsWith('/dev'),
+    click: () => select({ name: 'dev' })
   }, {
+    id: 'main',
     name: 'main',
     icon: 'i-heroicons-cube',
     suffix: 'latest',
-    label: `v${config.version}`
-  }]
+    label: `v${config.version}`,
+    disabled: !route.path.startsWith('/dev'),
+    click: () => select({ name: 'main' })
+  }])
 
-  const branch = computed(() => branches.find(b => b.name === (route.path.startsWith('/dev') ? 'dev' : 'main')))
+  const branch = computed(() => branches.value.find(b => b.name === (route.path.startsWith('/dev') ? 'dev' : 'main')))
 
-  const prefix = computed(() => `/${branch.value.name}`)
-
-  function removePrefixFromNavigation (navigation: NavItem[]): NavItem[] {
-    return navigation.map((link) => {
-      const { _path, children, ...rest } = link
-
-      return {
-        ...rest,
-        _path: route.path.startsWith(prefix.value) ? _path : _path.replace(new RegExp(`^${prefix.value}`, 'g'), ''),
-        children: children?.length ? removePrefixFromNavigation(children) : undefined
-      }
-    })
-  }
-
-  function removePrefixFromFiles (files: ParsedContent[]) {
-    return files.map((file) => {
-      if (!file) {
+  function select (branch) {
+    if (branch.name === 'dev') {
+      if (route.path.startsWith('/dev')) {
         return
       }
 
-      const { _path, ...rest } = file
-
-      return {
-        ...rest,
-        _path: route.path.startsWith(prefix.value) ? _path : _path.replace(new RegExp(`^${prefix.value}`, 'g'), '')
-      }
-    })
+      router.push(`/dev${route.path}`)
+    } else {
+      router.push(route.path.replace('/dev', ''))
+    }
   }
 
   return {
     branches,
     branch,
-    prefix,
-    removePrefixFromNavigation,
-    removePrefixFromFiles
+    select
   }
 }

docs/content/1.getting-started/1.index.md

@@ -18,6 +18,7 @@ This module has been developed by the [NuxtLabs](https://nuxtlabs.com/) team for
 - Keyboard shortcuts
 - Bundled icons
 - Fully typed
+- [Figma Kit](https://www.figma.com/community/file/1288455405058138934)
 
 ## Credits
 

docs/content/1.getting-started/2.installation.md

@@ -8,23 +8,23 @@ description: 'Learn how to install and configure the module in your Nuxt app.'
 
 ::code-group
 
-```sh [pnpm]
-pnpm i -D @nuxt/ui
+```bash [pnpm]
+pnpm add @nuxt/ui
 ```
 
 ```bash [yarn]
-yarn add -D @nuxt/ui
+yarn add @nuxt/ui
 ```
 
 ```bash [npm]
-npm install -D @nuxt/ui
+npm install @nuxt/ui
 ```
 
 ::
 
 2. Add it to your `modules` section in your `nuxt.config`:
 
-```ts [nuxt.config]
+```ts [nuxt.config.ts]
 export default defineNuxtConfig({
   modules: ['@nuxt/ui']
 })

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

@@ -1,7 +1,5 @@
 ---
 description: 'Learn how to customize the look and feel of the components.'
-navigation:
-  badge: 'New'
 ---
 
 ## Overview
@@ -29,6 +27,35 @@ Try to change the `primary` and `gray` colors by clicking on the :u-icon{name="i
 
 As this module uses Tailwind CSS under the hood, you can use any of the [Tailwind CSS colors](https://tailwindcss.com/docs/customizing-colors#color-palette-reference) or your own custom colors. By default, the `primary` color is `green` and the `gray` color is `cool`.
 
+When [using custom colors](https://tailwindcss.com/docs/customizing-colors#using-custom-colors) or [adding additional colors](https://tailwindcss.com/docs/customizing-colors#adding-additional-colors) through the `extend` key in your `tailwind.config.ts`, you'll need to make sure to define all the shades from `50` to `950` as most of them are used in the components config defined in [`ui.config.ts`](https://github.com/nuxt/ui/blob/dev/src/runtime/ui.config.ts). You can [generate your colors](https://tailwindcss.com/docs/customizing-colors#generating-colors) using tools such as https://uicolors.app/ for example.
+
+```ts [tailwind.config.ts]
+import type { Config } from 'tailwindcss'
+import defaultTheme from 'tailwindcss/defaultTheme'
+
+export default <Partial<Config>>{
+  theme: {
+    extend: {
+      colors: {
+        green: {
+          50: '#EFFDF5',
+          100: '#D9FBE8',
+          200: '#B3F5D1',
+          300: '#75EDAE',
+          400: '#00DC82',
+          500: '#00C16A',
+          600: '#00A155',
+          700: '#007F45',
+          800: '#016538',
+          900: '#0A5331',
+          950: '#052e16'
+        }
+      }
+    }
+  }
+}
+```
+
 ### CSS Variables
 
 To provide dynamic colors that can be changed at runtime, this module uses CSS variables. As Tailwind CSS already has a `gray` color, the module automatically renames it to `cool` to avoid conflicts (`coolGray` was renamed to `gray` when Tailwind CSS v3.0 was released).
@@ -39,7 +66,7 @@ Likewise, you can't define a `primary` color in your `tailwind.config.ts` as it
 We'd advise you to use those colors in your components and pages, e.g. `text-primary-500 dark:text-primary-400`, `bg-gray-100 dark:bg-gray-900`, etc. so your app automatically adapts when changing your `app.config.ts`.
 ::
 
-The `primary` color also has a `DEFAULT` shade that changes based on the theme. It is `500` in light mode and `400` in dark mode. You can use as a shortcut in your components and pages, e.g. `text-primary`, `bg-primary`, `focus-visible:ring-primary`, etc. :u-badge{label="New" class="!rounded-full" variant="subtle"}
+The `primary` color also has a `DEFAULT` shade that changes based on the theme. It is `500` in light mode and `400` in dark mode. You can use as a shortcut in your components and pages, e.g. `text-primary`, `bg-primary`, `focus-visible:ring-primary`, etc.
 
 ### Smart Safelisting
 
@@ -81,7 +108,7 @@ This can also happen when you bind a dynamic color to a component: `<UBadge :col
 
 ### `app.config.ts`
 
-Components are styled with Tailwind CSS but classes are all defined in the default [app.config.ts](https://github.com/nuxt/ui/blob/dev/src/runtime/app.config.ts) file. You can override those in your own `app.config.ts`.
+Components are styled with Tailwind CSS but classes are all defined in the default [ui.config.ts](https://github.com/nuxt/ui/blob/dev/src/runtime/ui.config.ts) file. You can override those in your own `app.config.ts`.
 
 ```ts [app.config.ts]
 export default defineAppConfig({
@@ -93,6 +120,25 @@ export default defineAppConfig({
 })
 ```
 
+Thanks to [tailwind-merge](https://github.com/dcastil/tailwind-merge), the `app.config.ts` is smartly merged with the default config. This means you don't have to rewrite everything.
+
+You can change this behaviour by setting `strategy` to `override` in your `app.config.ts`:
+
+```ts [app.config.ts]
+export default defineAppConfig({
+  ui: {
+    strategy: 'override',
+    button: {
+      color: {
+        white: {
+          solid: 'bg-white dark:bg-gray-900'
+        }
+      }
+    }
+  }
+})
+```
+
 ### `ui` prop
 
 Each component has a `ui` prop that allows you to customize everything specifically.
@@ -106,34 +152,45 @@ Each component has a `ui` prop that allows you to customize everything specifica
 ```
 
 ::callout{icon="i-heroicons-light-bulb"}
-You can find the default classes for each component under the `Preset` section.
+You can find the default classes for each component under the `Config` section.
 ::
 
-Thanks to [tailwind-merge](https://github.com/dcastil/tailwind-merge), the `ui` prop is smartly merged with the config. This means you don't have to rewrite everything. :u-badge{label="New" class="!rounded-full" variant="subtle"}
+Thanks to [tailwind-merge](https://github.com/dcastil/tailwind-merge), the `ui` prop is smartly merged with the config. This means you don't have to rewrite everything.
 
 For example, the default preset of the `FormGroup` component looks like this:
 
 ```json
 {
-  ...
   "label": {
-    "base": "block font-medium text-gray-700 dark:text-gray-200",
-    ...
+    "base": "block font-medium text-gray-700 dark:text-gray-200"
   }
-  ...
 }
 ```
 
 To change the font of the `label`, you only need to write:
 
 ```vue
-<UFormGroup name="email" label="Email" :ui="{ label: { base: 'font-semibold' } }">
-  ...
-</UFormGroup>
+<UFormGroup name="email" label="Email" :ui="{ label: { base: 'font-semibold' } }" />
 ```
 
 This will smartly replace the `font-medium` by `font-semibold` and prevent any class duplication and any class priority issue.
 
+You can change this behaviour by setting `strategy` to `override` inside the `ui` prop:
+
+```vue
+<UButton
+  to="https://github.com/nuxt/ui"
+  :ui="{
+    strategy: 'override',
+    color: {
+      white: {
+        solid: 'bg-white dark:bg-gray-900'
+      }
+    }
+  }"
+/>
+```
+
 ### `class` attribute
 
 You can also use the `class` attribute to add classes to the component.
@@ -144,7 +201,7 @@ You can also use the `class` attribute to add classes to the component.
 </template>
 ```
 
-Again, with [tailwind-merge](https://github.com/dcastil/tailwind-merge), this will smartly merge the classes with the `ui` prop and the config. :u-badge{label="New" class="!rounded-full" variant="subtle"}
+Again, with [tailwind-merge](https://github.com/dcastil/tailwind-merge), this will smartly merge the classes with the `ui` prop and the config.
 
 ### Default values
 
@@ -229,15 +286,15 @@ However, you will need to install either `@iconify/json` (full icon collections,
 ::code-group
 
 ```bash [yarn]
-yarn add -D @iconify-json/{collection_name}
+yarn add @iconify-json/{collection_name}
 ```
 
 ```bash [npm]
-npm install -D @iconify-json/{collection_name}
+npm install @iconify-json/{collection_name}
 ```
 
 ```sh [pnpm]
-pnpm i -D @iconify-json/{collection_name}
+pnpm i @iconify-json/{collection_name}
 ```
 
 ::

docs/content/1.getting-started/4.shortcuts.md

@@ -7,7 +7,7 @@ description: 'Learn how to display and define keyboard shortcuts in your app.'
 Some components like [Dropdown](/elements/dropdown), [Command Palette](/navigation/command-palette) and [Tooltip](/overlays/tooltip) support the display of keyboard shortcuts.
 
 ```vue
-<UDropdown :items="[{ label: 'Edit', shortcuts: ['E'] }]" />
+<UDropdown :items="[[{ label: 'Edit', shortcuts: ['E'] }]]" />
 ```
 
 Shortcuts are displayed and styled through the [Kbd](/elements/kbd) component.
@@ -62,6 +62,11 @@ Examples of keys:
 - `shift_e`: will trigger by hitting `Shift` and `E` at the same time on MacOS, Windows and Linux
 - `?`: will trigger by hitting `?` on some keyboard layouts, or for example `Shift` and `/`, which results in `?` on US Mac keyboards
 - `g-d`: will trigger by hitting `g` then `d` with a maximum delay of 800ms by default
+- `arrowleft`: will trigger by hitting `←` (also: `arrowright`, `arrowup`, `arrowdown`)
+
+::callout{icon="i-heroicons-light-bulb"}
+For a complete list of available shortcut keys, refer to the [`KeyboardEvent`](https://developer.mozilla.org/en-US/docs/Web/API/UI_Events/Keyboard_event_key_values) API docs. Note the `KeyboardEvent.key` has to be written in lowercase.
+::
 
 ### `usingInput`
 

docs/content/1.getting-started/5.examples.md

@@ -20,7 +20,7 @@ You can easily build a color mode button by using the `useColorMode` composable
 :color-mode-button
 
 #code
-```vue [components/ColorModeButton.vue]
+```vue
 <script setup>
 const colorMode = useColorMode()
 
@@ -109,45 +109,15 @@ const attrs = [{
 
 You can use it inside a [Popover](/overlays/popover) component to display it when clicking on a [Button](/elements/button).
 
-::component-example
-#default
-:date-picker-example
-
-#code
-```vue
-<script setup>
-const date = ref(new Date())
-
-const label = computed(() => date.value.toLocaleDateString('en-us', { weekday: 'long', year: 'numeric', month: 'short', day: 'numeric' })
-)
-</script>
-
-<template>
-  <UPopover :popper="{ placement: 'bottom-start' }">
-    <UButton icon="i-heroicons-calendar-days-20-solid" :label="label" />
-
-    <template #panel="{ close }">
-      <DatePicker v-model="date" @close="close" />
-    </template>
-  </UPopover>
-</template>
-```
-::
+:component-example{component="date-picker-example"}
 
 ### Table
 
 Here is an example of a Table component with all its features implemented.
 
-::component-example
----
-padding: false
----
+:component-example{component="table-example-advanced" hiddenCode :padding="false" }
 
-#default
-:table-example-advanced
-::
-
-::callout{icon="i-simple-icons-github" to="https://github.com/nuxt/ui/blob/dev/docs/components/content/examples/TableExampleAdvanced.vue"}
+::callout{icon="i-simple-icons-github" to="https://github.com/nuxt/ui/blob/dev/docs/components/content/examples/TableExampleAdvanced.vue" target="_blank"}
 Take a look at the component!
 ::
 
@@ -164,13 +134,14 @@ Here is some examples of what you can do with the [CommandPalette](/navigation/c
 ::component-example
 ---
 padding: false
+component: 'command-palette-theme-algolia'
+componentProps:
+  class: 'max-h-[480px] rounded-md'
+hiddenCode: true
 ---
-
-#default
-:command-palette-theme-algolia{class="max-h-[480px] rounded-md"}
 ::
 
-::callout{icon="i-simple-icons-github" to="https://github.com/nuxt/ui/blob/dev/docs/components/content/themes/CommandPaletteThemeAlgolia.vue#L23"}
+::callout{icon="i-simple-icons-github" to="https://github.com/nuxt/ui/blob/dev/docs/components/content/themes/CommandPaletteThemeAlgolia.vue#L23" target="_blank"}
 Take a look at the component!
 ::
 
@@ -179,93 +150,24 @@ Take a look at the component!
 ::component-example
 ---
 padding: false
+component: 'command-palette-theme-raycast'
+componentProps:
+  class: 'max-h-[480px] rounded-md'
+hiddenCode: true
 ---
-
-#default
-:command-palette-theme-raycast{class="max-h-[480px] rounded-md"}
 ::
 
-::callout{icon="i-simple-icons-github" to="https://github.com/nuxt/ui/blob/dev/docs/components/content/themes/CommandPaletteThemeRaycast.vue#L30"}
+::callout{icon="i-simple-icons-github" to="https://github.com/nuxt/ui/blob/dev/docs/components/content/themes/CommandPaletteThemeRaycast.vue#L30" target="_blank"}
 Take a look at the component!
 ::
 
 ### VerticalNavigation
 
-::component-example
-#default
-:vertical-navigation-theme-tailwind
-#code
-```vue
-<script setup>
-const links = [{
-  label: 'Introduction',
-  to: '/getting-started'
-}, {
-  label: 'Installation',
-  to: '/getting-started/installation'
-}, {
-  label: 'Theming',
-  to: '/getting-started/theming'
-}, {
-  label: 'Shortcuts',
-  to: '/getting-started/shortcuts'
-}, {
-  label: 'Examples',
-  to: '/getting-started/examples'
-}, {
-  label: 'Roadmap',
-  to: '/getting-started/roadmap'
-}]
-</script>
-
-<template>
-  <UVerticalNavigation
-    :links="links"
-    :ui="{
-      wrapper: 'border-s border-gray-200 dark:border-gray-800 space-y-2',
-      base: 'group block border-s -ms-px lg:leading-6 before:hidden',
-      padding: 'p-0 ps-4',
-      rounded: '',
-      font: '',
-      ring: '',
-      active: 'text-primary-500 dark:text-primary-400 border-current font-semibold',
-      inactive: 'border-transparent hover:border-gray-400 dark:hover:border-gray-500 text-gray-700 hover:text-gray-900 dark:text-gray-400 dark:hover:text-gray-300'
-    }"
-  />
-</template>
-```
-::
+:component-example{component="vertical-navigation-theme-tailwind"}
 
 ### Pagination
 
-::component-example
-#default
-:pagination-theme-rounded
-#code
-```vue
-<script setup>
-const page = ref(1)
-const items = ref(Array(55))
-</script>
-
-<template>
-  <UPagination
-    v-model="page"
-    :total="items.length"
-    :ui="{
-      wrapper: 'flex items-center gap-1',
-      rounded: '!rounded-full min-w-[32px] justify-center'
-    }"
-    :prev-button="null"
-    :next-button="{
-      icon: 'i-heroicons-arrow-small-right-20-solid',
-      color: 'primary',
-      variant: 'outline'
-    }"
-  />
-</template>
-```
-::
+:component-example{component="pagination-theme-rounded"}
 
 ## RTL Support
 
@@ -273,11 +175,8 @@ Here are some examples of how components look like in RTL mode.
 
 ### Pagination
 
-::component-example
-#default
-:pagination-example-r-t-l
-::
+:component-example{component="pagination-example-r-t-l" hiddenCode}
 
-::callout{icon="i-simple-icons-github" to="https://github.com/nuxt/ui/blob/dev/docs/components/content/examples/PaginationExampleRTL.vue"}
+::callout{icon="i-simple-icons-github" to="https://github.com/nuxt/ui/blob/dev/docs/components/content/examples/PaginationExampleRTL.vue" target="_blank"}
 Take a look at the component!
 ::

docs/content/1.getting-started/6.contributing.md

@@ -0,0 +1,188 @@
+---
+title: Contributing
+description: Learn how to contribute to Nuxt UI.
+---
+
+## Overview
+
+Nuxt UI thrives thanks to its fantastic community ❤️, which contributes by submitting issues, creating pull requests, and offering valuable feedback.
+
+Before reporting a bug or reporting a feature, please make sure that you have read through our documentation and existing [issues](https://github.com/nuxt/ui/issues).
+
+## Submitting a Pull Request
+
+### 1. Before You Start
+
+Check if there's an existing issue describing the problem or feature request you're working on. If there is, please leave a comment on the issue to let us know you're working on it.
+
+If there isn't, open a new issue to discuss the problem or feature.
+
+### 2. Local Development Setup
+
+To begin local development, follow these steps:
+
+1. Clone the `nuxt/ui` repository to your local machine:
+
+```sh
+git clone https://github.com/nuxt/ui.git
+```
+
+2. Install dependencies and prepare the project:
+
+```sh
+pnpm install
+pnpm run dev:prepare
+```
+
+3. To configure your local development environment, use the following commands:
+
+- To work on the **documentation** in the `docs` folder, run:
+
+```sh
+pnpm run dev
+```
+
+- To test the components located in the `playground` folder within `app.vue`, run:
+
+```sh
+pnpm run play
+```
+
+#### IDE Setup
+
+We recommend using VS Code along with the ESLint extension. You can enable auto-fix and formatting when saving your code. Here's how:
+
+```json
+{
+  "editor.codeActionsOnSave": {
+    "source.fixAll": false,
+    "source.fixAll.eslint": true
+  }
+}
+```
+
+You can also use the `lint` command:
+
+```sh
+pnpm run lint # check for linting errors
+pnpm run lint:fix # fix linting errors
+```
+
+#### No Prettier
+
+Since ESLint is already configured to format the code, there's no need for duplicating functionality with Prettier.
+
+If you have Prettier installed in your editor, we recommend disabling it to avoid conflicts.
+
+#### Type Checking
+
+We use TypeScript for type checking. You can use the `typecheck` command to check for type errors:
+
+```sh
+pnpm run typecheck
+```
+
+### 3. Commit Conventions
+
+Use Conventional Commits for commit messages with the following format:
+
+```
+<type>(optional scope): <description>
+
+[optional body]
+
+[optional footer(s)]
+```
+
+#### Types
+
+- `feat` : for new features.
+- `fix` : for bug fixes.
+- `refactor` : for code changes that are neither bug fixes nor new features.
+- `perf` : for code refactoring that improves performance.
+- `test` : for code related to automatic testing.
+- `style` : for refactoring related to code style (not for CSS).
+- `docs` : for changes related to documentation.
+- `chore` : for anything else.
+
+#### Scope
+
+Where the change occurred (e.g., `Table`, `Alert`, `Accordion`, etc.).
+
+#### Description
+
+A summary of the changes made.
+
+#### Examples
+
+```
+feat(Alert): new component
+chore(Table): improve accessibility
+docs: migrate to @nuxt/ui-pro
+```
+
+### 4. Making the Pull Request
+
+- Follow the guide for creating a pull request and ensure your PR's title adheres to the Commit Convention. Mention any related issues in the PR description.
+
+- Multiple commits are fine; no need to rebase or force push. We'll use `Squash and Merge` when merging.
+
+- Ensure linting and make tests manually before submitting the PR. Avoid making unrelated changes.
+
+### 5. After You've Made a Pull Request
+
+We'll review it promptly. If assigned to a maintainer, they'll review it carefully. Ignore the red text; it's for tracking purposes.
+
+## Project Structure
+
+In this project, you'll find a variety of folders and files that serve different purposes. Here's an overview of the main ones:
+
+- **Documentation - `docs`** :
+
+The documentation is located in the `docs` folder. It's a Nuxt app that uses the `@nuxt/content` module to generate the documentation pages from Markdown files. Here's a breakdown of its structure:
+
+```
+docs/
+├── components/
+│   ├── examples/     # Components used in documentation as examples
+│   └── themes/       # Components used in the examples page in the theming section
+├── content/          # Documentation, separated into categories according to component types
+│   ├── 1.getting-started/
+│   │   ├── 1.index.md
+│   │   ├── 2.installation.md
+│   │   ├── ... etc
+│   ├── 2.elements/         # The category of components, which are elements
+│   │   ├── 1.accordion.md  # Docs for a single component (i.e., accordion)
+│   │   ├── 2.alert.md
+│   │   ├── ... etc
+└── ... etc
+```
+
+- **Components - `src`** :
+
+The components are located in the `src` folder. It's separated into categories according to component types. Here's a breakdown of its structure:
+
+```
+src/
+├── runtime/
+│   ├── composables/            # Composable functions used in components
+│   ├── components/             # Components folder, separated into categories according to component types
+│   │   ├── data/               # The category of components, which are data related
+│   │   │   ├── table.vue/      # Table component
+│   │   │   ├── elements/       # Elements category
+│   │   │   │   ├── ...etc/
+│   │   │   └── ... etc/
+│   │   ├── plugins/            # Plugins used in components
+│   │   ├── utils/              # Utility functions used on the components page (e.g., lodash)
+│   │   ├── types/              # Types used in components
+│   │   │   ├── accordion.d.ts/ # [componentName].d.ts type used for single component
+│   │   │   ├── avatar.d.ts/
+│   │   │   └── ... etc/
+│   │   ├── ui.config.ts/       # Configuration file used to apply styles to every component
+├── colors.ts/                  # Everything related to color functions (e.g., safelistByComponent, generateSafelist)
+└── ... etc/                    # Other files and folders
+```
+
+## Thanks
+
+Thank you again for being interested in this project! You are awesome! ❤️

docs/content/1.getting-started/6.roadmap.md

@@ -1,7 +0,0 @@
----
-title: Roadmap
-description: Discover our Volta board for @nuxt/ui development status.
-toc: false
----
-
-:volta-embed{token="eyJ2aWV3IjoiYm9hcmQiLCJib2FyZFN0YXR1c2VzIjpbInRyaWFnZSIsImJhY2tsb2ciLCJ0b2RvIiwiaW5fcHJvZ3Jlc3MiLCJpbl9yZXZpZXciLCJkb25lIiwicmVsZWFzZWQiXSwiYm9hcmRMaW5rZWRQcnMiOnRydWUsImxpc3RHcm91cCI6InN0YXRlIiwibGlzdE9yZGVyIjoiY3JlYXRlZF9hdCIsInRpbWVsaW5lWm9vbSI6Im1vbnRoIiwidGltZWxpbmVPcmRlciI6InN0YXRlIiwidGltZWxpbmVEaXNwbGF5IjoiYWxsX21pbGVzdG9uZXMiLCJmaWx0ZXJzIjp7fSwib3duZXIiOiJudXh0bGFicyIsIm5hbWUiOiJ1aSJ9"}

docs/content/1.getting-started/7.roadmap.md

@@ -0,0 +1,7 @@
+---
+title: Roadmap
+description: Discover our Volta board for @nuxt/ui development status.
+toc: false
+---
+
+:volta-embed{token="eyJ2aWV3IjoiYm9hcmQiLCJib2FyZFN0YXR1c2VzIjpbInRyaWFnZSIsImJhY2tsb2ciLCJ0b2RvIiwiaW5fcHJvZ3Jlc3MiLCJpbl9yZXZpZXciLCJkb25lIiwicmVsZWFzZWQiLCJjYW5jZWxsZWQiXSwiYm9hcmRMaW5rZWRQcnMiOnRydWUsImxpc3RHcm91cCI6InN0YXR1cyIsImxpc3RPcmRlciI6ImNyZWF0ZWRfYXQiLCJ0aW1lbGluZVpvb20iOiJtb250aCIsInRpbWVsaW5lT3JkZXIiOiJzdGF0ZSIsInRpbWVsaW5lRGlzcGxheSI6ImFsbF9taWxlc3RvbmVzIiwiZmlsdGVycyI6e30sIm93bmVyIjoibnV4dCIsIm5hbWUiOiJ1aSJ9"}

docs/content/2.elements/1.accordion.md

@@ -19,31 +19,7 @@ Pass an array to the `items` prop of the Accordion component. Each item can have
 - `defaultOpen` - Determines whether the item is initially open or closed.
 - `closeOthers` - Determines whether the item click close others or not. **It only works with multiple mode**.
 
-::component-example
-#default
-:accordion-example-basic
-
-#code
-```vue
-<script setup>
-const items = [{
-  label: 'Getting Started',
-  icon: 'i-heroicons-information-circle',
-  defaultOpen: 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: 'Installation',
-  icon: 'i-heroicons-arrow-down-tray',
-  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.'
-}, ...]
-</script>
-
-<template>
-  <UAccordion :items="items" />
-</template>
-```
-::
+:component-example{component="accordion-example-basic"}
 
 ### Style
 
@@ -65,20 +41,24 @@ props:
   color: 'primary'
   variant: 'soft'
   size: 'sm'
-ui:
-  variant:
-    solid: 1
-    outline: 1
-    ghost: 1
-    soft: 1
-    link: 1
-  size:
-    2xs: ''
-    xs: ''
-    sm: ''
-    md: ''
-    lg: ''
-    xl: ''
+options:
+  - name: variant
+    restriction: included
+    values:
+      - solid
+      - outline
+      - ghost
+      - soft
+      - link
+  - name: size
+    restriction: included
+    values:
+      - 2xs
+      - xs
+      - sm
+      - md
+      - lg
+      - xl
 ---
 ::
 
@@ -165,117 +145,18 @@ You can use slots to customize the buttons and items content of the Accordion.
 
 Use the `#default` slot to customize the trigger buttons. You will have access to the `item`, `index`, `open` properties and `close` method in the slot scope.
 
-::component-example
-#default
-:accordion-example-default-slot
-
-#code
-```vue
-<script setup>
-const items = [...]
-</script>
-
-<template>
-  <UAccordion :items="items" :ui="{ wrapper: 'flex flex-col w-full' }">
-    <template #default="{ item, index, open }">
-      <UButton color="gray" variant="ghost" class="border-b border-gray-200 dark:border-gray-700" :ui="{ rounded :'rounded-none', padding: { sm:'p-3' } }">
-        <template #leading>
-          <div class="w-6 h-6 rounded-full bg-primary-500 dark:bg-primary-400 flex items-center justify-center -my-1">
-            <UIcon :name="item.icon" class="w-4 h-4 text-white dark:text-gray-900" />
-          </div>
-        </template>
-
-        <span class="truncate">{{ index + 1 }}. {{ item.label }}</span>
-
-        <template #trailing>
-          <UIcon
-            name="i-heroicons-chevron-right-20-solid"
-            class="w-5 h-5 ms-auto transform transition-transform duration-200"
-            :class="[open && 'rotate-90']"
-          />
-        </template>
-      </UButton>
-    </template>
-  </UAccordion>
-</template>
-```
-::
+:component-example{component="accordion-example-default-slot"}
 
 ### `item`
 
 Use the `#item` slot to customize the items content or pass a `slot` property to customize a specific item. You will have access to the `item`, `index`, `open` properties and `close` method in the slot scope.
 
-::component-example
-#default
-:accordion-example-item-slot
-
-#code
-```vue
-<script setup>
-const items = [{
-  label: 'Getting Started',
-  icon: 'i-heroicons-information-circle',
-  defaultOpen: true,
-  slot: 'getting-started'
-}, {
-  label: 'Installation',
-  icon: 'i-heroicons-arrow-down-tray',
-  defaultOpen: true,
-  slot: 'installation'
-}, {
-  label: 'Theming',
-  icon: 'i-heroicons-eye-dropper',
-  defaultOpen: true,
-  description: '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>
-  <UAccordion :items="items">
-    <template #item="{ item }">
-      <p class="italic text-gray-900 dark:text-white text-center">
-        {{ item.description }}
-      </p>
-    </template>
-
-    <template #getting-started>
-      <div class="text-gray-900 dark:text-white text-center">
-        <Logo class="w-auto h-8 mx-auto" />
-
-        <p class="text-sm text-gray-500 dark:text-gray-400 mt-2">
-          Fully styled and customizable components for Nuxt.
-        </p>
-      </div>
-    </template>
-
-    <template #installation="{ description }">
-      <div class="flex flex-col justify-center items-center gap-1 mb-4">
-        <h3 class="text-xl font-bold text-gray-900 dark:text-white">
-          Installation
-        </h3>
-        <p class="text-sm text-gray-500 dark:text-gray-400">
-          Install <code>@nuxt/ui</code> dependency to your project:
-        </p>
-        <p>
-          {{ description }}
-        </p>
-      </div>
-
-      <div class="flex flex-col items-center">
-        <code>$ npm install @nuxt/ui</code>
-        <code>$ nnpm install -D @nuxt/ui</code>
-        <code>$ pnpm i -D @nuxt/ui</code>
-      </div>
-    </template>
-  </UAccordion>
-</template>
-```
-::
+:component-example{component="accordion-example-item-slot"}
 
 ## Props
 
 :component-props
 
-## Preset
+## Config
 
 :component-preset

docs/content/2.elements/10.progress.md

@@ -0,0 +1,153 @@
+---
+title: 'Progress'
+description: Show a horizontal bar to indicate task progression.
+navigation:
+  badge: New
+links:
+  - label: GitHub
+    icon: i-simple-icons-github
+    to: https://github.com/nuxt/ui/blob/dev/src/runtime/components/elements/Progress.vue
+---
+
+## Usage
+
+Pass an integer as the `value` from `0` to `100` to the Progress bar component.
+
+::component-card
+---
+props:
+  value: 70
+---
+::
+
+::callout{icon="i-heroicons-light-bulb"}
+Check out the [Range](/forms/range) component for forms.
+::
+
+### Max
+
+You may also set the `max` number to set the maximum progress value, which will be relative to 100% percent.
+
+::component-card
+---
+props:
+  value: 2
+  max: 5
+options:
+  - name: max
+    restriction: only
+    values:
+      - 3
+      - 4
+      - 5
+      - 6
+      - 7
+---
+::
+
+### Steps
+
+You can set an array of named steps in the `max` prop to show the active step, at the same time it sets the maximum value.
+
+The first step is always shown at `0%`, making the last `100%`.
+
+::component-card
+---
+props:
+  value: 0
+  max:
+    - Waiting to start
+    - Cloning...
+    - Migrating...
+    - Deployed!
+excludedProps:
+  - max
+---
+::
+
+### Progress indicator
+
+You can add a numeric indicator, which will show the percent on top the progress track.
+
+::component-card
+---
+props:
+  value: 20
+  indicator: true
+---
+::
+
+### Indeterminate
+
+By not setting a `value`, or setting it as `null`, the progress bar becomes _indeterminate_. The bar will be animated as a carousel, but you can change it using the `animation` prop for an inverse carousel, a swinging bar or an elastic bar.
+
+::component-card
+---
+baseProps:
+  value: null
+props:
+  animation: 'carousel'
+options:
+  - name: animation
+    restriction: only
+    values:
+      - 'carousel'
+      - 'carousel-inverse'
+      - 'swing'
+      - 'elastic'
+---
+::
+
+### Size
+
+Use the `size` prop to change the size of the progress bar.
+
+::component-card
+---
+baseProps:
+  value: 70
+props:
+  size: 'md'
+  indicator: false
+excludedProps:
+  - value
+---
+::
+
+### Style
+
+Use the `color` prop to change the visual style of the Progress bar. The `color` can be any color from the `ui.colors` object.
+
+::component-card
+---
+baseProps:
+  value: 70
+props:
+  color: 'primary'
+  indicator: false
+excludedProps:
+  - modelValue
+---
+::
+
+## Slots
+
+### `indicator`
+
+You can use the `#indicator` slot to show a custom indicator above the progress bar. It receives the current `percent` of progress.
+
+:component-example{component="progress-example-slot-indicator"}
+
+### `step-<index>`
+
+Use the `#step-<index>` to alter the HTML being shown for each step.
+
+:component-example{component="progress-example-slot-step"}
+
+## Props
+
+:component-props
+
+## Config
+
+:component-preset

docs/content/2.elements/11.meter.md

@@ -0,0 +1,180 @@
+---
+title: 'Meter'
+description: Display a gauge meter that fills or depletes.
+navigation:
+  badge: New
+links:
+  - label: GitHub
+    icon: i-simple-icons-github
+    to: https://github.com/nuxt/ui/blob/dev/src/runtime/components/elements/Meter.vue
+---
+
+## Usage
+
+Use the `value` prop from `0` to `100` to set a value for the meter bar.
+
+::component-card
+---
+props:
+  value: 25
+---
+::
+
+::callout{icon="i-heroicons-light-bulb"}
+Check out the [Range](/forms/range) component for inputs
+::
+
+### Min & Max
+
+By default, `min` is `0` and `max` is `100`. You can change either of these using their respective props, even for negative numbers.
+
+::component-card
+---
+props:
+  value: -25
+  min: -50
+  max: 50
+---
+::
+
+### Indicator
+
+You may show a percentage indicator on top of the meter using the `indicator` prop.
+
+::component-card
+---
+props:
+  value: 35
+  indicator: true
+---
+::
+
+### Label
+
+Add a label below the meter using the `label` prop.
+
+::component-card
+---
+baseProps:
+  value: 86
+props:
+  label: Disk usage
+---
+::
+
+### Icon
+
+You may also add an icon to the start label using the `icon` prop.
+
+::component-card
+---
+baseProps:
+  value: 86
+  label: Disk usage
+props:
+  icon: i-heroicons-server
+excludedProps:
+  - icon
+---
+::
+
+### Size
+
+Change the size of the meter bar using the `size` prop.
+
+::component-card
+---
+baseProps:
+  value: 75.4
+props:
+  size: 'md'
+  indicator: true
+  label: CPU Load
+---
+::
+
+### Style
+
+The `color` prop changes the visual style of the meter bar. The `color` can be any color from the `ui.colors` object.
+
+::component-card
+---
+baseProps:
+  value: 80
+  indicator: true
+  label: Memory usage
+props:
+  color: 'primary'
+---
+::
+
+## Group
+
+To group multiple meters into a group, adding all values, use the `MeterGroup` component.
+
+- To change the overall minimum and maximum value, pass the `min` and `max` props respectively.
+- To change size of all meters, use the `size` prop.
+- To show an indicator for the overall amount, set the `indicator` prop or slot.
+- To change the color of each meter, use the `color` prop.
+- To show a label for each meter, use the `label` prop on each meter.
+- To change the icon for each meter, use the `icon` prop.
+
+::component-card{slug="MeterGroup"}
+---
+baseProps:
+  icon: i-heroicons-minus
+props:
+  min: 0
+  max: 128
+  size: 'md'
+  indicator: true
+code: |
+  <UMeter :value="24" color="gray" label="System" />
+    <UMeter :value="8" color="red" label="Apps" />
+    <UMeter :value="12" color="yellow" label="Documents" />
+    <UMeter :value="42" color="green" label="Multimedia" />
+    <!-- Total: 86 -->
+---
+
+#default
+:u-meter{:value="24" color="gray" label="System"}
+:u-meter{:value="8" color="red" label="Apps"}
+:u-meter{:value="12" color="yellow" label="Documents"}
+:u-meter{:value="42" color="green" label="Multimedia"}
+::
+
+::callout{icon="i-heroicons-exclamation-triangle"}
+When the Meters are grouped, their individual indicators and label slots are stripped away.
+::
+
+A Meter group can also be used with an [indicator slot](#indicator-1), and even individual meter icons.
+
+:component-example{component="meter-group-example-slots"}
+
+## Slots
+
+### `indicator`
+
+Use the `#indicator` slot to change the indicator shown at the top of the bar. It receives the current meter percent.
+
+:component-example{component="meter-slot-indicator-example"}
+
+### `label`
+
+The `label` slot can be used to change how the label below the meter bar is shown. It receives the current meter percent.
+
+:component-example{component="meter-slot-label-example"}
+
+## Props
+
+:component-props
+
+:u-divider{label="MeterGroup" type="dashed" class="my-12"}
+
+:component-props{slug="MeterGroup"}
+
+## Config
+
+:component-preset
+
+:component-preset{slug="MeterGroup"}

docs/content/2.elements/2.alert.md

@@ -79,8 +79,11 @@ props:
   icon: 'i-heroicons-command-line'
   color: 'primary'
   variant: 'solid'
-extraColors:
-  - white
+options:
+  - name: color
+    restriction: included
+    values:
+      - white
 excludedProps:
   - icon
 ---
@@ -158,30 +161,12 @@ Use the `#title` and `#description` slots to customize the Alert.
 
 This can be handy when you want to display HTML content. To achieve this, you can define those slots and use the `v-html` directive.
 
-::component-example
-#default
-:alert-example-html
-
-#code
-```vue
-<template>
-  <UAlert title="Heads <i>up</i>!" icon="i-heroicons-command-line">
-    <template #title="{ title }">
-      <span v-html="title" />
-    </template>
-
-    <template #description>
-      You can add <b>components</b> to your app using the <u>cli</u>.
-    </template>
-  </UAlert>
-</template>
-```
-::
+:component-example{component="alert-example-html"}
 
 ## Props
 
 :component-props
 
-## Preset
+## Config
 
 :component-preset

docs/content/2.elements/3.avatar.md

@@ -4,8 +4,6 @@ links:
   - label: GitHub
     icon: i-simple-icons-github
     to: https://github.com/nuxt/ui/blob/dev/src/runtime/components/elements/Avatar.vue
-navigation:
-  badge: 'New'
 ---
 
 ## Usage
@@ -43,8 +41,11 @@ props:
   chipText: ''
   chipPosition: 'top-right'
   size : 'sm'
-extraColors:
-  - gray
+options:
+  - name: 'chipColor'
+    restriction: 'included'
+    values:
+      - 'gray'
 baseProps:
   src: 'https://avatars.githubusercontent.com/u/739984?v=4'
   alt: 'Avatar'
@@ -55,7 +56,7 @@ baseProps:
 
 If there is an error loading the `src` of the avatar or `src` is null / false a background placeholder will be displayed, customizable in `ui.avatar.background`.
 
-#### Icon :u-badge{label="New" class="ml-2 align-text-bottom !rounded-full" variant="subtle"}
+#### Icon
 
 Use any icon from [Iconify](https://icones.js.org) by setting the `icon` prop by using this pattern: `i-{collection_name}-{icon_name}` or change it globally in `ui.avatar.default.icon` to display an icon on top of the background.
 
@@ -81,7 +82,7 @@ props:
 ---
 ::
 
-### Group
+## Group
 
 To stack avatars as a group, use the `AvatarGroup` component.
 
@@ -94,17 +95,6 @@ To stack avatars as a group, use the `AvatarGroup` component.
 props:
   size: 'sm'
   max: 2
-ui:
-  size:
-    '3xs': ''
-    '2xs': ''
-    xs: ''
-    sm: ''
-    md: ''
-    lg: ''
-    xl: ''
-    '2xl': ''
-    '3xl': ''
 code: |
   <UAvatar src="https://avatars.githubusercontent.com/u/739984?v=4" alt="benjamincanac" />
     <UAvatar src="https://avatars.githubusercontent.com/u/904724?v=4" alt="Atinux" />
@@ -121,6 +111,12 @@ code: |
 
 :component-props
 
-## Preset
+:u-divider{label="AvatarGroup" type="dashed" class="my-12"}
+
+:component-props{slug="avatar-group"}
+
+## Config
 
 :component-preset
+
+:component-preset{slug="avatar-group"}

docs/content/2.elements/4.badge.md

@@ -38,6 +38,7 @@ Use the `color` and `variant` props to change the visual style of the Badge.
 props:
   color: 'primary'
   variant: 'solid'
+code: Badge
 ---
 
 Badge
@@ -52,11 +53,14 @@ Besides all the colors from the `ui.colors` object, you can also use the `white`
 props:
   color: 'white'
   variant: 'solid'
-ui:
-  variant:
-    solid: 1
+options:
+  - name: variant
+    restriction: expected
+    values:
+      - solid
 excludedProps:
   - color
+code: Badge
 ---
 
 Badge
@@ -69,11 +73,14 @@ Badge
 props:
   color: 'gray'
   variant: 'solid'
-ui:
-  variant:
-    solid: 1
+options:
+  - name: variant
+    restriction: expected
+    values:
+      - solid
 excludedProps:
   - color
+code: Badge
 ---
 
 Badge
@@ -86,12 +93,14 @@ Badge
 props:
   color: 'black'
   variant: 'solid'
-ui:
-  variant:
-    solid: 1
-    link: 1
+options:
+  - name: variant
+    restriction: only
+    values:
+      - solid
 excludedProps:
   - color
+code: Badge
 ---
 
 Badge
@@ -105,6 +114,7 @@ Use the `size` prop to change the size of the Badge.
 ---
 props:
   size: 'sm'
+code: Badge
 ---
 
 Badge
@@ -121,6 +131,7 @@ props:
     rounded: 'rounded-full'
 excludedProps:
   - ui
+code: Badge
 ---
 
 Badge
@@ -134,6 +145,6 @@ You can customize the whole [preset](#preset) by using the `ui` prop.
 
 :component-props
 
-## Preset
+## Config
 
 :component-preset

docs/content/2.elements/5.button.md

@@ -4,8 +4,6 @@ links:
   - label: GitHub
     icon: i-simple-icons-github
     to: https://github.com/nuxt/ui/blob/dev/src/runtime/components/elements/Button.vue
-navigation:
-  badge: 'New'
 ---
 
 ## Usage
@@ -38,6 +36,7 @@ Use the `color` and `variant` props to change the visual style of the Button.
 props:
   color: 'primary'
   variant: 'solid'
+code: Button
 ---
 
 Button
@@ -53,12 +52,15 @@ backgroundClass: 'bg-gray-50 dark:bg-gray-800'
 props:
   color: 'white'
   variant: 'solid'
-ui:
-  variant:
-    solid: 1
-    ghost: 1
+options:
+  - name: variant
+    restriction: expected
+    values:
+      - solid
+      - ghost
 excludedProps:
   - color
+code: Button
 ---
 
 Button
@@ -71,13 +73,16 @@ Button
 props:
   color: 'gray'
   variant: 'solid'
-ui:
-  variant:
-    solid: 1
-    ghost: 1
-    link: 1
+options:
+  - name: variant
+    restriction: expected
+    values:
+      - solid
+      - ghost
+      - link
 excludedProps:
   - color
+code: Button
 ---
 
 Button
@@ -90,12 +95,15 @@ Button
 props:
   color: 'black'
   variant: 'solid'
-ui:
-  variant:
-    solid: 1
-    link: 1
+options:
+  - name: variant
+    restriction: expected
+    values:
+      - solid
+      - link
 excludedProps:
   - color
+code: Button
 ---
 
 Button
@@ -109,6 +117,7 @@ Use the `size` prop to change the size of the Button.
 ---
 props:
   size: 'sm'
+code: Button
 ---
 
 Button
@@ -125,6 +134,7 @@ props:
     rounded: 'rounded-full'
 excludedProps:
   - ui
+code: Button
 ---
 
 Button
@@ -179,6 +189,7 @@ Use the `disabled` prop to disable the Button.
 ---
 props:
   disabled: true
+code: Button
 ---
 
 Button
@@ -194,6 +205,7 @@ Use the `loading-icon` prop to set a different icon or change it globally in `ui
 ---
 props:
   loading: true
+code: Button
 ---
 
 Button
@@ -207,6 +219,7 @@ Use the `block` prop to make the Button fill the width of its container.
 ---
 props:
   block: true
+code: Button
 ---
 
 Button
@@ -221,6 +234,7 @@ Use the `to` prop to make the Button a link.
 props:
   to: 'https://volta.net'
   target: '_blank'
+code: Button
 ---
 
 Button
@@ -273,12 +287,12 @@ excludedProps:
 ---
 ::
 
-### Group
+## Group
 
 To stack buttons as a group, use the `ButtonGroup` component.
 
 - To size all the buttons equally, pass the `size` prop
-- To change the orientation of the buttons, set the `orientation` prop to `vertical` :u-badge{label="New" class="!rounded-full" variant="subtle"}
+- To change the orientation of the buttons, set the `orientation` prop to `vertical`
 - To adjust the rounded or the shadow around buttons, customize with `ui.buttonGroup.rounded` or `ui.buttonGroup.shadow`
 
 ::component-card{slug="ButtonGroup"}
@@ -286,17 +300,6 @@ To stack buttons as a group, use the `ButtonGroup` component.
 props:
   size: 'sm'
   orientation: 'horizontal'
-ui:
-  size:
-    2xs: ''
-    xs: ''
-    sm: ''
-    md: ''
-    lg: ''
-    xl: ''
-  orientation:
-    horizontal: ''
-    vertical: ''
 code: |
   <UButton label="Action" color="white" />
     <UButton icon="i-heroicons-chevron-down-20-solid" color="gray" />
@@ -307,6 +310,23 @@ code: |
 :u-button{icon="i-heroicons-chevron-down-20-solid" color="gray"}
 ::
 
+This can also work with an [Input](/forms/input) component for example:
+
+::component-card{slug="ButtonGroup"}
+---
+props:
+  size: 'sm'
+  orientation: 'horizontal'
+code: |
+  <UInput />
+  <UButton icon="i-heroicons-clipboard-document" color="gray" />
+---
+
+#default
+:u-input
+:u-button{icon="i-heroicons-clipboard-document" color="gray"}
+::
+
 ## Slots
 
 ### `leading`
@@ -353,6 +373,12 @@ excludedProps:
 
 :component-props
 
-## Preset
+:u-divider{label="ButtonGroup" type="dashed" class="my-12"}
+
+:component-props{slug="ButtonGroup"}
+
+## Config
 
 :component-preset
+
+:component-preset{slug="ButtonGroup"}

docs/content/2.elements/6.dropdown.md

@@ -24,81 +24,29 @@ Pass an array of arrays to the `items` prop of the Dropdown component. Each arra
 
 You can also pass any property from the [NuxtLink](https://nuxt.com/docs/api/components/nuxt-link#props) component such as `to`, `exact`, etc.
 
-::component-example
-#default
-:dropdown-example-basic
-
-#code
-```vue
-<script setup>
-const items = [
-  [{
-    label: 'Profile',
-    avatar: {
-      src: 'https://avatars.githubusercontent.com/u/739984?v=4'
-    }
-  }], [{
-    label: 'Edit',
-    icon: 'i-heroicons-pencil-square-20-solid',
-    shortcuts: ['E'],
-    click: () => {
-      console.log('Edit')
-    }
-  }, {
-    label: 'Duplicate',
-    icon: 'i-heroicons-document-duplicate-20-solid',
-    shortcuts: ['D'],
-    disabled: true
-  }], [{
-    label: 'Archive',
-    icon: 'i-heroicons-archive-box-20-solid'
-  }, {
-    label: 'Move',
-    icon: 'i-heroicons-arrow-right-circle-20-solid'
-  }], [{
-    label: 'Delete',
-    icon: 'i-heroicons-trash-20-solid',
-    shortcuts: ['⌘', 'D']
-  }]
-]
-</script>
-
-<template>
-  <UDropdown :items="items" :popper="{ placement: 'bottom-start' }">
-    <UButton color="white" label="Options" trailing-icon="i-heroicons-chevron-down-20-solid" />
-  </UDropdown>
-</template>
-```
-::
+:component-example{component="dropdown-example-basic"}
 
 ### Mode
 
 Use the `mode` prop to switch between `click` and `hover` modes.
 
-::component-example
-#default
-:dropdown-example-mode
+:component-example{component="dropdown-example-mode"}
 
-#code
-```vue
-<script setup>
-const items = [
-  [{
-    label: 'Profile',
-    avatar: {
-      src: 'https://avatars.githubusercontent.com/u/739984?v=4'
-    }
-  }]
-]
-</script>
+## Popper
 
-<template>
-  <UDropdown :items="items" mode="hover" :popper="{ placement: 'bottom-start' }">
-    <UButton color="white" label="Options" trailing-icon="i-heroicons-chevron-down-20-solid" />
-  </UDropdown>
-</template>
-```
-::
+Use the `popper` prop to customize the popper instance.
+
+### Arrow
+
+:component-example{component="dropdown-example-arrow"}
+
+### Placement
+
+:component-example{component="dropdown-example-placement"}
+
+### Offset
+
+:component-example{component="dropdown-example-offset"}
 
 ## Slots
 
@@ -106,66 +54,12 @@ const items = [
 
 Use the `#item` slot to customize the items content or pass a `slot` property to customize a specific item. You will have access to the `item` property in the slot scope.
 
-::component-example
-#default
-:dropdown-example-slot
-
-#code
-```vue
-<script setup>
-const items = [
-  [{
-    label: 'ben@example.com',
-    slot: 'account',
-    disabled: true
-  }], [{
-    label: 'Settings',
-    icon: 'i-heroicons-cog-8-tooth'
-  }], [{
-    label: 'Documentation',
-    icon: 'i-heroicons-book-open'
-  }, {
-    label: 'Changelog',
-    icon: 'i-heroicons-megaphone'
-  }, {
-    label: 'Status',
-    icon: 'i-heroicons-signal'
-  }], [{
-    label: 'Sign out',
-    icon: 'i-heroicons-arrow-left-on-rectangle'
-  }]
-]
-</script>
-
-<template>
-  <UDropdown :items="items" :ui="{ item: { disabled: 'cursor-text select-text' } }" :popper="{ placement: 'bottom-start' }">
-    <UAvatar src="https://avatars.githubusercontent.com/u/739984?v=4" />
-
-    <template #account="{ item }">
-      <div class="text-left">
-        <p>
-          Signed in as
-        </p>
-        <p class="truncate font-medium text-gray-900 dark:text-white">
-          {{ item.label }}
-        </p>
-      </div>
-    </template>
-
-    <template #item="{ item }">
-      <span class="truncate">{{ item.label }}</span>
-
-      <UIcon :name="item.icon" class="flex-shrink-0 h-4 w-4 text-gray-400 dark:text-gray-500 ms-auto" />
-    </template>
-  </UDropdown>
-</template>
-```
-::
+:component-example{component="dropdown-example-slot"}
 
 ## Props
 
 :component-props
 
-## Preset
+## Config
 
 :component-preset

docs/content/2.elements/8.kbd.md

@@ -32,24 +32,7 @@ props:
 
 As explained in the [Shortcuts](/getting-started/shortcuts) page, you can use the `metaSymbol` property of the `useShortcuts` composable to display the meta key according to the user's OS.
 
-::component-example
-#default
-:kbd-example
-
-#code
-```vue
-<script setup>
-const { metaSymbol } = useShortcuts()
-</script>
-
-<template>
-  <div class="flex items-center gap-0.5">
-    <UKbd>{{ metaSymbol }}</UKbd>
-    <UKbd>K</UKbd>
-  </div>
-</template>
-```
-::
+:component-example{component="kbd-example"}
 
 ### Size
 
@@ -69,6 +52,6 @@ U
 
 :component-props
 
-## Preset
+## Config
 
 :component-preset