docs: migrate to nuxt compatibility 4

docs/app/app.config.ts

@@ -0,0 +1,6 @@
+export default defineAppConfig({
+  ui: {
+    primary: 'green',
+    gray: 'slate'
+  }
+})

docs/app/app.vue

@@ -0,0 +1,100 @@
+<script setup lang="ts">
+import { withoutTrailingSlash } from 'ufo'
+// import { debounce } from 'perfect-debounce'
+import type { ContentSearchFile } from '#ui-pro/types'
+
+const searchTerm = ref('')
+
+const route = useRoute()
+// const colorMode = useColorMode()
+// const { branch } = useContentSource()
+const runtimeConfig = useRuntimeConfig()
+const { integrity, api } = runtimeConfig.public.content
+
+const { data: navigation } = await useAsyncData('navigation', () => fetchContentNavigation(), { default: () => [] })
+const { data: files } = await useLazyFetch<ContentSearchFile[]>(`${api.baseURL}/search${integrity ? '.' + integrity : ''}`, { default: () => [] })
+
+// Computed
+
+// const color = computed(() => colorMode.value === 'dark' ? '#18181b' : 'white')
+
+const links = computed(() => {
+  return [{
+    label: 'Docs',
+    icon: 'i-heroicons-book-open',
+    to: '/getting-started',
+    active: route.path.startsWith('/getting-started') || route.path.startsWith('/components')
+  }, ...(navigation.value.find(item => item._path === '/pro') ? [{
+    label: 'Pro',
+    icon: 'i-heroicons-square-3-stack-3d',
+    to: '/pro',
+    active: route.path.startsWith('/pro/getting-started') || route.path.startsWith('/pro/components') || route.path.startsWith('/pro/prose')
+  }, {
+    label: 'Pricing',
+    icon: 'i-heroicons-credit-card',
+    to: '/pro/pricing'
+  }, {
+    label: 'Templates',
+    icon: 'i-heroicons-computer-desktop',
+    to: '/pro/templates'
+  }] : []), {
+    label: 'Releases',
+    icon: 'i-heroicons-rocket-launch',
+    to: '/releases'
+  }].filter(Boolean)
+})
+
+// Watch
+
+// watch(searchTerm, debounce((query: string) => {
+//   if (!query) {
+//     return
+//   }
+
+//   useTrackEvent('Search', { props: { query: `${query} - ${searchTerm.value?.commandPaletteRef.results.length} results` } })
+// }, 500))
+
+// Head
+
+useHead({
+  meta: [
+    { name: 'viewport', content: 'width=device-width, initial-scale=1' },
+    // { key: 'theme-color', name: 'theme-color', content: color }
+  ],
+  link: [
+    { rel: 'icon', type: 'image/svg+xml', href: '/icon.svg' },
+    { rel: 'canonical', href: `https://ui.nuxt.com${withoutTrailingSlash(route.path)}` }
+  ],
+  htmlAttrs: {
+    lang: 'en'
+  }
+})
+
+useServerSeoMeta({
+  ogSiteName: 'Nuxt UI',
+  twitterCard: 'summary_large_image'
+})
+
+// Provide
+
+provide('navigation', navigation)
+provide('files', files)
+</script>
+
+<template>
+  <UApp>
+    <NuxtLoadingIndicator />
+
+    <Banner v-if="!$route.path.startsWith('/examples')" />
+
+    <Header v-if="!$route.path.startsWith('/examples')" :links="links" />
+
+    <NuxtLayout>
+      <NuxtPage />
+    </NuxtLayout>
+
+    <Footer v-if="!$route.path.startsWith('/examples')" />
+
+    <LazyUContentSearch v-model:search-term="searchTerm" :files="files" :navigation="navigation" :links="links" :fuse="{ resultLimit: 42 }" />
+  </UApp>
+</template>

docs/app/components/Banner.vue

@@ -0,0 +1,58 @@
+<script setup lang="ts">
+const id = 'nuxt-ui-banner-1'
+const to = '/pro/pricing'
+
+const hideBanner = () => {
+  localStorage.setItem(id, 'true')
+
+  document.querySelector('html')?.classList.add('hide-banner')
+}
+
+if (import.meta.server) {
+  useHead({
+    script: [{
+      key: 'prehydrate-template-banner',
+      innerHTML: `
+            if (localStorage.getItem('${id}') === 'true') {
+              document.querySelector('html').classList.add('hide-banner')
+            }`.replace(/\s+/g, ' '),
+      type: 'text/javascript'
+    }]
+  })
+}
+</script>
+
+<template>
+  <div class="relative bg-primary hover:bg-primary/90 transition-[background] backdrop-blur z-50 app-banner">
+    <UContainer class="py-2">
+      <NuxtLink v-if="to" :to="to" class="focus:outline-none" aria-label="Nuxt UI Pro pricing" tabindex="-1">
+        <span class="absolute inset-0 " aria-hidden="true" />
+      </NuxtLink>
+
+      <div class="flex items-center justify-between gap-2">
+        <div class="lg:flex-1 hidden lg:flex items-center" />
+
+        <p class="text-sm font-medium text-white dark:text-gray-900">
+          <UIcon name="i-heroicons-rocket-launch" class="w-5 h-5 align-top flex-shrink-0 pointer-events-none mr-2" />
+          <span class="font-semibold">Nuxt UI Pro v1.0</span> is out with dashboard components!
+        </p>
+
+        <div class="flex items-center justify-end lg:flex-1">
+          <button
+            class="p-1.5 rounded-md inline-flex hover:bg-primary/90"
+            aria-label="Close banner"
+            @click.prevent="hideBanner"
+          >
+            <UIcon name="i-heroicons-x-mark-20-solid" class="w-5 h-5 text-white dark:text-gray-900" />
+          </button>
+        </div>
+      </div>
+    </UContainer>
+  </div>
+</template>
+
+<style scoped>
+.hide-banner .app-banner {
+  display: none;
+}
+</style>

docs/app/components/Footer.vue

@@ -0,0 +1,43 @@
+<script setup lang="ts">
+const links = [{
+  icon: 'i-simple-icons-figma',
+  label: 'Figma Kit',
+  to: 'https://www.figma.com/community/file/1288455405058138934',
+  target: '_blank'
+}, {
+  label: 'Playground',
+  icon: 'i-simple-icons-stackblitz',
+  to: 'https://stackblitz.com/edit/nuxt-ui',
+  target: '_blank'
+}, {
+  label: 'Roadmap',
+  icon: 'i-heroicons-map',
+  to: '/roadmap'
+}, {
+  label: 'Releases',
+  icon: 'i-heroicons-rocket-launch',
+  to: '/releases'
+}]
+</script>
+
+<template>
+  <USeparator icon="i-simple-icons-nuxtdotjs" class="h-px" />
+
+  <UFooter :links="links">
+    <template #left>
+      <NuxtLink v-if="$route.path.startsWith('/pro')" to="https://ui.nuxt.com/pro/purchase" target="_blank" class="text-sm text-gray-500 dark:text-gray-400">
+        Purchase <span class="text-gray-900 dark:text-white">Nuxt UI Pro</span>
+      </NuxtLink>
+      <NuxtLink v-else to="https://github.com/nuxt/ui" target="_blank" class="text-sm text-gray-500 dark:text-gray-400">
+        Published under <span class="text-gray-900 dark:text-white">MIT License</span>
+      </NuxtLink>
+    </template>
+
+    <template #right>
+      <UButton aria-label="Nuxt Website" icon="i-simple-icons-nuxtdotjs" to="https://nuxt.com" target="_blank" color="gray" variant="ghost" />
+      <UButton aria-label="Nuxt UI on Discord" icon="i-simple-icons-discord" to="https://chat.nuxt.dev" target="_blank" color="gray" variant="ghost" />
+      <UButton aria-label="Nuxt on X" icon="i-simple-icons-x" to="https://x.com/nuxt_js" target="_blank" color="gray" variant="ghost" />
+      <UButton aria-label="Nuxt UI on GitHub" icon="i-simple-icons-github" to="https://github.com/nuxt/ui" target="_blank" color="gray" variant="ghost" />
+    </template>
+  </UFooter>
+</template>

docs/app/components/Header.vue

@@ -0,0 +1,68 @@
+<template>
+  <UHeader
+    :links="links"
+    :class="{
+      'border-primary-200/75 dark:border-primary-900/50': $route.path === '/',
+      'border-gray-200 dark:border-gray-800': $route.path !== '/'
+    }"
+  >
+    <template #left>
+      <NuxtLink to="/" class="flex items-end gap-2 font-bold text-xl text-gray-900 dark:text-white" aria-label="Nuxt UI">
+        <Logo class="w-auto h-6" />
+
+        <UBadge v-if="$route.path.startsWith('/pro')" label="Pro" variant="subtle" size="sm" class="-mb-[2px] rounded font-semibold" />
+        <UBadge v-if="$route.path.startsWith('/dev')" label="Edge" variant="subtle" size="sm" class="-mb-[2px] rounded font-semibold" />
+      </NuxtLink>
+    </template>
+
+    <template #right>
+      <!-- <ColorPicker /> -->
+
+      <!-- <UTooltip text="Search" :shortcuts="[metaSymbol, 'K']" :popper="{ strategy: 'absolute' }">
+        <UContentSearchButton :label="null" />
+      </UTooltip> -->
+
+      <!-- <UColorModeButton /> -->
+
+      <UButton
+        color="gray"
+        variant="ghost"
+        to="https://github.com/nuxt/ui"
+        target="_blank"
+        icon="i-simple-icons-github"
+        aria-label="GitHub"
+      />
+    </template>
+
+    <template #panel>
+      <!-- <UAsideLinks :links="links" /> -->
+
+      <!-- <UDivider type="dashed" class="my-4" /> -->
+
+      <!-- <BranchSelect /> -->
+
+      <!-- <UNavigationTree :links="mapContentNavigation(navigation)" :multiple="false" default-open /> -->
+    </template>
+  </UHeader>
+</template>
+
+<script setup lang="ts">
+import type { NavItem } from '@nuxt/content/dist/runtime/types'
+import type { HeaderLink } from '#ui-pro/types'
+
+defineProps<{
+  links: HeaderLink[]
+}>()
+
+const route = useRoute()
+
+const nav = inject<Ref<NavItem[]>>('navigation')
+
+const navigation = computed(() => {
+  if (route.path.startsWith('/pro')) {
+    return nav.value.find(item => item._path === '/pro')?.children
+  }
+
+  return nav.value.filter(item => !item._path.startsWith('/pro'))
+})
+</script>

docs/app/components/Logo.vue

@@ -0,0 +1,11 @@
+<template>
+  <svg width="1020" height="200" viewBox="0 0 1020 200" fill="none" xmlns="http://www.w3.org/2000/svg">
+    <path d="M377 200C379.16 200 381 198.209 381 196V103C381 103 386 112 395 127L434 194C435.785 197.74 439.744 200 443 200H470V50H443C441.202 50 439 51.4941 439 54V148L421 116L385 55C383.248 51.8912 379.479 50 376 50H350V200H377Z" fill="currentColor" />
+    <path d="M726 92H739C742.314 92 745 89.3137 745 86V60H773V92H800V116H773V159C773 169.5 778.057 174 787 174H800V200H783C759.948 200 745 185.071 745 160V116H726V92Z" fill="currentColor" />
+    <path d="M591 92V154C591 168.004 585.742 179.809 578 188C570.258 196.191 559.566 200 545 200C530.434 200 518.742 196.191 511 188C503.389 179.809 498 168.004 498 154V92H514C517.412 92 520.769 92.622 523 95C525.231 97.2459 526 98.5652 526 102V154C526 162.059 526.457 167.037 530 171C533.543 174.831 537.914 176 545 176C552.217 176 555.457 174.831 559 171C562.543 167.037 563 162.059 563 154V102C563 98.5652 563.769 96.378 566 94C567.96 91.9107 570.028 91.9599 573 92C573.411 92.0055 574.586 92 575 92H591Z" fill="currentColor" />
+    <path d="M676 144L710 92H684C680.723 92 677.812 93.1758 676 96L660 120L645 97C643.188 94.1758 639.277 92 636 92H611L645 143L608 200H634C637.25 200 640.182 196.787 642 194L660 167L679 195C680.818 197.787 683.75 200 687 200H713L676 144Z" fill="currentColor" />
+    <path d="M168 200H279C282.542 200 285.932 198.756 289 197C292.068 195.244 295.23 193.041 297 190C298.77 186.959 300.002 183.51 300 179.999C299.998 176.488 298.773 173.04 297 170.001L222 41C220.23 37.96 218.067 35.7552 215 34C211.933 32.2448 207.542 31 204 31C200.458 31 197.067 32.2448 194 34C190.933 35.7552 188.77 37.96 187 41L168 74L130 9.99764C128.228 6.95784 126.068 3.75491 123 2C119.932 0.245087 116.542 0 113 0C109.458 0 106.068 0.245087 103 2C99.9323 3.75491 96.7717 6.95784 95 9.99764L2 170.001C0.226979 173.04 0.00154312 176.488 1.90993e-06 179.999C-0.0015393 183.51 0.229648 186.959 2 190C3.77035 193.04 6.93245 195.244 10 197C13.0675 198.756 16.4578 200 20 200H90C117.737 200 137.925 187.558 152 164L186 105L204 74L259 168H186L168 200ZM89 168H40L113 42L150 105L125.491 147.725C116.144 163.01 105.488 168 89 168Z" fill="var(--color-primary-DEFAULT)" />
+    <path d="M958 60.0001H938C933.524 60.0001 929.926 59.9395 927 63C924.074 65.8905 925 67.5792 925 72V141C925 151.372 923.648 156.899 919 162C914.352 166.931 908.468 169 899 169C889.705 169 882.648 166.931 878 162C873.352 156.899 873 151.372 873 141V72.0001C873 67.5793 872.926 65.8906 870 63.0001C867.074 59.9396 863.476 60.0001 859 60.0001H840V141C840 159.023 845.016 173.458 855 184C865.156 194.542 879.893 200 899 200C918.107 200 932.844 194.542 943 184C953.156 173.458 958 159.023 958 141V60.0001Z" fill="var(--color-primary-DEFAULT)" />
+    <path fill-rule="evenodd" clip-rule="evenodd" d="M1000 60.0233L1020 60V77L1020 128V156.007L1020 181L1020 189.004C1020 192.938 1019.98 194.429 1017 197.001C1014.02 199.725 1009.56 200 1005 200H986.001V181.006L986 130.012V70.0215C986 66.1576 986.016 64.5494 989 62.023C991.819 59.6358 995.437 60.0233 1000 60.0233Z" fill="var(--color-primary-DEFAULT)" />
+  </svg>
+</template>

docs/app/components/LogoOnly.vue

@@ -0,0 +1,5 @@
+<template>
+  <svg width="264" height="264" viewBox="0 0 264 264" fill="none" xmlns="http://www.w3.org/2000/svg">
+    <path d="M146.496 211.2H234.822C237.627 211.2 240.383 210.468 242.813 209.078C245.242 207.688 247.259 205.688 248.662 203.279C250.064 200.871 250.801 198.139 250.8 195.359C250.799 192.579 250.059 189.847 248.655 187.44L189.337 85.612C187.935 83.2043 185.918 81.2049 183.489 79.8147C181.06 78.4246 178.305 77.6927 175.5 77.6927C172.695 77.6927 169.94 78.4246 167.511 79.8147C165.082 81.2049 163.065 83.2043 161.663 85.612L146.496 111.666L116.841 60.7179C115.438 58.3104 113.42 56.3113 110.991 54.9214C108.561 53.5315 105.805 52.7998 103 52.7998C100.195 52.7998 97.4386 53.5315 95.0089 54.9214C92.5793 56.3113 90.5615 58.3104 89.1583 60.7179L15.3453 187.44C13.9411 189.847 13.2012 192.579 13.2 195.359C13.1987 198.139 13.9363 200.871 15.3384 203.279C16.7405 205.688 18.7578 207.688 21.1873 209.078C23.6168 210.468 26.3728 211.2 29.1783 211.2H84.6219C106.589 211.2 122.789 201.636 133.937 182.979L161 136.526L175.496 111.666L219 186.34H161L146.496 211.2ZM83.7181 186.314L45.0255 186.306L103.026 86.7466L131.966 136.526L112.589 169.798C105.186 181.904 96.7763 186.314 83.7181 186.314Z" fill="currentColor" />
+  </svg>
+</template>

docs/app/components/OgImage/OgImageDocs.vue

@@ -0,0 +1,190 @@
+<script lang="ts" setup>
+defineOptions({
+  inheritAttrs: false
+})
+
+defineProps({
+  title: {
+    type: String,
+    required: true
+  },
+  description: {
+    type: String,
+    required: true
+  },
+  headline: {
+    type: String,
+    default: ''
+  }
+})
+</script>
+
+<template>
+  <div class="w-full h-full flex flex-col justify-center bg-slate-900">
+    <svg
+      class="absolute right-0 top-0"
+      width="629"
+      height="593"
+      viewBox="0 0 629 593"
+      fill="none"
+      xmlns="http://www.w3.org/2000/svg"
+    >
+      <g filter="url(#filter0_f_199_94966)">
+        <path d="M628.5 -578L639.334 -94.4223L806.598 -548.281L659.827 -87.387L965.396 -462.344L676.925 -74.0787L1087.69 -329.501L688.776 -55.9396L1160.22 -164.149L694.095 -34.9354L1175.13 15.7948L692.306 -13.3422L1130.8 190.83L683.602 6.50012L1032.04 341.989L668.927 22.4412L889.557 452.891L649.872 32.7537L718.78 511.519L628.5 36.32L538.22 511.519L607.128 32.7537L367.443 452.891L588.073 22.4412L224.955 341.989L573.398 6.50012L126.198 190.83L564.694 -13.3422L81.8734 15.7948L562.905 -34.9354L96.7839 -164.149L568.224 -55.9396L169.314 -329.501L580.075 -74.0787L291.604 -462.344L597.173 -87.387L450.402 -548.281L617.666 -94.4223L628.5 -578Z" fill="#00DC82" />
+      </g>
+      <defs>
+        <filter
+          id="filter0_f_199_94966"
+          x="0.873535"
+          y="-659"
+          width="1255.25"
+          height="1251.52"
+          filterUnits="userSpaceOnUse"
+          color-interpolation-filters="sRGB"
+        >
+          <feFlood flood-opacity="0" result="BackgroundImageFix" />
+          <feBlend mode="normal" in="SourceGraphic" in2="BackgroundImageFix" result="shape" />
+          <feGaussianBlur stdDeviation="40.5" result="effect1_foregroundBlur_199_94966" />
+        </filter>
+      </defs>
+    </svg>
+
+    <div class="w-[700px] pl-[100px]">
+      <p v-if="headline" class="uppercase text-[24px] text-[#00DC82] mb-4 font-semibold">
+        {{ headline }}
+      </p>
+      <h1 class="m-0 text-[75px] font-semibold mb-2 text-white flex items-center">
+        <span>{{ title }}</span>
+      </h1>
+      <p v-if="description" class="text-[32px] text-[#94a3b8] leading-tight">
+        {{ description.slice(0, 200) }}
+      </p>
+    </div>
+
+    <svg
+      class="absolute top-[160px] right-[90px]"
+      width="340"
+      height="340"
+      viewBox="0 0 340 340"
+      fill="none"
+      xmlns="http://www.w3.org/2000/svg"
+    >
+      <path d="M86.6286 103.106C88.2099 94.7477 94.7477 88.2099 103.106 86.6286L104.427 86.3788C146.343 78.4485 189.386 78.5576 231.262 86.7002L232.272 86.8967C239.615 88.3244 245.4 93.99 246.981 101.301L247.277 102.671C256.565 145.63 256.438 190.092 246.903 232.997C245.361 239.939 239.939 245.361 232.997 246.903C190.092 256.438 145.63 256.565 102.671 247.277L101.301 246.981C93.99 245.4 88.3244 239.615 86.8967 232.272L86.7002 231.262C78.5576 189.386 78.4485 146.343 86.3788 104.426L86.6286 103.106Z" fill="url(#paint0_linear_199_94959)" />
+      <path d="M86.6286 103.106C88.2099 94.7477 94.7477 88.2099 103.106 86.6286L104.427 86.3788C146.343 78.4485 189.386 78.5576 231.262 86.7002L232.272 86.8967C239.615 88.3244 245.4 93.99 246.981 101.301L247.277 102.671C256.565 145.63 256.438 190.092 246.903 232.997C245.361 239.939 239.939 245.361 232.997 246.903C190.092 256.438 145.63 256.565 102.671 247.277L101.301 246.981C93.99 245.4 88.3244 239.615 86.8967 232.272L86.7002 231.262C78.5576 189.386 78.4485 146.343 86.3788 104.426L86.6286 103.106Z" fill="url(#paint1_radial_199_94959)" fill-opacity="0.06" />
+      <path d="M103.028 86.2151C94.4994 87.8286 87.8286 94.4994 86.2151 103.028L85.9653 104.348C78.0252 146.318 78.1344 189.414 86.2872 231.342L86.4836 232.353C87.9434 239.86 93.7366 245.776 101.212 247.392L102.582 247.688C145.601 256.989 190.124 256.862 233.089 247.314C240.19 245.736 245.736 240.19 247.314 233.089C256.862 190.124 256.989 145.601 247.688 102.582L247.392 101.212C245.776 93.7366 239.86 87.9434 232.353 86.4836L231.342 86.2872C189.414 78.1344 146.318 78.0252 104.348 85.9653L103.028 86.2151Z" stroke="url(#paint2_linear_199_94959)" stroke-opacity="0.2" stroke-width="0.841584" />
+      <path d="M86.5693 66.0418C76.1888 68.0728 68.0728 76.1888 66.0418 86.5693L65.7807 87.9041C55.4495 140.708 55.5631 195.024 66.1151 247.784L66.3095 248.756C68.1871 258.144 75.4486 265.527 84.8039 267.561L86.1767 267.86C140.001 279.561 195.755 279.425 249.525 267.477C258.483 265.486 265.485 258.489 267.475 249.53C279.429 195.737 279.558 139.989 267.852 86.1413L267.553 84.7671C265.524 75.4341 258.158 68.19 248.793 66.3169L247.784 66.1151C195.024 55.5631 140.708 55.4495 87.904 65.7807L86.5693 66.0418Z" stroke="url(#paint3_linear_199_94959)" stroke-opacity="0.6" stroke-width="1.7" />
+      <path d="M66.1749 44.2983C55.2117 46.6476 46.6475 55.2117 44.2983 66.1749L43.1523 71.5228C29.5422 135.037 29.5422 200.713 43.1523 264.227L44.425 270.166C46.7026 280.795 54.917 289.15 65.5055 291.608C132.857 307.243 203.127 307.189 270.477 291.554C280.924 289.129 289.129 280.924 291.554 270.477C307.189 203.127 307.243 132.857 291.608 65.5055C289.15 54.917 280.795 46.7026 270.166 44.425L264.227 43.1523C200.713 29.5422 135.037 29.5422 71.5228 43.1523L66.1749 44.2983Z" stroke="url(#paint4_linear_199_94959)" stroke-opacity="0.4" stroke-width="1.7" />
+      <path d="M47.0949 24.9846C36.0029 27.3375 27.3375 36.0029 24.9846 47.0949L19.3193 73.8027C5.86738 137.219 5.96967 202.762 19.6195 266.137L25.0028 291.131C27.3518 302.037 35.8106 310.592 46.6894 313.064L67.2583 317.739C134.879 333.107 205.098 332.991 272.667 317.398L291.54 313.043C302.229 310.576 310.576 302.229 313.043 291.54L317.398 272.667C332.991 205.098 333.107 134.879 317.739 67.2583L313.064 46.6894C310.592 35.8106 302.037 27.3518 291.131 25.0028L266.137 19.6195C202.762 5.96966 137.219 5.86738 73.8027 19.3193L47.0949 24.9846Z" stroke="url(#paint5_linear_199_94959)" stroke-opacity="0.2" stroke-width="2.125" />
+      <path d="M174.667 190.325H203.105C204.009 190.325 204.896 190.084 205.678 189.626C206.461 189.168 207.11 188.509 207.561 187.715C208.013 186.921 208.25 186.021 208.25 185.105C208.25 184.188 208.011 183.288 207.559 182.495L188.461 148.938C188.009 148.145 187.36 147.486 186.578 147.028C185.796 146.57 184.909 146.328 184.006 146.328C183.103 146.328 182.215 146.57 181.433 147.028C180.651 147.486 180.002 148.145 179.551 148.938L174.667 157.524L165.119 140.734C164.668 139.941 164.018 139.282 163.236 138.824C162.453 138.366 161.566 138.125 160.663 138.125C159.76 138.125 158.872 138.366 158.09 138.824C157.308 139.282 156.658 139.941 156.206 140.734L132.441 182.495C131.989 183.288 131.75 184.188 131.75 185.105C131.75 186.021 131.987 186.921 132.439 187.715C132.89 188.509 133.539 189.168 134.322 189.626C135.104 190.084 135.991 190.325 136.895 190.325H154.746C161.819 190.325 167.035 187.173 170.624 181.025L179.337 165.717L184.004 157.524L198.011 182.133H179.337L174.667 190.325ZM154.455 182.124L141.997 182.121L160.671 149.312L169.989 165.717L163.75 176.681C161.367 180.671 158.659 182.124 154.455 182.124Z" fill="#00DC82" />
+      <path d="M176.761 189.109H203.105H203.106C203.792 189.109 204.467 188.926 205.064 188.576C205.66 188.227 206.158 187.723 206.504 187.113L207.561 187.715L206.504 187.113C206.851 186.504 207.034 185.811 207.034 185.105C207.033 184.399 206.85 183.707 206.502 183.098L206.502 183.097L187.404 149.54L187.404 149.54C187.057 148.93 186.56 148.427 185.963 148.077C185.367 147.728 184.692 147.545 184.006 147.545C183.32 147.545 182.645 147.728 182.048 148.077C181.452 148.427 180.954 148.93 180.608 149.539C180.608 149.539 180.608 149.54 180.608 149.54L175.725 158.126L174.667 159.985L173.61 158.125L164.062 141.336L176.761 189.109ZM176.761 189.109L180.044 183.349H198.011H200.103L199.069 181.531L185.061 156.922L184.005 155.066L182.947 156.922L178.28 165.115L178.28 165.115L169.57 180.417C166.187 186.208 161.362 189.109 154.746 189.109H136.895H136.894C136.208 189.109 135.533 188.926 134.936 188.576C134.34 188.227 133.842 187.723 133.496 187.113L132.44 187.714L133.496 187.113C133.149 186.504 132.966 185.811 132.966 185.105C132.967 184.399 133.15 183.707 133.498 183.098L133.498 183.097L157.263 141.336C157.263 141.336 157.263 141.336 157.263 141.336C157.61 140.727 158.108 140.223 158.705 139.874C159.301 139.525 159.976 139.341 160.663 139.341C161.349 139.341 162.025 139.525 162.621 139.874L163.236 138.824L162.621 139.874C163.218 140.223 163.715 140.727 164.062 141.336L176.761 189.109ZM154.454 183.34H154.455C156.699 183.34 158.653 182.952 160.391 181.953C162.126 180.957 163.533 179.417 164.794 177.305L164.801 177.294L164.807 177.283L171.046 166.318L171.388 165.717L171.047 165.116L161.729 148.711L160.672 146.851L159.614 148.71L140.94 181.52L139.905 183.337L141.997 183.338L154.454 183.34Z" stroke="url(#paint6_linear_199_94959)" stroke-opacity="0.2" stroke-width="2.43271" />
+      <g filter="url(#filter0_f_199_94959)">
+        <path d="M174.667 190.325H203.105C204.009 190.325 204.896 190.084 205.678 189.626C206.461 189.168 207.11 188.509 207.561 187.715C208.013 186.921 208.25 186.021 208.25 185.105C208.25 184.188 208.011 183.288 207.559 182.495L188.461 148.938C188.009 148.145 187.36 147.486 186.578 147.028C185.796 146.57 184.909 146.328 184.006 146.328C183.103 146.328 182.215 146.57 181.433 147.028C180.651 147.486 180.002 148.145 179.551 148.938L174.667 157.524L165.119 140.734C164.668 139.941 164.018 139.282 163.236 138.824C162.453 138.366 161.566 138.125 160.663 138.125C159.76 138.125 158.872 138.366 158.09 138.824C157.308 139.282 156.658 139.941 156.206 140.734L132.441 182.495C131.989 183.288 131.75 184.188 131.75 185.105C131.75 186.021 131.987 186.921 132.439 187.715C132.89 188.509 133.539 189.168 134.322 189.626C135.104 190.084 135.991 190.325 136.895 190.325H154.746C161.819 190.325 167.035 187.173 170.624 181.025L179.337 165.717L184.004 157.524L198.011 182.133H179.337L174.667 190.325ZM154.455 182.124L141.997 182.121L160.671 149.312L169.989 165.717L163.75 176.681C161.367 180.671 158.659 182.124 154.455 182.124Z" fill="#00DC82" />
+        <path d="M176.761 189.109H203.105H203.106C203.792 189.109 204.467 188.926 205.064 188.576C205.66 188.227 206.158 187.723 206.504 187.113L207.561 187.715L206.504 187.113C206.851 186.504 207.034 185.811 207.034 185.105C207.033 184.399 206.85 183.707 206.502 183.098L206.502 183.097L187.404 149.54L187.404 149.54C187.057 148.93 186.56 148.427 185.963 148.077C185.367 147.728 184.692 147.545 184.006 147.545C183.32 147.545 182.645 147.728 182.048 148.077C181.452 148.427 180.954 148.93 180.608 149.539C180.608 149.539 180.608 149.54 180.608 149.54L175.725 158.126L174.667 159.985L173.61 158.125L164.062 141.336L176.761 189.109ZM176.761 189.109L180.044 183.349H198.011H200.103L199.069 181.531L185.061 156.922L184.005 155.066L182.947 156.922L178.28 165.115L178.28 165.115L169.57 180.417C166.187 186.208 161.362 189.109 154.746 189.109H136.895H136.894C136.208 189.109 135.533 188.926 134.936 188.576C134.34 188.227 133.842 187.723 133.496 187.113L132.44 187.714L133.496 187.113C133.149 186.504 132.966 185.811 132.966 185.105C132.967 184.399 133.15 183.707 133.498 183.098L133.498 183.097L157.263 141.336C157.263 141.336 157.263 141.336 157.263 141.336C157.61 140.727 158.108 140.223 158.705 139.874C159.301 139.525 159.976 139.341 160.663 139.341C161.349 139.341 162.025 139.525 162.621 139.874L163.236 138.824L162.621 139.874C163.218 140.223 163.715 140.727 164.062 141.336L176.761 189.109ZM154.454 183.34H154.455C156.699 183.34 158.653 182.952 160.391 181.953C162.126 180.957 163.533 179.417 164.794 177.305L164.801 177.294L164.807 177.283L171.046 166.318L171.388 165.717L171.047 165.116L161.729 148.711L160.672 146.851L159.614 148.71L140.94 181.52L139.905 183.337L141.997 183.338L154.454 183.34Z" stroke="url(#paint7_linear_199_94959)" stroke-opacity="0.2" stroke-width="2.43271" />
+      </g>
+      <defs>
+        <filter
+          id="filter0_f_199_94959"
+          x="124.176"
+          y="130.551"
+          width="91.6485"
+          height="67.3485"
+          filterUnits="userSpaceOnUse"
+          color-interpolation-filters="sRGB"
+        >
+          <feFlood flood-opacity="0" result="BackgroundImageFix" />
+          <feBlend mode="normal" in="SourceGraphic" in2="BackgroundImageFix" result="shape" />
+          <feGaussianBlur stdDeviation="3.78713" result="effect1_foregroundBlur_199_94959" />
+        </filter>
+        <linearGradient
+          id="paint0_linear_199_94959"
+          x1="167.875"
+          y1="74.375"
+          x2="88"
+          y2="261"
+          gradientUnits="userSpaceOnUse"
+        >
+          <stop stop-color="#0F172A" />
+          <stop offset="1" stop-color="#0F172A" stop-opacity="0" />
+        </linearGradient>
+        <radialGradient
+          id="paint1_radial_199_94959"
+          cx="0"
+          cy="0"
+          r="1"
+          gradientUnits="userSpaceOnUse"
+          gradientTransform="translate(167.875 167.875) rotate(-90) scale(100.596 107.502)"
+        >
+          <stop stop-color="white" />
+          <stop offset="1" stop-opacity="0" />
+        </radialGradient>
+        <linearGradient
+          id="paint2_linear_199_94959"
+          x1="247.183"
+          y1="96.4978"
+          x2="194.172"
+          y2="229.234"
+          gradientUnits="userSpaceOnUse"
+        >
+          <stop stop-color="white" />
+          <stop offset="1" stop-opacity="0" />
+        </linearGradient>
+        <linearGradient
+          id="paint3_linear_199_94959"
+          x1="267.01"
+          y1="78.6537"
+          x2="200.746"
+          y2="244.574"
+          gradientUnits="userSpaceOnUse"
+        >
+          <stop stop-color="#00DC82" />
+          <stop offset="1" stop-opacity="0" />
+          <stop offset="1" stop-opacity="0" />
+        </linearGradient>
+        <linearGradient
+          id="paint4_linear_199_94959"
+          x1="292.405"
+          y1="57.8159"
+          x2="209.877"
+          y2="264.463"
+          gradientUnits="userSpaceOnUse"
+        >
+          <stop stop-color="#00DC82" />
+          <stop offset="1" stop-opacity="0" />
+        </linearGradient>
+        <linearGradient
+          id="paint5_linear_199_94959"
+          x1="314.196"
+          y1="40.2232"
+          x2="217.813"
+          y2="281.562"
+          gradientUnits="userSpaceOnUse"
+        >
+          <stop stop-color="#00DC82" />
+          <stop offset="1" stop-opacity="0" />
+        </linearGradient>
+        <linearGradient
+          id="paint6_linear_199_94959"
+          x1="202.444"
+          y1="144.3"
+          x2="191.546"
+          y2="184.293"
+          gradientUnits="userSpaceOnUse"
+        >
+          <stop stop-color="white" />
+          <stop offset="1" stop-opacity="0" />
+        </linearGradient>
+        <linearGradient
+          id="paint7_linear_199_94959"
+          x1="202.444"
+          y1="144.3"
+          x2="191.546"
+          y2="184.293"
+          gradientUnits="userSpaceOnUse"
+        >
+          <stop stop-color="white" />
+          <stop offset="1" stop-opacity="0" />
+        </linearGradient>
+      </defs>
+    </svg>
+  </div>
+</template>

