From 06e041c37415cb10d5adb35dd32c4a41cea1e71f Mon Sep 17 00:00:00 2001
From: Benjamin Canac <canacb1@gmail.com>
Date: Tue, 18 Jun 2024 11:01:00 +0200
Subject: [PATCH] docs: update

---
 docs/app/app.vue                              |  61 +-
 docs/app/components/Banner.vue                |  59 +-
 docs/app/components/Footer.vue                |  14 +-
 docs/app/components/Header.vue                |  64 +-
 docs/app/components/LogoOnly.vue              |   5 -
 docs/app/components/ads/AdsCarbon.vue         |  45 -
 docs/app/components/ads/AdsPro.vue            |  27 -
 docs/app/components/home/HomeDemo.vue         | 206 -----
 docs/app/components/home/HomeProDemo.vue      |  31 -
 docs/app/components/home/HomeProDemoBlock.vue |  59 --
 docs/app/components/home/HomeTetris.vue       | 108 ---
 docs/app/components/releases/ReleasesItem.vue |  54 --
 docs/app/composables/useModule.ts             |  24 +
 docs/app/content/2.components/1.app.md        |  10 +
 docs/app/content/2.components/date-picker.md  | 112 ---
 docs/app/content/index.yml                    | 191 ----
 docs/app/content/releases.yml                 |  16 -
 docs/app/layouts/docs.vue                     |  20 +-
 docs/app/pages/[...slug].vue                  |  61 +-
 docs/app/pages/index.vue                      | 837 ------------------
 docs/app/pages/playground.vue                 |   4 +-
 docs/app/pages/releases.vue                   | 127 ---
 docs/app/types/index.d.ts                     |  12 -
 docs/nuxt.config.ts                           |  54 +-
 docs/package.json                             |  11 +-
 eslint.config.mjs                             |   4 -
 package.json                                  |   2 +-
 27 files changed, 173 insertions(+), 2045 deletions(-)
 delete mode 100644 docs/app/components/LogoOnly.vue
 delete mode 100644 docs/app/components/ads/AdsCarbon.vue
 delete mode 100644 docs/app/components/ads/AdsPro.vue
 delete mode 100644 docs/app/components/home/HomeDemo.vue
 delete mode 100644 docs/app/components/home/HomeProDemo.vue
 delete mode 100644 docs/app/components/home/HomeProDemoBlock.vue
 delete mode 100644 docs/app/components/home/HomeTetris.vue
 delete mode 100644 docs/app/components/releases/ReleasesItem.vue
 create mode 100644 docs/app/composables/useModule.ts
 create mode 100644 docs/app/content/2.components/1.app.md
 delete mode 100644 docs/app/content/2.components/date-picker.md
 delete mode 100644 docs/app/content/index.yml
 delete mode 100644 docs/app/content/releases.yml
 delete mode 100644 docs/app/pages/index.vue
 delete mode 100644 docs/app/pages/releases.vue
 delete mode 100644 docs/app/types/index.d.ts

diff --git a/docs/app/app.vue b/docs/app/app.vue
index 73b6c0c7..25f1c79c 100644
--- a/docs/app/app.vue
+++ b/docs/app/app.vue
@@ -3,48 +3,16 @@ 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
+const open = ref(false)
+const searchTerm = ref('')
 
 // watch(searchTerm, debounce((query: string) => {
 //   if (!query) {
@@ -54,7 +22,19 @@ const links = computed(() => {
 //   useTrackEvent('Search', { props: { query: `${query} - ${searchTerm.value?.commandPaletteRef.results.length} results` } })
 // }, 500))
 
-// Head
+const links = computed(() => [{
+  label: 'Docs',
+  icon: 'i-heroicons-book-open',
+  to: '/getting-started',
+  active: route.path.startsWith('/getting-started')
+}, {
+  label: 'Components',
+  icon: 'i-heroicons-cube-transparent',
+  to: '/components',
+  active: route.path.startsWith('/components')
+}].filter(Boolean))
+
+// const color = computed(() => colorMode.value === 'dark' ? '#18181b' : 'white')
 
 useHead({
   meta: [
@@ -75,8 +55,7 @@ useServerSeoMeta({
   twitterCard: 'summary_large_image'
 })
 
-// Provide
-
+provide('open', open)
 provide('navigation', navigation)
 provide('files', files)
 </script>
@@ -85,16 +64,16 @@ provide('files', files)
   <UApp>
     <NuxtLoadingIndicator />
 
-    <Banner v-if="!$route.path.startsWith('/examples')" />
+    <Banner v-if="!route.path.startsWith('/examples')" />
 
-    <Header v-if="!$route.path.startsWith('/examples')" :links="links" />
+    <Header v-if="!route.path.startsWith('/examples')" :links="links" />
 
     <NuxtLayout>
       <NuxtPage />
     </NuxtLayout>
 
-    <Footer v-if="!$route.path.startsWith('/examples')" />
+    <Footer v-if="!route.path.startsWith('/examples')" />
 
-    <LazyUContentSearch v-model:search-term="searchTerm" :files="files" :navigation="navigation" :links="links" :fuse="{ resultLimit: 42 }" />
+    <LazyUContentSearch v-model:open="open" v-model:search-term="searchTerm" :files="files" :navigation="navigation" :links="links" :fuse="{ resultLimit: 42 }" />
   </UApp>
 </template>
diff --git a/docs/app/components/Banner.vue b/docs/app/components/Banner.vue
index b4299d86..dea813bb 100644
--- a/docs/app/components/Banner.vue
+++ b/docs/app/components/Banner.vue
@@ -1,58 +1,11 @@
 <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'
-    }]
-  })
-}
+const config = useRuntimeConfig().public
 </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>
+  <UBanner icon="i-heroicons-light-bulb" :actions="[{ label: 'Go to Nuxt UI v2', to: 'https://ui.nuxt.com', trailingIcon: 'i-heroicons-arrow-right-20-solid', color: 'white', class: 'rounded-full' }]" :close="false">
+    <template #title>
+      You're looking at the documentation for <span class="font-semibold">Nuxt UI v{{ config.version }}</span>!
+    </template>
+  </UBanner>
 </template>
-
-<style scoped>
-.hide-banner .app-banner {
-  display: none;
-}
-</style>
diff --git a/docs/app/components/Footer.vue b/docs/app/components/Footer.vue
index 6c856647..bad3aa6f 100644
--- a/docs/app/components/Footer.vue
+++ b/docs/app/components/Footer.vue
@@ -1,21 +1,19 @@
 <script setup lang="ts">
