chore(release): 2.6.0

Co-authored-by: Benjamin Canac <canacb1@gmail.com>

.eslintrc.cjs

@@ -2,6 +2,10 @@ module.exports = {
   root: true,
   extends: ['@nuxt/eslint-config'],
   rules: {
+    'semi': ['error', 'never'],
+    'quotes': ['error', 'single'],
+    'comma-dangle': ['error', 'never'],
+    'space-before-function-paren': ['error', 'always'],
     'vue/multi-word-component-names': 0,
     'vue/max-attributes-per-line': ['error', {
       singleline: {

.github/workflows/ci-dev.yml

@@ -29,7 +29,7 @@ jobs:
         name: Install pnpm
         id: pnpm-install
         with:
-          version: 7
+          version: 8
           run_install: false
 
       - name: Get pnpm store directory

.github/workflows/ci.yml

@@ -29,7 +29,7 @@ jobs:
         name: Install pnpm
         id: pnpm-install
         with:
-          version: 7
+          version: 8
           run_install: false
 
       - name: Get pnpm store directory

.gitignore

@@ -7,3 +7,4 @@ dist
 .DS_Store
 .history
 .vercel
+.idea

.npmrc

@@ -1 +1,2 @@
 shamefully-hoist=true
+auto-install-peers=true

.prettierrc.json

@@ -0,0 +1,6 @@
+{
+  "trailingComma": "none",
+  "tabWidth": 2,
+  "semi": false,
+  "singleQuote": true
+}

.release-it.json

@@ -0,0 +1,23 @@
+{
+  "git": {
+    "commitMessage": "chore(release): ${version}"
+  },
+  "npm": {
+    "publish": false
+  },
+  "github": {
+    "release": true,
+    "web": true
+  },
+  "hooks": {
+    "before:init": ["pnpm lint"]
+  },
+  "plugins": {
+    "@release-it/conventional-changelog": {
+      "preset": "conventionalcommits",
+      "infile": "CHANGELOG.md",
+      "header": "# Changelog",
+      "ignoreRecommendedBump": true
+    }
+  }
+}

CHANGELOG.md

@@ -1,6 +1,76 @@
 # Changelog
 
-All notable changes to this project will be documented in this file. See [standard-version](https://github.com/conventional-changelog/standard-version) for commit guidelines.
+## [2.6.0](https://github.com/nuxtlabs/ui/compare/v2.5.0...v2.6.0) (2023-07-18)
+
+
+### ⚠ BREAKING CHANGES
+
+* **Avatar:** bind component attributes to img element (#421)
+
+### Features
+
+* **Accordion:** add `multiple` prop and close others by default ([#364](https://github.com/nuxtlabs/ui/issues/364)) ([b78fcf9](https://github.com/nuxtlabs/ui/commit/b78fcf91a4b592a6ca83ca4333e1d6658ec6458d))
+* **Accordion:** new component ([#301](https://github.com/nuxtlabs/ui/issues/301)) ([e50f377](https://github.com/nuxtlabs/ui/commit/e50f377b946996efd4546195e528fbed59dcb22f))
+* **Avatar:** bind component attributes to img element ([#421](https://github.com/nuxtlabs/ui/issues/421)) ([773a23f](https://github.com/nuxtlabs/ui/commit/773a23f969d2dbbbcb01582f9e127e02f0248be9))
+* **Modal:** add `prevent-close` prop ([2cc5c0d](https://github.com/nuxtlabs/ui/commit/2cc5c0d810e30b889081d1f457d725004bd0b933)), closes [#303](https://github.com/nuxtlabs/ui/issues/303)
+* **SelectMenu:** handle async search ([#426](https://github.com/nuxtlabs/ui/issues/426)) ([5f8fe85](https://github.com/nuxtlabs/ui/commit/5f8fe8559f2eb12d3916387d5acf65a391bfa0eb))
+* **Slideover:** add `prevent-close` prop ([d15e816](https://github.com/nuxtlabs/ui/commit/d15e8163e7d7eb3eb7624bb982c139581902d596))
+* **Table:** add click event for the entire row ([#353](https://github.com/nuxtlabs/ui/issues/353)) ([d292706](https://github.com/nuxtlabs/ui/commit/d2927069673840dad58d388ab982b5488642edec))
+* **Table:** allow columns `class` customization ([5dffa86](https://github.com/nuxtlabs/ui/commit/5dffa868b11760610ea0bf9f2ce37931cdac4eb9)), closes [#366](https://github.com/nuxtlabs/ui/issues/366)
+
+
+### Bug Fixes
+
+* **Accordion:** missing `ref` import from vue ([3de6b34](https://github.com/nuxtlabs/ui/commit/3de6b349d8b043ed2524bd6418f350ebb4557adb))
+* **Accordion:** solve the shift between buttons when they are opened ([#379](https://github.com/nuxtlabs/ui/issues/379)) ([eaf0043](https://github.com/nuxtlabs/ui/commit/eaf0043da660dfb168a7d4f2312d4344598c2f86))
+* **ButtonGroup:** err when no props on buttons ([80a9738](https://github.com/nuxtlabs/ui/commit/80a97384909891a14edca4ff760d5c81b26b3307)), closes [#360](https://github.com/nuxtlabs/ui/issues/360)
+* **Button:** missing `disabled` state on some variants ([41a5238](https://github.com/nuxtlabs/ui/commit/41a523857902b1674ba7f6021938f68d66a2ddbd))
+* **Modal:** disabling `transition` prop had no effect ([db34665](https://github.com/nuxtlabs/ui/commit/db346652b829ea02b8b1f5355f7080f5e530dcb2))
+* **Range:** `disabled` thumb opacity ([c92dc98](https://github.com/nuxtlabs/ui/commit/c92dc980c984cff8e9f9c38eb9524d151523c16b))
+* **Range:** progress style ([#385](https://github.com/nuxtlabs/ui/issues/385)) ([a79c165](https://github.com/nuxtlabs/ui/commit/a79c165eeeb3e8ea76cd3abc1b8f1218d02b446b))
+* **SelectMenu:** missing `appear` on transition ([cbe2b1b](https://github.com/nuxtlabs/ui/commit/cbe2b1bfb802f8cb10dd4a0d36a8cefb215debb2)), closes [#400](https://github.com/nuxtlabs/ui/issues/400)
+* **Table:** fixed row deletion bug on deselect ([#425](https://github.com/nuxtlabs/ui/issues/425)) ([46b444a](https://github.com/nuxtlabs/ui/commit/46b444a3e0cc988c89bfde7442b42b1e82095fc9))
+
+## [2.5.0](https://github.com/nuxtlabs/ui/compare/v2.4.1...v2.5.0) (2023-06-27)
+
+
+### ⚠ BREAKING CHANGES
+
+* **Radio/Checkbox/Toggle:** handle `color` prop for form elements (#323)
+
+### Features
+
+* **Avatar:** handle `chipText` ([#306](https://github.com/nuxtlabs/ui/issues/306)) ([759af05](https://github.com/nuxtlabs/ui/commit/759af058df636f55a54326b21ebb1c315c73c26b))
+* **defineShortcuts:** chained shortcuts + docs update ([#282](https://github.com/nuxtlabs/ui/issues/282)) ([a67f691](https://github.com/nuxtlabs/ui/commit/a67f691a0066e4d017f580388df31b22d1c45372))
+* **Radio/Checkbox/Toggle:** handle `color` prop for form elements ([#323](https://github.com/nuxtlabs/ui/issues/323)) ([ffb312d](https://github.com/nuxtlabs/ui/commit/ffb312d34dfc2ac7a7aabdcbdf9ddb1d04d8a66f))
+* **Range:** new component ([#290](https://github.com/nuxtlabs/ui/issues/290)) ([97a1c86](https://github.com/nuxtlabs/ui/commit/97a1c8643314d5ff950b122f46f31b206485cd50))
+* RTL support ([#320](https://github.com/nuxtlabs/ui/issues/320)) ([4ea114a](https://github.com/nuxtlabs/ui/commit/4ea114a4d6b11277674c121130f746927045ade3))
+* **Table:** pass row index to table cell ([#291](https://github.com/nuxtlabs/ui/issues/291)) ([71c2465](https://github.com/nuxtlabs/ui/commit/71c2465d7be78cfb0e274b107aceda9de5384fb7))
+* **Table:** reset sort on third click ([1ff11ac](https://github.com/nuxtlabs/ui/commit/1ff11ac1a3eff537a4ee854a049668f312f1d415)), closes [#300](https://github.com/nuxtlabs/ui/issues/300)
+
+
+### Bug Fixes
+
+* **components:** prefix `@headlessui/vue` components ([41b85d5](https://github.com/nuxtlabs/ui/commit/41b85d50a865cfe4aa0f06a62f5209358422eaec)), closes [#315](https://github.com/nuxtlabs/ui/issues/315)
+* **defineShortcuts:** missing `ref` import ([a880379](https://github.com/nuxtlabs/ui/commit/a8803794802c4032f703a0a0a6343a8204b19bc8))
+* **defineShortcuts:** missing `useDebounceFn` import ([9cd73aa](https://github.com/nuxtlabs/ui/commit/9cd73aa49d1dd43bac8ec71932b850bdcb375fcf))
+* **FormGroup:** prevent overriding `color` of children ([6be9290](https://github.com/nuxtlabs/ui/commit/6be9290f689c449b6a6435a3ef25e89a106e1c06)), closes [#352](https://github.com/nuxtlabs/ui/issues/352)
+* **Table:** default `sortButton` icon ([07b27a2](https://github.com/nuxtlabs/ui/commit/07b27a228d293655368825979a6ca0bc1dd6e51a))
+* **Table:** missing default sort icon when overriding `sort-button` prop ([0f3fe0d](https://github.com/nuxtlabs/ui/commit/0f3fe0d54ef8b45a046b84ceb31ae55a26e153fb))
+* **Toggle:** add `opacity-50` when disabled ([c2ebb04](https://github.com/nuxtlabs/ui/commit/c2ebb0416eb2c92b759be5a4bf0d219031889b4b))
+* **Tooltip:** add `color` in config ([1b03b8a](https://github.com/nuxtlabs/ui/commit/1b03b8a531d397871e0df4f8574d7f47ac4ec610))
+
+### [2.4.1](https://github.com/nuxtlabs/ui/compare/v2.4.0...v2.4.1) (2023-06-21)
+
+
+### Bug Fixes
+
+* **forms:** precise type assertion for `onInput` event handler ([#293](https://github.com/nuxtlabs/ui/issues/293)) ([457b7a9](https://github.com/nuxtlabs/ui/commit/457b7a9fb72e6469014b6ca18e7034dd5c6f44b8))
+* **module:** let `tailwindcss` viewer enabled by default ([4023fbe](https://github.com/nuxtlabs/ui/commit/4023fbec29e5b4d40fd23e8c2ae3d0cf23addc64)), closes [#292](https://github.com/nuxtlabs/ui/issues/292)
+* **module:** safelist aliases for input ([f719111](https://github.com/nuxtlabs/ui/commit/f719111abb94c81f3932927a0154b3e1bed73a9a))
+* **module:** safelist regex when a `:` was present before color ([f7e2082](https://github.com/nuxtlabs/ui/commit/f7e2082983c2eb650e95a9040aafde4ce2c88c54))
+* **Radio/Checkbox:** remove legacy `custom` ([3bac087](https://github.com/nuxtlabs/ui/commit/3bac0874f106a8ff7436b541f9d064c1c7c27464))
+
 
 ## [2.4.0](https://github.com/nuxtlabs/ui/compare/v2.3.0...v2.4.0) (2023-06-13)
 
@@ -619,4 +689,4 @@ All notable changes to this project will be documented in this file. See [standa
 * **Toggle:** add missing `computed` import ([0f09c9b](https://github.com/nuxtlabs/ui/commit/0f09c9baae501458af029f853c78b1c10a3ac133))
 * **Tooltip:** missing `ref` import ([b08a8cc](https://github.com/nuxtlabs/ui/commit/b08a8cc0ac79e89817e338281a81c477d5ec645a))
 * **useTimer:** remove log ([c6dcbd1](https://github.com/nuxtlabs/ui/commit/c6dcbd1b2b542dab1850504a60451a485e2d4004))
-* **VerticalNavigation:** add `v-if` on label ([79d8e08](https://github.com/nuxtlabs/ui/commit/79d8e086f0c61887c52da6fe4a13f1bdf7077227))
+* **VerticalNavigation:** add `v-if` on label ([79d8e08](https://github.com/nuxtlabs/ui/commit/79d8e086f0c61887c52da6fe4a13f1bdf7077227))

README.md

@@ -14,6 +14,7 @@ This module has been developed by [NuxtLabs](https://nuxtlabs.com/) for [Volta](
 - Built with [Headless UI](https://headlessui.dev/) and [Tailwind CSS](https://tailwindcss.com/)
 - HMR support through Nuxt App Config
 - Dark mode support
+- Support for LTR and RTL languages
 - Keyboard shortcuts
 - Bundled icons
 - Fully typed
@@ -46,7 +47,7 @@ If you want latest updates, please use `@nuxthq/ui-edge` in your `package.json`:
 
 ## Documentation
 
-Visit http://ui.nuxtlabs.com to view the documentation.
+Visit https://ui.nuxtlabs.com to view the documentation.
 
 ## Credits
 

docs/app.vue

@@ -1,31 +1,41 @@
 <template>
   <div>
-    <Header />
+    <UHeader>
+      <template #left>
+        <NuxtLink to="/getting-started" class="flex items-end gap-1.5 font-bold text-xl text-gray-900 dark:text-white">
+          <Logo class="w-8 h-8 text-primary-500 dark:text-primary-400" />
+
+          <span class="hidden sm:block">NuxtLabs</span><span class="sm:text-primary-500 dark:sm:text-primary-400">UI</span>
+        </NuxtLink>
+      </template>
+
+      <template #center>
+        <UDocsSearchButton class="ml-1.5 flg:w-64 xl:w-96" />
+      </template>
+
+      <template #right>
+        <ColorPicker />
+
+        <UColorModeButton />
+
+        <USocialButton to="https://twitter.com/nuxtlabs" icon="i-simple-icons-twitter" class="hidden lg:inline-flex" />
+        <USocialButton to="https://github.com/nuxtlabs/ui" icon="i-simple-icons-github" class="hidden lg:inline-flex" />
+      </template>
+
+      <template #links>
+        <UDocsAsideAnchors :links="anchors" />
+        <UDocsAsideLinks :links="navigation" />
+      </template>
+    </UHeader>
 
     <UContainer>
-      <div class="relative grid lg:grid-cols-10 lg:gap-8">
-        <DocsAside class="lg:col-span-2" />
-
-        <div class="relative pt-8 pb-16" :class="[toc ? 'lg:col-span-6' : 'lg:col-span-8']">
-          <DocsPageHeader />
-
-          <NuxtPage />
-
-          <DocsPageFooter class="mt-12" />
-
-          <hr class="border-gray-200 dark:border-gray-800 my-6">
-
-          <DocsPrevNext />
-
-          <DocsFooter class="mt-16" />
-        </div>
-
-        <DocsToc v-if="toc" class="lg:col-span-2 order-first lg:order-last" />
-      </div>
+      <UDocsLayout :links="navigation" :anchors="anchors">
+        <NuxtPage />
+      </UDocsLayout>
     </UContainer>
 
     <ClientOnly>
-      <DocsSearch />
+      <UDocsSearch :files="files" :links="navigation" />
     </ClientOnly>
 
     <UNotifications />
@@ -33,9 +43,27 @@
 </template>
 
 <script setup lang="ts">
-const { toc } = useContent()
 const colorMode = useColorMode()
 
+const { data: navigation } = await useAsyncData('navigation', () => fetchContentNavigation())
+const { data: files } = await useLazyAsyncData('files', () => queryContent().where({ _type: 'markdown', navigation: { $ne: false } }).find(), { default: () => [] })
+
+provide('navigation', navigation)
+
+const anchors = [{
+  label: 'Documentation',
+  icon: 'i-heroicons-book-open-solid',
+  to: '/getting-started'
+}, {
+  label: 'Playground',
+  icon: 'i-simple-icons-stackblitz',
+  to: 'https://stackblitz.com/edit/nuxtlabs-ui?file=app.config.ts,app.vue'
+}, {
+  label: 'Releases',
+  icon: 'i-heroicons-rocket-launch-solid',
+  to: 'https://github.com/nuxtlabs/ui/releases'
+}]
+
 // Computed
 
 const color = computed(() => colorMode.value === 'dark' ? '#18181b' : 'white')
@@ -49,14 +77,13 @@ useHead({
     { key: 'theme-color', name: 'theme-color', content: color }
   ],
   link: [
-    { rel: 'stylesheet', href: 'https://rsms.me/inter/inter.css' },
     { rel: 'icon', type: 'image/svg+xml', href: '/icon.svg' }
   ],
   htmlAttrs: {
     lang: 'en'
   },
   bodyAttrs: {
-    class: 'antialiased font-sans text-gray-500 dark:text-gray-400 bg-white dark:bg-gray-900'
+    class: 'antialiased font-sans text-gray-700 dark:text-gray-200 bg-white dark:bg-gray-900'
   }
 })
 

docs/app/router.options.ts

@@ -1,48 +0,0 @@
-import type { RouterConfig } from '@nuxt/schema'
-
-function findHashPosition (hash): { el: any, behavior: ScrollBehavior, top: number } {
-  const el = document.querySelector(hash)
-  // vue-router does not incorporate scroll-margin-top on its own.
-  if (el) {
-    const top = parseFloat(getComputedStyle(el).scrollMarginTop)
-
-    return {
-      el: hash,
-      behavior: 'smooth',
-      top
-    }
-  }
-}
-
-// https://router.vuejs.org/api/#routeroptions
-export default <RouterConfig>{
-  scrollBehavior (to, from, savedPosition) {
-    const nuxtApp = useNuxtApp()
-
-    // If history back
-    if (savedPosition) {
-      // Handle Suspense resolution
-      return new Promise((resolve) => {
-        nuxtApp.hooks.hookOnce('page:finish', () => {
-          setTimeout(() => resolve(savedPosition), 50)
-        })
-      })
-    }
-
-    // Scroll to heading on click
-    if (to.hash) {
-      return new Promise((resolve) => {
-        if (to.path === from.path) {
-          setTimeout(() => resolve(findHashPosition(to.hash)), 50)
-        } else {
-          nuxtApp.hooks.hookOnce('page:finish', () => {
-            setTimeout(() => resolve(findHashPosition(to.hash)), 50)
-          })
-        }
-      })
-    }
-
-    // Scroll to top of window
-    return { top: 0 }
-  }
-}

docs/components/Footer.vue

@@ -0,0 +1,23 @@
+<template>
+  <footer class="flex items-center gap-1.5 mt-12">
+    <div class="flex-1 flex items-baseline gap-1.5 text-sm text-gray-600 dark:text-gray-300 leading-6">
+      Made by
+      <NuxtLink to="https://nuxtlabs.com" aria-label="NuxtLabs">
+        <LogoLabs class="text-gray-900 dark:text-white w-14 h-auto" />
+      </NuxtLink>
+    </div>
+
+    <NuxtLink :to="`https://github.com/nuxtlabs/ui/releases/tag/v${config.version}`" target="_blank" class="inline-flex">
+      <UBadge :label="`v${config.version}`" />
+    </NuxtLink>
+
+    <div class="flex-1 flex items-center justify-end gap-1.5 -my-1 lg:hidden">
+      <USocialButton to="https://twitter.com/nuxtlabs" icon="i-simple-icons-twitter" />
+      <USocialButton to="https://github.com/nuxtlabs/ui" icon="i-simple-icons-github" />
+    </div>
+  </footer>
+</template>
+
+<script setup lang="ts">
+const config = useRuntimeConfig().public
+</script>

docs/components/Header.vue

@@ -1,116 +0,0 @@
-<template>
-  <header class="sticky top-0 z-50 w-full backdrop-blur flex-none border-b border-gray-900/10 dark:border-gray-50/[0.06] bg-white/75 dark:bg-gray-900/75">
-    <UContainer>
-      <div class="flex items-center justify-between h-16">
-        <div class="flex items-center gap-3">
-          <NuxtLink to="/getting-started" class="flex items-end gap-1.5 font-bold text-xl text-gray-900 dark:text-white">
-            <Logo class="w-8 h-8 text-primary-500 dark:text-primary-400" />
-
-            NuxtLabs<span class="text-primary-500 dark:text-primary-400">UI</span>
-          </NuxtLink>
-        </div>
-
-        <div class="flex items-center -mr-1.5 gap-1.5">
-          <div class="hidden lg:block">
-            <ThemeSelect />
-          </div>
-
-          <UButton
-            color="gray"
-            variant="ghost"
-            class="lg:hidden"
-            icon="i-heroicons-magnifying-glass-20-solid"
-            @click="openDocsSearch"
-          />
-
-          <ClientOnly>
-            <UButton
-              :icon="isDark ? 'i-heroicons-moon' : 'i-heroicons-sun'"
-              color="gray"
-              variant="ghost"
-              aria-label="Theme"
-              @click="isDark = !isDark"
-            />
-
-            <template #fallback>
-              <div class="w-8 h-8" />
-            </template>
-          </ClientOnly>
-
-          <UButton
-            to="https://github.com/nuxtlabs/ui"
-            target="_blank"
-            color="gray"
-            variant="ghost"
-            icon="i-simple-icons-github"
-          />
-
-          <UButton
-            color="gray"
-            variant="ghost"
-            class="lg:hidden"
-            icon="i-heroicons-bars-3-20-solid"
-            @click="isDialogOpen = true"
-          />
-        </div>
-      </div>
-    </UContainer>
-
-    <TransitionRoot :show="isDialogOpen" as="template">
-      <Dialog as="div" @close="isDialogOpen = false">
-        <DialogPanel class="fixed inset-0 z-50 overflow-y-auto bg-white dark:bg-gray-900 lg:hidden">
-          <div class="px-4 sm:px-6 sticky top-0 border-b border-gray-900/10 dark:border-gray-50/[0.06] bg-white/75 dark:bg-gray-900/75 backdrop-blur z-10">
-            <div class="flex items-center justify-between h-16">
-              <div class="flex items-center gap-3">
-                <NuxtLink to="/getting-started" class="flex items-end gap-1.5 font-bold text-xl text-gray-900 dark:text-white">
-                  <Logo class="w-8 h-8 text-primary-500 dark:text-primary-400" />
-                  NuxtLabs<span class="text-primary-500 dark:text-primary-400">UI</span>
-                </NuxtLink>
-              </div>
-
-              <div class="flex -mr-1.5">
-                <UButton
-                  color="gray"
-                  variant="ghost"
-                  icon="i-heroicons-x-mark-20-solid"
-                  @click="isDialogOpen = false"
-                />
-              </div>
-            </div>
-          </div>
-          <div class="px-4 sm:px-6 py-4 sm:py-6">
-            <ThemeSelect class="mb-4 sm:mb-6 w-full" />
-
-            <DocsAsideLinks @click="isDialogOpen = false" />
-          </div>
-        </DialogPanel>
-      </Dialog>
-    </TransitionRoot>
-  </header>
-</template>
-
-<script setup lang="ts">
-import { Dialog, DialogPanel, TransitionRoot } from '@headlessui/vue'
-
-const { isSearchModalOpen } = useDocs()
-const colorMode = useColorMode()
-
-const isDialogOpen = ref(false)
-
-const isDark = computed({
-  get () {
-    return colorMode.value === 'dark'
-  },
-  set () {
-    colorMode.preference = colorMode.value === 'dark' ? 'light' : 'dark'
-  }
-})
-
-function openDocsSearch () {
-  isDialogOpen.value = false
-
-  setTimeout(() => {
-    isSearchModalOpen.value = true
-  }, 100)
-}
-</script>

docs/components/ThemeSelect.vue

@@ -1,128 +0,0 @@
-<template>
-  <ClientOnly>
-    <div class="inline-flex shadow-sm rounded-md">
-      <USelectMenu
-        v-model="primary"
-        name="primary"
-        class="!rounded-r-none !shadow-none focus:z-[1]"
-        color="gray"
-        :ui="{ width: 'w-[194px]' }"
-        :popper="{ placement: 'bottom-start' }"
-        :options="primaryOptions"
-      >
-        <template #label>
-          <span class="flex-shrink-0 h-3 w-3 rounded-full" :style="{ backgroundColor: `${primary.hex}`}" />
-
-          {{ primary.text }}
-        </template>
-
-        <template #option="{ option }">
-          <span class="flex-shrink-0 h-3 w-3 rounded-full" :style="{ backgroundColor: `${option.hex}`}" />
-
-          {{ option.text }}
-        </template>
-      </USelectMenu>
-
-      <USelectMenu
-        v-model="gray"
-        name="gray"
-        class="!rounded-l-none !shadow-none"
-        color="gray"
-        :ui="{ width: 'w-[194px]', wrapper: '-ml-px' }"
-        :popper="{ placement: 'bottom-end' }"
-        :options="grayOptions"
-      >
-        <template #label>
-          <span class="flex-shrink-0 h-3 w-3 rounded-full" :style="{ backgroundColor: `${gray.hex}`}" />
-
-          {{ gray.text }}
-        </template>
-
-        <template #option="{ option }">
-          <span class="flex-shrink-0 h-3 w-3 rounded-full" :style="{ backgroundColor: `${option.hex}`}" />
-
-          {{ option.text }}
-        </template>
-      </USelectMenu>
-    </div>
-  </ClientOnly>
-</template>
-
-<script setup lang="ts">
-import colors from '#tailwind-config/theme/colors'
-
-const appConfig = useAppConfig()
-const colorMode = useColorMode()
-
-const primaryCookie = useCookie('primary', { path: '/', default: () => appConfig.ui.primary })
-const grayCookie = useCookie('gray', { path: '/', default: () => appConfig.ui.gray })
-
-watch(primaryCookie, (primary) => {
-  appConfig.ui.primary = primary
-}, { immediate: true })
-
-watch(grayCookie, (gray) => {
-  appConfig.ui.gray = gray
-}, { immediate: true })
-
-// Computed
-
-const primaryOptions = computed(() => useWithout(appConfig.ui.colors, 'primary').map(color => ({ value: color, text: color, hex: colors[color][colorMode.value === 'dark' ? 400 : 500] })))
-const primary = computed({
-  get () {
-    return primaryOptions.value.find(option => option.value === primaryCookie.value) || primaryOptions.value.find(option => option.value === 'green')
-  },
-  set (option) {
-    primaryCookie.value = option.value
-  }
-})
-
-const grayOptions = computed(() => ['slate', 'cool', 'zinc', 'neutral', 'stone'].map(color => ({ value: color, text: color, hex: colors[color][colorMode.value === 'dark' ? 400 : 500] })))
-const gray = computed({
-  get () {
-    return grayOptions.value.find(option => option.value === grayCookie.value) || grayOptions.value.find(option => option.value === 'cool')
-  },
-  set (option) {
-    grayCookie.value = option.value
-  }
-})
-
-// Hack for SSG
-const hexToRgb = (hex) => {
-  // Expand shorthand form (e.g. "03F") to full form (e.g. "0033FF")
-  const shorthandRegex = /^#?([a-f\d])([a-f\d])([a-f\d])$/i
-  hex = hex.replace(shorthandRegex, function (_, r, g, b) {
-    return r + r + g + g + b + b
-  })
-
-  const result = /^#?([a-f\d]{2})([a-f\d]{2})([a-f\d]{2})$/i.exec(hex)
-  return result
-    ? `${parseInt(result[1], 16)} ${parseInt(result[2], 16)} ${parseInt(result[3], 16)}`
-    : null
-}
-const root = computed(() => {
-    return `:root {
-${Object.entries(colors[primary.value.value] || colors.green).map(([key, value]) => `--color-primary-${key}: ${hexToRgb(value)};`).join('\n')}
-${Object.entries(colors[gray.value.value] || colors.cool).map(([key, value]) => `--color-gray-${key}: ${hexToRgb(value)};`).join('\n')}
-}`
-  })
-if (process.client) {
-  watch(root, () => {
-    window.localStorage.setItem('nuxt-ui-root', root.value)
-  }, { immediate: true })
-}
-if (process.server) {
-  useHead({
-    script: [
-      {
-        innerHTML: `
-            if (localStorage.getItem('nuxt-ui-root')) {
-              document.querySelector('style#nuxt-ui-colors').innerHTML = localStorage.getItem('nuxt-ui-root')
-            }`.replace(/\s+/g, ' '),
-        type: 'text/javascript',
-        tagPriority: -1
-      }
-    ]
-  })
-}
-</script>

docs/components/color-picker/ColorPicker.vue

@@ -0,0 +1,56 @@
+<template>
+  <UPopover>
+    <template #default="{ open }">
+      <UButton color="gray" variant="ghost" square :class="[open && 'bg-gray-50 dark:bg-gray-800']">
+        <UIcon name="i-heroicons-swatch-20-solid" class="w-5 h-5 text-primary-500 dark:text-primary-400" />
+      </UButton>
+    </template>
+
+    <template #panel>
+      <div class="p-2">
+        <div class="grid grid-cols-5 gap-px">
+          <ColorPickerPill v-for="color in primaryColors" :key="color.value" :color="color" :selected="primary" @select="primary = color" />
+        </div>
+
+        <hr class="border-gray-200 dark:border-gray-800 my-2">
+
+        <div class="grid grid-cols-5 gap-px">
+          <ColorPickerPill v-for="color in grayColors" :key="color.value" :color="color" :selected="gray" @select="gray = color" />
+        </div>
+      </div>
+    </template>
+  </UPopover>
+</template>
+
+<script setup lang="ts">
+import colors from '#tailwind-config/theme/colors'
+
+const appConfig = useAppConfig()
+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 primary = computed({
+  get () {
+    return primaryColors.value.find(option => option.value === appConfig.ui.primary)
+  },
+  set (option) {
+    appConfig.ui.primary = option.value
+
+    window.localStorage.setItem('nuxt-ui-primary', appConfig.ui.primary)
+  }
+})
+
+const grayColors = computed(() => ['slate', 'cool', 'zinc', 'neutral', 'stone'].map(color => ({ value: color, text: color, hex: colors[color][colorMode.value === 'dark' ? 400 : 500] })))
+const gray = computed({
+  get () {
+    return grayColors.value.find(option => option.value === appConfig.ui.gray)
+  },
+  set (option) {
+    appConfig.ui.gray = option.value
+
+    window.localStorage.setItem('nuxt-ui-gray', appConfig.ui.gray)
+  }
+})
+</script>

docs/components/color-picker/ColorPickerPill.vue

@@ -0,0 +1,25 @@
+<template>
+  <UTooltip :text="color.value" class="capitalize" :open-delay="500">
+    <UButton
+      color="gray"
+      square
+      :ui="{
+        color: {
+          gray: {
+            solid: 'bg-gray-100 dark:bg-gray-800',
+            ghost: 'hover:bg-gray-50 dark:hover:bg-gray-800/50'
+          }
+        }
+      }"
+      :variant="color.value === selected.value ? 'solid' : 'ghost'"
+      @click.stop.prevent="$emit('select')"
+    >
+      <span class="inline-block w-3 h-3 rounded-full" :style="{ backgroundColor: color.hex }" />
+    </UButton>
+  </UTooltip>
+</template>
+
+<script setup lang="ts">
+defineProps<{ color: { value: string, hex: string }, selected: { value: string} }>()
+defineEmits(['select'])
+</script>

docs/components/content/Alert.vue

@@ -1,33 +0,0 @@
-<template>
-  <component
-    :is="to ? NuxtLink : 'div'"
-    :to="to"
-    class="block pl-4 pr-6 py-3 rounded-md !border !border-gray-200 dark:!border-gray-700 bg-gray-50 dark:bg-gray-800 text-gray-700 dark:text-gray-300 text-sm leading-6 my-5 last:mb-0 font-normal group relative prose-code:bg-white dark:prose-code:bg-gray-900"
-    :class="[to ? 'hover:!border-primary-500 dark:hover:!border-primary-400 hover:text-primary-500 dark:hover:text-primary-400 border-dashed hover:text-gray-800 dark:hover:text-gray-200' : '']"
-  >
-    <UIcon v-if="!!to" name="i-heroicons-link-20-solid" class="w-3 h-3 absolute right-2 top-2 text-gray-400 dark:text-gray-500 group-hover:text-primary-500 dark:group-hover:text-primary-400" />
-
-    <UIcon v-if="icon" :name="icon" class="w-4 h-4 mr-2 inline-flex items-center align-text-top" :class="color" />
-
-    <ContentSlot :use="$slots.default" unwrap="p" />
-  </component>
-</template>
-
-<script setup lang="ts">
-const NuxtLink = resolveComponent('NuxtLink')
-
-defineProps({
-  icon: {
-    type: String,
-    default: null
-  },
-  color: {
-    type: String,
-    default: 'text-primary-500 dark:text-primary-400'
-  },
-  to: {
-    type: String,
-    default: null
-  }
-})
-</script>

docs/components/content/BadgeShortcut.vue

@@ -1,18 +0,0 @@
-<template>
-  <UKbd class="!my-0 align-text-top">
-    {{ shortcut }}
-  </UKbd>
-</template>
-
-<script setup lang="ts">
-const props = defineProps({
-  value: {
-    type: String,
-    required: true
-  }
-})
-
-const { metaSymbol } = useShortcuts()
-
-const shortcut = computed(() => props.value === 'meta' ? metaSymbol.value : props.value)
-</script>

docs/components/content/CodeGroup.vue

@@ -1,53 +0,0 @@
-<template>
-  <div :selected-index="selectedIndex" @change="changeTab">
-    <div class="flex border border-gray-200 dark:border-gray-700 border-b-0 rounded-t-md overflow-hidden -mb-px">
-      <div
-        v-for="(tab, index) in tabs"
-        :key="index"
-        as="template"
-        @click="selectedIndex = index"
-      >
-        <button
-          class="px-4 py-2 focus:outline-none text-sm border-r border-r-gray-200 dark:border-r-gray-700 transition-colors"
-          tabindex="-1"
-          :class="[selectedIndex === index ? 'font-medium text-primary-500 dark:text-primary-400 bg-gray-50 dark:bg-gray-800' : 'hover:bg-gray-50 dark:hover:bg-gray-800']"
-        >
-          {{ tab.label }}
-        </button>
-      </div>
-    </div>
-
-    <div class="[&>div>pre]:!rounded-t-none">
-      <component :is="selectedTab.component" />
-    </div>
-  </div>
-</template>
-
-<script setup lang="ts">
-const slots = useSlots()
-
-const selectedIndex = ref(0)
-
-// Computed
-
-const tabs = computed(() => slots.default?.().map((slot, index) => {
-  return {
-    label: slot.props?.filename || slot.props?.label || `${index}`,
-    component: slot
-  }
-}) || [])
-
-const selectedTab = computed(() => tabs.value.find((_, index) => index === selectedIndex.value))
-
-// Methods
-
-function changeTab (index) {
-  selectedIndex.value = index
-}
-</script>
-
-<script lang="ts">
-export default {
-  inheritAttrs: false
-}
-</script>

docs/components/content/ColorModeButton.vue

@@ -0,0 +1,28 @@
+<template>
+  <ClientOnly>
+    <UButton
+      :icon="isDark ? 'i-heroicons-moon-20-solid' : 'i-heroicons-sun-20-solid'"
+      color="gray"
+      variant="ghost"
+      aria-label="Theme"
+      @click="isDark = !isDark"
+    />
+
+    <template #fallback>
+      <div class="w-8 h-8" />
+    </template>
+  </ClientOnly>
+</template>
+
+<script setup lang="ts">
+const colorMode = useColorMode()
+
+const isDark = computed({
+  get () {
+    return colorMode.value === 'dark'
+  },
+  set () {
+    colorMode.preference = colorMode.value === 'dark' ? 'light' : 'dark'
+  }
+})
+</script>

docs/components/content/ComponentCard.vue

@@ -7,7 +7,7 @@
           v-if="prop.type === 'boolean'"
           v-model="componentProps[prop.name]"
           :name="`prop-${prop.name}`"
-          variant="none"
+          tabindex="-1"
           :ui="{ wrapper: 'relative flex items-start justify-center' }"
         />
         <USelectMenu
@@ -18,6 +18,7 @@
           variant="none"
           :ui="{ width: 'w-32 !-mt-px', rounded: 'rounded-b-md', wrapper: 'relative inline-flex' }"
           class="!py-0"
+          tabindex="-1"
           :popper="{ strategy: 'fixed', placement: 'bottom-start' }"
         />
         <UInput
@@ -28,6 +29,7 @@
           variant="none"
           autocomplete="off"
           class="!py-0"
+          tabindex="-1"
           @update:model-value="val => componentProps[prop.name] = prop.type === 'number' ? Number(val) : val"
         />
       </div>
@@ -45,7 +47,7 @@
       </component>
     </div>
 
-    <ContentRenderer :value="ast" class="[&>div>pre]:!rounded-t-none" />
+    <ContentRenderer v-if="!previewOnly" :value="ast" class="[&>div>pre]:!rounded-t-none" />
   </div>
 </template>
 
@@ -98,6 +100,10 @@ const props = defineProps({
   overflowClass: {
     type: String,
     default: ''
+  },
+  previewOnly: {
+    type: Boolean,
+    default: false
   }
 })
 

docs/components/content/examples/AccordionExampleBasic.vue

@@ -0,0 +1,33 @@
+<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.'
+}, {
+  label: 'Theming',
+  icon: 'i-heroicons-eye-dropper',
+  content: 'Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed neque elit, tristique placerat feugiat ac, facilisis vitae arcu. Proin eget egestas augue. Praesent ut sem nec arcu pellentesque aliquet. Duis dapibus diam vel metus tempus vulputate.'
+}, {
+  label: 'Layouts',
+  icon: 'i-heroicons-rectangle-group',
+  content: 'Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed neque elit, tristique placerat feugiat ac, facilisis vitae arcu. Proin eget egestas augue. Praesent ut sem nec arcu pellentesque aliquet. Duis dapibus diam vel metus tempus vulputate.'
+}, {
+  label: 'Components',
+  icon: 'i-heroicons-square-3-stack-3d',
+  content: 'Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed neque elit, tristique placerat feugiat ac, facilisis vitae arcu. Proin eget egestas augue. Praesent ut sem nec arcu pellentesque aliquet. Duis dapibus diam vel metus tempus vulputate.'
+}, {
+  label: 'Utilities',
+  icon: 'i-heroicons-wrench-screwdriver',
+  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>

docs/components/content/examples/AccordionExampleDefaultSlot.vue

@@ -0,0 +1,52 @@
+<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',
+  content: 'Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed neque elit, tristique placerat feugiat ac, facilisis vitae arcu. Proin eget egestas augue. Praesent ut sem nec arcu pellentesque aliquet. Duis dapibus diam vel metus tempus vulputate.'
+}, {
+  label: 'Theming',
+  icon: 'i-heroicons-eye-dropper',
+  content: 'Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed neque elit, tristique placerat feugiat ac, facilisis vitae arcu. Proin eget egestas augue. Praesent ut sem nec arcu pellentesque aliquet. Duis dapibus diam vel metus tempus vulputate.'
+}, {
+  label: 'Layouts',
+  icon: 'i-heroicons-rectangle-group',
+  content: 'Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed neque elit, tristique placerat feugiat ac, facilisis vitae arcu. Proin eget egestas augue. Praesent ut sem nec arcu pellentesque aliquet. Duis dapibus diam vel metus tempus vulputate.'
+}, {
+  label: 'Components',
+  icon: 'i-heroicons-square-3-stack-3d',
+  content: 'Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed neque elit, tristique placerat feugiat ac, facilisis vitae arcu. Proin eget egestas augue. Praesent ut sem nec arcu pellentesque aliquet. Duis dapibus diam vel metus tempus vulputate.'
+}, {
+  label: 'Utilities',
+  icon: 'i-heroicons-wrench-screwdriver',
+  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" :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>

docs/components/content/examples/AccordionExampleItemSlot.vue

@@ -0,0 +1,74 @@
+<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.'
+}, {
+  label: 'Layouts',
+  icon: 'i-heroicons-rectangle-group',
+  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.'
+}, {
+  label: 'Components',
+  icon: 'i-heroicons-square-3-stack-3d',
+  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.'
+}, {
+  label: 'Utilities',
+  icon: 'i-heroicons-wrench-screwdriver',
+  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="flex flex-col justify-center items-center gap-1">
+        <NuxtLink to="/getting-started" class="flex items-end gap-1.5 font-bold text-xl text-gray-900 dark:text-white">
+          <Logo class="w-8 h-8 text-primary-500 dark:text-primary-400" />
+
+          <span class="hidden sm:block">NuxtLabs</span><span class="sm:text-primary-500 dark:sm:text-primary-400">UI</span>
+        </NuxtLink>
+
+        <p class="text-sm text-gray-500 dark:text-gray-400">
+          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>@nuxthq/ui</code> dependency to your project:
+        </p>
+        <p>
+          {{ description }}
+        </p>
+      </div>
+
+      <div class="flex flex-col items-center">
+        <code>$ npm install @nuxtlabs/ui</code>
+        <code>$ nnpm install -D @nuxthq/ui</code>
+        <code>$ pnpm i -D @nuxthq/ui</code>
+      </div>
+    </template>
+  </UAccordion>
+</template>

docs/components/content/examples/CheckboxExample.vue

@@ -1,5 +1,5 @@
 <script setup>
-const selected = ref(false)
+const selected = ref(true)
 </script>
 
 <template>

docs/components/content/examples/CommandPaletteExampleAsync.vue

@@ -8,7 +8,7 @@ const groups = computed(() => {
         return []
       }
 
-      const users = await $fetch(`https://jsonplaceholder.typicode.com/users`, { params: { q } })
+      const users = await $fetch('https://jsonplaceholder.typicode.com/users', { params: { q } })
 
       return users.map(user => ({ id: user.id, label: user.name, suffix: user.email }))
     }

docs/components/content/examples/DatePickerExample.vue

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

docs/components/content/examples/DropdownExampleSlot.vue

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

docs/components/content/examples/ModalExampleDisableOverlay.vue

@@ -0,0 +1,15 @@
+<script setup>
+const isOpen = ref(false)
+</script>
+
+<template>
+  <div>
+    <UButton label="Open" @click="isOpen = true" />
+
+    <UModal v-model="isOpen" :overlay="false">
+      <div class="p-4">
+        <Placeholder class="h-48" />
+      </div>
+    </UModal>
+  </div>
+</template>

docs/components/content/examples/ModalExampleDisableTransition.vue

@@ -0,0 +1,15 @@
+<script setup>
+const isOpen = ref(false)
+</script>
+
+<template>
+  <div>
+    <UButton label="Open" @click="isOpen = true" />
+
+    <UModal v-model="isOpen" :transition="false">
+      <div class="p-4">
+        <Placeholder class="h-48" />
+      </div>
+    </UModal>
+  </div>
+</template>

docs/components/content/examples/ModalExamplePreventClose.vue

@@ -0,0 +1,24 @@
+<script setup>
+const isOpen = ref(false)
+</script>
+
+<template>
+  <div>
+    <UButton label="Open" @click="isOpen = true" />
+
+    <UModal v-model="isOpen" prevent-close>
+      <UCard :ui="{ ring: '', divide: 'divide-y divide-gray-100 dark:divide-gray-800' }">
+        <template #header>
+          <div class="flex items-center justify-between">
+            <h3 class="text-base font-semibold leading-6 text-gray-900 dark:text-white">
+              Modal
+            </h3>
+            <UButton color="gray" variant="ghost" icon="i-heroicons-x-mark-20-solid" class="-my-1" @click="isOpen = false" />
+          </div>
+        </template>
+
+        <Placeholder class="h-32" />
+      </UCard>
+    </UModal>
+  </div>
+</template>

docs/components/content/examples/PaginationExamplePrevNextSlots.vue

@@ -4,16 +4,16 @@ const items = ref(Array(55))
 </script>
 
 <template>
-  <UPagination v-model="page" :total="items.length" :ui="{ rounded: 'first-of-type:rounded-l-md last-of-type:rounded-r-md' }">
+  <UPagination v-model="page" :total="items.length" :ui="{ rounded: 'first-of-type:rounded-s-md last-of-type:rounded-e-md' }">
     <template #prev="{ onClick }">
       <UTooltip text="Previous page">
-        <UButton icon="i-heroicons-arrow-small-left-20-solid" color="primary" :ui="{ rounded: 'rounded-full' }" class="mr-2" @click="onClick" />
+        <UButton icon="i-heroicons-arrow-small-left-20-solid" color="primary" :ui="{ rounded: 'rounded-full' }" class="rtl:[&_span:first-child]:rotate-180 me-2" @click="onClick" />
       </UTooltip>
     </template>
 
     <template #next="{ onClick }">
       <UTooltip text="Next page">
-        <UButton icon="i-heroicons-arrow-small-right-20-solid" color="primary" :ui="{ rounded: 'rounded-full' }" class="ml-2" @click="onClick" />
+        <UButton icon="i-heroicons-arrow-small-right-20-solid" color="primary" :ui="{ rounded: 'rounded-full' }" class="rtl:[&_span:last-child]:rotate-180 ms-2" @click="onClick" />
       </UTooltip>
     </template>
   </UPagination>

docs/components/content/examples/PaginationExampleRTL.vue

@@ -0,0 +1,68 @@
+<script setup>
+const page = ref(1)
+const items = ref(Array(55))
+</script>
+
+<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 dir="ltr">
+        <UInput
+          icon="i-heroicons-magnifying-glass-20-solid"
+          size="sm"
+          color="white"
+          placeholder="Search..."
+          :trailing="false"
+        />
+      </div>
+
+      <div dir="rtl">
+        <UInput
+          icon="i-heroicons-magnifying-glass-20-solid"
+          size="sm"
+          color="white"
+          placeholder="ابحث..."
+          :trailing="false"
+        />
+      </div>
+    </div>
+
+    <div class="flex justify-between w-full pt-4">
+      <div dir="ltr">
+        <UPagination
+          v-model="page"
+          :total="items.length"
+          :prev-button="{
+            icon: 'i-heroicons-arrow-small-left-20-solid',
+            label: 'Prev',
+            color: 'gray'
+          }"
+          :next-button="{
+            icon: 'i-heroicons-arrow-small-right-20-solid',
+            trailing: true,
+            label: 'Next',
+            color: 'gray'
+          }"
+        />
+      </div>
+
+      <div dir="rtl">
+        <UPagination
+          v-model="page"
+          :total="items.length"
+          :prev-button="{
+            icon: 'i-heroicons-arrow-small-left-20-solid',
+            label: 'السابق',
+            color: 'gray'
+          }"
+          :next-button="{
+            icon: 'i-heroicons-arrow-small-right-20-solid',
+            trailing: true,
+            label: 'التالي',
+            color: 'gray'
+          }"
+        />
+      </div>
+    </div>
+  </div>
+</template>

docs/components/content/examples/RangeExample.vue

@@ -0,0 +1,7 @@
+<script setup>
+const value = ref(50)
+</script>
+
+<template>
+  <URange v-model="value" />
+</template>

docs/components/content/examples/SelectExampleObjects.vue

@@ -4,7 +4,8 @@ const countries = [{
   value: 'US'
 }, {
   name: 'Canada',
-  value: 'CA'
+  value: 'CA',
+  disabled: true
 }, {
   name: 'Mexico',
   value: 'MX'

docs/components/content/examples/SelectMenuExampleAsyncSearch.vue

@@ -0,0 +1,19 @@
+<script setup>
+const search = async (q) => {
+  const users = await $fetch('https://jsonplaceholder.typicode.com/users', { params: { q } })
+
+  return users.map(user => ({ id: user.id, label: user.name, suffix: user.email })).filter(Boolean)
+}
+
+const selected = ref([])
+</script>
+
+<template>
+  <USelectMenu
+    v-model="selected"
+    :searchable="search"
+    placeholder="Search for a user..."
+    multiple
+    by="id"
+  />
+</template>

docs/components/content/examples/SlideoverExample.vue

@@ -1,30 +0,0 @@
-<script setup>
-const isOpen = ref(false)
-</script>
-
-<template>
-  <div>
-    <UButton label="Open" @click="isOpen = true" />
-
-    <USlideover v-model="isOpen">
-      <div class="p-4 sm:p-6 flex flex-col flex-1 gap-4 sm:gap-6">
-        <div class="flex items-center justify-between">
-          <h2 class="font-semibold text-gray-900 dark:text-white">
-            Title
-          </h2>
-
-          <UButton
-            icon="i-heroicons-x-mark-20-solid"
-            color="gray"
-            variant="link"
-            size="md"
-            :padded="false"
-            @click="isOpen = false"
-          />
-        </div>
-
-        <Placeholder class="flex-1 w-full" />
-      </div>
-    </USlideover>
-  </div>
-</template>

docs/components/content/examples/SlideoverExampleBasic.vue

@@ -0,0 +1,15 @@
+<script setup>
+const isOpen = ref(false)
+</script>
+
+<template>
+  <div>
+    <UButton label="Open" @click="isOpen = true" />
+
+    <USlideover v-model="isOpen">
+      <div class="p-4 flex-1">
+        <Placeholder class="h-full" />
+      </div>
+    </USlideover>
+  </div>
+</template>

docs/components/content/examples/SlideoverExampleCard.vue

@@ -0,0 +1,23 @@
+<script setup>
+const isOpen = ref(false)
+</script>
+
+<template>
+  <div>
+    <UButton label="Open" @click="isOpen = true" />
+
+    <USlideover v-model="isOpen">
+      <UCard class="flex flex-col flex-1" :ui="{ body: { base: 'flex-1' }, ring: '', divide: 'divide-y divide-gray-100 dark:divide-gray-800' }">
+        <template #header>
+          <Placeholder class="h-8" />
+        </template>
+
+        <Placeholder class="h-full" />
+
+        <template #footer>
+          <Placeholder class="h-8" />
+        </template>
+      </UCard>
+    </USlideover>
+  </div>
+</template>

docs/components/content/examples/SlideoverExampleDisableOverlay.vue

@@ -0,0 +1,15 @@
+<script setup>
+const isOpen = ref(false)
+</script>
+
+<template>
+  <div>
+    <UButton label="Open" @click="isOpen = true" />
+
+    <USlideover v-model="isOpen" :overlay="false">
+      <div class="p-4 flex-1">
+        <Placeholder class="h-full" />
+      </div>
+    </USlideover>
+  </div>
+</template>

docs/components/content/examples/SlideoverExampleDisableTransition.vue

@@ -0,0 +1,15 @@
+<script setup>
+const isOpen = ref(false)
+</script>
+
+<template>
+  <div>
+    <UButton label="Open" @click="isOpen = true" />
+
+    <USlideover v-model="isOpen" :transition="false">
+      <div class="p-4 flex-1">
+        <Placeholder class="h-full" />
+      </div>
+    </USlideover>
+  </div>
+</template>

docs/components/content/examples/SlideoverExamplePreventClose.vue

@@ -0,0 +1,24 @@
+<script setup>
+const isOpen = ref(false)
+</script>
+
+<template>
+  <div>
+    <UButton label="Open" @click="isOpen = true" />
+
+    <USlideover v-model="isOpen" prevent-close>
+      <UCard class="flex flex-col flex-1" :ui="{ body: { base: 'flex-1' }, ring: '', divide: 'divide-y divide-gray-100 dark:divide-gray-800' }">
+        <template #header>
+          <div class="flex items-center justify-between">
+            <h3 class="text-base font-semibold leading-6 text-gray-900 dark:text-white">
+              Slideover
+            </h3>
+            <UButton color="gray" variant="ghost" icon="i-heroicons-x-mark-20-solid" class="-my-1" @click="isOpen = false" />
+          </div>
+        </template>
+
+        <Placeholder class="h-full" />
+      </UCard>
+    </USlideover>
+  </div>
+</template>

docs/components/content/examples/TableExampleClickable.vue

@@ -0,0 +1,54 @@
+<script setup>
+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'
+}]
+
+function select (row) {
+  const index = selected.value.findIndex((item) => item.id === row.id)
+  if (index === -1) {
+    selected.value.push(row)
+  } else {
+    selected.value.splice(index, 1)
+  }
+}
+
+const selected = ref([people[1]])
+</script>
+
+<template>
+  <UTable v-model="selected" :rows="people" @select="select" />
+</template>

docs/components/content/prose/ProseCode.vue

@@ -1,71 +0,0 @@
-<script lang="ts">
-import { defineComponent } from '#imports'
-
-export default defineComponent({
-  props: {
-    code: {
-      type: String,
-      default: ''
-    },
-    language: {
-      type: String,
-      default: null
-    },
-    filename: {
-      type: String,
-      default: null
-    },
-    highlights: {
-      type: Array as () => number[],
-      default: () => []
-    },
-    meta: {
-      type: String,
-      default: null
-    }
-  },
-  setup (props) {
-    const clipboard = useCopyToClipboard({ timeout: 2000 })
-    const icon = ref('i-heroicons-clipboard-document')
-
-    function copy () {
-      clipboard.copy(props.code, { title: 'Copied to clipboard!' })
-
-      icon.value = 'i-heroicons-clipboard-document-check'
-
-      setTimeout(() => {
-        icon.value = 'i-heroicons-clipboard-document'
-      }, 2000)
-    }
-
-    return {
-      icon,
-      copy
-    }
-  }
-})
-</script>
-
-<template>
-  <div class="group relative" :class="`language-${language}`">
-    <UButton
-      :icon="icon"
-      variant="solid"
-      class="absolute right-3 top-3 opacity-0 group-hover:opacity-100 transition-opacity z-[1]"
-      size="xs"
-      tabindex="-1"
-      @click="copy"
-    />
-
-    <span v-if="filename" class="text-gray-400 dark:text-gray-500 absolute right-3 bottom-3 text-sm group-hover:opacity-0 transition-opacity">{{ filename }}</span>
-
-    <slot />
-  </div>
-</template>
-
-<style>
-pre code .line {
-  display: block;
-  min-height: 1rem;
-}
-</style>

docs/components/content/prose/ProseH2.vue

@@ -1,15 +0,0 @@
-<script setup lang="ts">
-defineProps<{ id: string }>()
-</script>
-
-<template>
-  <h2 :id="id" class="scroll-mt-[161px] lg:scroll-mt-[112px]">
-    <NuxtLink :href="`#${id}`" class="group">
-      <div class="-ml-6 pr-2 py-2 inline-flex opacity-0 group-hover:opacity-100 transition-opacity absolute">
-        <UIcon name="i-heroicons-hashtag-20-solid" class="w-4 h-4 text-primary-500 dark:text-primary-400" />
-      </div>
-
-      <slot />
-    </NuxtLink>
-  </h2>
-</template>

docs/components/content/prose/ProseH3.vue

@@ -1,15 +0,0 @@
-<script setup lang="ts">
-defineProps<{ id: string }>()
-</script>
-
-<template>
-  <h3 :id="id" class="scroll-mt-[145px] lg:scroll-mt-[96px]">
-    <NuxtLink :href="`#${id}`" class="group">
-      <div class="-ml-6 pr-2 py-2 inline-flex opacity-0 group-hover:opacity-100 transition-opacity absolute">
-        <UIcon name="i-heroicons-hashtag-20-solid" class="w-4 h-4 text-primary-500 dark:text-primary-400" />
-      </div>
-
-      <slot />
-    </NuxtLink>
-  </h3>
-</template>

docs/components/content/themes/CommandPaletteThemeAlgolia.vue

@@ -1,7 +1,7 @@
 <script setup>
 const commandPaletteRef = ref()
 
-const { navigation } = useContent()
+const navigation = inject('navigation')
 
 const { data: files } = await useLazyAsyncData('search', () => queryContent().where({ _type: 'markdown' }).find(), { default: () => [] })
 

docs/components/content/themes/CommandPaletteThemeRaycast.vue

@@ -31,7 +31,7 @@ const ui = {
   wrapper: 'flex flex-col flex-1 min-h-0 divide-y divide-gray-200 dark:divide-gray-700 bg-gray-50 dark:bg-gray-800',
   container: 'relative flex-1 overflow-y-auto divide-y divide-gray-200 dark:divide-gray-700 scroll-py-2',
   input: {
-    base: 'w-full h-14 px-4 placeholder-gray-400 dark:placeholder-gray-500 bg-transparent border-0 text-gray-900 dark:text-white focus:ring-0'
+    base: 'w-full h-14 px-4 placeholder-gray-400 dark:placeholder-gray-500 bg-transparent border-0 text-gray-900 dark:text-white focus:ring-0 focus:outline-none'
   },
   group: {
     label: 'px-2 my-2 text-xs font-semibold text-gray-500 dark:text-gray-400',

docs/components/content/themes/VerticalNavigationThemeTailwind.vue

@@ -1,13 +1,22 @@
 <script setup>
 const links = [{
+  label: 'Introduction',
+  to: '/getting-started'
+}, {
   label: 'Installation',
   to: '/getting-started/installation'
 }, {
-  label: 'Vertical Navigation',
-  to: '/navigation/vertical-navigation'
+  label: 'Theming',
+  to: '/getting-started/theming'
 }, {
-  label: 'Command Palette',
-  to: '/navigation/command-palette'
+  label: 'Shortcuts',
+  to: '/getting-started/shortcuts'
+}, {
+  label: 'Examples',
+  to: '/getting-started/examples'
+}, {
+  label: 'Roadmap',
+  to: '/getting-started/roadmap'
 }]
 </script>
 
@@ -15,9 +24,9 @@ const links = [{
   <UVerticalNavigation
     :links="links"
     :ui="{
-      wrapper: 'border-l border-gray-200 dark:border-gray-800 space-y-2',
-      base: 'group block border-l -ml-px lg:leading-6',
-      padding: 'pl-4',
+      wrapper: 'border-s border-gray-200 dark:border-gray-800 space-y-2',
+      base: 'group block border-s -ms-px lg:leading-6',
+      padding: 'ps-4',
       rounded: '',
       font: '',
       ring: '',

docs/components/date-picker/DatePicker.vue

@@ -0,0 +1,76 @@
+<script setup lang="ts">
+import { DatePicker as VCalendarDatePicker } from 'v-calendar'
+import 'v-calendar/dist/style.css'
+
+const props = defineProps({
+  modelValue: {
+    type: Date,
+    default: null
+  }
+})
+
+const emit = defineEmits(['update:model-value', 'close'])
+
+const colorMode = useColorMode()
+
+const isDark = computed(() => colorMode.value === 'dark')
+
+const date = computed({
+  get: () => props.modelValue,
+  set: (value) => {
+    emit('update:model-value', value)
+    emit('close')
+  }
+})
+
+const attrs = [{
+  key: 'today',
+  highlight: {
+    color: 'blue',
+    fillMode: 'outline',
+    class: '!bg-gray-100 dark:!bg-gray-800'
+  },
+  dates: new Date()
+}]
+</script>
+
+<template>
+  <VCalendarDatePicker
+    v-model="date"
+    transparent
+    borderless
+    :attributes="attrs"
+    :is-dark="isDark"
+    title-position="left"
+    trim-weeks
+    :first-day-of-week="2"
+  />
+</template>
+
+<style>
+:root {
+  --vc-gray-50: rgb(var(--color-gray-50));
+  --vc-gray-100: rgb(var(--color-gray-100));
+  --vc-gray-200: rgb(var(--color-gray-200));
+  --vc-gray-300: rgb(var(--color-gray-300));
+  --vc-gray-400: rgb(var(--color-gray-400));
+  --vc-gray-500: rgb(var(--color-gray-500));
+  --vc-gray-600: rgb(var(--color-gray-600));
+  --vc-gray-700: rgb(var(--color-gray-700));
+  --vc-gray-800: rgb(var(--color-gray-800));
+  --vc-gray-900: rgb(var(--color-gray-900));
+}
+
+.vc-blue {
+  --vc-accent-50: rgb(var(--color-primary-50));
+  --vc-accent-100: rgb(var(--color-primary-100));
+  --vc-accent-200: rgb(var(--color-primary-200));
+  --vc-accent-300: rgb(var(--color-primary-300));
+  --vc-accent-400: rgb(var(--color-primary-400));
+  --vc-accent-500: rgb(var(--color-primary-500));
+  --vc-accent-600: rgb(var(--color-primary-600));
+  --vc-accent-700: rgb(var(--color-primary-700));
+  --vc-accent-800: rgb(var(--color-primary-800));
+  --vc-accent-900: rgb(var(--color-primary-900));
+}
+</style>

docs/components/docs/DocsAside.vue

@@ -1,32 +0,0 @@
-<template>
-  <aside class="hidden pb-8 overflow-y-auto lg:block lg:self-start lg:top-16 lg:max-h-[calc(100vh-64px)] lg:sticky lg:pr-8 lg:pl-[2px]">
-    <div class="relative">
-      <div class="sticky top-0 pointer-events-none z-[1]">
-        <div class="h-8 bg-white dark:bg-gray-900" />
-        <div class="bg-white dark:bg-gray-900 relative pointer-events-auto">
-          <UButton
-            icon="i-heroicons-magnifying-glass-20-solid"
-            class="w-full"
-            color="gray"
-            @click="isSearchModalOpen = true"
-          >
-            Search
-
-            <div class="hidden lg:flex items-center gap-0.5 ml-auto -my-1">
-              <UKbd>{{ metaSymbol }}</UKbd>
-              <UKbd>K</UKbd>
-            </div>
-          </UButton>
-        </div>
-        <div class="h-8 bg-gradient-to-b from-white dark:from-gray-900" />
-      </div>
-
-      <DocsAsideLinks />
-    </div>
-  </aside>
-</template>
-
-<script setup lang="ts">
-const { isSearchModalOpen } = useDocs()
-const { metaSymbol } = useShortcuts()
-</script>

docs/components/docs/DocsAsideLinks.vue

@@ -1,40 +0,0 @@
-<template>
-  <div class="space-y-8">
-    <div v-for="(group, index) in navigation" :key="index" class="space-y-3">
-      <div class="text-sm font-semibold text-gray-900 dark:text-gray-200">
-        <span class="truncate">{{ group.title }}</span>
-      </div>
-
-      <UVerticalNavigation
-        :links="mapContentLinks(group.children)"
-        class="mt-1"
-        :ui="{
-          wrapper: 'border-l border-gray-200 dark:border-gray-800 space-y-2',
-          base: 'group block border-l -ml-px lg:leading-6 flex items-center gap-2',
-          padding: 'pl-4',
-          rounded: '',
-          font: '',
-          ring: '',
-          active: 'text-primary-500 dark:text-primary-400 border-current',
-          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 #badge="{ link }">
-          <UBadge v-if="link.badge" size="xs" :ui="{ rounded: 'rounded-full' }">
-            {{ link.badge }}
-          </UBadge>
-        </template>
-      </UVerticalNavigation>
-    </div>
-  </div>
-</template>
-
-<script setup lang="ts">
-import type { NavItem } from '@nuxt/content/dist/runtime/types'
-
-const { navigation } = useContent() as { navigation: NavItem[] }
-
-function mapContentLinks (links: NavItem[]) {
-  return links?.map(link => ({ label: link.title, icon: link.icon, to: link._path, badge: link.badge })) || []
-}
-</script>

docs/components/docs/DocsFooter.vue

@@ -1,10 +0,0 @@
-<template>
-  <footer class="flex items-center justify-end gap-1.5">
-    <div class="flex items-baseline gap-1.5 text-sm text-center text-gray-500 dark:text-gray-400">
-      Made by
-      <NuxtLink to="https://nuxtlabs.com" aria-label="NuxtLabs">
-        <LogoLabs class="text-primary-500 w-14 h-auto dark:text-primary-400" />
-      </NuxtLink>
-    </div>
-  </footer>
-</template>

docs/components/docs/DocsPageFooter.vue

@@ -1,17 +0,0 @@
-<template>
-  <div class="flex items-center justify-between gap-1.5">
-    <UButton
-      v-if="page"
-      :to="`https://github.com/nuxtlabs/ui/edit/dev/docs/content/${page._file}`"
-      label="Edit this page on GitHub"
-      color="primary"
-      variant="link"
-      :padded="false"
-      icon="i-heroicons-pencil-square"
-    />
-  </div>
-</template>
-
-<script setup lang="ts">
-const { page } = useContent()
-</script>

docs/components/docs/DocsPageHeader.vue

@@ -1,37 +0,0 @@
-<template>
-  <header v-if="page" class="relative border-b border-gray-200 dark:border-gray-800 pb-8 mb-12">
-    <p class="mb-4 text-sm leading-6 font-semibold text-primary-500 dark:text-primary-400 capitalize">
-      {{ page._dir?.title ? page._dir.title : useLowerCase(page._dir) }}
-    </p>
-    <div class="flex flex-col lg:flex-row lg:items-center lg:justify-between">
-      <h1 class="text-3xl sm:text-4xl font-extrabold text-gray-900 tracking-tight dark:text-white">
-        {{ page.title }}
-      </h1>
-
-      <div v-if="page.headlessui || page.github" class="flex items-center gap-2 mt-4 lg:mt-0">
-        <UButton
-          v-if="page.headlessui"
-          :label="page.headlessui.label"
-          :to="page.headlessui.to"
-          icon="i-simple-icons-headlessui"
-          color="white"
-        />
-
-        <UButton
-          v-if="page.github"
-          label="GitHub"
-          icon="i-simple-icons-github"
-          color="white"
-          :to="`https://github.com/nuxtlabs/ui/blob/dev/src/runtime/components/${page._dir}/${page.title.replace(' ', '')}${page.github.suffix || '.vue'}`"
-        />
-      </div>
-    </div>
-    <p v-if="page.description" class="mt-4 text-lg">
-      {{ page.description }}
-    </p>
-  </header>
-</template>
-
-<script setup lang="ts">
-const { page } = useContent()
-</script>

docs/components/docs/DocsPrevNext.vue

@@ -1,18 +0,0 @@
-<template>
-  <div class="grid gap-6 sm:grid-cols-2">
-    <DocsPrevNextCard v-if="prev" :title="prev.navigation?.title || prev.title" :description="prev.navigation?.description || prev.description" :to="prev._path" icon="i-heroicons-arrow-left-20-solid" />
-    <span v-else class="hidden sm:block">&nbsp;</span>
-    <DocsPrevNextCard
-      v-if="next"
-      :title="next.navigation?.title || next.title"
-      :description="next.navigation?.description || next.description"
-      :to="next._path"
-      icon="i-heroicons-arrow-right-20-solid"
-      class="text-right"
-    />
-  </div>
-</template>
-
-<script setup lang="ts">
-const { prev, next } = useContent()
-</script>

docs/components/docs/DocsPrevNextCard.vue

@@ -1,36 +0,0 @@
-<template>
-  <NuxtLink :to="to" class="block px-5 py-8 border not-prose rounded-lg border-gray-200 dark:border-gray-800 hover:bg-gray-50 dark:hover:bg-gray-800/25 group">
-    <div v-if="icon" class="inline-flex items-center rounded-full p-1.5 bg-gray-50 dark:bg-gray-800 group-hover:bg-primary-50 dark:group-hover:bg-primary-400/10 ring-1 ring-gray-300 dark:ring-gray-700 mb-4 group-hover:ring-primary-500/50 dark:group-hover:ring-primary-400/50">
-      <UIcon :name="icon" class="w-5 h-5 text-gray-900 dark:text-gray-100 group-hover:text-primary-500 dark:group-hover:text-primary-400" />
-    </div>
-
-    <p class="text-gray-900 dark:text-gray-50 font-medium text-[15px] mb-1">
-      {{ title }}
-    </p>
-
-    <p class="text-sm font-normal text-gray-500 dark:text-gray-400">
-      {{ description }}
-    </p>
-  </NuxtLink>
-</template>
-
-<script setup lang="ts">
-defineProps({
-  icon: {
-    type: String,
-    default: null
-  },
-  title: {
-    type: String,
-    default: ''
-  },
-  description: {
-    type: String,
-    default: ''
-  },
-  to: {
-    type: String,
-    required: true
-  }
-})
-</script>

docs/components/docs/DocsSearch.vue

@@ -1,172 +0,0 @@
-<template>
-  <UModal
-    v-model="isSearchModalOpen"
-    :ui="{
-      padding: 'sm:p-4',
-      rounded: 'sm:rounded-lg',
-      width: 'sm:max-w-3xl',
-      height: 'h-screen sm:h-[28rem]'
-    }"
-  >
-    <UCommandPalette
-      ref="commandPaletteRef"
-      :groups="groups"
-      command-attribute="title"
-      :fuse="{
-        fuseOptions: { ignoreLocation: true, includeMatches: true, threshold: 0, keys: ['title', 'description', 'children.children.value', 'children.children.children.value'] },
-        resultLimit: 10
-      }"
-      @update:model-value="onSelect"
-      @close="isSearchModalOpen = false"
-    />
-  </UModal>
-</template>
-
-<script setup lang="ts">
-import type { Command } from '../../../src/runtime/types'
-
-const { navigation } = useContent()
-const router = useRouter()
-const { usingInput } = useShortcuts()
-const { isSearchModalOpen } = useDocs()
-
-const commandPaletteRef = ref<HTMLElement & { query: Ref<string>, results: { item: Command }[] }>()
-
-const { data: files } = await useLazyAsyncData('search', () => queryContent().where({ _type: 'markdown' }).find(), { default: () => [] })
-
-// Computed
-
-const defaultGroups = computed(() => navigation.value.map(item => ({
-  key: item._path,
-  label: item.title,
-  commands: files.value.filter(file => file._path.startsWith(item._path)).map(file => ({
-    id: file._id,
-    title: file.navigation?.title || file.title,
-    to: file._path,
-    suffix: file.description,
-    icon: file.icon
-  }))
-})))
-
-const queryGroups = computed(() => navigation.value.map(item => ({
-  key: item._path,
-  label: item.title,
-  commands: files.value.filter(file => file._path.startsWith(item._path)).flatMap((file) => {
-    return [{
-      id: file._id,
-      title: file.navigation?.title || file.title,
-      to: file._path,
-      description: file.description,
-      icon: file.icon
-    },
-    // @ts-ignore
-    ...Object.entries(groupByHeading(file.body.children)).map(([hash, { title, children }]) => ({
-      id: `${file._path}${hash}`,
-      title,
-      prefix: `${file.navigation?.title || file.title} ->`,
-      prefixClass: 'text-gray-700 dark:text-gray-200',
-      to: `${file._path}${hash}`,
-      children: concatChildren(children),
-      icon: file.icon
-    }))]
-  })
-})))
-
-const groups = computed(() => commandPaletteRef.value?.query ? queryGroups.value : defaultGroups.value)
-
-// avoid conflicts between multiple meta_k shortcuts
-const canToggleModal = computed(() => isSearchModalOpen.value || !usingInput.value)
-
-// Methods
-
-function remapChildren (children: any[]) {
-  return children?.map((grandChild) => {
-    if (['code-inline', 'em', 'a', 'strong'].includes(grandChild.tag)) {
-      return { type: 'text', value: grandChild.children.find(child => child.type === 'text')?.value || '' }
-    }
-
-    return grandChild
-  })
-}
-
-function concatChildren (children: any[]) {
-  return children.map((child) => {
-    if (['alert'].includes(child.tag)) {
-      child.children = concatChildren(child.children)
-    }
-    if (child.tag === 'p') {
-      child.children = remapChildren(child.children)
-
-      child.children = child.children?.reduce((acc, grandChild) => {
-        if (grandChild.type === 'text') {
-          if (acc.length && acc[acc.length - 1].type === 'text') {
-            acc[acc.length - 1].value += grandChild.value
-          } else {
-            acc.push(grandChild)
-          }
-        } else {
-          acc.push(grandChild)
-        }
-        return acc
-      }, [])
-    }
-    if (['style'].includes(child.tag)) {
-      return null
-    }
-
-    return child
-  })
-}
-
-function groupByHeading (children: any[]) {
-  const groups = {} // grouped by path
-  let hash = '' // file.page with potential `#anchor` concat
-  let title: string | null
-  for (const node of children) {
-    // if heading found, udpate current path
-    if (['h2', 'h3'].includes(node.tag)) {
-      // find heading text value
-      title = node.children?.find(child => child.type === 'text')?.value
-      if (title) {
-        hash = `#${node.props.id}`
-      }
-    }
-    // push to existing/new group based on path
-    if (groups[hash]) {
-      groups[hash].children.push(node)
-    } else {
-      groups[hash] = { children: [node], title }
-    }
-  }
-  return groups
-}
-
-function onSelect (option) {
-  isSearchModalOpen.value = false
-
-  if (option.click) {
-    option.click()
-  } else if (option.to) {
-    router.push(option.to)
-  } else if (option.href) {
-    window.open(option.href, '_blank')
-  }
-}
-
-// Shortcuts
-
-defineShortcuts({
-  meta_k: {
-    usingInput: true,
-    whenever: [canToggleModal],
-    handler: () => {
-      isSearchModalOpen.value = !isSearchModalOpen.value
-    }
-  },
-  escape: {
-    usingInput: true,
-    whenever: [isSearchModalOpen],
-    handler: () => { isSearchModalOpen.value = false }
-  }
-})
-</script>

docs/components/docs/DocsToc.vue

@@ -1,19 +0,0 @@
-<template>
-  <div class="sticky top-16 bg-white/75 dark:bg-gray-900/75 backdrop-blur group lg:self-start -mx-4 sm:-mx-6 lg:mx-0 px-4 sm:px-6 lg:pl-8 lg:pr-0">
-    <div class="py-3 lg:py-8 border-b border-dashed border-gray-200 dark:border-gray-800 lg:border-0">
-      <button class="flex items-center gap-2" tabindex="-1" @click="isTocOpen = !isTocOpen">
-        <span class="text-sm text-slate-900 font-semibold text-sm leading-6 dark:text-slate-100 truncate">Table of Contents</span>
-
-        <UIcon name="i-heroicons-chevron-right-20-solid" class="lg:hidden w-4 h-4 transition-transform duration-100 transform text-gray-400 dark:text-gray-500" :class="[isTocOpen ? 'rotate-90' : 'rotate-0']" />
-      </button>
-
-      <DocsTocLinks class="mt-2 lg:mt-4" :links="toc.links" :class="[isTocOpen ? 'lg:block' : 'hidden lg:block']" />
-    </div>
-  </div>
-</template>
-
-<script setup lang="ts">
-const { toc } = useContent()
-
-const isTocOpen = ref(false)
-</script>

docs/components/docs/DocsTocLinks.vue

@@ -1,49 +0,0 @@
-<template>
-  <ul>
-    <li v-for="link in links" :key="link.text" :class="{ 'ml-3': link.depth === 3 }">
-      <a
-        :href="`#${link.id}`"
-        class="block py-1 font-medium text-sm"
-        :class="[activeHeadings.includes(link.id) ? 'text-primary-500 dark:text-primary-400' : 'hover:text-gray-900 dark:text-gray-400 dark:hover:text-gray-300']"
-        @click.prevent="scrollToHeading(link.id)"
-      >
-        {{ link.text }}
-      </a>
-
-      <DocsTocLinks v-if="link.children" :links="link.children" />
-    </li>
-  </ul>
-</template>
-
-<script setup lang="ts">
-import type { TocLink } from '@nuxt/content/dist/runtime/types'
-
-defineProps({
-  links: {
-    type: Array as PropType<TocLink[]>,
-    default: () => []
-  }
-})
-
-const emit = defineEmits(['move'])
-
-const route = useRoute()
-const router = useRouter()
-const { activeHeadings, updateHeadings } = useScrollspy()
-
-watch(() => route.path, () => {
-  setTimeout(() => {
-    if (process.client) {
-      updateHeadings([
-        ...document.querySelectorAll('h2'),
-        ...document.querySelectorAll('h3')
-      ])
-    }
-  }, 300)
-}, { immediate: true })
-
-const scrollToHeading = (id: string) => {
-  router.push(`#${id}`)
-  emit('move', id)
-}
-</script>

docs/composables/useDocs.ts

@@ -1,11 +0,0 @@
-import { createSharedComposable } from '@vueuse/core'
-
-const _useDocs = () => {
-  const isSearchModalOpen = ref(false)
-
-  return {
-    isSearchModalOpen
-  }
-}
-
-export const useDocs = createSharedComposable(_useDocs)

docs/composables/useScrollspy.ts

@@ -1,37 +0,0 @@
-/**
- * Scrollspy allows you to watch visible headings in a specific page.
- * Useful for table of contents live style updates.
- */
-export const useScrollspy = () => {
-  const observer = ref() as Ref<IntersectionObserver>
-  const visibleHeadings = ref([]) as Ref<string[]>
-  const activeHeadings = ref([]) as Ref<string[]>
-
-  const observerCallback = (entries: IntersectionObserverEntry[]) =>
-    entries.forEach((entry) => {
-      const id = entry.target.id
-
-      if (entry.isIntersecting) { visibleHeadings.value.push(id) } else { visibleHeadings.value = visibleHeadings.value.filter(t => t !== id) }
-    })
-
-  const updateHeadings = (headings: Element[]) =>
-    headings.forEach((heading) => {
-      observer.value.observe(heading)
-    })
-
-  watch(visibleHeadings, (val, oldVal) => {
-    if (val.length === 0) { activeHeadings.value = oldVal } else { activeHeadings.value = val }
-  })
-
-  // Create intersection observer
-  onBeforeMount(() => (observer.value = new IntersectionObserver(observerCallback)))
-
-  // Destroy it
-  onBeforeUnmount(() => observer.value?.disconnect())
-
-  return {
-    visibleHeadings,
-    activeHeadings,
-    updateHeadings
-  }
-}

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

@@ -8,7 +8,7 @@ head:
 
 This module has been developed by the [NuxtLabs](https://nuxtlabs.com/) team for [Volta](https://volta.net) and [Nuxt Studio](https://nuxt.studio/), its goal is to provide everything related to UI when building a Nuxt app. This includes components, icons, colors, dark mode but also keyboard shortcuts.
 
-::alert{icon="i-heroicons-light-bulb"}
+::callout{icon="i-heroicons-light-bulb"}
 [Volta](https://volta.net/) entire UI is built with this module alongside the 50+ keyboard shortcuts defined.
 ::
 
@@ -17,6 +17,7 @@ This module has been developed by the [NuxtLabs](https://nuxtlabs.com/) team for
 - Built with [Headless UI](https://headlessui.dev/) and [Tailwind CSS](https://tailwindcss.com/)
 - HMR support through Nuxt App Config
 - Dark mode support
+- Support for LTR and RTL languages
 - Keyboard shortcuts
 - Bundled icons
 - Fully typed
@@ -30,7 +31,3 @@ This module has been developed by the [NuxtLabs](https://nuxtlabs.com/) team for
 - [tailwindlabs/headlessui](https://github.com/tailwindlabs/headlessui)
 - [vueuse/vueuse](https://github.com/vueuse/vueuse)
 - [egoist/tailwindcss-icons](https://github.com/egoist/tailwindcss-icons)
-
-::alert{icon="i-heroicons-exclamation-triangle"}
-This documentation is still a work in progress and will be updated regularly.
-::

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

@@ -2,6 +2,8 @@
 description: 'Learn how to install and configure the module in your Nuxt app.'
 ---
 
+## Quick Start
+
 1. Install `@nuxthq/ui` dependency to your project:
 
 ::code-group
@@ -30,13 +32,69 @@ export default defineNuxtConfig({
 
 That's it! You can now use all the components and composables in your Nuxt app ✨
 
-::alert{icon="i-heroicons-exclamation-triangle"}
+::callout{icon="i-heroicons-exclamation-triangle"}
 As this module installs [@nuxtjs/tailwindcss](https://tailwindcss.nuxtjs.org/) and [@nuxtjs/color-mode](https://color-mode.nuxtjs.org/) for you, you should remove them from your `modules` and `dependencies` if you've previously installed them manually.
 ::
 
-## Playground
+## IntelliSense
 
-:u-button{icon="i-simple-icons-stackblitz" label="Play on StackBlitz" size="lg" to="https://stackblitz.com/edit/nuxtlabs-ui?file=app.config.ts,app.vue" target="_blank"}
+If you're using VSCode, you can install the [Tailwind CSS IntelliSense](https://marketplace.visualstudio.com/items?itemName=bradlc.vscode-tailwindcss) extension to get autocompletion for the classes.
+
+You can read more on how to set it up on the [@nuxtjs/tailwindcss](https://tailwindcss.nuxtjs.org/tailwind/editor-support) module documentation, but to summarize, you'll need to add the following to your `.vscode/settings.json`:
+
+```json [.vscode/settings.json]
+{
+  "files.associations": {
+      "*.css": "tailwindcss"
+  },
+  "editor.quickSuggestions": {
+      "strings": true
+  }
+}
+```
+
+You can write your `tailwind.config` in TypeScript as such:
+
+```ts [tailwind.config.ts]
+import type { Config } from 'tailwindcss'
+
+export default <Partial<Config>> {
+  content: [
+    'docs/content/**/*.md'
+  ]
+}
+```
+
+If you do so, you'll need to add the following to your `.vscode/settings.json`:
+
+```json [.vscode/settings.json]
+{
+  "tailwindCSS.experimental.configFile": "tailwind.config.ts"
+}
+```
+
+Also, the extension won't work when writing classes in your `app.config.ts` by default. You can add the following to your `.vscode/settings.json` to fix this:
+
+```json [.vscode/settings.json]
+{
+  "tailwindCSS.experimental.classRegex": [
+    ["ui:\\s*{([^)]*)\\s*}", "[\"'`]([^\"'`]*).*?[\"'`]"]
+  ]
+}
+```
+
+You can also add the following to your `.vscode/settings.json` to enable IntelliSense when using the `ui` prop:
+
+```json [.vscode/settings.json]
+{
+  "tailwindCSS.classAttributes": [
+    "class",
+    "className",
+    "ngClass",
+    "ui"
+  ]
+}
+```
 
 ## Options
 
@@ -45,7 +103,19 @@ As this module installs [@nuxtjs/tailwindcss](https://tailwindcss.nuxtjs.org/) a
 | `prefix`                 | `u`                    | Define the prefix of the imported components.    |
 | `global`                 | `false`                | Expose components globally.                      |
 | `icons`                  | `['heroicons']`        | Icon collections to load.                        |
-| `safelistColors`         | `['primary']`          | Force safelisting of colors.                     |
+| `safelistColors`         | `['primary']`          | Force safelisting of colors to need be purged.   |
+
+Configure options in your `nuxt.config.ts` as such:
+
+```ts [nuxt.config.ts]
+export default defineNuxtConfig({
+  modules: ['@nuxthq/ui'],
+  ui: {
+    global: true,
+    icons: ['mdi', 'simple-icons']
+  }
+})
+```
 
 ## Edge
 

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

@@ -19,8 +19,8 @@ export default defineAppConfig({
 })
 ```
 
-::alert{icon="i-heroicons-light-bulb"}
-Try to change the `primary` and `gray` colors in the navbar and see the documentation change live.
+::callout{icon="i-heroicons-light-bulb"}
+Try to change the `primary` and `gray` colors by clicking on the :u-icon{name="i-heroicons-swatch-20-solid" class="w-4 h-4 align-middle text-primary-500 dark:text-primary-400"} button in the header.
 ::
 
 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`.
@@ -29,11 +29,11 @@ To provide dynamic colors that can be changed at runtime, this module uses CSS v
 
 Likewise, you can't define a `primary` color in your `tailwind.config.ts` as it would conflict with the `primary` color defined by the module.
 
-::alert{icon="i-heroicons-light-bulb"}
+::callout{icon="i-heroicons-light-bulb"}
 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`.
 ::
 
-Components having a `color` prop like [Avatar](/elements/avatar#chip), [Badge](/elements/badge#style), [Button](/elements/button#style), [Input](/elements/input#style) (inherited in [Select](/forms/select) and [SelectMenu](/forms/select-menu)) and [Notification](/overlays/notification#timeout) will use the `primary` color by default but will handle all the colors defined in your `tailwind.config.ts` or the default Tailwind CSS colors.
+Components having a `color` prop like [Avatar](/elements/avatar#chip), [Badge](/elements/badge#style), [Button](/elements/button#style), [Input](/forms/input#style) (inherited in [Select](/forms/select) and [SelectMenu](/forms/select-menu)), [Radio](/forms/radio), [Checkbox](/forms/checkbox), [Toggle](/forms/toggle), [Range](/forms/range) and [Notification](/overlays/notification#timeout) will use the `primary` color by default but will handle all the colors defined in your `tailwind.config.ts` or the default Tailwind CSS colors.
 
 Variant classes of those components are defined with a syntax like `bg-{color}-500 dark:bg-{color}-400` so they can be used with any color. However, this means that Tailwind will not find those classes and therefore will not generate the corresponding CSS.
 
@@ -73,6 +73,24 @@ All the components are styled with dark mode in mind.
 
 Thanks to [Tailwind CSS dark mode](https://tailwindcss.com/docs/dark-mode#toggling-dark-mode-manually) class strategy and the [@nuxtjs/color-mode](https://github.com/nuxt-modules/color-mode) module, you literally have nothing to do.
 
+::callout{icon="i-heroicons-puzzle-piece"}
+Learn how to build a color mode button in the [Examples](/getting-started/examples#color-mode-button) page.
+::
+
+You can disable dark mode by setting the `preference` to `light` instead of `system` in your `nuxt.config.ts`.
+
+```ts [nuxt.config.ts]
+export default defineNuxtConfig({
+  colorMode: {
+    preference: 'light'
+  }
+})
+```
+
+::callout{icon="i-heroicons-light-bulb"}
+If you're stuck in dark mode even after changing this setting, you might need to remove the `nuxt-color-mode` entry from your browser's local storage.
+::
+
 ## Components
 
 Components are styled with Tailwind CSS but classes are all defined in the default [app.config.ts](https://github.com/nuxtlabs/ui/blob/dev/src/runtime/app.config.ts) file. You can override them in your `app.config.ts`.
@@ -97,7 +115,7 @@ Each component has a `ui` prop that allows you to customize everything specifica
 </template>
 ```
 
-::alert{icon="i-heroicons-light-bulb"}
+::callout{icon="i-heroicons-light-bulb"}
 You can find the default classes for each component under the `Preset` section.
 ::
 
@@ -147,7 +165,7 @@ export default defineNuxtConfig({
 })
 ```
 
-::alert{icon="i-heroicons-light-bulb"}
+::callout{icon="i-heroicons-light-bulb"}
 Search the icon you want to use on https://icones.js.org built by [@antfu](https://github.com/antfu).
 ::
 
@@ -231,10 +249,23 @@ export default defineAppConfig({
         sortButton: {
           icon: 'i-octicon-arrow-switch-24'
         },
+        loadingState: {
+          icon: 'i-octicon-sync-24'
+        },
         emptyState: {
           icon: 'i-octicon-database-24'
         }
       }
+    },
+    pagination: {
+      default: {
+        prevButton: {
+          icon: 'i-octicon-arrow-left-24'
+        },
+        nextButton: {
+          icon: 'i-octicon-arrow-right-24'
+        }
+      }
     }
   }
 })

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

@@ -21,7 +21,7 @@ Shortcuts are displayed and styled through the [Kbd](/elements/kbd) component.
 </template>
 ```
 
-::alert{icon="i-heroicons-light-bulb"}
+::callout{icon="i-heroicons-light-bulb"}
 You will have a preview of how shortcuts are rendered in each component page.
 ::
 
@@ -48,6 +48,21 @@ defineShortcuts({
 </script>
 ```
 
+Shortcuts keys are written as the literal keyboard key value. Combinations are made with `_` separator. Chained shortcuts are made with `-` separator. :u-badge{label="New" class="!rounded-full"}
+
+Modifiers are also available:
+- `meta`: acts as `Command` for MacOS and `Control` for others
+- `ctrl`: acts as `Control`
+- `shift`: acts as `Shift` and is only necessary for alphabetic keys
+
+Examples of keys:
+- `escape`: will trigger by hitting `Esc`
+- `meta_k`: will trigger by hitting `⌘` and `K` at the same time on MacOS, and `Ctrl` and `K` on Windows and Linux
+- `ctrl_k`: will trigger by hitting `Ctrl` and `K` at the same time on MacOS, Windows and Linux
+- `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
+
 ### `usingInput`
 
 Prop: `usingInput?: string | boolean`

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

@@ -0,0 +1,266 @@
+---
+title: Examples
+description: Discover some real-life examples of components you can build.
+---
+
+::callout{icon="i-heroicons-wrench-screwdriver"}
+If you have any ideas of examples you'd like to see, please comment on [this issue](https://github.com/nuxtlabs/ui/issues/297).
+::
+
+## Components
+
+You can mix and match components to build your own UI.
+
+### ColorModeButton
+
+You can easily build a color mode button by using the `useColorMode` composable from `@nuxtjs/color-mode`.
+
+::component-example
+#default
+:color-mode-button
+
+#code
+```vue [components/ColorModeButton.vue]
+<script setup>
+const colorMode = useColorMode()
+
+const isDark = computed({
+  get () {
+    return colorMode.value === 'dark'
+  },
+  set () {
+    colorMode.preference = colorMode.value === 'dark' ? 'light' : 'dark'
+  }
+})
+</script>
+
+<template>
+  <ClientOnly>
+    <UButton
+      :icon="isDark ? 'i-heroicons-moon-20-solid' : 'i-heroicons-sun-20-solid'"
+      color="gray"
+      variant="ghost"
+      aria-label="Theme"
+      @click="isDark = !isDark"
+    />
+
+    <template #fallback>
+      <div class="w-8 h-8" />
+    </template>
+  </ClientOnly>
+</template>
+```
+::
+
+### DatePicker
+
+Here is an example of a date picker component built with [v-calendar](https://github.com/nathanreyes/v-calendar).
+
+```vue [components/DatePicker.vue]
+<script setup lang="ts">
+import { DatePicker as VCalendarDatePicker } from 'v-calendar'
+import 'v-calendar/dist/style.css'
+
+const props = defineProps({
+  modelValue: {
+    type: Date,
+    default: null
+  }
+})
+
+const emit = defineEmits(['update:model-value', 'close'])
+
+const colorMode = useColorMode()
+
+const isDark = computed(() => colorMode.value === 'dark')
+
+const date = computed({
+  get: () => props.modelValue,
+  set: (value) => {
+    emit('update:model-value', value)
+    emit('close')
+  }
+})
+
+const attrs = [{
+  key: 'today',
+  highlight: {
+    color: 'blue',
+    fillMode: 'outline',
+    class: '!bg-gray-100 dark:!bg-gray-800'
+  },
+  dates: new Date()
+}]
+</script>
+
+<template>
+  <VCalendarDatePicker
+    v-model="date"
+    transparent
+    borderless
+    :attributes="attrs"
+    :is-dark="isDark"
+    title-position="left"
+    trim-weeks
+    :first-day-of-week="2"
+  />
+</template>
+```
+
+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>
+```
+::
+
+## Theming
+
+Our theming system provides a lot of flexibility to customize the components.
+
+### CommandPalette
+
+Here is some examples of what you can do with the [CommandPalette](/navigation/command-palette).
+
+#### Algolia
+
+::component-example
+---
+padding: false
+---
+
+#default
+:command-palette-theme-algolia{class="max-h-[480px] rounded-md"}
+::
+
+::callout{icon="i-simple-icons-github" to="https://github.com/nuxtlabs/ui/blob/dev/docs/components/content/themes/CommandPaletteThemeAlgolia.vue#L23"}
+Take a look at the component!
+::
+
+#### Raycast
+
+::component-example
+---
+padding: false
+---
+
+#default
+:command-palette-theme-raycast{class="max-h-[480px] rounded-md"}
+::
+
+::callout{icon="i-simple-icons-github" to="https://github.com/nuxtlabs/ui/blob/dev/docs/components/content/themes/CommandPaletteThemeRaycast.vue#L30"}
+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',
+      padding: '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>
+```
+::
+
+### 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>
+```
+::
+
+## RTL Support
+
+Here are some examples of how components look like in RTL mode.
+
+### Pagination
+
+::component-example
+#default
+:pagination-example-r-t-l
+::
+
+::callout{icon="i-simple-icons-github" to="https://github.com/nuxtlabs/ui/blob/dev/docs/components/content/examples/PaginationExampleRTL.vue"}
+Take a look at the component!
+::

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

@@ -1,6 +1,9 @@
 ---
-github: true
 description: Display an image that represents a resource or a group of resources.
+links:
+  - label: GitHub
+    icon: i-simple-icons-github
+    to: https://github.com/nuxtlabs/ui/blob/dev/src/runtime/components/elements/Avatar.vue
 ---
 
 ## Usage
@@ -29,13 +32,15 @@ baseProps:
 
 ### Chip
 
-Use the `chip-color` and `chip-position` props to display a chip on the Avatar.
+Use the `chip-color`, `chip-text` :u-badge{label="New" class="!rounded-full"} and `chip-position` props to display a chip on the Avatar.
 
 ::component-card
 ---
 props:
   chipColor: 'primary'
+  chipText: ''
   chipPosition: 'top-right'
+  size : 'sm'
 extraColors:
   - gray
 baseProps:

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

@@ -1,6 +1,9 @@
 ---
-github: true
 description: Display a short text to represent a status or a category.
+links:
+  - label: GitHub
+    icon: i-simple-icons-github
+    to: https://github.com/nuxtlabs/ui/blob/dev/src/runtime/components/elements/Badge.vue
 ---
 
 ## Usage

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

@@ -1,6 +1,9 @@
 ---
-github: true
 description: Create a button with icon or link capabilities.
+links:
+  - label: GitHub
+    icon: i-simple-icons-github
+    to: https://github.com/nuxtlabs/ui/blob/dev/src/runtime/components/elements/Button.vue
 ---
 
 ## Usage

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

@@ -1,9 +1,12 @@
 ---
-github: true
 description: Display a list of actions in a dropdown menu.
-headlessui:
-  label: 'Menu'
-  to: 'https://headlessui.com/vue/menu'
+links:
+  - label: GitHub
+    icon: i-simple-icons-github
+    to: https://github.com/nuxtlabs/ui/blob/dev/src/runtime/components/elements/Dropdown.vue
+  - label: Menu
+    icon: i-simple-icons-headlessui
+    to: https://headlessui.com/vue/menu
 ---
 
 ## Usage
@@ -12,8 +15,10 @@ Pass an array of arrays to the `items` prop of the Dropdown component. Each arra
 
 - `label` - The label of the item.
 - `icon` - The icon of the item.
+- `iconClass` - The class of the icon of the item.
 - `avatar` - The avatar of the item. You can pass all the props of the [Avatar](/elements/avatar) component.
 - `shortcuts` - The shortcuts of the item.
+- `slot` - The slot of the item.
 - `disabled` - Whether the item is disabled.
 - `click` - The click handler of the item.
 
@@ -95,6 +100,68 @@ const items = [
 ```
 ::
 
+## Slots
+
+### `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` 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>
+```
+::
+
 ## Props
 
 :component-props

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

@@ -0,0 +1,287 @@
+---
+description: Display togglable accordion panels.
+links:
+  - label: GitHub
+    icon: i-simple-icons-github
+    to: https://github.com/nuxtlabs/ui/blob/dev/src/runtime/components/elements/Accordion.vue
+  - label: Disclosure
+    icon: i-simple-icons-headlessui
+    to: 'https://headlessui.com/vue/disclosure'
+navigation:
+  badge: 'Edge'
+---
+
+## Usage
+
+Pass an array to the `items` prop of the Accordion component. Each item can have any property from the [Button](/elements/button) component such as `label`, `icon`, `color`, `variant`, `size`, etc. but also:
+
+- `slot` - A key to customize the item with a slot.
+- `content` - The content to display in the panel by default.
+- `disabled` - Determines whether the item is disabled or not.
+- `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>
+```
+::
+
+### Style
+
+You can also pass any prop from the [Button](/elements/button) component directly to the Accordion component to style the buttons.
+
+::component-card
+---
+baseProps:
+  items:
+    - label: '1. What is NuxtLabs UI?'
+      content: 'Lorem ipsum dolor sit amet, consectetur adipiscing elit'
+    - label: '2. Getting Started'
+      content: 'Lorem ipsum dolor sit amet, consectetur adipiscing elit'
+    - label: '3. Theming'
+      content: 'Lorem ipsum dolor sit amet, consectetur adipiscing elit'
+    - label: '4. Components'
+      content: 'Lorem ipsum dolor sit amet, consectetur adipiscing elit'
+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: ''
+---
+::
+
+### Icon
+
+Use any icon from [Iconify](https://icones.js.org) by setting the `open-icon` and `close-icon` props by using this pattern: `i-{collection_name}-{icon_name}` or change it globally in `ui.accordion.default.openIcon` and `ui.accordion.default.closeIcon`.
+
+You can also set them to `null` to hide the icons.
+
+::component-card
+---
+baseProps:
+  items:
+    - label: '1. What is NuxtLabs UI?'
+      content: 'Lorem ipsum dolor sit amet, consectetur adipiscing elit'
+    - label: '2. Getting Started'
+      content: 'Lorem ipsum dolor sit amet, consectetur adipiscing elit'
+    - label: '3. Theming'
+      content: 'Lorem ipsum dolor sit amet, consectetur adipiscing elit'
+    - label: '4. Components'
+      content: 'Lorem ipsum dolor sit amet, consectetur adipiscing elit'
+props:
+  openIcon: 'i-heroicons-plus'
+  closeIcon: 'i-heroicons-minus'
+excludedProps:
+  - openIcon
+  - closeIcon
+---
+::
+
+### Multiple
+
+Use the `multiple` prop to to allow multiple elements to be opened at the same time.
+
+::component-card
+---
+baseProps:
+  items:
+    - label: 'What is NuxtLabs UI?'
+      content: 'Lorem ipsum dolor sit amet, consectetur adipiscing elit'
+    - label: 'Getting Started'
+      content: 'Lorem ipsum dolor sit amet, consectetur adipiscing elit'
+    - label: 'Theming'
+      content: 'Lorem ipsum dolor sit amet, consectetur adipiscing elit'
+    - label: 'Components'
+      content: 'Lorem ipsum dolor sit amet, consectetur adipiscing elit'
+props:
+  multiple: true
+excludedProps:
+  - defaultOpen
+---
+::
+
+### Open
+
+Use the `default-open` prop to open all items by default. Works better when the `multiple` prop is set to `true`.
+
+::component-card
+---
+baseProps:
+  items:
+    - label: 'What is NuxtLabs UI?'
+      content: 'Lorem ipsum dolor sit amet, consectetur adipiscing elit'
+    - label: 'Getting Started'
+      content: 'Lorem ipsum dolor sit amet, consectetur adipiscing elit'
+    - label: 'Theming'
+      content: 'Lorem ipsum dolor sit amet, consectetur adipiscing elit'
+    - label: 'Components'
+      content: 'Lorem ipsum dolor sit amet, consectetur adipiscing elit'
+props:
+  defaultOpen: true
+  multiple: true
+excludedProps:
+  - defaultOpen
+  - multiple
+---
+::
+
+## Slots
+
+You can use slots to customize the buttons and items content of the Accordion.
+
+### `default`
+
+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>
+```
+::
+
+### `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="flex flex-col justify-center items-center gap-1">
+        <NuxtLink to="/getting-started" class="flex items-end gap-1.5 font-bold text-xl text-gray-900 dark:text-white">
+          <Logo class="w-8 h-8 text-primary-500 dark:text-primary-400" />
+
+          <span class="hidden sm:block">NuxtLabs</span><span class="sm:text-primary-500 dark:sm:text-primary-400">UI</span>
+        </NuxtLink>
+
+        <p class="text-sm text-gray-500 dark:text-gray-400">
+          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>@nuxthq/ui</code> dependency to your project:
+        </p>
+        <p>
+          {{ description }}
+        </p>
+      </div>
+
+      <div class="flex flex-col items-center">
+        <code>$ npm install @nuxtlabs/ui</code>
+        <code>$ nnpm install -D @nuxthq/ui</code>
+        <code>$ pnpm i -D @nuxthq/ui</code>
+      </div>
+    </template>
+  </UAccordion>
+</template>
+```
+::
+
+## Props
+
+:component-props
+
+## Preset
+
+:component-preset

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

@@ -1,6 +1,9 @@
 ---
-github: true
 description: Display an icon from Iconify library.
+links:
+  - label: GitHub
+    icon: i-simple-icons-github
+    to: https://github.com/nuxtlabs/ui/blob/dev/src/runtime/components/elements/Icon.vue
 ---
 
 ## Usage
@@ -12,7 +15,7 @@ props:
 ---
 ::
 
-::alert{icon="i-heroicons-exclamation-triangle"}
+::callout{icon="i-heroicons-exclamation-triangle"}
 When playing with the `name` prop above, you won't be able to use any icon you want as icons are bundled on build as explained in the [theming section](/getting-started/theming#icons).
 ::
 

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

@@ -1,7 +1,10 @@
 ---
-github: true
 title: 'Keyboard Key'
 description: Display a keyboard key in a text block.
+links:
+  - label: GitHub
+    icon: i-simple-icons-github
+    to: https://github.com/nuxtlabs/ui/blob/dev/src/runtime/components/elements/Kbd.vue
 navigation:
   title: 'Kbd'
 ---

docs/content/3.forms/1.input.md

@@ -1,6 +1,9 @@
 ---
-github: true
 description: Display an input field.
+links:
+  - label: GitHub
+    icon: i-simple-icons-github
+    to: https://github.com/nuxtlabs/ui/blob/dev/src/runtime/components/forms/Input.vue
 ---
 
 ## Usage
@@ -218,7 +221,7 @@ const q = ref('')
 ```
 ::
 
-::alert{icon="i-heroicons-exclamation-triangle-20-solid"}
+::callout{icon="i-heroicons-exclamation-triangle-20-solid"}
 As leading and trailing icons are wrapped around a `pointer-events-none` class, if you inject a clickable element in the slot, you need to remove this class to make it clickable by adding `:ui="{ icon: { trailing: { pointer: '' } } }"` to the Input.
 ::
 

docs/content/3.forms/2.textarea.md

@@ -1,6 +1,9 @@
 ---
-github: true
 description: Display a textarea field.
+links:
+  - label: GitHub
+    icon: i-simple-icons-github
+    to: https://github.com/nuxtlabs/ui/blob/dev/src/runtime/components/forms/Textarea.vue
 ---
 
 ## Usage

docs/content/3.forms/3.select.md

@@ -1,6 +1,9 @@
 ---
-github: true
 description: Display a select field.
+links:
+  - label: GitHub
+    icon: i-simple-icons-github
+    to: https://github.com/nuxtlabs/ui/blob/dev/src/runtime/components/forms/Select.vue
 ---
 
 ## Usage
@@ -27,7 +30,9 @@ const country = ref(countries[0])
 ```
 ::
 
-When using objects, you can configure which field will be used for display through the `option-attribute` prop that defaults to `label` and which field will be used for comparison through the `value-attribute` prop that defaults to `value`.
+When using objects, you can configure which field will be used for display through the `option-attribute` prop that defaults to `label` and which field will be used for comparison through the `value-attribute` prop that defaults to `value`. 
+
+Adding a `disabled` key to the objects will control the disabled state of the option.
 
 ::component-example
 #default
@@ -41,7 +46,8 @@ const countries = [{
   value: 'US'
 }, {
   name: 'Canada',
-  value: 'CA'
+  value: 'CA',
+  disabled: true
 }, {
   name: 'Mexico',
   value: 'MX'
@@ -191,6 +197,8 @@ props:
 ---
 ::
 
+Add a `disabled` key with a truthy value to the `options` array of object to disable a single option.
+
 ### Loading
 
 Use the `loading` prop to show a loading icon and disable the Input.

docs/content/3.forms/4.select-menu.md

@@ -1,9 +1,12 @@
 ---
-github: true
 description: Display a select menu with advanced features.
-headlessui:
-  label: 'Listbox'
-  to: 'https://headlessui.com/vue/listbox'
+links:
+  - label: GitHub
+    icon: i-simple-icons-github
+    to: https://github.com/nuxtlabs/ui/blob/dev/src/runtime/components/forms/SelectMenu.vue
+  - label: 'Listbox'
+    icon: i-simple-icons-headlessui
+    to: 'https://headlessui.com/vue/listbox'
 ---
 
 ## Usage
@@ -122,7 +125,7 @@ excludedProps:
 ---
 ::
 
-::alert{icon="i-heroicons-light-bulb"}
+::callout{icon="i-heroicons-light-bulb"}
 Learn how to customize icons from the [Select](/forms/select#icon) component.
 ::
 
@@ -146,6 +149,40 @@ props:
 ---
 ::
 
+### Async search
+
+Pass a function to the `searchable` prop to customize the search behavior and filter options according to your needs. The function will receive the query as its first argument and should return an array.
+
+Use the `debounce` prop to adjust the delay of the function.
+
+::component-example
+#default
+:select-menu-example-async-search{class="max-w-[12rem] w-full"}
+
+#code
+```vue
+<script setup>
+const search = async (q) => {
+  const users = await $fetch('https://jsonplaceholder.typicode.com/users', { params: { q } })
+
+  return users.map(user => ({ id: user.id, label: user.name, suffix: user.email })).filter(Boolean)
+}
+
+const selected = ref([])
+</script>
+
+<template>
+  <USelectMenu
+    v-model="selected"
+    :searchable="search"
+    placeholder="Search for a user..."
+    multiple
+    by="id"
+  />
+</template>
+```
+::
+
 ## Slots
 
 ### `label`

docs/content/3.forms/5.checkbox.md

@@ -1,6 +1,9 @@
 ---
-github: true
 description: Display a checkbox field.
+links:
+  - label: GitHub
+    icon: i-simple-icons-github
+    to: https://github.com/nuxtlabs/ui/blob/dev/src/runtime/components/forms/Checkbox.vue
 ---
 
 ## Usage
@@ -14,7 +17,7 @@ Use a `v-model` to make the Checkbox reactive.
 #code
 ```vue
 <script setup>
-const selected = ref(false)
+const selected = ref(true)
 </script>
 
 <template>
@@ -36,6 +39,20 @@ props:
 ---
 ::
 
+### Style :u-badge{label="New" class="ml-2 align-text-bottom !rounded-full"}
+
+Use the `color` prop to change the style of the Checkbox.
+
+::component-card
+---
+baseProps:
+  name: 'checkbox2'
+  label: 'Label'
+props:
+  color: 'primary'
+---
+::
+
 ### Required
 
 Use the `required` prop to display a red star next to the label.
@@ -43,7 +60,7 @@ Use the `required` prop to display a red star next to the label.
 ::component-card
 ---
 baseProps:
-  name: 'checkbox2'
+  name: 'checkbox3'
 props:
   label: 'Label'
   required: true
@@ -57,7 +74,7 @@ Use the `help` prop to display some text under the Checkbox.
 ::component-card
 ---
 baseProps:
-  name: 'checkbox3'
+  name: 'checkbox4'
 props:
   label: 'Label'
   help: 'Please check this box'

docs/content/3.forms/6.radio.md

@@ -1,6 +1,9 @@
 ---
-github: true
 description: Display a radio field.
+links:
+  - label: GitHub
+    icon: i-simple-icons-github
+    to: https://github.com/nuxtlabs/ui/blob/dev/src/runtime/components/forms/Radio.vue
 ---
 
 ## Usage
@@ -50,6 +53,20 @@ props:
 ---
 ::
 
+### Style :u-badge{label="New" class="ml-2 align-text-bottom !rounded-full"}
+
+Use the `color` prop to change the style of the Radio.
+
+::component-card
+---
+baseProps:
+  name: 'radio2'
+  label: 'Label'
+props:
+  color: 'primary'
+---
+::
+
 ### Required
 
 Use the `required` prop to display a red star next to the label.
@@ -57,7 +74,7 @@ Use the `required` prop to display a red star next to the label.
 ::component-card
 ---
 baseProps:
-  name: 'radio2'
+  name: 'radio3'
 props:
   label: 'Label'
   required: true
@@ -71,7 +88,7 @@ Use the `help` prop to display some text under the Radio.
 ::component-card
 ---
 baseProps:
-  name: 'radio3'
+  name: 'radio4'
 props:
   label: 'Label'
   help: 'Please choose one'
@@ -85,7 +102,7 @@ Use the `disabled` prop to disable the Radio.
 ::component-card
 ---
 baseProps:
-  name: 'radio4'
+  name: 'radio5'
   value: true
 props:
   disabled: true

docs/content/3.forms/7.toggle.md

@@ -1,9 +1,12 @@
 ---
-github: true
 description: Display a toggle field.
-headlessui:
-  label: 'Switch'
-  to: 'https://headlessui.com/vue/switch'
+links:
+  - label: GitHub
+    icon: i-simple-icons-github
+    to: https://github.com/nuxtlabs/ui/blob/dev/src/runtime/components/forms/Toggle.vue
+  - label: 'Switch'
+    icon: i-simple-icons-headlessui
+    to: 'https://headlessui.com/vue/switch'
 ---
 
 ## Usage
@@ -26,6 +29,17 @@ const selected = ref(false)
 ```
 ::
 
+### Style :u-badge{label="New" class="ml-2 align-text-bottom !rounded-full"}
+
+Use the `color` prop to change the style of the Toggle.
+
+::component-card
+---
+props:
+  color: 'primary'
+---
+::
+
 ### Icon
 
 Use any icon from [Iconify](https://icones.js.org) by setting the `on-icon` and `off-icon` props by using this pattern: `i-{collection_name}-{icon_name}` or change it globally in `ui.toggle.default.onIcon` and `ui.toggle.default.offIcon`.

docs/content/3.forms/8.range.md

@@ -0,0 +1,104 @@
+---
+description: Display a range field
+links:
+  - label: GitHub
+    icon: i-simple-icons-github
+    to: https://github.com/nuxtlabs/ui/blob/dev/src/runtime/components/forms/Range.vue
+navigation:
+  badge: New
+---
+
+## Usage
+
+Use a `v-model` to make the Range reactive.
+
+::component-example
+#default
+:range-example
+
+#code
+```vue
+<script setup>
+const value = ref(50)
+</script>
+
+<template>
+  <URange v-model="value" />
+</template>
+```
+::
+
+### Style
+
+Use the `color` prop to change the visual style of the Range.
+
+::component-card
+---
+baseProps:
+  name: range'
+  placeholder: 'Search...'
+props:
+  color: 'primary'
+---
+::
+
+### Size
+
+Use the `size` prop to change the size of the Range.
+
+::component-card
+---
+baseProps:
+  name: 'range'
+props:
+  size: 'md'
+---
+::
+
+### Disabled
+
+Use the `disabled` prop to disable the Range.
+
+::component-card
+---
+baseProps:
+  name: 'range'
+props:
+  disabled: true
+---
+::
+
+### Min and Max
+
+Use the `min` and `max` prop to configure the Range.
+
+::component-card
+---
+baseProps:
+  name: 'range'
+props:
+  min: 0
+  max: 100
+---
+::
+
+### Step
+
+Use the `step` prop to change the step increment.
+
+::component-card
+---
+baseProps:
+  name: 'range'
+props:
+  step: 20
+---
+::
+
+## Props
+
+:component-props
+
+## Preset
+
+:component-preset

docs/content/3.forms/9.form-group.md

@@ -1,7 +1,9 @@
 ---
-github: 
-  suffix: .ts
 description: Display a label and additional informations around a form element.
+links:
+  - label: GitHub
+    icon: i-simple-icons-github
+    to: https://github.com/nuxtlabs/ui/blob/dev/src/runtime/components/forms/FormGroup.ts
 ---
 
 
@@ -128,7 +130,7 @@ code: >-
 
 You can also use the `error` prop as a boolean to mark the form element as invalid.
 
-::alert{icon="i-heroicons-light-bulb"}
+::callout{icon="i-heroicons-light-bulb"}
   The `error` prop will automatically set the `color` prop of the form element to `red`.
 ::
 

docs/content/4.data/1.table.md

@@ -1,6 +1,9 @@
 ---
-github: true
 description: 'Display data in a table.'
+links:
+  - label: GitHub
+    icon: i-simple-icons-github
+    to: https://github.com/nuxtlabs/ui/blob/dev/src/runtime/components/data/Table.vue
 ---
 
 ## Usage
@@ -72,6 +75,7 @@ Use the `columns` prop to configure which columns to display. It's an array of o
 - `key` - The field to display from the row data.
 - `sortable` - Whether the column is sortable. Defaults to `false`.
 - `direction` - The sort direction to use on first click. Defaults to `asc`.
+- `class` - The class to apply to the column cells.
 
 ::component-example{class="grid"}
 ---
@@ -209,7 +213,7 @@ You can specify a default sort for the table through the `sort` prop. It's an ob
 - `column` - The column to sort by.
 - `direction` - The sort direction. Can be either `asc` or `desc` and defaults to `asc`.
 
-::alert{icon="i-heroicons-light-bulb"}
+::callout{icon="i-heroicons-light-bulb"}
 This will set the default sort and will work even if no column is set as `sortable`.
 ::
 
@@ -288,7 +292,7 @@ Use the `sort-asc-icon` prop to set a different icon or change it globally in `u
 
 Use the `sort-desc-icon` prop to set a different icon or change it globally in `ui.table.default.sortDescIcon`. Defaults to `i-heroicons-bars-arrow-down-20-solid`.
 
-::alert{icon="i-heroicons-light-bulb"}
+::callout{icon="i-heroicons-light-bulb"}
 You can also customize the entire header cell, read more in the [Slots](#slots) section.
 ::
 
@@ -319,10 +323,46 @@ const selected = ref([people[1]])
 ```
 ::
 
-::alert{icon="i-heroicons-light-bulb"}
+::callout{icon="i-heroicons-light-bulb"}
 You can use the `by` prop to compare objects by a field instead of comparing object instances. We've replicated the behavior of Headless UI [Combobox](https://headlessui.com/vue/combobox#binding-objects-as-values).
 ::
 
+You can alsso add a `select` listener on your Table to make the rows clickable. The function will receive the row as the first argument.
+
+You can use this to navigate to a page, open a modal or even to select the row manually.
+
+::component-example{class="grid"}
+---
+padding: false
+overflowClass: 'overflow-x-auto'
+---
+
+#default
+:table-example-clickable{class="flex-1"}
+
+#code
+```vue
+<script setup>
+const people = [...]
+
+function select (row) {
+  const index = selected.value.findIndex((item) => item.id === row.id)
+  if (index === -1) {
+    selected.value.push(row)
+  } else {
+    selected.value.splice(index, 1)
+  }
+}
+
+const selected = ref([people[1]])
+</script>
+
+<template>
+  <UTable v-model="selected" :rows="people" @select="select" />
+</template>
+```
+::
+
 ### Searchable
 
 You can easily use the [Input](/forms/input) component to filter the rows.
@@ -401,7 +441,7 @@ const rows = computed(() => {
 ```
 ::
 
-### Loading :u-badge{label="Edge" class="ml-2 align-text-bottom !rounded-full"}
+### Loading
 
 Use the `loading` prop to display a loading state.
 
@@ -499,7 +539,7 @@ The `sort` property is an object with the following properties:
 
 The `on-sort` property is a function that you can call to sort the table and accepts the column as parameter.
 
-::alert{icon="i-heroicons-light-bulb"}
+::callout{icon="i-heroicons-light-bulb"}
 Even though you can customize the sort button as mentioned in the [Sortable](#sortable) section, you can use this slot to completely override its behavior, with a custom dropdown for example.
 ::
 
@@ -566,7 +606,7 @@ const selected = ref([people[1]])
 ```
 ::
 
-### `loading-state` :u-badge{label="Edge" class="ml-2 align-text-bottom !rounded-full"}
+### `loading-state`
 
 Use the `#loading-state` slot to customize the loading state.
 
@@ -605,7 +645,7 @@ const pending = ref(true)
 ```
 ::
 
-### `empty-state` :u-badge{label="Edge" class="ml-2 align-text-bottom !rounded-full"}
+### `empty-state`
 
 Use the `#empty-state` slot to customize the empty state.
 

docs/content/5.navigation/1.vertical-navigation.md

@@ -1,6 +1,9 @@
 ---
-github: true
 description: Display a vertical navigation.
+links:
+  - label: GitHub
+    icon: i-simple-icons-github
+    to: https://github.com/nuxtlabs/ui/blob/dev/src/runtime/components/navigation/VerticalNavigation.vue
 ---
 
 ## Usage
@@ -39,46 +42,6 @@ const links = [{
 ```
 ::
 
-## Theme
-
-Our theming system provides a lot of flexibility to customize the component. Here is an example of what you can do.
-
-::component-example
-#default
-:vertical-navigation-theme-tailwind
-#code
-```vue
-<script setup>
-const links = [{
-  label: 'Installation',
-  to: '/getting-started/installation'
-}, {
-  label: 'Vertical Navigation',
-  to: '/navigation/vertical-navigation'
-}, {
-  label: 'Command Palette',
-  to: '/navigation/command-palette'
-}]
-</script>
-
-<template>
-  <UVerticalNavigation
-    :links="links"
-    :ui="{
-      wrapper: 'border-l border-gray-200 dark:border-gray-800 space-y-2',
-      base: 'group block border-l -ml-px lg:leading-6',
-      padding: 'pl-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>
-```
-::
-
 ## Props
 
 :component-props

docs/content/5.navigation/2.command-palette.md

@@ -1,9 +1,12 @@
 ---
-github: true
 description: Add a customizable command palette to your app.
-headlessui:
-  label: 'Combobox'
-  to: 'https://headlessui.com/vue/combobox'
+links:
+  - label: GitHub
+    icon: i-simple-icons-github
+    to: https://github.com/nuxtlabs/ui/blob/dev/src/runtime/components/navigation/CommandPalette.vue
+  - label: 'Combobox'
+    icon: i-simple-icons-headlessui
+    to: 'https://headlessui.com/vue/combobox'
 ---
 
 ## Usage
@@ -278,8 +281,8 @@ You can also highlight the matches in the command by setting the `fuse.fuseOptio
 </template>
 ```
 
-::alert{icon="i-heroicons-light-bulb"}
-Try it yourself in this documentation's search by pressing :badge-shortcut{value="meta"} :badge-shortcut{value="K" class="ml-1"}.
+::callout{icon="i-heroicons-light-bulb"}
+Try it yourself in this documentation's search by pressing :kbd{value="meta"} :kbd{value="K" class="ml-1"}.
 ::
 
 ## Async search
@@ -319,47 +322,13 @@ const groups = computed(() => {
 ```
 ::
 
-::alert{icon="i-heroicons-light-bulb"}
+::callout{icon="i-heroicons-light-bulb"}
 The `loading` state will automatically be enabled when a `search` function is loading. You can disable this behavior by setting the `loading-icon` prop to `null` or globally in `ui.commandPalette.default.loadingIcon`.
 ::
 
-## Themes
-
-Our theming system provides a lot of flexibility to customize the component. Here is some examples of what you can do.
-
-### Algolia
-
-::component-example
----
-padding: false
----
-
-#default
-:command-palette-theme-algolia{class="max-h-[480px] rounded-md"}
-::
-
-::alert{icon="i-simple-icons-github" to="https://github.com/nuxtlabs/ui/blob/dev/docs/components/content/themes/CommandPaletteThemeAlgolia.vue#L23"}
-Take a look at the component!
-::
-
-### Raycast
-
-::component-example
----
-padding: false
----
-
-#default
-:command-palette-theme-raycast{class="max-h-[480px] rounded-md"}
-::
-
-::alert{icon="i-simple-icons-github" to="https://github.com/nuxtlabs/ui/blob/dev/docs/components/content/themes/CommandPaletteThemeRaycast.vue#L30"}
-Take a look at the component!
-::
-
 ## Slots
 
-### `empty-state` :u-badge{label="Edge" class="ml-2 align-text-bottom !rounded-full"}
+### `empty-state`
 
 Use the `#empty-state` slot to customize the empty state.
 

docs/content/5.navigation/3.pagination.md

@@ -1,8 +1,9 @@
 ---
-github: true
 description: Add a pagination to handle pages.
-navigation:
-  badge: 'Edge'
+links:
+  - label: GitHub
+    icon: i-simple-icons-github
+    to: https://github.com/nuxtlabs/ui/blob/dev/src/runtime/components/navigation/Pagination.vue
 ---
 
 ## Usage
@@ -111,39 +112,6 @@ excludedProps:
 ---
 ::
 
-## Theme
-
-Our theming system provides a lot of flexibility to customize the component. Here is an example of what you can do.
-
-::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>
-```
-::
-
 ## Slots
 
 ### `prev` / `next`
@@ -162,16 +130,16 @@ const items = ref(Array(55));
 </script>
 
 <template>
-  <UPagination v-model="page" :total="items.length" :ui="{ rounded: 'first-of-type:rounded-l-md last-of-type:rounded-r-md' }">
+  <UPagination v-model="page" :total="items.length" :ui="{ rounded: 'first-of-type:rounded-s-md last-of-type:rounded-e-md' }">
     <template #prev="{ onClick }">
       <UTooltip text="Previous page">
-        <UButton icon="i-heroicons-arrow-small-left-20-solid" color="primary" :ui="{ rounded: 'rounded-full' }" class="mr-2" @click="onClick" />
+        <UButton icon="i-heroicons-arrow-small-left-20-solid" color="primary" :ui="{ rounded: 'rounded-full' }" class="rtl:[&_span:first-child]:rotate-180 me-2" @click="onClick" />
       </UTooltip>
     </template>
 
     <template #next="{ onClick }">
       <UTooltip text="Next page">
-        <UButton icon="i-heroicons-arrow-small-right-20-solid" color="primary" :ui="{ rounded: 'rounded-full' }" class="ml-2" @click="onClick" />
+        <UButton icon="i-heroicons-arrow-small-right-20-solid" color="primary" :ui="{ rounded: 'rounded-full' }" class="rtl:[&_span:last-child]:rotate-180 ms-2" @click="onClick" />
       </UTooltip>
     </template>
   </UPagination>

docs/content/6.overlays/1.modal.md

@@ -1,13 +1,18 @@
 ---
-github: true
 description: Display a modal within your application.
-headlessui:
-  label: 'Dialog'
-  to: 'https://headlessui.com/vue/dialog'
+links:
+  - label: GitHub
+    icon: i-simple-icons-github
+    to: https://github.com/nuxtlabs/ui/blob/dev/src/runtime/components/overlays/Modal.vue
+  - label: 'Dialog'
+    icon: i-simple-icons-headlessui
+    to: 'https://headlessui.com/vue/dialog'
 ---
 
 ## Usage
 
+Use a `v-model` to control the Modal state.
+
 ::component-example
 #default
 :modal-example-basic
@@ -64,6 +69,115 @@ const isOpen = ref(false)
 ```
 ::
 
+### Disable overlay
+
+Set the `overlay` prop to `false` to disable it.
+
+::component-example
+#default
+:modal-example-disable-overlay
+
+#code
+```vue
+<script setup>
+const isOpen = ref(false)
+</script>
+
+<template>
+  <div>
+    <UButton label="Open" @click="isOpen = true" />
+
+    <UModal v-model="isOpen" :overlay="false">
+      <div class="p-4">
+        <Placeholder class="h-48" />
+      </div>
+    </UModal>
+  </div>
+</template>
+```
+::
+
+### Disable transition
+
+Set the `transition` prop to `false` to disable it.
+
+::component-example
+#default
+:modal-example-disable-transition
+
+#code
+```vue
+<script setup>
+const isOpen = ref(false)
+</script>
+
+<template>
+  <div>
+    <UButton label="Open" @click="isOpen = true" />
+
+    <UModal v-model="isOpen" :transition="false">
+      <div class="p-4">
+        <Placeholder class="h-48" />
+      </div>
+    </UModal>
+  </div>
+</template>
+```
+::
+
+### Prevent close
+
+Use the `prevent-close` prop to disable the outside click alongside the `esc` keyboard shortcut.
+
+::component-example
+#default
+:modal-example-prevent-close
+
+#code
+```vue
+<script setup>
+const isOpen = ref(false)
+</script>
+
+<template>
+  <div>
+    <UButton label="Open" @click="isOpen = true" />
+
+    <UModal v-model="isOpen" prevent-close>
+      <UCard :ui="{ ring: '', divide: 'divide-y divide-gray-100 dark:divide-gray-800' }">
+        <template #header>
+          <div class="flex items-center justify-between">
+            <h3 class="text-base font-semibold leading-6 text-gray-900 dark:text-white">
+              Modal
+            </h3>
+            <UButton color="gray" variant="ghost" icon="i-heroicons-x-mark-20-solid" class="-my-1" @click="isOpen = false" />
+          </div>
+        </template>
+
+        <Placeholder class="h-32" />
+      </UCard>
+    </UModal>
+  </div>
+</template>
+```
+::
+
+You can still handle the `esc` shortcut yourself by using our [defineShortcuts](/getting-started/shortcuts#defineshortcuts) composable.
+
+```vue
+<script setup>
+const isOpen = ref(false)
+
+defineShortcuts({
+  escape: {
+    usingInput: true,
+    whenever: [isOpen],
+    handler: () => { isOpen.value = false }
+  }
+})
+</script>
+```
+
 ## Props
 
 :component-props

docs/content/6.overlays/2.slideover.md

@@ -1,16 +1,21 @@
 ---
-github: true
 description: Display a dialog that slides in from the edge of the screen.
-headlessui:
-  label: 'Dialog'
-  to: 'https://headlessui.com/vue/dialog'
+links:
+  - label: GitHub
+    icon: i-simple-icons-github
+    to: https://github.com/nuxtlabs/ui/blob/dev/src/runtime/components/overlays/Slideover.vue
+  - label: 'Dialog'
+    icon: i-simple-icons-headlessui
+    to: 'https://headlessui.com/vue/dialog'
 ---
 
 ## Usage
 
+Use a `v-model` to control the Slideover state.
+
 ::component-example
 #default
-:slideover-example
+:slideover-example-basic
 #code
 ```vue
 <script setup>
@@ -29,6 +34,149 @@ const isOpen = ref(false)
 ```
 ::
 
+You can put a [Card](/layout/card) component inside your Slideover to handle forms and take advantage of `header` and `footer` slots:
+
+::component-example
+#default
+:slideover-example-card
+
+#code
+```vue
+<script setup>
+const isOpen = ref(false)
+</script>
+
+<template>
+  <div>
+    <UButton label="Open" @click="isOpen = true" />
+
+    <USlideover v-model="isOpen">
+      <UCard class="flex flex-col flex-1" :ui="{ body: { base: 'flex-1' }, ring: '', divide: 'divide-y divide-gray-100 dark:divide-gray-800' }">
+        <template #header>
+          <!-- Content -->
+        </template>
+
+        <!-- Content -->
+
+        <template #footer>
+          <!-- Content -->
+        </template>
+      </UCard>
+    </USlideover>
+  </div>
+</template>
+```
+::
+
+### Disable overlay
+
+Set the `overlay` prop to `false` to disable it.
+
+::component-example
+#default
+:slideover-example-disable-overlay
+
+#code
+```vue
+<script setup>
+const isOpen = ref(false)
+</script>
+
+<template>
+  <div>
+    <UButton label="Open" @click="isOpen = true" />
+
+    <USlideover v-model="isOpen" :overlay="false">
+      <div class="p-4 flex-1">
+        <Placeholder class="h-full" />
+      </div>
+    </USlideover>
+  </div>
+</template>
+```
+::
+
+### Disable transition
+
+Set the `transition` prop to `false` to disable it.
+
+::component-example
+#default
+:slideover-example-disable-transition
+
+#code
+```vue
+<script setup>
+const isOpen = ref(false)
+</script>
+
+<template>
+  <div>
+    <UButton label="Open" @click="isOpen = true" />
+
+    <USlideover v-model="isOpen" :transition="false">
+      <div class="p-4 flex-1">
+        <Placeholder class="h-full" />
+      </div>
+    </USlideover>
+  </div>
+</template>
+```
+::
+
+### Prevent close
+
+Use the `prevent-close` prop to disable the outside click alongside the `esc` keyboard shortcut.
+
+::component-example
+#default
+:slideover-example-prevent-close
+
+#code
+```vue
+<script setup>
+const isOpen = ref(false)
+</script>
+
+<template>
+  <div>
+    <UButton label="Open" @click="isOpen = true" />
+
+    <USlideover v-model="isOpen" prevent-close>
+      <UCard class="flex flex-col flex-1" :ui="{ body: { base: 'flex-1' }, ring: '', divide: 'divide-y divide-gray-100 dark:divide-gray-800' }">
+        <template #header>
+          <div class="flex items-center justify-between">
+            <h3 class="text-base font-semibold leading-6 text-gray-900 dark:text-white">
+              Slideover
+            </h3>
+            <UButton color="gray" variant="ghost" icon="i-heroicons-x-mark-20-solid" class="-my-1" @click="isOpen = false" />
+          </div>
+        </template>
+
+        <Placeholder class="h-full" />
+      </UCard>
+    </USlideover>
+  </div>
+</template>
+```
+::
+
+You can still handle the `esc` shortcut yourself by using our [defineShortcuts](/getting-started/shortcuts#defineshortcuts) composable.
+
+```vue
+<script setup>
+const isOpen = ref(false)
+
+defineShortcuts({
+  escape: {
+    usingInput: true,
+    whenever: [isOpen],
+    handler: () => { isOpen.value = false }
+  }
+})
+</script>
+```
+
 ## Props
 
 :component-props

docs/content/6.overlays/3.popover.md

@@ -1,9 +1,12 @@
 ---
-github: true
 description: Display a non-modal dialog that floats around a trigger element.
-headlessui:
-  label: 'Popover'
-  to: 'https://headlessui.com/vue/popover'
+links:
+  - label: GitHub
+    icon: i-simple-icons-github
+    to: https://github.com/nuxtlabs/ui/blob/dev/src/runtime/components/overlays/Popover.vue
+  - label: 'Popover'
+    icon: i-simple-icons-headlessui
+    to: 'https://headlessui.com/vue/popover'
 ---
 
 ## Usage

docs/content/6.overlays/4.tooltip.md

@@ -1,6 +1,9 @@
 ---
-github: true
 description: Display content that appears on hover next to an element.
+links:
+  - label: GitHub
+    icon: i-simple-icons-github
+    to: https://github.com/nuxtlabs/ui/blob/dev/src/runtime/components/overlays/Tooltip.vue
 ---
 
 ## Usage

docs/content/6.overlays/5.context-menu.md

@@ -1,6 +1,9 @@
 ---
-github: true
 description: Display a menu that appears on right click.
+links:
+  - label: GitHub
+    icon: i-simple-icons-github
+    to: https://github.com/nuxtlabs/ui/blob/dev/src/runtime/components/overlays/ContextMenu.vue
 ---
 
 ## Usage

docs/content/6.overlays/6.notification.md

@@ -1,6 +1,9 @@
 ---
-github: true
 description: Display a toast notification in your app.
+links:
+  - label: GitHub
+    icon: i-simple-icons-github
+    to: https://github.com/nuxtlabs/ui/blob/dev/src/runtime/components/overlays/Notification.vue
 ---
 
 ## Usage
@@ -19,6 +22,19 @@ First of all, add the `Notifications` component to your app, preferably inside `
 </template>
 ```
 
+This component will render the notifications at the bottom right of the screen by default. You can configure its behavior in the `app.config.ts` through `ui.notifications`:
+
+```ts [app.config.ts]
+export default defineAppConfig({
+  ui: {
+    notifications: {
+      // Show toasts at the top right of the screen
+      position: 'top-0 right-0'
+    }
+  }
+})
+```
+
 Then, you can use the `useToast` composable to add notifications to your app:
 
 ::component-example
@@ -36,19 +52,46 @@ const toast = useToast()
 ```
 ::
 
-This component will render by default the notifications at the bottom right of the screen. You can configure its behavior in the `app.config.ts` through `ui.notifications`:
+When using `toast.add`, this will push a new notification to the stack displayed in `<UNotifications />`. All the props of the `Notification` component can be passed to `toast.add`.
 
-```ts [app.config.ts]
-export default defineAppConfig({
-  ui: {
-    notifications: {
-      // Show toasts at the top right of the screen
-      position: 'top-0 right-0'
-    }
-  }
+```vue
+<script setup>
+const toast = useToast()
+
+onMounted(() => {
+  toast.add({
+    id: 'update_downloaded',
+    title: 'Update downloaded.',
+    description: 'It will be installed on restart. Restart now?',
+    icon: 'i-octicon-desktop-download-24',
+    timeout: 0,
+    actions: [{
+      label: 'Restart',
+      click: () => {
+
+      }
+    }]
+  })
 })
+</script>
 ```
 
+You can also use the `Notification` component directly in your app as an alert for example.
+
+### Title
+
+Pass a `title` to your Notification.
+
+::component-card
+---
+baseProps:
+  id: 1
+  timeout: 0
+props:
+  title: 'Notification'
+---
+::
+
 ### Description
 
 You can add a `description` in addition of the `title`.
@@ -58,8 +101,8 @@ You can add a `description` in addition of the `title`.
 baseProps:
   id: 2
   timeout: 0
-props:
   title: 'Notification'
+props:
   description: 'This is a notification.'
 ---
 ::
@@ -118,14 +161,14 @@ props:
 ---
 ::
 
-### Color
+### Style
 
 Use the `color` prop to change the progress and icon color of the Notification.
 
 ::component-card
 ---
 baseProps:
-  id: 5
+  id: 6
   title: 'Notification'
   description: 'This is a notification.'
   timeout: 600000
@@ -194,7 +237,7 @@ You can pass all the props of the [Button](/elements/button) component to custom
 ::component-card
 ---
 baseProps:
-  id: 6
+  id: 7
   title: 'Notification'
   timeout: 0
 props:
@@ -235,7 +278,7 @@ Like for `closeButton`, you can pass all the props of the [Button](/elements/but
 ::component-card
 ---
 baseProps:
-  id: 6
+  id: 8
   title: 'Notification'
   timeout: 0
 props:
@@ -256,7 +299,7 @@ Actions will render differently whether you have a `description` set.
 ::component-card
 ---
 baseProps:
-  id: 6
+  id: 9
   title: 'Notification'
   description: 'This is a notification.'
   timeout: 0

docs/content/7.layout/1.card.md

@@ -1,6 +1,9 @@
 ---
-github: true
 description: Display a card for content with a header, body and footer.
+links:
+  - label: GitHub
+    icon: i-simple-icons-github
+    to: https://github.com/nuxtlabs/ui/blob/dev/src/runtime/components/layout/Card.vue
 ---
 
 ## Usage

docs/content/7.layout/2.container.md

@@ -1,6 +1,9 @@
 ---
-github: true
 description: A container lets you center and constrain the width of your content.
+links:
+  - label: GitHub
+    icon: i-simple-icons-github
+    to: https://github.com/nuxtlabs/ui/blob/dev/src/runtime/components/layout/Container.vue
 ---
 
 ## Usage

docs/content/7.layout/3.skeleton.md

@@ -1,6 +1,9 @@
 ---
-github: true
 description: Display a placeholder while content is loading.
+links:
+  - label: GitHub
+    icon: i-simple-icons-github
+    to: https://github.com/nuxtlabs/ui/blob/dev/src/runtime/components/layout/Skeleton.vue
 ---
 
 ## Usage

docs/layouts/default.vue

@@ -1,5 +0,0 @@
-<template>
-  <div class="prose prose-primary dark:prose-invert max-w-none">
-    <slot />
-  </div>
-</template>

docs/nuxt.config.ts

@@ -1,28 +1,24 @@
-import ui from '../src/module'
-import { excludeColors } from '../src/colors'
 import colors from 'tailwindcss/colors'
+import module from '../src/module'
+import { excludeColors } from '../src/colors'
+import pkg from '../package.json'
 
 export default defineNuxtConfig({
-  // @ts-ignore
+  extends: '@nuxt-themes/ui-kit',
   modules: [
-    ui,
-    '@vueuse/nuxt',
     '@nuxt/content',
     '@nuxt/devtools',
     '@nuxthq/studio',
+    module,
+    '@nuxtjs/google-fonts',
     '@nuxtjs/plausible',
-    'nuxt-lodash',
-    'nuxt-component-meta'
+    '@vueuse/nuxt',
+    'nuxt-component-meta',
+    'nuxt-lodash'
   ],
-  content: {
-    documentDriven: true,
-    highlight: {
-      theme: {
-        light: 'material-lighter',
-        default: 'material-default',
-        dark: 'material-palenight'
-      },
-      preload: ['json', 'js', 'ts', 'html', 'css', 'vue', 'diff', 'shell', 'markdown', 'yaml', 'bash', 'ini']
+  runtimeConfig: {
+    public: {
+      version: pkg.version
     }
   },
   ui: {
@@ -30,15 +26,21 @@ export default defineNuxtConfig({
     icons: ['heroicons', 'simple-icons'],
     safelistColors: excludeColors(colors)
   },
-  typescript: {
-    strict: false,
-    includeWorkspace: true
+  googleFonts: {
+    families: {
+      Inter: [400, 500, 600, 700]
+    }
   },
   routeRules: {
-    '/': { redirect: '/getting-started' }
+    '/': { redirect: '/getting-started', prerender: false }
   },
-  generate: {
-    routes: ['/getting-started']
+  nitro: {
+    prerender: {
+      routes: ['/getting-started']
+    }
+  },
+  experimental: {
+    payloadExtraction: true
   },
   componentMeta: {
     metaFields: {
@@ -47,5 +49,9 @@ export default defineNuxtConfig({
       events: false,
       exposed: false
     }
+  },
+  typescript: {
+    strict: false,
+    includeWorkspace: true
   }
 })

docs/package.json

@@ -0,0 +1,22 @@
+{
+  "name": "@nuxthq/ui-docs",
+  "private": true,
+  "devDependencies": {
+    "@iconify-json/heroicons": "latest",
+    "@iconify-json/simple-icons": "latest",
+    "@nuxt-themes/ui-kit": "npm:@nuxt-themes/ui-kit-edge@0.0.1-28161530.eabde2d",
+    "@nuxt/content": "^2.7.0",
+    "@nuxt/devtools": "^0.6.7",
+    "@nuxt/eslint-config": "^0.1.1",
+    "@nuxthq/studio": "^0.13.4",
+    "@nuxtjs/google-fonts": "^3.0.1",
+    "@nuxtjs/plausible": "^0.2.1",
+    "@vueuse/nuxt": "^10.2.1",
+    "eslint": "^8.45.0",
+    "nuxt": "^3.6.3",
+    "nuxt-component-meta": "^0.5.3",
+    "nuxt-lodash": "^2.5.0",
+    "typescript": "^5.1.6",
+    "v-calendar": "^3.0.3"
+  }
+}