docs/app/components/ads/AdsCarbon.vue

@@ -0,0 +1,45 @@
+<template>
+  <div ref="carbonads" class="carbon" />
+</template>
+
+<script setup lang="ts">
+const carbonads = ref(null)
+
+onMounted(() => {
+  if (carbonads.value) {
+    const script = document.createElement('script')
+    script.setAttribute('type', 'text/javascript')
+    script.setAttribute('src', 'https://cdn.carbonads.com/carbon.js?serve=CWYIVK3E&placement=uinuxtcom')
+    script.setAttribute('id', '_carbonads_js')
+    carbonads.value.appendChild(script)
+  }
+})
+</script>
+
+<style lang="postcss">
+.carbon > #carbonads {
+  @apply relative border border-gray-200 dark:border-gray-800 rounded-lg bg-white dark:bg-gray-800/50 hover:border-gray-300 dark:hover:border-gray-700 w-full transition-colors min-h-[220px];
+
+  &:hover {
+    .carbon-text {
+      @apply text-gray-700 dark:text-gray-200;
+    }
+  }
+
+  .carbon-img {
+    @apply flex justify-center p-2 w-full;
+
+    & > img {
+      @apply !max-w-full w-full rounded;
+    }
+  }
+
+  .carbon-text {
+    @apply flex px-2 text-sm text-gray-500 dark:text-gray-400 transition-colors text-center w-full;
+  }
+
+  .carbon-poweredby {
+    @apply block text-xs text-center text-gray-400 dark:text-gray-500 hover:text-gray-500 dark:hover:text-gray-400 pt-1 pb-2 px-2 transition-colors;
+  }
+}
+</style>

docs/app/components/ads/AdsPro.vue

@@ -0,0 +1,27 @@
+<template>
+  <div class="relative group/ad border border-gray-200 dark:border-gray-800 rounded-lg bg-white dark:bg-gray-800/50 hover:border-gray-300 dark:hover:border-gray-700 p-2 w-full transition-colors">
+    <NuxtLink to="/pro" class="focus:outline-none" tabindex="-1">
+      <span class="absolute inset-0" aria-hidden="true" />
+    </NuxtLink>
+
+    <UColorModeImage
+      light="/illustrations/pro-light.svg"
+      dark="/illustrations/pro-dark.svg"
+      alt="Nuxt UI Pro"
+      loading="lazy"
+      class="w-full"
+    />
+
+    <div class="flex flex-col items-center mt-2 text-center">
+      <div class="inline-flex gap-1.5">
+        <Logo class="h-4 w-auto" />
+
+        <UBadge variant="subtle" size="xs" label="Pro" class="font-semibold rounded" />
+      </div>
+
+      <p class="text-sm text-gray-500 dark:text-gray-400 group-hover/ad:text-gray-700 dark:group-hover/ad:text-gray-200 mt-1 transition-colors">
+        The Building Blocks for Modern Web Apps.
+      </p>
+    </div>
+  </div>
+</template>

docs/app/components/content/Placeholder.vue

@@ -0,0 +1,21 @@
+<template>
+  <div class="relative overflow-hidden rounded border border-dashed border-gray-400 dark:border-gray-500 opacity-75 px-4 flex items-center justify-center">
+    <svg class="absolute inset-0 h-full w-full stroke-gray-900/10 dark:stroke-white/10" fill="none">
+      <defs>
+        <pattern
+          id="pattern-5c1e4f0e-62d5-498b-8ff0-cf77bb448c8e"
+          x="0"
+          y="0"
+          width="10"
+          height="10"
+          patternUnits="userSpaceOnUse"
+        >
+          <path d="M-3 13 15-5M-5 5l18-18M-1 21 17 3" />
+        </pattern>
+      </defs>
+      <rect stroke="none" fill="url(#pattern-5c1e4f0e-62d5-498b-8ff0-cf77bb448c8e)" width="100%" height="100%" />
+    </svg>
+
+    <slot />
+  </div>
+</template>

docs/app/components/home/HomeDemo.vue

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

docs/app/components/home/HomeProDemo.vue

@@ -0,0 +1,31 @@
+<template>
+  <div class="rounded-xl border border-gray-800/10 dark:border-gray-200/10 bg-gray-200/20 dark:bg-gray-700/20 p-4 flex-1 w-full">
+    <div class="relative h-full">
+      <TransitionGroup name="fade">
+        <HomeProDemoBlock v-for="(block, index) in blocks" :key="index" :block="block">
+          <template v-for="(_, name) in $slots" #[name]="slotData">
+            <slot :name="name" v-bind="slotData" />
+          </template>
+        </HomeProDemoBlock>
+      </TransitionGroup>
+    </div>
+  </div>
+</template>
+
+<script setup lang="ts">
+import type { HomeProBlock } from '~/types'
+
+defineProps<{ blocks: HomeProBlock[] }>()
+</script>
+
+<style scoped lang="postcss">
+.fade-enter-active,
+.fade-leave-active {
+  transition: opacity 0.5s ease;
+}
+
+.fade-enter-from,
+.fade-leave-to {
+  opacity: 0;
+}
+</style>

docs/app/components/home/HomeProDemoBlock.vue

@@ -0,0 +1,59 @@
+<template>
+  <div
+    :id="block.id"
+    :class="twMerge(
+      'absolute rounded-lg flex items-center justify-center',
+      block.class,
+      !block.slot && (block.inactive || block.inactive === undefined ? 'border border-gray-800/10 dark:border-gray-200/10 bg-gray-200/20 dark:bg-gray-700/20 transition-[background,text] duration-500' : 'bg-primary transition-[background,text] duration-500'),
+      block.name?.startsWith('#') && 'border-dashed'
+    )"
+    :style="block.style"
+  >
+    <NuxtLink v-if="block.to && !block.inactive" :to="block.to" class="focus:outline-none" tabindex="-1">
+      <span class="absolute inset-0" aria-hidden="true" />
+    </NuxtLink>
+
+    <template v-if="block.inactive">
+      <TransitionGroup name="fade">
+        <HomeProDemoBlock v-for="(subComponent, subIndex) in block.children" :key="subIndex" :block="subComponent">
+          <template v-for="(_, name) in $slots" #[name]="slotData: any">
+            <slot :name="name" v-bind="slotData" />
+          </template>
+        </HomeProDemoBlock>
+      </TransitionGroup>
+    </template>
+    <template v-else-if="block.slot">
+      <slot :name="block.slot" />
+    </template>
+    <p
+      v-else
+      class="font-semibold flex flex-col gap-1 text-center"
+      :class="[
+        !block.slot && (block.inactive || block.inactive === undefined ? 'text-gray-900 dark:text-white' : 'text-white dark:text-gray-900'),
+      ]"
+    >
+      {{ block.name }}
+
+      <span v-if="block.description" class="font-normal">{{ block.description }}</span>
+    </p>
+  </div>
+</template>
+
+<script setup lang="ts">
+import { twMerge } from 'tailwind-merge'
+import type { HomeProBlock } from '~/types'
+
+defineProps<{ block: HomeProBlock }>()
+</script>
+
+<style scoped lang="postcss">
+.fade-enter-active,
+.fade-leave-active {
+  transition: opacity 0.5s ease;
+}
+
+.fade-enter-from,
+.fade-leave-to {
+  opacity: 0;
+}
+</style>

docs/app/components/home/HomeTetris.vue

@@ -0,0 +1,108 @@
+<template>
+  <Transition appear name="fade">
+    <div
+      :style="{
+        '--cell': `${width / cols}px`,
+        '--rows': rows - 1
+      }"
+    >
+      <div
+        ref="el"
+        class="absolute inset-0 grid justify-center auto-rows-[--cell] -space-y-px"
+      >
+        <div v-for="(row, rowIndex) in grid" :key="rowIndex" class="grid grid-flow-col auto-cols-[--cell] flex-1 -space-x-px">
+          <div
+            v-for="(cell, cellIndex) in row"
+            :key="cellIndex"
+            class="relative border border-primary-200/50 dark:border-primary-900/25"
+          >
+            <div class="absolute inset-0 bg-primary-500/10 hover:bg-primary-500/20 dark:bg-primary-400/5 dark:hover:bg-primary-400/10 opacity-0 transition-opacity will-change-[opacity] duration-1000" :class="[cell && 'opacity-100 cursor-pointer']" @click="cell && removeCell(rowIndex, cellIndex)" />
+          </div>
+        </div>
+
+        <div class="absolute top-[calc((var(--cell)*var(--rows))+1px)] inset-x-0 h-[calc(var(--cell)*2)] bg-gradient-to-t from-white dark:from-gray-900 pointer-events-none" />
+      </div>
+    </div>
+  </Transition>
+</template>
+
+<script setup lang="ts">
+import { useElementSize } from '@vueuse/core'
+
+const el = ref(null)
+const grid = ref([])
+const rows = ref(0)
+const cols = ref(0)
+
+const { width, height } = useElementSize(el)
+
+function createGrid () {
+  grid.value = []
+
+  for (let i = 0; i <= rows.value; i++) {
+    grid.value.push(new Array(cols.value).fill(null))
+  }
+}
+
+function createNewCell () {
+  const x = Math.floor(Math.random() * cols.value)
+
+  grid.value[0][x] = true
+}
+
+function moveCellsDown () {
+  for (let row = rows.value - 1; row >= 0; row--) {
+    for (let col = 0; col < cols.value; col++) {
+      if (grid.value[row][col] !== null && grid.value[row + 1][col] === null) {
+        grid.value[row + 1][col] = grid.value[row][col]
+        grid.value[row][col] = null
+      }
+    }
+  }
+
+  setTimeout(() => {
+    if (grid.value[rows.value].every(cell => cell !== null)) {
+      for (let col = 0; col < cols.value; col++) {
+        grid.value[rows.value][col] = null
+      }
+    }
+  }, 500)
+}
+
+function removeCell (row, col) {
+  grid.value[row][col] = null
+}
+
+function calcGrid () {
+  const base = Math.ceil(width.value / 60)
+  const cell = width.value / base
+
+  rows.value = Math.ceil(height.value / cell)
+  cols.value = width.value / cell
+
+  createGrid()
+}
+
+watch(width, calcGrid)
+
+onMounted(() => {
+  setTimeout(calcGrid, 50)
+
+  setInterval(() => {
+    moveCellsDown()
+    createNewCell()
+  }, 1000)
+})
+</script>
+
+<style scoped>
+.fade-enter-active,
+.fade-leave-active {
+  transition: opacity 0.5s ease;
+}
+
+.fade-enter-from,
+.fade-leave-to {
+  opacity: 0;
+}
+</style>

docs/app/components/releases/ReleasesItem.vue

@@ -0,0 +1,54 @@
+<script setup lang="ts">
+import { useIntersectionObserver } from '@vueuse/core'
+
+defineProps<{
+  date: {
+    day: Date
+    release?: {
+      name: string
+    }
+    pulls?: {
+      id: number
+      number: number
+      title: string
+      html_url: string
+      user: {
+        login: string
+      }
+    }[]
+  }
+}>()
+
+const target = ref(null)
+const targetIsVisible = ref(false)
+
+useIntersectionObserver(target, ([{ isIntersecting }]) => {
+  targetIsVisible.value = isIntersecting
+}, {
+  rootMargin: '-68px 0px -68px 0px'
+})
+</script>
+
+<template>
+  <div ref="target" class="flex flex-col transition-opacity duration-500" :class="targetIsVisible ? 'opacity-100' : 'opacity-25'">
+    <time :datetime="date.day.toISOString()" class="flex-shrink-0 text-sm/6 font-semibold text-gray-500 dark:text-gray-400">{{ date.day.toLocaleString('en-us', { year: 'numeric', month: 'short', day: 'numeric' })
+    }}</time>
+
+    <NuxtLink v-if="date.release" :to="`https://github.com/nuxt/ui/releases/tag/${date.release.name}`" target="_blank" class="text-gray-900 dark:text-white font-bold text-3xl mt-2 group hover:text-primary-500 dark:hover:text-primary-400 transition-[color]">
+      {{ date.release.name }}
+    </NuxtLink>
+    <ul v-if="date.pulls?.length" class="mt-2 space-y-1 text-gray-600 dark:text-gray-300">
+      <li v-for="pull in date.pulls" :key="pull.id" class="text-sm/6 break-all">
+        <NuxtLink :to="`https://github.com/${pull.user.login}`" target="_blank" class="text-gray-900 dark:text-white transition-colors inline-flex items-center gap-1 rounded-full bg-gray-100/50 dark:bg-gray-800/50 dark:hover:bg-gray-800 p-0.5 pr-1 ring-1 ring-gray-300 dark:ring-gray-700 text-xs font-medium flex-shrink-0 align-middle">
+          <UAvatar :src="`https://github.com/${pull.user.login}.png`" size="3xs" />
+
+          {{ pull.user.login }}
+        </NuxtLink>
+
+        pushed <NuxtLink :to="pull.html_url" target="_blank" class="font-medium text-gray-700 dark:text-gray-200 hover:text-primary-500 dark:hover:text-primary-400 transition-[color]">
+          #{{ pull.number }} {{ pull.title }}
+        </NuxtLink>
+      </li>
+    </ul>
+  </div>
+</template>

docs/app/composables/useComponentMeta.ts

@@ -0,0 +1,28 @@
+const useComponentsMetaState = () => useState('components-meta', () => ({}))
+
+export async function fetchComponentMeta (name: string) {
+  const state = useComponentsMetaState()
+
+  if (state.value[name]?.then) {
+    await state.value[name]
+    return state.value[name]
+  }
+  if (state.value[name]) { return state.value[name] }
+
+  // Store promise to avoid multiple calls
+
+  // add to nitro prerender
+  if (import.meta.server) {
+    const event = useRequestEvent()
+    event.node.res.setHeader(
+      'x-nitro-prerender',
+      [event.node.res.getHeader('x-nitro-prerender'), `/api/component-meta/${name}.json`].filter(Boolean).join(',')
+    )
+  }
+  state.value[name] = $fetch(`/api/component-meta/${name}.json`).then((meta) => {
+    state.value[name] = meta
+  })
+
+  await state.value[name]
+  return state.value[name]
+}

docs/app/composables/useContentExamplesCode.ts

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

docs/app/composables/useShikiHighlighter.ts

@@ -0,0 +1,31 @@
+import { createShikiHighlighter } from '@nuxtjs/mdc/runtime/highlighter/shiki'
+import MaterialTheme from 'shiki/themes/material-theme.mjs'
+import MaterialThemeLighter from 'shiki/themes/material-theme-lighter.mjs'
+import MaterialThemePalenight from 'shiki/themes/material-theme-palenight.mjs'
+import HtmlLang from 'shiki/langs/html.mjs'
+import MdcLang from 'shiki/langs/mdc.mjs'
+import VueLang from 'shiki/langs/vue.mjs'
+import YamlLang from 'shiki/langs/yaml.mjs'
+import PostcssLang from 'shiki/langs/postcss.mjs'
+
+let highlighter
+export const useShikiHighlighter = () => {
+  if (!highlighter) {
+    highlighter = createShikiHighlighter({
+      bundledThemes: {
+        'material-theme': MaterialTheme,
+        'material-theme-lighter': MaterialThemeLighter,
+        'material-theme-palenight': MaterialThemePalenight
+      },
+      bundledLangs: {
+        html: HtmlLang,
+        mdc: MdcLang,
+        vue: VueLang,
+        yml: YamlLang,
+        postcss: PostcssLang
+      }
+    })
+  }
+
+  return highlighter
+}

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