-const links = [{
-  icon: 'i-simple-icons-figma',
+const route = useRoute()
+
+const items = [{
   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>
@@ -23,9 +21,9 @@ const links = [{
 <template>
   <USeparator icon="i-simple-icons-nuxtdotjs" class="h-px" />
 
-  <UFooter :links="links">
+  <UFooter>
     <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">
+      <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">
@@ -33,6 +31,8 @@ const links = [{
       </NuxtLink>
     </template>
 
+    <UNavigationMenu :items="items" variant="link" color="black" />
+
     <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" />
diff --git a/docs/app/components/Header.vue b/docs/app/components/Header.vue
index 484cddbb..86ddcdd5 100644
--- a/docs/app/components/Header.vue
+++ b/docs/app/components/Header.vue
@@ -1,26 +1,43 @@
+<script setup lang="ts">
+import type { NavItem } from '@nuxt/content/dist/runtime/types'
+import type { NavigationMenuItem } from '#ui/types'
+
+const props = defineProps<{
+  links: NavigationMenuItem[]
+}>()
+
+const route = useRoute()
+const config = useRuntimeConfig().public
+
+const open = inject<Ref<boolean>>('open')
+const navigation = inject<Ref<NavItem[]>>('navigation')
+
+const items = computed(() => props.links.map(({ icon, ...link }) => link))
+</script>
+
 <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 !== '/'
+      '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" />
+        <UBadge :label="`v${config.version}`" variant="subtle" size="sm" class="-mb-[2px] rounded font-semibold" />
       </NuxtLink>
     </template>
 
+    <UNavigationMenu :items="items" variant="link" />
+
     <template #right>
       <!-- <ColorPicker /> -->
 
-      <!-- <UTooltip text="Search" :shortcuts="[metaSymbol, 'K']" :popper="{ strategy: 'absolute' }">
-        <UContentSearchButton :label="null" />
-      </UTooltip> -->
+      <UTooltip text="Search" :kbds="['meta', 'K']">
+        <UButton aria-label="Search" icon="i-heroicons-magnifying-glass-20-solid" color="gray" variant="ghost" @click="open = true" />
+      </UTooltip>
 
       <!-- <UColorModeButton /> -->
 
@@ -34,35 +51,12 @@
       />
     </template>
 
-    <template #panel>
-      <!-- <UAsideLinks :links="links" /> -->
+    <template #content>
+      <UNavigationMenu orientation="vertical" :items="items" class="-ml-2.5" />
 
-      <!-- <UDivider type="dashed" class="my-4" /> -->
+      <USeparator type="dashed" class="my-4" />
 
-      <!-- <BranchSelect /> -->
-
-      <!-- <UNavigationTree :links="mapContentNavigation(navigation)" :multiple="false" default-open /> -->
+      <UContentNavigation :navigation="navigation" />
     </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>
diff --git a/docs/app/components/LogoOnly.vue b/docs/app/components/LogoOnly.vue
deleted file mode 100644
index a9dca040..00000000
--- a/docs/app/components/LogoOnly.vue
+++ /dev/null
@@ -1,5 +0,0 @@
-<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>
diff --git a/docs/app/components/ads/AdsCarbon.vue b/docs/app/components/ads/AdsCarbon.vue
deleted file mode 100644
index 16d7c75e..00000000
--- a/docs/app/components/ads/AdsCarbon.vue
+++ /dev/null
@@ -1,45 +0,0 @@
-<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>
diff --git a/docs/app/components/ads/AdsPro.vue b/docs/app/components/ads/AdsPro.vue
deleted file mode 100644
index 14eaa1a3..00000000
--- a/docs/app/components/ads/AdsPro.vue
+++ /dev/null
@@ -1,27 +0,0 @@
-<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>
diff --git a/docs/app/components/home/HomeDemo.vue b/docs/app/components/home/HomeDemo.vue
deleted file mode 100644
index ac003621..00000000
--- a/docs/app/components/home/HomeDemo.vue
+++ /dev/null
@@ -1,206 +0,0 @@
-<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>
diff --git a/docs/app/components/home/HomeProDemo.vue b/docs/app/components/home/HomeProDemo.vue
deleted file mode 100644
index 4e70fa74..00000000
--- a/docs/app/components/home/HomeProDemo.vue
+++ /dev/null
@@ -1,31 +0,0 @@
-<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>
diff --git a/docs/app/components/home/HomeProDemoBlock.vue b/docs/app/components/home/HomeProDemoBlock.vue
deleted file mode 100644
index 8e48901a..00000000
--- a/docs/app/components/home/HomeProDemoBlock.vue
+++ /dev/null
@@ -1,59 +0,0 @@
-<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>
diff --git a/docs/app/components/home/HomeTetris.vue b/docs/app/components/home/HomeTetris.vue
deleted file mode 100644
index 6300c32e..00000000
--- a/docs/app/components/home/HomeTetris.vue
+++ /dev/null
@@ -1,108 +0,0 @@
-<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>
diff --git a/docs/app/components/releases/ReleasesItem.vue b/docs/app/components/releases/ReleasesItem.vue
deleted file mode 100644
index 0d863dcb..00000000
--- a/docs/app/components/releases/ReleasesItem.vue
+++ /dev/null
@@ -1,54 +0,0 @@
-<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>
diff --git a/docs/app/composables/useModule.ts b/docs/app/composables/useModule.ts
new file mode 100644
index 00000000..edd78b14
--- /dev/null
+++ b/docs/app/composables/useModule.ts
@@ -0,0 +1,24 @@
+import pkg from '../../ui-pro2/package.json'
+
+export function useModule() {
+  const config = useRuntimeConfig().public
+
+  const modules = [{
+    label: 'nuxt/ui',
+    icon: 'i-heroicons-cube-transparent',
+    suffix: `v${config.version}`,
+    value: 'ui'
+    }, {
+    label: 'nuxt/ui-pro',
+    icon: 'i-heroicons-cube-transparent',
+    suffix: `v${pkg.version.split('-')[0]}`,
+    value: 'ui-pro'
+  }]
+
+  const module = useCookie<string>('module', { default: () => modules[0].value })
+
+  return {
+    module,
+    modules
+  }
+}
diff --git a/docs/app/content/2.components/1.app.md b/docs/app/content/2.components/1.app.md
new file mode 100644
index 00000000..07860486
--- /dev/null
+++ b/docs/app/content/2.components/1.app.md
@@ -0,0 +1,10 @@
+---
+title: App
+description: Starting point for your Nuxt UI app.
+links:
+  - label: GitHub
+    icon: i-simple-icons-github
+    to: https://github.com/nuxt/ui/blob/dev/src/runtime/components/elements/Accordion.vue
+---
+
+## Usage
diff --git a/docs/app/content/2.components/date-picker.md b/docs/app/content/2.components/date-picker.md
deleted file mode 100644
index a42e1993..00000000
--- a/docs/app/content/2.components/date-picker.md
+++ /dev/null
@@ -1,112 +0,0 @@
----
-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"}
diff --git a/docs/app/content/index.yml b/docs/app/content/index.yml
deleted file mode 100644
index ad16dd9d..00000000
--- a/docs/app/content/index.yml
+++ /dev/null
@@ -1,191 +0,0 @@
-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.
diff --git a/docs/app/content/releases.yml b/docs/app/content/releases.yml
deleted file mode 100644
index a0a7c84b..00000000
--- a/docs/app/content/releases.yml
+++ /dev/null
@@ -1,16 +0,0 @@
-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
diff --git a/docs/app/layouts/docs.vue b/docs/app/layouts/docs.vue
index b60aa30a..c89a4b4b 100644
--- a/docs/app/layouts/docs.vue
+++ b/docs/app/layouts/docs.vue
@@ -1,10 +1,20 @@
+<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')))
+
+const { module, modules } = useModule()
+</script>
+
 <template>
   <UMain>
     <UContainer>
       <UPage>
         <template #left>
           <UPageAside>
-            <!-- <BranchSelect /> -->
+            <USelect v-model="module" :items="modules" icon="i-heroicons-cube" class="w-full mb-3 lg:mb-6" />
 
             <UContentNavigation :navigation="navigation" />
           </UPageAside>
@@ -15,11 +25,3 @@
     </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>
diff --git a/docs/app/pages/[...slug].vue b/docs/app/pages/[...slug].vue
index ae79983d..72f5363c 100644
--- a/docs/app/pages/[...slug].vue
+++ b/docs/app/pages/[...slug].vue
@@ -1,8 +1,8 @@
 <script setup lang="ts">
 import { withoutTrailingSlash } from 'ufo'
+import { findPageHeadline } from '#ui-pro/utils/content'
 
 const route = useRoute()
-// const { branch } = useContentSource()
 
 definePageMeta({
   layout: 'docs'
@@ -13,22 +13,19 @@ 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 { data: surround } = await useAsyncData(`${route.path}-surround`, () => {
+  return queryContent()
+    .where({
+      _extension: 'md',
+      navigation: {
+        $ne: false
+      }
+    })
+    .only(['title', 'description', '_path'])
+    .findSurround(withoutTrailingSlash(route.path))
+}, { default: () => [] })
 
-// const headline = computed(() => findPageHeadline(page.value))
+const headline = computed(() => findPageHeadline(page.value))
 
 useSeoMeta({
   titleTemplate: '%s - Nuxt UI',
@@ -42,13 +39,13 @@ defineOgImage({
   component: 'Docs',
   title: page.value.title,
   description: page.value.description,
-  // headline: headline.value
+  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}`,
+  to: `https://github.com/nuxt/ui/edit/dev/docs/content/${page?.value?._file}`,
   target: '_blank'
 }, {
   icon: 'i-heroicons-star',
@@ -84,13 +81,13 @@ const resourcesLinks = [{
 </script>
 
 <template>
-  <UPage>
-    <!-- <UPageHeader :title="page.title" :description="page.description" :links="page.links" :headline="headline" />
+  <UPage v-if="page">
+    <UPageHeader :title="page.title" :description="page.description" :links="page.links" :headline="headline" />
 
-    <UPageBody prose>
+    <UPageBody>
       <ContentRenderer v-if="page.body" :value="page" />
 
-      <hr v-if="surround?.length">
+      <USeparator />
 
       <UContentSurround :surround="surround" />
     </UPageBody>
@@ -98,24 +95,20 @@ const resourcesLinks = [{
     <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" />
+          <USeparator v-if="page.body?.toc?.links?.length" type="dashed" />
 
-            <UPageLinks title="Community" :links="communityLinks" />
+          <UPageLinks title="Community" :links="communityLinks" />
 
-            <UDivider type="dashed" />
+          <USeparator type="dashed" />
 
-            <UPageLinks title="Resources" :links="resourcesLinks" />
+          <UPageLinks title="Resources" :links="resourcesLinks" />
 
-            <UDivider type="dashed" />
+          <!-- <USeparator type="dashed" />
 
-            <div class="space-y-3">
-              <AdsPro />
-              <AdsCarbon />
-            </div>
-          </div>
+          <AdsPro />
+          <AdsCarbon /> -->
         </template>
       </UContentToc>
-    </template> -->
+    </template>
   </UPage>
 </template>
diff --git a/docs/app/pages/index.vue b/docs/app/pages/index.vue
deleted file mode 100644
index be053c97..00000000
--- a/docs/app/pages/index.vue
+++ /dev/null
@@ -1,837 +0,0 @@
-<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>
diff --git a/docs/app/pages/playground.vue b/docs/app/pages/playground.vue
index c25f27c4..a69338be 100644
--- a/docs/app/pages/playground.vue
+++ b/docs/app/pages/playground.vue
@@ -14,12 +14,14 @@ defineOgImage({
   title,
   description
 })
+
+const colorMode = useColorMode()
 </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%" />
+      <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>
diff --git a/docs/app/pages/releases.vue b/docs/app/pages/releases.vue
deleted file mode 100644
index 7c568472..00000000
--- a/docs/app/pages/releases.vue
+++ /dev/null
@@ -1,127 +0,0 @@
-<script setup lang="ts">
-import { eachDayOfInterval, isSameDay, isToday } from 'date-fns'
-
-const { data: page } = await useAsyncData('releases', () => queryContent('/dev/releases').findOne())
-if (!page.value) {
-  throw createError({ statusCode: 404, statusMessage: 'Page not found', fatal: true })
-}
-
-const { data: releases } = await useFetch('/api/releases.json')
-const { data: pulls } = await useLazyFetch('/api/pulls.json', { default: () => [] })
-
-const dates = computed(() => {
-  const first = releases.value[releases.value.length - 1]
-  if (!first) return []
-
-  const days = eachDayOfInterval({ start: new Date(first.published_at), end: new Date() })
-
-  return days.reverse().map(day => {
-    return {
-      day,
-      release: releases.value.find(release => isSameDay(new Date(release.published_at), day)),
-      pulls: pulls.value.filter(pull => isSameDay(new Date(pull.merged_at), day))
-    }
-  })
-})
-
-const title = page.value.head?.title || page.value.title
-const description = page.value.head?.description || page.value.description
-useSeoMeta({
-  titleTemplate: '%s - Nuxt UI',
-  title,
-  description,
-  ogTitle: `${title} - Nuxt UI`,
-  ogDescription: description
-})
-
-defineOgImage({
-  component: 'Docs',
-  title,
-  description
-})
-</script>
-
-<template>
-  <div class="relative px-4 sm:px-6 lg:px-8">
-    <div class="stars w-screen fixed pointer-events-none inset-x-0 -top-[--header-height] bottom-0 opacity-75">
-      <div class="h-px w-px rounded-full bg-transparent" />
-      <div class="h-px w-px rounded-full bg-transparent" />
-      <div class="h-px w-px rounded-full bg-transparent" />
-    </div>
-
-    <ULandingHero :description="page.description" :links="page.links" align="center" :ui="{ title: 'sm:text-6xl' }" class="md:py-32">
-      <template #title>
-        <!-- eslint-disable-next-line vue/no-v-html -->
-        <span v-html="page.title" />
-      </template>
-    </ULandingHero>
-
-    <UPageBody>
-      <div class="h-[96px] w-0.5 bg-gray-200 dark:bg-gray-800 mx-auto rounded-t-full" />
-
-      <div v-for="(date, index) in dates" :key="index" class="relative py-3 min-h-[24px] flex items-center justify-center">
-        <div class="h-full w-0.5 bg-gray-200 dark:bg-gray-800 absolute top-0 inset-x-[50%] -ml-[1px] flex-shrink-0" />
-
-        <template v-if="date.release || date.pulls?.length || isToday(date.day)">
-          <div class="flex items-start gap-8 relative w-[50%]" :class="index % 2 === 0 ? 'translate-x-[50%] -ml-2' : '-translate-x-[50%] ml-2 flex-row-reverse'">
-            <div class="h-[8px] w-[8px] bg-gray-400 dark:bg-gray-400 rounded-full z-[1] mt-2 ring-2 ring-gray-300 dark:ring-gray-600 flex-shrink-0" />
-
-            <ReleasesItem :date="date" :class="index % 2 === 0 ? '' : 'text-right'" />
-          </div>
-        </template>
-      </div>
-
-      <div class="h-[96px] w-0.5 bg-gray-200 dark:bg-gray-800 mx-auto rounded-b-full" />
-    </UPageBody>
-  </div>
-</template>
-
-<style scoped>
-/* Credits: https://reflect.app/ */
-
-.stars {
-  left: 50%;
-  -webkit-mask-image: linear-gradient(180deg, rgba(217, 217, 217, 0) 0%, rgba(217, 217, 217, .8) 25%, #d9d9d9 50%, rgba(217, 217, 217, .8) 75%, rgba(217, 217, 217, 0) 100%);
-  mask-image: linear-gradient(180deg, rgba(217, 217, 217, 0) 0%, rgba(217, 217, 217, .8) 25%, #d9d9d9 50%, rgba(217, 217, 217, .8) 75%, rgba(217, 217, 217, 0) 100%);
-  -webkit-mask-size: cover;
-  mask-size: cover;
-  transform: translate(-50%);
-
-  --color: #000;
-}
-
-.dark .stars {
-  --color: #fff;
-}
-
-.stars > div {
-  animation: risingStarsAnination linear infinite;
-}
-
-.stars div:nth-child(1) {
-  animation-duration: 100s !important;
-  box-shadow: 693px 8435px var(--color), 1921px 246px var(--color), 1120px 872px var(--color), 1614px 1319px var(--color), 628px 1227px var(--color), 144px 1298px var(--color), 1152px 1529px var(--color), 1486px 1897px var(--color), 401px 1213px var(--color), 1023px 73px var(--color), 122px 509px var(--color), 1264px 1265px var(--color), 235px 1276px var(--color), 514px 1138px var(--color), 1019px 1915px var(--color), 1214px 1058px var(--color), 1740px 1354px var(--color), 1947px 791px var(--color), 1046px 438px var(--color), 695px 1209px var(--color), 58px 442px var(--color), 1143px 1489px var(--color), 1486px 607px var(--color), 730px 1396px var(--color), 402px 1177px var(--color), 1533px 657px var(--color), 1436px 657px var(--color), 1567px 1081px var(--color), 1632px 295px var(--color), 460px 1293px var(--color), 196px 800px var(--color), 1554px 1284px var(--color), 645px 1441px var(--color), 467px 502px var(--color), 1413px 497px var(--color), 1468px 434px var(--color), 34px 619px var(--color), 1858px 1004px var(--color), 834px 511px var(--color), 693px 916px var(--color), 330px 91px var(--color), 1686px 1366px var(--color), 36px 56px var(--color), 390px 1355px var(--color), 656px 99px var(--color), 1695px 1869px var(--color), 321px 1219px var(--color), 271px 1082px var(--color), 1730px 407px var(--color), 1769px 1790px var(--color), 1072px 780px var(--color), 630px 1561px var(--color), 1238px 1991px var(--color), 26px 440px var(--color), 998px 1604px var(--color), 1865px 631px var(--color), 289px 1635px var(--color), 689px 547px var(--color), 1691px 1147px var(--color), 113px 1933px var(--color), 1656px 949px var(--color), 903px 1220px var(--color), 1214px 503px var(--color), 505px 1391px var(--color), 1300px 1766px var(--color), 56px 194px var(--color), 1920px 572px var(--color), 1704px 945px var(--color), 1627px 278px var(--color), 1659px 793px var(--color), 1249px 1495px var(--color), 1029px 1187px var(--color), 1555px 408px var(--color), 1030px 250px var(--color), 725px 1744px var(--color), 1787px 1643px var(--color), 627px 199px var(--color), 1151px 698px var(--color), 1862px 81px var(--color), 166px 1098px var(--color), 896px 1022px var(--color), 1313px 123px var(--color), 1097px 1047px var(--color), 1288px 1258px var(--color), 691px 348px var(--color), 573px 862px var(--color), 277px 1220px var(--color), 1039px 1041px var(--color), 105px 634px var(--color), 389px 1046px var(--color), 1452px 914px var(--color), 1636px 1264px var(--color), 1809px 1362px var(--color), 1796px 1460px var(--color), 758px 131px var(--color), 1116px 891px var(--color), 837px 844px var(--color), 996px 497px var(--color), 270px 990px var(--color), 1646px 1943px var(--color), 1896px 734px var(--color), 1237px 154px var(--color), 795px 796px var(--color), 1773px 1527px var(--color), 1262px 1316px var(--color), 1949px 499px var(--color), 1987px 1438px var(--color), 993px 1583px var(--color), 1371px 423px var(--color), 1596px 388px var(--color), 878px 498px var(--color), 1571px 1310px var(--color), 1339px 290px var(--color), 1323px 1028px var(--color), 1224px 1001px var(--color), 1211px 1638px var(--color), 1877px 85px var(--color), 300px 787px var(--color), 1699px 1559px var(--color), 506px 8px var(--color), 703px 228px var(--color), 1903px 233px var(--color), 1740px 963px var(--color), 1901px 1551px var(--color), 34px 440px var(--color), 660px 713px var(--color), 953px 1397px var(--color), 1292px 1730px var(--color), 1733px 922px var(--color), 844px 1972px var(--color), 292px 85px var(--color), 786px 284px var(--color), 1716px 1293px var(--color), 111px 1807px var(--color), 1787px 1462px var(--color), 1190px 1837px var(--color), 224px 1552px var(--color), 1532px 1693px var(--color), 819px 594px var(--color), 1441px 1037px var(--color), 11px 1657px var(--color), 580px 645px var(--color), 1469px 330px var(--color), 1532px 1057px var(--color), 1146px 860px var(--color), 1438px 784px var(--color), 1365px 1858px var(--color), 271px 1335px var(--color), 1118px 712px var(--color), 1261px 48px var(--color), 1045px 447px var(--color), 1325px 1454px var(--color), 1517px 406px var(--color), 1339px 386px var(--color), 1375px 1652px var(--color), 1719px 966px var(--color), 581px 765px var(--color), 1222px 599px var(--color), 1567px 666px var(--color), 1154px 1378px var(--color), 1709px 480px var(--color), 1862px 285px var(--color), 286px 1888px var(--color), 587px 870px var(--color), 46px 832px var(--color), 1036px 286px var(--color), 1376px 261px var(--color), 1794px 981px var(--color), 1530px 1004px var(--color), 1700px 1617px var(--color), 1810px 253px var(--color), 578px 521px var(--color), 37px 1207px var(--color), 1126px 151px var(--color), 644px 603px var(--color), 1897px 1995px var(--color), 415px 579px var(--color), 929px 718px var(--color), 1025px 1952px var(--color), 1779px 1959px var(--color), 1955px 1752px var(--color), 1991px 136px var(--color), 659px 1463px var(--color), 1113px 1052px var(--color), 1628px 1806px var(--color), 1891px 1064px var(--color), 1782px 1329px var(--color), 510px 526px var(--color), 1348px 599px var(--color), 1157px 1994px var(--color), 936px 260px var(--color), 227px 251px var(--color), 24px 1290px var(--color), 1944px 701px var(--color), 1665px 745px var(--color), 1648px 1817px var(--color), 1446px 1941px var(--color), 1552px 802px var(--color), 483px 264px var(--color), 974px 537px var(--color), 966px 941px var(--color), 1960px 1542px var(--color), 281px 930px var(--color), 1000px 863px var(--color), 800px 1257px var(--color), 1949px 1845px var(--color), 43px 1126px var(--color), 981px 36px var(--color), 1355px 1949px var(--color), 797px 43px var(--color), 110px 906px var(--color), 829px 853px var(--color), 845px 1999px var(--color), 565px 1058px var(--color), 1424px 1028px var(--color), 903px 1574px var(--color), 1670px 632px var(--color), 1417px 1997px var(--color), 592px 1967px var(--color), 843px 1894px var(--color), 111px 341px var(--color), 1868px 1896px var(--color), 1846px 832px var(--color), 1627px 1557px var(--color), 1331px 723px var(--color), 707px 770px var(--color), 1589px 1422px var(--color), 1960px 1137px var(--color), 304px 572px var(--color), 1275px 459px var(--color), 707px 866px var(--color), 914px 1524px var(--color), 796px 551px var(--color), 896px 1655px var(--color), 1051px 182px var(--color), 1834px 636px var(--color), 278px 1663px var(--color), 1197px 1203px var(--color), 482px 1601px var(--color), 199px 924px var(--color), 1974px 1084px var(--color), 1676px 668px var(--color), 858px 1226px var(--color), 1375px 1873px var(--color), 415px 1817px var(--color), 1112px 312px var(--color), 1011px 1629px var(--color), 1217px 991px var(--color), 1418px 1998px var(--color), 1645px 1226px var(--color), 186px 1661px var(--color), 1614px 1374px var(--color), 732px 544px var(--color), 458px 72px var(--color), 1137px 1584px var(--color), 1704px 1103px var(--color), 329px 1958px var(--color), 17px 141px var(--color), 308px 1980px var(--color), 1975px 675px var(--color), 555px 330px var(--color), 787px 712px var(--color), 1062px 39px var(--color), 1586px 1771px var(--color), 1022px 1632px var(--color), 559px 1316px var(--color), 1254px 294px var(--color), 799px 865px var(--color), 672px 116px var(--color), 1994px 575px var(--color), 1733px 652px var(--color), 1233px 894px var(--color), 1369px 573px var(--color), 237px 262px var(--color), 1980px 200px var(--color), 657px 1489px var(--color), 1871px 1364px var(--color), 1571px 891px var(--color), 115px 617px var(--color), 1711px 1178px var(--color), 463px 183px var(--color), 1148px 841px var(--color), 566px 782px var(--color), 844px 1056px var(--color), 811px 1855px var(--color), 97px 842px var(--color), 1097px 10px var(--color), 886px 1066px var(--color), 1590px 1707px var(--color), 1884px 1313px var(--color), 1719px 408px var(--color), 256px 319px var(--color), 116px 253px var(--color), 132px 1237px var(--color), 912px 1912px var(--color), 568px 1053px var(--color), 840px 1523px var(--color), 521px 1780px var(--color), 1092px 554px var(--color), 1833px 1018px var(--color), 1897px 514px var(--color), 1765px 1236px var(--color), 415px 1512px var(--color), 1457px 1382px var(--color), 567px 1294px var(--color), 777px 505px var(--color), 1502px 635px var(--color), 422px 933px var(--color), 1609px 1030px var(--color), 124px 550px var(--color), 1839px 895px var(--color), 671px 1187px var(--color), 1445px 1668px var(--color), 1457px 633px var(--color), 363px 1250px var(--color), 1770px 1598px var(--color), 1802px 82px var(--color), 1784px 1798px var(--color), 1275px 1504px var(--color), 888px 264px var(--color), 157px 209px var(--color), 1803px 1572px var(--color), 722px 851px var(--color), 732px 365px var(--color), 485px 1277px var(--color), 155px 974px var(--color), 986px 339px var(--color), 283px 49px var(--color), 1605px 727px var(--color), 55px 359px var(--color), 468px 987px var(--color), 789px 283px var(--color), 97px 623px var(--color), 237px 432px var(--color), 577px 619px var(--color), 891px 623px var(--color), 861px 373px var(--color), 510px 1655px var(--color), 808px 1413px var(--color), 1626px 1241px var(--color), 368px 53px var(--color), 796px 852px var(--color), 1832px 152px var(--color), 575px 1066px var(--color), 1374px 1739px var(--color), 951px 1313px var(--color), 1305px 742px var(--color), 607px 1560px var(--color), 1735px 682px var(--color), 827px 805px var(--color), 270px 1759px var(--color), 606px 1115px var(--color), 569px 1730px var(--color), 742px 158px var(--color), 261px 1861px var(--color), 1926px 1332px var(--color), 461px 1982px var(--color), 380px 855px var(--color), 194px 1920px var(--color), 423px 228px var(--color), 498px 75px var(--color), 480px 27px var(--color), 1842px 769px var(--color), 1587px 605px var(--color), 721px 371px var(--color), 1248px 20px var(--color), 457px 1734px var(--color), 1642px 895px var(--color), 37px 282px var(--color), 139px 856px var(--color), 1863px 1254px var(--color), 728px 419px var(--color), 1930px 1638px var(--color), 587px 1392px var(--color), 52px 228px var(--color), 483px 1150px var(--color), 1127px 970px var(--color), 20px 1909px var(--color), 1427px 1208px var(--color), 421px 951px var(--color), 1552px 259px var(--color), 688px 1070px var(--color), 1618px 1896px var(--color), 1422px 942px var(--color), 902px 741px var(--color), 340px 916px var(--color), 1392px 1128px var(--color), 1713px 539px var(--color), 1213px 1312px var(--color), 170px 1565px var(--color), 1603px 719px var(--color), 1504px 1666px var(--color), 880px 440px var(--color), 1611px 1247px var(--color), 408px 1211px var(--color), 624px 371px var(--color), 1309px 531px var(--color), 1913px 955px var(--color), 170px 1921px var(--color), 40px 1967px var(--color), 1074px 1194px var(--color), 1025px 632px var(--color), 165px 277px var(--color), 1685px 1842px var(--color), 1840px 1925px var(--color), 1534px 859px var(--color), 411px 780px var(--color), 1814px 618px var(--color), 802px 1791px var(--color), 724px 1305px var(--color), 692px 603px var(--color), 662px 1720px var(--color), 682px 333px var(--color), 962px 170px var(--color), 845px 1277px var(--color), 1692px 650px var(--color), 810px 1576px var(--color), 1812px 1536px var(--color), 1031px 641px var(--color), 1794px 1450px var(--color), 496px 1923px var(--color), 1410px 998px var(--color), 1984px 1904px var(--color), 989px 1970px var(--color), 926px 1826px var(--color), 1063px 1831px var(--color), 586px 59px var(--color), 769px 1816px var(--color), 789px 993px var(--color), 1228px 1880px var(--color), 12px 1624px var(--color), 1706px 787px var(--color), 763px 1189px var(--color), 1066px 1139px var(--color), 1927px 182px var(--color), 1058px 927px var(--color), 463px 938px var(--color), 1608px 564px var(--color), 681px 1082px var(--color), 1681px 1704px var(--color), 499px 1586px var(--color), 1270px 184px var(--color), 731px 233px var(--color), 500px 916px var(--color), 1488px 1864px var(--color), 38px 1593px var(--color), 155px 639px var(--color), 1210px 435px var(--color), 671px 1152px var(--color), 1671px 473px var(--color), 424px 101px var(--color), 1456px 1419px var(--color), 1791px 1837px var(--color), 1783px 411px var(--color), 1355px 11px var(--color), 1840px 536px var(--color), 555px 538px var(--color), 71px 683px var(--color), 1375px 674px var(--color), 269px 545px var(--color), 1523px 79px var(--color), 1960px 602px var(--color), 828px 732px var(--color), 723px 771px var(--color), 712px 1505px var(--color), 285px 606px var(--color), 286px 1741px var(--color), 1233px 778px var(--color), 1717px 1221px var(--color), 1225px 981px var(--color), 691px 752px var(--color), 829px 78px var(--color), 1211px 1365px var(--color), 1701px 1323px var(--color), 1614px 87px var(--color), 1974px 1744px var(--color), 1227px 873px var(--color), 549px 1357px var(--color), 881px 1414px var(--color), 321px 1381px var(--color), 1378px 1339px var(--color), 1331px 1263px var(--color), 1997px 50px var(--color), 149px 776px var(--color), 1297px 1054px var(--color), 1183px 757px var(--color), 421px 58px var(--color), 1847px 217px var(--color), 1128px 1490px var(--color), 681px 485px var(--color), 486px 1455px var(--color), 224px 804px var(--color), 1971px 210px var(--color), 699px 1124px var(--color), 1210px 799px var(--color), 521px 18px var(--color), 1793px 1493px var(--color), 36px 815px var(--color), 1776px 462px var(--color), 1701px 196px var(--color);
-}
-
-.stars div:nth-child(2) {
-  animation-duration: 150s !important;
-  box-shadow: 1432px 8687px var(--color), 281px 1550px var(--color), 797px 588px var(--color), 1219px 1750px var(--color), 291px 20px var(--color), 989px 1462px var(--color), 321px 1536px var(--color), 660px 1179px var(--color), 630px 1097px var(--color), 138px 1129px var(--color), 317px 982px var(--color), 1005px 692px var(--color), 594px 770px var(--color), 817px 1325px var(--color), 1750px 516px var(--color), 306px 784px var(--color), 103px 1251px var(--color), 1035px 897px var(--color), 1598px 760px var(--color), 1671px 1684px var(--color), 473px 120px var(--color), 1871px 422px var(--color), 1416px 1596px var(--color), 664px 469px var(--color), 1706px 1842px var(--color), 1830px 647px var(--color), 1494px 831px var(--color), 386px 209px var(--color), 1804px 1120px var(--color), 439px 1000px var(--color), 1089px 7px var(--color), 1293px 560px var(--color), 102px 1926px var(--color), 1219px 1667px var(--color), 1364px 1107px var(--color), 1270px 619px var(--color), 1180px 1657px var(--color), 1208px 521px var(--color), 807px 1325px var(--color), 478px 396px var(--color), 995px 327px var(--color), 1067px 352px var(--color), 1620px 1648px var(--color), 114px 1380px var(--color), 24px 883px var(--color), 1589px 883px var(--color), 1365px 139px var(--color), 778px 1926px var(--color), 1390px 1943px var(--color), 1755px 193px var(--color), 1575px 292px var(--color), 214px 1095px var(--color), 372px 1011px var(--color), 251px 31px var(--color), 1249px 1150px var(--color), 1481px 520px var(--color), 1716px 499px var(--color), 937px 1934px var(--color), 743px 494px var(--color), 1341px 1953px var(--color), 670px 1523px var(--color), 441px 940px var(--color), 1056px 944px var(--color), 1963px 1467px var(--color), 1543px 852px var(--color), 225px 763px var(--color), 957px 1937px var(--color), 1344px 460px var(--color), 497px 512px var(--color), 1676px 1196px var(--color), 961px 438px var(--color), 1721px 1580px var(--color), 418px 1874px var(--color), 316px 1597px var(--color), 1897px 526px var(--color), 640px 1420px var(--color), 50px 1211px var(--color), 1871px 726px var(--color), 1672px 1990px var(--color), 1258px 864px var(--color), 62px 614px var(--color), 314px 882px var(--color), 878px 1076px var(--color), 1724px 1142px var(--color), 543px 46px var(--color), 641px 425px var(--color), 76px 57px var(--color), 227px 927px var(--color), 816px 1130px var(--color), 1064px 1389px var(--color), 1915px 671px var(--color), 407px 1527px var(--color), 257px 605px var(--color), 983px 1012px var(--color), 1576px 388px var(--color), 1575px 1935px var(--color), 68px 1594px var(--color), 311px 107px var(--color), 832px 144px var(--color), 349px 1401px var(--color), 1150px 1652px var(--color), 627px 1663px var(--color), 922px 1119px var(--color), 720px 1629px var(--color), 305px 642px var(--color), 1125px 146px var(--color), 898px 750px var(--color), 642px 1538px var(--color), 88px 782px var(--color), 723px 1320px var(--color), 355px 785px var(--color), 1149px 1949px var(--color), 1522px 1885px var(--color), 1984px 957px var(--color), 256px 1165px var(--color), 1216px 1415px var(--color), 777px 408px var(--color), 819px 510px var(--color), 1239px 1325px var(--color), 1202px 326px var(--color), 225px 384px var(--color), 291px 498px var(--color), 1349px 535px var(--color), 1927px 1931px var(--color), 1673px 507px var(--color), 584px 1285px var(--color), 486px 743px var(--color), 1391px 1091px var(--color), 541px 947px var(--color), 1505px 1612px var(--color), 231px 1371px var(--color), 1336px 1722px var(--color), 729px 1068px var(--color), 1179px 1525px var(--color), 203px 76px var(--color), 1878px 736px var(--color), 1704px 1381px var(--color), 551px 1527px var(--color), 1110px 1859px var(--color), 313px 596px var(--color), 543px 9px var(--color), 1091px 951px var(--color), 1178px 1081px var(--color), 137px 1930px var(--color), 705px 1554px var(--color), 1427px 1999px var(--color), 988px 1968px var(--color), 271px 1720px var(--color), 1234px 1857px var(--color), 1559px 1284px var(--color), 1353px 1409px var(--color), 298px 1591px var(--color), 602px 1198px var(--color), 1451px 106px var(--color), 1835px 1119px var(--color), 1098px 324px var(--color), 946px 842px var(--color), 1308px 1879px var(--color), 1013px 57px var(--color), 1856px 1163px var(--color), 266px 1889px var(--color), 361px 657px var(--color), 1450px 873px var(--color), 1008px 644px var(--color), 632px 1115px var(--color), 45px 1126px var(--color), 845px 1090px var(--color), 582px 974px var(--color), 671px 82px var(--color), 561px 1442px var(--color), 1417px 594px var(--color), 931px 984px var(--color), 1677px 1052px var(--color), 1698px 844px var(--color), 1043px 1059px var(--color), 861px 1672px var(--color), 1922px 1111px var(--color), 1261px 310px var(--color), 1940px 1966px var(--color), 391px 1960px var(--color), 1116px 158px var(--color), 639px 1471px var(--color), 526px 1349px var(--color), 888px 1053px var(--color), 547px 563px var(--color), 1005px 1053px var(--color), 67px 98px var(--color), 9px 872px var(--color), 693px 1422px var(--color), 1303px 1524px var(--color), 1765px 655px var(--color), 66px 188px var(--color), 1929px 1145px var(--color), 1158px 1423px var(--color), 1897px 302px var(--color), 1421px 630px var(--color), 120px 240px var(--color), 777px 1748px var(--color), 802px 1919px var(--color), 1039px 745px var(--color), 1739px 897px var(--color), 327px 972px var(--color), 426px 1450px var(--color), 1900px 1785px var(--color), 431px 87px var(--color), 394px 1871px var(--color), 226px 1776px var(--color), 698px 757px var(--color), 944px 274px var(--color), 1764px 899px var(--color), 736px 858px var(--color), 1581px 867px var(--color), 1760px 594px var(--color), 315px 1572px var(--color), 612px 69px var(--color), 491px 1784px var(--color), 1487px 1998px var(--color), 371px 1477px var(--color), 1770px 638px var(--color), 606px 1666px var(--color), 347px 1014px var(--color), 659px 585px var(--color), 1762px 1819px var(--color), 1795px 823px var(--color), 486px 1488px var(--color), 1424px 977px var(--color), 1441px 1377px var(--color), 372px 1103px var(--color), 1736px 1114px var(--color), 883px 789px var(--color), 760px 456px var(--color), 1475px 1368px var(--color), 343px 415px var(--color), 1221px 823px var(--color), 894px 513px var(--color), 1016px 713px var(--color), 751px 22px var(--color), 875px 595px var(--color), 1999px 1266px var(--color), 1340px 652px var(--color), 1872px 540px var(--color), 1957px 753px var(--color), 308px 1242px var(--color), 1551px 1124px var(--color), 1417px 305px var(--color), 1701px 1843px var(--color), 539px 1505px var(--color), 404px 1442px var(--color), 146px 248px var(--color), 1942px 602px var(--color), 1019px 1240px var(--color), 813px 1300px var(--color), 1259px 1092px var(--color), 1820px 10px var(--color), 27px 222px var(--color), 278px 1838px var(--color), 1420px 1702px var(--color), 367px 61px var(--color), 433px 518px var(--color), 253px 1444px var(--color), 791px 954px var(--color), 1768px 1504px var(--color), 709px 1529px var(--color), 198px 246px var(--color), 1228px 131px var(--color), 812px 1859px var(--color), 1145px 784px var(--color), 165px 377px var(--color), 847px 535px var(--color), 71px 1404px var(--color), 1364px 1168px var(--color), 410px 1120px var(--color), 1265px 261px var(--color), 1678px 1845px var(--color), 305px 873px var(--color), 1524px 1720px var(--color), 608px 682px var(--color), 1277px 991px var(--color), 1865px 1097px var(--color), 1426px 197px var(--color), 435px 1774px var(--color), 42px 470px var(--color), 27px 453px var(--color), 306px 1691px var(--color), 60px 1692px var(--color), 1097px 1408px var(--color), 992px 136px var(--color), 1082px 1688px var(--color), 1925px 1301px var(--color), 156px 1675px var(--color), 164px 1147px var(--color), 109px 480px var(--color), 1597px 1391px var(--color), 238px 1553px var(--color), 1609px 303px var(--color), 1932px 1158px var(--color), 127px 891px var(--color), 279px 1047px var(--color), 909px 1389px var(--color), 1517px 1647px var(--color), 394px 1866px var(--color), 1351px 838px var(--color), 787px 660px var(--color), 138px 871px var(--color), 1228px 1149px var(--color), 1251px 1946px var(--color), 1766px 1350px var(--color), 230px 1552px var(--color), 1412px 1835px var(--color), 1465px 1476px var(--color), 288px 1472px var(--color), 1608px 1698px var(--color), 1503px 1254px var(--color), 888px 1080px var(--color), 962px 1952px var(--color), 987px 249px var(--color), 1516px 1971px var(--color), 598px 1683px var(--color), 740px 12px var(--color), 1017px 1917px var(--color), 1094px 894px var(--color), 596px 71px var(--color), 745px 1504px var(--color), 1234px 1514px var(--color), 13px 25px var(--color), 1981px 758px var(--color), 714px 853px var(--color), 1964px 637px var(--color), 373px 1568px var(--color), 1580px 1172px var(--color), 130px 605px var(--color), 1736px 1281px var(--color), 65px 1793px var(--color), 436px 861px var(--color), 33px 161px var(--color), 1530px 1981px var(--color), 1199px 1707px var(--color), 1118px 1175px var(--color), 470px 1959px var(--color), 1552px 233px var(--color), 1450px 1039px var(--color), 1012px 543px var(--color), 722px 621px var(--color), 777px 1365px var(--color), 1510px 1339px var(--color), 95px 896px var(--color), 60px 1765px var(--color), 62px 1148px var(--color), 720px 763px var(--color), 1434px 1114px var(--color), 250px 400px var(--color), 1903px 490px var(--color), 715px 762px var(--color), 185px 1156px var(--color), 1993px 907px var(--color), 389px 95px var(--color), 347px 1342px var(--color), 189px 1186px var(--color), 1498px 1760px var(--color), 1525px 358px var(--color), 479px 1712px var(--color), 483px 418px var(--color), 317px 815px var(--color), 380px 1413px var(--color), 1486px 922px var(--color), 1379px 894px var(--color), 1149px 1911px var(--color), 1360px 1819px var(--color), 140px 1776px var(--color), 1167px 875px var(--color), 332px 1193px var(--color), 1252px 1232px var(--color), 1713px 1820px var(--color), 455px 58px var(--color), 1045px 555px var(--color), 377px 1058px var(--color), 900px 1396px var(--color), 288px 592px var(--color), 399px 762px var(--color), 590px 460px var(--color), 126px 1925px var(--color), 1429px 890px var(--color), 1841px 1712px var(--color), 1975px 182px var(--color), 1559px 1169px var(--color), 1661px 1463px var(--color), 1723px 1948px var(--color), 1280px 1703px var(--color), 713px 1205px var(--color), 334px 1816px var(--color), 460px 724px var(--color), 1573px 1084px var(--color), 1543px 1086px var(--color), 1319px 1241px var(--color), 1014px 880px var(--color), 1492px 18px var(--color), 330px 153px var(--color), 3px 1416px var(--color), 1396px 166px var(--color), 1482px 1299px var(--color), 819px 1966px var(--color), 281px 3px var(--color), 1072px 1199px var(--color), 510px 456px var(--color), 1521px 1731px var(--color), 1801px 643px var(--color), 446px 529px var(--color), 1888px 1169px var(--color), 893px 683px var(--color), 1588px 348px var(--color), 1748px 566px var(--color), 232px 481px var(--color), 769px 200px var(--color), 1649px 1016px var(--color), 1675px 1930px var(--color), 1018px 1607px var(--color), 1137px 825px var(--color), 491px 608px var(--color), 28px 1383px var(--color), 329px 746px var(--color), 273px 1846px var(--color), 1257px 1139px var(--color), 258px 1278px var(--color), 821px 1393px var(--color), 237px 1117px var(--color), 172px 771px var(--color), 120px 608px var(--color), 670px 939px var(--color), 1412px 1095px var(--color), 1257px 1094px var(--color), 996px 1308px var(--color), 953px 1799px var(--color), 769px 11px var(--color), 1586px 864px var(--color), 1217px 1677px var(--color), 1276px 1159px var(--color), 1961px 488px var(--color), 1888px 676px var(--color), 1965px 634px var(--color), 1372px 1360px var(--color), 875px 1653px var(--color), 939px 408px var(--color), 1632px 1895px var(--color), 1858px 802px var(--color), 574px 1280px var(--color), 1800px 1240px var(--color), 1484px 537px var(--color), 926px 1379px var(--color), 1436px 1123px var(--color), 136px 506px var(--color), 920px 1692px var(--color), 1640px 1581px var(--color), 426px 528px var(--color), 1531px 45px var(--color), 634px 991px var(--color), 629px 319px var(--color), 808px 1818px var(--color), 144px 1357px var(--color), 69px 409px var(--color), 284px 1280px var(--color), 1975px 546px var(--color), 817px 261px var(--color), 1794px 575px var(--color), 1747px 1141px var(--color), 997px 1824px var(--color), 783px 1897px var(--color), 597px 1756px var(--color), 464px 1327px var(--color), 1041px 1795px var(--color), 1341px 699px var(--color), 1155px 1249px var(--color), 1801px 1098px var(--color), 1224px 922px var(--color), 1548px 85px var(--color), 1446px 1746px var(--color), 898px 625px var(--color), 1374px 742px var(--color), 1587px 1468px var(--color), 1720px 1268px var(--color), 776px 667px var(--color), 867px 128px var(--color), 841px 1808px var(--color), 1825px 1805px var(--color), 411px 1851px var(--color), 455px 1033px var(--color), 1103px 612px var(--color), 1066px 1433px var(--color), 1068px 835px var(--color), 1497px 1510px var(--color), 1517px 1457px var(--color), 793px 363px var(--color), 983px 613px var(--color), 655px 1820px var(--color), 1244px 1592px var(--color), 625px 264px var(--color), 744px 248px var(--color), 423px 1810px var(--color), 36px 428px var(--color), 797px 489px var(--color), 152px 1855px var(--color);
-  opacity: .75;
-}
-
-.stars div:nth-child(3) {
-  animation-duration: 200s !important;
-  box-shadow: 1101px 12446px var(--color), 1029px 11px var(--color), 1085px 961px var(--color), 1767px 1121px var(--color), 78px 1112px var(--color), 1969px 440px var(--color), 743px 1548px var(--color), 1005px 1473px var(--color), 1843px 1450px var(--color), 1062px 547px var(--color), 1105px 1501px var(--color), 316px 1466px var(--color), 831px 1071px var(--color), 879px 1157px var(--color), 1400px 1368px var(--color), 1491px 1832px var(--color), 833px 1040px var(--color), 1788px 1114px var(--color), 312px 406px var(--color), 447px 1127px var(--color), 312px 1249px var(--color), 577px 1906px var(--color), 1673px 1170px var(--color), 926px 1822px var(--color), 1378px 770px var(--color), 55px 1592px var(--color), 1377px 419px var(--color), 577px 933px var(--color), 668px 576px var(--color), 1347px 1630px var(--color), 1994px 1661px var(--color), 856px 1426px var(--color), 262px 1304px var(--color), 736px 895px var(--color), 419px 329px var(--color), 1248px 187px var(--color), 1584px 1841px var(--color), 789px 603px var(--color), 1831px 1181px var(--color), 1972px 11px var(--color), 567px 1408px var(--color), 203px 1943px var(--color), 502px 961px var(--color), 1992px 284px var(--color), 153px 1236px var(--color), 1395px 491px var(--color), 133px 153px var(--color), 699px 61px var(--color), 511px 1467px var(--color), 1069px 909px var(--color), 1534px 1962px var(--color), 561px 866px var(--color), 1392px 1318px var(--color), 1524px 369px var(--color), 195px 1687px var(--color), 707px 1428px var(--color), 1528px 208px var(--color), 1658px 669px var(--color), 1579px 161px var(--color), 757px 766px var(--color), 72px 4px var(--color), 372px 1622px var(--color), 515px 1062px var(--color), 581px 89px var(--color), 818px 860px var(--color), 1949px 779px var(--color), 1085px 1014px var(--color), 1677px 551px var(--color), 502px 371px var(--color), 1034px 1401px var(--color), 1745px 1621px var(--color), 857px 1349px var(--color), 946px 1184px var(--color), 376px 1131px var(--color), 781px 1298px var(--color), 481px 1846px var(--color), 1052px 370px var(--color), 1499px 872px var(--color), 1606px 905px var(--color), 363px 1429px var(--color), 319px 177px var(--color), 1119px 1019px var(--color), 1056px 1981px var(--color), 64px 1192px var(--color), 572px 1714px var(--color), 569px 1206px var(--color), 795px 29px var(--color), 1125px 1133px var(--color), 1495px 862px var(--color), 1298px 587px var(--color), 1938px 1234px var(--color), 1009px 1328px var(--color), 1882px 684px var(--color), 682px 1022px var(--color), 844px 936px var(--color), 1246px 1933px var(--color), 1044px 1128px var(--color), 1973px 395px var(--color), 482px 1715px var(--color), 695px 528px var(--color), 1806px 1908px var(--color), 1578px 998px var(--color), 143px 1347px var(--color), 998px 1688px var(--color), 890px 1063px var(--color), 1355px 1564px var(--color), 1349px 350px var(--color), 1225px 1779px var(--color), 1841px 1934px var(--color), 314px 1913px var(--color), 143px 1167px var(--color), 1974px 25px var(--color), 615px 1143px var(--color), 416px 1967px var(--color), 1504px 1977px var(--color), 1017px 1660px var(--color), 580px 1086px var(--color), 1974px 1626px var(--color), 1014px 1610px var(--color), 266px 1343px var(--color), 963px 1117px var(--color), 82px 1048px var(--color), 1963px 1702px var(--color), 1294px 1845px var(--color), 1758px 1448px var(--color), 1829px 1691px var(--color), 1299px 279px var(--color), 446px 1018px var(--color), 1228px 1952px var(--color), 1369px 1924px var(--color), 1416px 532px var(--color), 263px 1688px var(--color), 1437px 792px var(--color), 469px 692px var(--color), 1904px 34px var(--color), 1618px 1580px var(--color), 663px 1204px var(--color), 816px 1628px var(--color), 340px 529px var(--color), 1404px 287px var(--color), 1149px 1846px var(--color), 1883px 1682px var(--color), 1637px 1057px var(--color), 570px 951px var(--color), 1623px 205px var(--color), 988px 439px var(--color), 519px 316px var(--color), 1510px 1127px var(--color), 120px 115px var(--color), 145px 853px var(--color), 772px 1379px var(--color), 852px 155px var(--color), 1741px 817px var(--color), 593px 1083px var(--color), 456px 260px var(--color), 527px 393px var(--color), 1763px 1510px var(--color), 1643px 1437px var(--color), 997px 1537px var(--color), 1320px 1844px var(--color), 611px 892px var(--color), 1242px 879px var(--color), 1556px 1491px var(--color), 882px 264px var(--color), 1632px 1402px var(--color), 206px 378px var(--color), 745px 1042px var(--color), 1734px 26px var(--color), 996px 352px var(--color), 181px 634px var(--color), 1609px 1890px var(--color), 1995px 1687px var(--color), 381px 547px var(--color), 1779px 225px var(--color), 1790px 1496px var(--color), 1368px 1212px var(--color), 140px 1516px var(--color), 992px 1470px var(--color), 748px 98px var(--color), 1682px 1653px var(--color), 21px 823px var(--color), 539px 789px var(--color), 1158px 1232px var(--color), 437px 1554px var(--color), 1224px 1078px var(--color), 262px 254px var(--color), 1618px 349px var(--color), 945px 1054px var(--color), 780px 131px var(--color), 605px 157px var(--color), 1586px 617px var(--color), 1120px 1794px var(--color), 1533px 751px var(--color), 1391px 1941px var(--color), 1920px 1852px var(--color), 1860px 1543px var(--color), 1621px 695px var(--color), 42px 1618px var(--color), 362px 428px var(--color), 1354px 688px var(--color), 1347px 228px var(--color), 1956px 1145px var(--color), 1160px 1979px var(--color), 124px 597px var(--color), 1491px 1234px var(--color), 1552px 876px var(--color), 1066px 1057px var(--color), 1420px 316px var(--color), 179px 590px var(--color), 435px 142px var(--color), 772px 861px var(--color), 878px 53px var(--color), 1172px 1627px var(--color), 1847px 580px var(--color), 1574px 1056px var(--color), 281px 1326px var(--color), 443px 1159px var(--color), 1768px 1225px var(--color), 1883px 1368px var(--color), 1957px 1304px var(--color), 1666px 1523px var(--color), 1607px 593px var(--color), 413px 549px var(--color), 878px 1579px var(--color), 1041px 766px var(--color), 638px 1178px var(--color), 1985px 534px var(--color), 537px 142px var(--color), 1376px 1133px var(--color), 990px 430px var(--color), 1062px 839px var(--color), 1658px 1871px var(--color), 20px 29px var(--color), 336px 219px var(--color), 1793px 323px var(--color), 1538px 176px var(--color), 558px 1227px var(--color), 1826px 1132px var(--color), 572px 1461px var(--color), 1900px 1647px var(--color), 1126px 1972px var(--color), 703px 358px var(--color), 1444px 1988px var(--color), 980px 721px var(--color), 240px 674px var(--color), 1731px 1607px var(--color), 49px 293px var(--color), 1392px 1831px var(--color), 101px 1661px var(--color), 1834px 1163px var(--color), 1709px 1336px var(--color), 88px 1546px var(--color), 1688px 1721px var(--color), 624px 1058px var(--color), 1347px 352px var(--color), 1262px 677px var(--color), 948px 1820px var(--color), 1222px 224px var(--color), 365px 633px var(--color), 747px 1162px var(--color), 527px 1874px var(--color), 1146px 1467px var(--color), 949px 1127px var(--color), 92px 1714px var(--color), 546px 657px var(--color), 172px 1489px var(--color), 587px 970px var(--color), 359px 1225px var(--color), 641px 1px var(--color), 1577px 926px var(--color), 608px 111px var(--color), 46px 1967px var(--color), 1339px 1895px var(--color), 723px 1320px var(--color), 329px 1730px var(--color), 1485px 247px var(--color), 824px 944px var(--color), 1441px 1462px var(--color), 1790px 193px var(--color), 909px 219px var(--color), 1161px 1469px var(--color), 1037px 501px var(--color), 1397px 999px var(--color), 1863px 1019px var(--color), 1956px 406px var(--color), 1424px 1301px var(--color), 1036px 676px var(--color), 1080px 1177px var(--color), 3px 696px var(--color), 488px 311px var(--color), 1907px 334px var(--color), 174px 1634px var(--color), 1975px 1271px var(--color), 947px 64px var(--color), 669px 767px var(--color), 721px 1159px var(--color), 1119px 902px var(--color), 1498px 2px var(--color), 372px 434px var(--color), 1658px 1144px var(--color), 178px 1549px var(--color), 1207px 1874px var(--color), 254px 393px var(--color), 1965px 1954px var(--color), 1688px 1283px var(--color), 359px 1700px var(--color), 1518px 394px var(--color), 77px 1612px var(--color), 216px 387px var(--color), 1435px 1841px var(--color), 1110px 1563px var(--color), 1828px 1710px var(--color), 527px 973px var(--color), 1471px 674px var(--color), 486px 851px var(--color), 926px 1590px var(--color), 1566px 1940px var(--color), 1638px 76px var(--color), 1369px 1201px var(--color), 1852px 1309px var(--color), 675px 1153px var(--color), 75px 1758px var(--color), 583px 1871px var(--color), 170px 655px var(--color), 710px 12px var(--color), 908px 1634px var(--color), 63px 1219px var(--color), 974px 1654px var(--color), 855px 1576px var(--color), 655px 1377px var(--color), 980px 1494px var(--color), 45px 100px var(--color), 1347px 969px var(--color), 212px 1349px var(--color), 676px 1443px var(--color), 1727px 738px var(--color), 1724px 513px var(--color), 295px 1126px var(--color), 582px 722px var(--color), 222px 291px var(--color), 1264px 731px var(--color), 1895px 1348px var(--color), 1234px 76px var(--color), 47px 1101px var(--color), 774px 1279px var(--color), 1251px 1960px var(--color), 1113px 1422px var(--color), 1025px 1581px var(--color), 1195px 953px var(--color), 1402px 1616px var(--color), 537px 92px var(--color), 832px 887px var(--color), 95px 1596px var(--color), 351px 270px var(--color), 1231px 1562px var(--color), 830px 364px var(--color), 664px 128px var(--color), 1792px 879px var(--color), 1847px 287px var(--color), 1140px 615px var(--color), 122px 69px var(--color), 1881px 1138px var(--color), 1221px 1144px var(--color), 338px 1372px var(--color), 1222px 1110px var(--color), 1245px 1334px var(--color), 775px 824px var(--color), 1829px 1036px var(--color), 966px 1438px var(--color), 1256px 1511px var(--color), 1313px 1398px var(--color), 1641px 1165px var(--color), 1112px 355px var(--color), 69px 1672px var(--color), 1251px 453px var(--color), 733px 244px var(--color), 665px 527px var(--color), 829px 975px var(--color), 332px 1765px var(--color), 1332px 1562px var(--color), 1445px 803px var(--color), 899px 1365px var(--color), 1791px 1417px var(--color), 1766px 1682px var(--color), 1995px 234px var(--color), 407px 660px var(--color), 97px 88px var(--color), 158px 1614px var(--color), 1474px 321px var(--color), 776px 889px var(--color), 199px 83px var(--color), 1999px 1201px var(--color), 1591px 1090px var(--color), 640px 404px var(--color), 92px 1325px var(--color), 1802px 1062px var(--color), 389px 1731px var(--color), 64px 1986px var(--color), 334px 25px var(--color), 682px 1235px var(--color), 19px 1285px var(--color), 761px 259px var(--color), 1129px 494px var(--color), 1272px 677px var(--color), 285px 1943px var(--color), 938px 1838px var(--color), 1942px 66px var(--color), 1921px 595px var(--color), 1767px 843px var(--color), 1018px 1857px var(--color), 1487px 904px var(--color), 1541px 338px var(--color), 842px 593px var(--color), 1643px 1017px var(--color), 463px 329px var(--color), 1903px 1984px var(--color), 105px 663px var(--color), 975px 116px var(--color), 274px 955px var(--color), 1421px 1158px var(--color), 784px 596px var(--color), 218px 796px var(--color), 763px 1015px var(--color), 494px 36px var(--color), 99px 1630px var(--color), 91px 21px var(--color), 929px 1894px var(--color), 670px 1560px var(--color), 1096px 1824px var(--color), 313px 1784px var(--color), 1512px 251px var(--color), 1020px 1738px var(--color), 714px 671px var(--color), 278px 1287px var(--color), 1251px 886px var(--color), 1852px 545px var(--color), 209px 1270px var(--color), 128px 1874px var(--color), 853px 1429px var(--color), 150px 1984px var(--color), 991px 709px var(--color), 417px 1871px var(--color), 1439px 1133px var(--color), 702px 1448px var(--color), 827px 1661px var(--color), 630px 103px var(--color), 589px 894px var(--color), 1178px 297px var(--color), 1202px 1982px var(--color), 1728px 679px var(--color), 1936px 1470px var(--color), 1161px 1711px var(--color), 1661px 1092px var(--color), 46px 1100px var(--color), 187px 388px var(--color), 636px 1445px var(--color), 171px 1213px var(--color), 1646px 1200px var(--color), 1182px 157px var(--color), 1217px 1015px var(--color), 1936px 807px var(--color), 1743px 890px var(--color), 1825px 27px var(--color), 545px 21px var(--color), 1895px 993px var(--color), 1631px 1180px var(--color), 1634px 411px var(--color), 1998px 886px var(--color), 1479px 906px var(--color), 528px 970px var(--color), 861px 1238px var(--color), 881px 361px var(--color), 960px 916px var(--color), 280px 950px var(--color), 1310px 986px var(--color), 768px 1796px var(--color), 1187px 980px var(--color), 612px 1279px var(--color), 377px 1876px var(--color), 1170px 736px var(--color), 1331px 733px var(--color), 450px 233px var(--color), 1875px 1317px var(--color), 1868px 1315px var(--color), 1874px 1018px var(--color), 1062px 1949px var(--color), 1266px 797px var(--color), 1087px 443px var(--color), 1984px 369px var(--color), 1209px 1726px var(--color), 1626px 501px var(--color), 1991px 986px var(--color), 1467px 356px var(--color), 1163px 964px var(--color), 1671px 1944px var(--color), 374px 1634px var(--color), 1556px 820px var(--color), 1800px 1600px var(--color), 1314px 1935px var(--color), 1174px 1293px var(--color);
-  opacity: .5;
-}
-
-@keyframes risingStarsAnination {
-  0% {
-    transform: translateZ(0) translateY(0)
-  }
-
-  to {
-    transform: translateZ(0) translateY(-2000px)
-  }
-}
-</style>
diff --git a/docs/app/types/index.d.ts b/docs/app/types/index.d.ts
deleted file mode 100644
index 88ad0903..00000000
--- a/docs/app/types/index.d.ts
+++ /dev/null
@@ -1,12 +0,0 @@
-export interface HomeProBlock {
-  id?: string
-  to?: string
-  name?: string
-  description?: string
-  slot?: string
-  class: string
-  style?: any
-  inactive?: boolean
-  transparent?: boolean
-  children?: ProBlock[]
-}
diff --git a/docs/nuxt.config.ts b/docs/nuxt.config.ts
index 2f6ee345..5d4e029a 100644
--- a/docs/nuxt.config.ts
+++ b/docs/nuxt.config.ts
@@ -12,19 +12,19 @@ export default defineNuxtConfig({
       }
     }
   },
-  extends: [
-    process.env.NUXT_UI_PRO_PATH ? resolve(process.env.NUXT_UI_PRO_PATH, 'docs') : process.env.NUXT_GITHUB_TOKEN && ['github:nuxt/ui-pro/docs#dev', { giget: { auth: process.env.NUXT_GITHUB_TOKEN } }]
-  ],
+  // extends: [
+  //   process.env.NUXT_UI_PRO_PATH ? resolve(process.env.NUXT_UI_PRO_PATH, 'docs') : process.env.NUXT_GITHUB_TOKEN && ['github:nuxt/ui-pro/docs#dev', { giget: { auth: process.env.NUXT_GITHUB_TOKEN } }]
+  // ],
   modules: [
+    module,
+    '@nuxt/ui-pro',
     '@nuxt/content',
     '@nuxt/fonts',
     '@nuxt/image',
-    module,
-    '@nuxt/ui-pro',
-    '@nuxtjs/plausible',
+    // '@nuxtjs/plausible',
     '@vueuse/nuxt',
-    'nuxt-og-image',
     // 'modules/content-examples-code'
+    'nuxt-og-image'
   ],
   future: {
     compatibilityVersion: 4
@@ -39,18 +39,22 @@ export default defineNuxtConfig({
   // },
   content: {
     sources: {
-      pro: process.env.NUXT_UI_PRO_PATH ? {
-        prefix: '/pro',
-        driver: 'fs',
-        base: resolve(process.env.NUXT_UI_PRO_PATH, 'docs/content/pro')
-      } : process.env.NUXT_GITHUB_TOKEN ? {
-        prefix: '/pro',
-        driver: 'github',
-        repo: 'nuxt/ui-pro',
-        branch: 'dev',
-        dir: 'docs/content/pro',
-        token: process.env.NUXT_GITHUB_TOKEN || ''
-      } : undefined
+      pro: process.env.NUXT_UI_PRO_PATH
+        ? {
+            prefix: '/pro',
+            driver: 'fs',
+            base: resolve(process.env.NUXT_UI_PRO_PATH, 'docs/app/content/pro')
+          }
+        : process.env.NUXT_GITHUB_TOKEN
+          ? {
+              prefix: '/pro',
+              driver: 'github',
+              repo: 'nuxt/ui-pro',
+              branch: 'dev',
+              dir: 'docs/app/content/pro',
+              token: process.env.NUXT_GITHUB_TOKEN || ''
+            }
+          : undefined
     }
   },
   image: {
@@ -69,6 +73,7 @@ export default defineNuxtConfig({
     }
   },
   routeRules: {
+    '/': { redirect: '/getting-started', prerender: false },
     '/components': { redirect: '/components/app', prerender: false },
     '/dev/components': { redirect: '/dev/components/app', prerender: false }
   },
@@ -104,9 +109,12 @@ export default defineNuxtConfig({
     //   })
     // }
   },
-  vite: {
-    optimizeDeps: {
-      include: ['date-fns']
-    }
+  // vite: {
+  //   optimizeDeps: {
+  //     include: ['date-fns']
+  //   }
+  // },
+  typescript: {
+    strict: false
   }
 })
diff --git a/docs/package.json b/docs/package.json
index cbb2ad8d..765962fc 100644
--- a/docs/package.json
+++ b/docs/package.json
@@ -4,7 +4,7 @@
   "type": "module",
   "dependencies": {
     "@iconify-json/heroicons": "^1.1.21",
-    "@iconify-json/simple-icons": "^1.1.105",
+    "@iconify-json/simple-icons": "^1.1.106",
     "@iconify-json/vscode-icons": "^1.1.35",
     "@nuxt/content": "npm:@nuxt/content-edge@2.12.1-28635002.f66778a",
     "@nuxt/fonts": "^0.7.0",
@@ -13,16 +13,13 @@
     "@nuxt/ui-pro": "file:../../ui-pro2",
     "@nuxtjs/plausible": "^1.0.0",
     "@octokit/rest": "^20.1.1",
-    "@vueuse/nuxt": "^10.10.0",
-    "date-fns": "^3.6.0",
+    "@vueuse/nuxt": "^10.11.0",
     "joi": "^17.13.1",
-    "nuxt": "^3.12.1",
+    "nuxt": "^3.12.2",
     "nuxt-component-meta": "^0.6.4",
-    "nuxt-og-image": "^2.2.4",
+    "nuxt-og-image": "^3.0.0-rc.53",
     "prettier": "^3.3.2",
-    "typescript": "^5.4.5",
     "ufo": "^1.5.3",
-    "v-calendar": "^3.1.2",
     "valibot": "^0.30.0",
     "yup": "^1.4.0",
     "zod": "^3.23.8"
diff --git a/eslint.config.mjs b/eslint.config.mjs
index 429328da..94bc43cb 100644
--- a/eslint.config.mjs
+++ b/eslint.config.mjs
@@ -14,8 +14,4 @@ export default createConfigForNuxt({
   'vue/multi-word-component-names': 'off',
   'vue/max-attributes-per-line': ['error', { singleline: 5 }],
   '@typescript-eslint/no-explicit-any': 'off'
-}).append({
-  ignores: [
-    'docs/**'
-  ]
 })
diff --git a/package.json b/package.json
index 6b336413..d434d366 100644
--- a/package.json
+++ b/package.json
@@ -39,7 +39,7 @@
     "docs:prepare": "nuxt-component-meta docs",
     "lint": "eslint .",
     "lint:fix": "eslint . --fix",
-    "typecheck": "vue-tsc --noEmit && nuxi typecheck playground",
+    "typecheck": "vue-tsc --noEmit && nuxi typecheck playground && nuxi typecheck docs",
     "test": "vitest",
     "release": "release-it"
   },