@@ -0,0 +1,29 @@
+---
+title: Introduction
+description: 'Fully styled and customizable components for Nuxt.'
+---
+
+Nuxt UI is a module that provides a set of Vue components and composables built with [Tailwind CSS](https://tailwindcss.com/) and [Headless UI](https://headlessui.dev/) to help you build beautiful and accessible user interfaces.
+
+Its goal is to provide everything related to UI when building a Nuxt app. This includes components, icons, colors, dark mode as well as keyboard shortcuts.
+
+## Features
+
+- 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
+- [Figma Kit](https://www.figma.com/community/file/1288455405058138934)
+
+## Credits
+
+- [nuxt/nuxt](https://github.com/nuxt/nuxt)
+- [nuxt-modules/color-mode](https://github.com/nuxt-modules/color-mode)
+- [nuxt-modules/tailwindcss](https://github.com/nuxt-modules/tailwindcss)
+- [tailwindlabs/tailwindcss](https://github.com/tailwindlabs/tailwindcss)
+- [tailwindlabs/headlessui](https://github.com/tailwindlabs/headlessui)
+- [vueuse/vueuse](https://github.com/vueuse/vueuse)
+- [egoist/tailwindcss-icons](https://github.com/egoist/tailwindcss-icons)

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

@@ -0,0 +1,266 @@
+---
+title: Installation
+description: 'Learn how to install and configure Nuxt UI in your application.'
+---
+
+## Setup
+
+1. Install `@nuxt/ui` dependency to your project:
+
+::code-group
+
+```bash [pnpm]
+pnpm add @nuxt/ui
+```
+
+```bash [yarn]
+yarn add @nuxt/ui
+```
+
+```bash [npm]
+npm install @nuxt/ui
+```
+
+```bash [bun]
+bun add @nuxt/ui
+```
+
+::
+
+2. Add it to your `modules` section in your `nuxt.config`:
+
+```ts [nuxt.config.ts]
+export default defineNuxtConfig({
+  modules: ['@nuxt/ui']
+})
+```
+
+That's it! You can now use all the components and composables in your Nuxt app ✨
+
+## Modules
+
+Nuxt UI will automatically install the [@nuxtjs/tailwindcss](https://tailwindcss.nuxtjs.org/), [@nuxtjs/color-mode](https://color-mode.nuxtjs.org/) and [nuxt-icon](https://github.com/nuxt-modules/icon) modules for you.
+
+::callout{icon="i-heroicons-exclamation-triangle"}
+You should remove them from your `modules` and `dependencies` if you've previously installed them.
+::
+
+### `@nuxtjs/tailwindcss`
+
+This module is pre-configured and will automatically load the following plugins:
+
+- [@tailwindcss/forms](https://github.com/tailwindlabs/tailwindcss-forms)
+- [@tailwindcss/typography](https://github.com/tailwindlabs/tailwindcss-typography)
+- [@tailwindcss/aspect-ratio](https://github.com/tailwindlabs/tailwindcss-aspect-ratio)
+- [@tailwindcss/container-queries](https://github.com/tailwindlabs/tailwindcss-container-queries)
+- [@headlessui/tailwindcss](https://github.com/tailwindlabs/headlessui/tree/main/packages/%40headlessui-vue)
+
+Note that the `@tailwindcss/aspect-ratio` plugin disables the default aspect ratio utilities:
+
+- `aspect-auto`
+- `aspect-square`
+- `aspect-video`
+
+You can re-enable them by adding the following to your `tailwind.config.ts`:
+
+```ts [tailwind.config.ts]
+import type { Config } from 'tailwindcss'
+
+export default <Partial<Config>>{
+  theme: {
+    extend: {
+      aspectRatio: {
+        auto: 'auto',
+        square: '1 / 1',
+        video: '16 / 9'
+      }
+    }
+  }
+}
+```
+
+### `@nuxtjs/color-mode`
+
+This module is installed to provide dark mode support out of the box thanks to the Tailwind CSS dark mode `class` strategy.
+
+::callout{icon="i-heroicons-light-bulb"}
+You can read more about this in the [Theming](/getting-started/theming#dark-mode) section.
+::
+
+### `nuxt-icon`
+
+This module is installed when using the `dynamic` prop on the `Icon` component or globally through the `ui.icons.dynamic` option in your `app.config.ts`.
+
+::callout{icon="i-heroicons-light-bulb"}
+You can read more about this in the [Theming](/getting-started/theming#dynamic-icons) section and on the [Icon](/components/icon) component page.
+::
+
+## TypeScript
+
+This module is written in TypeScript and provides typings for all the components and composables. You can look at the [source code](https://github.com/nuxt/ui/tree/dev/src/runtime/types) to see all the available types.
+
+::callout{icon="i-heroicons-light-bulb" to="https://nuxt.com/docs/guide/concepts/typescript" target="_blank"}
+You can read more about TypeScript on the official Nuxt documentation.
+::
+
+You can use those types in your own components by importing them from `#ui/types`, for example when defining wrapper components:
+
+```vue
+<template>
+  <UBreadcrumb :links="links">
+    <template #icon="{ link }">
+      <UIcon :name="link.icon" />
+    </template>
+  </UBreadcrumb>
+</template>
+
+<script setup lang="ts">
+import type { BreadcrumbLink } from '#ui/types'
+
+export interface Props {
+  links: BreadcrumbLink[]
+}
+
+defineProps<Props>()
+</script>
+```
+
+You don't have to use TypeScript yourself, but doing so will give you access to prop validation and autocomplete.
+
+We've managed to provide dynamic typings on props such as `color`, `size`, `variant`, etc. based on your custom config. For example, you'll be suggested the `custom` color and the `subtle` variant when using the `Button` component with an `app.config.ts` as such:
+
+```ts [app.config.ts]
+export default defineAppConfig({
+  ui: {
+    button: {
+      color: {
+        custom: {
+          subtle: '...'
+        }
+      }
+    }
+  }
+})
+```
+
+::callout{icon="i-heroicons-light-bulb"}
+You can read more about components configuration in the [Theming](/getting-started/theming#appconfigts) section.
+::
+
+## IntelliSense
+
+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"
+}
+```
+
+Note, the extension won't work when writing classes in your `app.config.ts` by default.
+
+Also, you might want IntelliSense on objects in your SFC by prefixing with `/*ui*/`.
+
+To enable these two features, you can add the following to your `.vscode/settings.json`:
+
+```json [.vscode/settings.json]
+{
+  "tailwindCSS.experimental.classRegex": [
+    ["ui:\\s*{([^)]*)\\s*}", "[\"'`]([^\"'`]*).*?[\"'`]"],
+    ["/\\*\\s?ui\\s?\\*/\\s*{([^;]*)}", ":\\s*[\"'`]([^\"'`]*).*?[\"'`]"]
+  ]
+}
+```
+
+An example SFC using IntelliSense (note the `/*ui*/` prefix, also works with `ref()`):
+
+```vue [example.vue]
+<template>
+  <UCard :ui="ui" />
+</template>
+
+<script setup lang="ts">
+const ui = /* ui */ {
+  background: 'bg-white dark:bg-slate-900'
+}
+</script>
+```
+
+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
+
+| Key                   | Default         | Description                                                                                                 |
+|-----------------------|-----------------|-------------------------------------------------------------------------------------------------------------|
+| `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 to need be purged.                                                              |
+| `disableGlobalStyles` | `false`         | Disable [global CSS styles](https://github.com/nuxt/ui/blob/dev/src/runtime/ui.css) injected by the module. |
+
+Configure options in your `nuxt.config.ts` as such:
+
+```ts [nuxt.config.ts]
+export default defineNuxtConfig({
+  modules: ['@nuxt/ui'],
+  ui: {
+    global: true,
+    icons: ['mdi', 'simple-icons']
+  }
+})
+```
+
+## Edge
+
+To use the latest updates pushed on the [`dev`](https://github.com/nuxt/ui/tree/dev) branch, you can use `@nuxt/ui-edge`.
+
+Update your `package.json` to the following:
+
+```diff [package.json]
+{
+  "devDependencies": {
+-   "@nuxt/ui": "^2.11.0"
++   "@nuxt/ui": "npm:@nuxt/ui-edge@latest"
+  }
+}
+```
+
+Then run `pnpm install`, `yarn install` or `npm install`.

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

@@ -0,0 +1,470 @@
+---
+description: 'Learn how to customize the look and feel of the components.'
+---
+
+This module relies on Nuxt [App Config](https://nuxt.com/docs/guide/directory-structure/app-config#app-config-file) file to customize the look and feel of the components at runtime with HMR (hot-module-replacement).
+
+## Colors
+
+### Configuration
+
+Components are based on a `primary` and a `gray` color. You can change them in your `app.config.ts`.
+
+```ts [app.config.ts]
+export default defineAppConfig({
+  ui: {
+    primary: 'green',
+    gray: 'cool'
+  }
+})
+```
+
+::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`.
+
+When [using custom colors](https://tailwindcss.com/docs/customizing-colors#using-custom-colors) or [adding additional colors](https://tailwindcss.com/docs/customizing-colors#adding-additional-colors) through the `extend` key in your `tailwind.config.ts`, you'll need to make sure to define all the shades from `50` to `950` as most of them are used in the components config defined in [`ui.config/`](https://github.com/nuxt/ui/tree/dev/src/runtime/ui.config) directory. You can [generate your colors](https://tailwindcss.com/docs/customizing-colors#generating-colors) using tools such as https://uicolors.app/ for example.
+
+```ts [tailwind.config.ts]
+import type { Config } from 'tailwindcss'
+import defaultTheme from 'tailwindcss/defaultTheme'
+
+export default <Partial<Config>>{
+  theme: {
+    extend: {
+      colors: {
+        green: {
+          50: '#EFFDF5',
+          100: '#D9FBE8',
+          200: '#B3F5D1',
+          300: '#75EDAE',
+          400: '#00DC82',
+          500: '#00C16A',
+          600: '#00A155',
+          700: '#007F45',
+          800: '#016538',
+          900: '#0A5331',
+          950: '#052e16'
+        }
+      }
+    }
+  }
+}
+```
+
+### CSS Variables
+
+To provide dynamic colors that can be changed at runtime, this module uses CSS variables. As Tailwind CSS already has a `gray` color, the module automatically renames it to `cool` to avoid conflicts (`coolGray` was renamed to `gray` when Tailwind CSS v3.0 was released).
+
+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.
+
+::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`.
+::
+
+The `primary` color also has a `DEFAULT` shade that changes based on the theme. It is `500` in light mode and `400` in dark mode. You can use as a shortcut in your components and pages, e.g. `text-primary`, `bg-primary`, `focus-visible:ring-primary`, etc.
+
+### Smart Safelisting
+
+Components having a `color` prop like [Avatar](/components/avatar#chip), [Badge](/components/badge#style), [Button](/components/button#style), [Input](/components/input#style) (inherited in [Select](/components/select) and [SelectMenu](/components/select-menu)), [RadioGroup](/components/radio-group), [Checkbox](/components/checkbox), [Toggle](/components/toggle), [Range](/components/range) and [Notification](/components/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.
+
+The module uses the [Tailwind CSS safelist](https://tailwindcss.com/docs/content-configuration#safelisting-classes) feature to force the generation of all the classes for the `primary` color **only** as it is the default color for all the components.
+
+Then, the module will automatically detect when you use one of those components with a color and will safelist it for you. This means that if you use a `red` color for a Button component, the `red` color classes will be safelisted for the Button component only. This will allow to keep the CSS bundle size as small as possible.
+
+There is one case where you would want to force the safelisting of a color. For example, if you've set the default color of the Button component to `orange` in your `app.config.ts`.
+
+```ts [app.config.ts]
+export default defineAppConfig({
+  ui: {
+    button: {
+      default: {
+        color: 'orange'
+      }
+    }
+  }
+})
+```
+
+This will apply the orange color when using a default `<UButton />`. You'll need to safelist this color manually in your `nuxt.config.ts` ui options as we won't be able to detect it automatically. You can do so through the `safelistColors` option which defaults to `['primary']`.
+
+```ts [nuxt.config.ts]
+export default defineNuxtConfig({
+  ui: {
+    safelistColors: ['orange']
+  }
+})
+```
+
+This can also happen when you bind a dynamic color to a component: `<UBadge :color="color" />`, `<UAvatar :chip-color="statuses[user.status]" />`, etc. In this case, you'll need to safelist the possible color values manually as well.
+
+## Components
+
+### `app.config.ts`
+
+You can find the config of each component in the [`ui.config/`](https://github.com/nuxt/ui/tree/dev/src/runtime/ui.config) directory. You can override those classes in your own `app.config.ts`.
+
+```ts [app.config.ts]
+export default defineAppConfig({
+  ui: {
+    container: {
+      constrained: 'max-w-5xl'
+    }
+  }
+})
+```
+
+Thanks to [tailwind-merge](https://github.com/dcastil/tailwind-merge), the `app.config.ts` is smartly merged with the default config. This means you don't have to rewrite everything.
+
+You can change this behavior by setting `strategy` to `override` in your `app.config.ts`:
+
+```ts [app.config.ts]
+export default defineAppConfig({
+  ui: {
+    strategy: 'override',
+    button: {
+      color: {
+        white: {
+          solid: 'bg-white dark:bg-gray-900'
+        }
+      }
+    }
+  }
+})
+```
+
+### `ui` prop
+
+Each component has a `ui` prop that allows you to customize everything specifically.
+
+```vue
+<template>
+  <UContainer :ui="{ constrained: 'max-w-2xl' }">
+    <slot />
+  </UContainer>
+</template>
+```
+
+::callout{icon="i-heroicons-light-bulb"}
+You can find the default classes for each component under the `Config` section.
+::
+
+Thanks to [tailwind-merge](https://github.com/dcastil/tailwind-merge), the `ui` prop is smartly merged with the config. This means you don't have to rewrite everything.
+
+For example, the default preset of the `FormGroup` component looks like this:
+
+```json
+{
+  "label": {
+    "base": "block font-medium text-gray-700 dark:text-gray-200"
+  }
+}
+```
+
+To change the font of the `label`, you only need to write:
+
+```vue
+<UFormGroup name="email" label="Email" :ui="{ label: { base: 'font-semibold' } }" />
+```
+
+This will smartly replace the `font-medium` by `font-semibold` and prevent any class duplication and any class priority issue.
+
+You can change this behavior by setting `strategy` to `override` inside the `ui` prop:
+
+```vue
+<UButton
+  to="https://github.com/nuxt/ui"
+  :ui="{
+    strategy: 'override',
+    color: {
+      white: {
+        solid: 'bg-white dark:bg-gray-900'
+      }
+    }
+  }"
+/>
+```
+
+### `class` attribute
+
+You can also use the `class` attribute to add classes to the component.
+
+```vue
+<template>
+  <UButton label="Button" class="rounded-full" />
+</template>
+```
+
+Again, with [tailwind-merge](https://github.com/dcastil/tailwind-merge), this will smartly merge the classes with the `ui` prop and the config.
+
+### Default values
+
+Some component props like `size`, `color`, `variant`, etc. have a default value that you can override in your `app.config.ts`.
+
+```ts [app.config.ts]
+export default defineAppConfig({
+  ui: {
+    button: {
+      default: {
+        size: 'md',
+        color: 'gray',
+        variant: 'ghost'
+      }
+    }
+  }
+})
+```
+
+## Dark mode
+
+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.
+
+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.
+::
+
+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
+<script setup lang="ts">
+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>
+```
+::
+
+## Icons
+
+You can use any icon (100,000+) from [Iconify](https://iconify.design/).
+
+Some components have an `icon` prop that allows you to add an icon to the component.
+
+```vue
+<template>
+  <UButton icon="i-heroicons-magnifying-glass" />
+</template>
+```
+
+You can also use the [Icon](/components/icon) component to add an icon anywhere in your app by following this pattern: `i-{collection_name}-{icon_name}`.
+
+```vue
+<template>
+  <UIcon name="i-heroicons-moon" />
+</template>
+```
+
+### Collections
+
+By default, the module uses [Heroicons](https://heroicons.com/) but you can change it from the module options in your `nuxt.config.ts`.
+
+```ts [nuxt.config.ts]
+export default defineNuxtConfig({
+  ui: {
+    icons: ['mdi', 'simple-icons']
+  }
+})
+```
+
+::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).
+::
+
+Thanks to [@egoist/tailwindcss-icons](https://github.com/egoist/tailwindcss-icons) plugin, only the icons you use in your app will be bundled in your CSS. However, you need to install the icon collections you specified in the `ui.icons` key:
+
+::code-group
+
+```bash [pnpm]
+pnpm i @iconify-json/{collection_name}
+```
+
+```bash [yarn]
+yarn add @iconify-json/{collection_name}
+```
+
+```bash [npm]
+npm install @iconify-json/{collection_name}
+```
+
+::
+
+If you choose to use the full `@iconify/json` icon collection (50MB), you can specifiy `icons: 'all'` or `icons: {}` in your `nuxt.config.ts` to use any icon in your app.
+
+```ts [nuxt.config.ts]
+export default defineNuxtConfig({
+  ui: {
+    icons: {}
+  }
+})
+```
+
+### Custom config
+
+If you have specific needs, like using a custom icon collection, you can use the `icons` option in your `nuxt.config.ts` as an object to override the config of the [@egoist/tailwindcss-icons](https://github.com/egoist/tailwindcss-icons#plugin-options) plugin.
+
+```ts [nuxt.config.ts]
+import { getIconCollections } from '@egoist/tailwindcss-icons'
+
+export default defineNuxtConfig({
+  ui: {
+    icons: {
+      // might solve stretch bug on generate, see https://github.com/egoist/tailwindcss-icons/issues/23
+      extraProperties: {
+        'mask-size': 'contain',
+        'mask-position': 'center'
+      },
+      collections: {
+        foo: {
+          icons: {
+            'arrow-left': {
+              // svg body
+              body: '<path fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5" d="M10.5 19.5L3 12m0 0l7.5-7.5M3 12h18" />',
+              // svg width and height, optional
+              width: 24,
+              height: 24
+            }
+          }
+        },
+        ...getIconCollections(['heroicons', 'simple-icons'])
+      }
+    }
+  }
+})
+```
+
+### Dynamic icons
+
+The `Icon` component also has a `dynamic` prop to use the [nuxt-icon](https://github.com/nuxt-modules/icon/) module instead of the [@egoist/tailwindcss-icons](https://github.com/egoist/tailwindcss-icons#plugin-options) plugin.
+
+Read more about this in the [Icon](/components/icon#dynamic) component page.
+
+### Defaults
+
+You can easily replace all the default icons of the components in your `app.config.ts`.
+
+```ts [app.config.ts]
+export default defineAppConfig({
+  ui: {
+    button: {
+      default: {
+        loadingIcon: 'i-octicon-sync-24'
+      }
+    },
+    input: {
+      default: {
+        loadingIcon: 'i-octicon-sync-24'
+      }
+    },
+    select: {
+      default: {
+        loadingIcon: 'i-octicon-sync-24',
+        trailingIcon: 'i-octicon-chevron-down-24'
+      }
+    },
+    selectMenu: {
+      default: {
+        selectedIcon: 'i-octicon-check-24'
+      }
+    },
+    notification: {
+      default: {
+        closeButton: {
+          icon: 'i-octicon-x-24'
+        }
+      }
+    },
+    commandPalette: {
+      default: {
+        icon: 'i-octicon-search-24',
+        loadingIcon: 'i-octicon-sync-24',
+        selectedIcon: 'i-octicon-check-24',
+        emptyState: {
+          icon: 'i-octicon-search-24'
+        }
+      }
+    },
+    table: {
+      default: {
+        sortAscIcon: 'i-octicon-sort-asc-24',
+        sortDescIcon: 'i-octicon-sort-desc-24',
+        sortButton: {
+          icon: 'i-octicon-arrow-switch-24'
+        },
+        loadingState: {
+          icon: 'i-octicon-sync-24'
+        },
+        emptyState: {
+          icon: 'i-octicon-database-24'
+        }
+      }
+    },
+    pagination: {
+      default: {
+        firstButton: {
+          icon: 'i-octicon-chevron-left-24'
+        },
+        prevButton: {
+          icon: 'i-octicon-arrow-left-24'
+        },
+        nextButton: {
+          icon: 'i-octicon-arrow-right-24'
+        },
+        lastButton: {
+          icon: 'i-octicon-chevron-right-24'
+        }
+      }
+    },
+    accordion: {
+      default: {
+        openIcon: 'i-octicon-chevron-down-24'
+      }
+    },
+    breadcrumb: {
+      default: {
+        divider: 'i-octicon-chevron-right-24'
+      }
+    }
+  }
+})
+```

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

@@ -0,0 +1,141 @@
+---
+description: 'Learn how to display and define keyboard shortcuts in your app.'
+---
+
+Some components like [Dropdown](/components/dropdown), [Command Palette](/components/command-palette) and [Tooltip](/components/tooltip) support the display of keyboard shortcuts.
+
+```vue
+<UDropdown :items="[[{ label: 'Edit', shortcuts: ['E'] }]]" />
+```
+
+Shortcuts are displayed and styled through the [Kbd](/components/kbd) component.
+
+```vue
+<template>
+  <div class="flex items-center gap-0.5">
+    <UKbd>⌘</UKbd>
+    <UKbd>K</UKbd>
+  </div>
+</template>
+```
+
+::callout{icon="i-heroicons-light-bulb"}
+You will have a preview of how shortcuts are rendered in each component page.
+::
+
+## `defineShortcuts`
+
+This module provides a `defineShortcuts` composable that allows you to define keyboard shortcuts in your app really easily.
+
+```vue
+<template>
+  <UModal v-model="isOpen" />
+</template>
+
+<script setup lang="ts">
+const isOpen = ref(false)
+
+defineShortcuts({
+  meta_k: {
+    usingInput: true,
+    handler: () => {
+      isOpen.value = !isOpen.value
+    }
+  }
+})
+</script>
+```
+
+Shortcuts keys are written as the literal keyboard key value. Combinations are made with `_` separator. Chained shortcuts are made with `-` separator.
+
+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
+- `arrowleft`: will trigger by hitting `←` (also: `arrowright`, `arrowup`, `arrowdown`)
+
+::callout{icon="i-heroicons-light-bulb"}
+For a complete list of available shortcut keys, refer to the [`KeyboardEvent`](https://developer.mozilla.org/en-US/docs/Web/API/UI_Events/Keyboard_event_key_values) API docs. Note the `KeyboardEvent.key` has to be written in lowercase.
+::
+
+### `usingInput`
+
+Prop: `usingInput?: string | boolean`
+
+By default, `usingInput` is `false`, meaning it will only trigger when no input is focused. When set to `true`, the shortcut will also trigger when any input is focused.
+
+For a more advanced behavior, `usingInput` can be set to the name of an input, so it only triggers when focusing this specific input.
+
+```vue
+<template>
+  <UInput v-model="query" name="queryInput" />
+</template>
+
+<script setup lang="ts">
+const query = ref('')
+
+defineShortcuts({
+  enter: {
+    usingInput: 'queryInput',
+    handler: () => {
+      // TODO
+    }
+  }
+})
+</script>
+```
+_`enter` shortcut will only trigger when `queryInput` is focused._
+
+### `whenever`
+
+Prop: `whenever?: WatchSource<boolean>[]`
+
+`whenever` allows to add constraints on the shortcut triggering behavior. This array can contain `Ref<boolean>`, `ComputedRef<boolean>` or `() => boolean`.
+
+```ts
+defineShortcuts({
+  meta_k: {
+    usingInput: true,
+    handler: () => { isOpen.value = !isOpen.value }
+  },
+  escape: {
+    usingInput: true,
+    whenever: [isOpen],
+    handler: () => { isOpen.value = false }
+  }
+})
+```
+_`escape` shortcut will only trigger when `isOpen` is `true`._
+
+### Simple shortcut
+
+In case the shortcut does not need any config, it can be written as a function.
+
+```ts
+defineShortcuts({
+  '?': () => openHelpModal()
+})
+```
+
+## `useShortcuts`
+
+To display shortcuts in your app according to the user's OS, you can use the `useShortcuts` composable.
+
+```vue
+<script setup lang="ts">
+const { metaSymbol } = useShortcuts()
+</script>
+
+<template>
+  <UKbd>{{ metaSymbol }}</UKbd>
+</template>
+```
+_`metaSymbol` will display either `⌘` on MacOS or `Ctrl` on any other OS_

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

@@ -0,0 +1,178 @@
+---
+title: Contributing
+description: Learn how to contribute to Nuxt UI.
+navigation: false
+---
+
+Nuxt UI thrives thanks to its fantastic community ❤️, which contributes by submitting issues, creating pull requests, and offering valuable feedback.
+
+Before reporting a bug or reporting a feature, please make sure that you have read through our documentation and existing [issues](https://github.com/nuxt/ui/issues).
+
+## Submitting a Pull Request (PR)
+
+### 1. Before You Start
+
+Check if there's an existing issue describing the problem or feature request you're working on. If there is, please leave a comment on the issue to let us know you're working on it.
+
+If there isn't, open a new issue to discuss the problem or feature.
+
+### 2. Local Development Setup
+
+To begin local development, follow these steps:
+
+1. Clone the `nuxt/ui` repository to your local machine:
+
+```sh
+git clone https://github.com/nuxt/ui.git
+```
+
+2. Enable [Corepack](https://github.com/nodejs/corepack):
+
+```sh
+corepack enable
+```
+
+3. Install dependencies:
+
+```sh
+pnpm install
+```
+
+4. Generate type stubs:
+
+```sh
+pnpm run dev:prepare
+```
+
+5. Configure your local development environment:
+
+- To work on the **documentation** located in the `docs` folder, run:
+
+```sh
+pnpm run dev
+```
+
+- To test the components using **playground**, run:
+
+```sh
+pnpm run play
+```
+
+#### IDE Setup
+
+We recommend using VS Code along with the ESLint extension. You can enable auto-fix and formatting when saving your code. Here's how:
+
+```json
+{
+  "editor.codeActionsOnSave": {
+    "source.fixAll": false,
+    "source.fixAll.eslint": true
+  }
+}
+```
+
+You can also use the `lint` command:
+
+```sh
+pnpm run lint # check for linting errors
+pnpm run lint:fix # fix linting errors
+```
+
+#### No Prettier
+
+Since ESLint is already configured to format the code, there's no need for duplicating functionality with Prettier.
+
+If you have Prettier installed in your editor, we recommend disabling it to avoid conflicts.
+
+#### Type Checking
+
+We use TypeScript for type checking. You can use the `typecheck` command to check for type errors:
+
+```sh
+pnpm run typecheck
+```
+
+### 3. Commit Conventions
+
+We use [Conventional Commits](https://www.conventionalcommits.org/) for commit messages, which allows a changelog to be auto-generated based on the commits. Please read the [guide](https://www.conventionalcommits.org/en/v1.0.0/#summary) through if you aren't familiar with it already.
+
+#### Note
+
+- `fix` and `feat` are for actual code changes (that might affect logic). For typo or document changes, use `docs` or `chore` instead:
+
+~~`fix: typo`~~ -> `docs: fix typo`
+
+- If you are working on a specific component, ensure that you specify the main scope of your commit in brackets. e.g.
+
+```
+feat(Alert): new component
+chore(Table): improve accessibility
+```
+
+### 4. Making a Pull Request
+
+- Follow along the [instructions](https://github.com/nuxt/ui/blob/main/.github/PULL_REQUEST_TEMPLATE.md?plain=1) provided when creating a PR
+
+- Ensure your PR's title adheres to the [Conventional Commits](https://www.conventionalcommits.org/) since it will be used once the code is merged.
+
+- Multiple commits are fine; no need to rebase or force push. We'll use `Squash and Merge` when merging.
+
+- Ensure linting and make tests manually before submitting the PR. Avoid making unrelated changes.
+
+### 5. After You've Made a Pull Request
+
+We'll review it promptly. If assigned to a maintainer, they'll review it carefully. Ignore the red text; it's for tracking purposes.
+
+## Project Structure
+
+In this project, you'll find a variety of folders and files that serve different purposes. Here's an overview of the main ones:
+
+- **Documentation - `docs`** :
+
+The documentation is located in the `docs` folder. It's a Nuxt app that uses the `@nuxt/content` module to generate the documentation pages from Markdown files. Here's a breakdown of its structure:
+
+```
+docs/
+├── components/
+│   ├── examples/     # Components used in documentation as examples
+│   └── themes/       # Components used in the examples page in the theming section
+├── content/          # Documentation, separated into categories according to component types
+│   ├── 1.getting-started/
+│   │   ├── 1.index.md
+│   │   ├── 2.installation.md
+│   │   ├── ... etc
+│   ├── 2.elements/         # The category of components, which are elements
+│   │   ├── 1.accordion.md  # Docs for a single component (i.e., accordion)
+│   │   ├── 2.alert.md
+│   │   ├── ... etc
+└── ... etc
+```
+
+- **Components - `src`** :
+
+The components are located in the `src` folder. It's separated into categories according to component types. Here's a breakdown of its structure:
+
+```
+src/
+├── runtime/
+│   ├── composables/            # Composable functions used in components
+│   ├── components/             # Components folder, separated into categories according to component types
+│   │   ├── data/               # The category of components, which are data related
+│   │   │   ├── table.vue/      # Table component
+│   │   │   ├── elements/       # Elements category
+│   │   │   │   ├── ...etc/
+│   │   │   └── ... etc/
+│   │   ├── plugins/            # Plugins used in components
+│   │   ├── utils/              # Utility functions used on the components page (e.g., lodash)
+│   │   ├── types/              # Types used in components
+│   │   │   ├── accordion.d.ts/ # [componentName].d.ts type used for single component
+│   │   │   ├── avatar.d.ts/
+│   │   │   └── ... etc/
+│   │   ├── ui.config.ts/       # Configuration file used to apply styles to every component
+├── colors.ts/                  # Everything related to color functions (e.g., safelistByComponent, generateSafelist)
+└── ... etc/                    # Other files and folders
+```
+
+## Thanks
+
+Thank you again for being interested in this project! You are awesome! ❤️

docs/app/content/1.getting-started/_dir.yml

@@ -0,0 +1 @@
+title: Getting Started

docs/app/content/2.components/accordion.md

@@ -0,0 +1,168 @@
+---
+description: Display togglable accordion panels.
+links:
+  - label: Disclosure
+    icon: i-simple-icons-headlessui
+    to: 'https://headlessui.com/vue/disclosure'
+  - label: GitHub
+    icon: i-simple-icons-github
+    to: https://github.com/nuxt/ui/blob/dev/src/runtime/components/elements/Accordion.vue
+---
+
+## Usage
+
+Pass an array to the `items` prop of the Accordion component. Each item can have any property from the [Button](/components/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{component="accordion-example-basic"}
+
+### Style
+
+You can also pass any prop from the [Button](/components/button) component directly to the Accordion component to style the buttons.
+
+::component-card
+---
+baseProps:
+  items:
+    - label: '1. What is Nuxt 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'
+options:
+  - name: color
+    restriction: included
+    values:
+      - gray
+      - white
+      - black
+  - name: variant
+    restriction: included
+    values:
+      - solid
+      - outline
+      - ghost
+      - soft
+      - link
+  - name: size
+    restriction: included
+    values:
+      - 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 Nuxt 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 Nuxt 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 Nuxt 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{component="accordion-example-default-slot"}
+
+### `item`
+
+Use the `#item` slot to customize the items content or pass a `slot` property to customize a specific item. You will have access to the `item`, `index`, `open` properties and `close` method in the slot scope.
+
+:component-example{component="accordion-example-item-slot"}
+
+## Props
+
+:component-props
+
+## Config
+
+:component-preset

docs/app/content/2.components/alert.md

@@ -0,0 +1,184 @@
+---
+description: Display an alert element to draw attention.
+links:
+  - label: GitHub
+    icon: i-simple-icons-github
+    to: https://github.com/nuxt/ui/blob/dev/src/runtime/components/elements/Alert.vue
+---
+
+## Usage
+
+Pass a `title` to your Alert.
+
+::component-card
+---
+props:
+  title: 'Heads up!'
+---
+::
+
+### Description
+
+You can add a `description` in addition of the `title`.
+
+::component-card
+---
+baseProps:
+  title: 'Heads up!'
+props:
+  description: 'You can add components to your app using the cli.'
+---
+::
+
+### Icon
+
+Use any icon from [Iconify](https://icones.js.org) by setting the `icon` prop by using this pattern: `i-{collection_name}-{icon_name}` or change it globally in `ui.alert.default.icon`.
+
+::component-card
+---
+baseProps:
+  title: 'Heads up!'
+props:
+  icon: 'i-heroicons-command-line'
+  description: 'You can add components to your app using the cli.'
+excludedProps:
+  - icon
+---
+::
+
+### Avatar
+
+Use the [avatar](/components/avatar) prop as an `object` and configure it with any of its props.
+
+::component-card
+---
+baseProps:
+  title: 'Heads up!'
+props:
+  description: 'You can add components to your app using the cli.'
+  avatar:
+    src: 'https://avatars.githubusercontent.com/u/739984?v=4'
+excludedProps:
+  - avatar
+---
+::
+
+### Style
+
+Use the `color` and `variant` props to change the visual style of the Alert.
+
+- `color` can be any color from the `ui.colors` object or `white` (default).
+- `variant` can be `solid` (default), `outline`, `soft` or `subtle`.
+
+::component-card
+---
+baseProps:
+  title: 'Heads up!'
+  description: 'You can add components to your app using the cli.'
+props:
+  icon: 'i-heroicons-command-line'
+  color: 'primary'
+  variant: 'solid'
+options:
+  - name: color
+    restriction: included
+    values:
+      - white
+excludedProps:
+  - icon
+---
+::
+
+### Close
+
+Use the `close-button` prop to hide or customize the close button on the Alert.
+
+You can pass all the props of the [Button](/components/button) component to customize it through the `close-button` prop or globally through `ui.alert.default.closeButton`.
+
+It defaults to `null` which means no close button will be displayed. A `close` event will be emitted when the close button is clicked.
+
+::component-card
+---
+baseProps:
+  title: 'Heads up!'
+props:
+  closeButton:
+    icon: 'i-heroicons-x-mark-20-solid'
+    color: 'gray'
+    variant: 'link'
+    padded: false
+excludedProps:
+  - closeButton
+---
+::
+
+### Actions
+
+Use the `actions` prop to add actions to the Alert.
+
+Like for `closeButton`, you can pass all the props of the [Button](/components/button) component plus a `click` function in the action but also customize the default style for the actions globally through `ui.alert.default.actionButton`.
+
+::component-card
+---
+baseProps:
+  title: 'Heads up!'
+props:
+  actions:
+    - label: Action 1
+    - variant: 'ghost'
+      color: 'gray'
+      label: Action 2
+excludedProps:
+  - actions
+---
+::
+
+Actions will render differently whether you have a `description` set.
+
+::component-card
+---
+baseProps:
+  title: 'Heads up!'
+  description: 'You can add components to your app using the cli.'
+props:
+  actions:
+    - variant: 'solid'
+      color: 'primary'
+      label: Action 1
+    - variant: 'outline'
+      color: 'primary'
+      label: Action 2
+excludedProps:
+  - actions
+---
+::
+
+## Slots
+
+### `title` / `description`
+
+Use the `#title` and `#description` slots to customize the Alert.
+
+This can be handy when you want to display HTML content. To achieve this, you can define those slots and use the `v-html` directive.
+
+:component-example{component="alert-example-html"}
+
+### `icon` :u-badge{label="New" class="align-middle ml-2 !rounded-full" variant="subtle"}
+
+Use the `#icon` slot to customize the displayed icon.
+
+:component-example{component="alert-example-icon"}
+
+### `avatar` :u-badge{label="New" class="align-middle ml-2 !rounded-full" variant="subtle"}
+
+Use the `#avatar` slot to customize the displayable avatar.
+
+:component-example{component="alert-example-avatar"}
+
+## Props
+
+:component-props
+
+## Config
+
+:component-preset

docs/app/content/2.components/avatar.md

@@ -0,0 +1,122 @@
+---
+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/nuxt/ui/blob/dev/src/runtime/components/elements/Avatar.vue
+---
+
+## Usage
+
+::component-card
+---
+props:
+  src: 'https://avatars.githubusercontent.com/u/739984?v=4'
+  alt: 'Avatar'
+---
+::
+
+### Size
+
+Use the `size` prop to change the size of the Avatar.
+
+::component-card
+---
+props:
+  size: 'sm'
+baseProps:
+  src: 'https://avatars.githubusercontent.com/u/739984?v=4'
+  alt: 'Avatar'
+---
+::
+
+### Chip
+
+Use the `chip-color`, `chip-text` and `chip-position` props to display a chip on the Avatar.
+
+::component-card
+---
+props:
+  chipColor: 'primary'
+  chipText: ''
+  chipPosition: 'top-right'
+  size : 'sm'
+options:
+  - name: 'chipColor'
+    restriction: 'included'
+    values:
+      - 'gray'
+baseProps:
+  src: 'https://avatars.githubusercontent.com/u/739984?v=4'
+  alt: 'Avatar'
+---
+::
+
+### Placeholder
+
+If there is an error loading the `src` of the avatar or `src` is null / false a background placeholder will be displayed, customizable in `ui.avatar.background`.
+
+#### Icon
+
+Use any icon from [Iconify](https://icones.js.org) by setting the `icon` prop by using this pattern: `i-{collection_name}-{icon_name}` or change it globally in `ui.avatar.default.icon` to display an icon on top of the background.
+
+::component-card
+---
+props:
+  icon: 'i-heroicons-photo'
+  size: 'sm'
+excludedProps:
+  - icon
+---
+::
+
+#### Alt
+
+Otherwise, a placeholder will be displayed with the initials of the `alt` prop, customizable in `ui.avatar.placeholder`.
+
+::component-card
+---
+props:
+  alt: 'Benjamin Canac'
+  size: 'sm'
+---
+::
+
+## Group
+
+To stack avatars as a group, use the `AvatarGroup` component.
+
+- To limit the amount of avatars to show, use the `max` prop. It'll truncate the avatars and show a "+X" label (where X is the remaining avatars)
+- To size all the avatars equally, pass the `size` prop
+- To adjust the spacing or the ring between avatars, customize with `ui.avatarGroup.margin` or `ui.avatarGroup.ring`
+
+::component-card{slug="UAvatarGroup"}
+---
+props:
+  size: 'sm'
+  max: 2
+code: |
+  <UAvatar src="https://avatars.githubusercontent.com/u/739984?v=4" alt="benjamincanac" />
+    <UAvatar src="https://avatars.githubusercontent.com/u/904724?v=4" alt="Atinux" />
+    <UAvatar src="https://avatars.githubusercontent.com/u/7547335?v=4" alt="smarroufin" />
+---
+
+#default
+:u-avatar{src="https://avatars.githubusercontent.com/u/739984?v=4" alt="Avatar"}
+:u-avatar{src="https://avatars.githubusercontent.com/u/904724?v=4" alt="Avatar"}
+:u-avatar{src="https://avatars.githubusercontent.com/u/7547335?v=4" alt="Avatar"}
+::
+
+## Props
+
+::tabs
+  :component-props{label="Avatar"}
+  :component-props{label="AvatarGroup" slug="UAvatarGroup"}
+::
+
+## Config
+
+::tabs
+  :component-preset{label="Avatar"}
+  :component-preset{label="AvatarGroup" slug="AvatarGroup"}
+::

docs/app/content/2.components/badge.md

@@ -0,0 +1,150 @@
+---
+description: Display a short text to represent a status or a category.
+links:
+  - label: GitHub
+    icon: i-simple-icons-github
+    to: https://github.com/nuxt/ui/blob/dev/src/runtime/components/elements/Badge.vue
+---
+
+## Usage
+
+Use the default slot to set the text of the Badge.
+
+::component-card
+---
+code: Badge
+---
+
+Badge
+::
+
+You can also use the `label` prop:
+
+::component-card
+---
+props:
+  label: Badge
+---
+::
+
+### Style
+
+Use the `color` and `variant` props to change the visual style of the Badge.
+
+- `variant` can be `solid` (default), `outline`, `soft` or `subtle`.
+
+::component-card
+---
+props:
+  color: 'primary'
+  variant: 'solid'
+code: Badge
+---
+
+Badge
+::
+
+Besides all the colors from the `ui.colors` object, you can also use the `white` and `black` colors with their pre-defined variants.
+
+#### White
+
+::component-card
+---
+props:
+  color: 'white'
+  variant: 'solid'
+options:
+  - name: variant
+    restriction: expected
+    values:
+      - solid
+excludedProps:
+  - color
+code: Badge
+---
+
+Badge
+::
+
+#### Gray
+
+::component-card
+---
+props:
+  color: 'gray'
+  variant: 'solid'
+options:
+  - name: variant
+    restriction: expected
+    values:
+      - solid
+excludedProps:
+  - color
+code: Badge
+---
+
+Badge
+::
+
+#### Black
+
+::component-card
+---
+props:
+  color: 'black'
+  variant: 'solid'
+options:
+  - name: variant
+    restriction: only
+    values:
+      - solid
+excludedProps:
+  - color
+code: Badge
+---
+
+Badge
+::
+
+### Size
+
+Use the `size` prop to change the size of the Badge.
+
+::component-card
+---
+props:
+  size: 'sm'
+code: Badge
+---
+
+Badge
+::
+
+### Rounded
+
+To customize the border radius of the Badge, you can use the `ui` prop.
+
+::component-card
+---
+props:
+  ui:
+    rounded: 'rounded-full'
+excludedProps:
+  - ui
+code: Badge
+---
+
+Badge
+::
+
+::callout{icon="i-heroicons-light-bulb"}
+You can customize the whole [preset](#preset) by using the `ui` prop.
+::
+
+## Props
+
+:component-props
+
+## Config
+
+:component-preset

docs/app/content/2.components/breadcrumb.md

@@ -0,0 +1,72 @@
+---
+title: Breadcrumb
+description: A list of links that indicate the current page's location within a navigational hierarchy.
+links:
+  - label: GitHub
+    icon: i-simple-icons-github
+    to: https://github.com/nuxt/ui/blob/dev/src/runtime/components/navigation/Breadcrumb.vue
+---
+
+## Usage
+
+Pass an array to the `links` prop of the Breadcrumb component. Each link can have the following properties:
+
+- `label` - The label of the link.
+- `labelClass` - The class of the link label.
+- `icon` - The icon of the link.
+- `iconClass` - The class of the link icon.
+
+You can also pass any property from the [NuxtLink](https://nuxt.com/docs/api/components/nuxt-link#props) component such as `to`, `exact`, etc.
+
+:component-example{component="breadcrumb-example-basic"}
+
+::callout{icon="i-heroicons-light-bulb"}
+A `span` will be rendered instead of a link when the `to` property is not defined.
+::
+
+## Divider
+
+Use the `divider` prop to customize the divider between each link, it can be **an icon or a string**. You can change it globally in `ui.breadcrumb.default.divider`. Defaults to `i-heroicons-chevron-right-20-solid`.
+
+You can set the prop to `null` to hide the divider. Additionally, you can customize it using the [`divider`](#divider-1) slot.
+
+::component-card
+---
+baseProps:
+  links:
+    - label: Home
+      to: /
+    - label: Navigation
+    - label: Breadcrumb
+props:
+  divider: '/'
+---
+::
+
+## Slots
+
+### `default`
+
+Use the `#default` slot to customize the link label. You will have access to the `link`, `index` and `isActive` properties in the slot scope.
+
+:component-example{component="breadcrumb-example-default-slot"}
+
+### `icon`
+
+Use the `#icon` slot to customize the link icon. You will have access to the `link`, `index` and `isActive` properties in the slot scope.
+
+:component-example{component="breadcrumb-example-icon-slot"}
+
+### `divider`
+
+Use the `divider` slot to customize the divider of the Breadcrumb.
+
+:component-example{component="breadcrumb-example-divider-slot"}
+
+## Props
+
+:component-props
+
+## Config
+
+:component-preset

docs/app/content/2.components/button.md

@@ -0,0 +1,384 @@
+---
+description: Create a button with icon or link capabilities.
+links:
+  - label: GitHub
+    icon: i-simple-icons-github
+    to: https://github.com/nuxt/ui/blob/dev/src/runtime/components/elements/Button.vue
+---
+
+## Usage
+
+Use the default slot to set the text of the Button.
+
+::component-card
+---
+code: Button
+---
+
+Button
+::
+
+You can also use the `label` prop.
+
+::component-card
+---
+props:
+  label: Button
+---
+::
+
+### Style
+
+Use the `color` and `variant` props to change the visual style of the Button.
+
+::component-card
+---
+props:
+  color: 'primary'
+  variant: 'solid'
+code: Button
+---
+
+Button
+::
+
+Besides all the colors from the `ui.colors` object, you can also use the `white`, `gray` and `black` colors with their pre-defined variants.
+
+#### White
+
+::component-card
+---
+backgroundClass: 'bg-gray-50 dark:bg-gray-800'
+props:
+  color: 'white'
+  variant: 'solid'
+options:
+  - name: variant
+    restriction: expected
+    values:
+      - solid
+      - ghost
+excludedProps:
+  - color
+code: Button
+---
+
+Button
+::
+
+#### Gray
+
+::component-card
+---
+props:
+  color: 'gray'
+  variant: 'solid'
+options:
+  - name: variant
+    restriction: expected
+    values:
+      - solid
+      - ghost
+      - link
+excludedProps:
+  - color
+code: Button
+---
+
+Button
+::
+
+#### Black
+
+::component-card
+---
+props:
+  color: 'black'
+  variant: 'solid'
+options:
+  - name: variant
+    restriction: expected
+    values:
+      - solid
+      - link
+excludedProps:
+  - color
+code: Button
+---
+
+Button
+::
+
+### Size
+
+Use the `size` prop to change the size of the Button.
+
+::component-card
+---
+props:
+  size: 'sm'
+code: Button
+---
+
+Button
+::
+
+### Rounded
+
+To customize the border radius of the Button, you can use the `ui` prop.
+
+::component-card
+---
+props:
+  ui:
+    rounded: 'rounded-full'
+excludedProps:
+  - ui
+code: Button
+---
+
+Button
+::
+
+::callout{icon="i-heroicons-light-bulb"}
+You can customize the whole [preset](#preset) by using the `ui` prop.
+::
+
+### Icon
+
+Use any icon from [Iconify](https://icones.js.org) by setting the `icon` prop by using this pattern: `i-{collection_name}-{icon_name}`.
+
+Use the `leading` and `trailing` props to set the icon position or the `leading-icon` and `trailing-icon` props to set a different icon for each position.
+
+::component-card
+---
+props:
+  icon: 'i-heroicons-pencil-square'
+  size: 'sm'
+  color: 'primary'
+  variant: 'solid'
+  label: Button
+  trailing: false
+excludedProps:
+  - icon
+  - label
+---
+::
+
+The `label` as prop or slot is optional so you can use the Button as an icon-only button.
+
+::component-card
+---
+props:
+  icon: 'i-heroicons-pencil-square'
+  size: 'sm'
+  color: 'primary'
+  square: true
+  variant: 'solid'
+excludedProps:
+  - icon
+  - square
+---
+::
+
+### Disabled
+
+Use the `disabled` prop to disable the Button.
+
+::component-card
+---
+props:
+  disabled: true
+code: Button
+---
+
+Button
+::
+
+### Loading
+
+Use the `loading` prop to show a loading icon and disable the Button.
+
+Use the `loading-icon` prop to set a different icon or change it globally in `ui.button.default.loadingIcon`. Defaults to `i-heroicons-arrow-path-20-solid`.
+
+::component-card
+---
+props:
+  loading: true
+code: Button
+---
+
+Button
+::
+
+### Block
+
+Use the `block` prop to make the Button fill the width of its container.
+
+::component-card
+---
+props:
+  block: true
+code: Button
+---
+
+Button
+::
+
+### Link
+
+Use the `to` prop to make the Button a link.
+
+::component-card
+---
+props:
+  to: 'https://volta.net'
+  target: '_blank'
+code: Button
+---
+
+Button
+::
+
+You can also pass any property from the [NuxtLink](https://nuxt.com/docs/api/components/nuxt-link#props) component such as `target`, `exact`, etc.
+
+### Padded
+
+Use the `padded` prop to remove the padding of the Button.
+
+::component-card
+---
+props:
+  padded: false
+baseProps:
+  color: 'gray'
+  variant: 'link'
+  icon: 'i-heroicons-x-mark-20-solid'
+---
+::
+
+### Square
+
+Use the `square` prop to force the Button to have the same padding horizontally and vertically.
+
+::component-card
+---
+props:
+  square: true
+baseProps:
+  label: 'Button'
+  color: 'gray'
+  variant: 'solid'
+---
+::
+
+### Truncate
+
+Use the `truncate` prop to truncate the label of the Button.
+
+::component-card
+---
+props:
+  truncate: true
+  class: 'w-20'
+  label: 'Button with a long text'
+excludedProps:
+  - class
+---
+::
+
+## Group
+
+To stack buttons as a group, use the `ButtonGroup` component.
+
+- To size all the buttons equally, pass the `size` prop
+- To change the orientation of the buttons, set the `orientation` prop to `vertical`
+- To adjust the rounded or the shadow around buttons, customize with `ui.buttonGroup.rounded` or `ui.buttonGroup.shadow`
+
+::component-card{slug="UButtonGroup"}
+---
+props:
+  size: 'sm'
+  orientation: 'horizontal'
+code: |
+  <UButton label="Action" color="white" />
+    <UButton icon="i-heroicons-chevron-down-20-solid" color="gray" />
+---
+
+#default
+:u-button{label="Action" color="white"}
+:u-button{icon="i-heroicons-chevron-down-20-solid" color="gray"}
+::
+
+This can also work with an [Input](/components/input) component for example:
+
+::component-card{slug="UButtonGroup"}
+---
+props:
+  size: 'sm'
+  orientation: 'horizontal'
+code: |
+  <UInput />
+  <UButton icon="i-heroicons-clipboard-document" color="gray" />
+---
+
+#default
+:u-input
+:u-button{icon="i-heroicons-clipboard-document" color="gray"}
+::
+
+## Slots
+
+### `leading`
+
+Use the `#leading` slot to set the content of the leading icon.
+
+::component-card
+---
+slots:
+  leading: <UAvatar src="https://avatars.githubusercontent.com/u/739984?v=4" size="2xs" />
+baseProps:
+  color: 'gray'
+props:
+  label: Button
+  color: 'gray'
+excludedProps:
+  - color
+---
+
+#leading
+  :u-avatar{src="https://avatars.githubusercontent.com/u/739984?v=4" size="2xs"}
+::
+
+### `trailing`
+
+Use the `#trailing` slot to set the content of the trailing icon.
+
+::component-card
+---
+slots:
+  trailing: <UIcon name="i-heroicons-arrow-right-20-solid" class="w-5 h-5" />
+props:
+  label: Button
+  color: 'gray'
+excludedProps:
+  - color
+---
+
+#trailing
+  :u-icon{name="i-heroicons-arrow-right-20-solid" class="w-5 h-5"}
+::
+
+## Props
+
+::tabs
+  :component-props{label="Button"}
+  :component-props{label="ButtonGroup" slug="UButtonGroup"}
+::
+
+## Config
+
+::tabs
+  :component-preset{label="Button"}
+  :component-preset{label="ButtonGroup" slug="ButtonGroup"}
+::

docs/app/content/2.components/card.md

@@ -0,0 +1,35 @@
+---
+description: Display a card for content with a header, body and footer.
+links:
+  - label: GitHub
+    icon: i-simple-icons-github
+    to: https://github.com/nuxt/ui/blob/dev/src/runtime/components/layout/Card.vue
+---
+
+## Usage
+
+::component-example
+---
+component: 'card-example'
+componentProps:
+  class: 'w-full'
+---
+::
+
+## Slots
+
+### `header`
+
+Use the `#header` slot to fill the header.
+
+### `footer`
+
+Use the `#footer` slot to fill the footer.
+
+## Props
+
+:component-props
+
+## Config
+
+:component-preset

docs/app/content/2.components/carousel.md

@@ -0,0 +1,163 @@
+---
+description: Display images or content in a scrollable area.
+links:
+  - label: GitHub
+    icon: i-simple-icons-github
+    to: https://github.com/nuxt/ui/blob/dev/src/runtime/components/elements/Carousel.vue
+---
+
+## Usage
+
+Drag with your mouse, scroll with your mouse wheel or use the navigation arrows to navigate.
+
+Pass an array to the `items` prop and use the default slot to display the content of each item.
+
+:component-example{component="carousel-example"}
+
+### Snap
+
+The carousel will snap the item to the center (`snap-center`). You can use the `snap` utility classes to change this behavior using the `ui` prop:
+
+#### Snap to start
+
+::component-example
+---
+component: 'carousel-example-snap-start'
+---
+
+#code
+```vue
+<template>
+  <UCarousel v-slot="{ item }" :items="items" :ui="{ item: 'snap-start' }">
+    <img :src="item" width="200" height="300">
+  </UCarousel>
+</template>
+```
+::
+
+#### Snap to end
+
+::component-example
+---
+component: 'carousel-example-snap-end'
+---
+
+#code
+```vue
+<template>
+  <UCarousel v-slot="{ item }" :items="items" :ui="{ item: 'snap-end' }">
+    <img :src="item" width="200" height="300">
+  </UCarousel>
+</template>
+```
+::
+
+::callout{icon="i-heroicons-light-bulb" to="https://tailwindcss.com/docs/scroll-snap-align" target="_blank"}
+Learn more about the `scroll-snap-align` property on the Tailwind CSS documentation.
+::
+
+### Size
+
+Each item will take its own size by default in the carousel. You can use the `basis` / `width` utility classes to change this behavior using the `ui` prop:
+
+:component-example{component="carousel-example-size"}
+
+In this example, we used `basis-1/3` to display 3 items at a time but you can also use this to make the carousel full width using `basis-full` and display only one item at a time:
+
+:component-example{component="carousel-example-size-full"}
+
+You can also set a width on the container to center the carousel:
+
+:component-example{component="carousel-example-size-center"}
+
+::callout{icon="i-heroicons-light-bulb" to="https://tailwindcss.com/docs/flex-basis" target="_blank"}
+Learn more about the `flex-basis` property on the Tailwind CSS documentation.
+::
+
+## Navigation
+
+### Arrows
+
+Use the `arrows` prop to enable prev and next buttons, they will be automatically disabled when the carousel reaches the first or last item.
+
+:component-example{component="carousel-example-arrows"}
+
+You can also customize the prev and next buttons using the `prev-button` and `next-button` props:
+
+:component-example{component="carousel-example-arrows-center"}
+
+In this example, we move the buttons outside of the carousel container. You can also change this globally in `ui.carousel.default.prevButton` and `ui.carousel.default.nextButton`.
+
+### Indicators
+
+Use the `indicators` prop to display a list of buttons at the bottom of the carousel to navigate between items.
+
+:component-example{component="carousel-example-indicators"}
+
+The number of indicators will be automatically generated based on the number of items:
+
+:component-example{component="carousel-example-indicators-size"}
+
+## Autoplay :u-badge{label="New" class="align-middle ml-2 !rounded-full" variant="subtle"}
+
+You can easily implement an autoplay behavior using the exposed [API](#api) through a template ref.
+
+:component-example{component="carousel-example-autoplay"}
+
+## Slots
+
+### `default`
+
+You can put anything inside the default slot, not only images. You will have access to the `item` and `index` properties in the slot scope.
+
+:component-example{component="carousel-example-slots-default"}
+
+### `prev` / `next`
+
+With the `arrows` prop enabled, use the `#prev` and `#next` slots to set the content of the previous and next buttons. You will have access to the `disabled` property and `on-click` method in the slot scope.
+
+:component-example{component="carousel-example-slots-prev-next"}
+
+::callout{icon="i-heroicons-light-bulb"}
+You can customize the position of the buttons through `ui.arrows.wrapper`.
+::
+
+### `indicator`
+
+With the `indicators` prop enabled, use the `#indicator` slot to set the content of the indicators. You will have access to the `active`, `page` properties and `on-click` method in the slot scope.
+
+:component-example{component="carousel-example-slots-indicator"}
+
+::callout{icon="i-heroicons-light-bulb"}
+You can customize the position of the buttons through `ui.indicators.wrapper`.
+::
+
+## Props
+
+:component-props
+
+## API
+
+When accessing the component via a template ref, you can use the following:
+
+::field-group
+  ::field{name="page" type="number"}
+    The current page.
+  ::
+  ::field{name="pages" type="number"}
+    The total number of pages.
+  ::
+  ::field{name="select (page)"}
+    Go to a specific page.
+  ::
+  ::field{name="next ()"}
+    Go to the next page.
+  ::
+  ::field{name="prev ()"}
+    Go to the previous page.
+  ::
+::
+
+## Config
+
+:component-preset

docs/app/content/2.components/checkbox.md

@@ -0,0 +1,96 @@
+---
+description: Display a checkbox field.
+links:
+  - label: GitHub
+    icon: i-simple-icons-github
+    to: https://github.com/nuxt/ui/blob/dev/src/runtime/components/forms/Checkbox.vue
+---
+
+## Usage
+
+Use a `v-model` to make the Checkbox reactive.
+
+:component-example{component="checkbox-example"}
+
+### Label
+
+Use the `label` prop to display a label on the right.
+
+::component-card
+---
+props:
+  label: 'Label'
+---
+::
+
+### Style
+
+Use the `color` prop to change the style of the Checkbox.
+
+::component-card
+---
+baseProps:
+  label: 'Label'
+props:
+  color: 'primary'
+---
+::
+
+### Required
+
+Use the `required` prop to display a red star next to the label of the Checkbox.
+
+::component-card
+---
+props:
+  label: 'Label'
+  required: true
+---
+::
+
+### Help
+
+Use the `help` prop to display some text under the Checkbox.
+
+::component-card
+---
+props:
+  label: 'Label'
+  help: 'Please check this box'
+---
+::
+
+### Disabled
+
+Use the `disabled` prop to disable the Checkbox.
+
+::component-card
+---
+props:
+  disabled: true
+---
+::
+
+## Slots
+
+### `label`
+
+Use the `#label` slot to override the content of the label.
+
+::component-card
+---
+slots:
+  label: <span class="italic">Label</span>
+---
+
+#label
+  [Label]{.italic}
+::
+
+## Props
+
+:component-props
+
+## Config
+
+:component-preset

docs/app/content/2.components/chip.md

@@ -0,0 +1,132 @@
+---
+description: Display a chip indicator on any component.
+links:
+  - label: GitHub
+    icon: i-simple-icons-github
+    to: https://github.com/nuxt/ui/blob/dev/src/runtime/components/elements/Chip.vue
+---
+
+## Usage
+
+Wrap any component with the `Chip` component to display a chip indicator.
+
+::component-card
+---
+code: >-
+
+  <UButton icon="i-heroicons-inbox" color="gray" />
+---
+
+#default
+:u-button{icon="i-heroicons-inbox" color="gray"}
+::
+
+### Size
+
+Use the `size` prop to change the size of the chip.
+
+::component-card
+---
+props:
+  size: '2xl'
+code: >-
+
+    <UButton icon="i-heroicons-inbox" color="gray" />
+---
+
+#default
+:u-button{icon="i-heroicons-inbox" color="gray"}
+::
+
+### Color
+
+Use the `color` prop to change the color of the chip.
+
+::component-card
+---
+props:
+  color: 'red'
+code: >-
+
+    <UButton icon="i-heroicons-inbox" color="gray" />
+---
+
+#default
+:u-button{icon="i-heroicons-inbox" color="gray"}
+::
+
+### Position
+
+Use the `position` prop to change the position of the chip.
+
+::component-card
+---
+props:
+  position: 'bottom-right'
+code: >-
+
+    <UButton icon="i-heroicons-inbox" color="gray" />
+---
+
+#default
+:u-button{icon="i-heroicons-inbox" color="gray"}
+::
+
+### Text
+
+Use the `text` prop to display text in the chip.
+
+::component-card
+---
+props:
+  text: '3'
+  size: '2xl'
+excludedProps:
+  - size
+code: >-
+
+    <UButton icon="i-heroicons-inbox" color="gray" />
+---
+
+#default
+:u-button{icon="i-heroicons-inbox" color="gray"}
+::
+
+### Show
+
+Use the `show` prop to conditionally display the chip.
+
+:component-example{component="chip-example-show"}
+
+### Inset
+
+Use the `inset` prop to display the chip inside the component. This is useful when dealing with rounded components.
+
+::component-card
+---
+props:
+  inset: true
+code: >-
+
+  <UAvatar src="https://avatars.githubusercontent.com/u/739984?v=4" alt="Avatar" />
+---
+
+#default
+:u-avatar{src="https://avatars.githubusercontent.com/u/739984?v=4" alt="Avatar"}
+::
+
+## Slots
+
+### `content`
+
+Use the `#content` slot to fully customize the chip.
+
+:component-example{component="chip-example-content-slot"}
+
+## Props
+
+:component-props
+
+## Config
+
+:component-preset

docs/app/content/2.components/command-palette.md

@@ -0,0 +1,295 @@
+---
+title: CommandPalette
+description: Add a customizable command palette to your app.
+links:
+  - label: 'Combobox'
+    icon: i-simple-icons-headlessui
+    to: 'https://headlessui.com/vue/combobox'
+  - label: GitHub
+    icon: i-simple-icons-github
+    to: https://github.com/nuxt/ui/blob/dev/src/runtime/components/navigation/CommandPalette.vue
+---
+
+## Usage
+
+Use a `v-model` to display a searchable and selectable list of commands.
+
+::component-example
+---
+padding: false
+component: 'command-palette-example-basic'
+componentProps:
+  class: 'h-[257px]'
+---
+::
+
+You can put a `CommandPalette` anywhere you want but it's most commonly used inside of a modal.
+
+:component-example{component="command-palette-example-modal"}
+
+You can pass multiple groups of commands to the component. Each group will be separated by a divider and will display a label.
+
+Without a `v-model`, you can also listen on `@update:model-value` to navigate to a link or do something else when a command is clicked.
+
+::component-example
+---
+padding: false
+component: 'command-palette-example-groups'
+componentProps:
+  class: 'h-[274px]'
+---
+::
+
+### Icon
+
+Use any icon from [Iconify](https://icones.js.org) by setting the `icon` prop by using this pattern: `i-{collection_name}-{icon_name}`.
+
+Use the `selected-icon` prop to set a different icon or change it globally in `ui.commandPalette.default.selectedIcon`. Defaults to `i-heroicons-check-20-solid`.
+
+::component-card
+---
+padding: false
+baseProps:
+  emptyState: null
+props:
+  icon: 'i-heroicons-command-line'
+excludedProps:
+  - icon
+---
+::
+
+### Loading
+
+Use the `loading` prop to show a loading icon.
+
+Use the `loading-icon` prop to set a different icon or change it globally in `ui.commandPalette.default.loadingIcon`. Defaults to `i-heroicons-arrow-path-20-solid`.
+
+::component-card
+---
+padding: false
+baseProps:
+  emptyState: null
+props:
+  loading: true
+excludedProps:
+  - icon
+---
+::
+
+### Placeholder
+
+Use the `placeholder` prop to change the input placeholder
+
+::component-card
+---
+padding: false
+baseProps:
+  emptyState: null
+props:
+  placeholder: 'Type a command...'
+excludedProps:
+  - icon
+---
+::
+
+### Close
+
+Use the `close-button` prop to display a close button on the right side of the input.
+
+You can pass all the props of the [Button](/components/button) component to customize it through the `close-button` prop or globally through `ui.commandPalette.default.closeButton`.
+
+::component-card
+---
+padding: false
+baseProps:
+  emptyState: null
+props:
+  closeButton:
+    icon: 'i-heroicons-x-mark-20-solid'
+    color: 'gray'
+    variant: 'link'
+    padded: false
+excludedProps:
+  - closeButton
+---
+::
+
+### Empty
+
+An empty state will be displayed when there are no results.
+
+Use the `empty-state` prop to customize the `icon` and `label` or change them globally in `ui.commandPalette.default.emptyState`.
+
+You can also set it to `null` to hide the empty state.
+
+::component-card
+---
+padding: false
+baseProps:
+  placeholder: 'Type something to see the empty label change'
+props:
+  emptyState:
+    icon: 'i-heroicons-magnifying-glass-20-solid'
+    label: "We couldn't find any items."
+    queryLabel: "We couldn't find any items with that term. Please try again."
+excludedProps:
+  - emptyState
+---
+::
+
+## Full-text search
+
+The CommandPalette component takes care of the full-text search for you with [Fuse.js](https://fusejs.io). You can pass all the options of Fuse.js through the `fuse` prop.
+
+When searching for a command, the component will look for a `label` property on the command by default. You can customize this behavior by overriding the `command-attribute` prop. This will also affect the display of the command.
+
+You can also highlight the matches in the command by setting the `fuse.fuseOptions.includeMatches` to `true`. The CommandPalette component automatically takes care of the highlighting for you.
+
+```vue
+<template>
+  <UCommandPalette
+    command-attribute="title"
+    :fuse="{
+      fuseOptions: {
+        ignoreLocation: true,
+        includeMatches: true,
+        threshold: 0,
+        keys: ['title', 'description', 'children.children.value', 'children.children.children.value']
+      },
+      resultLimit: 10
+    }"
+  />
+</template>
+```
+
+::callout{icon="i-heroicons-light-bulb"}
+Try it yourself in this documentation's search by pressing :shortcut{value="meta"} :shortcut{value="K" class="ml-1"}.
+::
+
+## Async search
+
+You can also pass an `async` function to the `search` property of a group to perform an async search. The function will receive the query as its first argument and should return an array of commands.
+
+::component-example
+---
+padding: false
+component: 'command-palette-example-async'
+componentProps:
+  class: 'h-[274px]'
+---
+::
+
+::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`.
+::
+
+## Filter search
+
+You can also pass a function to the `filter` property of a group to filter displayed commands after the search happened. The function will receive the query as its first argument, the array of commands as second argument and should return an array of commands.
+
+::component-example
+---
+padding: false
+component: 'command-palette-example-filter'
+componentProps:
+  class: 'h-[274px]'
+---
+::
+
+## Slots
+
+### `<group>-icon`
+
+Use the `#<group>-icon` slot to override the left command content which display by default the `icon`, `avatar` and `chip`.
+
+### `<group>-command`
+
+Use the `#<group>-command` slot to override the command content which display by default the `prefix`, `suffix` and `label` (customizable through the `command-attribute` prop).
+
+### `<group>-active`
+
+Use the `#<group>-active` slot to override the right command content (when hovered) which display by default the `active` field of the group if provided.
+
+### `<group>-inactive`
+
+Use the `#<group>-inactive` slot to override the right command content (when not hovered) which display by default the `inactive` field of the group if provided or the `shortcuts` of the command.
+
+::callout{icon="i-heroicons-light-bulb"}
+The 4 slots above will have access to the `group`, `command`, `active` and `selected` properties in the slot scope.
+::
+
+### `empty-state`
+
+Use the `#empty-state` slot to customize the empty state.
+
+::component-example
+---
+padding: false
+component: 'command-palette-example-empty-slot'
+componentProps:
+  class: 'flex-1'
+---
+::
+
+## Props
+
+:component-props
+
+## API
+
+When accessing the component via a template ref, you can use the following:
+
+::field-group
+  ::field{name="query" type="string"}
+    The current query.
+  ::
+  ::field{name="updateQuery (query)"}
+    Updates the current query.
+  ::
+  ::field{name="results" type="ComputedRef<Fuse.FuseResult<Command>[]>"}
+    The results exposed by [useFuse](https://vueuse.org/integrations/useFuse/#usefuse).
+  ::
+  ::field{name="comboboxApi"}
+    The Combobox [API](https://github.com/tailwindlabs/headlessui/blob/main/packages/%40headlessui-vue/src/components/combobox/combobox.ts#L384) exposed by Headless UI.
+  ::
+::
+
+## Config
+
+:component-preset
+
+## Example
+
+Here are a few examples illustrating how you can customize the appearance of the `CommandPalette` component by utilizing its `ui` prop.
+
+### Algolia
+
+::component-example
+---
+padding: false
+component: 'command-palette-example-theme-algolia'
+componentProps:
+  class: 'max-h-[480px] rounded-md'
+hiddenCode: true
+---
+::
+
+::callout{icon="i-simple-icons-github" to="https://github.com/nuxt/ui/blob/dev/docs/components/content/examples/CommandPaletteExampleThemeAlgolia.vue#L23" target="_blank"}
+Take a look at the component!
+::
+
+### Raycast
+
+::component-example
+---
+padding: false
+component: 'command-palette-example-theme-raycast'
+componentProps:
+  class: 'max-h-[480px] rounded-md'
+hiddenCode: true
+---
+::
+
+::callout{icon="i-simple-icons-github" to="https://github.com/nuxt/ui/blob/dev/docs/components/content/examples/CommandPaletteExampleThemeRaycast.vue#L30" target="_blank"}
+Take a look at the component!
+::

docs/app/content/2.components/container.md

@@ -0,0 +1,25 @@
+---
+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/nuxt/ui/blob/dev/src/runtime/components/layout/Container.vue
+---
+
+## Usage
+
+::component-example
+---
+component: 'container-example'
+componentProps:
+  class: 'w-full'
+---
+::
+
+## Props
+
+:component-props
+
+## Config
+
+:component-preset

docs/app/content/2.components/context-menu.md

@@ -0,0 +1,36 @@
+---
+title: ContextMenu
+description: Display a menu that appears on right click.
+links:
+  - label: GitHub
+    icon: i-simple-icons-github
+    to: https://github.com/nuxt/ui/blob/dev/src/runtime/components/overlays/ContextMenu.vue
+---
+
+## Usage
+
+:component-example{component="context-menu-example"}
+
+## Popper
+
+Use the `popper` prop to customize the popper instance.
+
+### Arrow
+
+:component-example{component="context-menu-example-arrow"}
+
+### Placement
+
+:component-example{component="context-menu-example-placement"}
+
+### Offset
+
+:component-example{component="context-menu-example-offset"}
+
+## Props
+
+:component-props
+
+## Config
+
+:component-preset

docs/app/content/2.components/date-picker.md

@@ -0,0 +1,112 @@
+---
+title: DatePicker
+description: 'An example of a date picker component built with v-calendar.'
+---
+
+## Installation
+
+This example is a composition of a [Popover](/components/popover) and [v-calendar](https://github.com/nathanreyes/v-calendar). We also use [date-fns](https://date-fns.org/) to format dates.
+
+::callout{icon="i-heroicons-light-bulb"}
+Note that you can use any calendar library you want.
+::
+
+Let's start by installing the `v-calendar` and `date-fns` dependency:
+
+::code-group
+
+```bash [pnpm]
+pnpm add v-calendar@next date-fns
+```
+
+```bash [yarn]
+yarn add v-calendar@next date-fns
+```
+
+```bash [npm]
+npm install v-calendar@next date-fns
+```
+
+::
+
+## Usage
+
+You can create a `DatePicker.vue` component based on the `DatePicker` from `v-calendar`.
+
+The following example is styled based on the `primary` and `gray` colors and supports the `dark` mode. It also supports a `v-model` or `v-model.range` depending on the type of date you want to use.
+
+```vue [components/DatePicker.vue]
+<script setup lang="ts">
+import { DatePicker as VCalendarDatePicker } from 'v-calendar'
+import type { DatePickerDate, DatePickerRangeObject } from 'v-calendar/dist/types/src/use/datePicker'
+import 'v-calendar/dist/style.css'
+
+const props = defineProps({
+  modelValue: {
+    type: [Date, Object] as PropType<DatePickerDate | DatePickerRangeObject | null>,
+    default: null
+  }
+})
+
+const emit = defineEmits(['update:model-value', 'close'])
+
+const date = computed({
+  get: () => props.modelValue,
+  set: (value) => {
+    emit('update:model-value', value)
+    emit('close')
+  }
+})
+
+const attrs = {
+  transparent: true,
+  borderless: true,
+  color: 'primary',
+  'is-dark': { selector: 'html', darkClass: 'dark' },
+  'first-day-of-week': 2,
+}
+</script>
+
+<template>
+  <VCalendarDatePicker v-if="date && (typeof date === 'object')" v-model.range="date" :columns="2" v-bind="{ ...attrs, ...$attrs }" />
+  <VCalendarDatePicker v-else v-model="date" v-bind="{ ...attrs, ...$attrs }" />
+</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-primary {
+  --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>
+```
+
+## Examples
+
+### DatePicker
+
+:component-example{component="date-picker-example"}
+
+### DateRangePicker
+
+:component-example{component="date-picker-range-example"}

docs/app/content/2.components/divider.md

@@ -0,0 +1,113 @@
+---
+description: Display a separator between content.
+links:
+  - label: GitHub
+    icon: i-simple-icons-github
+    to: https://github.com/nuxt/ui/blob/dev/src/runtime/components/layout/Divider.vue
+---
+
+## Usage
+
+You can pass `label`, `icon` or `avatar` to the divider component.
+
+### Label
+
+::component-card
+---
+props:
+  label: OR
+---
+::
+
+### Icon
+
+Use any icon from [Iconify](https://icones.js.org) by setting the `icon` prop by using this pattern: `i-{collection_name}-{icon_name}`.
+
+::component-card
+---
+props:
+  icon: 'i-simple-icons-github'
+excludedProps:
+  - icon
+---
+::
+
+### Avatar
+
+Use the [avatar](/components/avatar) prop as an `object` and configure it with any of its props.
+
+::component-card
+---
+props:
+  avatar:
+    src: https://avatars.githubusercontent.com/u/739984?v=4
+excludedProps:
+  - avatar
+---
+::
+
+### Orientation
+
+You can change the orientation of the divider by setting the `orientation` prop to `horizontal` or `vertical`. Defaults to `horizontal`.
+
+:component-example{component="divider-example-orientation"}
+
+### Type
+
+You can change the type of the divider by setting the `type` prop to `solid`, `dotted` or `dashed`. Defaults to `solid`.
+
+::component-card{class="w-full"}
+---
+props:
+  label: Nuxt UI
+  type: dashed
+excludedProps:
+  - label
+---
+::
+
+### Size :u-badge{label="New" class="align-middle ml-2 !rounded-full" variant="subtle"}
+
+Use the `size` prop to change the size of the divider.
+
+::component-card
+---
+props:
+  label: Nuxt UI
+  size: sm
+excludedProps:
+  - label
+---
+::
+
+### Color
+
+You can change the color of the content by using the `ui` prop
+
+::component-card
+---
+props:
+  label: Nuxt UI
+  ui:
+    label: text-primary-500 dark:text-primary-400
+excludedProps:
+  - label
+  - ui
+---
+::
+
+## Slots
+
+### `default`
+
+Use the `default` slot to add content to the divider.
+
+:component-example{component="divider-example-default-slot"}
+
+## Props
+
+:component-props
+
+## Config
+
+:component-preset

docs/app/content/2.components/dropdown.md

@@ -0,0 +1,73 @@
+---
+description: Display a list of actions in a dropdown menu.
+links:
+  - label: Menu
+    icon: i-simple-icons-headlessui
+    to: https://headlessui.com/vue/menu
+  - label: GitHub
+    icon: i-simple-icons-github
+    to: https://github.com/nuxt/ui/blob/dev/src/runtime/components/elements/Dropdown.vue
+---
+
+## Usage
+
+Pass an array of arrays to the `items` prop of the Dropdown component. Each array represents a group of items. Each item can have the following properties:
+
+- `label` - The label of the item.
+- `labelClass` - The class of the item label.
+- `icon` - The icon of the item.
+- `iconClass` - The class of the item icon.
+- `avatar` - The avatar of the item. You can pass all the props of the [Avatar](/components/avatar) component.
+- `shortcuts` - The shortcuts of the item.
+- `slot` - The slot of the item.
+- `disabled` - Whether the item is disabled.
+- `class` - The class of the item.
+- `click` - The click handler of the item.
+
+You can also pass any property from the [NuxtLink](https://nuxt.com/docs/api/components/nuxt-link#props) component such as `to`, `exact`, etc.
+
+:component-example{component="dropdown-example-basic"}
+
+### Mode
+
+Use the `mode` prop to switch between `click` and `hover` modes.
+
+:component-example{component="dropdown-example-mode"}
+
+### Manual
+
+Use a `v-model:open` to manually control the state. In this example, press :shortcut{value="O"} to toggle the dropdown.
+
+:component-example{component="dropdown-example-open"}
+
+## Popper
+
+Use the `popper` prop to customize the popper instance.
+
+### Arrow
+
+:component-example{component="dropdown-example-arrow"}
+
+### Placement
+
+:component-example{component="dropdown-example-placement"}
+
+### Offset
+
+:component-example{component="dropdown-example-offset"}
+
+## Slots
+
+### `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{component="dropdown-example-slot"}
+
+## Props
+
+:component-props
+
+## Config
+
+:component-preset

docs/app/content/2.components/form-group.md

@@ -0,0 +1,270 @@
+---
+title: FormGroup
+description: Display a label and additional informations around a form element.
+links:
+  - label: GitHub
+    icon: i-simple-icons-github
+    to: https://github.com/nuxt/ui/blob/dev/src/runtime/components/forms/FormGroup.vue
+---
+
+
+## Usage
+
+Use the FormGroup component around an [Input](/components/input), [Textarea](/components/textarea), [Select](/components/select) or a [SelectMenu](/components/select-menu) with a `label`. The `<label>` will automatically be associated with the form element so it gets focused on click.
+
+::component-card
+---
+props:
+  label: 'Email'
+code: >-
+
+  <UInput placeholder="you@example.com" icon="i-heroicons-envelope" />
+---
+
+#default
+:u-input{placeholder="you@example.com" icon="i-heroicons-envelope"}
+::
+
+### Required
+
+Use the `required` prop to indicate that the form element is required.
+
+::component-card
+---
+props:
+  label: 'Email'
+  required: true
+code: >-
+
+  <UInput placeholder="you@example.com" icon="i-heroicons-envelope" />
+---
+
+#default
+:u-input{placeholder="you@example.com" icon="i-heroicons-envelope"}
+::
+
+### Description
+
+Use the `description` prop to display a description below the label.
+
+::component-card
+---
+props:
+  label: 'Email'
+  description: "We'll only use this for spam."
+code: >-
+
+  <UInput placeholder="you@example.com" icon="i-heroicons-envelope" />
+---
+
+#default
+:u-input{placeholder="you@example.com" icon="i-heroicons-envelope"}
+::
+
+### Hint
+
+Use the `hint` prop to display a hint above the form element.
+
+::component-card
+---
+props:
+  label: 'Email'
+  hint: 'Optional'
+code: >-
+
+  <UInput placeholder="you@example.com" icon="i-heroicons-envelope" />
+---
+
+#default
+:u-input{placeholder="you@example.com" icon="i-heroicons-envelope"}
+::
+
+### Help
+
+Use the `help` prop to display an help message below the form element.
+
+::component-card
+---
+props:
+  label: 'Email'
+  help: 'We will never share your email with anyone else.'
+code: >-
+
+  <UInput placeholder="you@example.com" icon="i-heroicons-envelope" />
+---
+
+#default
+:u-input{placeholder="you@example.com" icon="i-heroicons-envelope"}
+::
+
+### Error
+
+Use the `error` prop to display an error message below the form element.
+
+When used together with the `help` prop, the `error` prop will take precedence.
+
+:component-example{component="form-group-error-example"}
+
+::callout{icon="i-heroicons-light-bulb"}
+  The `error` prop will automatically set the `color` prop of the form element to `red`.
+::
+
+You can also use the `error` prop as a boolean to mark the form element as invalid.
+
+::component-card
+---
+props:
+  label: 'Email'
+  error: true
+excludedProps:
+  - ui
+  - error
+  - label
+code: >-
+
+  <UInput placeholder="you@example.com" />
+---
+
+#default
+:u-input{model-value="benjamincanac" placeholder="you@example.com"}
+::
+
+::callout{icon="i-heroicons-light-bulb" to="/components/form"}
+  Learn more about form validation in the `Form` component.
+::
+
+### Size
+
+Use the `size` prop to change the size of the label and the form element.
+
+::component-card
+---
+props:
+  size: 'xl'
+  label: 'Email'
+  hint: 'Optional'
+  description: "We'll only use this for spam."
+  help: 'We will never share your email with anyone else.'
+excludedProps:
+  - label
+  - hint
+  - description
+  - help
+code: >-
+
+  <UInput placeholder="you@example.com" icon="i-heroicons-envelope" />
+---
+
+#default
+:u-input{placeholder="you@example.com" icon="i-heroicons-envelope"}
+::
+
+::callout{icon="i-heroicons-exclamation-triangle"}
+  This will only work with form elements that support the `size` prop.
+::
+
+### Eager Validation
+
+By default, validation is only triggered after the initial `blur` event. This is to prevent the form from being validated as the user is typing. You can override this behavior by setting the `eager-validation` prop to `true`
+
+:component-example{component="form-group-eager-validation-example"}
+
+## Slots
+
+### `label`
+
+Use the `#label` slot to set the custom content for label.
+
+::component-card
+---
+slots:
+  label: <UAvatar src="https://avatars.githubusercontent.com/u/739984?v=4" size="3xs" />
+  default: <UInput model-value="benjamincanac" placeholder="you@example.com" />
+---
+
+#label
+  :u-avatar{src="https://avatars.githubusercontent.com/u/739984?v=4" size="3xs" class="mr-2 inline-flex"}
+
+#default
+  :u-input{model-value="benjamincanac" placeholder="you@example.com"}
+::
+
+### `description`
+
+Use the `#description` slot to set the custom content for description.
+
+::component-card
+---
+slots:
+  description: Write only valid email address <UIcon name="i-heroicons-arrow-right-20-solid" />
+  default: <UInput model-value="benjamincanac" placeholder="you@example.com" />
+props:
+  label: 'Email'
+---
+
+#description
+  Write only valid email address :u-icon{name="i-heroicons-information-circle" class="align-middle"}
+
+#default
+  :u-input{model-value="benjamincanac" placeholder="you@example.com"}
+::
+
+### `hint`
+
+Use the `#hint` slot to set the custom content for hint.
+
+::component-card
+---
+slots:
+  hint: <UIcon name="i-heroicons-arrow-right-20-solid" />
+  default: <UInput model-value="benjamincanac" placeholder="you@example.com" />
+props:
+  label: 'Step 1'
+---
+
+#hint
+  :u-icon{name="i-heroicons-arrow-right-20-solid"}
+
+#default
+  :u-input{model-value="benjamincanac" placeholder="you@example.com"}
+::
+
+### `help`
+
+Use the `#help` slot to set the custom content for help.
+
+::component-card
+---
+slots:
+  help: Here are some examples <UIcon name="i-heroicons-information-circle" />
+  default: <UInput model-value="benjamincanac" placeholder="you@example.com" />
+props:
+  label: 'Email'
+---
+
+#help
+  Here are some examples :u-icon{name="i-heroicons-information-circle" class="align-middle"}
+
+#default
+  :u-input{model-value="benjamincanac" placeholder="you@example.com"}
+::
+
+### `error`
+
+Use the `#error` slot to set the custom content for error.
+
+::component-example
+---
+component: 'form-group-error-slot-example'
+componentProps:
+  class: 'w-60'
+---
+::
+
+## Props
+
+:component-props
+
+## Config
+
+:component-preset

docs/app/content/2.components/form.md

@@ -0,0 +1,230 @@
+---
+description: Collect and validate form data.
+links:
+  - label: GitHub
+    icon: i-simple-icons-github
+    to: https://github.com/nuxt/ui/blob/dev/src/runtime/components/forms/Form.vue
+---
+
+## Usage
+
+Use the Form component to validate form data using schema libraries such as [Yup](https://github.com/jquense/yup), [Zod](https://github.com/colinhacks/zod), [Joi](https://github.com/hapijs/joi), [Valibot](https://valibot.dev/), or your own validation logic.
+
+It works with the [FormGroup](/components/input) component to display error messages around form elements automatically.
+
+The form component requires two props:
+- `state` - a reactive object holding the form's state.
+- `schema` - a schema object from [Yup](#yup), [Zod](#zod), [Joi](#joi), or [Valibot](#valibot).
+
+::callout{icon="i-heroicons-light-bulb"}
+Note that **no validation library is included** by default, so ensure you **install the one you need**.
+::
+
+::tabs
+  ::component-example{label="Yup"}
+  ---
+  component: 'form-example-yup'
+  componentProps:
+    class: 'w-60'
+  ---
+  ::
+
+  ::component-example{label="Zod"}
+  ---
+  component: 'form-example-zod'
+  componentProps:
+    class: 'w-60'
+  ---
+  ::
+
+  ::component-example{label="Joi"}
+  ---
+  component: 'form-example-joi'
+  componentProps:
+    class: 'w-60'
+  ---
+  ::
+
+  ::component-example{label="Valibot"}
+  ---
+  component: 'form-example-valibot'
+  componentProps:
+    class: 'w-60'
+  ---
+  ::
+::
+
+## Custom validation
+
+Use the `validate` prop to apply your own validation logic.
+
+The validation function must return a list of errors with the following attributes:
+- `message` - Error message for display.
+- `path` - Path to the form element corresponding to the `name` attribute.
+
+::callout{icon="i-heroicons-light-bulb"}
+Note: this can be used alongside the `schema` prop to handle complex use cases. 
+::
+
+::component-example
+---
+component: 'form-example-basic'
+componentProps:
+  class: 'w-60'
+---
+::
+
+This can also be used to integrate with other validation libraries. Here is an example with [Vuelidate](https://github.com/vuelidate/vuelidate):
+
+```vue
+<script setup lang="ts">
+import useVuelidate from '@vuelidate/core'
+
+const props = defineProps({
+  rules: { type: Object, required: true },
+  model: { type: Object, required: true }
+})
+
+const form = ref();
+const v = useVuelidate(props.rules, props.model)
+
+async function validateWithVuelidate() {
+  v.value.$touch()
+  await v.value.$validate()
+  return v.value.$errors.map((error) => ({
+    message: error.$message,
+    path: error.$propertyPath,
+  }))
+}
+
+defineExpose({
+  validate: async () => {
+    await form.value.validate()
+  }
+})
+</script>
+
+<template>
+  <UForm ref="form" :model="model" :validate="validateWithVuelidate">
+    <slot />
+  </UForm>
+</template>
+```
+
+## Backend validation
+
+You can manually set errors after form submission if required. To do this, simply use the `form.setErrors` function to set the errors as needed.
+
+```vue
+<script setup lang="ts">
+import type { FormError, FormSubmitEvent } from '#ui/types'
+
+const state = reactive({
+  email: undefined,
+  password: undefined
+})
+
+const form = ref()
+
+async function onSubmit (event: FormSubmitEvent<any>) {
+  form.value.clear()
+  try {
+    const response = await $fetch('...')
+    // ...
+  } catch (err) {
+    if (err.statusCode === 422) {
+      form.value.setErrors(err.data.errors.map((err) => ({
+        // Map validation errors to { path: string, message: string }
+        message: err.message,
+        path: err.path,
+      })))
+    }
+  }
+}
+</script>
+
+<template>
+  <UForm ref="form" :state="state" @submit="onSubmit">
+    <UFormGroup label="Email" name="email">
+      <UInput v-model="state.email" />
+    </UFormGroup>
+
+    <UFormGroup label="Password" name="password">
+      <UInput v-model="state.password" type="password" />
+    </UFormGroup>
+
+    <UButton type="submit">
+      Submit
+    </UButton>
+  </UForm>
+</template>
+```
+## Input events
+
+The Form component automatically triggers validation upon `submit`, `input`, `blur` or `change` events.
+
+This ensures that any errors are displayed as soon as the user interacts with the form elements. You can control when validation happens this using the `validate-on` prop.
+
+::callout{icon="i-heroicons-light-bulb"}
+Note that the `input` event is not triggered until after the initial `blur` event. This is to prevent the form from being validated as the user is typing. You can override this behavior by setting the [`eager-validation`](/components/form-group#eager-validation) prop on [`FormGroup`](/components/form-group) to `true`.
+::
+
+::component-example
+---
+component: 'form-example-elements'
+componentProps:
+  class: 'w-60'
+hiddenCode: true
+---
+::
+
+::callout{icon="i-simple-icons-github" to="https://github.com/nuxt/ui/blob/dev/docs/components/content/examples/FormExampleElements.vue" target="_blank"}
+Take a look at the component!
+::
+
+## Error event
+
+You can listen to the `@error` event to handle errors. This event is triggered when the form is validated and contains an array of `FormError` objects with the following fields:
+
+- `id` - the identifier of the form element.
+- `path` - the path to the form element matching the `name`.
+- `message` - the error message to display.
+
+Here is an example of how to focus the first form element with an error:
+
+::component-example
+---
+component: 'form-example-on-error'
+componentProps:
+  class: 'w-60'
+---
+::
+
+## Props
+
+:component-props
+
+## API
+
+When accessing the component via a template ref, you can use the following:
+
+::field-group
+  ::field{name="submit ()" type="Promise<void>"}
+    Triggers form submission.
+  ::
+  ::field{name="validate (path?: string | string[], opts: { silent?: boolean })" type="Promise<T>"}
+    Triggers form validation. Will raise any errors unless `opts.silent` is set to true.
+  ::
+  ::field{name="clear (path?: string)"}
+    Clears form errors associated with a specific path. If no path is provided, clears all form errors.
+  ::
+  ::field{name="getErrors (path?: string)" type="FormError[]"}
+    Retrieves form errors associated with a specific path. If no path is provided, returns all form errors.
+  ::
+  ::field{name="setErrors (errors: FormError[], path?: string)"}
+    Sets form errors for a given path. If no path is provided, overrides all errors.
+  ::
+  ::field{name="errors" type="Ref<FormError[]>"}
+    A reference to the array containing validation errors. Use this to access or manipulate the error information.
+  ::
+::

docs/app/content/2.components/horizontal-navigation.md

@@ -0,0 +1,62 @@
+---
+title: HorizontalNavigation
+description: Display a list of horizontal links.
+links:
+  - label: GitHub
+    icon: i-simple-icons-github
+    to: https://github.com/nuxt/ui/blob/dev/src/runtime/components/navigation/HorizontalNavigation.vue
+---
+
+## Usage
+
+Pass an array to the `links` prop of the HorizontalNavigation component. Each link can have the following properties:
+
+- `label` - The label of the link.
+- `labelClass` - The class of the link label.
+- `icon` - The icon of the link.
+- `iconClass` - The class of the link icon.
+- `avatar` - The avatar of the link. You can pass all the props of the [Avatar](/components/avatar) component.
+- `badge` - A badge to display next to the label. You can pass all the props of the [Badge](/components/badge) component.
+- `click` - The click handler of the link.
+
+You can also pass any property from the [NuxtLink](https://nuxt.com/docs/api/components/nuxt-link#props) component such as `to`, `exact`, etc.
+
+:component-example{component="horizontal-navigation-example"}
+
+## Sections
+
+Group your navigation links into distinct sections, they will be displayed apart thanks to a `justify-between` flexbox layout.
+
+You can do this by passing an array of arrays to the `links` prop of the HorizontalNavigation component.
+
+:component-example{component="horizontal-navigation-example-sections"}
+
+## Slots
+
+You can use slots to customize links display.
+
+### `default`
+
+Use the `#default` slot to customize the link label. You will have access to the `link` and `isActive` properties in the slot scope.
+
+:component-example{component="horizontal-navigation-example-default-slot"}
+
+### `avatar`
+
+Use the `#avatar` slot to customize the link avatar. You will have access to the `link` and `isActive` properties in the slot scope.
+
+### `icon`
+
+Use the `#icon` slot to customize the link icon. You will have access to the `link` and `isActive` properties in the slot scope.
+
+### `badge`
+
+Use the `#badge` slot to customize the link badge. You will have access to the `link` and `isActive` properties in the slot scope.
+
+## Props
+
+:component-props
+
+## Config
+
+:component-preset

docs/app/content/2.components/icon.md

@@ -0,0 +1,56 @@
+---
+description: Display any icon (100,000+) from Iconify.
+links:
+  - label: GitHub
+    icon: i-simple-icons-github
+    to: https://github.com/nuxt/ui/blob/dev/src/runtime/components/elements/Icon.vue
+---
+
+## Usage
+
+Use the `name` prop by following this pattern: `i-{collection_name}-{icon_name}`. You can search any icon from [Iconify](https://iconify.design/) using https://icones.js.org.
+
+::component-card
+---
+props:
+  name: 'i-heroicons-light-bulb'
+---
+::
+
+::callout{icon="i-heroicons-exclamation-triangle"}
+You won't be able to use all icons in the `name` prop here as icons are bundled using [egoist/tailwindcss-icons](https://github.com/egoist/tailwindcss-icons).
+::
+
+::callout{icon="i-heroicons-light-bulb"}
+Don't forget to install and specify the icon collections you need in your `nuxt.config.ts`, read more about this in [Theming](/getting-started/theming#icons).
+::
+
+### Dynamic
+
+You can use the `dynamic` prop to enable dynamic icon loading. This will use [`nuxt-icon`](https://github.com/nuxt-modules/icon) instead and allow you to use any icon from [Iconify](https://iconify.design/) as well as the `{collection_name}:{icon_name}` pattern.
+
+This can be quite useful when using [dynamic class names](https://tailwindcss.com/docs/content-configuration#dynamic-class-names) or for icons that are not bundled by default (fetched from a database for example).
+
+::component-card
+---
+props:
+  name: 'i-ph-rocket-launch'
+  dynamic: true
+---
+::
+
+You can also change the default behavior of the `dynamic` prop by setting the `ui.icons.dynamic` option in your `app.config.ts`.
+
+```ts [app.config.ts]
+export default defineAppConfig({
+  ui: {
+    icons: {
+      dynamic: true
+    }
+  }
+})
+```
+
+## Props
+
+:component-props

docs/app/content/2.components/input-menu.md

@@ -0,0 +1,208 @@
+---
+title: InputMenu
+description: Display an autocomplete input with real-time suggestions.
+links:
+  - label: 'Combobox'
+    icon: i-simple-icons-headlessui
+    to: 'https://headlessui.com/vue/combobox'
+  - label: GitHub
+    icon: i-simple-icons-github
+    to: https://github.com/nuxt/ui/blob/dev/src/runtime/components/forms/InputMenu.vue
+---
+
+## Usage
+
+The `InputMenu` component renders by default an [Input](/components/input) component and is based on the `ui.input` preset. You can use most of the `Input` props to configure the display such as [color](/components/input#style), [variant](/components/input#style), [size](/components/input#size), [placeholder](/components/input#placeholder), [icon](/components/input#icon), [disabled](/components/input#disabled), etc.
+
+You can use the `ui` prop like the `Input` component to override the default config. The `uiMenu` prop can be used to override the default menu config.
+
+Pass an array of strings or objects to the `options` prop to display in the menu.
+
+::component-example
+---
+component: 'input-menu-example-basic'
+componentProps:
+  class: 'w-full lg:w-48'
+---
+::
+
+::callout{icon="i-heroicons-exclamation-triangle"}
+This component does not support multiple values. Use the [SelectMenu](/components/select-menu#multiple) component instead.
+::
+
+### Objects
+
+You can pass an array of objects to `options` and either compare on the whole object or use the `by` prop to compare on a specific key. You can configure which field will be used to display the label through the `option-attribute` prop that defaults to `label`.
+
+::component-example
+---
+component: 'input-menu-example-objects'
+componentProps:
+  class: 'w-full lg:w-48'
+---
+::
+
+Use the `search-attributes` prop with an array of property names to search on each option object. Nested attributes can be accessed using `dot.notation`. When the property value is an array or object, these are cast to string so these can be searched within.
+
+::component-example
+---
+component: 'input-menu-example-search-attributes'
+componentProps:
+  class: 'w-full lg:w-48'
+---
+::
+
+If you only want to select a single object property rather than the whole object as value, you can set the `value-attribute` property. This prop defaults to `null`.
+
+::component-example
+---
+component: 'input-menu-example-objects-value-attribute'
+componentProps:
+  class: 'w-full lg:w-48'
+---
+::
+
+### Icon
+
+The `InputMenu` has a button on the right to toggle the menu. Use the `trailing-icon` prop to set a different icon or change it globally in `ui.inputMenu.default.trailingIcon`. Defaults to `i-heroicons-chevron-down-20-solid`.
+
+::component-card
+---
+baseProps:
+  class: 'w-full lg:w-48'
+  placeholder: 'Select a person'
+  options: ['Wade Cooper', 'Arlene Mccoy', 'Devon Webb', 'Tom Cook', 'Tanya Fox', 'Hellen Schmidt', 'Caroline Schultz', 'Mason Heaney', 'Claudie Smitham', 'Emil Schaefer']
+props:
+  trailingIcon: 'i-heroicons-chevron-up-down-20-solid'
+excludedProps:
+  - trailingIcon
+---
+::
+
+Use the `selected-icon` prop to set a different icon or change it globally in `ui.inputMenu.default.selectedIcon`. Defaults to `i-heroicons-check-20-solid`.
+
+::component-card
+---
+baseProps:
+  class: 'w-full lg:w-48'
+  placeholder: 'Select a person'
+  options: ['Wade Cooper', 'Arlene Mccoy', 'Devon Webb', 'Tom Cook', 'Tanya Fox', 'Hellen Schmidt', 'Caroline Schultz', 'Mason Heaney', 'Claudie Smitham', 'Emil Schaefer']
+props:
+  selectedIcon: 'i-heroicons-hand-thumb-up-solid'
+excludedProps:
+  - selectedIcon
+---
+::
+
+::callout{icon="i-heroicons-light-bulb"}
+Learn how to customize icons from the [Input](/components/input#icon) component.
+::
+
+## Searchable
+
+### Attributes
+
+Use the `search-attributes` prop with an array of property names to search on each option object. Nested attributes can be accessed using `dot.notation`. When the property value is an array or object, these are cast to string so these can be searched within.
+
+::component-example
+---
+component: 'input-menu-example-search-attributes'
+componentProps:
+  class: 'w-full lg:w-48'
+---
+::
+
+### Control the query
+
+Use a `v-model:query` to control the search query.
+
+::component-example
+---
+component: 'input-menu-example-search-query'
+componentProps:
+  class: 'w-full lg:w-48'
+---
+::
+
+### Async search
+
+Pass a function to the `search` 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
+---
+component: 'input-menu-example-search-async'
+componentProps:
+  class: 'w-full lg:w-48'
+---
+::
+
+## Popper
+
+Use the `popper` prop to customize the popper instance.
+
+### Arrow
+
+:component-example{component="input-menu-example-popper-arrow"}
+
+### Placement
+
+:component-example{component="input-menu-example-popper-placement"}
+
+### Offset
+
+:component-example{component="input-menu-example-popper-offset"}
+
+## Slots
+
+### `option`
+
+Use the `#option` slot to customize the option content. You will have access to the `option`, `active` and `selected` properties in the slot scope.
+
+::component-example
+---
+component: 'input-menu-example-option-slot'
+componentProps:
+  class: 'w-full lg:w-48'
+---
+::
+
+### `option-empty`
+
+Use the `#option-empty` slot to customize the content displayed when the `searchable` prop is `true` and there is no options. You will have access to the `query` property in the slot scope.
+
+::component-example
+---
+component: 'input-menu-example-option-empty-slot'
+componentProps:
+  class: 'w-full lg:w-48'
+---
+::
+
+### `empty`
+
+Use the `#empty` slot to customize the content displayed when there is no options. Defaults to `No options.`.
+
+::component-example
+---
+component: 'input-menu-example-empty-slot'
+componentProps:
+  class: 'w-full lg:w-48'
+---
+::
+
+## Props
+
+:component-props
+
+## Config
+
+::callout{icon="i-heroicons-light-bulb"}
+Use the `ui` prop to override the input config and the `uiMenu` prop to override the menu config.
+::
+
+::tabs{:selectedIndex="1"}
+  :component-preset{label="Input (ui)" slug="Input"}
+  :component-preset{label="InputMenu (uiMenu)"}
+::

docs/app/content/2.components/input.md

@@ -0,0 +1,222 @@
+---
+description: Display an input field.
+links:
+  - label: GitHub
+    icon: i-simple-icons-github
+    to: https://github.com/nuxt/ui/blob/dev/src/runtime/components/forms/Input.vue
+---
+
+## Usage
+
+Use a `v-model` to make the Input reactive.
+
+:component-example{component="input-example"}
+
+### Style
+
+Use the `color` and `variant` props to change the visual style of the Input.
+
+::component-card
+---
+baseProps:
+  placeholder: 'Search...'
+props:
+  color: 'primary'
+  variant: 'outline'
+---
+::
+
+Besides all the colors from the `ui.colors` object, you can also use the `white` (default) and `gray` colors with their pre-defined variants.
+
+#### White
+
+::component-card
+---
+baseProps:
+  placeholder: 'Search...'
+props:
+  color: 'white'
+  variant: 'outline'
+excludedProps:
+  - color
+---
+::
+
+#### Gray
+
+::component-card
+---
+baseProps:
+  placeholder: 'Search...'
+props:
+  color: 'gray'
+  variant: 'outline'
+excludedProps:
+  - color
+---
+::
+
+### Size
+
+Use the `size` prop to change the size of the Input.
+
+::component-card
+---
+props:
+  size: 'sm'
+---
+::
+
+### Type
+
+Use the `type` prop to change the input type, the default `type` is set to `text`, you can check all the available types at [MDN](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input#input_types).
+
+Some types have been implemented in their own components, such as [Checkbox](/components/checkbox), [Radio](/components/radio-group), etc. and others have been styled like `file` for example. :u-badge{label="New" class="!rounded-full" variant="subtle"}
+
+::component-card
+---
+props:
+  type: 'file'
+  size: sm
+options:
+  - name: type
+    restriction: included
+    values:
+      - file
+      - password
+      - number
+---
+::
+
+### Placeholder
+
+Use the `placeholder` prop to set a placeholder text.
+
+::component-card
+---
+props:
+  placeholder: 'Search...'
+---
+::
+
+### Icon
+
+Use any icon from [Iconify](https://icones.js.org) by setting the `icon` prop by using this pattern: `i-{collection_name}-{icon_name}`.
+
+Use the `leading` and `trailing` props to set the icon position or the `leading-icon` and `trailing-icon` props to set a different icon for each position.
+
+::component-card
+---
+baseProps:
+  placeholder: 'Search...'
+props:
+  icon: 'i-heroicons-magnifying-glass-20-solid'
+  size: 'sm'
+  color: 'white'
+  trailing: false
+options:
+  - name: color
+    restriction: included
+    values:
+      - white
+      - gray
+excludedProps:
+  - icon
+---
+::
+
+### Disabled
+
+Use the `disabled` prop to disable the Input.
+
+::component-card
+---
+baseProps:
+  placeholder: 'Search...'
+props:
+  disabled: true
+---
+::
+
+### Loading
+
+Use the `loading` prop to show a loading icon and disable the Input.
+
+Use the `loading-icon` prop to set a different icon or change it globally in `ui.input.default.loadingIcon`. Defaults to `i-heroicons-arrow-path-20-solid`.
+
+::component-card
+---
+baseProps:
+  placeholder: 'Searching...'
+props:
+  loading: true
+  icon: 'i-heroicons-magnifying-glass-20-solid'
+excludedProps:
+  - icon
+---
+::
+
+### Padded
+
+Use the `padded` prop to remove the padding of the Input.
+
+::component-card
+---
+props:
+  padded: false
+baseProps:
+  placeholder: 'Search...'
+  variant: 'none'
+  class: 'w-full'
+---
+::
+
+## Slots
+
+### `leading`
+
+Use the `#leading` slot to set the content of the leading icon.
+
+::component-card
+---
+slots:
+  leading: <UAvatar src="https://avatars.githubusercontent.com/u/739984?v=4" size="2xs" />
+baseProps:
+  placeholder: 'Search...'
+---
+
+#leading
+  :u-avatar{src="https://avatars.githubusercontent.com/u/739984?v=4" size="2xs"}
+::
+
+### `trailing`
+
+Use the `#trailing` slot to set the content of the trailing icon.
+
+::component-card
+---
+slots:
+  trailing: <span class="text-gray-500 dark:text-gray-400 text-xs">EUR</span>
+baseProps:
+  placeholder: 'Search...'
+---
+
+#trailing
+  [EUR]{class="text-gray-500 dark:text-gray-400 text-xs"}
+::
+
+You can for example create a clearable Input by injecting a [Button](/components/button) in the `trailing` slot that displays when some text is entered.
+
+:component-example{component="input-example-clearable"}
+
+::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.
+::
+
+## Props
+
+:component-props
+
+## Config
+
+:component-preset

docs/app/content/2.components/kbd.md

@@ -0,0 +1,57 @@
+---
+title: 'Keyboard Key'
+description: Display a keyboard key in a text block.
+links:
+  - label: GitHub
+    icon: i-simple-icons-github
+    to: https://github.com/nuxt/ui/blob/dev/src/runtime/components/elements/Kbd.vue
+navigation:
+  title: 'Kbd'
+---
+
+## Usage
+
+Use the default slot to set the text of the Kbd.
+
+::component-card
+---
+code: K
+---
+
+K
+::
+
+You can also use the `value` prop:
+
+::component-card
+---
+props:
+  value: K
+---
+::
+
+As explained in the [Shortcuts](/getting-started/shortcuts) page, you can use the `metaSymbol` property of the `useShortcuts` composable to display the meta key according to the user's OS.
+
+:component-example{component="kbd-example"}
+
+### Size
+
+Use the `size` prop to change the size of the Kbd.
+
+::component-card
+---
+props:
+  size: 'sm'
+code: 'U'
+---
+
+U
+::
+
+## Props
+
+:component-props
+
+## Config
+
+:component-preset

docs/app/content/2.components/link.md

@@ -0,0 +1,50 @@
+---
+title: 'Link'
+description: Render a NuxtLink but with superpowers.
+links:
+  - label: GitHub
+    icon: i-simple-icons-github
+    to: https://github.com/nuxt/ui/blob/dev/src/runtime/components/elements/Link.vue
+---
+
+## Usage
+
+The Link component is a wrapper around [`<NuxtLink>`](https://nuxt.com/docs/api/components/nuxt-link) through the [`custom`](https://router.vuejs.org/api/interfaces/RouterLinkProps.html#Properties-custom) prop that provides a few extra props:
+
+- `inactive-class` prop to set a class when the link is inactive, `active-class` is used when active.
+- `exact` prop to style with `active-class` when the link is active and the route is exactly the same as the current route.
+- `exact-query` and `exact-hash` props to style with `active-class` when the link is active and the query or hash is exactly the same as the current query or hash.
+
+The incentive behind this is to provide the same API as NuxtLink back in Nuxt 2 / Vue 2. You can read more about it in the Vue Router [migration from Vue 2](https://router.vuejs.org/guide/migration/#removal-of-the-exact-prop-in-router-link) guide.
+
+::component-card
+---
+props:
+  to: /components/link
+  activeClass: 'text-primary'
+  inactiveClass: 'text-gray-500 dark:text-gray-400 hover:text-gray-700 dark:hover:text-gray-200'
+code: ' Link '
+---
+
+Link
+::
+
+It also renders an `<a>` tag when a `to` prop is provided, otherwise it defaults to rendering a `<button>` tag. The default behavior can be customized using the `as` prop.
+
+It is used underneath by the [Button](/components/button), [Dropdown](/components/dropdown) and [VerticalNavigation](/components/vertical-navigation) components.
+
+## IntelliSense
+If you're using VSCode and wish to get autocompletion for the classes `active-class` and `inactive-class`, you can add the following settings to your `.vscode/settings.json`:
+
+```json [.vscode/settings.json]
+{
+    "tailwindCSS.classAttributes": [
+      "active-class",
+      "inactive-class"
+  ],
+}
+```
+
+## Props
+
+:component-props

docs/app/content/2.components/meter.md

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

docs/app/content/2.components/modal.md

@@ -0,0 +1,90 @@
+---
+description: Display a modal within your application.
+links:
+  - label: 'Dialog'
+    icon: i-simple-icons-headlessui
+    to: 'https://headlessui.com/vue/dialog'
+  - label: GitHub
+    icon: i-simple-icons-github
+    to: https://github.com/nuxt/ui/blob/dev/src/runtime/components/overlays/Modal.vue
+---
+
+## Usage
+
+Use a `v-model` to control the Modal state.
+
+:component-example{component="modal-example-basic"}
+
+You can put a [Card](/components/card) component inside your Modal to handle forms and take advantage of `header` and `footer` slots:
+
+:component-example{component="modal-example-card"}
+
+### Disable overlay
+
+Set the `overlay` prop to `false` to disable it.
+
+:component-example{component="modal-example-disable-overlay"}
+
+### Disable transition
+
+Set the `transition` prop to `false` to disable it.
+
+:component-example{component="modal-example-disable-transition"}
+
+### Prevent close
+
+Use the `prevent-close` prop to disable the outside click alongside the `esc` keyboard shortcut. A `close-prevented` event will be emitted when the user tries to close the modal.
+
+:component-example{component="modal-example-prevent-close"}
+
+You can still handle the `esc` shortcut yourself by using our [defineShortcuts](/getting-started/shortcuts#defineshortcuts) composable.
+
+```vue
+<script setup lang="ts">
+const isOpen = ref(false)
+
+defineShortcuts({
+  escape: {
+    usingInput: true,
+    whenever: [isOpen],
+    handler: () => { isOpen.value = false }
+  }
+})
+</script>
+```
+
+### Fullscreen
+
+Set the `fullscreen` prop to `true` to enable it.
+
+:component-example{component="modal-example-fullscreen"}
+
+### Control programmatically :u-badge{label="New" class="align-middle ml-2 !rounded-full" variant="subtle"}
+
+First of all, add the `Modals` component to your app, preferably inside `app.vue`.
+
+```vue [app.vue]
+<template>
+  <div>
+    <UContainer>
+      <NuxtPage />
+    </UContainer>
+
+    <UModals />
+  </div>
+</template>
+```
+
+Then, you can use the `useModal` composable to control your modals within your app.
+
+:component-example{component="modal-example-composable"}
+
+Additionally, you can close the modal within the modal component by calling `modal.close()`. 
+
+## Props
+
+:component-props
+
+## Config
+
+:component-preset

docs/app/content/2.components/notification.md

@@ -0,0 +1,302 @@
+---
+description: Display a toast notification in your app.
+links:
+  - label: GitHub
+    icon: i-simple-icons-github
+    to: https://github.com/nuxt/ui/blob/dev/src/runtime/components/overlays/Notification.vue
+---
+
+## Usage
+
+First of all, add the `Notifications` component to your app, preferably inside `app.vue`.
+
+```vue [app.vue]
+<template>
+  <div>
+    <UContainer>
+      <NuxtPage />
+    </UContainer>
+
+    <UNotifications />
+  </div>
+</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 bottom-auto'
+    }
+  }
+})
+```
+
+Then, you can use the `useToast` composable to add notifications to your app:
+
+:component-example{component="notification-example-basic"}
+
+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`.
+
+```vue
+<script setup lang="ts">
+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`.
+
+::component-card
+---
+baseProps:
+  id: 2
+  timeout: 0
+  title: 'Notification'
+props:
+  description: 'This is a notification.'
+---
+::
+
+### Icon
+
+Use any icon from [Iconify](https://icones.js.org) by setting the `icon` prop by using this pattern: `i-{collection_name}-{icon_name}` or change it globally in `ui.notification.default.icon`.
+
+::component-card
+---
+baseProps:
+  id: 3
+  timeout: 0
+  title: 'Notification'
+props:
+  icon: 'i-heroicons-check-circle'
+  description: 'This is a notification.'
+excludedProps:
+  - icon
+---
+::
+
+### Avatar
+
+Use the [avatar](/components/avatar) prop as an `object` and configure it with any of its props.
+
+::component-card
+---
+baseProps:
+  id: 4
+  timeout: 0
+  title: 'Notification'
+props:
+  description: 'This is a notification.'
+  avatar:
+    src: 'https://avatars.githubusercontent.com/u/739984?v=4'
+excludedProps:
+  - avatar
+---
+::
+
+### Timeout
+
+Use the `timeout` prop to configure how long the Notification will remain. The default value is  `5000`, set it to `0` to disable the timeout.
+
+You will see a progress bar at the bottom of the Notification which will indicate the remaining time. When hovering the Notification, the progress bar will be paused.
+
+::component-card
+---
+baseProps:
+  id: 5
+  title: 'Notification'
+  description: 'This is a notification.'
+props:
+  timeout: 60000
+---
+::
+
+### Style
+
+Use the `color` prop to change the progress and icon color of the Notification.
+
+::component-card
+---
+baseProps:
+  id: 6
+  title: 'Notification'
+  description: 'This is a notification.'
+  timeout: 600000
+props:
+  icon: 'i-heroicons-check-badge'
+  color: 'primary'
+options:
+  - name: color
+    restriction: included
+    values:
+      - gray
+excludedProps:
+  - icon
+---
+::
+
+### Click
+
+Use the `click` prop to execute a function when the Notification is clicked.
+
+:component-example{component="notification-example-click"}
+
+### Callback
+
+Use the `callback` prop to execute a function when the Notification expires.
+
+:component-example{component="notification-example-callback"}
+
+### Close
+
+Use the `close-button` prop to hide or customize the close button on the Notification.
+
+You can pass all the props of the [Button](/components/button) component to customize it through the `close-button` prop or globally through `ui.notification.default.closeButton`.
+
+::component-card
+---
+baseProps:
+  id: 7
+  title: 'Notification'
+  timeout: 0
+props:
+  closeButton:
+    icon: 'i-heroicons-archive-box-x-mark'
+    color: 'primary'
+    variant: 'outline'
+    padded: true
+    size: '2xs'
+    ui:
+      rounded: 'rounded-full'
+excludedProps:
+  - closeButton
+---
+::
+
+### Actions
+
+Use the `actions` prop to add actions to the Notification.
+
+:component-example{component="notification-example-actions"}
+
+Like for `closeButton`, you can pass all the props of the [Button](/components/button) component inside the action or globally through `ui.notification.default.actionButton`.
+
+::component-card
+---
+baseProps:
+  id: 8
+  title: 'Notification'
+  timeout: 0
+props:
+  actions:
+    - label: Action 1
+    - variant: 'solid'
+      color: 'gray'
+      label: Action 2
+excludedProps:
+  - actions
+---
+::
+
+Actions will render differently whether you have a `description` set.
+
+::component-card
+---
+baseProps:
+  id: 9
+  title: 'Notification'
+  description: 'This is a notification.'
+  timeout: 0
+props:
+  actions:
+    - variant: 'solid'
+      color: 'primary'
+      label: Action 1
+    - variant: 'outline'
+      color: 'primary'
+      label: Action 2
+excludedProps:
+  - actions
+---
+::
+
+## Slots
+
+### `title` / `description`
+
+Use the `#title` and `#description` slots to customize the Notification.
+
+This can be handy when you want to display HTML content. To achieve this, you can define those slots in the top-level `<UNotifications />` component in your `app.vue` and use the `v-html` directive.
+
+```vue [app.vue]
+<template>
+  <UNotifications>
+    <template #title="{ title }">
+      <span v-html="title" />
+    </template>
+
+    <template #description="{ description }">
+      <span v-html="description" />
+    </template>
+  </UNotifications>
+</template>
+```
+
+This way, you can use HTML tags in the `title` and `description` props when using `useToast`.
+
+:component-example{component="notification-example-html"}
+
+::callout{icon="i-heroicons-light-bulb"}
+Slots defined in the `<UNotifications />` component are automatically passed down to the `Notification` children.
+::
+
+## Props
+
+::tabs
+  :component-props{label="Notification"}
+  :component-props{label="Notifications" slug="UNotifications"}
+::
+
+## Config
+
+::tabs
+  :component-preset{label="Notification"}
+  :component-preset{label="Notifications" slug="Notifications"}
+::

docs/app/content/2.components/pagination.md

@@ -0,0 +1,157 @@
+---
+description: Add a pagination to handle pages.
+links:
+  - label: GitHub
+    icon: i-simple-icons-github
+    to: https://github.com/nuxt/ui/blob/dev/src/runtime/components/navigation/Pagination.vue
+---
+
+## Usage
+
+Use a `v-model` to get a reactive page alongside a `total` which represents the total of items. You can also use the `page-count` prop to define the number of items per page which defaults to `10`.
+
+:component-example{component="pagination-example-basic"}
+
+### Max
+
+Use the `max` prop to set a maximum of displayed pages. Defaults to `7`, being the minimum.
+
+::component-card
+---
+baseProps:
+  modelValue: 1
+props:
+  max: 5
+  pageCount: 5
+  total: 100
+excludedProps:
+  - pageCount
+  - total
+---
+::
+
+### Size
+
+Use the `size` prop to change the size of the buttons.
+
+::component-card
+---
+baseProps:
+  modelValue: 1
+  total: 100
+  showLast: true
+  showFirst: true
+props:
+  size: 'sm'
+---
+::
+
+### Disabled
+
+Use the `disabled` prop to disable all the buttons.
+
+::component-card
+---
+baseProps:
+  modelValue: 1
+  total: 100
+  showLast: true
+  showFirst: true
+props:
+  disabled: true
+---
+::
+
+### Active / Inactive
+
+Use the `active-button` and `inactive-button` props to customize the active and inactive buttons of the Pagination.
+
+::component-card
+---
+baseProps:
+  modelValue: 1
+  total: 100
+props:
+  activeButton:
+    variant: 'outline'
+  inactiveButton:
+    color: 'gray'
+excludedProps:
+  - activeButton
+  - inactiveButton
+---
+::
+
+### Prev / Next
+
+Use the `prev-button` and `next-button` props to customize the prev and next buttons of the Pagination.
+
+::component-card
+---
+baseProps:
+  modelValue: 1
+  total: 100
+props:
+  prevButton:
+    icon: 'i-heroicons-arrow-small-left-20-solid'
+    label: Prev
+    color: 'gray'
+  nextButton:
+    icon: 'i-heroicons-arrow-small-right-20-solid'
+    trailing: true
+    label: Next
+    color: 'gray'
+excludedProps:
+  - prevButton
+  - nextButton
+---
+::
+
+### First / Last
+
+Use the `first-button` and `last-button` props to customize the first and last buttons of the Pagination.
+
+::component-card
+---
+baseProps:
+  modelValue: 1
+  total: 100
+  showFirst: true
+  showLast: true
+props:
+  firstButton:
+    icon: 'i-heroicons-arrow-small-left-20-solid'
+    label: First
+    color: 'gray'
+  lastButton:
+    icon: 'i-heroicons-arrow-small-right-20-solid'
+    trailing: true
+    label: Last
+    color: 'gray'
+excludedProps:
+  - firstButton
+  - lastButton
+---
+::
+
+## Slots
+
+### `prev` / `next`
+
+Use the `#prev` and `#next` slots to set the content of the previous and next buttons.
+
+:component-example{component="pagination-example-prev-next-slots"}
+
+### `first` / `last`
+
+Use the `#first` and `#last` slots to set the content of the first and last buttons.
+
+:component-example{component="pagination-example-first-last-slots"}
+
+## Props
+
+:component-props
+
+## Config
+
+:component-preset

docs/app/content/2.components/popover.md

@@ -0,0 +1,62 @@
+---
+description: Display a non-modal dialog that floats around a trigger element.
+links:
+  - label: 'Popover'
+    icon: i-simple-icons-headlessui
+    to: 'https://headlessui.com/vue/popover'
+  - label: GitHub
+    icon: i-simple-icons-github
+    to: https://github.com/nuxt/ui/blob/dev/src/runtime/components/overlays/Popover.vue
+---
+
+## Usage
+
+:component-example{component="popover-example"}
+
+### Mode
+
+Use the `mode` prop to switch between `click` and `hover` modes.
+
+:component-example{component="popover-example-mode"}
+
+### Manual
+
+Use a `v-model:open` to manually control the state. In this example, press :shortcut{value="O"} to toggle the popover.
+
+:component-example{component="popover-example-open"}
+
+### Overlay
+
+:component-example{component="popover-example-overlay"}
+
+## Popper
+
+Use the `popper` prop to customize the popper instance.
+
+### Arrow
+
+:component-example{component="popover-example-arrow"}
+
+### Placement
+
+:component-example{component="popover-example-placement"}
+
+### Offset
+
+:component-example{component="popover-example-offset"}
+
+## Slots
+
+### `panel`
+
+Use the `#panel` slot to fill the content of the panel. You will have access to the `open` property and the `close` method in the slot scope.
+
+:component-example{component="popover-example-slot"}
+
+## Props
+
+:component-props
+
+## Config
+
+:component-preset

docs/app/content/2.components/progress.md

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

docs/app/content/2.components/radio-group.md

@@ -0,0 +1,172 @@
+---
+title: RadioGroup
+description: Display a set of radio buttons.
+links:
+  - label: GitHub
+    icon: i-simple-icons-github
+    to: https://github.com/nuxt/ui/blob/dev/src/runtime/components/forms/RadioGroup.vue
+---
+
+## Usage
+
+Use a `v-model` to make the RadioGroup reactive.
+
+:component-example{component="radio-group-example"}
+
+Alternatively, you can use individual Radio components:
+
+:component-example{component="radio-example"}
+
+::callout{icon="i-heroicons-light-bulb"}
+If using the RadioGroup component, you can customize the Radio options by using the `uiRadio` prop.
+::
+
+### Legend
+
+Use the `legend` prop to add a legend to the RadioGroup.
+
+::component-card
+---
+baseProps:
+  options: [{ value: 'email', label: 'Email' }, { value: 'sms', label: 'Phone (SMS)' }, { value: 'push', label: 'Push notification' }]
+  modelValue: 'sms'
+props:
+  legend: 'Legend'
+---
+::
+
+### Style
+
+Use the `color` prop to change the style of the RadioGroup.
+
+::component-card
+---
+baseProps:
+  options: [{ value: 'email', label: 'Email' }, { value: 'sms', label: 'Phone (SMS)' }, { value: 'push', label: 'Push notification' }]
+  modelValue: 'sms'
+props:
+  color: 'primary'
+---
+::
+
+::callout{icon="i-heroicons-light-bulb"}
+This prop also work on the Radio component.
+::
+
+### Orientation
+
+You can change the orientation of the divider by setting the `orientation` prop to `horizontal` or `vertical`. Defaults to `vertical`.
+
+::component-card
+---
+baseProps:
+  options: [{ value: 'email', label: 'Email' }, { value: 'sms', label: 'Phone (SMS)' }, { value: 'push', label: 'Push notification' }]
+  modelValue: 'sms'
+props:
+  orientation: 'horizontal'
+---
+::
+
+### Disabled
+
+Use the `disabled` prop to disable the RadioGroup.
+
+::component-card
+---
+baseProps:
+  options: [{ value: 'email', label: 'Email' }, { value: 'sms', label: 'Phone (SMS)' }, { value: 'push', label: 'Push notification', disabled: true }]
+  modelValue: 'sms'
+props:
+  disabled: true
+---
+::
+
+::callout{icon="i-heroicons-light-bulb"}
+This prop also work on the Radio component and you can set the `disabled` field in the `options` to disable a specific Radio.
+::
+
+### Label
+
+Use the `label` prop to display a label on the right of the Radio.
+
+::component-card{slug="URadio"}
+---
+props:
+  label: 'Label'
+---
+::
+
+### Required
+
+Use the `required` prop to display a red star next to the label of the Radio.
+
+::component-card{slug="URadio"}
+---
+props:
+  label: 'Label'
+  required: true
+---
+::
+
+### Help
+
+Use the `help` prop to display some text under the Radio.
+
+::component-card{slug="URadio"}
+---
+props:
+  label: 'Label'
+  help: 'Please choose one'
+---
+::
+
+## Slots
+
+### `label`
+
+Use the `#label` slot to override the label of each option.
+
+:component-example{component="radio-group-label-example"}
+
+Alternatively, you can do the same with individual Radio:
+
+::component-card{slug="URadio"}
+---
+slots:
+  label: <span class="italic">Label</span>
+---
+
+#label
+  [Label]{.italic}
+::
+
+### `legend`
+
+Use the `#legend` slot to override the content of the legend.
+
+::component-card
+---
+baseProps:
+  options: [{ value: 'email', label: 'Email' }, { value: 'sms', label: 'Phone (SMS)' }, { value: 'push', label: 'Push notification' }]
+  modelValue: 'sms'
+slots:
+  legend: <span class="italic">Legend</span>
+---
+
+#legend
+  [Legend]{.italic}
+::
+
+## Props
+
+::tabs
+  :component-props{label="Radio" slug="URadio"}
+  :component-props{label="RadioGroup"}
+::
+
+## Config
+
+::tabs
+  :component-preset{label="Radio" slug="Radio"}
+  :component-preset{label="RadioGroup"}
+::

docs/app/content/2.components/range.md

@@ -0,0 +1,79 @@
+---
+description: Display a range field
+links:
+  - label: GitHub
+    icon: i-simple-icons-github
+    to: https://github.com/nuxt/ui/blob/dev/src/runtime/components/forms/Range.vue
+---
+
+## Usage
+
+Use a `v-model` to make the Range reactive.
+
+:component-example{component="range-example"}
+
+### Style
+
+Use the `color` prop to change the visual style of the Range.
+
+::component-card
+---
+baseProps:
+  placeholder: 'Search...'
+props:
+  color: 'primary'
+---
+::
+
+### Size
+
+Use the `size` prop to change the size of the Range.
+
+::component-card
+---
+props:
+  size: 'md'
+---
+::
+
+### Disabled
+
+Use the `disabled` prop to disable the Range.
+
+::component-card
+---
+props:
+  disabled: true
+---
+::
+
+### Min and Max
+
+Use the `min` and `max` prop to configure the Range.
+
+::component-card
+---
+props:
+  min: 0
+  max: 100
+---
+::
+
+### Step
+
+Use the `step` prop to change the step increment.
+
+::component-card
+---
+props:
+  step: 20
+---
+::
+
+## Props
+
+:component-props
+
+## Config
+
+:component-preset

docs/app/content/2.components/select-menu.md

@@ -0,0 +1,288 @@
+---
+title: SelectMenu
+description: Display a select menu with advanced features.
+links:
+  - label: 'Listbox'
+    icon: i-simple-icons-headlessui
+    to: 'https://headlessui.com/vue/listbox'
+  - label: GitHub
+    icon: i-simple-icons-github
+    to: https://github.com/nuxt/ui/blob/dev/src/runtime/components/forms/SelectMenu.vue
+---
+
+## Usage
+
+The `SelectMenu` component renders by default a [Select](/components/select) component and is based on the `ui.select` preset. You can use most of the `Select` props to configure the display if you don't want to override the default slot such as [color](/components/select#style), [variant](/components/select#style), [size](/components/select#size), [placeholder](/components/select#placeholder), [icon](/components/select#icon), [disabled](/components/select#disabled), etc.
+
+You can use the `ui` prop like the `Select` component to override the default config. The `uiMenu` prop can be used to override the default menu config.
+
+Like the `Select` component, you can use the `options` prop to pass an array of strings or objects.
+
+::component-example
+---
+component: 'select-menu-example-basic'
+componentProps:
+  class: 'w-full lg:w-48'
+---
+::
+
+### Multiple
+
+You can use the `multiple` prop to select multiple values.
+
+::component-example
+---
+component: 'select-menu-example-multiple'
+componentProps:
+  class: 'w-full lg:w-48'
+---
+::
+
+### Objects
+
+You can pass an array of objects to `options` and either compare on the whole object or use the `by` prop to compare on a specific key. You can configure which field will be used to display the label through the `option-attribute` prop that defaults to `label`.
+
+::component-example
+---
+component: 'select-menu-example-objects'
+componentProps:
+  class: 'w-full lg:w-48'
+---
+::
+
+If you only want to select a single object property rather than the whole object as value, you can set the `value-attribute` property. This prop defaults to `null`.The value of the `value-attribute` field in options must be unique.
+
+::component-example
+---
+component: 'select-menu-example-objects-value-attribute'
+componentProps:
+  class: 'w-full lg:w-48'
+---
+::
+
+### Icon
+
+Use the `selected-icon` prop to set a different icon or change it globally in `ui.selectMenu.default.selectedIcon`. Defaults to `i-heroicons-check-20-solid`.
+
+::component-card
+---
+baseProps:
+  class: 'w-full lg:w-48'
+  placeholder: 'Select a person'
+  options: ['Wade Cooper', 'Arlene Mccoy', 'Devon Webb', 'Tom Cook', 'Tanya Fox', 'Hellen Schmidt', 'Caroline Schultz', 'Mason Heaney', 'Claudie Smitham', 'Emil Schaefer']
+props:
+  selectedIcon: 'i-heroicons-hand-thumb-up-solid'
+excludedProps:
+  - selectedIcon
+---
+::
+
+::callout{icon="i-heroicons-light-bulb"}
+Learn how to customize icons from the [Select](/components/select#icon) component.
+::
+
+## Searchable
+
+Use the `searchable` prop to enable search.
+
+Use the `searchable-placeholder` prop to set a different placeholder.
+
+This will use Headless UI [Combobox](https://headlessui.com/vue/combobox) component instead of [Listbox](https://headlessui.com/vue/listbox).
+
+::component-card
+---
+baseProps:
+  class: 'w-full lg:w-48'
+  placeholder: 'Select a person'
+  options: ['Wade Cooper', 'Arlene Mccoy', 'Devon Webb', 'Tom Cook', 'Tanya Fox', 'Hellen Schmidt', 'Caroline Schultz', 'Mason Heaney', 'Claudie Smitham', 'Emil Schaefer']
+props:
+  searchable: true
+  searchablePlaceholder: 'Search a person...'
+---
+::
+
+### Attributes
+
+Use the `search-attributes` prop with an array of property names to search on each option object. Nested attributes can be accessed using `dot.notation`. When the property value is an array or object, these are cast to string so these can be searched within.
+
+::component-example
+---
+component: 'select-menu-example-search-attributes'
+componentProps:
+  class: 'w-full lg:w-48'
+---
+::
+
+### Clear on close
+
+By default, the search query will be kept after the menu is closed. To clear it on close, set the `clear-search-on-close` prop.
+
+You can also configure this globally through the `ui.selectMenu.default.clearSearchOnClose` config. Defaults to `false`.
+
+::component-card
+---
+baseProps:
+  class: 'w-full lg:w-48'
+  placeholder: 'Select a person'
+  searchable: true
+  searchablePlaceholder: 'Search a person...'
+  options: ['Wade Cooper', 'Arlene Mccoy', 'Devon Webb', 'Tom Cook', 'Tanya Fox', 'Hellen Schmidt', 'Caroline Schultz', 'Mason Heaney', 'Claudie Smitham', 'Emil Schaefer']
+props:
+  clearSearchOnClose: true
+---
+::
+
+### Control the query
+
+Use a `v-model:query` to control the search query.
+
+::component-example
+---
+component: 'select-menu-example-search-query'
+componentProps:
+  class: 'w-full lg:w-48'
+---
+::
+
+### 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
+---
+component: 'select-menu-example-search-async'
+componentProps:
+  class: 'w-full lg:w-48'
+---
+::
+
+## Creatable
+
+Use the `creatable` prop to enable the creation of new options when the search doesn't return any results (only works with `searchable`).
+
+Try to search for something that doesn't exist in the example below.
+
+::component-example
+---
+component: 'select-menu-example-creatable'
+componentProps:
+  class: 'w-full lg:w-48'
+---
+::
+
+However, if you want to create options despite search query (apart from exact match), you can set the `show-create-option-when` prop to `'always'`.
+
+You can also configure this globally through the `ui.selectMenu.default.showCreateOptionWhen` config. Defaults to `empty`.
+
+Try to search for something that exists in the example below, but not an exact match.
+
+::component-example
+---
+component: 'select-menu-example-creatable-always'
+componentProps:
+  class: 'w-full lg:w-48'
+---
+::
+
+## Popper
+
+Use the `popper` prop to customize the popper instance.
+
+### Arrow
+
+:component-example{component="select-menu-example-arrow"}
+
+### Placement
+
+:component-example{component="select-menu-example-placement"}
+
+### Offset
+
+:component-example{component="select-menu-example-offset"}
+
+## Slots
+
+### `label`
+
+You can override the `#label` slot and handle the display yourself.
+
+::component-example
+---
+component: 'select-menu-example-multiple-slot'
+componentProps:
+  class: 'w-full lg:w-48'
+---
+::
+
+### `default`
+
+You can also override the `#default` slot entirely.
+
+::component-example
+---
+component: 'select-menu-example-button'
+componentProps:
+  class: 'w-full lg:w-48'
+---
+::
+
+### `option`
+
+Use the `#option` slot to customize the option content. You will have access to the `option`, `active` and `selected` properties in the slot scope.
+
+::component-example
+---
+component: 'select-menu-example-option-slot'
+componentProps:
+  class: 'w-full lg:w-48'
+---
+::
+
+### `option-empty`
+
+Use the `#option-empty` slot to customize the content displayed when the `searchable` prop is `true` and there is no options. You will have access to the `query` property in the slot scope.
+
+::component-example
+---
+component: 'select-menu-example-option-empty-slot'
+componentProps:
+  class: 'w-full lg:w-48'
+---
+::
+
+### `option-create`
+
+Use the `#option-create` slot to customize the content displayed when the `creatable` prop is `true` and there is no options. You will have access to the `query` property in the slot scope.
+
+::callout{icon="i-heroicons-light-bulb"}
+An example is available in the [Creatable](#creatable) section.
+::
+
+### `empty`
+
+Use the `#empty` slot to customize the content displayed when there is no options. Defaults to `No options.`.
+
+::component-example
+---
+component: 'select-menu-example-empty-slot'
+componentProps:
+  class: 'w-full lg:w-48'
+---
+::
+
+## Props
+
+:component-props
+
+## Config
+
+::callout{icon="i-heroicons-light-bulb"}
+Use the `ui` prop to override the select config and the `uiMenu` prop to override the menu config.
+::
+
+::tabs{:selectedIndex="1"}
+  :component-preset{label="Select (ui)" slug="Select"}
+  :component-preset{label="SelectMenu (uiMenu)"}
+::

docs/app/content/2.components/select.md

@@ -0,0 +1,241 @@
+---
+description: Display a select field.
+links:
+  - label: GitHub
+    icon: i-simple-icons-github
+    to: https://github.com/nuxt/ui/blob/dev/src/runtime/components/forms/Select.vue
+---
+
+## Usage
+
+The Select component is a wrapper around the native `<select>` HTML element. For more advanced use cases like searching or multiple selection, consider using the [SelectMenu](/components/select-menu) component.
+
+Use a `v-model` to make the Select reactive alongside the `options` prop to pass an array of strings or objects.
+
+:component-example{component="select-example"}
+
+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{component="select-example-objects"}
+
+### Style
+
+Use the `color` and `variant` props to change the visual style of the Select.
+
+::component-card
+---
+baseProps:
+  options:
+    - 'United States'
+    - 'Canada'
+    - 'Mexico'
+props:
+  color: 'primary'
+  variant: 'outline'
+---
+::
+
+Besides all the colors from the `ui.colors` object, you can also use the `white` (default) and `gray` colors with their pre-defined variants.
+
+#### White
+
+::component-card
+---
+baseProps:
+  options:
+    - 'United States'
+    - 'Canada'
+    - 'Mexico'
+props:
+  color: 'white'
+  variant: 'outline'
+excludedProps:
+  - color
+---
+::
+
+#### Gray
+
+::component-card
+---
+baseProps:
+  options:
+    - 'United States'
+    - 'Canada'
+    - 'Mexico'
+props:
+  color: 'gray'
+  variant: 'outline'
+excludedProps:
+  - color
+---
+::
+
+### Size
+
+Use the `size` prop to change the size of the Select.
+
+::component-card
+---
+baseProps:
+  options:
+    - 'United States'
+    - 'Canada'
+    - 'Mexico'
+props:
+  size: 'sm'
+---
+::
+
+### Placeholder
+
+Use the `placeholder` prop to set a placeholder text.
+
+::component-card
+---
+baseProps:
+  options:
+    - 'United States'
+    - 'Canada'
+    - 'Mexico'
+props:
+  placeholder: 'Search...'
+---
+::
+
+### Icon
+
+Use any icon from [Iconify](https://icones.js.org) by setting the `icon` prop by using this pattern: `i-{collection_name}-{icon_name}`.
+
+Use the `trailing-icon` prop to set a different icon or change it globally in `ui.select.default.trailingIcon`. Defaults to `i-heroicons-chevron-down-20-solid`.
+
+::component-card
+---
+baseProps:
+  options:
+    - 'United States'
+    - 'Canada'
+    - 'Mexico'
+  placeholder: 'Search...'
+props:
+  icon: 'i-heroicons-magnifying-glass-20-solid'
+  color: 'white'
+  size: 'sm'
+options:
+  - name: color
+    restriction: included
+    values:
+      - white
+      - gray
+excludedProps:
+  - icon
+---
+::
+
+### Disabled
+
+Use the `disabled` prop to disable the Select.
+
+::component-card
+---
+baseProps:
+  options:
+    - 'United States'
+    - 'Canada'
+    - 'Mexico'
+  placeholder: 'Search...'
+props:
+  disabled: true
+---
+::
+
+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.
+
+Use the `loading-icon` prop to set a different icon or change it globally in `ui.select.default.loadingIcon`. Defaults to `i-heroicons-arrow-path-20-solid`.
+
+::component-card
+---
+baseProps:
+  options:
+    - 'United States'
+    - 'Canada'
+    - 'Mexico'
+  placeholder: 'Search...'
+props:
+  loading: true
+  icon: 'i-heroicons-magnifying-glass-20-solid'
+excludedProps:
+  - icon
+---
+::
+
+### Padded
+
+Use the `padded` prop to remove the padding of the Select.
+
+::component-card
+---
+props:
+  padded: false
+baseProps:
+  placeholder: 'Search...'
+  options:
+    - 'United States'
+    - 'Canada'
+    - 'Mexico'
+  variant: 'none'
+  class: 'w-full'
+---
+::
+
+## Slots
+
+### `leading`
+
+Use the `#leading` slot to set the content of the leading icon.
+
+::component-card
+---
+slots:
+  leading: <UIcon name="i-heroicons-flag" class="w-5 h-5" />
+baseProps:
+  options:
+    - 'United States'
+    - 'Canada'
+    - 'Mexico'
+  placeholder: 'Search...'
+---
+
+#leading
+  :u-icon{name="i-heroicons-flag" class="w-5 h-5"}
+::
+
+### `trailing`
+
+Use the `#trailing` slot to set the content of the trailing icon.
+
+::component-card
+---
+slots:
+  trailing: <UIcon name="i-heroicons-arrows-up-down-20-solid" class="w-5 h-5" />
+baseProps:
+  placeholder: 'Search...'
+---
+
+#trailing
+  :u-icon{name="i-heroicons-arrows-up-down-20-solid" class="w-5 h-5"}
+::
+
+## Props
+
+:component-props
+
+## Config
+
+:component-preset

docs/app/content/2.components/skeleton.md

@@ -0,0 +1,21 @@
+---
+description: Display a placeholder while content is loading.
+links:
+  - label: GitHub
+    icon: i-simple-icons-github
+    to: https://github.com/nuxt/ui/blob/dev/src/runtime/components/layout/Skeleton.vue
+---
+
+## Usage
+
+Use to show a placeholder while content is loading.
+
+:component-example{component="skeleton-example"}
+
+## Props
+
+:component-props
+
+## Config
+
+:component-preset

docs/app/content/2.components/slideover.md

@@ -0,0 +1,80 @@
+---
+description: Display a dialog that slides in from the edge of the screen.
+links:
+  - label: 'Dialog'
+    icon: i-simple-icons-headlessui
+    to: 'https://headlessui.com/vue/dialog'
+  - label: GitHub
+    icon: i-simple-icons-github
+    to: https://github.com/nuxt/ui/blob/dev/src/runtime/components/overlays/Slideover.vue
+---
+
+## Usage
+
+Use a `v-model` to control the Slideover state.
+
+:component-example{component="slideover-example-basic"}
+
+You can put a [Card](/components/card) component inside your Slideover to handle forms and take advantage of `header` and `footer` slots:
+
+:component-example{component="slideover-example-card"}
+
+### Disable overlay
+
+Set the `overlay` prop to `false` to disable it.
+
+:component-example{component="slideover-example-disable-overlay"}
+
+### Disable transition
+
+Set the `transition` prop to `false` to disable it.
+
+:component-example{component="slideover-example-disable-transition"}
+
+### Prevent close
+
+Use the `prevent-close` prop to disable the outside click alongside the `esc` keyboard shortcut. A `close-prevented` event will be emitted when the user tries to close the slideover.
+
+:component-example{component="slideover-example-prevent-close"}
+
+You can still handle the `esc` shortcut yourself by using our [defineShortcuts](/getting-started/shortcuts#defineshortcuts) composable.
+
+```vue
+<script setup lang="ts">
+const isOpen = ref(false)
+
+defineShortcuts({
+  escape: {
+    usingInput: true,
+    whenever: [isOpen],
+    handler: () => { isOpen.value = false }
+  }
+})
+</script>
+```
+
+### Control programmatically :u-badge{label="New" class="align-middle ml-2 !rounded-full" variant="subtle"}
+
+First of all, add the `USlideovers` component to your app, preferably inside `app.vue`.
+
+```vue [app.vue]
+<template>
+  <div>
+    <UContainer>
+      <NuxtPage />
+    </UContainer>
+    <USlideovers />
+  </div>
+</template>
+```
+
+Then, you can use the `useSlideover` composable to control your slideovers within your app.
+
+:component-example{component="slideover-example-composable"}
+## Props
+
+:component-props
+
+## Config
+
+:component-preset

docs/app/content/2.components/table.md

@@ -0,0 +1,478 @@
+---
+description: 'Display data in a table.'
+links:
+  - label: GitHub
+    icon: i-simple-icons-github
+    to: https://github.com/nuxt/ui/blob/dev/src/runtime/components/data/Table.vue
+---
+
+## Usage
+
+Use the `rows` prop to set the data to display in the table. By default, the table will display all the fields of the rows.
+
+::component-example{class="grid"}
+---
+extraClass: 'overflow-hidden'
+padding: false
+component: 'table-example-basic'
+componentProps:
+  class: 'flex-1'
+---
+::
+
+### Columns
+
+Use the `columns` prop to configure which columns to display. It's an array of objects with the following properties:
+
+- `label` - The label to display in the table header. Can be changed through the `column-attribute` prop.
+- `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.
+- `sort` - Pass your own `sort` function. Defaults to a simple _greater than_ / _less than_ comparison.
+
+::component-example{class="grid"}
+---
+extraClass: 'overflow-hidden'
+padding: false
+component: 'table-example-columns'
+componentProps:
+  class: 'flex-1'
+---
+::
+
+You can easily use the [SelectMenu](/components/select-menu) component to change the columns to display.
+
+::component-example{class="grid"}
+---
+extraClass: 'overflow-hidden'
+padding: false
+component: 'table-example-columns-selectable'
+componentProps:
+  class: 'flex-1'
+---
+::
+
+You can apply styles to `tr` and `td` elements by passing a `class` to rows.
+
+Also, you can apply styles to `th` elements by passing a `class` to columns.
+
+::component-example{class="grid"}
+---
+extraClass: 'overflow-hidden'
+padding: false
+component: 'table-example-style'
+componentProps:
+  class: 'w-full'
+---
+::
+
+### Sortable
+
+You can make the columns sortable by setting the `sortable` property to `true` in the column configuration.
+
+You may specify the default direction of each column through the `direction` property. It can be either `asc` or `desc`, but it will default to `asc`.
+
+::component-example{class="grid"}
+---
+extraClass: 'overflow-hidden'
+padding: false
+component: 'table-example-columns-sortable'
+componentProps:
+  class: 'flex-1'
+---
+::
+
+#### Default sorting
+
+You can specify a default sort for the table through the `sort` prop. It's an object with the following properties:
+
+- `column` - The column to sort by.
+- `direction` - The sort direction. Can be either `asc` or `desc` and defaults to `asc`.
+
+This will set the default sort and will work even if no column is set as `sortable`.
+
+```vue
+<script setup lang="ts">
+const sort = ref({
+  column: 'name',
+  direction: 'desc'
+})
+
+const columns = [{
+  label: 'Name',
+  key: 'name',
+  sortable: true
+}]
+
+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'
+}]
+</script>
+
+<template>
+  <UTable :sort="sort" :columns="columns" :rows="people" />
+</template>
+```
+
+#### Reactive sorting
+
+You can use a `v-model:sort` to make the sorting reactive. You may also use `@update:sort` to call your own function with the sorting data.
+
+When fetching data from an API, we can take advantage of the [`useFetch`](https://nuxt.com/docs/api/composables/use-fetch) or [`useAsyncData`](https://nuxt.com/docs/api/composables/use-async-data) composables to fetch the data based on the sorting column and direction every time the `sort` reactive element changes.
+
+When doing so, you might want to set the `sort-mode` prop to `manual` to disable the automatic sorting and return the rows as is.
+
+```vue
+<script setup lang="ts">
+// Ensure it uses `ref` instead of `reactive`.
+const sort = ref({
+  column: 'name',
+  direction: 'desc'
+})
+
+const columns = [{
+  label: 'Name',
+  key: 'name',
+  sortable: true
+}]
+
+const { data, pending } = await useLazyFetch(() => `/api/users?orderBy=${sort.value.column}&order=${sort.value.direction}`)
+</script>
+
+<template>
+  <UTable v-model:sort="sort" :loading="pending" :columns="columns" :rows="data" sort-mode="manual" />
+</template>
+```
+
+::callout{icon="i-heroicons-light-bulb" to="https://nuxt.com/docs/api/composables/use-fetch#params" target="_blank"}
+We pass a function to `useLazyFetch` here to make the url reactive but you can use the `query` / `params` options alongside `watch`.
+::
+
+#### Custom sorting
+
+Use the `sort-button` prop to customize the sort button in the header. You can pass all the props of the [Button](/components/button) component to customize it through this prop or globally through `ui.table.default.sortButton`. Its icon defaults to `i-heroicons-arrows-up-down-20-solid`.
+
+::component-card{class="grid"}
+---
+extraClass: 'overflow-hidden'
+padding: false
+baseProps:
+  class: 'w-full'
+  columns:
+    - key: 'id'
+      label: 'ID'
+    - key: 'name'
+      label: 'Name'
+      sortable: true
+    - key: 'title'
+      label: 'Title'
+      sortable: true
+    - key: 'email'
+      label: 'Email'
+      sortable: true
+    - key: 'role'
+      label: 'Role'
+  rows:
+    - 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'
+props:
+  sortAscIcon: 'i-heroicons-arrow-up-20-solid'
+  sortDescIcon: 'i-heroicons-arrow-down-20-solid'
+  sortButton:
+    icon: 'i-heroicons-sparkles-20-solid'
+    color: 'primary'
+    variant: 'outline'
+    size: '2xs'
+    square: false
+    ui:
+      rounded: 'rounded-full'
+excludedProps:
+  - sortButton
+  - sortAscIcon
+  - sortDescIcon
+---
+::
+
+Use the `sort-asc-icon` prop to set a different icon or change it globally in `ui.table.default.sortAscIcon`. Defaults to `i-heroicons-bars-arrow-up-20-solid`.
+
+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`.
+
+::callout{icon="i-heroicons-light-bulb"}
+You can also customize the entire header cell, read more in the [Slots](#slots) section.
+::
+
+### Selectable
+
+Use a `v-model` to make the table selectable. The `v-model` will be an array of the selected rows.
+
+::component-example{class="grid"}
+---
+extraClass: 'overflow-hidden'
+padding: false
+component: 'table-example-selectable'
+componentProps:
+  class: 'flex-1'
+---
+::
+
+::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 also 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"}
+---
+extraClass: 'overflow-hidden'
+padding: false
+component: 'table-example-clickable'
+componentProps:
+  class: 'flex-1'
+---
+::
+
+### Searchable
+
+You can easily use the [Input](/components/input) component to filter the rows.
+
+::component-example{class="grid"}
+---
+extraClass: 'overflow-hidden'
+padding: false
+component: 'table-example-searchable'
+componentProps:
+  class: 'flex-1'
+---
+::
+
+### Paginable
+
+You can easily use the [Pagination](/components/pagination) component to paginate the rows.
+
+::component-example{class="grid"}
+---
+extraClass: 'overflow-hidden'
+padding: false
+component: 'table-example-paginable'
+componentProps:
+  class: 'flex-1'
+---
+::
+
+### Loading
+
+Use the `loading` prop to indicate that data is currently loading with an indeterminate [Progress](/components/progress#indeterminate) bar.
+
+You can use the `progress` prop to customize the `color` and `animation` of the progress bar or change them globally in `ui.table.default.progress` (you can set it to `null` to hide the progress bar).
+
+If there is no rows provided, a loading state will also be displayed. You can use the `loading-state` prop to customize the `icon` and `label` or change them globally in `ui.table.default.loadingState` (you can set it to `null` to hide the loading state).
+
+::component-card
+---
+extraClass: 'overflow-hidden'
+padding: false
+baseProps:
+  class: 'w-full'
+  columns:
+    - key: 'id'
+      label: 'ID'
+    - key: 'name'
+      label: 'Name'
+    - key: 'title'
+      label: 'Title'
+    - key: 'email'
+      label: 'Email'
+    - key: 'role'
+      label: 'Role'
+props:
+  loading: true
+  loadingState:
+    icon: 'i-heroicons-arrow-path-20-solid'
+    label: "Loading..."
+  progress:
+    color: 'primary'
+    animation: 'carousel'
+excludedProps:
+  - loadingState
+  - progress
+---
+::
+
+This can be easily used with Nuxt `useAsyncData` composable.
+
+```vue
+<script setup lang="ts">
+const columns = [...]
+
+const { pending, data: people } = await useLazyAsyncData('people', () => $fetch('/api/people'))
+</script>
+
+<template>
+  <UTable :rows="people" :columns="columns" :loading="pending" />
+</template>
+```
+
+### Empty
+
+An empty state will be displayed when there are no results.
+
+Use the `empty-state` prop to customize the `icon` and `label` or change them globally in `ui.table.default.emptyState`.
+
+You can also set it to `null` to hide the empty state.
+
+::component-card
+---
+extraClass: 'overflow-hidden'
+padding: false
+baseProps:
+  class: 'w-full'
+  columns:
+    - key: 'id'
+      label: 'ID'
+    - key: 'name'
+      label: 'Name'
+    - key: 'title'
+      label: 'Title'
+    - key: 'email'
+      label: 'Email'
+    - key: 'role'
+      label: 'Role'
+props:
+  emptyState:
+    icon: 'i-heroicons-circle-stack-20-solid'
+    label: "No items."
+excludedProps:
+  - emptyState
+---
+::
+
+## Slots
+
+You can use slots to customize the header and data cells of the table.
+
+### `<column>-header`
+
+Use the `#<column>-header` slot to customize the header cell of a column. You will have access to the `column`, `sort` and `on-sort` properties in the slot scope.
+
+The `sort` property is an object with the following properties:
+
+- `field` - The field to sort by.
+- `direction` - The direction to sort by. Can be `asc` or `desc`.
+
+The `on-sort` property is a function that you can call to sort the table and accepts the column as parameter.
+
+::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.
+::
+
+### `<column>-data`
+
+Use the `#<column>-data` slot to customize the data cell of a column. You will have access to the `row`, `column` and `getRowData` properties in the slot scope.
+
+You can for example create an extra column for actions with a [Dropdown](/components/dropdown) component inside or change the color of the rows based on a selection.
+
+::component-example{class="grid"}
+---
+extraClass: 'overflow-hidden'
+padding: false
+component: 'table-example-slots'
+componentProps:
+  class: 'flex-1'
+---
+::
+
+### `loading-state`
+
+Use the `#loading-state` slot to customize the loading state.
+
+::component-example{class="grid"}
+---
+extraClass: 'overflow-hidden'
+padding: false
+component: 'table-example-loading-slot'
+componentProps:
+  class: 'flex-1'
+---
+::
+
+### `empty-state`
+
+Use the `#empty-state` slot to customize the empty state.
+
+::component-example{class="grid"}
+---
+extraClass: 'overflow-hidden'
+padding: false
+component: 'table-example-empty-slot'
+componentProps:
+  class: 'flex-1'
+---
+::
+
+## Props
+
+:component-props
+
+## Config
+
+:component-preset
+
+## Example
+
+Here is an example of a Table component with all its features implemented.
+
+::component-example
+---
+extraClass: 'overflow-hidden'
+padding: false
+component: 'table-example-advanced'
+componentProps:
+  class: 'flex-1'
+hiddenCode: true
+---
+::
+
+::callout{icon="i-simple-icons-github" to="https://github.com/nuxt/ui/blob/dev/docs/components/content/examples/TableExampleAdvanced.vue" target="_blank"}
+Take a look at the component!
+::

docs/app/content/2.components/tabs.md

@@ -0,0 +1,108 @@
+---
+description: A set of tab panels that are displayed one at a time.
+links:
+  - label: GitHub
+    icon: i-simple-icons-github
+    to: https://github.com/nuxt/ui/blob/dev/src/runtime/components/navigation/Tabs.vue
+---
+
+## Usage
+
+Pass an array to the `items` prop of the Tabs component. Each item can have the following properties:
+
+- `label` - The label of the item.
+- `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.
+
+::component-example
+---
+component: 'tabs-example-basic'
+componentProps:
+  class: 'w-full'
+---
+::
+
+### Vertical
+
+You can change the orientation of the tabs by setting the `orientation` prop to `vertical`.
+
+::component-example
+---
+component: 'tabs-example-vertical'
+componentProps:
+  class: 'w-full'
+---
+::
+
+### Default index
+
+You can set the default index of the tabs by setting the `default-index` prop.
+
+::component-example
+---
+component: 'tabs-example-index'
+componentProps:
+  class: 'w-full'
+---
+::
+
+::callout{icon="i-heroicons-exclamation-triangle"}
+  This will have no effect if you are using a `v-model` to control the selected index.
+::
+
+### Listen to changes
+
+You can listen to changes by using the `@change` event. The event will emit the index of the selected item.
+
+::component-example
+---
+component: 'tabs-example-change'
+componentProps:
+  class: 'w-full'
+---
+::
+
+### Control the selected index
+
+Use a `v-model` to control the selected index.
+
+::component-example
+---
+component: 'tabs-example-v-model'
+componentProps:
+  class: 'w-full'
+---
+::
+
+::callout{icon="i-heroicons-information-circle"}
+In this example, we are binding tabs to the route query. Refresh the page to see the selected tab change.
+::
+
+## Slots
+
+You can use slots to customize the buttons and items content of the Accordion.
+
+### `default`
+
+Use the `#default` slot to customize the content of the trigger buttons. You will have access to the `item`, `index`, `selected` and `disabled` in the slot scope.
+
+:component-example{component="tabs-example-default-slot"}
+
+### `item`
+
+Use the `#item` slot to customize the items content. You will have access to the `item`, `index` and `selected` properties in the slot scope.
+
+:component-example{component="tabs-example-item-slot"}
+
+You can also pass a `slot` property to customize a specific item.
+
+:component-example{component="tabs-example-item-custom-slot"}
+
+## Props
+
+:component-props
+
+## Config
+
+:component-preset

docs/app/content/2.components/textarea.md

@@ -0,0 +1,169 @@
+---
+description: Display a textarea field.
+links:
+  - label: GitHub
+    icon: i-simple-icons-github
+    to: https://github.com/nuxt/ui/blob/dev/src/runtime/components/forms/Textarea.vue
+---
+
+## Usage
+
+Use a `v-model` to make the Textarea reactive.
+
+:component-example{component="textarea-example"}
+
+### Style
+
+Use the `color` and `variant` props to change the visual style of the Textarea.
+
+::component-card
+---
+baseProps:
+  placeholder: 'Search...'
+props:
+  color: 'primary'
+  variant: 'outline'
+---
+::
+
+Besides all the colors from the `ui.colors` object, you can also use the `white` (default) and `gray` colors with their pre-defined variants.
+
+#### White
+
+::component-card
+---
+baseProps:
+  placeholder: 'Search...'
+props:
+  color: 'white'
+  variant: 'outline'
+excludedProps:
+  - color
+---
+::
+
+#### Gray
+
+::component-card
+---
+baseProps:
+  placeholder: 'Search...'
+props:
+  color: 'gray'
+  variant: 'outline'
+excludedProps:
+  - color
+---
+::
+
+### Size
+
+Use the `size` prop to change the size of the Textarea.
+
+::component-card
+---
+baseProps:
+props:
+  size: 'sm'
+---
+::
+
+### Placeholder
+
+Use the `placeholder` prop to set a placeholder text.
+
+::component-card
+---
+props:
+  placeholder: 'Search...'
+---
+::
+
+### Rows
+
+Use the `rows` prop to set the number of rows of the Textarea.
+
+::component-card
+---
+baseProps:
+  placeholder: 'Search...'
+props:
+  rows: 1
+---
+::
+
+### Disabled
+
+Use the `disabled` prop to disable the Textarea.
+
+::component-card
+---
+baseProps:
+  placeholder: 'Search...'
+props:
+  disabled: true
+---
+::
+
+### Autoresize
+
+Use the `autoresize` prop to enable the autoresize. Writing more lines than the `rows` prop will make the Textarea grow up.
+
+::component-card
+---
+baseProps:
+  placeholder: 'Search...'
+  modelValue: 'Here is an autoresize Textarea, write new lines to make the Textarea grow up...'
+props:
+  autoresize: true
+---
+::
+
+Use the `maxrows` prop to set a maximum number of rows when autoresizing. If set to `0`, the Textarea will infinitely grow up. :u-badge{label="New" class="!rounded-full" variant="subtle"}
+
+::component-card
+---
+baseProps:
+  placeholder: 'Search...'
+  modelValue: 'Here is an autoresize Textarea, write new lines to make the Textarea grow up at a maximum of 5 rows...'
+props:
+  autoresize: true
+  maxrows: 5
+---
+::
+
+### Resize
+
+Use the `resize` prop to enable the resize control.
+
+::component-card
+---
+baseProps:
+  placeholder: 'Search...'
+props:
+  resize: true
+---
+::
+
+### Padded
+
+Use the `padded` prop to remove the padding of the Textarea.
+
+::component-card
+---
+props:
+  padded: false
+baseProps:
+  placeholder: 'Search...'
+  variant: 'none'
+  class: 'w-full'
+---
+::
+
+## Props
+
+:component-props
+
+## Config
+
+:component-preset

docs/app/content/2.components/toggle.md

@@ -0,0 +1,86 @@
+---
+description: Display a toggle field.
+links:
+  - label: 'Switch'
+    icon: i-simple-icons-headlessui
+    to: 'https://headlessui.com/vue/switch'
+  - label: GitHub
+    icon: i-simple-icons-github
+    to: https://github.com/nuxt/ui/blob/dev/src/runtime/components/forms/Toggle.vue
+---
+
+## Usage
+
+Use a `v-model` to make the Toggle reactive.
+
+:component-example{component="toggle-example"}
+
+### Style
+
+Use the `color` prop to change the style of the Toggle.
+
+::component-card
+---
+props:
+  color: 'primary'
+---
+::
+
+### Size
+
+Use the `size` prop to change the size of the Toggle.
+
+::component-card
+---
+props:
+  size: 'md'
+---
+::
+
+### 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`.
+
+::component-card
+---
+props:
+  onIcon: 'i-heroicons-check-20-solid'
+  offIcon: 'i-heroicons-x-mark-20-solid'
+excludedProps:
+  - onIcon
+  - offIcon
+---
+::
+
+### Loading :u-badge{label="New" class="align-middle ml-2 !rounded-full" variant="subtle"}
+
+Use the `loading` prop to show a loading icon and disable the Toggle.
+
+Use the `loading-icon` prop to set a different icon or change it globally in `ui.toggle.default.loadingIcon`. Defaults to `i-heroicons-arrow-path-20-solid`.
+
+::component-card
+---
+props:
+  loading: true
+---
+::
+
+### Disabled
+
+Use the `disabled` prop to disable the Toggle.
+
+::component-card
+---
+props:
+  disabled: true
+---
+::
+
+
+## Props
+
+:component-props
+
+## Config
+
+:component-preset

docs/app/content/2.components/tooltip.md

@@ -0,0 +1,51 @@
+---
+description: Display content that appears on hover next to an element.
+links:
+  - label: GitHub
+    icon: i-simple-icons-github
+    to: https://github.com/nuxt/ui/blob/dev/src/runtime/components/overlays/Tooltip.vue
+---
+
+## Usage
+
+:component-example{component="tooltip-example"}
+
+## Popper
+
+Use the `popper` prop to customize the popper instance.
+
+### Arrow
+
+:component-example{component="tooltip-example-arrow"}
+
+### Placement
+
+:component-example{component="tooltip-example-placement"}
+
+### Offset
+
+:component-example{component="tooltip-example-offset"}
+
+## Slots
+
+### `text`
+
+Use the `#text` slot to override the content of the text.
+
+::component-card
+---
+slots:
+  text: <span class="italic">Hello World!</span>
+---
+
+#text
+  [Hello World!]{.italic}
+::
+
+## Props
+
+:component-props
+
+## Config
+
+:component-preset

docs/app/content/2.components/vertical-navigation.md

@@ -0,0 +1,72 @@
+---
+title: VerticalNavigation
+description: Display a list of vertical links.
+links:
+  - label: GitHub
+    icon: i-simple-icons-github
+    to: https://github.com/nuxt/ui/blob/dev/src/runtime/components/navigation/VerticalNavigation.vue
+---
+
+## Usage
+
+Pass an array to the `links` prop of the VerticalNavigation component. Each link can have the following properties:
+
+- `label` - The label of the link.
+- `labelClass` - The class of the link label.
+- `icon` - The icon of the link.
+- `iconClass` - The class of the link icon.
+- `avatar` - The avatar of the link. You can pass all the props of the [Avatar](/components/avatar) component.
+- `badge` - A badge to display next to the label. You can pass all the props of the [Badge](/components/badge) component.
+- `click` - The click handler of the link.
+
+You can also pass any property from the [NuxtLink](https://nuxt.com/docs/api/components/nuxt-link#props) component such as `to`, `exact`, etc.
+
+:component-example{component="vertical-navigation-example"}
+
+## Sections
+
+Group your navigation links into distinct sections, separated by a divider. You can do this by passing an array of arrays to the `links` prop of the VerticalNavigation component.
+
+:component-example{component="vertical-navigation-example-sections"}
+
+## Slots
+
+You can use slots to customize links display.
+
+### `default`
+
+Use the `#default` slot to customize the link label. You will have access to the `link` and `isActive` properties in the slot scope.
+
+:component-example{component="vertical-navigation-example-default-slot"}
+
+### `avatar`
+
+Use the `#avatar` slot to customize the link avatar. You will have access to the `link` and `isActive` properties in the slot scope.
+
+:component-example{component="vertical-navigation-example-avatar-slot"}
+
+### `icon`
+
+Use the `#icon` slot to customize the link icon. You will have access to the `link` and `isActive` properties in the slot scope.
+
+:component-example{component="vertical-navigation-example-icon-slot"}
+
+### `badge`
+
+Use the `#badge` slot to customize the link badge. You will have access to the `link` and `isActive` properties in the slot scope.
+
+:component-example{component="vertical-navigation-example-badge-slot"}
+
+## Props
+
+:component-props
+
+## Config
+
+:component-preset
+
+## Example
+
+Here is an example illustrating how you can customize the appearance of the `VerticalNavigation` component by utilizing its `ui` prop.
+
+:component-example{component="vertical-navigation-example-theme-tailwind"}

docs/app/content/index.yml

@@ -0,0 +1,191 @@
+navigation: false
+title: 'Nuxt UI: A UI Library for Modern Web Apps'
+description: 'It provides everything related to UI when building your Nuxt app. This includes components, icons, colors, dark mode but also keyboard shortcuts. Built with Headless UI and Tailwind CSS, published under MIT License.'
+hero:
+  title: 'A <span class="text-primary">UI Library</span> for<br class="hidden lg:block"> Modern Web Apps'
+  description: 'Nuxt UI simplifies the creation of stunning and responsive web applications with its<br class="hidden lg:block"> comprehensive collection of fully styled and customizable UI components designed for Nuxt.'
+sections:
+  - slot: demo
+    class: 'hidden lg:block dark:bg-gradient-to-b from-gray-900 to-gray-950/50 !pt-12'
+  - title: Everything you expect from a<br class="hidden lg:block"> <span class="text-primary">UI component library</span>
+    slot: features
+    class: 'dark:bg-gradient-to-b from-gray-900 to-gray-950/50 dark:lg:bg-none dark:lg:bg-gray-950/50'
+    cards:
+      - title: Color Palette
+        description: 'Choose a primary and a gray color from your Tailwind CSS color palette. Components will be styled accordingly.'
+        icon: i-heroicons-swatch
+        to: /getting-started/theming#colors
+        class: 'col-span-7 row-span-3'
+        image:
+          path: /illustrations/color-palette
+          width: 363
+          height: 152
+        orientation: 'horizontal'
+      - title: Fully Customizable
+        description: 'Change the style of any component in your App Config or customize them specifically through the ui prop.'
+        icon: i-heroicons-wrench-screwdriver
+        to: /getting-started/theming#components
+        image:
+          path: /illustrations/fully-customizable
+          width: 444
+          height: 160
+        class: 'col-span-5 row-span-5 lg:mb-10'
+        orientation: 'vertical'
+      - title: Icons
+        description: 'Choose any of the 100k+ icons from the most popular icon libraries with the Icon component or the icon prop.'
+        icon: i-heroicons-face-smile
+        to: /getting-started/theming#icons
+        image:
+          path: /illustrations/icon-library
+          width: 362
+          height: 184
+        class: 'col-span-7 row-span-3'
+        orientation: 'horizontal'
+      - title: Light & Dark
+        description: 'Every component is designed with dark mode in mind. Works out of the box with @nuxtjs/color-mode.'
+        to: /getting-started/theming#dark-mode
+        icon: i-heroicons-moon
+        image:
+          path: /illustrations/dark-mode
+          width: 444
+          height: 160
+        class: 'col-span-5 row-span-5 lg:-mt-10 lg:mb-20'
+        orientation: 'vertical'
+      - title: Keyboard Shortcuts
+        description: 'Nuxt UI comes with a set of Vue composables to easily handle keyboard shortcuts in your app.'
+        icon: i-heroicons-computer-desktop
+        to: /getting-started/shortcuts
+        class: 'col-span-7 row-span-3'
+        image:
+          path: /illustrations/keyboard-shortcuts
+          width: 444
+          height: 160
+        orientation: 'horizontal'
+    links:
+      - label: Explore 40+ components
+        to: /components
+        color: black
+        size: lg
+        icon: i-heroicons-cube
+      - label: Star on GitHub
+        to: https://github.com/nuxt/ui
+        target: _blank
+        color: white
+        size: lg
+        icon: i-simple-icons-github
+cta:
+  title: Trusted and supported by our<br class="hidden lg:block"> amazing community
+pro:
+  title: Upgrade to <span class="text-primary">Nuxt UI Pro</span>
+  description: 'Nuxt UI Pro is a collection of premium Vue components built on top of Nuxt UI to create beautiful & responsive Nuxt applications in minutes.<br>It includes all primitives to build landing pages, documentations, blogs, dashboards or entire SaaS products.'
+  links:
+    - label: Buy now
+      to: /pro/pricing
+      color: black
+      trailingIcon: i-heroicons-arrow-right-20-solid
+      size: lg
+    - label: Explore templates
+      to: /pro/templates
+      color: gray
+      icon: i-heroicons-computer-desktop
+      size: lg
+  sections:
+    - title: The freedom to build anything
+      description: Nuxt UI Pro ships with an extensive set of advanced components that cover a wide range of use-cases. Carefully crafted to reduce boilerplate code without sacrificing flexibility.
+      id: features
+      align: left
+      features:
+        - name: Fully customizable
+          description: Like Nuxt UI, change the style of any component from your App Config or customize them specifically through the ui prop.
+          icon: i-heroicons-wrench-screwdriver
+        - name: Slots for everything
+          description: Each component leverages the power of Vue's slots to give you the flexibility to build anything.
+          icon: i-heroicons-square-3-stack-3d
+        - name: Responsive by design
+          description: Nuxt UI Pro components aims to structure your content, they are responsive by design and will adapt to any screen size.
+          icon: i-heroicons-device-phone-mobile
+      links:
+        - label: Explore components
+          to: /pro/components
+          color: gray
+          icon: i-heroicons-arrow-right-20-solid
+          trailing: true
+          size: md
+          class: ml-8
+      code: |
+        ```vue [app.vue]
+        <script setup lang="ts">
+        const links = [
+          { to: '/', label: 'Home' },
+          { to: '/about', label: 'About' },
+          { to: '/contact', label: 'Contact' }
+        ]
+        </script>
+
+        <template>
+          <UHeader :links="links" />
+
+          <UMain>
+            <ULandingHero title="Hello World" />
+
+            <ULandingSection title="Features">
+              <UPageGrid>
+                <ULandingCard title="First Card" />
+                <ULandingCard title="Second Card" />
+                <ULandingCard title="Third Card" />
+              </UPageGrid>
+            </ULandingSection>
+          </UMain>
+
+          <UFooter />
+        </template>
+        ```
+    - title: The flexibility to control your data
+      description: Although you can use any data source you want, Nuxt UI Pro is fully integrated with Nuxt Content and provides additional features when the module is detected.
+      align: right
+      features:
+        - name: 'Write Markdown with ease'
+          description: Nuxt UI Pro overrides Nuxt Content prose components to make them awesome but also adds new ones like Callout, CodeGroup, Field, etc.
+          icon: i-simple-icons-markdown
+        - name: 'Beautiful Typography styles'
+          description: Tailwind CSS typography plugin is pre-configured and styled to match Nuxt UI components and colors.
+          icon: i-heroicons-paint-brush
+        - name: Full-Text Search out of the box
+          description: 'Nuxt UI Pro ships with a ready to use command palette component. No need to setup Algolia DocSearch anymore.'
+          icon: i-heroicons-magnifying-glass
+      links:
+        - label: Nuxt Content integration
+          to: /pro/getting-started/content
+          color: gray
+          icon: i-heroicons-arrow-right-20-solid
+          trailing: true
+          size: md
+          class: ml-8
+      code: |
+        ```vue [pages/\[...slug\\].vue]
+        <script setup lang="ts">
+        const route = useRoute()
+
+        const { data: page } = await useAsyncData(route.path, () => queryContent(route.path).findOne())
+        </script>
+
+        <template>
+          <UPage>
+            <UPageHeader :title="page.title" :description="page.description" :links="page.links" />
+
+            <UPageBody prose>
+              <ContentRenderer v-if="page.body" :value="page" />
+            </UPageBody>
+
+            <template #right>
+              <UContentToc :links="page.body.toc.links" />
+            </template>
+          </UPage>
+        </template>
+        ```
+  landing:
+    title: Start with a landing page
+    description: Stop wasting time building another landing page, Nuxt UI Pro flexible components will allow you to focus on your content.
+  docs:
+    title: Build your docs in seconds
+    description: Whether you're creating documentation for your open source project or explaining your product, Nuxt UI Pro has you covered.

docs/app/content/releases.yml

@@ -0,0 +1,16 @@
+navigation: false
+title: '<span class="text-primary">Nuxt UI</span> Releases'
+head.title: Releases
+description: Follow the latest releases and updates happening on the nuxt/ui repository.
+links:
+  - label: Get Started
+    trailingIcon: i-heroicons-arrow-right-20-solid
+    to: /getting-started
+    size: md
+    color: black
+  - label: View on GitHub
+    icon: i-simple-icons-github
+    to: https://github.com/nuxt/ui/releases
+    target: _blank
+    size: md
+    color: white

docs/app/error.vue

@@ -0,0 +1,94 @@
+<script setup lang="ts">
+import type { NuxtError } from '#app'
+import type { ContentSearchFile } from '#ui-pro/types'
+
+useSeoMeta({
+  title: 'Page not found',
+  description: 'We are sorry but this page could not be found.'
+})
+
+defineProps<{
+  error: NuxtError
+}>()
+
+const route = useRoute()
+// const colorMode = useColorMode()
+// const { branch } = useContentSource()
+const runtimeConfig = useRuntimeConfig()
+const { integrity, api } = runtimeConfig.public.content
+
+const { data: navigation } = await useAsyncData('navigation', () => fetchContentNavigation(), { default: () => [] })
+const { data: files } = await useLazyFetch<ContentSearchFile[]>(`${api.baseURL}/search${integrity ? '.' + integrity : ''}`, { default: () => [] })
+
+// Computed
+
+// const color = computed(() => colorMode.value === 'dark' ? '#18181b' : 'white')
+
+const links = computed(() => {
+  return [{
+    label: 'Docs',
+    icon: 'i-heroicons-book-open',
+    to: '/getting-started',
+    active: route.path.startsWith('/getting-started') || route.path.startsWith('/components')
+  }, ...(navigation.value.find(item => item._path === '/pro') ? [{
+    label: 'Pro',
+    icon: 'i-heroicons-square-3-stack-3d',
+    to: '/pro',
+    active: route.path.startsWith('/pro/getting-started') || route.path.startsWith('/pro/components') || route.path.startsWith('/pro/prose')
+  }, {
+    label: 'Pricing',
+    icon: 'i-heroicons-credit-card',
+    to: '/pro/pricing'
+  }, {
+    label: 'Templates',
+    icon: 'i-heroicons-computer-desktop',
+    to: '/pro/templates'
+  }] : []), {
+    label: 'Releases',
+    icon: 'i-heroicons-rocket-launch',
+    to: '/releases'
+  }].filter(Boolean)
+})
+
+// Head
+
+useHead({
+  meta: [
+    { name: 'viewport', content: 'width=device-width, initial-scale=1' },
+    // { key: 'theme-color', name: 'theme-color', content: color }
+  ],
+  link: [
+    { rel: 'icon', type: 'image/svg+xml', href: '/icon.svg' }
+  ],
+  htmlAttrs: {
+    lang: 'en'
+  }
+})
+
+// Provide
+
+provide('navigation', navigation)
+provide('files', files)
+</script>
+
+<template>
+  <UApp>
+    <NuxtLoadingIndicator />
+
+    <Header :links="links" />
+
+    <UContainer>
+      <UMain>
+        <UPage>
+          <!-- <UPageError :error="error" /> -->
+        </UPage>
+      </UMain>
+    </UContainer>
+
+    <Footer />
+
+    <!-- <ClientOnly>
+      <LazyUContentSearch :files="files" :navigation="navigation" :links="links" :fuse="{ resultLimit: 42 }" />
+    </ClientOnly> -->
+  </UApp>
+</template>

docs/app/layouts/default.vue

@@ -0,0 +1,5 @@
+<template>
+  <div>
+    <slot />
+  </div>
+</template>

docs/app/layouts/docs.vue

@@ -0,0 +1,25 @@
+<template>
+  <UMain>
+    <UContainer>
+      <UPage>
+        <template #left>
+          <UPageAside>
+            <!-- <BranchSelect /> -->
+
+            <UContentNavigation :navigation="navigation" />
+          </UPageAside>
+        </template>
+
+        <slot />
+      </UPage>
+    </UContainer>
+  </UMain>
+</template>
+
+<script setup lang="ts">
+import type { NavItem } from '@nuxt/content/dist/runtime/types'
+
+const nav = inject<Ref<NavItem[]>>('navigation')
+
+const navigation = computed(() => nav.value.filter(item => !item._path.startsWith('/pro')))
+</script>

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

@@ -0,0 +1,121 @@
+<script setup lang="ts">
+import { withoutTrailingSlash } from 'ufo'
+
+const route = useRoute()
+// const { branch } = useContentSource()
+
+definePageMeta({
+  layout: 'docs'
+})
+
+const { data: page } = await useAsyncData(route.path, () => queryContent(route.path).findOne())
+if (!page.value) {
+  throw createError({ statusCode: 404, statusMessage: 'Page not found', fatal: true })
+}
+
+// const { data: surround } = await useAsyncData(`${route.path}-surround`, () => {
+//   return queryContent()
+//     .where({
+//       _extension: 'md',
+//       _path: {
+//         [branch.value?.name === 'dev' ? '$eq' : '$ne']: new RegExp('^/dev')
+//       },
+//       navigation: {
+//         $ne: false
+//       }
+//     })
+//     .only(['title', 'description', '_path'])
+//     .findSurround(withoutTrailingSlash(route.path))
+// })
+
+// const headline = computed(() => findPageHeadline(page.value))
+
+useSeoMeta({
+  titleTemplate: '%s - Nuxt UI',
+  title: page.value.title,
+  ogTitle: `${page.value.title} - Nuxt UI`,
+  description: page.value.description,
+  ogDescription: page.value.description
+})
+
+defineOgImage({
+  component: 'Docs',
+  title: page.value.title,
+  description: page.value.description,
+  // headline: headline.value
+})
+
+const communityLinks = computed(() => [{
+  icon: 'i-heroicons-pencil-square',
+  label: 'Edit this page',
+  to: `https://github.com/nuxt/ui/edit/dev/docs/content/${branch.value?.name === 'dev' ? page?.value?._file.split('/').slice(1).join('/') : page?.value?._file}`,
+  target: '_blank'
+}, {
+  icon: 'i-heroicons-star',
+  label: 'Star on GitHub',
+  to: 'https://github.com/nuxt/ui',
+  target: '_blank'
+}, {
+  icon: 'i-heroicons-lifebuoy',
+  label: 'Contributing',
+  to: '/getting-started/contributing'
+}, {
+  label: 'Roadmap',
+  icon: 'i-heroicons-map',
+  to: '/roadmap'
+}])
+
+const resourcesLinks = [{
+  icon: 'i-simple-icons-figma',
+  label: 'Figma Kit',
+  to: 'https://www.figma.com/community/file/1288455405058138934',
+  target: '_blank'
+}, {
+  label: 'Playground',
+  icon: 'i-simple-icons-stackblitz',
+  to: 'https://stackblitz.com/edit/nuxt-ui',
+  target: '_blank'
+}, {
+  icon: 'i-simple-icons-nuxtdotjs',
+  label: 'Nuxt docs',
+  to: 'https://nuxt.com',
+  target: '_blank'
+}]
+</script>
+
+<template>
+  <UPage>
+    <!-- <UPageHeader :title="page.title" :description="page.description" :links="page.links" :headline="headline" />
+
+    <UPageBody prose>
+      <ContentRenderer v-if="page.body" :value="page" />
+
+      <hr v-if="surround?.length">
+
+      <UContentSurround :surround="surround" />
+    </UPageBody>
+
+    <template v-if="page?.body?.toc?.links?.length" #right>
+      <UContentToc :links="page.body.toc.links">
+        <template #bottom>
+          <div class="hidden lg:block space-y-6 !mt-6">
+            <UDivider v-if="page.body?.toc?.links?.length" type="dashed" />
+
+            <UPageLinks title="Community" :links="communityLinks" />
+
+            <UDivider type="dashed" />
+
+            <UPageLinks title="Resources" :links="resourcesLinks" />
+
+            <UDivider type="dashed" />
+
+            <div class="space-y-3">
+              <AdsPro />
+              <AdsCarbon />
+            </div>
+          </div>
+        </template>
+      </UContentToc>
+    </template> -->
+  </UPage>
+</template>

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

@@ -0,0 +1,11 @@
+<script setup lang="ts">
+const route = useRoute()
+
+const name = route.params.slug[0]
+</script>
+
+<template>
+  <div class="p-4 flex flex-col justify-center h-screen overflow-auto">
+    <component :is="name" />
+  </div>
+</template>

docs/app/pages/index.vue

@@ -0,0 +1,837 @@
+<script setup lang="ts">
+import type { ParsedContent, NavItem } from '@nuxt/content/dist/runtime/types'
+import { useElementBounding, useWindowScroll, useElementSize, breakpointsTailwind, useBreakpoints } from '@vueuse/core'
+import type { HomeProBlock } from '~/types'
+
+const { data: page } = await useAsyncData('index', () => queryContent('/dev').findOne())
+const { data: module } = await useFetch<{
+  stats: {
+    downloads: number
+    stars: number
+  }
+  contributors: {
+    username: string
+  }[]
+}>('https://api.nuxt.com/modules/ui', {
+  transform: ({ stats, contributors }) => ({ stats, contributors })
+})
+
+const navigation = inject<Ref<NavItem[]>>('navigation')
+
+useSeoMeta({
+  titleTemplate: '',
+  title: page.value.title,
+  ogTitle: page.value.title,
+  description: page.value.description,
+  ogDescription: page.value.description,
+  ogImage: 'https://ui.nuxt.com/social-card.png',
+  twitterImage: 'https://ui.nuxt.com/social-card.png'
+})
+
+const source = ref('npm i @nuxt/ui')
+const sectionRef = ref()
+const demoRef = ref()
+const start = ref(0)
+
+const { height } = useElementSize(demoRef)
+const { top } = useElementBounding(sectionRef)
+const { y } = useWindowScroll()
+const config = useRuntimeConfig().public
+const { copy, copied } = useClipboard({ source })
+const breakpoints = useBreakpoints(breakpointsTailwind)
+
+const mdAndLarger = breakpoints.greaterOrEqual('md')
+const lgAndLarger = breakpoints.greaterOrEqual('lg')
+const xlAndLarger = breakpoints.greaterOrEqual('xl')
+
+const { format } = Intl.NumberFormat('en', { notation: 'compact' })
+
+const steps = {
+  header: 0,
+  footer: 5,
+  landing: 10,
+  docs: 27
+}
+
+// Computed
+
+const inc = computed(() => (height.value - 32 - 64 - 32 - 32) / 4)
+
+const landingBlocks = computed(() => isAfterStep(steps.landing) && isBeforeStep(steps.docs) ? [{
+  class: 'inset-x-0 top-20 bottom-20 overflow-hidden',
+  inactive: true,
+  children: [{
+    name: 'ULandingHero',
+    to: '/pro/components/landing-hero',
+    class: [
+      'inset-4',
+      isAfterStep(steps.landing + 2) && '-top-[calc(var(--y)-var(--step-y)-1rem)] bottom-[calc(var(--y)-var(--step-y)+1rem)]'
+    ].filter(Boolean).join(' '),
+    style: {
+      '--step-y': `${getStepY(steps.landing + 2)}px`
+    },
+    inactive: isAfterStep(steps.landing + 1),
+    children: [{
+      slot: 'landing-hero',
+      class: 'inset-4'
+    }]
+  }, isAfterStep(steps.landing + 2) && {
+    name: 'ULandingSection',
+    to: '/pro/components/landing-section',
+    class: [
+      'inset-4',
+      isBeforeStep(steps.landing + 6) && '-top-[calc(var(--y)-var(--prev-step-y)-var(--height)-1rem)] bottom-[calc(var(--y)-var(--prev-step-y)-var(--height)+1rem)]',
+      isAfterStep(steps.landing + 10) && '-top-[calc(var(--y)-var(--step-y)-1rem)] bottom-[calc(var(--y)-var(--step-y)+1rem)]'
+    ].filter(Boolean).join(' '),
+    style: {
+      '--height': (inc.value * 4) + 'px',
+      '--step-y': `${getStepY(steps.landing + 10)}px`,
+      '--prev-step-y': `${getStepY(steps.landing + 2)}px`
+    },
+    inactive: isAfterStep(steps.landing + 7),
+    children: [{
+      slot: 'landing-section',
+      class: 'inset-x-4 top-16'
+    }, {
+      name: 'ULandingGrid',
+      to: '/pro/components/landing-grid',
+      class: ['inset-x-4 bottom-4 top-48', isAfterStep(steps.landing + 8) && 'grid grid-cols-4 gap-4 p-4'].filter(Boolean).join(' '),
+      inactive: isAfterStep(steps.landing + 8),
+      children: [isAfterStep(steps.landing + 9) ? {
+        slot: 'landing-card-1',
+        class: '!relative'
+      } : {
+        name: 'ULandingCard',
+        to: '/pro/components/landing-card',
+        class: '!relative h-full',
+        inactive: false
+      }, isAfterStep(steps.landing + 9) ? {
+        slot: 'landing-card-2',
+        class: '!relative h-full'
+      } : {
+        name: 'ULandingCard',
+        to: '/pro/components/landing-card',
+        class: '!relative h-full',
+        inactive: false
+      }, isAfterStep(steps.landing + 9) ? {
+        slot: 'landing-card-3',
+        class: '!relative h-full'
+      } : {
+        name: 'ULandingCard',
+        to: '/pro/components/landing-card',
+        class: '!relative h-full',
+        inactive: false
+      }, isAfterStep(steps.landing + 9) ? {
+        slot: 'landing-card-4',
+        class: '!relative h-full'
+      } : {
+        name: 'ULandingCard',
+        to: '/pro/components/landing-card',
+        class: '!relative h-full',
+        inactive: false
+      }]
+    }]
+  }, isAfterStep(steps.landing + 10) && {
+    name: 'ULandingSection',
+    to: '/pro/components/landing-section',
+    class: [
+      'inset-4',
+      isBeforeStep(steps.landing + 14) && '-top-[calc(var(--y)-var(--prev-step-y)-var(--height)-1rem)] bottom-[calc(var(--y)-var(--prev-step-y)-var(--height)+1rem)]'
+    ].filter(Boolean).join(' '),
+    style: {
+      '--height': (inc.value * 4) + 'px',
+      '--step-y': `${getStepY(steps.landing + 18)}px`,
+      '--prev-step-y': `${getStepY(steps.landing + 10)}px`
+    },
+    inactive: isAfterStep(steps.landing + 15),
+    children: [{
+      name: 'ULandingCTA',
+      class: 'inset-4',
+      inactive: isAfterStep(steps.landing + 16),
+      children: [{
+        slot: 'landing-cta',
+        class: 'inset-0'
+      }]
+    }]
+  }].filter(Boolean)
+}] : [])
+
+const docsBlocks = computed(() => [isAfterStep(steps.docs) && {
+  name: 'UPage',
+  to: '/pro/components/page',
+  class: 'inset-x-0 top-20 bottom-20',
+  inactive: isAfterStep(steps.docs + 1),
+  children: [isAfterStep(steps.docs + 2) ? {
+    name: 'UAside',
+    to: '/pro/components/aside',
+    class: 'left-4 inset-y-4 w-64',
+    inactive: isAfterStep(steps.docs + 3),
+    children: [isAfterStep(steps.docs + 4) ? {
+      slot: 'aside-top',
+      class: 'inset-x-4 top-4'
+    } : {
+      name: '#top',
+      class: 'inset-x-4 top-4 h-9'
+    }, isAfterStep(steps.docs + 5) ? {
+      name: 'UNavigationTree',
+      to: '/pro/components/navigation-tree',
+      class: ['inset-x-4 top-[4.25rem] bottom-4', isAfterStep(steps.docs + 6) && '!bg-transparent !border-0'].join(' '),
+      inactive: isAfterStep(steps.docs + 6),
+      children: [{
+        slot: 'aside-default',
+        class: 'inset-0'
+      }]
+    } : {
+      name: '#default',
+      class: 'inset-x-4 top-[4.25rem] bottom-4'
+    }]
+  } : {
+    name: '#left',
+    class: 'left-4 inset-y-4 w-64'
+  }, isAfterStep(steps.docs + 7) ? {
+    name: 'UPage',
+    to: '/pro/components/page',
+    class: 'left-72 right-4 inset-y-4',
+    inactive: isAfterStep(steps.docs + 8),
+    children: [...(isAfterStep(steps.docs + 9) ? [{
+      name: 'UPageHeader',
+      to: '/pro/components/page-header',
+      class: 'top-4 left-4 right-72 h-32',
+      inactive: isAfterStep(steps.docs + 10),
+      children: [{
+        slot: 'page-header',
+        class: 'inset-4 justify-start'
+      }]
+    }, {
+      name: 'UPageBody',
+      to: '/pro/components/page-body',
+      class: 'top-40 left-4 right-72 bottom-4 overflow-y-auto',
+      inactive: isAfterStep(steps.docs + 11),
+      children: [{
+        slot: 'page-body',
+        class: 'inset-x-4 top-4 justify-start'
+      }, isAfterStep(steps.docs + 12) ? {
+        slot: 'content-surround',
+        class: 'bottom-4 inset-x-4 h-28'
+      } : {
+        name: 'UContentSurround',
+        to: '/pro/components/content-surround',
+        class: 'bottom-4 inset-x-4 h-28',
+        inactive: false
+      }]
+    }] : [{
+      name: '#default',
+      class: 'left-4 right-72 inset-y-4'
+    }]), isAfterStep(steps.docs + 13) ? {
+      name: 'UContentToc',
+      to: '/pro/components/content-toc',
+      class: 'right-4 inset-y-4 w-64',
+      inactive: isAfterStep(steps.docs + 14),
+      children: [{
+        slot: 'content-toc',
+        class: 'inset-4 overflow-y-auto'
+      }]
+    } : {
+      name: '#right',
+      class: 'right-4 inset-y-4 w-64'
+    }]
+  } : {
+    name: '#default',
+    class: 'left-72 right-4 inset-y-4'
+  }]
+}].filter(Boolean))
+
+const blocks = computed(() => [isAfterStep(steps.header) && {
+  name: 'UHeader',
+  to: '/pro/components/header',
+  class: 'h-16 inset-x-0 top-0',
+  inactive: isAfterStep(steps.header + 1),
+  children: [isAfterStep(steps.header + 2) ? {
+    slot: 'header-left',
+    class: 'left-4 top-4'
+  } : {
+    name: '#left',
+    class: 'left-4 inset-y-4 w-64'
+  }, isAfterStep(steps.header + 3) ? {
+    slot: 'header-center',
+    class: 'inset-x-72 top-5'
+  } : {
+    name: '#center',
+    class: 'inset-x-72 inset-y-4'
+  }, isAfterStep(steps.header + 4) ? {
+    slot: 'header-right',
+    class: 'right-4 top-4'
+  } : {
+    name: '#right',
+    class: 'right-4 inset-y-4 w-64'
+  }]
+}, isAfterStep(steps.footer) && {
+  name: 'UFooter',
+  to: '/pro/components/footer',
+  class: 'h-16 inset-x-0 bottom-0',
+  inactive: isAfterStep(steps.footer + 1),
+  children: [isAfterStep(steps.footer + 2) ? {
+    slot: 'footer-left',
+    class: 'left-4 bottom-5'
+  } : {
+    name: '#left',
+    class: 'left-4 inset-y-4 w-64'
+  }, isAfterStep(steps.footer + 3) ? {
+    slot: 'footer-center',
+    class: 'inset-x-72 bottom-5'
+  } : {
+    name: '#center',
+    class: 'inset-x-72 inset-y-4'
+  }, isAfterStep(steps.footer + 4) ? {
+    slot: 'footer-right',
+    class: 'right-4 bottom-4'
+  } : {
+    name: '#right',
+    class: 'right-4 inset-y-4 w-64'
+  }]
+}, ...landingBlocks.value, ...docsBlocks.value].filter(Boolean))
+
+// Methods
+
+function isBeforeStep (i = 0) {
+  return y.value < (start.value + (i * inc.value))
+}
+
+function isAfterStep (i = 0) {
+  return y.value >= (start.value + (i * inc.value))
+}
+
+function getStepY (step: number) {
+  return start.value + (step * inc.value)
+}
+
+// Hooks
+
+onMounted(() => {
+  setTimeout(() => {
+    start.value = top.value + y.value
+  }, 100)
+})
+
+// Slots Data
+
+const headerLinks = [{
+  label: 'Documentation',
+  active: true
+}, {
+  label: 'Playground'
+}, {
+  label: 'Roadmap'
+}, {
+  label: 'Pro'
+}]
+
+const navigationLinks = [{
+  label: 'Getting Started',
+  children: [{
+    label: 'Introduction'
+  }, {
+    label: 'Installation',
+    active: true
+  }, {
+    label: 'Theming'
+  }, {
+    label: 'Shortcuts'
+  }, {
+    label: 'Examples'
+  }, {
+    label: 'Roadmap'
+  }]
+}, {
+  label: 'Elements',
+  children: [{
+    label: 'Alert'
+  }, {
+    label: 'Avatar'
+  }, {
+    label: 'Badge'
+  }, {
+    label: 'Button'
+  }]
+}]
+
+const surround = [{
+  title: 'Introduction',
+  description: 'Fully styled and customizable components for Nuxt.',
+  _path: '/'
+}, {
+  title: 'Theming',
+  description: 'Learn how to customize the look and feel of the components.',
+  _path: '/'
+}]
+
+const md = `
+## Edge
+
+To use the latest updates pushed on the [\`dev\`](https://github.com/nuxt/ui/tree/dev) branch, you can use \`@nuxt/ui-edge\`.
+`
+
+const toc = [{
+  id: 'quick-start',
+  depth: 2,
+  text: 'Quick Start'
+}, {
+  id: 'intellisense',
+  depth: 2,
+  text: 'IntelliSense'
+}, {
+  id: 'options',
+  depth: 2,
+  text: 'Options'
+}, {
+  id: 'edge',
+  depth: 2,
+  text: 'Edge'
+}]
+
+const communityLinks = [{
+  icon: 'i-heroicons-pencil-square',
+  label: 'Edit this page'
+}, {
+  icon: 'i-heroicons-star',
+  label: 'Star on GitHub',
+  to: 'https://github.com/nuxt/ui',
+  target: '_blank'
+}, {
+  icon: 'i-heroicons-book-open',
+  label: 'Nuxt documentation',
+  to: 'https://nuxt.com',
+  target: '_blank'
+}]
+</script>
+
+<!-- eslint-disable vue/no-v-html -->
+<template>
+  <div>
+    <ULandingHero :ui="{ base: 'relative z-[1]', container: 'max-w-4xl' }" class="mb-[calc(var(--header-height)*2)]">
+      <template #headline>
+        <UBadge variant="subtle" size="md" class="hover:bg-primary-100 dark:bg-primary-950/100 dark:hover:bg-primary-900 transition-color relative font-medium rounded-full shadow-none">
+          <NuxtLink :to="`https://github.com/nuxt/ui/releases/tag/v${config.version.split('.').slice(0, -1).join('.')}.0`" target="_blank" class="focus:outline-none" aria-label="Go to last relase" tabindex="-1">
+            <span class="absolute inset-0" aria-hidden="true" />
+          </NuxtLink>
+
+          <span class="flex items-center gap-1">
+            Nuxt UI v{{ config.version.split('.').slice(0, -1).join('.') }} is out!
+          </span>
+        </UBadge>
+      </template>
+
+      <template #title>
+        <span v-html="page.hero?.title" />
+      </template>
+
+      <template #description>
+        <span v-html="page.hero?.description" />
+      </template>
+
+      <template #links>
+        <UButton label="Get Started" trailing-icon="i-heroicons-arrow-right-20-solid" size="lg" to="/getting-started/installation" />
+
+        <UInput
+          v-model="source"
+          color="gray"
+          readonly
+          autocomplete="off"
+          icon="i-heroicons-command-line"
+          input-class="select-none"
+          aria-label="Install @nuxt/ui"
+          size="lg"
+          :ui="{ base: 'disabled:cursor-default', icon: { trailing: { pointer: '' } } }"
+        >
+          <template #trailing>
+            <UButton
+              aria-label="Copy Code"
+              :color="copied ? 'primary' : 'gray'"
+              variant="link"
+              size="2xs"
+              :icon="copied ? 'i-heroicons-clipboard-document-check' : 'i-heroicons-clipboard-document'"
+              @click="copy(source)"
+            />
+          </template>
+        </UInput>
+      </template>
+
+      <ClientOnly>
+        <HomeTetris />
+      </ClientOnly>
+    </ULandingHero>
+
+    <ULandingSection v-for="(section, index) of page.sections" :key="index" v-bind="section">
+      <template v-if="section.title" #title>
+        <span v-html="section?.title" />
+      </template>
+
+      <template v-if="section.description" #description>
+        <span v-html="section.description" />
+      </template>
+
+      <template #demo>
+        <ClientOnly>
+          <HomeDemo v-if="lgAndLarger" />
+        </ClientOnly>
+      </template>
+
+      <template #features>
+        <ULandingGrid class="lg:-mb-20 lg:auto-rows-[3rem]">
+          <ULandingCard
+            v-for="(card, subIndex) of section.cards"
+            :key="subIndex"
+            v-bind="card"
+            :ui="{
+              background: 'dark:bg-gray-900/50 dark:lg:bg-gradient-to-b from-gray-700/50 to-gray-950/50',
+              body: {
+                base: 'flex-1',
+                background: 'dark:bg-gray-800/50 dark:lg:bg-gray-900/50 backdrop-blur-lg'
+              }
+            }"
+            class="flex flex-col"
+          >
+            <UColorModeImage
+              :light="`${card.image.path}-light.svg`"
+              :dark="`${card.image.path}-dark.svg`"
+              :width="card.image.width"
+              :height="card.image.height"
+              :alt="card.title"
+              loading="lazy"
+              class="object-cover w-full"
+            />
+          </ULandingCard>
+        </ULandingGrid>
+      </template>
+    </ULandingSection>
+
+    <ULandingSection class="!pt-0 dark:bg-gradient-to-b from-gray-950/50 to-gray-900">
+      <ULandingCTA
+        align="left"
+        card
+        :ui="{
+          background: 'dark:bg-gradient-to-b from-gray-800 to-gray-900',
+          shadow: 'dark:shadow-2xl',
+          body: {
+            background: 'bg-gray-50/50 dark:bg-gray-900/50'
+          },
+          title: 'text-center lg:text-left',
+          links: 'justify-center lg:justify-start'
+        }"
+      >
+        <template #title>
+          <span v-html="page.cta.title" />
+        </template>
+
+        <template #links>
+          <ClientOnly>
+            <UAvatarGroup :max="xlAndLarger ? 13 : lgAndLarger ? 10 : mdAndLarger ? 16 : 8" size="md" class="flex-wrap-reverse [&_span:first-child]:text-xs justify-center">
+              <UTooltip
+                v-for="(contributor, index) of module.contributors"
+                :key="index"
+                :text="contributor.username"
+                class="rounded-full"
+                :ui="{ background: 'bg-gray-50 dark:bg-gray-800/50' }"
+                :popper="{ offsetDistance: 16 }"
+              >
+                <UAvatar
+                  :alt="contributor.username"
+                  :src="`https://ipx.nuxt.com/s_40x40/gh_avatar/${contributor.username}`"
+                  :srcset="`https://ipx.nuxt.com/s_80x80/gh_avatar/${contributor.username} 2x`"
+                  class="lg:hover:scale-125 lg:hover:ring-2 lg:hover:ring-primary-500 dark:lg:hover:ring-primary-400 transition-transform"
+                  width="40"
+                  height="40"
+                  size="md"
+                  loading="lazy"
+                >
+                  <NuxtLink :to="`https://github.com/${contributor.username}`" :aria-label="contributor.username" target="_blank" class="focus:outline-none" tabindex="-1">
+                    <span class="absolute inset-0" aria-hidden="true" />
+                  </NuxtLink>
+                </UAvatar>
+              </UTooltip>
+            </UAvatarGroup>
+          </ClientOnly>
+        </template>
+
+        <div class="flex flex-col sm:flex-row items-center justify-center gap-8 lg:gap-16">
+          <NuxtLink class="text-center group" to="https://npmjs.org/package/@nuxt/ui" target="_blank">
+            <p class="text-6xl font-semibold text-gray-900 dark:text-white group-hover:text-primary-500 dark:group-hover:text-primary-400">
+              {{ format(module.stats.downloads) }}+
+            </p>
+            <p>monthly downloads</p>
+          </NuxtLink>
+
+          <NuxtLink class="text-center group" to="https://github.com/nuxt/ui" target="_blank">
+            <p class="text-6xl font-semibold text-gray-900 dark:text-white group-hover:text-primary-500 dark:group-hover:text-primary-400">
+              {{ format(module.stats.stars) }}+
+            </p>
+            <p>stars</p>
+          </NuxtLink>
+        </div>
+      </ULandingCTA>
+    </ULandingSection>
+
+    <template v-if="navigation.find(item => item._path === '/pro')">
+      <div class="relative">
+        <UDivider class="absolute inset-x-0" />
+
+        <div class="w-full relative overflow-hidden h-px bg-gradient-to-r from-gray-800 via-primary-400 to-gray-800 max-w-5xl mx-auto" />
+      </div>
+
+      <ULandingHero id="pro" :links="page.pro.links" :ui="{ title: 'sm:text-6xl' }" class="bg-gradient-to-b from-gray-50 dark:from-gray-950/50 to-white dark:to-gray-900 relative">
+        <template #title>
+          <span v-html="page.pro.title" />
+        </template>
+
+        <template #description>
+          <span v-html="page.pro.description" />
+        </template>
+
+        <div class="bg-gray-900/5 dark:bg-white/5 ring-1 ring-inset ring-gray-900/10 dark:ring-white/10 rounded-xl lg:-m-4 p-4">
+          <video preload="none" poster="https://res.cloudinary.com/nuxt/video/upload/so_3.3/v1708511800/ui-pro/video-nuxt-ui-pro_kwfbdh.jpg" controls class="rounded-lg">
+            <source src="https://res.cloudinary.com/nuxt/video/upload/v1708511800/ui-pro/video-nuxt-ui-pro_kwfbdh.webm" type="video/webm">
+            <source src="https://res.cloudinary.com/nuxt/video/upload/v1708511800/ui-pro/video-nuxt-ui-pro_kwfbdh.mp4" type="video/mp4">
+            <source src="https://res.cloudinary.com/nuxt/video/upload/v1708511800/ui-pro/video-nuxt-ui-pro_kwfbdh.ogg" type="video/ogg">
+          </video>
+        </div>
+      </ULandingHero>
+
+      <ULandingSection v-for="(section, index) in page.pro.sections" :key="index" v-bind="section" class="!pt-0">
+        <MDC
+          v-if="section.code"
+          :value="section.code"
+          tag="pre"
+          class="prose prose-primary dark:prose-invert max-w-none"
+        />
+      </ULandingSection>
+
+      <div ref="sectionRef" :style="{ '--y': `${y}px`, '--inc': `${inc}px` }" class="_screen_xl">
+        <ULandingSection class="sticky h-screen top-0 flex !pb-16" :ui="{ container: 'flex-1 sm:gap-y-12' }">
+          <template #title>
+            <Transition name="fade" mode="out-in">
+              <span v-if="isAfterStep(steps.docs)" v-html="page.pro.docs?.title" />
+              <span v-else v-html="page.pro.landing?.title" />
+            </Transition>
+          </template>
+
+          <template #description>
+            <Transition name="fade" mode="out-in">
+              <span v-if="isAfterStep(steps.docs)" v-html="page.pro.docs?.description" />
+              <span v-else v-html="page.pro.landing?.description" />
+            </Transition>
+          </template>
+
+          <HomeProDemo ref="demoRef" :blocks="(blocks as HomeProBlock[])">
+            <template #header-left>
+              <Logo class="w-auto h-6" />
+            </template>
+
+            <template #header-center>
+              <UHeaderLinks :links="headerLinks" />
+            </template>
+
+            <template #header-right>
+              <div class="flex items-center gap-1.5">
+                <UColorModeButton />
+
+                <UButton
+                  to="https://github.com/nuxt/ui"
+                  target="_blank"
+                  icon="i-simple-icons-github"
+                  aria-label="GitHub"
+                  class="hidden lg:inline-flex"
+                  color="gray" variant="ghost"
+                />
+              </div>
+            </template>
+
+            <template #footer-left>
+              <span class="text-sm text-gray-500 dark:text-gray-400">
+                Published under <NuxtLink to="https://github.com/nuxt/ui" target="_blank" class="text-gray-900 dark:text-white">
+                  MIT License
+                </NuxtLink>
+              </span>
+            </template>
+
+            <template #footer-right>
+              <div class="flex items-center gap-1.5">
+                <UButton aria-label="Nuxt on X" icon="i-simple-icons-x" to="https://x.com/nuxt_js" target="_blank" color="gray" variant="ghost" />
+                <UButton aria-label="Nuxt UI on Discord" icon="i-simple-icons-discord" to="https://discord.com/channels/473401852243869706/1153996761426300948" target="_blank" color="gray" variant="ghost" />
+                <UButton aria-label="Nuxt UI on GitHub" icon="i-simple-icons-github" to="https://github.com/nuxt/ui" target="_blank" color="gray" variant="ghost" />
+              </div>
+            </template>
+
+            <template #aside-top>
+              <UContentSearchButton size="md" class="w-full" />
+            </template>
+
+            <template #aside-default>
+              <UNavigationTree
+                class="w-full h-full [&>div>div>div>nav]:border-gray-800/10 dark:[&>div>div>div>nav]:border-gray-200/10 overflow-y-auto"
+                :links="navigationLinks"
+              />
+            </template>
+
+            <template #page-header>
+              <UPageHeader
+                title="Installation"
+                description="Learn how to install and configure the module in your Nuxt app."
+                headline="Getting Started"
+                class="!p-0 !border-0"
+                :ui="{ headline: 'mb-1 text-xs', title: '!text-2xl', description: 'mt-1 text-sm' }"
+              />
+            </template>
+
+            <template #page-body>
+              <div class="-mt-8 prose prose-primary prose-sm dark:prose-invert max-w-none">
+                <MDC :value="md" tag="div" />
+
+              <!-- <hr class="border-gray-800/10 dark:border-gray-200/10 !mt-5"> -->
+              </div>
+            </template>
+
+            <template #content-surround>
+              <UContentSurround
+                :surround="(surround as unknown as ParsedContent[])"
+                class="w-full gap-4"
+                :ui="{
+                  link: {
+                    wrapper: 'px-4 py-2.5 border-gray-800/10 dark:border-gray-200/10 cursor-pointer',
+                    icon: {
+                      wrapper: 'mb-2 p-1',
+                      base: 'h-4 w-4',
+                    },
+                    title: 'text-sm',
+                    description: 'text-xs'
+                  }
+                }"
+              />
+            </template>
+
+            <template #content-toc>
+              <div class="absolute top-0 left-0 right-0 space-y-3">
+                <UContentToc :links="toc" class="bg-transparent relative max-h-full overflow-hidden top-0" :ui="({ container: { base: '!pt-0 !pb-4' } } as any)" />
+
+                <UDivider type="dashed" :ui="{ border: { base: 'border-gray-800/10 dark:border-gray-200/10' } }" />
+
+                <UPageLinks title="Community" :links="communityLinks" class="mt-4" />
+              </div>
+            </template>
+
+            <template #landing-hero>
+              <ULandingHero class="!p-0" :ui="{ title: '!text-5xl', description: 'text-base' }">
+                <template #title>
+                  A <span class="text-primary">UI Library</span> for<br> Modern Web Apps
+                </template>
+
+                <template #description>
+                  Nuxt UI simplifies the creation of stunning and responsive web applications with its<br> comprehensive collection of fully styled and customizable UI components designed for Nuxt.
+                </template>
+
+                <template #links>
+                  <UButton label="Get Started" icon="i-heroicons-rocket-launch" size="md" />
+
+                  <UInput
+                    model-value="npm i @nuxt/ui"
+                    color="gray"
+                    readonly
+                    autocomplete="off"
+                    icon="i-heroicons-command-line"
+                    input-class="select-none"
+                    aria-label="Install @nuxt/ui"
+                    size="md"
+                    :ui="{ base: 'disabled:cursor-default', icon: { trailing: { pointer: '' } } }"
+                  />
+                </template>
+              </ULandingHero>
+            </template>
+
+            <template #landing-section>
+              <ULandingSection :ui="{ title: '!text-3xl', description: 'text-base' }" class="!p-0">
+                <template #title>
+                  Everything you expect from a<br> <span class="text-primary">UI component library</span>
+                </template>
+              </ULandingSection>
+            </template>
+
+            <template #landing-card-1>
+              <ULandingCard icon="i-heroicons-swatch" title="Color Palette" description="Choose a primary and a gray color from your Tailwind CSS color palette." />
+            </template>
+            <template #landing-card-2>
+              <ULandingCard icon="i-heroicons-wrench-screwdriver" title="Fully Customizable" description="Change the style of any component in your App Config or with ui prop." />
+            </template>
+            <template #landing-card-3>
+              <ULandingCard icon="i-heroicons-face-smile" title="Icons" description="Choose any of the 100k+ icons from the most popular icon libraries." />
+            </template>
+            <template #landing-card-4>
+              <ULandingCard icon="i-heroicons-computer-desktop" title="Keyboard Shortcuts" description="Nuxt UI comes with a set of Vue composables to easily handle shortcuts." />
+            </template>
+
+            <template #landing-cta>
+              <ULandingCTA card :links="[{ label: 'Get started', color: 'black', size: 'md' }, { label: 'Learn more', color: 'black', variant: 'link', size: 'md', trailingIcon: 'i-heroicons-arrow-right-20-solid' }]" :ui="{ title: '!text-3xl', description: 'text-base' }" class="w-full h-full rounded-md">
+                <template #title>
+                  Trusted and supported by our<br> amazing community
+                </template>
+              </ULandingCTA>
+            </template>
+          </HomeProDemo>
+        </ULandingSection>
+
+        <div class="h-[calc(var(--inc)*42)]" />
+      </div>
+
+      <div class="_not_screen_xl">
+        <ULandingSection>
+          <template #title>
+            <span v-html="page.pro.landing?.title" />
+          </template>
+          <template #description>
+            <span v-html="page.pro.landing?.description" />
+          </template>
+          <video preload="none" poster="https://res.cloudinary.com/nuxt/video/upload/so_14.4/v1698923423/ui-pro/nuxt-ui-pro-landing-demo_yrh6nr.jpg" controls>
+            <source src="https://res.cloudinary.com/nuxt/video/upload/v1698923423/ui-pro/nuxt-ui-pro-landing-demo_yrh6nr.webm" type="video/webm">
+            <source src="https://res.cloudinary.com/nuxt/video/upload/v1698923423/ui-pro/nuxt-ui-pro-landing-demo_yrh6nr.mp4" type="video/mp4">
+            <source src="https://res.cloudinary.com/nuxt/video/upload/v1698923423/ui-pro/nuxt-ui-pro-landing-demo_yrh6nr.ogg" type="video/ogg">
+          </video>
+        </ULandingSection>
+        <ULandingSection>
+          <template #title>
+            <span v-html="page.pro.docs?.title" />
+          </template>
+          <template #description>
+            <span v-html="page.pro.docs?.description" />
+          </template>
+          <video preload="none" poster="https://res.cloudinary.com/nuxt/video/upload/v1698923398/ui-pro/nuxt-ui-pro-docs-demo_jm6ubr.jpg" controls>
+            <source src="https://res.cloudinary.com/nuxt/video/upload/v1698923398/ui-pro/nuxt-ui-pro-docs-demo_jm6ubr.webm" type="video/webm">
+            <source src="https://res.cloudinary.com/nuxt/video/upload/v1698923398/ui-pro/nuxt-ui-pro-docs-demo_jm6ubr.mp4" type="video/mp4">
+            <source src="https://res.cloudinary.com/nuxt/video/upload/v1698923398/ui-pro/nuxt-ui-pro-docs-demo_jm6ubr.ogg" type="video/ogg">
+          </video>
+        </ULandingSection>
+      </div>
+    </template>
+  </div>
+</template>
+
+<style scoped lang="postcss">
+.fade-enter-active,
+.fade-leave-active {
+  transition: opacity 0.2s ease;
+}
+
+.fade-enter-from,
+.fade-leave-to {
+  opacity: 0;
+}
+
+._screen_xl {
+  display: none;
+}
+@media (min-width: 1280px) and (min-height: 955px) {
+  ._screen_xl {
+    display: block;
+  }
+  ._not_screen_xl {
+    display: none;
+  }
+}
+</style>

docs/app/pages/playground.vue

@@ -0,0 +1,25 @@
+<script setup lang="ts">
+const title = 'Playground'
+const description = 'Play online with our interactive Nuxt Image playground.'
+
+useSeoMeta({
+  titleTemplate: '%s - Nuxt UI',
+  title,
+  ogTitle: 'Nuxt UI Playground',
+  description
+})
+
+defineOgImage({
+  component: 'Docs',
+  title,
+  description
+})
+</script>
+
+<template>
+  <div class="h-[calc(100vh-var(--header-height)-var(--header-height)-1px)]">
+    <ClientOnly>
+      <iframe :src="`https://stackblitz.com/edit/nuxt-ui?embed=1&file=app.config.ts,app.vue&theme=${$colorMode.preference}`" width="100%" height="100%" />
+    </ClientOnly>
+  </div>
+</template>

docs/app/pages/roadmap.vue

@@ -0,0 +1,32 @@
+<script setup lang="ts">
+const title = 'Roadmap'
+const description = 'Discover our Volta board for @nuxt/ui development status.'
+
+useSeoMeta({
+  titleTemplate: '%s - Nuxt UI',
+  title,
+  ogTitle: 'Nuxt UI Roadmap',
+  description
+})
+
+defineOgImage({
+  component: 'Docs',
+  title,
+  description
+})
+
+const appConfig = useAppConfig()
+const colorMode = useColorMode()
+
+const token = 'eyJ2aWV3IjoiYm9hcmQiLCJib2FyZFN0YXR1c2VzIjpbInRyaWFnZSIsImJhY2tsb2ciLCJ0b2RvIiwiaW5fcHJvZ3Jlc3MiLCJpbl9yZXZpZXciLCJkb25lIiwicmVsZWFzZWQiXSwiYm9hcmRMaW5rZWRQcnMiOmZhbHNlLCJsaXN0R3JvdXAiOiJzdGF0ZSIsImxpc3RPcmRlciI6ImNyZWF0ZWRfYXQiLCJ0aW1lbGluZVpvb20iOiJtb250aCIsInRpbWVsaW5lT3JkZXIiOiJzdGF0ZSIsInRpbWVsaW5lRGlzcGxheSI6ImFsbF9taWxlc3RvbmVzIiwiZmlsdGVycyI6e30sIm93bmVyIjoibnV4dCIsIm5hbWUiOiJ1aSJ9'
+
+const src = computed(() => `https://volta.net/embed/${token}?theme=${colorMode.value}&gray=${appConfig.ui.gray}&primary=${appConfig.ui.primary}`)
+</script>
+
+<template>
+  <div class="h-[calc(100vh-var(--header-height)-var(--header-height)-1px)]">
+    <ClientOnly>
+      <iframe :src="src" width="100%" height="100%" />
+    </ClientOnly>
+  </div>
+</template>

docs/app/plugins/prettier.ts

@@ -0,0 +1,67 @@
+import type { Options } from 'prettier'
+import PrettierWorker from '@/workers/prettier.js?worker&inline'
+
+export interface SimplePrettier {
+  format: (source: string, options?: Options) => Promise<string>;
+}
+
+function createPrettierWorkerApi (worker: Worker): SimplePrettier {
+  let counter = 0
+  const handlers = {}
+
+  worker.addEventListener('message', (event) => {
+    const { uid, message, error } = event.data
+
+    if (!handlers[uid]) {
+      return
+    }
+
+    const [resolve, reject] = handlers[uid]
+    delete handlers[uid]
+
+    if (error) {
+      reject(error)
+    } else {
+      resolve(message)
+    }
+  })
+
+  function postMessage<T> (message) {
+    const uid = ++counter
+    return new Promise<T>((resolve, reject) => {
+      handlers[uid] = [resolve, reject]
+      worker.postMessage({ uid, message })
+    })
+  }
+
+  return {
+    format (source: string, options?: Options) {
+      return postMessage({ type: 'format', source, options })
+    }
+  }
+}
+
+export default defineNuxtPlugin({
+  async setup () {
+    let prettier: SimplePrettier
+    if (import.meta.server) {
+      const prettierModule = await import('prettier')
+      prettier = {
+        format (source, options = {
+          parser: 'markdown'
+        }) {
+          return prettierModule.format(source, options)
+        }
+      }
+    } else {
+      const worker = new PrettierWorker()
+      prettier = createPrettierWorkerApi(worker)
+    }
+
+    return {
+      provide: {
+        prettier
+      }
+    }
+  }
+})

docs/app/types/index.d.ts

@@ -0,0 +1,12 @@
+export interface HomeProBlock {
+  id?: string
+  to?: string
+  name?: string
+  description?: string
+  slot?: string
+  class: string
+  style?: any
+  inactive?: boolean
+  transparent?: boolean
+  children?: ProBlock[]
+}

docs/app/workers/prettier.js

@@ -0,0 +1,29 @@
+/* eslint-disable no-undef */
+import('https://unpkg.com/prettier@3.0.3/standalone.js')
+import('https://unpkg.com/prettier@3.0.3/plugins/html.js')
+import('https://unpkg.com/prettier@3.0.3/plugins/markdown.js')
+
+self.onmessage = async function (event) {
+  self.postMessage({
+    uid: event.data.uid,
+    message: await handleMessage(event.data.message)
+  })
+}
+
+function handleMessage (message) {
+  switch (message.type) {
+    case 'format':
+      return handleFormatMessage(message)
+  }
+}
+
+async function handleFormatMessage (message) {
+  const { options, source } = message
+  const formatted = await prettier.format(source, {
+    parser: 'markdown',
+    plugins: prettierPlugins,
+    ...options
+  })
+
+  return formatted
+}