diff --git a/docs/components/content/ColorModeButton.vue b/docs/components/content/ColorModeButton.vue
deleted file mode 100644
index eade92cf..00000000
--- a/docs/components/content/ColorModeButton.vue
+++ /dev/null
@@ -1,28 +0,0 @@
-<template>
-  <ClientOnly>
-    <UButton
-      :icon="isDark ? 'i-heroicons-moon-20-solid' : 'i-heroicons-sun-20-solid'"
-      color="gray"
-      variant="ghost"
-      aria-label="Theme"
-      @click="isDark = !isDark"
-    />
-
-    <template #fallback>
-      <div class="w-8 h-8" />
-    </template>
-  </ClientOnly>
-</template>
-
-<script setup lang="ts">
-const colorMode = useColorMode()
-
-const isDark = computed({
-  get () {
-    return colorMode.value === 'dark'
-  },
-  set () {
-    colorMode.preference = colorMode.value === 'dark' ? 'light' : 'dark'
-  }
-})
-</script>
diff --git a/docs/components/content/ComponentCard.vue b/docs/components/content/ComponentCard.vue
deleted file mode 100644
index 8ad0236a..00000000
--- a/docs/components/content/ComponentCard.vue
+++ /dev/null
@@ -1,294 +0,0 @@
-<template>
-  <div>
-    <div v-if="propsToSelect.length" class="relative flex border border-gray-200 dark:border-gray-700 rounded-t-md overflow-hidden not-prose">
-      <div v-for="prop in propsToSelect" :key="prop.name" class="flex flex-col gap-0.5 justify-between py-1.5 font-medium bg-gray-50 dark:bg-gray-800 border-r border-r-gray-200 dark:border-r-gray-700">
-        <label :for="`prop-${prop.name}`" class="block text-xs px-2.5 font-medium text-gray-400 dark:text-gray-500 -my-px">{{ prop.label }}</label>
-        <UCheckbox
-          v-if="prop.type.startsWith('boolean')"
-          v-model="componentProps[prop.name]"
-          :name="`prop-${prop.name}`"
-          tabindex="-1"
-          class="justify-center"
-        />
-        <USelectMenu
-          v-else-if="prop.options.length && prop.name !== 'label'"
-          v-model="componentProps[prop.name]"
-          :options="prop.options"
-          :name="`prop-${prop.name}`"
-          variant="none"
-          class="inline-flex"
-          :ui-menu="{ width: 'w-32 !-mt-px', rounded: 'rounded-t-none' }"
-          select-class="py-0"
-          tabindex="-1"
-          :popper="{ strategy: 'fixed', placement: 'bottom-start' }"
-        />
-        <UInput
-          v-else
-          :model-value="componentProps[prop.name]"
-          :type="prop.type === 'number' ? 'number' : 'text'"
-          :name="`prop-${prop.name}`"
-          variant="none"
-          autocomplete="off"
-          input-class="py-0"
-          tabindex="-1"
-          @update:model-value="val => componentProps[prop.name] = prop.type === 'number' ? Number(val) : val"
-        />
-      </div>
-    </div>
-
-    <div class="flex border border-b-0 border-gray-200 dark:border-gray-700 relative not-prose" :class="[{ 'p-4': padding }, propsToSelect.length ? 'border-t-0' : 'rounded-t-md', backgroundClass, extraClass]">
-      <component :is="name" v-model="vModel" v-bind="fullProps" :class="componentClass">
-        <ContentSlot v-if="$slots.default" :use="$slots.default" />
-
-        <template v-for="slot in Object.keys(slots || {})" :key="slot" #[slot]>
-          <ContentSlot :name="slot" unwrap="p" />
-        </template>
-      </component>
-    </div>
-
-    <ContentRenderer v-if="!previewOnly" :value="ast" class="[&>div>pre]:!rounded-t-none [&>div>pre]:!mt-0" />
-  </div>
-</template>
-
-<script setup lang="ts">
-import { transformContent } from '@nuxt/content/transformers'
-import { upperFirst, camelCase, kebabCase } from 'scule'
-import { useShikiHighlighter } from '~/composables/useShikiHighlighter'
-
-// eslint-disable-next-line vue/no-dupe-keys
-const props = defineProps({
-  slug: {
-    type: String,
-    default: null
-  },
-  padding: {
-    type: Boolean,
-    default: true
-  },
-  props: {
-    type: Object,
-    default: () => ({})
-  },
-  code: {
-    type: String,
-    default: null
-  },
-  slots: {
-    type: Object,
-    default: null
-  },
-  baseProps: {
-    type: Object,
-    default: () => ({})
-  },
-  ui: {
-    type: Object,
-    default: () => ({})
-  },
-  excludedProps: {
-    type: Array,
-    default: () => []
-  },
-  options: {
-    type: Array as PropType<{ name: string; values: string[]; restriction: 'expected' | 'included' | 'excluded' | 'only' }[]>,
-    default: () => []
-  },
-  backgroundClass: {
-    type: String,
-    default: 'bg-white dark:bg-gray-900'
-  },
-  extraClass: {
-    type: String,
-    default: ''
-  },
-  previewOnly: {
-    type: Boolean,
-    default: false
-  },
-  componentClass: {
-    type: String,
-    default: ''
-  },
-  ignoreVModel: {
-    type: Boolean,
-    default: false
-  }
-})
-
-// eslint-disable-next-line vue/no-dupe-keys
-const baseProps = reactive({ ...props.baseProps })
-const componentProps = reactive({ ...props.props })
-
-const { $prettier } = useNuxtApp()
-const appConfig = useAppConfig()
-const route = useRoute()
-const highlighter = useShikiHighlighter()
-
-let name = props.slug || `U${upperFirst(camelCase(route.params.slug[route.params.slug.length - 1]))}`
-
-// TODO: Remove once merged on `main` branch
-if (['AvatarGroup', 'ButtonGroup', 'MeterGroup'].includes(name)) {
-  name = `U${name}`
-}
-if (['avatar-group', 'button-group', 'radio'].includes(name)) {
-  name = `U${upperFirst(camelCase(name))}`
-}
-
-const meta = await fetchComponentMeta(name)
-
-// Computed
-
-const fullProps = computed(() => ({ ...componentProps, ...baseProps }))
-const vModel = computed({
-  get: () => baseProps.modelValue,
-  set: (value) => {
-    baseProps.modelValue = value
-  }
-})
-
-const generateOptions = (key: string, schema: { kind: string, schema: [], type: string }) => {
-  let options = []
-  const optionItem = props?.options?.find(item => item?.name === key) || null
-  const types = schema?.type?.split('|')?.map(item => item.trim()?.replaceAll('"', '')) || []
-  const hasIgnoredTypes = types?.every(item => ['string', 'number', 'boolean', 'array', 'object', 'Function'].includes(item))
-
-  if (key.toLowerCase().endsWith('color')) {
-    options = [...appConfig.ui.colors]
-  }
-
-  if (key.toLowerCase() === 'size' && schema?.schema?.length > 0) {
-    const baseSizeOrder = { 'xs': 1, 'sm': 2, 'md': 3, 'lg': 4, 'xl': 5 }
-    schema.schema.sort((a: string, b: string) => {
-      const aBase = a.match(/[a-zA-Z]+/)[0].toLowerCase()
-      const bBase = b.match(/[a-zA-Z]+/)[0].toLowerCase()
-
-      const aNum = parseInt(a.match(/\d+/)?.[0]) || 1
-      const bNum = parseInt(b.match(/\d+/)?.[0]) || 1
-
-      if (aBase === bBase) {
-        return aBase === 'xs' ? bNum - aNum : aNum - bNum
-      }
-
-      return baseSizeOrder[aBase] - baseSizeOrder[bBase]
-    })
-  }
-
-  if (schema?.schema?.length > 0 && schema?.kind === 'enum' && !hasIgnoredTypes && optionItem?.restriction !== 'only') {
-    options = schema.schema.filter(option => typeof option === 'string').map((option: string) => option.replaceAll('"', ''))
-  }
-
-  if (optionItem?.restriction === 'only') {
-    options = optionItem.values
-  }
-
-  if (optionItem?.restriction === 'expected') {
-    options = options.filter(item => optionItem.values.includes(item))
-  }
-
-  if (optionItem?.restriction === 'included') {
-    options = [...options, ...optionItem.values]
-  }
-
-  if (optionItem?.restriction === 'excluded') {
-    options = options.filter(item => !optionItem.values.includes(item))
-  }
-
-  return options
-}
-
-const propsToSelect = computed(() => Object.keys(componentProps).map((key) => {
-  if (props.excludedProps.includes(key)) {
-    return null
-  }
-
-  const prop = meta?.meta?.props?.find((prop: any) => prop.name === key)
-  const schema = prop?.schema || {}
-  const options = generateOptions(key, schema)
-
-  return {
-    type: prop?.type || 'string',
-    name: key,
-    label: key === 'modelValue' ? 'value' : camelCase(key),
-    options
-  }
-}).filter(Boolean))
-
-// eslint-disable-next-line vue/no-dupe-keys
-const code = computed(() => {
-  let code = `\`\`\`html
-<template>
-<${name}`
-  for (const [key, value] of Object.entries(fullProps.value)) {
-    if (value === 'undefined' || value === null) {
-      continue
-    }
-    if (key === 'modelValue' && props.ignoreVModel) {
-      continue
-    }
-
-    code += ` ${(typeof value === 'boolean' && (value !== true || key === 'modelValue')) || typeof value === 'object' || typeof value === 'number' ? ':' : ''}${key === 'modelValue' ? 'model-value' : kebabCase(key)}${typeof value === 'boolean' && !!value && key !== 'modelValue' ? '' : `="${typeof value === 'object' ? renderObject(value) : value}"`}`
-  }
-
-  if (props.slots) {
-    code += `>
-  ${Object.entries(props.slots).map(([key, value]) => `<template #${key}>
-    ${value}
-  </template>`).join('\n  ')}
-</${name}>`
-  } else if (props.code) {
-    const lineBreaks = (props.code.match(/\n/g) || []).length
-    if (lineBreaks > 1) {
-      code += `>
-  ${props.code}</${name}>`
-    } else {
-      code += `>${props.code.endsWith('>') ? `${props.code}\n` : props.code}</${name}>`
-    }
-  } else {
-    code += ' />'
-  }
-  code += `\n</template>
-\`\`\`
-`
-  return code
-})
-
-function renderObject (obj: any) {
-  if (Array.isArray(obj)) {
-    return `[${obj.map(renderObject).join(', ')}]`
-  }
-
-  if (typeof obj === 'object') {
-    return `{ ${Object.entries(obj).map(([key, value]) => `${key}: ${renderObject(value)}`).join(', ')} }`
-  }
-
-  if (typeof obj === 'string') {
-    return `'${obj}'`
-  }
-
-  return obj
-}
-
-const { data: ast } = await useAsyncData(
-  `${name}-ast-${JSON.stringify({ props: componentProps, slots: props.slots, code: props.code })}`,
-  async () => {
-    let formatted = ''
-    try {
-      formatted = await $prettier.format(code.value) || code.value
-    } catch (error) {
-      formatted = code.value
-    }
-
-    return transformContent('content:_markdown.md', formatted, {
-      markdown: {
-        highlight: {
-          highlighter,
-          theme: {
-            light: 'material-theme-lighter',
-            default: 'material-theme',
-            dark: 'material-theme-palenight'
-          }
-        }
-      }
-    })
-  }, { watch: [code] })
-</script>
diff --git a/docs/components/content/ComponentExample.vue b/docs/components/content/ComponentExample.vue
deleted file mode 100644
index f276889a..00000000
--- a/docs/components/content/ComponentExample.vue
+++ /dev/null
@@ -1,95 +0,0 @@
-<template>
-  <div class="[&>div>pre]:!rounded-t-none [&>div>pre]:!mt-0">
-    <div
-      class="flex border border-gray-200 dark:border-gray-700 relative rounded-t-md"
-      :class="[{ 'p-4': padding, 'rounded-b-md': !hasCode, 'border-b-0': hasCode, 'not-prose': !prose }, backgroundClass, extraClass]"
-    >
-      <template v-if="component">
-        <iframe v-if="iframe" :src="`/examples/${component}`" v-bind="iframeProps" :class="backgroundClass" class="w-full" />
-        <component :is="camelName" v-else v-bind="componentProps" :class="componentClass" />
-      </template>
-
-      <ContentSlot v-if="$slots.default" :use="$slots.default" />
-    </div>
-    <template v-if="hasCode">
-      <slot v-if="$slots.code" name="code" />
-      <ContentRenderer v-else :value="ast" class="[&>div>pre]:!rounded-t-none [&>div>pre]:!mt-0" />
-    </template>
-  </div>
-</template>
-
-<script setup lang="ts">
-import { camelCase } from 'scule'
-import { fetchContentExampleCode } from '~/composables/useContentExamplesCode'
-import { transformContent } from '@nuxt/content/transformers'
-import { useShikiHighlighter } from '~/composables/useShikiHighlighter'
-
-const props = defineProps({
-  component: {
-    type: String,
-    default: null
-  },
-  componentClass: {
-    type: String,
-    default: ''
-  },
-  componentProps: {
-    type: Object,
-    default: () => ({})
-  },
-  hiddenCode: {
-    type: Boolean,
-    default: false
-  },
-  padding: {
-    type: Boolean,
-    default: true
-  },
-  prose: {
-    type: Boolean,
-    default: false
-  },
-  iframe: {
-    type: Boolean,
-    default: false
-  },
-  iframeProps: {
-    type: Object,
-    default: () => ({})
-  },
-  backgroundClass: {
-    type: String,
-    default: 'bg-white dark:bg-gray-900'
-  },
-  extraClass: {
-    type: String,
-    default: ''
-  }
-})
-
-let component = props.component
-// TODO: Remove once merged on `main` branch
-if (['command-palette-theme-algolia', 'command-palette-theme-raycast', 'vertical-navigation-theme-tailwind', 'pagination-theme-rounded'].includes(component)) {
-  component = component.replace('-theme', '-example-theme')
-}
-
-const instance = getCurrentInstance()
-const camelName = camelCase(component)
-const data = await fetchContentExampleCode(camelName)
-const highlighter = useShikiHighlighter()
-
-const hasCode = computed(() => !props.hiddenCode && (data?.code || instance.slots.code))
-
-const { data: ast } = await useAsyncData(`content-example-${camelName}-ast`, () => transformContent('content:_markdown.md', `\`\`\`vue\n${data?.code ?? ''}\n\`\`\``, {
-  markdown: {
-    highlight: {
-      highlighter,
-      theme: {
-        light: 'material-theme-lighter',
-        default: 'material-theme',
-        dark: 'material-theme-palenight'
-      }
-    }
-  }
-}))
-</script>
diff --git a/docs/components/content/ComponentPreset.vue b/docs/components/content/ComponentPreset.vue
deleted file mode 100644
index 9a4038ee..00000000
--- a/docs/components/content/ComponentPreset.vue
+++ /dev/null
@@ -1,44 +0,0 @@
-<template>
-  <ContentRenderer :value="ast" />
-</template>
-
-<script setup lang="ts">
-import { transformContent } from '@nuxt/content/transformers'
-import { upperFirst, camelCase } from 'scule'
-import json5 from 'json5'
-import { useShikiHighlighter } from '~/composables/useShikiHighlighter'
-import * as config from '#ui/ui.config'
-
-const props = defineProps({
-  slug: {
-    type: String,
-    default: null
-  }
-})
-
-const route = useRoute()
-const highlighter = useShikiHighlighter()
-// eslint-disable-next-line vue/no-dupe-keys
-const slug = props.slug || route.params.slug[route.params.slug.length - 1]
-const camelName = camelCase(slug)
-const name = `U${upperFirst(camelName)}`
-
-const preset = config[camelName]
-
-const { data: ast } = await useAsyncData(`${name}-preset`, () => transformContent('content:_markdown.md', `
-\`\`\`yml
-${json5.stringify(preset, null, 2)}
-\`\`\`\
-`, {
-  markdown: {
-    highlight: {
-      highlighter,
-      theme: {
-        light: 'material-theme-lighter',
-        default: 'material-theme',
-        dark: 'material-theme-palenight'
-      }
-    }
-  }
-}))
-</script>
diff --git a/docs/components/content/ComponentProps.vue b/docs/components/content/ComponentProps.vue
deleted file mode 100644
index c8eca2b7..00000000
--- a/docs/components/content/ComponentProps.vue
+++ /dev/null
@@ -1,32 +0,0 @@
-<template>
-  <div>
-    <FieldGroup>
-      <ComponentPropsField v-for="prop in meta?.meta?.props" :key="prop.name" :prop="prop" />
-    </FieldGroup>
-  </div>
-</template>
-
-<script setup lang="ts">
-import { upperFirst, camelCase } from 'scule'
-
-const props = defineProps({
-  slug: {
-    type: String,
-    default: null
-  }
-})
-
-const route = useRoute()
-
-let name = props.slug || `U${upperFirst(camelCase(route.params.slug[route.params.slug.length - 1]))}`
-
-// TODO: Remove once merged on `main` branch
-if (['AvatarGroup', 'ButtonGroup', 'MeterGroup'].includes(name)) {
-  name = `U${name}`
-}
-if (['avatar-group', 'button-group', 'radio'].includes(name)) {
-  name = `U${upperFirst(camelCase(name))}`
-}
-
-const meta = await fetchComponentMeta(name)
-</script>
diff --git a/docs/components/content/ComponentPropsField.vue b/docs/components/content/ComponentPropsField.vue
deleted file mode 100644
index 81fcb417..00000000
--- a/docs/components/content/ComponentPropsField.vue
+++ /dev/null
@@ -1,46 +0,0 @@
-<template>
-  <Field v-bind="prop">
-    <code v-if="prop.default" class="leading-6">{{ prop.default }}</code>
-    <p v-if="prop.description">
-      {{ prop.description }}
-    </p>
-
-    <Collapsible v-if="prop.schema?.kind === 'array' && prop.schema?.schema?.filter(schema => schema.kind === 'object').length">
-      <FieldGroup v-for="schema in prop.schema.schema" :key="schema.name">
-        <ComponentPropsField v-for="subProp in Object.values(schema.schema)" :key="(subProp as any).name" :prop="subProp" />
-      </FieldGroup>
-    </Collapsible>
-    <Collapsible v-else-if="prop.schema?.kind === 'array' && prop.schema?.schema?.filter(schema => schema.kind === 'array').length">
-      <FieldGroup v-for="schema in prop.schema.schema" :key="schema.name">
-        <template v-for="subSchema in schema.schema" :key="subSchema.name">
-          <ComponentPropsField v-for="subProp in Object.values(subSchema.schema)" :key="(subProp as any).name" :prop="subProp" />
-        </template>
-      </FieldGroup>
-    </Collapsible>
-    <Collapsible v-else-if="prop.schema?.kind === 'object' && prop.schema.type !== 'Function' && Object.values(prop.schema.schema)?.length">
-      <FieldGroup>
-        <ComponentPropsField v-for="subProp in Object.values(prop.schema.schema)" :key="(subProp as any).name" :prop="subProp" />
-      </FieldGroup>
-    </Collapsible>
-    <div v-else-if="prop.schema?.kind === 'enum' && prop.schema.type !== 'boolean' && startsWithCapital(prop.schema.type) && !prop.schema.type.startsWith(prop.schema.schema[0])" class="flex items-center flex-wrap gap-1 -my-1">
-      <code v-for="value in prop.schema.schema.filter(value => typeof value === 'string')" :key="value" class="whitespace-pre-wrap break-words leading-6">{{ value }}</code>
-    </div>
-  </Field>
-</template>
-
-<script setup lang="ts">
-defineProps({
-  prop: {
-    type: Object as PropType<any>,
-    default: () => ({})
-  }
-})
-
-function startsWithCapital (word) {
-  if (word.charAt(0).startsWith('"')) {
-    return false
-  }
-
-  return word.charAt(0) === word.charAt(0).toUpperCase()
-}
-</script>
diff --git a/docs/components/content/ComponentSlots.vue b/docs/components/content/ComponentSlots.vue
deleted file mode 100644
index 36fbd892..00000000
--- a/docs/components/content/ComponentSlots.vue
+++ /dev/null
@@ -1,24 +0,0 @@
-<template>
-  <div>
-    <FieldGroup>
-      <Field v-for="slot in meta?.meta.slots" :key="slot.name" v-bind="slot" />
-    </FieldGroup>
-  </div>
-</template>
-
-<script setup lang="ts">
-import { upperFirst, camelCase } from 'scule'
-
-const props = defineProps({
-  slug: {
-    type: String,
-    default: null
-  }
-})
-
-const route = useRoute()
-
-const name = props.slug || `U${upperFirst(camelCase(route.params.slug[route.params.slug.length - 1]))}`
-
-const meta = await fetchComponentMeta(name)
-</script>
diff --git a/docs/components/content/examples/AccordionExampleBasic.vue b/docs/components/content/examples/AccordionExampleBasic.vue
deleted file mode 100644
index 17d0ca32..00000000
--- a/docs/components/content/examples/AccordionExampleBasic.vue
+++ /dev/null
@@ -1,33 +0,0 @@
-<script setup lang="ts">
-const items = [{
-  label: 'Getting Started',
-  icon: 'i-heroicons-information-circle',
-  defaultOpen: true,
-  content: 'Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed neque elit, tristique placerat feugiat ac, facilisis vitae arcu. Proin eget egestas augue. Praesent ut sem nec arcu pellentesque aliquet. Duis dapibus diam vel metus tempus vulputate.'
-}, {
-  label: 'Installation',
-  icon: 'i-heroicons-arrow-down-tray',
-  disabled: true,
-  content: 'Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed neque elit, tristique placerat feugiat ac, facilisis vitae arcu. Proin eget egestas augue. Praesent ut sem nec arcu pellentesque aliquet. Duis dapibus diam vel metus tempus vulputate.'
-}, {
-  label: 'Theming',
-  icon: 'i-heroicons-eye-dropper',
-  content: 'Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed neque elit, tristique placerat feugiat ac, facilisis vitae arcu. Proin eget egestas augue. Praesent ut sem nec arcu pellentesque aliquet. Duis dapibus diam vel metus tempus vulputate.'
-}, {
-  label: 'Layouts',
-  icon: 'i-heroicons-rectangle-group',
-  content: 'Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed neque elit, tristique placerat feugiat ac, facilisis vitae arcu. Proin eget egestas augue. Praesent ut sem nec arcu pellentesque aliquet. Duis dapibus diam vel metus tempus vulputate.'
-}, {
-  label: 'Components',
-  icon: 'i-heroicons-square-3-stack-3d',
-  content: 'Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed neque elit, tristique placerat feugiat ac, facilisis vitae arcu. Proin eget egestas augue. Praesent ut sem nec arcu pellentesque aliquet. Duis dapibus diam vel metus tempus vulputate.'
-}, {
-  label: 'Utilities',
-  icon: 'i-heroicons-wrench-screwdriver',
-  content: 'Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed neque elit, tristique placerat feugiat ac, facilisis vitae arcu. Proin eget egestas augue. Praesent ut sem nec arcu pellentesque aliquet. Duis dapibus diam vel metus tempus vulputate.'
-}]
-</script>
-
-<template>
-  <UAccordion :items="items" />
-</template>
diff --git a/docs/components/content/examples/AccordionExampleDefaultSlot.vue b/docs/components/content/examples/AccordionExampleDefaultSlot.vue
deleted file mode 100644
index 2b88a6eb..00000000
--- a/docs/components/content/examples/AccordionExampleDefaultSlot.vue
+++ /dev/null
@@ -1,52 +0,0 @@
-<script setup lang="ts">
-const items = [{
-  label: 'Getting Started',
-  icon: 'i-heroicons-information-circle',
-  defaultOpen: true,
-  content: 'Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed neque elit, tristique placerat feugiat ac, facilisis vitae arcu. Proin eget egestas augue. Praesent ut sem nec arcu pellentesque aliquet. Duis dapibus diam vel metus tempus vulputate.'
-}, {
-  label: 'Installation',
-  icon: 'i-heroicons-arrow-down-tray',
-  content: 'Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed neque elit, tristique placerat feugiat ac, facilisis vitae arcu. Proin eget egestas augue. Praesent ut sem nec arcu pellentesque aliquet. Duis dapibus diam vel metus tempus vulputate.'
-}, {
-  label: 'Theming',
-  icon: 'i-heroicons-eye-dropper',
-  content: 'Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed neque elit, tristique placerat feugiat ac, facilisis vitae arcu. Proin eget egestas augue. Praesent ut sem nec arcu pellentesque aliquet. Duis dapibus diam vel metus tempus vulputate.'
-}, {
-  label: 'Layouts',
-  icon: 'i-heroicons-rectangle-group',
-  content: 'Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed neque elit, tristique placerat feugiat ac, facilisis vitae arcu. Proin eget egestas augue. Praesent ut sem nec arcu pellentesque aliquet. Duis dapibus diam vel metus tempus vulputate.'
-}, {
-  label: 'Components',
-  icon: 'i-heroicons-square-3-stack-3d',
-  content: 'Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed neque elit, tristique placerat feugiat ac, facilisis vitae arcu. Proin eget egestas augue. Praesent ut sem nec arcu pellentesque aliquet. Duis dapibus diam vel metus tempus vulputate.'
-}, {
-  label: 'Utilities',
-  icon: 'i-heroicons-wrench-screwdriver',
-  content: 'Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed neque elit, tristique placerat feugiat ac, facilisis vitae arcu. Proin eget egestas augue. Praesent ut sem nec arcu pellentesque aliquet. Duis dapibus diam vel metus tempus vulputate.'
-}]
-</script>
-
-<template>
-  <UAccordion :items="items" :ui="{ wrapper: 'flex flex-col w-full' }">
-    <template #default="{ item, index, open }">
-      <UButton color="gray" variant="ghost" class="border-b border-gray-200 dark:border-gray-700" :ui="{ rounded: 'rounded-none', padding: { sm: 'p-3' } }">
-        <template #leading>
-          <div class="w-6 h-6 rounded-full bg-primary-500 dark:bg-primary-400 flex items-center justify-center -my-1">
-            <UIcon :name="item.icon" class="w-4 h-4 text-white dark:text-gray-900" />
-          </div>
-        </template>
-
-        <span class="truncate">{{ index + 1 }}. {{ item.label }}</span>
-
-        <template #trailing>
-          <UIcon
-            name="i-heroicons-chevron-right-20-solid"
-            class="w-5 h-5 ms-auto transform transition-transform duration-200"
-            :class="[open && 'rotate-90']"
-          />
-        </template>
-      </UButton>
-    </template>
-  </UAccordion>
-</template>
diff --git a/docs/components/content/examples/AccordionExampleItemSlot.vue b/docs/components/content/examples/AccordionExampleItemSlot.vue
deleted file mode 100644
index 4bc0bccd..00000000
--- a/docs/components/content/examples/AccordionExampleItemSlot.vue
+++ /dev/null
@@ -1,70 +0,0 @@
-<script setup lang="ts">
-const items = [{
-  label: 'Getting Started',
-  icon: 'i-heroicons-information-circle',
-  defaultOpen: true,
-  slot: 'getting-started'
-}, {
-  label: 'Installation',
-  icon: 'i-heroicons-arrow-down-tray',
-  defaultOpen: true,
-  slot: 'installation'
-}, {
-  label: 'Theming',
-  icon: 'i-heroicons-eye-dropper',
-  defaultOpen: true,
-  description: 'Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed neque elit, tristique placerat feugiat ac, facilisis vitae arcu. Proin eget egestas augue. Praesent ut sem nec arcu pellentesque aliquet. Duis dapibus diam vel metus tempus vulputate.'
-}, {
-  label: 'Layouts',
-  icon: 'i-heroicons-rectangle-group',
-  description: 'Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed neque elit, tristique placerat feugiat ac, facilisis vitae arcu. Proin eget egestas augue. Praesent ut sem nec arcu pellentesque aliquet. Duis dapibus diam vel metus tempus vulputate.'
-}, {
-  label: 'Components',
-  icon: 'i-heroicons-square-3-stack-3d',
-  description: 'Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed neque elit, tristique placerat feugiat ac, facilisis vitae arcu. Proin eget egestas augue. Praesent ut sem nec arcu pellentesque aliquet. Duis dapibus diam vel metus tempus vulputate.'
-}, {
-  label: 'Utilities',
-  icon: 'i-heroicons-wrench-screwdriver',
-  description: 'Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed neque elit, tristique placerat feugiat ac, facilisis vitae arcu. Proin eget egestas augue. Praesent ut sem nec arcu pellentesque aliquet. Duis dapibus diam vel metus tempus vulputate.'
-}]
-</script>
-
-<template>
-  <UAccordion :items="items">
-    <template #item="{ item }">
-      <p class="italic text-gray-900 dark:text-white text-center">
-        {{ item.description }}
-      </p>
-    </template>
-
-    <template #getting-started>
-      <div class="text-gray-900 dark:text-white text-center">
-        <Logo class="w-auto h-8 mx-auto" />
-
-        <p class="text-sm text-gray-500 dark:text-gray-400 mt-2">
-          Fully styled and customizable components for Nuxt.
-        </p>
-      </div>
-    </template>
-
-    <template #installation="{ description }">
-      <div class="flex flex-col justify-center items-center gap-1 mb-4">
-        <h3 class="text-xl font-bold text-gray-900 dark:text-white">
-          Installation
-        </h3>
-        <p class="text-sm text-gray-500 dark:text-gray-400">
-          Install <code>@nuxt/ui</code> dependency to your project:
-        </p>
-        <p>
-          {{ description }}
-        </p>
-      </div>
-
-      <div class="flex flex-col items-center">
-        <code>$ npm i @nuxt/ui</code>
-        <code>$ yarn add @nuxt/ui</code>
-        <code>$ pnpm add @nuxt/ui</code>
-      </div>
-    </template>
-  </UAccordion>
-</template>
diff --git a/docs/components/content/examples/AlertExampleAvatar.vue b/docs/components/content/examples/AlertExampleAvatar.vue
deleted file mode 100644
index 66db4bdf..00000000
--- a/docs/components/content/examples/AlertExampleAvatar.vue
+++ /dev/null
@@ -1,20 +0,0 @@
-<template>
-  <UAlert 
-    title="Customize Alert Avatar" 
-    description="Insert custom content into the avatar slot!" 
-    :avatar="{ 
-      src: 'https://avatars.githubusercontent.com/u/739984?v=4', 
-      alt: 'Avatar' 
-    }"
-  >
-    <template #avatar="{ avatar }">
-      <UAvatar 
-        v-bind="avatar" 
-        chip-color="primary"
-        chip-text=""
-        chip-position="top-right"
-      />
-    </template>
-  </UAlert>
-</template>
-  
\ No newline at end of file
diff --git a/docs/components/content/examples/AlertExampleHtml.vue b/docs/components/content/examples/AlertExampleHtml.vue
deleted file mode 100644
index 95e93684..00000000
--- a/docs/components/content/examples/AlertExampleHtml.vue
+++ /dev/null
@@ -1,12 +0,0 @@
-<template>
-  <UAlert title="Heads <i>up</i>!" icon="i-heroicons-command-line">
-    <template #title="{ title }">
-      <!-- eslint-disable-next-line vue/no-v-html -->
-      <span v-html="title" />
-    </template>
-
-    <template #description>
-      You can add <b>components</b> to your app using the <u>cli</u>.
-    </template>
-  </UAlert>
-</template>
diff --git a/docs/components/content/examples/AlertExampleIcon.vue b/docs/components/content/examples/AlertExampleIcon.vue
deleted file mode 100644
index 5e498864..00000000
--- a/docs/components/content/examples/AlertExampleIcon.vue
+++ /dev/null
@@ -1,10 +0,0 @@
-<template>
-  <UAlert title="Customize Alert Icon" description="Insert custom content into the icon slot!" icon="i-heroicons-command-line">
-    <template #icon="{ icon }">
-      <UBadge size="sm">
-        <UIcon :name="icon" />
-      </UBadge>
-    </template>
-  </UAlert>
-</template>
-  
\ No newline at end of file
diff --git a/docs/components/content/examples/BreadcrumbExampleBasic.vue b/docs/components/content/examples/BreadcrumbExampleBasic.vue
deleted file mode 100644
index 12732a8a..00000000
--- a/docs/components/content/examples/BreadcrumbExampleBasic.vue
+++ /dev/null
@@ -1,17 +0,0 @@
-<script setup lang="ts">
-const links = [{
-  label: 'Home',
-  icon: 'i-heroicons-home',
-  to: '/'
-}, {
-  label: 'Navigation',
-  icon: 'i-heroicons-square-3-stack-3d'
-}, {
-  label: 'Breadcrumb',
-  icon: 'i-heroicons-link'
-}]
-</script>
-
-<template>
-  <UBreadcrumb :links="links" />
-</template>
diff --git a/docs/components/content/examples/BreadcrumbExampleDefaultSlot.vue b/docs/components/content/examples/BreadcrumbExampleDefaultSlot.vue
deleted file mode 100644
index 2210e616..00000000
--- a/docs/components/content/examples/BreadcrumbExampleDefaultSlot.vue
+++ /dev/null
@@ -1,20 +0,0 @@
-<script setup lang="ts">
-const links = [{
-  label: 'Home',
-  to: '/'
-}, {
-  label: 'Navigation'
-}, {
-  label: 'Breadcrumb'
-}]
-</script>
-
-<template>
-  <UBreadcrumb :links="links">
-    <template #default="{ link, isActive, index }">
-      <UBadge :color="isActive ? 'primary' : 'gray'" class="rounded-full">
-        {{ index + 1 }}. {{ link.label }}
-      </UBadge>
-    </template>
-  </UBreadcrumb>
-</template>
diff --git a/docs/components/content/examples/BreadcrumbExampleDividerSlot.vue b/docs/components/content/examples/BreadcrumbExampleDividerSlot.vue
deleted file mode 100644
index 810bc4c3..00000000
--- a/docs/components/content/examples/BreadcrumbExampleDividerSlot.vue
+++ /dev/null
@@ -1,21 +0,0 @@
-<script setup lang="ts">
-const links = [{
-  label: 'Home',
-  icon: 'i-heroicons-home',
-  to: '/'
-}, {
-  label: 'Navigation',
-  icon: 'i-heroicons-square-3-stack-3d'
-}, {
-  label: 'Breadcrumb',
-  icon: 'i-heroicons-link'
-}]
-</script>
-
-<template>
-  <UBreadcrumb :links="links" :ui="{ ol: 'gap-x-3', li: 'gap-x-3' }">
-    <template #divider>
-      <span class="w-8 h-1 rounded-full bg-gray-300 dark:bg-gray-700" />
-    </template>
-  </UBreadcrumb>
-</template>
diff --git a/docs/components/content/examples/BreadcrumbExampleIconSlot.vue b/docs/components/content/examples/BreadcrumbExampleIconSlot.vue
deleted file mode 100644
index 8b941306..00000000
--- a/docs/components/content/examples/BreadcrumbExampleIconSlot.vue
+++ /dev/null
@@ -1,25 +0,0 @@
-<script setup lang="ts">
-const links = [{
-  label: 'Home',
-  to: '/'
-}, {
-  label: 'Navigation'
-}, {
-  label: 'Breadcrumb'
-}]
-</script>
-
-<template>
-  <UBreadcrumb :links="links" :divider="null" :ui="{ ol: 'gap-x-3' }">
-    <template #icon="{ link, index, isActive }">
-      <UAvatar
-        :alt="(index + 1 ).toString()"
-        :ui="{
-          background: isActive ? 'bg-primary-500 dark:bg-primary-400' : undefined,
-          placeholder: isActive ? 'text-white dark:text-gray-900' : !!link.to ? 'group-hover:text-gray-700 dark:group-hover:text-gray-200' : ''
-        }"
-        size="xs"
-      />
-    </template>
-  </UBreadcrumb>
-</template>
diff --git a/docs/components/content/examples/CardExample.vue b/docs/components/content/examples/CardExample.vue
deleted file mode 100644
index 3dea6136..00000000
--- a/docs/components/content/examples/CardExample.vue
+++ /dev/null
@@ -1,13 +0,0 @@
-<template>
-  <UCard>
-    <template #header>
-      <Placeholder class="h-8" />
-    </template>
-
-    <Placeholder class="h-32" />
-
-    <template #footer>
-      <Placeholder class="h-8" />
-    </template>
-  </UCard>
-</template>
diff --git a/docs/components/content/examples/CarouselExample.vue b/docs/components/content/examples/CarouselExample.vue
deleted file mode 100644
index 661ed0c6..00000000
--- a/docs/components/content/examples/CarouselExample.vue
+++ /dev/null
@@ -1,16 +0,0 @@
-<script setup lang="ts">
-const items = [
-  'https://picsum.photos/600/800?random=1',
-  'https://picsum.photos/600/800?random=2',
-  'https://picsum.photos/600/800?random=3',
-  'https://picsum.photos/600/800?random=4',
-  'https://picsum.photos/600/800?random=5',
-  'https://picsum.photos/600/800?random=6'
-]
-</script>
-
-<template>
-  <UCarousel v-slot="{ item }" :items="items">
-    <img :src="item" width="300" height="400" draggable="false">
-  </UCarousel>
-</template>
diff --git a/docs/components/content/examples/CarouselExampleArrows.vue b/docs/components/content/examples/CarouselExampleArrows.vue
deleted file mode 100644
index 1d85fd30..00000000
--- a/docs/components/content/examples/CarouselExampleArrows.vue
+++ /dev/null
@@ -1,16 +0,0 @@
-<script setup lang="ts">
-const items = [
-  'https://picsum.photos/1920/1080?random=1',
-  'https://picsum.photos/1920/1080?random=2',
-  'https://picsum.photos/1920/1080?random=3',
-  'https://picsum.photos/1920/1080?random=4',
-  'https://picsum.photos/1920/1080?random=5',
-  'https://picsum.photos/1920/1080?random=6'
-]
-</script>
-
-<template>
-  <UCarousel v-slot="{ item }" :items="items" :ui="{ item: 'basis-full' }" class="rounded-lg overflow-hidden" arrows>
-    <img :src="item" class="w-full" draggable="false">
-  </UCarousel>
-</template>
diff --git a/docs/components/content/examples/CarouselExampleArrowsCenter.vue b/docs/components/content/examples/CarouselExampleArrowsCenter.vue
deleted file mode 100644
index bbe864cf..00000000
--- a/docs/components/content/examples/CarouselExampleArrowsCenter.vue
+++ /dev/null
@@ -1,35 +0,0 @@
-<script setup lang="ts">
-const items = [
-  'https://picsum.photos/600/800?random=1',
-  'https://picsum.photos/600/800?random=2',
-  'https://picsum.photos/600/800?random=3',
-  'https://picsum.photos/600/800?random=4',
-  'https://picsum.photos/600/800?random=5',
-  'https://picsum.photos/600/800?random=6'
-]
-</script>
-
-<template>
-  <UCarousel
-    v-slot="{ item }"
-    :items="items"
-    :ui="{
-      item: 'basis-full',
-      container: 'rounded-lg'
-    }"
-    :prev-button="{
-      color: 'gray',
-      icon: 'i-heroicons-arrow-left-20-solid',
-      class: '-left-12'
-    }"
-    :next-button="{
-      color: 'gray',
-      icon: 'i-heroicons-arrow-right-20-solid',
-      class: '-right-12'
-    }"
-    arrows
-    class="w-64 mx-auto"
-  >
-    <img :src="item" class="w-full" draggable="false">
-  </UCarousel>
-</template>
diff --git a/docs/components/content/examples/CarouselExampleAutoplay.vue b/docs/components/content/examples/CarouselExampleAutoplay.vue
deleted file mode 100644
index e9a6bcd2..00000000
--- a/docs/components/content/examples/CarouselExampleAutoplay.vue
+++ /dev/null
@@ -1,37 +0,0 @@
-<script setup lang="ts">
-const items = [
-  'https://picsum.photos/1920/1080?random=1',
-  'https://picsum.photos/1920/1080?random=2',
-  'https://picsum.photos/1920/1080?random=3',
-  'https://picsum.photos/1920/1080?random=4',
-  'https://picsum.photos/1920/1080?random=5',
-  'https://picsum.photos/1920/1080?random=6'
-]
-
-const carouselRef = ref()
-
-onMounted(() => {
-  setInterval(() => {
-    if (!carouselRef.value) return
-
-    if (carouselRef.value.page === carouselRef.value.pages) {
-      return carouselRef.value.select(0)
-    }
-
-    carouselRef.value.next()
-  }, 3000)
-})
-</script>
-
-<template>
-  <UCarousel
-    ref="carouselRef"
-    v-slot="{ item }"
-    :items="items"
-    :ui="{ item: 'basis-full' }"
-    class="rounded-lg overflow-hidden"
-    indicators
-  >
-    <img :src="item" class="w-full" draggable="false">
-  </UCarousel>
-</template>
diff --git a/docs/components/content/examples/CarouselExampleIndicators.vue b/docs/components/content/examples/CarouselExampleIndicators.vue
deleted file mode 100644
index 6740f37f..00000000
--- a/docs/components/content/examples/CarouselExampleIndicators.vue
+++ /dev/null
@@ -1,16 +0,0 @@
-<script setup lang="ts">
-const items = [
-  'https://picsum.photos/1920/1080?random=1',
-  'https://picsum.photos/1920/1080?random=2',
-  'https://picsum.photos/1920/1080?random=3',
-  'https://picsum.photos/1920/1080?random=4',
-  'https://picsum.photos/1920/1080?random=5',
-  'https://picsum.photos/1920/1080?random=6'
-]
-</script>
-
-<template>
-  <UCarousel v-slot="{ item }" :items="items" :ui="{ item: 'basis-full' }" class="rounded-lg overflow-hidden" indicators>
-    <img :src="item" class="w-full" draggable="false">
-  </UCarousel>
-</template>
diff --git a/docs/components/content/examples/CarouselExampleIndicatorsSize.vue b/docs/components/content/examples/CarouselExampleIndicatorsSize.vue
deleted file mode 100644
index 8483dcff..00000000
--- a/docs/components/content/examples/CarouselExampleIndicatorsSize.vue
+++ /dev/null
@@ -1,16 +0,0 @@
-<script setup lang="ts">
-const items = [
-  'https://picsum.photos/600/600?random=1',
-  'https://picsum.photos/600/600?random=2',
-  'https://picsum.photos/600/600?random=3',
-  'https://picsum.photos/600/600?random=4',
-  'https://picsum.photos/600/600?random=5',
-  'https://picsum.photos/600/600?random=6'
-]
-</script>
-
-<template>
-  <UCarousel v-slot="{ item }" :items="items" :ui="{ item: 'basis-full md:basis-1/2 lg:basis-1/3' }" indicators class="rounded-lg overflow-hidden">
-    <img :src="item" class="w-full" draggable="false">
-  </UCarousel>
-</template>
diff --git a/docs/components/content/examples/CarouselExampleSize.vue b/docs/components/content/examples/CarouselExampleSize.vue
deleted file mode 100644
index 4b5ddb10..00000000
--- a/docs/components/content/examples/CarouselExampleSize.vue
+++ /dev/null
@@ -1,16 +0,0 @@
-<script setup lang="ts">
-const items = [
-  'https://picsum.photos/600/600?random=1',
-  'https://picsum.photos/600/600?random=2',
-  'https://picsum.photos/600/600?random=3',
-  'https://picsum.photos/600/600?random=4',
-  'https://picsum.photos/600/600?random=5',
-  'https://picsum.photos/600/600?random=6'
-]
-</script>
-
-<template>
-  <UCarousel v-slot="{ item }" :items="items" :ui="{ item: 'basis-full md:basis-1/2 lg:basis-1/3' }">
-    <img :src="item" class="w-full" draggable="false">
-  </UCarousel>
-</template>
diff --git a/docs/components/content/examples/CarouselExampleSizeCenter.vue b/docs/components/content/examples/CarouselExampleSizeCenter.vue
deleted file mode 100644
index 33d8ea4c..00000000
--- a/docs/components/content/examples/CarouselExampleSizeCenter.vue
+++ /dev/null
@@ -1,16 +0,0 @@
-<script setup lang="ts">
-const items = [
-  'https://picsum.photos/600/800?random=1',
-  'https://picsum.photos/600/800?random=2',
-  'https://picsum.photos/600/800?random=3',
-  'https://picsum.photos/600/800?random=4',
-  'https://picsum.photos/600/800?random=5',
-  'https://picsum.photos/600/800?random=6'
-]
-</script>
-
-<template>
-  <UCarousel v-slot="{ item }" :items="items" :ui="{ item: 'basis-full' }" class="w-64 mx-auto rounded-lg overflow-hidden">
-    <img :src="item" class="w-full" draggable="false">
-  </UCarousel>
-</template>
diff --git a/docs/components/content/examples/CarouselExampleSizeFull.vue b/docs/components/content/examples/CarouselExampleSizeFull.vue
deleted file mode 100644
index 191f802b..00000000
--- a/docs/components/content/examples/CarouselExampleSizeFull.vue
+++ /dev/null
@@ -1,16 +0,0 @@
-<script setup lang="ts">
-const items = [
-  'https://picsum.photos/1920/1080?random=1',
-  'https://picsum.photos/1920/1080?random=2',
-  'https://picsum.photos/1920/1080?random=3',
-  'https://picsum.photos/1920/1080?random=4',
-  'https://picsum.photos/1920/1080?random=5',
-  'https://picsum.photos/1920/1080?random=6'
-]
-</script>
-
-<template>
-  <UCarousel v-slot="{ item }" :items="items" :ui="{ item: 'basis-full' }" class="rounded-lg overflow-hidden">
-    <img :src="item" class="w-full" draggable="false">
-  </UCarousel>
-</template>
diff --git a/docs/components/content/examples/CarouselExampleSlotsDefault.vue b/docs/components/content/examples/CarouselExampleSlotsDefault.vue
deleted file mode 100644
index f5c3be58..00000000
--- a/docs/components/content/examples/CarouselExampleSlotsDefault.vue
+++ /dev/null
@@ -1,31 +0,0 @@
-<script setup lang="ts">
-const items = [{
-  name: 'Sébastien Chopin',
-  to: 'https://github.com/Atinux',
-  avatar: { src: 'https://ipx.nuxt.com/f_auto,s_192x192/gh_avatar/atinux' }
-}, {
-  name: 'Pooya Parsa',
-  to: 'https://github.com/pi0',
-  avatar: { src: 'https://ipx.nuxt.com/f_auto,s_192x192/gh_avatar/pi0' }
-}, {
-  name: 'Daniel Roe',
-  to: 'https://github.com/danielroe',
-  avatar: { src: 'https://ipx.nuxt.com/f_auto,s_192x192/gh_avatar/danielroe' }
-}, {
-  name: 'Anthony Fu',
-  to: 'https://github.com/antfu',
-  avatar: { src: 'https://ipx.nuxt.com/f_auto,s_192x192/gh_avatar/antfu' }
-}]
-</script>
-
-<template>
-  <UCarousel v-slot="{ item, index }" :items="items" :ui="{ item: 'w-full' }">
-    <div class="text-center mx-auto">
-      <img :src="item.avatar.src" :alt="item.name" class="rounded-full w-48 h-48 mb-2" draggable="false">
-
-      <p class="font-semibold">
-        {{ index + 1 }}. {{ item.name }}
-      </p>
-    </div>
-  </UCarousel>
-</template>
diff --git a/docs/components/content/examples/CarouselExampleSlotsIndicator.vue b/docs/components/content/examples/CarouselExampleSlotsIndicator.vue
deleted file mode 100644
index 9c94be1f..00000000
--- a/docs/components/content/examples/CarouselExampleSlotsIndicator.vue
+++ /dev/null
@@ -1,33 +0,0 @@
-<script setup lang="ts">
-const items = [
-  'https://picsum.photos/600/800?random=1',
-  'https://picsum.photos/600/800?random=2',
-  'https://picsum.photos/600/800?random=3',
-  'https://picsum.photos/600/800?random=4',
-  'https://picsum.photos/600/800?random=5',
-  'https://picsum.photos/600/800?random=6'
-]
-</script>
-
-<template>
-  <UCarousel
-    :items="items"
-    :ui="{
-      item: 'basis-full',
-      container: 'rounded-lg',
-      indicators: {
-        wrapper: 'relative bottom-0 mt-4'
-      }
-    }"
-    indicators
-    class="w-64 mx-auto"
-  >
-    <template #default="{ item }">
-      <img :src="item" class="w-full" draggable="false">
-    </template>
-
-    <template #indicator="{ onClick, page, active }">
-      <UButton :label="String(page)" :variant="active ? 'solid' : 'outline'" size="2xs" class="rounded-full min-w-6 justify-center" @click="onClick(page)" />
-    </template>
-  </UCarousel>
-</template>
diff --git a/docs/components/content/examples/CarouselExampleSlotsPrevNext.vue b/docs/components/content/examples/CarouselExampleSlotsPrevNext.vue
deleted file mode 100644
index a74170b2..00000000
--- a/docs/components/content/examples/CarouselExampleSlotsPrevNext.vue
+++ /dev/null
@@ -1,38 +0,0 @@
-<script setup lang="ts">
-const items = [
-  'https://picsum.photos/600/800?random=1',
-  'https://picsum.photos/600/800?random=2',
-  'https://picsum.photos/600/800?random=3',
-  'https://picsum.photos/600/800?random=4',
-  'https://picsum.photos/600/800?random=5',
-  'https://picsum.photos/600/800?random=6'
-]
-</script>
-
-<template>
-  <UCarousel
-    :items="items"
-    :ui="{
-      item: 'basis-full',
-      container: 'rounded-lg'
-    }"
-    arrows
-    class="w-64 mx-auto"
-  >
-    <template #default="{ item }">
-      <img :src="item" class="w-full" draggable="false">
-    </template>
-
-    <template #prev="{ onClick, disabled }">
-      <button :disabled="disabled" @click="onClick">
-        Prev
-      </button>
-    </template>
-
-    <template #next="{ onClick, disabled }">
-      <button :disabled="disabled" @click="onClick">
-        Next
-      </button>
-    </template>
-  </UCarousel>
-</template>
diff --git a/docs/components/content/examples/CarouselExampleSnapEnd.vue b/docs/components/content/examples/CarouselExampleSnapEnd.vue
deleted file mode 100644
index 3b247eff..00000000
--- a/docs/components/content/examples/CarouselExampleSnapEnd.vue
+++ /dev/null
@@ -1,16 +0,0 @@
-<script setup lang="ts">
-const items = [
-  'https://picsum.photos/400/600?random=1',
-  'https://picsum.photos/400/600?random=2',
-  'https://picsum.photos/400/600?random=3',
-  'https://picsum.photos/400/600?random=4',
-  'https://picsum.photos/400/600?random=5',
-  'https://picsum.photos/400/600?random=6'
-]
-</script>
-
-<template>
-  <UCarousel v-slot="{ item }" :items="items" :ui="{ item: 'snap-end' }">
-    <img :src="item" width="200" height="300" draggable="false">
-  </UCarousel>
-</template>
diff --git a/docs/components/content/examples/CarouselExampleSnapStart.vue b/docs/components/content/examples/CarouselExampleSnapStart.vue
deleted file mode 100644
index 1b6cb408..00000000
--- a/docs/components/content/examples/CarouselExampleSnapStart.vue
+++ /dev/null
@@ -1,16 +0,0 @@
-<script setup lang="ts">
-const items = [
-  'https://picsum.photos/400/600?random=1',
-  'https://picsum.photos/400/600?random=2',
-  'https://picsum.photos/400/600?random=3',
-  'https://picsum.photos/400/600?random=4',
-  'https://picsum.photos/400/600?random=5',
-  'https://picsum.photos/400/600?random=6'
-]
-</script>
-
-<template>
-  <UCarousel v-slot="{ item }" :items="items" :ui="{ item: 'snap-start' }">
-    <img :src="item" width="200" height="300" draggable="false">
-  </UCarousel>
-</template>
diff --git a/docs/components/content/examples/CheckboxExample.vue b/docs/components/content/examples/CheckboxExample.vue
deleted file mode 100644
index 6d75d1c5..00000000
--- a/docs/components/content/examples/CheckboxExample.vue
+++ /dev/null
@@ -1,7 +0,0 @@
-<script setup lang="ts">
-const selected = ref(true)
-</script>
-
-<template>
-  <UCheckbox v-model="selected" name="notifications" label="Notifications" />
-</template>
diff --git a/docs/components/content/examples/ChipExampleContentSlot.vue b/docs/components/content/examples/ChipExampleContentSlot.vue
deleted file mode 100644
index 7ebcb94b..00000000
--- a/docs/components/content/examples/ChipExampleContentSlot.vue
+++ /dev/null
@@ -1,19 +0,0 @@
-<template>
-  <UChip size="md" position="bottom-right" inset :ui="{ base: '-mx-2 rounded-none ring-0', background: '' }">
-    <UAvatar
-      src="https://avatars.githubusercontent.com/u/739984?v=4"
-      alt="Avatar"
-      size="lg"
-    />
-
-    <template #content>
-      <UAvatar
-        src="https://avatars.githubusercontent.com/in/80442?v=4"
-        alt="Avatar"
-        size="xs"
-        :ui="{ rounded: 'rounded-md' }"
-        class="shadow-md"
-      />
-    </template>
-  </UChip>
-</template>
diff --git a/docs/components/content/examples/ChipExampleShow.vue b/docs/components/content/examples/ChipExampleShow.vue
deleted file mode 100644
index ec3b40b4..00000000
--- a/docs/components/content/examples/ChipExampleShow.vue
+++ /dev/null
@@ -1,19 +0,0 @@
-<script setup lang="ts">
-const items = [{
-  name: 'messages',
-  icon: 'i-heroicons-chat-bubble-oval-left',
-  count: 3
-}, {
-  name: 'notifications',
-  icon: 'i-heroicons-bell',
-  count: 0
-}]
-</script>
-
-<template>
-  <div class="flex gap-3">
-    <UChip v-for="{ name, icon, count } in items" :key="name" :show="count > 0">
-      <UButton :icon="icon" color="gray" />
-    </UChip>
-  </div>
-</template>
diff --git a/docs/components/content/examples/CommandPaletteExampleAsync.vue b/docs/components/content/examples/CommandPaletteExampleAsync.vue
deleted file mode 100644
index ce8859e8..00000000
--- a/docs/components/content/examples/CommandPaletteExampleAsync.vue
+++ /dev/null
@@ -1,19 +0,0 @@
-<script setup lang="ts">
-const groups = [{
-  key: 'users',
-  label: q => q && `Users matching “${q}”...`,
-  search: async (q) => {
-    if (!q) {
-      return []
-    }
-
-    const users = await $fetch<any[]>('https://jsonplaceholder.typicode.com/users', { params: { q } })
-
-    return users.map(user => ({ id: user.id, label: user.name, suffix: user.email }))
-  }
-}]
-</script>
-
-<template>
-  <UCommandPalette :groups="groups" :autoselect="false" />
-</template>
diff --git a/docs/components/content/examples/CommandPaletteExampleBasic.vue b/docs/components/content/examples/CommandPaletteExampleBasic.vue
deleted file mode 100644
index 84ca8456..00000000
--- a/docs/components/content/examples/CommandPaletteExampleBasic.vue
+++ /dev/null
@@ -1,27 +0,0 @@
-<script setup lang="ts">
-const people = [
-  { id: 1, label: 'Wade Cooper' },
-  { id: 2, label: 'Arlene Mccoy' },
-  { id: 3, label: 'Devon Webb' },
-  { id: 4, label: 'Tom Cook' },
-  { id: 5, label: 'Tanya Fox' },
-  { id: 6, label: 'Hellen Schmidt' },
-  { id: 7, label: 'Caroline Schultz' },
-  { id: 8, label: 'Mason Heaney' },
-  { id: 9, label: 'Claudie Smitham' },
-  { id: 10, label: 'Emil Schaefer' }
-]
-
-const selected = ref([people[3]])
-</script>
-
-<template>
-  <UCommandPalette
-    v-model="selected"
-    multiple
-    nullable
-    :autoselect="false"
-    :groups="[{ key: 'people', commands: people }]"
-    :fuse="{ resultLimit: 6, fuseOptions: { threshold: 0.1 } }"
-  />
-</template>
diff --git a/docs/components/content/examples/CommandPaletteExampleEmptySlot.vue b/docs/components/content/examples/CommandPaletteExampleEmptySlot.vue
deleted file mode 100644
index a64f7a14..00000000
--- a/docs/components/content/examples/CommandPaletteExampleEmptySlot.vue
+++ /dev/null
@@ -1,10 +0,0 @@
-<template>
-  <UCommandPalette>
-    <template #empty-state>
-      <div class="flex flex-col items-center justify-center py-6 gap-3">
-        <span class="italic text-sm">Nothing here!</span>
-        <UButton label="Add item" />
-      </div>
-    </template>
-  </UCommandPalette>
-</template>
diff --git a/docs/components/content/examples/CommandPaletteExampleFilter.vue b/docs/components/content/examples/CommandPaletteExampleFilter.vue
deleted file mode 100644
index 5a7afbe0..00000000
--- a/docs/components/content/examples/CommandPaletteExampleFilter.vue
+++ /dev/null
@@ -1,30 +0,0 @@
-<script setup lang="ts">
-const people = [
-  { id: 1, label: 'Wade Cooper', child: true },
-  { id: 2, label: 'Arlene Mccoy' },
-  { id: 3, label: 'Devon Webb', child: true },
-  { id: 4, label: 'Tom Cook' },
-  { id: 5, label: 'Tanya Fox', child: true },
-  { id: 6, label: 'Hellen Schmidt' },
-  { id: 7, label: 'Caroline Schultz', child: true },
-  { id: 8, label: 'Mason Heaney' },
-  { id: 9, label: 'Claudie Smitham', child: true },
-  { id: 10, label: 'Emil Schaefer' }
-]
-
-const groups = [{
-  key: 'users',
-  commands: people,
-  filter: (q, commands) => {
-    if (!q) {
-      return commands?.filter(command => !command.child)
-    }
-
-    return commands
-  }
-}]
-</script>
-
-<template>
-  <UCommandPalette :groups="groups" :autoselect="false" />
-</template>
diff --git a/docs/components/content/examples/CommandPaletteExampleGroups.vue b/docs/components/content/examples/CommandPaletteExampleGroups.vue
deleted file mode 100644
index 89d2e173..00000000
--- a/docs/components/content/examples/CommandPaletteExampleGroups.vue
+++ /dev/null
@@ -1,46 +0,0 @@
-<script setup lang="ts">
-const router = useRouter()
-const toast = useToast()
-
-const commandPaletteRef = ref()
-
-const users = [
-  { id: 'benjamincanac', label: 'benjamincanac', href: 'https://github.com/benjamincanac', target: '_blank', avatar: { src: 'https://ipx.nuxt.com/s_16x16/gh_avatar/benjamincanac', srcset: 'https://ipx.nuxt.com/s_32x32/gh_avatar/benjamincanac 2x', loading: 'lazy' } },
-  { id: 'Atinux', label: 'Atinux', href: 'https://github.com/Atinux', target: '_blank', avatar: { src: 'https://ipx.nuxt.com/s_16x16/gh_avatar/Atinux', srcset: 'https://ipx.nuxt.com/s_32x32/gh_avatar/Atinux 2x', loading: 'lazy' } },
-  { id: 'smarroufin', label: 'smarroufin', href: 'https://github.com/smarroufin', target: '_blank', avatar: { src: 'https://ipx.nuxt.com/s_16x16/gh_avatar/smarroufin', srcset: 'https://ipx.nuxt.com/s_32x32/gh_avatar/smarroufin 2x', loading: 'lazy' } }
-]
-
-const actions = [
-  { id: 'new-file', label: 'Add new file', icon: 'i-heroicons-document-plus', click: () => toast.add({ title: 'New file added!' }), shortcuts: ['⌘', 'N'] },
-  { id: 'new-folder', label: 'Add new folder', icon: 'i-heroicons-folder-plus', click: () => toast.add({ title: 'New folder added!' }), shortcuts: ['⌘', 'F'] },
-  { id: 'hashtag', label: 'Add hashtag', icon: 'i-heroicons-hashtag', click: () => toast.add({ title: 'Hashtag added!' }), shortcuts: ['⌘', 'H'] },
-  { id: 'label', label: 'Add label', icon: 'i-heroicons-tag', click: () => toast.add({ title: 'Label added!' }), shortcuts: ['⌘', 'L'] }
-]
-
-const groups = computed(() =>
-  [commandPaletteRef.value?.query ? {
-    key: 'users',
-    commands: users
-  } : {
-    key: 'recent',
-    label: 'Recent searches',
-    commands: users.slice(0, 1)
-  }, {
-    key: 'actions',
-    commands: actions
-  }].filter(Boolean))
-
-function onSelect (option) {
-  if (option.click) {
-    option.click()
-  } else if (option.to) {
-    router.push(option.to)
-  } else if (option.href) {
-    window.open(option.href, '_blank')
-  }
-}
-</script>
-
-<template>
-  <UCommandPalette ref="commandPaletteRef" :groups="groups" :autoselect="false" @update:model-value="onSelect" />
-</template>
diff --git a/docs/components/content/examples/CommandPaletteExampleModal.vue b/docs/components/content/examples/CommandPaletteExampleModal.vue
deleted file mode 100644
index 5abe16b1..00000000
--- a/docs/components/content/examples/CommandPaletteExampleModal.vue
+++ /dev/null
@@ -1,33 +0,0 @@
-<script setup lang="ts">
-const isOpen = ref(false)
-
-const people = [
-  { id: 1, label: 'Wade Cooper' },
-  { id: 2, label: 'Arlene Mccoy' },
-  { id: 3, label: 'Devon Webb' },
-  { id: 4, label: 'Tom Cook' },
-  { id: 5, label: 'Tanya Fox' },
-  { id: 6, label: 'Hellen Schmidt' },
-  { id: 7, label: 'Caroline Schultz' },
-  { id: 8, label: 'Mason Heaney' },
-  { id: 9, label: 'Claudie Smitham' },
-  { id: 10, label: 'Emil Schaefer' }
-]
-
-const selected = ref([])
-</script>
-
-<template>
-  <div>
-    <UButton label="Open" @click="isOpen = true" />
-
-    <UModal v-model="isOpen">
-      <UCommandPalette
-        v-model="selected"
-        multiple
-        nullable
-        :groups="[{ key: 'people', commands: people }]"
-      />
-    </UModal>
-  </div>
-</template>
diff --git a/docs/components/content/examples/CommandPaletteExampleThemeAlgolia.vue b/docs/components/content/examples/CommandPaletteExampleThemeAlgolia.vue
deleted file mode 100644
index bee0dbae..00000000
--- a/docs/components/content/examples/CommandPaletteExampleThemeAlgolia.vue
+++ /dev/null
@@ -1,78 +0,0 @@
-<script setup lang="ts">
-import type { NavItem, ParsedContent } from '@nuxt/content/dist/runtime/types'
-import type { Button } from '#ui/types'
-
-const commandPaletteRef = ref()
-
-const navigation = inject<Ref<NavItem[]>>('navigation')
-const files = inject<Ref<ParsedContent[]>>('files')
-
-const groups = computed(() => navigation.value.map(item => ({
-  key: item._path,
-  label: item.label,
-  commands: files.value.filter(file => file._path.startsWith(item._path)).map(file => ({
-    id: file._id,
-    icon: 'i-heroicons-document',
-    title: file.navigation?.title || file.title,
-    category: item.title,
-    to: file._path
-  }))
-})))
-
-const closeButton = computed(() => commandPaletteRef.value?.query ? ({ icon: 'i-heroicons-x-mark', color: 'black', variant: 'ghost', size: 'lg', padded: false }) : null)
-const emptyState = computed(() => commandPaletteRef.value?.query ? ({ icon: 'i-heroicons-magnifying-glass', queryLabel: 'No results' }) : ({ icon: '', label: 'No recent searches' }))
-
-const ui = {
-  wrapper: 'flex flex-col flex-1 min-h-0 bg-gray-50 dark:bg-gray-800',
-  input: {
-    wrapper: 'relative flex items-center mx-3 py-3',
-    base: 'w-full rounded border-2 border-primary-500 placeholder-gray-400 dark:placeholder-gray-500 focus:border-primary-500 focus:outline-none focus:ring-0 bg-white dark:bg-gray-900',
-    padding: 'px-4',
-    height: 'h-14',
-    size: 'text-lg',
-    icon: {
-      base: 'pointer-events-none absolute left-3 text-primary-500 dark:text-primary-400',
-      size: 'h-6 w-6'
-    }
-  },
-  group: {
-    wrapper: 'p-3 relative',
-    label: '-mx-3 px-3 -mt-4 mb-2 py-1 text-sm font-semibold text-primary-500 dark:text-primary-400 font-semibold sticky top-0 bg-gray-50 dark:bg-gray-800 z-10',
-    container: 'space-y-1',
-    command: {
-      base: 'flex justify-between select-none items-center rounded px-2 py-4 gap-2 relative font-medium text-sm group shadow',
-      active: 'bg-primary-500 dark:bg-primary-400 text-white',
-      inactive: 'bg-white dark:bg-gray-900',
-      label: 'flex flex-col min-w-0',
-      suffix: 'text-xs',
-      icon: {
-        base: 'flex-shrink-0 w-6 h-6',
-        active: 'text-white',
-        inactive: 'text-gray-400 dark:text-gray-500'
-      }
-    }
-  },
-  emptyState: {
-    wrapper: 'flex flex-col items-center justify-center flex-1 py-9',
-    label: 'text-sm text-center text-gray-500 dark:text-gray-400',
-    queryLabel: 'text-lg text-center text-gray-900 dark:text-white',
-    icon: 'w-12 h-12 mx-auto text-gray-400 dark:text-gray-500 mb-4'
-  }
-}
-</script>
-
-<template>
-  <UCommandPalette
-    ref="commandPaletteRef"
-    :groups="groups"
-    :ui="ui"
-    :close-button="(closeButton as Button)"
-    :empty-state="(emptyState as any)"
-    :autoselect="false"
-    command-attribute="title"
-    :fuse="{
-      fuseOptions: { keys: ['title', 'category'] },
-    }"
-    placeholder="Search docs"
-  />
-</template>
diff --git a/docs/components/content/examples/CommandPaletteExampleThemeRaycast.vue b/docs/components/content/examples/CommandPaletteExampleThemeRaycast.vue
deleted file mode 100644
index 86264bca..00000000
--- a/docs/components/content/examples/CommandPaletteExampleThemeRaycast.vue
+++ /dev/null
@@ -1,64 +0,0 @@
-<script setup lang="ts">
-const commandPaletteRef = ref()
-
-const suggestions = [
-  { id: 'linear', label: 'Linear', icon: 'i-simple-icons-linear' },
-  { id: 'figma', label: 'Figma', icon: 'i-simple-icons-figma' },
-  { id: 'slack', label: 'Slack', icon: 'i-simple-icons-slack' },
-  { id: 'youtube', label: 'YouTube', icon: 'i-simple-icons-youtube' },
-  { id: 'github', label: 'GitHub', icon: 'i-simple-icons-github' }
-]
-
-const commands = [
-  { id: 'clipboard-history', label: 'Clipboard History', icon: 'i-heroicons-clipboard', click: () => alert('New file') },
-  { id: 'import-extension', label: 'Import Extension', icon: 'i-heroicons-wrench-screwdriver', click: () => alert('New folder') },
-  { id: 'manage-extensions', label: 'Manage Extensions', icon: 'i-heroicons-wrench-screwdriver', click: () => alert('Add hashtag') }
-]
-
-const groups = [{
-  key: 'suggestions',
-  label: 'Suggestions',
-  inactive: 'Application',
-  commands: suggestions
-}, {
-  key: 'commands',
-  label: 'Commands',
-  inactive: 'Command',
-  commands
-}]
-
-const ui = {
-  wrapper: 'flex flex-col flex-1 min-h-0 divide-y divide-gray-200 dark:divide-gray-700 bg-gray-50 dark:bg-gray-800',
-  container: 'relative flex-1 overflow-y-auto divide-y divide-gray-200 dark:divide-gray-700 scroll-py-2',
-  input: {
-    base: 'w-full h-14 px-4 placeholder-gray-400 dark:placeholder-gray-500 bg-transparent border-0 text-gray-900 dark:text-white focus:ring-0 focus:outline-none'
-  },
-  group: {
-    label: 'px-2 my-2 text-xs font-semibold text-gray-500 dark:text-gray-400',
-    command: {
-      base: 'flex justify-between select-none cursor-default items-center rounded-md px-2 py-2 gap-2 relative',
-      active: 'bg-gray-200 dark:bg-gray-700/50 text-gray-900 dark:text-white',
-      container: 'flex items-center gap-3 min-w-0',
-      icon: {
-        base: 'flex-shrink-0 w-5 h-5',
-        active: 'text-gray-900 dark:text-white',
-        inactive: 'text-gray-400 dark:text-gray-500'
-      },
-      avatar: {
-        size: '2xs'
-      }
-    }
-  }
-}
-</script>
-
-<template>
-  <UCommandPalette
-    ref="commandPaletteRef"
-    :groups="groups"
-    icon=""
-    :ui="ui"
-    :autoselect="false"
-    placeholder="Search for apps and commands"
-  />
-</template>
diff --git a/docs/components/content/examples/ContainerExample.vue b/docs/components/content/examples/ContainerExample.vue
deleted file mode 100644
index 4dc139a1..00000000
--- a/docs/components/content/examples/ContainerExample.vue
+++ /dev/null
@@ -1,5 +0,0 @@
-<template>
-  <UContainer>
-    <Placeholder class="h-32" />
-  </UContainer>
-</template>
diff --git a/docs/components/content/examples/ContextMenuExample.vue b/docs/components/content/examples/ContextMenuExample.vue
deleted file mode 100644
index 54599fc0..00000000
--- a/docs/components/content/examples/ContextMenuExample.vue
+++ /dev/null
@@ -1,35 +0,0 @@
-<script setup lang="ts">
-const { x, y } = useMouse()
-const { y: windowY } = useWindowScroll()
-
-const isOpen = ref(false)
-const virtualElement = ref({ getBoundingClientRect: () => ({}) })
-
-function onContextMenu () {
-  const top = unref(y) - unref(windowY)
-  const left = unref(x)
-
-  virtualElement.value.getBoundingClientRect = () => ({
-    width: 0,
-    height: 0,
-    top,
-    left
-  })
-
-  isOpen.value = true
-}
-</script>
-
-<template>
-  <div class="w-full" @contextmenu.prevent="onContextMenu">
-    <Placeholder class="h-96 select-none w-full flex items-center justify-center">
-      Right click here
-    </Placeholder>
-
-    <UContextMenu v-model="isOpen" :virtual-element="virtualElement">
-      <div class="p-4">
-        Menu
-      </div>
-    </UContextMenu>
-  </div>
-</template>
diff --git a/docs/components/content/examples/ContextMenuExampleArrow.vue b/docs/components/content/examples/ContextMenuExampleArrow.vue
deleted file mode 100644
index e6c3d267..00000000
--- a/docs/components/content/examples/ContextMenuExampleArrow.vue
+++ /dev/null
@@ -1,35 +0,0 @@
-<script setup lang="ts">
-const { x, y } = useMouse()
-const { y: windowY } = useWindowScroll()
-
-const isOpen = ref(false)
-const virtualElement = ref({ getBoundingClientRect: () => ({}) })
-
-function onContextMenu () {
-  const top = unref(y) - unref(windowY)
-  const left = unref(x)
-
-  virtualElement.value.getBoundingClientRect = () => ({
-    width: 0,
-    height: 0,
-    top,
-    left
-  })
-
-  isOpen.value = true
-}
-</script>
-
-<template>
-  <div class="w-full" @contextmenu.prevent="onContextMenu">
-    <Placeholder class="h-96 select-none w-full flex items-center justify-center">
-      Right click here
-    </Placeholder>
-
-    <UContextMenu v-model="isOpen" :virtual-element="virtualElement" :popper="{ arrow: true, placement: 'right' }">
-      <div class="p-4">
-        Menu
-      </div>
-    </UContextMenu>
-  </div>
-</template>
diff --git a/docs/components/content/examples/ContextMenuExampleOffset.vue b/docs/components/content/examples/ContextMenuExampleOffset.vue
deleted file mode 100644
index 593307f4..00000000
--- a/docs/components/content/examples/ContextMenuExampleOffset.vue
+++ /dev/null
@@ -1,35 +0,0 @@
-<script setup lang="ts">
-const { x, y } = useMouse()
-const { y: windowY } = useWindowScroll()
-
-const isOpen = ref(false)
-const virtualElement = ref({ getBoundingClientRect: () => ({}) })
-
-function onContextMenu () {
-  const top = unref(y) - unref(windowY)
-  const left = unref(x)
-
-  virtualElement.value.getBoundingClientRect = () => ({
-    width: 0,
-    height: 0,
-    top,
-    left
-  })
-
-  isOpen.value = true
-}
-</script>
-
-<template>
-  <div class="w-full" @contextmenu.prevent="onContextMenu">
-    <Placeholder class="h-96 select-none w-full flex items-center justify-center">
-      Right click here
-    </Placeholder>
-
-    <UContextMenu v-model="isOpen" :virtual-element="virtualElement" :popper="{ offset: 0 }">
-      <div class="p-4">
-        Menu
-      </div>
-    </UContextMenu>
-  </div>
-</template>
diff --git a/docs/components/content/examples/ContextMenuExamplePlacement.vue b/docs/components/content/examples/ContextMenuExamplePlacement.vue
deleted file mode 100644
index 557c9077..00000000
--- a/docs/components/content/examples/ContextMenuExamplePlacement.vue
+++ /dev/null
@@ -1,35 +0,0 @@
-<script setup lang="ts">
-const { x, y } = useMouse()
-const { y: windowY } = useWindowScroll()
-
-const isOpen = ref(false)
-const virtualElement = ref({ getBoundingClientRect: () => ({}) })
-
-function onContextMenu () {
-  const top = unref(y) - unref(windowY)
-  const left = unref(x)
-
-  virtualElement.value.getBoundingClientRect = () => ({
-    width: 0,
-    height: 0,
-    top,
-    left
-  })
-
-  isOpen.value = true
-}
-</script>
-
-<template>
-  <div class="w-full" @contextmenu.prevent="onContextMenu">
-    <Placeholder class="h-96 select-none w-full flex items-center justify-center">
-      Right click here
-    </Placeholder>
-
-    <UContextMenu v-model="isOpen" :virtual-element="virtualElement" :popper="{ placement: 'right-start' }">
-      <div class="p-4">
-        Menu
-      </div>
-    </UContextMenu>
-  </div>
-</template>
diff --git a/docs/components/content/examples/DatePickerExample.vue b/docs/components/content/examples/DatePickerExample.vue
deleted file mode 100644
index 67c6d979..00000000
--- a/docs/components/content/examples/DatePickerExample.vue
+++ /dev/null
@@ -1,15 +0,0 @@
-<script setup lang="ts">
-import { format } from 'date-fns'
-
-const date = ref(new Date())
-</script>
-
-<template>
-  <UPopover :popper="{ placement: 'bottom-start' }">
-    <UButton icon="i-heroicons-calendar-days-20-solid" :label="format(date, 'd MMM, yyy')" />
-
-    <template #panel="{ close }">
-      <DatePicker v-model="date" is-required @close="close" />
-    </template>
-  </UPopover>
-</template>
diff --git a/docs/components/content/examples/DatePickerRangeExample.vue b/docs/components/content/examples/DatePickerRangeExample.vue
deleted file mode 100644
index 657b78ac..00000000
--- a/docs/components/content/examples/DatePickerRangeExample.vue
+++ /dev/null
@@ -1,49 +0,0 @@
-<script setup lang="ts">
-import { sub, format, isSameDay, type Duration } from 'date-fns'
-
-const ranges = [
-  { label: 'Last 7 days', duration: { days: 7 } },
-  { label: 'Last 14 days', duration: { days: 14 } },
-  { label: 'Last 30 days', duration: { days: 30 } },
-  { label: 'Last 3 months', duration: { months: 3 } },
-  { label: 'Last 6 months', duration: { months: 6 } },
-  { label: 'Last year', duration: { years: 1 } }
-]
-const selected = ref({ start: sub(new Date(), { days: 14 }), end: new Date() })
-
-function isRangeSelected (duration: Duration) {
-  return isSameDay(selected.value.start, sub(new Date(), duration)) && isSameDay(selected.value.end, new Date())
-}
-
-function selectRange (duration: Duration) {
-  selected.value = { start: sub(new Date(), duration), end: new Date() }
-}
-</script>
-
-<template>
-  <UPopover :popper="{ placement: 'bottom-start' }">
-    <UButton icon="i-heroicons-calendar-days-20-solid">
-      {{ format(selected.start, 'd MMM, yyy') }} - {{ format(selected.end, 'd MMM, yyy') }}
-    </UButton>
-
-    <template #panel="{ close }">
-      <div class="flex items-center sm:divide-x divide-gray-200 dark:divide-gray-800">
-        <div class="hidden sm:flex flex-col py-4">
-          <UButton
-            v-for="(range, index) in ranges"
-            :key="index"
-            :label="range.label"
-            color="gray"
-            variant="ghost"
-            class="rounded-none px-6"
-            :class="[isRangeSelected(range.duration) ? 'bg-gray-100 dark:bg-gray-800' : 'hover:bg-gray-50 dark:hover:bg-gray-800/50']"
-            truncate
-            @click="selectRange(range.duration)"
-          />
-        </div>
-
-        <DatePicker v-model="selected" @close="close" />
-      </div>
-    </template>
-  </UPopover>
-</template>
diff --git a/docs/components/content/examples/DividerExampleDefaultSlot.vue b/docs/components/content/examples/DividerExampleDefaultSlot.vue
deleted file mode 100644
index 923ec04c..00000000
--- a/docs/components/content/examples/DividerExampleDefaultSlot.vue
+++ /dev/null
@@ -1,5 +0,0 @@
-<template>
-  <UDivider>
-    <Logo class="w-28 h-6" />
-  </UDivider>
-</template>
diff --git a/docs/components/content/examples/DividerExampleOrientation.vue b/docs/components/content/examples/DividerExampleOrientation.vue
deleted file mode 100644
index d51cd67a..00000000
--- a/docs/components/content/examples/DividerExampleOrientation.vue
+++ /dev/null
@@ -1,47 +0,0 @@
-<script setup lang="ts">
-const form = reactive({ email: 'mail@example.com', password: 'password' })
-</script>
-
-<template>
-  <div class="w-full flex flex-col gap-y-4">
-    <UCard :ui="{ body: { base: 'grid grid-cols-3' } }">
-      <div class="space-y-4">
-        <UFormGroup label="Email" name="email">
-          <UInput v-model="form.email" />
-        </UFormGroup>
-
-        <UFormGroup label="Password" name="password">
-          <UInput v-model="form.password" type="password" />
-        </UFormGroup>
-
-        <UButton label="Login" color="gray" block />
-      </div>
-
-      <UDivider label="OR" orientation="vertical" />
-
-      <div class="space-y-4 flex flex-col justify-center">
-        <UButton color="black" label="Login with GitHub" icon="i-simple-icons-github" block />
-        <UButton color="black" label="Login with Google" icon="i-simple-icons-google" block />
-      </div>
-    </UCard>
-
-    <UCard>
-      <div class="space-y-4">
-        <UFormGroup label="Email" name="email">
-          <UInput v-model="form.email" />
-        </UFormGroup>
-
-        <UFormGroup label="Password" name="password">
-          <UInput v-model="form.password" type="password" />
-        </UFormGroup>
-
-        <UButton label="Login" color="gray" block />
-
-        <UDivider label="OR" />
-
-        <UButton color="black" label="Login with GitHub" icon="i-simple-icons-github" block />
-        <UButton color="black" label="Login with Google" icon="i-simple-icons-google" block />
-      </div>
-    </UCard>
-  </div>
-</template>
diff --git a/docs/components/content/examples/DropdownExampleArrow.vue b/docs/components/content/examples/DropdownExampleArrow.vue
deleted file mode 100644
index 6a40c953..00000000
--- a/docs/components/content/examples/DropdownExampleArrow.vue
+++ /dev/null
@@ -1,16 +0,0 @@
-<script setup lang="ts">
-const items = [
-  [{
-    label: 'Profile',
-    avatar: {
-      src: 'https://avatars.githubusercontent.com/u/739984?v=4'
-    }
-  }]
-]
-</script>
-
-<template>
-  <UDropdown :items="items" :popper="{ arrow: true }">
-    <UButton color="white" label="Options" trailing-icon="i-heroicons-chevron-down-20-solid" />
-  </UDropdown>
-</template>
diff --git a/docs/components/content/examples/DropdownExampleBasic.vue b/docs/components/content/examples/DropdownExampleBasic.vue
deleted file mode 100644
index b4daba0f..00000000
--- a/docs/components/content/examples/DropdownExampleBasic.vue
+++ /dev/null
@@ -1,38 +0,0 @@
-<script setup lang="ts">
-const items = [
-  [{
-    label: 'Profile',
-    avatar: {
-      src: 'https://avatars.githubusercontent.com/u/739984?v=4'
-    }
-  }], [{
-    label: 'Edit',
-    icon: 'i-heroicons-pencil-square-20-solid',
-    shortcuts: ['E'],
-    click: () => {
-      console.log('Edit')
-    }
-  }, {
-    label: 'Duplicate',
-    icon: 'i-heroicons-document-duplicate-20-solid',
-    shortcuts: ['D'],
-    disabled: true
-  }], [{
-    label: 'Archive',
-    icon: 'i-heroicons-archive-box-20-solid'
-  }, {
-    label: 'Move',
-    icon: 'i-heroicons-arrow-right-circle-20-solid'
-  }], [{
-    label: 'Delete',
-    icon: 'i-heroicons-trash-20-solid',
-    shortcuts: ['⌘', 'D']
-  }]
-]
-</script>
-
-<template>
-  <UDropdown :items="items" :popper="{ placement: 'bottom-start' }">
-    <UButton color="white" label="Options" trailing-icon="i-heroicons-chevron-down-20-solid" />
-  </UDropdown>
-</template>
diff --git a/docs/components/content/examples/DropdownExampleMode.vue b/docs/components/content/examples/DropdownExampleMode.vue
deleted file mode 100644
index 4a9b96b0..00000000
--- a/docs/components/content/examples/DropdownExampleMode.vue
+++ /dev/null
@@ -1,16 +0,0 @@
-<script setup lang="ts">
-const items = [
-  [{
-    label: 'Profile',
-    avatar: {
-      src: 'https://avatars.githubusercontent.com/u/739984?v=4'
-    }
-  }]
-]
-</script>
-
-<template>
-  <UDropdown :items="items" mode="hover" :popper="{ placement: 'bottom-start' }">
-    <UButton color="white" label="Options" trailing-icon="i-heroicons-chevron-down-20-solid" />
-  </UDropdown>
-</template>
diff --git a/docs/components/content/examples/DropdownExampleOffset.vue b/docs/components/content/examples/DropdownExampleOffset.vue
deleted file mode 100644
index 3aa90841..00000000
--- a/docs/components/content/examples/DropdownExampleOffset.vue
+++ /dev/null
@@ -1,16 +0,0 @@
-<script setup lang="ts">
-const items = [
-  [{
-    label: 'Profile',
-    avatar: {
-      src: 'https://avatars.githubusercontent.com/u/739984?v=4'
-    }
-  }]
-]
-</script>
-
-<template>
-  <UDropdown :items="items" :popper="{ offsetDistance: 0, placement: 'right-start' }">
-    <UButton color="white" label="Options" trailing-icon="i-heroicons-chevron-down-20-solid" />
-  </UDropdown>
-</template>
diff --git a/docs/components/content/examples/DropdownExampleOpen.vue b/docs/components/content/examples/DropdownExampleOpen.vue
deleted file mode 100644
index d5668f59..00000000
--- a/docs/components/content/examples/DropdownExampleOpen.vue
+++ /dev/null
@@ -1,22 +0,0 @@
-<script setup lang="ts">
-const items = [
-  [{
-    label: 'Profile',
-    avatar: {
-      src: 'https://avatars.githubusercontent.com/u/739984?v=4'
-    }
-  }]
-]
-
-const open = ref(true)
-
-defineShortcuts({
-  o: () => open.value = !open.value
-})
-</script>
-
-<template>
-  <UDropdown v-model:open="open" :items="items" :popper="{ placement: 'bottom-start' }">
-    <UButton color="white" label="Options" trailing-icon="i-heroicons-chevron-down-20-solid" />
-  </UDropdown>
-</template>
diff --git a/docs/components/content/examples/DropdownExamplePlacement.vue b/docs/components/content/examples/DropdownExamplePlacement.vue
deleted file mode 100644
index 894e48f6..00000000
--- a/docs/components/content/examples/DropdownExamplePlacement.vue
+++ /dev/null
@@ -1,16 +0,0 @@
-<script setup lang="ts">
-const items = [
-  [{
-    label: 'Profile',
-    avatar: {
-      src: 'https://avatars.githubusercontent.com/u/739984?v=4'
-    }
-  }]
-]
-</script>
-
-<template>
-  <UDropdown :items="items" :popper="{ placement: 'right-start' }">
-    <UButton color="white" label="Options" trailing-icon="i-heroicons-chevron-down-20-solid" />
-  </UDropdown>
-</template>
diff --git a/docs/components/content/examples/DropdownExampleSlot.vue b/docs/components/content/examples/DropdownExampleSlot.vue
deleted file mode 100644
index fa025f42..00000000
--- a/docs/components/content/examples/DropdownExampleSlot.vue
+++ /dev/null
@@ -1,47 +0,0 @@
-<script setup lang="ts">
-const items = [
-  [{
-    label: 'ben@example.com',
-    slot: 'account',
-    disabled: true
-  }], [{
-    label: 'Settings',
-    icon: 'i-heroicons-cog-8-tooth'
-  }], [{
-    label: 'Documentation',
-    icon: 'i-heroicons-book-open'
-  }, {
-    label: 'Changelog',
-    icon: 'i-heroicons-megaphone'
-  }, {
-    label: 'Status',
-    icon: 'i-heroicons-signal'
-  }], [{
-    label: 'Sign out',
-    icon: 'i-heroicons-arrow-left-on-rectangle'
-  }]
-]
-</script>
-
-<template>
-  <UDropdown :items="items" :ui="{ item: { disabled: 'cursor-text select-text' } }" :popper="{ placement: 'bottom-start' }">
-    <UAvatar src="https://avatars.githubusercontent.com/u/739984?v=4" />
-
-    <template #account="{ item }">
-      <div class="text-left">
-        <p>
-          Signed in as
-        </p>
-        <p class="truncate font-medium text-gray-900 dark:text-white">
-          {{ item.label }}
-        </p>
-      </div>
-    </template>
-
-    <template #item="{ item }">
-      <span class="truncate">{{ item.label }}</span>
-
-      <UIcon :name="item.icon" class="flex-shrink-0 h-4 w-4 text-gray-400 dark:text-gray-500 ms-auto" />
-    </template>
-  </UDropdown>
-</template>
diff --git a/docs/components/content/examples/FormExampleBasic.vue b/docs/components/content/examples/FormExampleBasic.vue
deleted file mode 100644
index 728a829d..00000000
--- a/docs/components/content/examples/FormExampleBasic.vue
+++ /dev/null
@@ -1,36 +0,0 @@
-<script setup lang="ts">
-import type { FormError, FormSubmitEvent } from '#ui/types'
-
-const state = reactive({
-  email: undefined,
-  password: undefined
-})
-
-const validate = (state: any): FormError[] => {
-  const errors = []
-  if (!state.email) errors.push({ path: 'email', message: 'Required' })
-  if (!state.password) errors.push({ path: 'password', message: 'Required' })
-  return errors
-}
-
-async function onSubmit (event: FormSubmitEvent<any>) {
-  // Do something with data
-  console.log(event.data)
-}
-</script>
-
-<template>
-  <UForm :validate="validate" :state="state" class="space-y-4" @submit="onSubmit">
-    <UFormGroup label="Email" name="email">
-      <UInput v-model="state.email" />
-    </UFormGroup>
-
-    <UFormGroup label="Password" name="password">
-      <UInput v-model="state.password" type="password" />
-    </UFormGroup>
-
-    <UButton type="submit">
-      Submit
-    </UButton>
-  </UForm>
-</template>
diff --git a/docs/components/content/examples/FormExampleElements.vue b/docs/components/content/examples/FormExampleElements.vue
deleted file mode 100644
index 26c8fd15..00000000
--- a/docs/components/content/examples/FormExampleElements.vue
+++ /dev/null
@@ -1,114 +0,0 @@
-<script setup lang="ts">
-import { z } from 'zod'
-import type { FormSubmitEvent } from '#ui/types'
-
-const options = [
-  { label: 'Option 1', value: 'option-1' },
-  { label: 'Option 2', value: 'option-2' },
-  { label: 'Option 3', value: 'option-3' }
-]
-
-const state = reactive({
-  input: undefined,
-  inputMenu: undefined,
-  textarea: undefined,
-  select: undefined,
-  selectMenu: undefined,
-  checkbox: undefined,
-  toggle: undefined,
-  radio: undefined,
-  radioGroup: undefined,
-  switch: undefined,
-  range: undefined
-})
-
-const schema = z.object({
-  input: z.string().min(10),
-  inputMenu: z.any().refine(option => option?.value === 'option-2', {
-    message: 'Select Option 2'
-  }),
-  textarea: z.string().min(10),
-  select: z.string().refine(value => value === 'option-2', {
-    message: 'Select Option 2'
-  }),
-  selectMenu: z.any().refine(option => option?.value === 'option-2', {
-    message: 'Select Option 2'
-  }),
-  toggle: z.boolean().refine(value => value === true, {
-    message: 'Toggle me'
-  }),
-  checkbox: z.boolean().refine(value => value === true, {
-    message: 'Check me'
-  }),
-  radio: z.string().refine(value => value === 'option-2', {
-    message: 'Select Option 2'
-  }),
-  radioGroup: z.string().refine(value => value === 'option-2', {
-    message: 'Select Option 2'
-  }),
-  range: z.number().max(20, { message: 'Must be less than 20' })
-})
-
-type Schema = z.infer<typeof schema>
-
-const form = ref()
-
-async function onSubmit (event: FormSubmitEvent<Schema>) {
-  // Do something with event.data
-  console.log(event.data)
-}
-</script>
-
-<template>
-  <UForm ref="form" :schema="schema" :state="state" class="space-y-4" @submit="onSubmit">
-    <UFormGroup name="input" label="Input">
-      <UInput v-model="state.input" />
-    </UFormGroup>
-
-    <UFormGroup name="inputMenu" label="Input Menu">
-      <UInputMenu v-model="state.inputMenu" :options="options" />
-    </UFormGroup>
-
-    <UFormGroup name="textarea" label="Textarea">
-      <UTextarea v-model="state.textarea" />
-    </UFormGroup>
-
-    <UFormGroup name="select" label="Select">
-      <USelect v-model="state.select" placeholder="Select..." :options="options" />
-    </UFormGroup>
-
-    <UFormGroup name="selectMenu" label="Select Menu">
-      <USelectMenu v-model="state.selectMenu" placeholder="Select..." :options="options" />
-    </UFormGroup>
-
-    <UFormGroup name="toggle" label="Toggle">
-      <UToggle v-model="state.toggle" />
-    </UFormGroup>
-
-    <UFormGroup name="checkbox" label="Checkbox">
-      <UCheckbox v-model="state.checkbox" label="Check me" />
-    </UFormGroup>
-
-    <UFormGroup name="radioGroup" label="Radio Group">
-      <URadioGroup v-model="state.radioGroup" :options="options" />
-    </UFormGroup>
-
-    <UFormGroup name="radio" label="Radio">
-      <URadio v-for="option in options" :key="option.value" v-model="state.radio" v-bind="option">
-        {{ option.label }}
-      </URadio>
-    </UFormGroup>
-
-    <UFormGroup name="range" label="Range">
-      <URange v-model="state.range" />
-    </UFormGroup>
-
-    <UButton type="submit">
-      Submit
-    </UButton>
-
-    <UButton variant="outline" class="ml-2" @click="form.clear()">
-      Clear
-    </UButton>
-  </UForm>
-</template>
diff --git a/docs/components/content/examples/FormExampleJoi.vue b/docs/components/content/examples/FormExampleJoi.vue
deleted file mode 100644
index 5867af4f..00000000
--- a/docs/components/content/examples/FormExampleJoi.vue
+++ /dev/null
@@ -1,37 +0,0 @@
-<script setup lang="ts">
-import Joi from 'joi'
-import type { FormSubmitEvent } from '#ui/types'
-
-const schema = Joi.object({
-  email: Joi.string().required(),
-  password: Joi.string()
-    .min(8)
-    .required()
-})
-
-const state = reactive({
-  email: undefined,
-  password: undefined
-})
-
-async function onSubmit (event: FormSubmitEvent<any>) {
-  // Do something with event.data
-  console.log(event.data)
-}
-</script>
-
-<template>
-  <UForm :schema="schema" :state="state" class="space-y-4" @submit="onSubmit">
-    <UFormGroup label="Email" name="email">
-      <UInput v-model="state.email" />
-    </UFormGroup>
-
-    <UFormGroup label="Password" name="password">
-      <UInput v-model="state.password" type="password" />
-    </UFormGroup>
-
-    <UButton type="submit">
-      Submit
-    </UButton>
-  </UForm>
-</template>
diff --git a/docs/components/content/examples/FormExampleOnError.vue b/docs/components/content/examples/FormExampleOnError.vue
deleted file mode 100644
index 11b33daa..00000000
--- a/docs/components/content/examples/FormExampleOnError.vue
+++ /dev/null
@@ -1,42 +0,0 @@
-<script setup lang="ts">
-import type { FormError, FormErrorEvent, FormSubmitEvent } from '#ui/types'
-
-const state = reactive({
-  email: undefined,
-  password: undefined
-})
-
-const validate = (state: any): FormError[] => {
-  const errors = []
-  if (!state.email) errors.push({ path: 'email', message: 'Required' })
-  if (!state.password) errors.push({ path: 'password', message: 'Required' })
-  return errors
-}
-
-async function onSubmit (event: FormSubmitEvent<any>) {
-  // Do something with data
-  console.log(event.data)
-}
-
-async function onError (event: FormErrorEvent) {
-  const element = document.getElementById(event.errors[0].id)
-  element?.focus()
-  element?.scrollIntoView({ behavior: 'smooth', block: 'center' })
-}
-</script>
-
-<template>
-  <UForm :validate="validate" :state="state" class="space-y-4" @submit="onSubmit" @error="onError">
-    <UFormGroup label="Email" name="email">
-      <UInput v-model="state.email" />
-    </UFormGroup>
-
-    <UFormGroup label="Password" name="password">
-      <UInput v-model="state.password" type="password" />
-    </UFormGroup>
-
-    <UButton type="submit">
-      Submit
-    </UButton>
-  </UForm>
-</template>
diff --git a/docs/components/content/examples/FormExampleValibot.vue b/docs/components/content/examples/FormExampleValibot.vue
deleted file mode 100644
index 2c8b189e..00000000
--- a/docs/components/content/examples/FormExampleValibot.vue
+++ /dev/null
@@ -1,37 +0,0 @@
-<script setup lang="ts">
-import { string, objectAsync, email, minLength, type Input } from 'valibot'
-import type { FormSubmitEvent } from '#ui/types'
-
-const schema = objectAsync({
-  email: string([email('Invalid email')]),
-  password: string([minLength(8, 'Must be at least 8 characters')])
-})
-
-type Schema = Input<typeof schema>
-
-const state = reactive({
-  email: '',
-  password: ''
-})
-
-async function onSubmit (event: FormSubmitEvent<Schema>) {
-  // Do something with event.data
-  console.log(event.data)
-}
-</script>
-
-<template>
-  <UForm :schema="schema" :state="state" class="space-y-4" @submit="onSubmit">
-    <UFormGroup label="Email" name="email">
-      <UInput v-model="state.email" />
-    </UFormGroup>
-
-    <UFormGroup label="Password" name="password">
-      <UInput v-model="state.password" type="password" />
-    </UFormGroup>
-
-    <UButton type="submit">
-      Submit
-    </UButton>
-  </UForm>
-</template>
diff --git a/docs/components/content/examples/FormExampleYup.vue b/docs/components/content/examples/FormExampleYup.vue
deleted file mode 100644
index 7f2f4257..00000000
--- a/docs/components/content/examples/FormExampleYup.vue
+++ /dev/null
@@ -1,39 +0,0 @@
-<script setup lang="ts">
-import { object, string, type InferType } from 'yup'
-import type { FormSubmitEvent } from '#ui/types'
-
-const schema = object({
-  email: string().email('Invalid email').required('Required'),
-  password: string()
-    .min(8, 'Must be at least 8 characters')
-    .required('Required')
-})
-
-type Schema = InferType<typeof schema>
-
-const state = reactive({
-  email: undefined,
-  password: undefined
-})
-
-async function onSubmit (event: FormSubmitEvent<Schema>) {
-  // Do something with event.data
-  console.log(event.data)
-}
-</script>
-
-<template>
-  <UForm :schema="schema" :state="state" class="space-y-4" @submit="onSubmit">
-    <UFormGroup label="Email" name="email">
-      <UInput v-model="state.email" />
-    </UFormGroup>
-
-    <UFormGroup label="Password" name="password">
-      <UInput v-model="state.password" type="password" />
-    </UFormGroup>
-
-    <UButton type="submit">
-      Submit
-    </UButton>
-  </UForm>
-</template>
diff --git a/docs/components/content/examples/FormExampleZod.vue b/docs/components/content/examples/FormExampleZod.vue
deleted file mode 100644
index 2c05b87b..00000000
--- a/docs/components/content/examples/FormExampleZod.vue
+++ /dev/null
@@ -1,37 +0,0 @@
-<script setup lang="ts">
-import { z } from 'zod'
-import type { FormSubmitEvent } from '#ui/types'
-
-const schema = z.object({
-  email: z.string().email('Invalid email'),
-  password: z.string().min(8, 'Must be at least 8 characters')
-})
-
-type Schema = z.output<typeof schema>
-
-const state = reactive({
-  email: undefined,
-  password: undefined
-})
-
-async function onSubmit (event: FormSubmitEvent<Schema>) {
-  // Do something with data
-  console.log(event.data)
-}
-</script>
-
-<template>
-  <UForm :schema="schema" :state="state" class="space-y-4" @submit="onSubmit">
-    <UFormGroup label="Email" name="email">
-      <UInput v-model="state.email" />
-    </UFormGroup>
-
-    <UFormGroup label="Password" name="password">
-      <UInput v-model="state.password" type="password" />
-    </UFormGroup>
-
-    <UButton type="submit">
-      Submit
-    </UButton>
-  </UForm>
-</template>
diff --git a/docs/components/content/examples/FormGroupEagerValidationExample.vue b/docs/components/content/examples/FormGroupEagerValidationExample.vue
deleted file mode 100644
index 726effce..00000000
--- a/docs/components/content/examples/FormGroupEagerValidationExample.vue
+++ /dev/null
@@ -1,19 +0,0 @@
-<template>
-  <UForm :schema="schema" :state="state" class="space-y-4">
-    <UFormGroup label="Username" name="username" eager-validation>
-      <UInput v-model="state.username" placeholder="Choose Username" />
-    </UFormGroup>
-  </UForm>
-</template>
-
-<script setup lang="ts">
-import { z } from 'zod'
-
-const schema = z.object({
-  username: z.string().min(10, 'Must be at least 10 characters')
-})
-
-const state = reactive({
-  username: undefined
-})
-</script>
diff --git a/docs/components/content/examples/FormGroupErrorExample.vue b/docs/components/content/examples/FormGroupErrorExample.vue
deleted file mode 100644
index fd3b9bf6..00000000
--- a/docs/components/content/examples/FormGroupErrorExample.vue
+++ /dev/null
@@ -1,9 +0,0 @@
-<template>
-  <UFormGroup v-slot="{ error }" label="Email" :error="!email && 'You must enter an email'" help="This is a nice email!">
-    <UInput v-model="email" type="email" placeholder="Enter email" :trailing-icon="error ? 'i-heroicons-exclamation-triangle-20-solid' : undefined" />
-  </UFormGroup>
-</template>
-
-<script setup lang="ts">
-const email = ref('')
-</script>
diff --git a/docs/components/content/examples/FormGroupErrorSlotExample.vue b/docs/components/content/examples/FormGroupErrorSlotExample.vue
deleted file mode 100644
index 7ce9b38a..00000000
--- a/docs/components/content/examples/FormGroupErrorSlotExample.vue
+++ /dev/null
@@ -1,17 +0,0 @@
-<template>
-  <UFormGroup label="Email" :error="!email && 'You must enter an email'" help="This is a nice email!">
-    <template #default="{ error }">
-      <UInput v-model="email" type="email" placeholder="Enter email" :trailing-icon="error ? 'i-heroicons-exclamation-triangle-20-solid' : undefined" />
-    </template>
-
-    <template #error="{ error }">
-      <span :class="[error ? 'text-red-500 dark:text-red-400' : 'text-primary-500 dark:text-primary-400']">
-        {{ error ? error : 'Your email is valid' }}
-      </span>
-    </template>
-  </UFormGroup>
-</template>
-
-<script setup lang="ts">
-const email = ref('')
-</script>
diff --git a/docs/components/content/examples/HorizontalNavigationExample.vue b/docs/components/content/examples/HorizontalNavigationExample.vue
deleted file mode 100644
index c7d464fd..00000000
--- a/docs/components/content/examples/HorizontalNavigationExample.vue
+++ /dev/null
@@ -1,27 +0,0 @@
-<script setup lang="ts">
-const route = useRoute()
-
-const links = [{
-  label: 'Profile',
-  avatar: {
-    src: 'https://avatars.githubusercontent.com/u/739984?v=4'
-  },
-  badge: 100
-}, {
-  label: 'Installation',
-  icon: 'i-heroicons-home',
-  to: '/getting-started/installation'
-}, {
-  label: 'Horizontal Navigation',
-  icon: 'i-heroicons-chart-bar',
-  to: `${route.path.startsWith('/dev') ? '/dev' : ''}/components/horizontal-navigation`
-}, {
-  label: 'Command Palette',
-  icon: 'i-heroicons-command-line',
-  to: '/components/command-palette'
-}]
-</script>
-
-<template>
-  <UHorizontalNavigation :links="links" class="border-b border-gray-200 dark:border-gray-800" />
-</template>
diff --git a/docs/components/content/examples/HorizontalNavigationExampleDefaultSlot.vue b/docs/components/content/examples/HorizontalNavigationExampleDefaultSlot.vue
deleted file mode 100644
index 90c9aad7..00000000
--- a/docs/components/content/examples/HorizontalNavigationExampleDefaultSlot.vue
+++ /dev/null
@@ -1,22 +0,0 @@
-<script setup lang="ts">
-const route = useRoute()
-
-const links = [{
-  label: 'Horizontal Navigation',
-  to: `${route.path.startsWith('/dev') ? '/dev' : ''}/components/horizontal-navigation`
-}, {
-  label: 'Command Palette',
-  to: '/components/command-palette'
-}, {
-  label: 'Table',
-  to: '/components/table'
-}]
-</script>
-
-<template>
-  <UHorizontalNavigation :links="links">
-    <template #default="{ link }">
-      <span class="group-hover:text-primary relative">{{ link.label }}</span>
-    </template>
-  </UHorizontalNavigation>
-</template>
diff --git a/docs/components/content/examples/HorizontalNavigationExampleSections.vue b/docs/components/content/examples/HorizontalNavigationExampleSections.vue
deleted file mode 100644
index f0954336..00000000
--- a/docs/components/content/examples/HorizontalNavigationExampleSections.vue
+++ /dev/null
@@ -1,29 +0,0 @@
-<script setup lang="ts">
-const route = useRoute()
-
-const links = [
-  [{
-    label: 'Installation',
-    icon: 'i-heroicons-home',
-    to: '/getting-started/installation'
-  }, {
-    label: 'Horizontal Navigation',
-    icon: 'i-heroicons-chart-bar',
-    to: `${route.path.startsWith('/dev') ? '/dev' : ''}/components/horizontal-navigation`
-  }, {
-    label: 'Command Palette',
-    icon: 'i-heroicons-command-line',
-    to: '/components/command-palette'
-  }], [{
-    label: 'Examples',
-    icon: 'i-heroicons-light-bulb'
-  }, {
-    label: 'Help',
-    icon: 'i-heroicons-question-mark-circle'
-  }]
-]
-</script>
-
-<template>
-  <UHorizontalNavigation :links="links" class="border-b border-gray-200 dark:border-gray-800" />
-</template>
diff --git a/docs/components/content/examples/InputExample.vue b/docs/components/content/examples/InputExample.vue
deleted file mode 100644
index a42e4875..00000000
--- a/docs/components/content/examples/InputExample.vue
+++ /dev/null
@@ -1,7 +0,0 @@
-<script setup lang="ts">
-const value = ref('')
-</script>
-
-<template>
-  <UInput v-model="value" />
-</template>
diff --git a/docs/components/content/examples/InputExampleClearable.vue b/docs/components/content/examples/InputExampleClearable.vue
deleted file mode 100644
index 077f4afe..00000000
--- a/docs/components/content/examples/InputExampleClearable.vue
+++ /dev/null
@@ -1,25 +0,0 @@
-<template>
-  <UInput
-    v-model="q"
-    name="q"
-    placeholder="Search..."
-    icon="i-heroicons-magnifying-glass-20-solid"
-    autocomplete="off"
-    :ui="{ icon: { trailing: { pointer: '' } } }"
-  >
-    <template #trailing>
-      <UButton
-        v-show="q !== ''"
-        color="gray"
-        variant="link"
-        icon="i-heroicons-x-mark-20-solid"
-        :padded="false"
-        @click="q = ''"
-      />
-    </template>
-  </UInput>
-</template>
-
-<script setup lang="ts">
-const q = ref('')
-</script>
diff --git a/docs/components/content/examples/InputMenuExampleBasic.vue b/docs/components/content/examples/InputMenuExampleBasic.vue
deleted file mode 100644
index 05abc93b..00000000
--- a/docs/components/content/examples/InputMenuExampleBasic.vue
+++ /dev/null
@@ -1,9 +0,0 @@
-<script setup lang="ts">
-const people = ['Wade Cooper', 'Arlene Mccoy', 'Devon Webb', 'Tom Cook', 'Tanya Fox', 'Hellen Schmidt', 'Caroline Schultz', 'Mason Heaney', 'Claudie Smitham', 'Emil Schaefer']
-
-const selected = ref(people[0])
-</script>
-
-<template>
-  <UInputMenu v-model="selected" :options="people" />
-</template>
diff --git a/docs/components/content/examples/InputMenuExampleEmptySlot.vue b/docs/components/content/examples/InputMenuExampleEmptySlot.vue
deleted file mode 100644
index 8cc1c57e..00000000
--- a/docs/components/content/examples/InputMenuExampleEmptySlot.vue
+++ /dev/null
@@ -1,13 +0,0 @@
-<script setup lang="ts">
-const people = []
-
-const selected = ref()
-</script>
-
-<template>
-  <UInputMenu v-model="selected" :options="people">
-    <template #empty>
-      No people
-    </template>
-  </UInputMenu>
-</template>
diff --git a/docs/components/content/examples/InputMenuExampleObjects.vue b/docs/components/content/examples/InputMenuExampleObjects.vue
deleted file mode 100644
index 2b14c132..00000000
--- a/docs/components/content/examples/InputMenuExampleObjects.vue
+++ /dev/null
@@ -1,38 +0,0 @@
-<script setup lang="ts">
-import type { Avatar } from '#ui/types'
-
-const people = [{
-  id: 'benjamincanac',
-  label: 'benjamincanac',
-  href: 'https://github.com/benjamincanac',
-  target: '_blank',
-  avatar: { src: 'https://avatars.githubusercontent.com/u/739984?v=4' }
-}, {
-  id: 'Atinux',
-  label: 'Atinux',
-  href: 'https://github.com/Atinux',
-  target: '_blank',
-  avatar: { src: 'https://avatars.githubusercontent.com/u/904724?v=4' }
-}, {
-  id: 'smarroufin',
-  label: 'smarroufin',
-  href: 'https://github.com/smarroufin',
-  target: '_blank',
-  avatar: { src: 'https://avatars.githubusercontent.com/u/7547335?v=4' }
-}, {
-  id: 'nobody',
-  label: 'Nobody',
-  icon: 'i-heroicons-user-circle'
-}]
-
-const selected = ref(people[0])
-</script>
-
-<template>
-  <UInputMenu v-model="selected" :options="people">
-    <template #leading>
-      <UIcon v-if="selected.icon" :name="(selected.icon as string)" class="w-5 h-5" />
-      <UAvatar v-else-if="selected.avatar" v-bind="(selected.avatar as Avatar)" size="2xs" />
-    </template>
-  </UInputMenu>
-</template>
diff --git a/docs/components/content/examples/InputMenuExampleObjectsValueAttribute.vue b/docs/components/content/examples/InputMenuExampleObjectsValueAttribute.vue
deleted file mode 100644
index c8dca6ac..00000000
--- a/docs/components/content/examples/InputMenuExampleObjectsValueAttribute.vue
+++ /dev/null
@@ -1,26 +0,0 @@
-<script setup lang="ts">
-const people = [{
-  id: 1,
-  name: 'Wade Cooper'
-}, {
-  id: 2,
-  name: 'Arlene Mccoy'
-}, {
-  id: 3,
-  name: 'Devon Webb'
-}, {
-  id: 4,
-  name: 'Tom Cook'
-}]
-
-const selected = ref(people[0].id)
-</script>
-
-<template>
-  <UInputMenu
-    v-model="selected"
-    :options="people"
-    value-attribute="id"
-    option-attribute="name"
-  />
-</template>
diff --git a/docs/components/content/examples/InputMenuExampleOptionEmptySlot.vue b/docs/components/content/examples/InputMenuExampleOptionEmptySlot.vue
deleted file mode 100644
index d86683bd..00000000
--- a/docs/components/content/examples/InputMenuExampleOptionEmptySlot.vue
+++ /dev/null
@@ -1,13 +0,0 @@
-<script setup lang="ts">
-const people = ['Wade Cooper', 'Arlene Mccoy', 'Devon Webb', 'Tom Cook', 'Tanya Fox', 'Hellen Schmidt', 'Caroline Schultz', 'Mason Heaney', 'Claudie Smitham', 'Emil Schaefer']
-
-const selected = ref(people[0])
-</script>
-
-<template>
-  <UInputMenu v-model="selected" :options="people" searchable>
-    <template #option-empty="{ query }">
-      <q>{{ query }}</q> not found
-    </template>
-  </UInputMenu>
-</template>
diff --git a/docs/components/content/examples/InputMenuExampleOptionSlot.vue b/docs/components/content/examples/InputMenuExampleOptionSlot.vue
deleted file mode 100644
index b9df5520..00000000
--- a/docs/components/content/examples/InputMenuExampleOptionSlot.vue
+++ /dev/null
@@ -1,25 +0,0 @@
-<script setup lang="ts">
-const people = [
-  { name: 'Wade Cooper', online: true },
-  { name: 'Arlene Mccoy', online: false },
-  { name: 'Devon Webb', online: false },
-  { name: 'Tom Cook', online: true },
-  { name: 'Tanya Fox', online: false },
-  { name: 'Hellen Schmidt', online: true },
-  { name: 'Caroline Schultz', online: true },
-  { name: 'Mason Heaney', online: false },
-  { name: 'Claudie Smitham', online: true },
-  { name: 'Emil Schaefer', online: false }
-]
-
-const selected = ref(people[3])
-</script>
-
-<template>
-  <UInputMenu v-model="selected" :options="people" option-attribute="name">
-    <template #option="{ option: person }">
-      <span :class="[person.online ? 'bg-green-400' : 'bg-gray-200', 'inline-block h-2 w-2 flex-shrink-0 rounded-full']" aria-hidden="true" />
-      <span class="truncate">{{ person.name }}</span>
-    </template>
-  </UInputMenu>
-</template>
diff --git a/docs/components/content/examples/InputMenuExamplePopperArrow.vue b/docs/components/content/examples/InputMenuExamplePopperArrow.vue
deleted file mode 100644
index 0b645a77..00000000
--- a/docs/components/content/examples/InputMenuExamplePopperArrow.vue
+++ /dev/null
@@ -1,9 +0,0 @@
-<script setup lang="ts">
-const people = ['Wade Cooper', 'Arlene Mccoy', 'Devon Webb', 'Tom Cook', 'Tanya Fox', 'Hellen Schmidt', 'Caroline Schultz', 'Mason Heaney', 'Claudie Smitham', 'Emil Schaefer']
-
-const selected = ref(people[0])
-</script>
-
-<template>
-  <UInputMenu v-model="selected" :options="people" :popper="{ arrow: true }" />
-</template>
diff --git a/docs/components/content/examples/InputMenuExamplePopperOffset.vue b/docs/components/content/examples/InputMenuExamplePopperOffset.vue
deleted file mode 100644
index 9274d078..00000000
--- a/docs/components/content/examples/InputMenuExamplePopperOffset.vue
+++ /dev/null
@@ -1,9 +0,0 @@
-<script setup lang="ts">
-const people = ['Wade Cooper', 'Arlene Mccoy', 'Devon Webb', 'Tom Cook', 'Tanya Fox', 'Hellen Schmidt', 'Caroline Schultz', 'Mason Heaney', 'Claudie Smitham', 'Emil Schaefer']
-
-const selected = ref(people[0])
-</script>
-
-<template>
-  <UInputMenu v-model="selected" :options="people" :popper="{ offsetDistance: 0 }" />
-</template>
diff --git a/docs/components/content/examples/InputMenuExamplePopperPlacement.vue b/docs/components/content/examples/InputMenuExamplePopperPlacement.vue
deleted file mode 100644
index cb264281..00000000
--- a/docs/components/content/examples/InputMenuExamplePopperPlacement.vue
+++ /dev/null
@@ -1,9 +0,0 @@
-<script setup lang="ts">
-const people = ['Wade Cooper', 'Arlene Mccoy', 'Devon Webb', 'Tom Cook', 'Tanya Fox', 'Hellen Schmidt', 'Caroline Schultz', 'Mason Heaney', 'Claudie Smitham', 'Emil Schaefer']
-
-const selected = ref(people[0])
-</script>
-
-<template>
-  <UInputMenu v-model="selected" :options="people" :popper="{ placement: 'right-start' }" />
-</template>
diff --git a/docs/components/content/examples/InputMenuExampleSearchAsync.vue b/docs/components/content/examples/InputMenuExampleSearchAsync.vue
deleted file mode 100644
index 65dfde30..00000000
--- a/docs/components/content/examples/InputMenuExampleSearchAsync.vue
+++ /dev/null
@@ -1,26 +0,0 @@
-<script setup lang="ts">
-const loading = ref(false)
-const selected = ref()
-
-async function search (q: string) {
-  loading.value = true
-
-  const users = await $fetch<any[]>('https://jsonplaceholder.typicode.com/users', { params: { q } })
-
-  loading.value = false
-
-  return users
-}
-</script>
-
-<template>
-  <UInputMenu
-    v-model="selected"
-    :search="search"
-    :loading="loading"
-    placeholder="Search for a user..."
-    option-attribute="name"
-    trailing
-    by="id"
-  />
-</template>
diff --git a/docs/components/content/examples/InputMenuExampleSearchAttributes.vue b/docs/components/content/examples/InputMenuExampleSearchAttributes.vue
deleted file mode 100644
index c7e861a9..00000000
--- a/docs/components/content/examples/InputMenuExampleSearchAttributes.vue
+++ /dev/null
@@ -1,28 +0,0 @@
-<script setup lang="ts">
-const options = [
-  { id: 1, name: 'Wade Cooper', colors: ['red', 'yellow'] },
-  { id: 2, name: 'Arlene Mccoy', colors: ['blue', 'yellow'] },
-  { id: 3, name: 'Devon Webb', colors: ['green', 'blue'] },
-  { id: 4, name: 'Tom Cook', colors: ['blue', 'red'] },
-  { id: 5, name: 'Tanya Fox', colors: ['green', 'red'] },
-  { id: 5, name: 'Hellen Schmidt', colors: ['green', 'yellow'] }
-]
-
-const selected = ref(options[1])
-</script>
-
-<template>
-  <UInputMenu
-    v-model="selected"
-    :options="options"
-    placeholder="Select a person"
-    by="id"
-    option-attribute="name"
-    :search-attributes="['name', 'colors']"
-  >
-    <template #option="{ option: person }">
-      <span v-for="color in person.colors" :key="color.id" class="h-2 w-2 rounded-full" :class="`bg-${color}-500 dark:bg-${color}-400`" />
-      <span class="truncate">{{ person.name }}</span>
-    </template>
-  </UInputMenu>
-</template>
diff --git a/docs/components/content/examples/InputMenuExampleSearchQuery.vue b/docs/components/content/examples/InputMenuExampleSearchQuery.vue
deleted file mode 100644
index 783c0e92..00000000
--- a/docs/components/content/examples/InputMenuExampleSearchQuery.vue
+++ /dev/null
@@ -1,15 +0,0 @@
-<script setup lang="ts">
-const people = ['Wade Cooper', 'Arlene Mccoy', 'Devon Webb', 'Tom Cook', 'Tanya Fox', 'Hellen Schmidt', 'Caroline Schultz', 'Mason Heaney', 'Claudie Smitham', 'Emil Schaefer']
-
-const selected = ref()
-const query = ref('Wade')
-</script>
-
-<template>
-  <UInputMenu
-    v-model="selected"
-    v-model:query="query"
-    :options="people"
-    placeholder="Select a person"
-  />
-</template>
diff --git a/docs/components/content/examples/KbdExample.vue b/docs/components/content/examples/KbdExample.vue
deleted file mode 100644
index d8c5cbd6..00000000
--- a/docs/components/content/examples/KbdExample.vue
+++ /dev/null
@@ -1,10 +0,0 @@
-<script setup lang="ts">
-const { metaSymbol } = useShortcuts()
-</script>
-
-<template>
-  <div class="flex items-center gap-0.5">
-    <UKbd>{{ metaSymbol }}</UKbd>
-    <UKbd>K</UKbd>
-  </div>
-</template>
diff --git a/docs/components/content/examples/MeterGroupExampleSlots.vue b/docs/components/content/examples/MeterGroupExampleSlots.vue
deleted file mode 100644
index 2ac75482..00000000
--- a/docs/components/content/examples/MeterGroupExampleSlots.vue
+++ /dev/null
@@ -1,17 +0,0 @@
-<template>
-  <UMeterGroup :max="128">
-    <template #indicator>
-      <div class="flex gap-1.5 justify-between text-sm">
-        <p>86GB used</p>
-        <p class="text-gray-500 dark:text-gray-400">
-          42GB remaining
-        </p>
-      </div>
-    </template>
-
-    <UMeter :value="24" color="gray" label="System" icon="i-heroicons-cog-6-tooth" />
-    <UMeter :value="8" color="red" label="Apps" icon="i-heroicons-window" />
-    <UMeter :value="12" color="yellow" label="Documents" icon="i-heroicons-document" />
-    <UMeter :value="42" color="green" label="Multimedia" icon="i-heroicons-film" />
-  </UMeterGroup>
-</template>
diff --git a/docs/components/content/examples/MeterSlotIndicatorExample.vue b/docs/components/content/examples/MeterSlotIndicatorExample.vue
deleted file mode 100644
index 75b92d84..00000000
--- a/docs/components/content/examples/MeterSlotIndicatorExample.vue
+++ /dev/null
@@ -1,15 +0,0 @@
-<script setup lang="ts">
-const used = ref(84.2)
-
-const total = 238.42
-</script>
-
-<template>
-  <UMeter :value="used" :max="total">
-    <template #indicator="{ percent }">
-      <div class="text-sm text-right">
-        {{ used }}GB used ({{ Math.round(percent) }}%)
-      </div>
-    </template>
-  </UMeter>
-</template>
diff --git a/docs/components/content/examples/MeterSlotLabelExample.vue b/docs/components/content/examples/MeterSlotLabelExample.vue
deleted file mode 100644
index 2d946e7a..00000000
--- a/docs/components/content/examples/MeterSlotLabelExample.vue
+++ /dev/null
@@ -1,15 +0,0 @@
-<script setup lang="ts">
-const used = ref(84.2)
-
-const total = 238.42
-</script>
-
-<template>
-  <UMeter :value="used" :max="total">
-    <template #label="{ percent }">
-      <p class="text-sm">
-        You are using {{ Math.round(used) }}GB ({{ Math.round(100 - percent) }}%) of space
-      </p>
-    </template>
-  </UMeter>
-</template>
diff --git a/docs/components/content/examples/ModalExampleBasic.vue b/docs/components/content/examples/ModalExampleBasic.vue
deleted file mode 100644
index 7bee2355..00000000
--- a/docs/components/content/examples/ModalExampleBasic.vue
+++ /dev/null
@@ -1,15 +0,0 @@
-<script setup lang="ts">
-const isOpen = ref(false)
-</script>
-
-<template>
-  <div>
-    <UButton label="Open" @click="isOpen = true" />
-
-    <UModal v-model="isOpen">
-      <div class="p-4">
-        <Placeholder class="h-48" />
-      </div>
-    </UModal>
-  </div>
-</template>
diff --git a/docs/components/content/examples/ModalExampleCard.vue b/docs/components/content/examples/ModalExampleCard.vue
deleted file mode 100644
index faf6fab5..00000000
--- a/docs/components/content/examples/ModalExampleCard.vue
+++ /dev/null
@@ -1,23 +0,0 @@
-<script setup lang="ts">
-const isOpen = ref(false)
-</script>
-
-<template>
-  <div>
-    <UButton label="Open" @click="isOpen = true" />
-
-    <UModal v-model="isOpen">
-      <UCard :ui="{ ring: '', divide: 'divide-y divide-gray-100 dark:divide-gray-800' }">
-        <template #header>
-          <Placeholder class="h-8" />
-        </template>
-
-        <Placeholder class="h-32" />
-
-        <template #footer>
-          <Placeholder class="h-8" />
-        </template>
-      </UCard>
-    </UModal>
-  </div>
-</template>
diff --git a/docs/components/content/examples/ModalExampleComponent.vue b/docs/components/content/examples/ModalExampleComponent.vue
deleted file mode 100644
index 6b3dc331..00000000
--- a/docs/components/content/examples/ModalExampleComponent.vue
+++ /dev/null
@@ -1,17 +0,0 @@
-<script lang="ts" setup>
-defineProps({
-  count: {
-    type: Number,
-    default: 0
-  }
-})
-</script>
-
-<template>
-  <UModal>
-    <UCard>
-      <p>This modal was opened programmatically !</p>
-      <p>Count: {{ count }}</p>
-    </UCard>
-  </UModal>
-</template>
diff --git a/docs/components/content/examples/ModalExampleComposable.vue b/docs/components/content/examples/ModalExampleComposable.vue
deleted file mode 100644
index 255c7fc6..00000000
--- a/docs/components/content/examples/ModalExampleComposable.vue
+++ /dev/null
@@ -1,17 +0,0 @@
-<script setup lang="ts">
-import { ModalExampleComponent } from '#components'
-
-const modal = useModal()
-const count = ref(0)
-
-function openModal () {
-  count.value += 1
-  modal.open(ModalExampleComponent, {
-    count: count.value
-  })
-}
-</script>
-
-<template>
-  <UButton label="Reveal modal" @click="openModal" />
-</template>
diff --git a/docs/components/content/examples/ModalExampleDisableOverlay.vue b/docs/components/content/examples/ModalExampleDisableOverlay.vue
deleted file mode 100644
index 6b1bd4d1..00000000
--- a/docs/components/content/examples/ModalExampleDisableOverlay.vue
+++ /dev/null
@@ -1,15 +0,0 @@
-<script setup lang="ts">
-const isOpen = ref(false)
-</script>
-
-<template>
-  <div>
-    <UButton label="Open" @click="isOpen = true" />
-
-    <UModal v-model="isOpen" :overlay="false">
-      <div class="p-4">
-        <Placeholder class="h-48" />
-      </div>
-    </UModal>
-  </div>
-</template>
diff --git a/docs/components/content/examples/ModalExampleDisableTransition.vue b/docs/components/content/examples/ModalExampleDisableTransition.vue
deleted file mode 100644
index 96989399..00000000
--- a/docs/components/content/examples/ModalExampleDisableTransition.vue
+++ /dev/null
@@ -1,15 +0,0 @@
-<script setup lang="ts">
-const isOpen = ref(false)
-</script>
-
-<template>
-  <div>
-    <UButton label="Open" @click="isOpen = true" />
-
-    <UModal v-model="isOpen" :transition="false">
-      <div class="p-4">
-        <Placeholder class="h-48" />
-      </div>
-    </UModal>
-  </div>
-</template>
diff --git a/docs/components/content/examples/ModalExampleFullscreen.vue b/docs/components/content/examples/ModalExampleFullscreen.vue
deleted file mode 100644
index acdbcf55..00000000
--- a/docs/components/content/examples/ModalExampleFullscreen.vue
+++ /dev/null
@@ -1,33 +0,0 @@
-<script setup lang="ts">
-const isOpen = ref(false)
-</script>
-
-<template>
-  <div>
-    <UButton label="Open" @click="isOpen = true" />
-
-    <UModal v-model="isOpen" fullscreen>
-      <UCard
-        :ui="{
-          base: 'h-full flex flex-col',
-          rounded: '',
-          divide: 'divide-y divide-gray-100 dark:divide-gray-800',
-          body: {
-            base: 'grow'
-          }
-        }"
-      >
-        <template #header>
-          <div class="flex items-center justify-between">
-            <h3 class="text-base font-semibold leading-6 text-gray-900 dark:text-white">
-              Modal
-            </h3>
-            <UButton color="gray" variant="ghost" icon="i-heroicons-x-mark-20-solid" class="-my-1" @click="isOpen = false" />
-          </div>
-        </template>
-
-        <Placeholder class="h-full" />
-      </UCard>
-    </UModal>
-  </div>
-</template>
diff --git a/docs/components/content/examples/ModalExamplePreventClose.vue b/docs/components/content/examples/ModalExamplePreventClose.vue
deleted file mode 100644
index 89062cd8..00000000
--- a/docs/components/content/examples/ModalExamplePreventClose.vue
+++ /dev/null
@@ -1,24 +0,0 @@
-<script setup lang="ts">
-const isOpen = ref(false)
-</script>
-
-<template>
-  <div>
-    <UButton label="Open" @click="isOpen = true" />
-
-    <UModal v-model="isOpen" prevent-close>
-      <UCard :ui="{ ring: '', divide: 'divide-y divide-gray-100 dark:divide-gray-800' }">
-        <template #header>
-          <div class="flex items-center justify-between">
-            <h3 class="text-base font-semibold leading-6 text-gray-900 dark:text-white">
-              Modal
-            </h3>
-            <UButton color="gray" variant="ghost" icon="i-heroicons-x-mark-20-solid" class="-my-1" @click="isOpen = false" />
-          </div>
-        </template>
-
-        <Placeholder class="h-32" />
-      </UCard>
-    </UModal>
-  </div>
-</template>
diff --git a/docs/components/content/examples/NotificationExampleActions.vue b/docs/components/content/examples/NotificationExampleActions.vue
deleted file mode 100644
index d7ac9910..00000000
--- a/docs/components/content/examples/NotificationExampleActions.vue
+++ /dev/null
@@ -1,15 +0,0 @@
-<script setup lang="ts">
-const toast = useToast()
-
-const actions = ref([{
-  label: 'Action 1',
-  click: () => alert('Action 1 clicked!')
-}, {
-  label: 'Action 2',
-  click: () => alert('Action 2 clicked!')
-}])
-</script>
-
-<template>
-  <UButton label="Show toast" @click="toast.add({ title: 'With actions', actions })" />
-</template>
diff --git a/docs/components/content/examples/NotificationExampleBasic.vue b/docs/components/content/examples/NotificationExampleBasic.vue
deleted file mode 100644
index cad5f2b5..00000000
--- a/docs/components/content/examples/NotificationExampleBasic.vue
+++ /dev/null
@@ -1,7 +0,0 @@
-<script setup lang="ts">
-const toast = useToast()
-</script>
-
-<template>
-  <UButton label="Show toast" @click="toast.add({ title: 'Hello world!' })" />
-</template>
diff --git a/docs/components/content/examples/NotificationExampleCallback.vue b/docs/components/content/examples/NotificationExampleCallback.vue
deleted file mode 100644
index 325d95da..00000000
--- a/docs/components/content/examples/NotificationExampleCallback.vue
+++ /dev/null
@@ -1,11 +0,0 @@
-<script setup lang="ts">
-const toast = useToast()
-
-function onCallback () {
-  alert('Notification expired!')
-}
-</script>
-
-<template>
-  <UButton label="Show toast" @click="toast.add({ title: 'Expires soon...', timeout: 1000, callback: onCallback })" />
-</template>
diff --git a/docs/components/content/examples/NotificationExampleClick.vue b/docs/components/content/examples/NotificationExampleClick.vue
deleted file mode 100644
index a272e0c6..00000000
--- a/docs/components/content/examples/NotificationExampleClick.vue
+++ /dev/null
@@ -1,11 +0,0 @@
-<script setup lang="ts">
-const toast = useToast()
-
-function onClick () {
-  alert('Clicked!')
-}
-</script>
-
-<template>
-  <UButton label="Show toast" @click="toast.add({ title: 'Click me', click: onClick })" />
-</template>
diff --git a/docs/components/content/examples/NotificationExampleHtml.vue b/docs/components/content/examples/NotificationExampleHtml.vue
deleted file mode 100644
index b14fd537..00000000
--- a/docs/components/content/examples/NotificationExampleHtml.vue
+++ /dev/null
@@ -1,7 +0,0 @@
-<script setup lang="ts">
-const toast = useToast()
-</script>
-
-<template>
-  <UButton label="Show toast" @click="toast.add({ title: 'This is an <u>underlined</u> and <b>bold</b> notification.' })" />
-</template>
diff --git a/docs/components/content/examples/PaginationExampleBasic.vue b/docs/components/content/examples/PaginationExampleBasic.vue
deleted file mode 100644
index e5c34596..00000000
--- a/docs/components/content/examples/PaginationExampleBasic.vue
+++ /dev/null
@@ -1,8 +0,0 @@
-<script setup lang="ts">
-const page = ref(1)
-const items = ref(Array(55))
-</script>
-
-<template>
-  <UPagination v-model="page" :page-count="5" :total="items.length" />
-</template>
diff --git a/docs/components/content/examples/PaginationExampleFirstLastSlots.vue b/docs/components/content/examples/PaginationExampleFirstLastSlots.vue
deleted file mode 100644
index 95841e15..00000000
--- a/docs/components/content/examples/PaginationExampleFirstLastSlots.vue
+++ /dev/null
@@ -1,20 +0,0 @@
-<script setup lang="ts">
-const page = ref(1)
-const items = ref(Array(55))
-</script>
-
-<template>
-  <UPagination v-model="page" :total="items.length" :ui="{ rounded: 'first-of-type:rounded-s-md last-of-type:rounded-e-md' }">
-    <template #first="{ onClick }">
-      <UTooltip text="First page">
-        <UButton icon="i-heroicons-arrow-uturn-left" color="primary" :ui="{ rounded: 'rounded-full' }" class="rtl:[&_span:first-child]:rotate-180 me-2" @click="onClick" />
-      </UTooltip>
-    </template>
-
-    <template #last="{ onClick }">
-      <UTooltip text="Last page">
-        <UButton icon="i-heroicons-arrow-uturn-right-20-solid" color="primary" :ui="{ rounded: 'rounded-full' }" class="rtl:[&_span:last-child]:rotate-180 ms-2" @click="onClick" />
-      </UTooltip>
-    </template>
-  </UPagination>
-</template>
diff --git a/docs/components/content/examples/PaginationExamplePrevNextSlots.vue b/docs/components/content/examples/PaginationExamplePrevNextSlots.vue
deleted file mode 100644
index 7a1a2fed..00000000
--- a/docs/components/content/examples/PaginationExamplePrevNextSlots.vue
+++ /dev/null
@@ -1,20 +0,0 @@
-<script setup lang="ts">
-const page = ref(1)
-const items = ref(Array(55))
-</script>
-
-<template>
-  <UPagination v-model="page" :total="items.length" :ui="{ rounded: 'first-of-type:rounded-s-md last-of-type:rounded-e-md' }">
-    <template #prev="{ onClick }">
-      <UTooltip text="Previous page">
-        <UButton icon="i-heroicons-arrow-small-left-20-solid" color="primary" :ui="{ rounded: 'rounded-full' }" class="rtl:[&_span:first-child]:rotate-180 me-2" @click="onClick" />
-      </UTooltip>
-    </template>
-
-    <template #next="{ onClick }">
-      <UTooltip text="Next page">
-        <UButton icon="i-heroicons-arrow-small-right-20-solid" color="primary" :ui="{ rounded: 'rounded-full' }" class="rtl:[&_span:last-child]:rotate-180 ms-2" @click="onClick" />
-      </UTooltip>
-    </template>
-  </UPagination>
-</template>
diff --git a/docs/components/content/examples/PopoverExample.vue b/docs/components/content/examples/PopoverExample.vue
deleted file mode 100644
index 6d3c3f45..00000000
--- a/docs/components/content/examples/PopoverExample.vue
+++ /dev/null
@@ -1,11 +0,0 @@
-<template>
-  <UPopover>
-    <UButton color="white" label="Open" trailing-icon="i-heroicons-chevron-down-20-solid" />
-
-    <template #panel>
-      <div class="p-4">
-        <Placeholder class="h-20 w-48" />
-      </div>
-    </template>
-  </UPopover>
-</template>
diff --git a/docs/components/content/examples/PopoverExampleArrow.vue b/docs/components/content/examples/PopoverExampleArrow.vue
deleted file mode 100644
index a7e22773..00000000
--- a/docs/components/content/examples/PopoverExampleArrow.vue
+++ /dev/null
@@ -1,11 +0,0 @@
-<template>
-  <UPopover :popper="{ arrow: true }">
-    <UButton color="white" label="Open" trailing-icon="i-heroicons-chevron-down-20-solid" />
-
-    <template #panel>
-      <div class="p-4">
-        <Placeholder class="h-20 w-48" />
-      </div>
-    </template>
-  </UPopover>
-</template>
diff --git a/docs/components/content/examples/PopoverExampleMode.vue b/docs/components/content/examples/PopoverExampleMode.vue
deleted file mode 100644
index 5b2a5977..00000000
--- a/docs/components/content/examples/PopoverExampleMode.vue
+++ /dev/null
@@ -1,11 +0,0 @@
-<template>
-  <UPopover mode="hover">
-    <UButton color="white" label="Open" trailing-icon="i-heroicons-chevron-down-20-solid" />
-
-    <template #panel>
-      <div class="p-4">
-        <Placeholder class="h-20 w-48" />
-      </div>
-    </template>
-  </UPopover>
-</template>
diff --git a/docs/components/content/examples/PopoverExampleOffset.vue b/docs/components/content/examples/PopoverExampleOffset.vue
deleted file mode 100644
index 57581071..00000000
--- a/docs/components/content/examples/PopoverExampleOffset.vue
+++ /dev/null
@@ -1,11 +0,0 @@
-<template>
-  <UPopover :popper="{ offsetDistance: 0 }">
-    <UButton color="white" label="Open" trailing-icon="i-heroicons-chevron-down-20-solid" />
-
-    <template #panel>
-      <div class="p-4">
-        <Placeholder class="h-20 w-48" />
-      </div>
-    </template>
-  </UPopover>
-</template>
diff --git a/docs/components/content/examples/PopoverExampleOpen.vue b/docs/components/content/examples/PopoverExampleOpen.vue
deleted file mode 100644
index 2394d3fe..00000000
--- a/docs/components/content/examples/PopoverExampleOpen.vue
+++ /dev/null
@@ -1,19 +0,0 @@
-<script setup lang="ts">
-const open = ref(true)
-
-defineShortcuts({
-  o: () => open.value = !open.value
-})
-</script>
-
-<template>
-  <UPopover v-model:open="open">
-    <UButton color="white" :label="open.toString()" trailing-icon="i-heroicons-chevron-down-20-solid" />
-
-    <template #panel>
-      <div class="p-4">
-        <Placeholder class="h-20 w-48" />
-      </div>
-    </template>
-  </UPopover>
-</template>
diff --git a/docs/components/content/examples/PopoverExampleOverlay.vue b/docs/components/content/examples/PopoverExampleOverlay.vue
deleted file mode 100644
index 908e023f..00000000
--- a/docs/components/content/examples/PopoverExampleOverlay.vue
+++ /dev/null
@@ -1,11 +0,0 @@
-<template>
-  <UPopover overlay>
-    <UButton color="white" label="Open" trailing-icon="i-heroicons-chevron-down-20-solid" />
-
-    <template #panel>
-      <div class="p-4">
-        <Placeholder class="h-20 w-48" />
-      </div>
-    </template>
-  </UPopover>
-</template>
diff --git a/docs/components/content/examples/PopoverExamplePlacement.vue b/docs/components/content/examples/PopoverExamplePlacement.vue
deleted file mode 100644
index a8cb5d4b..00000000
--- a/docs/components/content/examples/PopoverExamplePlacement.vue
+++ /dev/null
@@ -1,11 +0,0 @@
-<template>
-  <UPopover :popper="{ placement: 'top-end' }">
-    <UButton color="white" label="Open" trailing-icon="i-heroicons-chevron-down-20-solid" />
-
-    <template #panel>
-      <div class="p-4">
-        <Placeholder class="h-20 w-48" />
-      </div>
-    </template>
-  </UPopover>
-</template>
diff --git a/docs/components/content/examples/PopoverExampleSlot.vue b/docs/components/content/examples/PopoverExampleSlot.vue
deleted file mode 100644
index 0737b6e9..00000000
--- a/docs/components/content/examples/PopoverExampleSlot.vue
+++ /dev/null
@@ -1,11 +0,0 @@
-<template>
-  <UPopover>
-    <UButton color="white" label="Open" trailing-icon="i-heroicons-chevron-down-20-solid" />
-
-    <template #panel="{ close }">
-      <div class="p-8">
-        <UButton label="Close" @click="close" />
-      </div>
-    </template>
-  </UPopover>
-</template>
diff --git a/docs/components/content/examples/ProgressExampleAnimation.vue b/docs/components/content/examples/ProgressExampleAnimation.vue
deleted file mode 100644
index 1c53867d..00000000
--- a/docs/components/content/examples/ProgressExampleAnimation.vue
+++ /dev/null
@@ -1,34 +0,0 @@
-<template>
-  <UProgress class="progress">
-    <template #indicator>
-      <div class="text-right text-amber-500">
-        🔥 This is too hot!
-      </div>
-    </template>
-  </UProgress>
-</template>
-
-<style scoped>
-.progress:deep(progress:indeterminate.animation-default) {
-  &:after {
-    @apply w-full text-red-500;
-    animation: my-glow-animation 3s ease-in-out infinite;
-  }
-
-  &::-webkit-progress-value {
-    @apply w-full text-red-500;
-    animation: my-glow-animation 3s ease-in-out infinite;
-  }
-
-  &::-moz-progress-bar {
-    @apply w-full text-red-500;
-    animation: my-glow-animation 3s ease-in-out infinite;
-  }
-}
-
-@keyframes my-glow-animation {
-  50% {
-    @apply text-amber-400;
-  }
-}
-</style>
diff --git a/docs/components/content/examples/ProgressExampleSlotIndicator.vue b/docs/components/content/examples/ProgressExampleSlotIndicator.vue
deleted file mode 100644
index bb93b0a0..00000000
--- a/docs/components/content/examples/ProgressExampleSlotIndicator.vue
+++ /dev/null
@@ -1,25 +0,0 @@
-<script setup lang="ts">
-const temp = ref(35)
-
-const color = computed(() => {
-  switch (true) {
-  case temp.value < 10: return 'blue'
-  case temp.value < 20: return 'amber'
-  case temp.value < 30: return 'orange'
-  default: return 'red'
-  }
-})
-</script>
-
-<template>
-  <UProgress :value="temp" :max="40" :color="color">
-    <template #indicator="{ percent }">
-      <div class="text-right" :style="{ width: `${percent}%` }">
-        <span v-if="temp < 10" class="text-blue-500">Too cold!</span>
-        <span v-else-if="temp < 20" class="text-amber-500">Warm</span>
-        <span v-else-if="temp < 30" class="text-orange-500">Hot</span>
-        <span v-else class="text-red-500 font-bold">🔥 Too hot!</span>
-      </div>
-    </template>
-  </UProgress>
-</template>
diff --git a/docs/components/content/examples/ProgressExampleSlotStep.vue b/docs/components/content/examples/ProgressExampleSlotStep.vue
deleted file mode 100644
index 28291bf8..00000000
--- a/docs/components/content/examples/ProgressExampleSlotStep.vue
+++ /dev/null
@@ -1,31 +0,0 @@
-<script setup lang="ts">
-const task = ref(1)
-
-const steps = [
-  'Cloning...',
-  'Migrating...',
-  'Deploying...'
-]
-</script>
-
-<template>
-  <UProgress :value="task" :max="steps" indicator>
-    <template #step-0="{ step }">
-      <span class="text-lime-500">
-        <UIcon name="i-heroicons-arrow-down-circle" /> {{ step }}
-      </span>
-    </template>
-
-    <template #step-1="{ step }">
-      <span class="text-amber-500">
-        <UIcon name="i-heroicons-circle-stack" /> {{ step }}
-      </span>
-    </template>
-
-    <template #step-2="{ step }">
-      <span class="text-blue-500">
-        <UIcon name="i-heroicons-hand-thumb-up" /> {{ step }}
-      </span>
-    </template>
-  </UProgress>
-</template>
diff --git a/docs/components/content/examples/RadioExample.vue b/docs/components/content/examples/RadioExample.vue
deleted file mode 100644
index c6b265e6..00000000
--- a/docs/components/content/examples/RadioExample.vue
+++ /dev/null
@@ -1,15 +0,0 @@
-<script setup lang="ts">
-const methods = [
-  { value: 'email', label: 'Email' },
-  { value: 'sms', label: 'Phone (SMS)' },
-  { value: 'push', label: 'Push notification' }
-]
-
-const selected = ref('sms')
-</script>
-
-<template>
-  <div class="space-y-1">
-    <URadio v-for="method of methods" :key="method.value" v-model="selected" v-bind="method" />
-  </div>
-</template>
diff --git a/docs/components/content/examples/RadioGroupExample.vue b/docs/components/content/examples/RadioGroupExample.vue
deleted file mode 100644
index ddc8acb3..00000000
--- a/docs/components/content/examples/RadioGroupExample.vue
+++ /dev/null
@@ -1,18 +0,0 @@
-<script setup lang="ts">
-const options = [{
-  value: 'email',
-  label: 'Email'
-}, {
-  value: 'sms',
-  label: 'Phone (SMS)'
-}, {
-  value: 'push',
-  label: 'Push notification'
-}]
-
-const selected = ref('sms')
-</script>
-
-<template>
-  <URadioGroup v-model="selected" legend="Choose something" :options="options" />
-</template>
diff --git a/docs/components/content/examples/RadioGroupLabelExample.vue b/docs/components/content/examples/RadioGroupLabelExample.vue
deleted file mode 100644
index a9a58f96..00000000
--- a/docs/components/content/examples/RadioGroupLabelExample.vue
+++ /dev/null
@@ -1,20 +0,0 @@
-<script setup lang="ts">
-const options = [
-  { value: 'email', label: 'Email', icon: 'i-heroicons-at-symbol' },
-  { value: 'sms', label: 'Phone (SMS)', icon: 'i-heroicons-phone' },
-  { value: 'push', label: 'Push notification', icon: 'i-heroicons-bell' }
-]
-
-const selected = ref('sms')
-</script>
-
-<template>
-  <URadioGroup v-model="selected" :options="options">
-    <template #label="{ option }">
-      <p class="italic">
-        <UIcon :name="option.icon" />
-        {{ option.label }}
-      </p>
-    </template>
-  </URadioGroup>
-</template>
diff --git a/docs/components/content/examples/RangeExample.vue b/docs/components/content/examples/RangeExample.vue
deleted file mode 100644
index 8c787da2..00000000
--- a/docs/components/content/examples/RangeExample.vue
+++ /dev/null
@@ -1,7 +0,0 @@
-<script setup lang="ts">
-const value = ref(50)
-</script>
-
-<template>
-  <URange v-model="value" />
-</template>
diff --git a/docs/components/content/examples/SelectExample.vue b/docs/components/content/examples/SelectExample.vue
deleted file mode 100644
index 19c82733..00000000
--- a/docs/components/content/examples/SelectExample.vue
+++ /dev/null
@@ -1,9 +0,0 @@
-<script setup lang="ts">
-const countries = ['United States', 'Canada', 'Mexico']
-
-const country = ref(countries[0])
-</script>
-
-<template>
-  <USelect v-model="country" :options="countries" />
-</template>
diff --git a/docs/components/content/examples/SelectExampleObjects.vue b/docs/components/content/examples/SelectExampleObjects.vue
deleted file mode 100644
index 33c3ed6d..00000000
--- a/docs/components/content/examples/SelectExampleObjects.vue
+++ /dev/null
@@ -1,19 +0,0 @@
-<script setup lang="ts">
-const countries = [{
-  name: 'United States',
-  value: 'US'
-}, {
-  name: 'Canada',
-  value: 'CA',
-  disabled: true
-}, {
-  name: 'Mexico',
-  value: 'MX'
-}]
-
-const country = ref('CA')
-</script>
-
-<template>
-  <USelect v-model="country" :options="countries" option-attribute="name" />
-</template>
diff --git a/docs/components/content/examples/SelectMenuExampleArrow.vue b/docs/components/content/examples/SelectMenuExampleArrow.vue
deleted file mode 100644
index 8cd45c7b..00000000
--- a/docs/components/content/examples/SelectMenuExampleArrow.vue
+++ /dev/null
@@ -1,9 +0,0 @@
-<script setup lang="ts">
-const people = ['Wade Cooper', 'Arlene Mccoy', 'Devon Webb', 'Tom Cook', 'Tanya Fox', 'Hellen Schmidt', 'Caroline Schultz', 'Mason Heaney', 'Claudie Smitham', 'Emil Schaefer']
-
-const selected = ref(people[0])
-</script>
-
-<template>
-  <USelectMenu v-model="selected" :options="people" :popper="{ arrow: true }" />
-</template>
diff --git a/docs/components/content/examples/SelectMenuExampleBasic.vue b/docs/components/content/examples/SelectMenuExampleBasic.vue
deleted file mode 100644
index a674ad0e..00000000
--- a/docs/components/content/examples/SelectMenuExampleBasic.vue
+++ /dev/null
@@ -1,9 +0,0 @@
-<script setup lang="ts">
-const people = ['Wade Cooper', 'Arlene Mccoy', 'Devon Webb', 'Tom Cook', 'Tanya Fox', 'Hellen Schmidt', 'Caroline Schultz', 'Mason Heaney', 'Claudie Smitham', 'Emil Schaefer']
-
-const selected = ref(people[0])
-</script>
-
-<template>
-  <USelectMenu v-model="selected" :options="people" />
-</template>
diff --git a/docs/components/content/examples/SelectMenuExampleButton.vue b/docs/components/content/examples/SelectMenuExampleButton.vue
deleted file mode 100644
index a77f5d4a..00000000
--- a/docs/components/content/examples/SelectMenuExampleButton.vue
+++ /dev/null
@@ -1,15 +0,0 @@
-<script setup lang="ts">
-const people = ['Wade Cooper', 'Arlene Mccoy', 'Devon Webb', 'Tom Cook', 'Tanya Fox', 'Hellen Schmidt', 'Caroline Schultz', 'Mason Heaney', 'Claudie Smitham', 'Emil Schaefer']
-
-const selected = ref(people[3])
-</script>
-
-<template>
-  <USelectMenu v-slot="{ open }" v-model="selected" :options="people">
-    <UButton color="gray" class="flex-1 justify-between">
-      {{ selected }}
-
-      <UIcon name="i-heroicons-chevron-right-20-solid" class="w-5 h-5 transition-transform text-gray-400 dark:text-gray-500" :class="[open && 'transform rotate-90']" />
-    </UButton>
-  </USelectMenu>
-</template>
diff --git a/docs/components/content/examples/SelectMenuExampleCreatable.vue b/docs/components/content/examples/SelectMenuExampleCreatable.vue
deleted file mode 100644
index 500f5041..00000000
--- a/docs/components/content/examples/SelectMenuExampleCreatable.vue
+++ /dev/null
@@ -1,101 +0,0 @@
-<script setup lang="ts">
-const options = ref([
-  { id: 1, name: 'bug', color: 'd73a4a' },
-  { id: 2, name: 'documentation', color: '0075ca' },
-  { id: 3, name: 'duplicate', color: 'cfd3d7' },
-  { id: 4, name: 'enhancement', color: 'a2eeef' },
-  { id: 5, name: 'good first issue', color: '7057ff' },
-  { id: 6, name: 'help wanted', color: '008672' },
-  { id: 7, name: 'invalid', color: 'e4e669' },
-  { id: 8, name: 'question', color: 'd876e3' },
-  { id: 9, name: 'wontfix', color: 'ffffff' }
-])
-
-const selected = ref([])
-
-const labels = computed({
-  get: () => selected.value,
-  set: async (labels) => {
-    const promises = labels.map(async (label) => {
-      if (label.id) {
-        return label
-      }
-
-      // In a real app, you would make an API call to create the label
-      const response = {
-        id: options.value.length + 1,
-        name: label.name,
-        color: generateColorFromString(label.name)
-      }
-
-      options.value.push(response)
-
-      return response
-    })
-
-    selected.value = await Promise.all(promises)
-  }
-})
-
-function hashCode (str) {
-  let hash = 0
-  for (let i = 0; i < str.length; i++) {
-    hash = str.charCodeAt(i) + ((hash << 5) - hash)
-  }
-  return hash
-}
-
-function intToRGB (i) {
-  const c = (i & 0x00FFFFFF)
-    .toString(16)
-    .toUpperCase()
-
-  return '00000'.substring(0, 6 - c.length) + c
-}
-
-function generateColorFromString (str) {
-  return intToRGB(hashCode(str))
-}
-</script>
-
-<template>
-  <USelectMenu
-    v-model="labels"
-    by="id"
-    name="labels"
-    :options="options"
-    option-attribute="name"
-    multiple
-    searchable
-    creatable
-  >
-    <template #label>
-      <template v-if="labels.length">
-        <span class="flex items-center -space-x-1">
-          <span v-for="label of labels" :key="label.id" class="flex-shrink-0 w-2 h-2 mt-px rounded-full" :style="{ background: `#${label.color}` }" />
-        </span>
-        <span>{{ labels.length }} label{{ labels.length > 1 ? 's' : '' }}</span>
-      </template>
-      <template v-else>
-        <span class="text-gray-500 dark:text-gray-400 truncate">Select labels</span>
-      </template>
-    </template>
-
-    <template #option="{ option }">
-      <span
-        class="flex-shrink-0 w-2 h-2 mt-px rounded-full"
-        :style="{ background: `#${option.color}` }"
-      />
-      <span class="truncate">{{ option.name }}</span>
-    </template>
-
-    <template #option-create="{ option }">
-      <span class="flex-shrink-0">New label:</span>
-      <span
-        class="flex-shrink-0 w-2 h-2 mt-px rounded-full -mx-1"
-        :style="{ background: `#${generateColorFromString(option.name)}` }"
-      />
-      <span class="block truncate">{{ option.name }}</span>
-    </template>
-  </USelectMenu>
-</template>
diff --git a/docs/components/content/examples/SelectMenuExampleCreatableAlways.vue b/docs/components/content/examples/SelectMenuExampleCreatableAlways.vue
deleted file mode 100644
index ffd929bf..00000000
--- a/docs/components/content/examples/SelectMenuExampleCreatableAlways.vue
+++ /dev/null
@@ -1,53 +0,0 @@
-<script setup lang="ts">
-const options = ref([
-  { id: 1, name: 'bug' },
-  { id: 2, name: 'documentation' },
-  { id: 3, name: 'duplicate' },
-  { id: 4, name: 'enhancement' },
-  { id: 5, name: 'good first issue' },
-  { id: 6, name: 'help wanted' },
-  { id: 7, name: 'invalid' },
-  { id: 8, name: 'question' },
-  { id: 9, name: 'wontfix' }
-])
-
-const selected = ref([])
-
-const labels = computed({
-  get: () => selected.value,
-  set: async (labels) => {
-    const promises = labels.map(async (label) => {
-      if (label.id) {
-        return label
-      }
-
-      // In a real app, you would make an API call to create the label
-      const response = {
-        id: options.value.length + 1,
-        name: label.name
-      }
-
-      options.value.push(response)
-
-      return response
-    })
-
-    selected.value = await Promise.all(promises)
-  }
-})
-</script>
-
-<template>
-  <USelectMenu
-    v-model="labels"
-    by="id"
-    name="labels"
-    :options="options"
-    option-attribute="name"
-    multiple
-    searchable
-    creatable
-    show-create-option-when="always"
-    placeholder="Select labels"
-  />
-</template>
diff --git a/docs/components/content/examples/SelectMenuExampleEmptySlot.vue b/docs/components/content/examples/SelectMenuExampleEmptySlot.vue
deleted file mode 100644
index 974070e8..00000000
--- a/docs/components/content/examples/SelectMenuExampleEmptySlot.vue
+++ /dev/null
@@ -1,13 +0,0 @@
-<script setup lang="ts">
-const people = []
-
-const selected = ref()
-</script>
-
-<template>
-  <USelectMenu v-model="selected" :options="people">
-    <template #empty>
-      No people
-    </template>
-  </USelectMenu>
-</template>
diff --git a/docs/components/content/examples/SelectMenuExampleMultiple.vue b/docs/components/content/examples/SelectMenuExampleMultiple.vue
deleted file mode 100644
index 8cc2afc4..00000000
--- a/docs/components/content/examples/SelectMenuExampleMultiple.vue
+++ /dev/null
@@ -1,9 +0,0 @@
-<script setup lang="ts">
-const people = ['Wade Cooper', 'Arlene Mccoy', 'Devon Webb', 'Tom Cook', 'Tanya Fox', 'Hellen Schmidt', 'Caroline Schultz', 'Mason Heaney', 'Claudie Smitham', 'Emil Schaefer']
-
-const selected = ref([])
-</script>
-
-<template>
-  <USelectMenu v-model="selected" :options="people" multiple placeholder="Select people" />
-</template>
diff --git a/docs/components/content/examples/SelectMenuExampleMultipleSlot.vue b/docs/components/content/examples/SelectMenuExampleMultipleSlot.vue
deleted file mode 100644
index 93620481..00000000
--- a/docs/components/content/examples/SelectMenuExampleMultipleSlot.vue
+++ /dev/null
@@ -1,14 +0,0 @@
-<script setup lang="ts">
-const people = ['Wade Cooper', 'Arlene Mccoy', 'Devon Webb', 'Tom Cook', 'Tanya Fox', 'Hellen Schmidt', 'Caroline Schultz', 'Mason Heaney', 'Claudie Smitham', 'Emil Schaefer']
-
-const selected = ref([])
-</script>
-
-<template>
-  <USelectMenu v-model="selected" :options="people" multiple>
-    <template #label>
-      <span v-if="selected.length" class="truncate">{{ selected.join(', ') }}</span>
-      <span v-else>Select people</span>
-    </template>
-  </USelectMenu>
-</template>
diff --git a/docs/components/content/examples/SelectMenuExampleObjects.vue b/docs/components/content/examples/SelectMenuExampleObjects.vue
deleted file mode 100644
index 5eba2a5b..00000000
--- a/docs/components/content/examples/SelectMenuExampleObjects.vue
+++ /dev/null
@@ -1,38 +0,0 @@
-<script setup lang="ts">
-import type { Avatar } from '#ui/types'
-
-const people = [{
-  id: 'benjamincanac',
-  label: 'benjamincanac',
-  href: 'https://github.com/benjamincanac',
-  target: '_blank',
-  avatar: { src: 'https://avatars.githubusercontent.com/u/739984?v=4' }
-}, {
-  id: 'Atinux',
-  label: 'Atinux',
-  href: 'https://github.com/Atinux',
-  target: '_blank',
-  avatar: { src: 'https://avatars.githubusercontent.com/u/904724?v=4' }
-}, {
-  id: 'smarroufin',
-  label: 'smarroufin',
-  href: 'https://github.com/smarroufin',
-  target: '_blank',
-  avatar: { src: 'https://avatars.githubusercontent.com/u/7547335?v=4' }
-}, {
-  id: 'nobody',
-  label: 'Nobody',
-  icon: 'i-heroicons-user-circle'
-}]
-
-const selected = ref(people[0])
-</script>
-
-<template>
-  <USelectMenu v-model="selected" :options="people">
-    <template #leading>
-      <UIcon v-if="selected.icon" :name="(selected.icon as string)" class="w-5 h-5" />
-      <UAvatar v-else-if="selected.avatar" v-bind="(selected.avatar as Avatar)" size="2xs" />
-    </template>
-  </USelectMenu>
-</template>
diff --git a/docs/components/content/examples/SelectMenuExampleObjectsValueAttribute.vue b/docs/components/content/examples/SelectMenuExampleObjectsValueAttribute.vue
deleted file mode 100644
index 3af61ae0..00000000
--- a/docs/components/content/examples/SelectMenuExampleObjectsValueAttribute.vue
+++ /dev/null
@@ -1,27 +0,0 @@
-<script setup lang="ts">
-const people = [{
-  id: 1,
-  name: 'Wade Cooper'
-}, {
-  id: 2,
-  name: 'Arlene Mccoy'
-}, {
-  id: 3,
-  name: 'Devon Webb'
-}, {
-  id: 4,
-  name: 'Tom Cook'
-}]
-
-const selected = ref(people[0].id)
-</script>
-
-<template>
-  <USelectMenu
-    v-model="selected"
-    :options="people"
-    placeholder="Select people"
-    value-attribute="id"
-    option-attribute="name"
-  />
-</template>
diff --git a/docs/components/content/examples/SelectMenuExampleOffset.vue b/docs/components/content/examples/SelectMenuExampleOffset.vue
deleted file mode 100644
index f549c1f4..00000000
--- a/docs/components/content/examples/SelectMenuExampleOffset.vue
+++ /dev/null
@@ -1,9 +0,0 @@
-<script setup lang="ts">
-const people = ['Wade Cooper', 'Arlene Mccoy', 'Devon Webb', 'Tom Cook', 'Tanya Fox', 'Hellen Schmidt', 'Caroline Schultz', 'Mason Heaney', 'Claudie Smitham', 'Emil Schaefer']
-
-const selected = ref(people[0])
-</script>
-
-<template>
-  <USelectMenu v-model="selected" :options="people" :popper="{ offsetDistance: 0 }" />
-</template>
diff --git a/docs/components/content/examples/SelectMenuExampleOptionEmptySlot.vue b/docs/components/content/examples/SelectMenuExampleOptionEmptySlot.vue
deleted file mode 100644
index a5373b20..00000000
--- a/docs/components/content/examples/SelectMenuExampleOptionEmptySlot.vue
+++ /dev/null
@@ -1,13 +0,0 @@
-<script setup lang="ts">
-const people = ['Wade Cooper', 'Arlene Mccoy', 'Devon Webb', 'Tom Cook', 'Tanya Fox', 'Hellen Schmidt', 'Caroline Schultz', 'Mason Heaney', 'Claudie Smitham', 'Emil Schaefer']
-
-const selected = ref(people[0])
-</script>
-
-<template>
-  <USelectMenu v-model="selected" :options="people" searchable>
-    <template #option-empty="{ query }">
-      <q>{{ query }}</q> not found
-    </template>
-  </USelectMenu>
-</template>
diff --git a/docs/components/content/examples/SelectMenuExampleOptionSlot.vue b/docs/components/content/examples/SelectMenuExampleOptionSlot.vue
deleted file mode 100644
index ba31cf87..00000000
--- a/docs/components/content/examples/SelectMenuExampleOptionSlot.vue
+++ /dev/null
@@ -1,30 +0,0 @@
-<script setup lang="ts">
-const people = [
-  { name: 'Wade Cooper', online: true },
-  { name: 'Arlene Mccoy', online: false },
-  { name: 'Devon Webb', online: false },
-  { name: 'Tom Cook', online: true },
-  { name: 'Tanya Fox', online: false },
-  { name: 'Hellen Schmidt', online: true },
-  { name: 'Caroline Schultz', online: true },
-  { name: 'Mason Heaney', online: false },
-  { name: 'Claudie Smitham', online: true },
-  { name: 'Emil Schaefer', online: false }
-]
-
-const selected = ref(people[3])
-</script>
-
-<template>
-  <USelectMenu v-model="selected" :options="people" option-attribute="name">
-    <template #label>
-      <span :class="[selected.online ? 'bg-green-400' : 'bg-gray-200', 'inline-block h-2 w-2 flex-shrink-0 rounded-full']" aria-hidden="true" />
-      <span class="truncate">{{ selected.name }}</span>
-    </template>
-
-    <template #option="{ option: person }">
-      <span :class="[person.online ? 'bg-green-400' : 'bg-gray-200', 'inline-block h-2 w-2 flex-shrink-0 rounded-full']" aria-hidden="true" />
-      <span class="truncate">{{ person.name }}</span>
-    </template>
-  </USelectMenu>
-</template>
diff --git a/docs/components/content/examples/SelectMenuExamplePlacement.vue b/docs/components/content/examples/SelectMenuExamplePlacement.vue
deleted file mode 100644
index 8301851f..00000000
--- a/docs/components/content/examples/SelectMenuExamplePlacement.vue
+++ /dev/null
@@ -1,9 +0,0 @@
-<script setup lang="ts">
-const people = ['Wade Cooper', 'Arlene Mccoy', 'Devon Webb', 'Tom Cook', 'Tanya Fox', 'Hellen Schmidt', 'Caroline Schultz', 'Mason Heaney', 'Claudie Smitham', 'Emil Schaefer']
-
-const selected = ref(people[0])
-</script>
-
-<template>
-  <USelectMenu v-model="selected" :options="people" :popper="{ placement: 'left-end' }" />
-</template>
diff --git a/docs/components/content/examples/SelectMenuExampleSearchAsync.vue b/docs/components/content/examples/SelectMenuExampleSearchAsync.vue
deleted file mode 100644
index 9a98038b..00000000
--- a/docs/components/content/examples/SelectMenuExampleSearchAsync.vue
+++ /dev/null
@@ -1,27 +0,0 @@
-<script setup lang="ts">
-const loading = ref(false)
-const selected = ref([])
-
-async function search (q: string) {
-  loading.value = true
-
-  const users = await $fetch<any[]>('https://jsonplaceholder.typicode.com/users', { params: { q } })
-
-  loading.value = false
-
-  return users
-}
-</script>
-
-<template>
-  <USelectMenu
-    v-model="selected"
-    :loading="loading"
-    :searchable="search"
-    placeholder="Search for a user..."
-    option-attribute="name"
-    multiple
-    trailing
-    by="id"
-  />
-</template>
diff --git a/docs/components/content/examples/SelectMenuExampleSearchAttributes.vue b/docs/components/content/examples/SelectMenuExampleSearchAttributes.vue
deleted file mode 100644
index 0e39b891..00000000
--- a/docs/components/content/examples/SelectMenuExampleSearchAttributes.vue
+++ /dev/null
@@ -1,30 +0,0 @@
-<script setup lang="ts">
-const options = [
-  { id: 1, name: 'Wade Cooper', colors: ['red', 'yellow'] },
-  { id: 2, name: 'Arlene Mccoy', colors: ['blue', 'yellow'] },
-  { id: 3, name: 'Devon Webb', colors: ['green', 'blue'] },
-  { id: 4, name: 'Tom Cook', colors: ['blue', 'red'] },
-  { id: 5, name: 'Tanya Fox', colors: ['green', 'red'] },
-  { id: 5, name: 'Hellen Schmidt', colors: ['green', 'yellow'] }
-]
-
-const selected = ref(options[1])
-</script>
-
-<template>
-  <USelectMenu
-    v-model="selected"
-    :options="options"
-    placeholder="Select a person"
-    searchable
-    searchable-placeholder="Search by name or color"
-    option-attribute="name"
-    by="id"
-    :search-attributes="['name', 'colors']"
-  >
-    <template #option="{ option: person }">
-      <span v-for="color in person.colors" :key="color.id" class="h-2 w-2 rounded-full" :class="`bg-${color}-500 dark:bg-${color}-400`" />
-      <span class="truncate">{{ person.name }}</span>
-    </template>
-  </USelectMenu>
-</template>
diff --git a/docs/components/content/examples/SelectMenuExampleSearchQuery.vue b/docs/components/content/examples/SelectMenuExampleSearchQuery.vue
deleted file mode 100644
index 8703a4cf..00000000
--- a/docs/components/content/examples/SelectMenuExampleSearchQuery.vue
+++ /dev/null
@@ -1,16 +0,0 @@
-<script setup lang="ts">
-const people = ['Wade Cooper', 'Arlene Mccoy', 'Devon Webb', 'Tom Cook', 'Tanya Fox', 'Hellen Schmidt', 'Caroline Schultz', 'Mason Heaney', 'Claudie Smitham', 'Emil Schaefer']
-
-const selected = ref()
-const query = ref('Wade')
-</script>
-
-<template>
-  <USelectMenu
-    v-model="selected"
-    v-model:query="query"
-    :options="people"
-    placeholder="Select a person"
-    searchable
-  />
-</template>
diff --git a/docs/components/content/examples/SkeletonExample.vue b/docs/components/content/examples/SkeletonExample.vue
deleted file mode 100644
index 420180ba..00000000
--- a/docs/components/content/examples/SkeletonExample.vue
+++ /dev/null
@@ -1,9 +0,0 @@
-<template>
-  <div class="flex items-center space-x-4">
-    <USkeleton class="h-12 w-12" :ui="{ rounded: 'rounded-full' }" />
-    <div class="space-y-2">
-      <USkeleton class="h-4 w-[250px]" />
-      <USkeleton class="h-4 w-[200px]" />
-    </div>
-  </div>
-</template>
diff --git a/docs/components/content/examples/SlideoverExampleBasic.vue b/docs/components/content/examples/SlideoverExampleBasic.vue
deleted file mode 100644
index f2e7d93e..00000000
--- a/docs/components/content/examples/SlideoverExampleBasic.vue
+++ /dev/null
@@ -1,15 +0,0 @@
-<script setup lang="ts">
-const isOpen = ref(false)
-</script>
-
-<template>
-  <div>
-    <UButton label="Open" @click="isOpen = true" />
-
-    <USlideover v-model="isOpen">
-      <div class="p-4 flex-1">
-        <Placeholder class="h-full" />
-      </div>
-    </USlideover>
-  </div>
-</template>
diff --git a/docs/components/content/examples/SlideoverExampleCard.vue b/docs/components/content/examples/SlideoverExampleCard.vue
deleted file mode 100644
index 40121b80..00000000
--- a/docs/components/content/examples/SlideoverExampleCard.vue
+++ /dev/null
@@ -1,23 +0,0 @@
-<script setup lang="ts">
-const isOpen = ref(false)
-</script>
-
-<template>
-  <div>
-    <UButton label="Open" @click="isOpen = true" />
-
-    <USlideover v-model="isOpen">
-      <UCard class="flex flex-col flex-1" :ui="{ body: { base: 'flex-1' }, ring: '', divide: 'divide-y divide-gray-100 dark:divide-gray-800' }">
-        <template #header>
-          <Placeholder class="h-8" />
-        </template>
-
-        <Placeholder class="h-full" />
-
-        <template #footer>
-          <Placeholder class="h-8" />
-        </template>
-      </UCard>
-    </USlideover>
-  </div>
-</template>
diff --git a/docs/components/content/examples/SlideoverExampleComponent.vue b/docs/components/content/examples/SlideoverExampleComponent.vue
deleted file mode 100644
index eb177b89..00000000
--- a/docs/components/content/examples/SlideoverExampleComponent.vue
+++ /dev/null
@@ -1,30 +0,0 @@
-<script lang="ts" setup>
-
-const props = defineProps({
-  count: {
-    type: Number,
-    default: 0
-  }
-})
-
-const emits = defineEmits<{
-  close: [];
-}>()
-</script>
-
-<template>
-  <USlideover>
-    <UCard class="flex flex-col flex-1" :ui="{ body: { base: 'flex-1' }, ring: '', divide: 'divide-y divide-gray-100 dark:divide-gray-800' }">
-      <template #header>
-        <div class="flex items-center justify-between">
-          <h3 class="text-base font-semibold leading-6 text-gray-900 dark:text-white">
-            Opened programmatically: {{ props.count }} times
-          </h3>
-          <UButton color="gray" variant="ghost" icon="i-heroicons-x-mark-20-solid" class="-my-1" @click="emits('close')" />
-        </div>
-      </template>
-  
-      <Placeholder class="h-full" />
-    </UCard>
-  </USlideover>
-</template>
\ No newline at end of file
diff --git a/docs/components/content/examples/SlideoverExampleComposable.vue b/docs/components/content/examples/SlideoverExampleComposable.vue
deleted file mode 100644
index 6eeabaed..00000000
--- a/docs/components/content/examples/SlideoverExampleComposable.vue
+++ /dev/null
@@ -1,16 +0,0 @@
-<script setup lang="ts">
-import { SlideoverExampleComponent } from '#components'
-const slideover = useSlideover()
-const count = ref(0)
-function openSlideover () {
-  count.value += 1
-  slideover.open(SlideoverExampleComponent, {
-    count: count.value,
-    onClose: slideover.close
-  })
-}
-</script>
-
-<template>
-  <UButton label="Reveal slideover" @click="openSlideover" />
-</template>
\ No newline at end of file
diff --git a/docs/components/content/examples/SlideoverExampleDisableOverlay.vue b/docs/components/content/examples/SlideoverExampleDisableOverlay.vue
deleted file mode 100644
index be1575b7..00000000
--- a/docs/components/content/examples/SlideoverExampleDisableOverlay.vue
+++ /dev/null
@@ -1,15 +0,0 @@
-<script setup lang="ts">
-const isOpen = ref(false)
-</script>
-
-<template>
-  <div>
-    <UButton label="Open" @click="isOpen = true" />
-
-    <USlideover v-model="isOpen" :overlay="false">
-      <div class="p-4 flex-1">
-        <Placeholder class="h-full" />
-      </div>
-    </USlideover>
-  </div>
-</template>
diff --git a/docs/components/content/examples/SlideoverExampleDisableTransition.vue b/docs/components/content/examples/SlideoverExampleDisableTransition.vue
deleted file mode 100644
index b48c9865..00000000
--- a/docs/components/content/examples/SlideoverExampleDisableTransition.vue
+++ /dev/null
@@ -1,15 +0,0 @@
-<script setup lang="ts">
-const isOpen = ref(false)
-</script>
-
-<template>
-  <div>
-    <UButton label="Open" @click="isOpen = true" />
-
-    <USlideover v-model="isOpen" :transition="false">
-      <div class="p-4 flex-1">
-        <Placeholder class="h-full" />
-      </div>
-    </USlideover>
-  </div>
-</template>
diff --git a/docs/components/content/examples/SlideoverExamplePreventClose.vue b/docs/components/content/examples/SlideoverExamplePreventClose.vue
deleted file mode 100644
index 2985bc31..00000000
--- a/docs/components/content/examples/SlideoverExamplePreventClose.vue
+++ /dev/null
@@ -1,24 +0,0 @@
-<script setup lang="ts">
-const isOpen = ref(false)
-</script>
-
-<template>
-  <div>
-    <UButton label="Open" @click="isOpen = true" />
-
-    <USlideover v-model="isOpen" prevent-close>
-      <UCard class="flex flex-col flex-1" :ui="{ body: { base: 'flex-1' }, ring: '', divide: 'divide-y divide-gray-100 dark:divide-gray-800' }">
-        <template #header>
-          <div class="flex items-center justify-between">
-            <h3 class="text-base font-semibold leading-6 text-gray-900 dark:text-white">
-              Slideover
-            </h3>
-            <UButton color="gray" variant="ghost" icon="i-heroicons-x-mark-20-solid" class="-my-1" @click="isOpen = false" />
-          </div>
-        </template>
-
-        <Placeholder class="h-full" />
-      </UCard>
-    </USlideover>
-  </div>
-</template>
diff --git a/docs/components/content/examples/TableExampleAdvanced.vue b/docs/components/content/examples/TableExampleAdvanced.vue
deleted file mode 100644
index a99b501f..00000000
--- a/docs/components/content/examples/TableExampleAdvanced.vue
+++ /dev/null
@@ -1,251 +0,0 @@
-<script lang="ts" setup>
-// Columns
-const columns = [{
-  key: 'id',
-  label: '#',
-  sortable: true
-}, {
-  key: 'title',
-  label: 'Title',
-  sortable: true
-}, {
-  key: 'completed',
-  label: 'Status',
-  sortable: true
-}, {
-  key: 'actions',
-  label: 'Actions',
-  sortable: false
-}]
-
-const selectedColumns = ref(columns)
-const columnsTable = computed(() => columns.filter((column) => selectedColumns.value.includes(column)))
-
-// Selected Rows
-const selectedRows = ref([])
-
-function select (row) {
-  const index = selectedRows.value.findIndex((item) => item.id === row.id)
-  if (index === -1) {
-    selectedRows.value.push(row)
-  } else {
-    selectedRows.value.splice(index, 1)
-  }
-}
-
-// Actions
-const actions = [
-  [{
-    key: 'completed',
-    label: 'Completed',
-    icon: 'i-heroicons-check'
-  }], [{
-    key: 'uncompleted',
-    label: 'In Progress',
-    icon: 'i-heroicons-arrow-path'
-  }]
-]
-
-// Filters
-const todoStatus = [{
-  key: 'uncompleted',
-  label: 'In Progress',
-  value: false
-}, {
-  key: 'completed',
-  label: 'Completed',
-  value: true
-}]
-
-const search = ref('')
-const selectedStatus = ref([])
-const searchStatus = computed(() => {
-  if (selectedStatus.value?.length === 0) {
-    return ''
-  }
-
-  if (selectedStatus?.value?.length > 1) {
-    return `?completed=${selectedStatus.value[0].value}&completed=${selectedStatus.value[1].value}`
-  }
-
-  return `?completed=${selectedStatus.value[0].value}`
-})
-
-const resetFilters = () => {
-  search.value = ''
-  selectedStatus.value = []
-}
-
-// Pagination
-const sort = ref({ column: 'id', direction: 'asc' as const })
-const page = ref(1)
-const pageCount = ref(10)
-const pageTotal = ref(200) // This value should be dynamic coming from the API
-const pageFrom = computed(() => (page.value - 1) * pageCount.value + 1)
-const pageTo = computed(() => Math.min(page.value * pageCount.value, pageTotal.value))
-
-// Data
-const { data: todos, pending } = await useLazyAsyncData<{
-  id: number
-  title: string
-  completed: string
-}[]>('todos', () => ($fetch as any)(`https://jsonplaceholder.typicode.com/todos${searchStatus.value}`, {
-  query: {
-    q: search.value,
-    '_page': page.value,
-    '_limit': pageCount.value,
-    '_sort': sort.value.column,
-    '_order': sort.value.direction
-  }
-}), {
-  default: () => [],
-  watch: [page, search, searchStatus, pageCount, sort]
-})
-</script>
-
-<template>
-  <UCard
-    class="w-full"
-    :ui="{
-      base: '',
-      ring: '',
-      divide: 'divide-y divide-gray-200 dark:divide-gray-700',
-      header: { padding: 'px-4 py-5' },
-      body: { padding: '', base: 'divide-y divide-gray-200 dark:divide-gray-700' },
-      footer: { padding: 'p-4' }
-    }"
-  >
-    <template #header>
-      <h2 class="font-semibold text-xl text-gray-900 dark:text-white leading-tight">
-        Todos
-      </h2>
-    </template>
-
-    <!-- Filters -->
-    <div class="flex items-center justify-between gap-3 px-4 py-3">
-      <UInput v-model="search" icon="i-heroicons-magnifying-glass-20-solid" placeholder="Search..." />
-
-      <USelectMenu v-model="selectedStatus" :options="todoStatus" multiple placeholder="Status" class="w-40" />
-    </div>
-
-    <!-- Header and Action buttons -->
-    <div class="flex justify-between items-center w-full px-4 py-3">
-      <div class="flex items-center gap-1.5">
-        <span class="text-sm leading-5">Rows per page:</span>
-
-        <USelect
-          v-model="pageCount"
-          :options="[3, 5, 10, 20, 30, 40]"
-          class="me-2 w-20"
-          size="xs"
-        />
-      </div>
-
-      <div class="flex gap-1.5 items-center">
-        <UDropdown v-if="selectedRows.length > 1" :items="actions" :ui="{ width: 'w-36' }">
-          <UButton
-            icon="i-heroicons-chevron-down"
-            trailing
-            color="gray"
-            size="xs"
-          >
-            Mark as
-          </UButton>
-        </UDropdown>
-
-        <USelectMenu v-model="selectedColumns" :options="columns" multiple>
-          <UButton
-            icon="i-heroicons-view-columns"
-            color="gray"
-            size="xs"
-          >
-            Columns
-          </UButton>
-        </USelectMenu>
-
-        <UButton
-          icon="i-heroicons-funnel"
-          color="gray"
-          size="xs"
-          :disabled="search === '' && selectedStatus.length === 0"
-          @click="resetFilters"
-        >
-          Reset
-        </UButton>
-      </div>
-    </div>
-
-    <!-- Table -->
-    <UTable
-      v-model="selectedRows"
-      v-model:sort="sort"
-      :rows="todos"
-      :columns="columnsTable"
-      :loading="pending"
-      sort-asc-icon="i-heroicons-arrow-up"
-      sort-desc-icon="i-heroicons-arrow-down"
-      sort-mode="manual"
-      class="w-full"
-      :ui="{ td: { base: 'max-w-[0] truncate' } }"
-      @select="select"
-    >
-      <template #completed-data="{ row }">
-        <UBadge size="xs" :label="row.completed ? 'Completed' : 'In Progress'" :color="row.completed ? 'emerald' : 'orange'" variant="subtle" />
-      </template>
-
-      <template #actions-data="{ row }">
-        <UButton
-          v-if="!row.completed"
-          icon="i-heroicons-check"
-          size="2xs"
-          color="emerald"
-          variant="outline"
-          :ui="{ rounded: 'rounded-full' }"
-          square
-        />
-
-        <UButton
-          v-else
-          icon="i-heroicons-arrow-path"
-          size="2xs"
-          color="orange"
-          variant="outline"
-          :ui="{ rounded: 'rounded-full' }"
-          square
-        />
-      </template>
-    </UTable>
-
-    <!-- Number of rows & Pagination -->
-    <template #footer>
-      <div class="flex flex-wrap justify-between items-center">
-        <div>
-          <span class="text-sm leading-5">
-            Showing
-            <span class="font-medium">{{ pageFrom }}</span>
-            to
-            <span class="font-medium">{{ pageTo }}</span>
-            of
-            <span class="font-medium">{{ pageTotal }}</span>
-            results
-          </span>
-        </div>
-
-        <UPagination
-          v-model="page"
-          :page-count="pageCount"
-          :total="pageTotal"
-          :ui="{
-            wrapper: 'flex items-center gap-1',
-            rounded: '!rounded-full min-w-[32px] justify-center',
-            default: {
-              activeButton: {
-                variant: 'outline'
-              }
-            }
-          }"
-        />
-      </div>
-    </template>
-  </UCard>
-</template>
diff --git a/docs/components/content/examples/TableExampleBasic.vue b/docs/components/content/examples/TableExampleBasic.vue
deleted file mode 100644
index 1c2539f0..00000000
--- a/docs/components/content/examples/TableExampleBasic.vue
+++ /dev/null
@@ -1,43 +0,0 @@
-<script setup lang="ts">
-const people = [{
-  id: 1,
-  name: 'Lindsay Walton',
-  title: 'Front-end Developer',
-  email: 'lindsay.walton@example.com',
-  role: 'Member'
-}, {
-  id: 2,
-  name: 'Courtney Henry',
-  title: 'Designer',
-  email: 'courtney.henry@example.com',
-  role: 'Admin'
-}, {
-  id: 3,
-  name: 'Tom Cook',
-  title: 'Director of Product',
-  email: 'tom.cook@example.com',
-  role: 'Member'
-}, {
-  id: 4,
-  name: 'Whitney Francis',
-  title: 'Copywriter',
-  email: 'whitney.francis@example.com',
-  role: 'Admin'
-}, {
-  id: 5,
-  name: 'Leonard Krasner',
-  title: 'Senior Designer',
-  email: 'leonard.krasner@example.com',
-  role: 'Owner'
-}, {
-  id: 6,
-  name: 'Floyd Miles',
-  title: 'Principal Designer',
-  email: 'floyd.miles@example.com',
-  role: 'Member'
-}]
-</script>
-
-<template>
-  <UTable :rows="people" />
-</template>
diff --git a/docs/components/content/examples/TableExampleClickable.vue b/docs/components/content/examples/TableExampleClickable.vue
deleted file mode 100644
index 0aa31778..00000000
--- a/docs/components/content/examples/TableExampleClickable.vue
+++ /dev/null
@@ -1,48 +0,0 @@
-<script setup lang="ts">
-const people = [{
-  id: 1,
-  name: 'Lindsay Walton',
-  title: 'Front-end Developer',
-  email: 'lindsay.walton@example.com',
-  role: 'Member'
-}, {
-  id: 2,
-  name: 'Courtney Henry',
-  title: 'Designer',
-  email: 'courtney.henry@example.com',
-  role: 'Admin'
-}, {
-  id: 3,
-  name: 'Tom Cook',
-  title: 'Director of Product',
-  email: 'tom.cook@example.com',
-  role: 'Member'
-}, {
-  id: 4,
-  name: 'Whitney Francis',
-  title: 'Copywriter',
-  email: 'whitney.francis@example.com',
-  role: 'Admin'
-}, {
-  id: 5,
-  name: 'Leonard Krasner',
-  title: 'Senior Designer',
-  email: 'leonard.krasner@example.com',
-  role: 'Owner'
-}]
-
-function select (row) {
-  const index = selected.value.findIndex((item) => item.id === row.id)
-  if (index === -1) {
-    selected.value.push(row)
-  } else {
-    selected.value.splice(index, 1)
-  }
-}
-
-const selected = ref([people[1]])
-</script>
-
-<template>
-  <UTable v-model="selected" :rows="people" @select="select" />
-</template>
diff --git a/docs/components/content/examples/TableExampleColumns.vue b/docs/components/content/examples/TableExampleColumns.vue
deleted file mode 100644
index 73a389ea..00000000
--- a/docs/components/content/examples/TableExampleColumns.vue
+++ /dev/null
@@ -1,59 +0,0 @@
-<script setup lang="ts">
-const columns = [{
-  key: 'id',
-  label: 'ID'
-}, {
-  key: 'name',
-  label: 'User name'
-}, {
-  key: 'title',
-  label: 'Job position'
-}, {
-  key: 'email',
-  label: 'Email'
-}, {
-  key: 'role'
-}]
-
-const people = [{
-  id: 1,
-  name: 'Lindsay Walton',
-  title: 'Front-end Developer',
-  email: 'lindsay.walton@example.com',
-  role: 'Member'
-}, {
-  id: 2,
-  name: 'Courtney Henry',
-  title: 'Designer',
-  email: 'courtney.henry@example.com',
-  role: 'Admin'
-}, {
-  id: 3,
-  name: 'Tom Cook',
-  title: 'Director of Product',
-  email: 'tom.cook@example.com',
-  role: 'Member'
-}, {
-  id: 4,
-  name: 'Whitney Francis',
-  title: 'Copywriter',
-  email: 'whitney.francis@example.com',
-  role: 'Admin'
-}, {
-  id: 5,
-  name: 'Leonard Krasner',
-  title: 'Senior Designer',
-  email: 'leonard.krasner@example.com',
-  role: 'Owner'
-}, {
-  id: 6,
-  name: 'Floyd Miles',
-  title: 'Principal Designer',
-  email: 'floyd.miles@example.com',
-  role: 'Member'
-}]
-</script>
-
-<template>
-  <UTable :columns="columns" :rows="people" />
-</template>
diff --git a/docs/components/content/examples/TableExampleColumnsSelectable.vue b/docs/components/content/examples/TableExampleColumnsSelectable.vue
deleted file mode 100644
index 3985d75d..00000000
--- a/docs/components/content/examples/TableExampleColumnsSelectable.vue
+++ /dev/null
@@ -1,68 +0,0 @@
-<script setup lang="ts">
-const columns = [{
-  key: 'id',
-  label: 'ID'
-}, {
-  key: 'name',
-  label: 'Name'
-}, {
-  key: 'title',
-  label: 'Title'
-}, {
-  key: 'email',
-  label: 'Email'
-}, {
-  key: 'role',
-  label: 'Role'
-}]
-
-const selectedColumns = ref([...columns])
-
-const people = [{
-  id: 1,
-  name: 'Lindsay Walton',
-  title: 'Front-end Developer',
-  email: 'lindsay.walton@example.com',
-  role: 'Member'
-}, {
-  id: 2,
-  name: 'Courtney Henry',
-  title: 'Designer',
-  email: 'courtney.henry@example.com',
-  role: 'Admin'
-}, {
-  id: 3,
-  name: 'Tom Cook',
-  title: 'Director of Product',
-  email: 'tom.cook@example.com',
-  role: 'Member'
-}, {
-  id: 4,
-  name: 'Whitney Francis',
-  title: 'Copywriter',
-  email: 'whitney.francis@example.com',
-  role: 'Admin'
-}, {
-  id: 5,
-  name: 'Leonard Krasner',
-  title: 'Senior Designer',
-  email: 'leonard.krasner@example.com',
-  role: 'Owner'
-}, {
-  id: 6,
-  name: 'Floyd Miles',
-  title: 'Principal Designer',
-  email: 'floyd.miles@example.com',
-  role: 'Member'
-}]
-</script>
-
-<template>
-  <div>
-    <div class="flex px-3 py-3.5 border-b border-gray-200 dark:border-gray-700">
-      <USelectMenu v-model="selectedColumns" :options="columns" multiple placeholder="Columns" />
-    </div>
-
-    <UTable :columns="selectedColumns" :rows="people" />
-  </div>
-</template>
diff --git a/docs/components/content/examples/TableExampleColumnsSortable.vue b/docs/components/content/examples/TableExampleColumnsSortable.vue
deleted file mode 100644
index 7629bab6..00000000
--- a/docs/components/content/examples/TableExampleColumnsSortable.vue
+++ /dev/null
@@ -1,64 +0,0 @@
-<script setup lang="ts">
-const columns = [{
-  key: 'id',
-  label: 'ID'
-}, {
-  key: 'name',
-  label: 'Name',
-  sortable: true
-}, {
-  key: 'title',
-  label: 'Title',
-  sortable: true
-}, {
-  key: 'email',
-  label: 'Email',
-  sortable: true,
-  direction: 'desc' as const
-}, {
-  key: 'role',
-  label: 'Role'
-}]
-
-const people = [{
-  id: 1,
-  name: 'Lindsay Walton',
-  title: 'Front-end Developer',
-  email: 'lindsay.walton@example.com',
-  role: 'Member'
-}, {
-  id: 2,
-  name: 'Courtney Henry',
-  title: 'Designer',
-  email: 'courtney.henry@example.com',
-  role: 'Admin'
-}, {
-  id: 3,
-  name: 'Tom Cook',
-  title: 'Director of Product',
-  email: 'tom.cook@example.com',
-  role: 'Member'
-}, {
-  id: 4,
-  name: 'Whitney Francis',
-  title: 'Copywriter',
-  email: 'whitney.francis@example.com',
-  role: 'Admin'
-}, {
-  id: 5,
-  name: 'Leonard Krasner',
-  title: 'Senior Designer',
-  email: 'leonard.krasner@example.com',
-  role: 'Owner'
-}, {
-  id: 6,
-  name: 'Floyd Miles',
-  title: 'Principal Designer',
-  email: 'floyd.miles@example.com',
-  role: 'Member'
-}]
-</script>
-
-<template>
-  <UTable :columns="columns" :rows="people" />
-</template>
diff --git a/docs/components/content/examples/TableExampleEmptySlot.vue b/docs/components/content/examples/TableExampleEmptySlot.vue
deleted file mode 100644
index 575abf52..00000000
--- a/docs/components/content/examples/TableExampleEmptySlot.vue
+++ /dev/null
@@ -1,30 +0,0 @@
-<script setup lang="ts">
-const columns = [{
-  key: 'name',
-  label: 'Name'
-}, {
-  key: 'title',
-  label: 'Title'
-}, {
-  key: 'email',
-  label: 'Email'
-}, {
-  key: 'role',
-  label: 'Role'
-}, {
-  key: 'actions'
-}]
-
-const people = []
-</script>
-
-<template>
-  <UTable :rows="people" :columns="columns">
-    <template #empty-state>
-      <div class="flex flex-col items-center justify-center py-6 gap-3">
-        <span class="italic text-sm">No one here!</span>
-        <UButton label="Add people" />
-      </div>
-    </template>
-  </UTable>
-</template>
diff --git a/docs/components/content/examples/TableExampleLoadingSlot.vue b/docs/components/content/examples/TableExampleLoadingSlot.vue
deleted file mode 100644
index 5de1a833..00000000
--- a/docs/components/content/examples/TableExampleLoadingSlot.vue
+++ /dev/null
@@ -1,86 +0,0 @@
-<script setup lang="ts">
-const columns = [{
-  key: 'name',
-  label: 'Name'
-}, {
-  key: 'title',
-  label: 'Title'
-}, {
-  key: 'email',
-  label: 'Email'
-}, {
-  key: 'role',
-  label: 'Role'
-}, {
-  key: 'actions'
-}]
-
-const people = []
-
-const pending = ref(true)
-</script>
-
-<template>
-  <UTable :rows="people" :columns="columns" :loading="pending">
-    <template #loading-state>
-      <div class="flex items-center justify-center h-32">
-        <i class="loader --6" />
-      </div>
-    </template>
-  </UTable>
-</template>
-
-<style scoped>
-/* https://codepen.io/jenning/pen/YzNmzaV */
-
-.loader {
-	--color: rgb(var(--color-primary-400));
-	--size-mid: 6vmin;
-	--size-dot: 1.5vmin;
-	--size-bar: 0.4vmin;
-	--size-square: 3vmin;
-
-	display: block;
-	position: relative;
-	width: 50%;
-	display: grid;
-	place-items: center;
-}
-
-.loader::before,
-.loader::after {
-	content: '';
-	box-sizing: border-box;
-	position: absolute;
-}
-
-/**
-	loader --6
-**/
-.loader.--6::before {
-	width: var(--size-square);
-	height: var(--size-square);
-	background-color: var(--color);
-	top: calc(50% - var(--size-square));
-	left: calc(50% - var(--size-square));
-	animation: loader-6 2.4s cubic-bezier(0, 0, 0.24, 1.21) infinite;
-}
-
-@keyframes loader-6 {
-	0%, 100% {
-		transform: none;
-	}
-
-	25% {
-		transform: translateX(100%);
-	}
-
-	50% {
-		transform: translateX(100%) translateY(100%);
-	}
-
-	75% {
-		transform: translateY(100%);
-	}
-}
-</style>
diff --git a/docs/components/content/examples/TableExamplePaginable.vue b/docs/components/content/examples/TableExamplePaginable.vue
deleted file mode 100644
index 0a5ec67f..00000000
--- a/docs/components/content/examples/TableExamplePaginable.vue
+++ /dev/null
@@ -1,98 +0,0 @@
-<script setup lang="ts">
-const people = [{
-  id: 1,
-  name: 'Lindsay Walton',
-  title: 'Front-end Developer',
-  email: 'lindsay.walton@example.com',
-  role: 'Member'
-}, {
-  id: 2,
-  name: 'Courtney Henry',
-  title: 'Designer',
-  email: 'courtney.henry@example.com',
-  role: 'Admin'
-}, {
-  id: 3,
-  name: 'Tom Cook',
-  title: 'Director of Product',
-  email: 'tom.cook@example.com',
-  role: 'Member'
-}, {
-  id: 4,
-  name: 'Whitney Francis',
-  title: 'Copywriter',
-  email: 'whitney.francis@example.com',
-  role: 'Admin'
-}, {
-  id: 5,
-  name: 'Leonard Krasner',
-  title: 'Senior Designer',
-  email: 'leonard.krasner@example.com',
-  role: 'Owner'
-}, {
-  id: 6,
-  name: 'Floyd Miles',
-  title: 'Principal Designer',
-  email: 'floyd.miles@example.com',
-  role: 'Member'
-}, {
-  id: 7,
-  name: 'Emily Selman',
-  title: 'VP, User Experience',
-  email: '',
-  role: 'Admin'
-}, {
-  id: 8,
-  name: 'Kristin Watson',
-  title: 'VP, Human Resources',
-  email: '',
-  role: 'Member'
-}, {
-  id: 9,
-  name: 'Emma Watson',
-  title: 'Front-end Developer',
-  email: '',
-  role: 'Member'
-}, {
-  id: 10,
-  name: 'John Doe',
-  title: 'Designer',
-  email: '',
-  role: 'Admin'
-}, {
-  id: 11,
-  name: 'Jane Doe',
-  title: 'Director of Product',
-  email: '',
-  role: 'Member'
-}, {
-  id: 12,
-  name: 'John Smith',
-  title: 'Copywriter',
-  email: '',
-  role: 'Admin'
-}, {
-  id: 13,
-  name: 'Jane Smith',
-  title: 'Senior Designer',
-  email: '',
-  role: 'Owner'
-}]
-
-const page = ref(1)
-const pageCount = 5
-
-const rows = computed(() => {
-  return people.slice((page.value - 1) * pageCount, (page.value) * pageCount)
-})
-</script>
-
-<template>
-  <div>
-    <UTable :rows="rows" />
-
-    <div class="flex justify-end px-3 py-3.5 border-t border-gray-200 dark:border-gray-700">
-      <UPagination v-model="page" :page-count="pageCount" :total="people.length" />
-    </div>
-  </div>
-</template>
diff --git a/docs/components/content/examples/TableExampleReactiveSorting.vue b/docs/components/content/examples/TableExampleReactiveSorting.vue
deleted file mode 100644
index 20a3aa70..00000000
--- a/docs/components/content/examples/TableExampleReactiveSorting.vue
+++ /dev/null
@@ -1,69 +0,0 @@
-<script setup lang="ts">
-const sort = ref({
-  column: 'name',
-  direction: 'desc' as const
-})
-
-const columns = [{
-  key: 'id',
-  label: 'ID'
-}, {
-  key: 'name',
-  label: 'Name',
-  sortable: true
-}, {
-  key: 'title',
-  label: 'Title',
-  sortable: true
-}, {
-  key: 'email',
-  label: 'Email'
-}, {
-  key: 'role',
-  label: 'Role',
-  sortable: true,
-  direction: 'desc' as const
-}]
-
-const people = [{
-  id: 1,
-  name: 'Lindsay Walton',
-  title: 'Front-end Developer',
-  email: 'lindsay.walton@example.com',
-  role: 'Member'
-}, {
-  id: 2,
-  name: 'Courtney Henry',
-  title: 'Designer',
-  email: 'courtney.henry@example.com',
-  role: 'Admin'
-}, {
-  id: 3,
-  name: 'Tom Cook',
-  title: 'Director of Product',
-  email: 'tom.cook@example.com',
-  role: 'Member'
-}, {
-  id: 4,
-  name: 'Whitney Francis',
-  title: 'Copywriter',
-  email: 'whitney.francis@example.com',
-  role: 'Admin'
-}, {
-  id: 5,
-  name: 'Leonard Krasner',
-  title: 'Senior Designer',
-  email: 'leonard.krasner@example.com',
-  role: 'Owner'
-}, {
-  id: 6,
-  name: 'Floyd Miles',
-  title: 'Principal Designer',
-  email: 'floyd.miles@example.com',
-  role: 'Member'
-}]
-</script>
-
-<template>
-  <UTable v-model:sort="sort" :columns="columns" :rows="people" />
-</template>
diff --git a/docs/components/content/examples/TableExampleSearchable.vue b/docs/components/content/examples/TableExampleSearchable.vue
deleted file mode 100644
index 50795211..00000000
--- a/docs/components/content/examples/TableExampleSearchable.vue
+++ /dev/null
@@ -1,80 +0,0 @@
-<script setup lang="ts">
-const columns = [{
-  key: 'id',
-  label: 'ID'
-}, {
-  key: 'name',
-  label: 'Name'
-}, {
-  key: 'title',
-  label: 'Title'
-}, {
-  key: 'email',
-  label: 'Email'
-}, {
-  key: 'role',
-  label: 'Role'
-}]
-
-const people = [{
-  id: 1,
-  name: 'Lindsay Walton',
-  title: 'Front-end Developer',
-  email: 'lindsay.walton@example.com',
-  role: 'Member'
-}, {
-  id: 2,
-  name: 'Courtney Henry',
-  title: 'Designer',
-  email: 'courtney.henry@example.com',
-  role: 'Admin'
-}, {
-  id: 3,
-  name: 'Tom Cook',
-  title: 'Director of Product',
-  email: 'tom.cook@example.com',
-  role: 'Member'
-}, {
-  id: 4,
-  name: 'Whitney Francis',
-  title: 'Copywriter',
-  email: 'whitney.francis@example.com',
-  role: 'Admin'
-}, {
-  id: 5,
-  name: 'Leonard Krasner',
-  title: 'Senior Designer',
-  email: 'leonard.krasner@example.com',
-  role: 'Owner'
-}, {
-  id: 6,
-  name: 'Floyd Miles',
-  title: 'Principal Designer',
-  email: 'floyd.miles@example.com',
-  role: 'Member'
-}]
-
-const q = ref('')
-
-const filteredRows = computed(() => {
-  if (!q.value) {
-    return people
-  }
-
-  return people.filter((person) => {
-    return Object.values(person).some((value) => {
-      return String(value).toLowerCase().includes(q.value.toLowerCase())
-    })
-  })
-})
-</script>
-
-<template>
-  <div>
-    <div class="flex px-3 py-3.5 border-b border-gray-200 dark:border-gray-700">
-      <UInput v-model="q" placeholder="Filter people..." />
-    </div>
-
-    <UTable :rows="filteredRows" :columns="columns" />
-  </div>
-</template>
diff --git a/docs/components/content/examples/TableExampleSelectable.vue b/docs/components/content/examples/TableExampleSelectable.vue
deleted file mode 100644
index 29e38ba2..00000000
--- a/docs/components/content/examples/TableExampleSelectable.vue
+++ /dev/null
@@ -1,45 +0,0 @@
-<script setup lang="ts">
-const people = [{
-  id: 1,
-  name: 'Lindsay Walton',
-  title: 'Front-end Developer',
-  email: 'lindsay.walton@example.com',
-  role: 'Member'
-}, {
-  id: 2,
-  name: 'Courtney Henry',
-  title: 'Designer',
-  email: 'courtney.henry@example.com',
-  role: 'Admin'
-}, {
-  id: 3,
-  name: 'Tom Cook',
-  title: 'Director of Product',
-  email: 'tom.cook@example.com',
-  role: 'Member'
-}, {
-  id: 4,
-  name: 'Whitney Francis',
-  title: 'Copywriter',
-  email: 'whitney.francis@example.com',
-  role: 'Admin'
-}, {
-  id: 5,
-  name: 'Leonard Krasner',
-  title: 'Senior Designer',
-  email: 'leonard.krasner@example.com',
-  role: 'Owner'
-}, {
-  id: 6,
-  name: 'Floyd Miles',
-  title: 'Principal Designer',
-  email: 'floyd.miles@example.com',
-  role: 'Member'
-}]
-
-const selected = ref([people[1]])
-</script>
-
-<template>
-  <UTable v-model="selected" :rows="people" />
-</template>
diff --git a/docs/components/content/examples/TableExampleSlots.vue b/docs/components/content/examples/TableExampleSlots.vue
deleted file mode 100644
index 4e89c7c8..00000000
--- a/docs/components/content/examples/TableExampleSlots.vue
+++ /dev/null
@@ -1,91 +0,0 @@
-<script setup lang="ts">
-const columns = [{
-  key: 'name',
-  label: 'Name'
-}, {
-  key: 'title',
-  label: 'Title'
-}, {
-  key: 'email',
-  label: 'Email'
-}, {
-  key: 'role',
-  label: 'Role'
-}, {
-  key: 'actions'
-}]
-
-const people = [{
-  id: 1,
-  name: 'Lindsay Walton',
-  title: 'Front-end Developer',
-  email: 'lindsay.walton@example.com',
-  role: 'Member'
-}, {
-  id: 2,
-  name: 'Courtney Henry',
-  title: 'Designer',
-  email: 'courtney.henry@example.com',
-  role: 'Admin'
-}, {
-  id: 3,
-  name: 'Tom Cook',
-  title: 'Director of Product',
-  email: 'tom.cook@example.com',
-  role: 'Member'
-}, {
-  id: 4,
-  name: 'Whitney Francis',
-  title: 'Copywriter',
-  email: 'whitney.francis@example.com',
-  role: 'Admin'
-}, {
-  id: 5,
-  name: 'Leonard Krasner',
-  title: 'Senior Designer',
-  email: 'leonard.krasner@example.com',
-  role: 'Owner'
-}, {
-  id: 6,
-  name: 'Floyd Miles',
-  title: 'Principal Designer',
-  email: 'floyd.miles@example.com',
-  role: 'Member'
-}]
-
-const items = (row) => [
-  [{
-    label: 'Edit',
-    icon: 'i-heroicons-pencil-square-20-solid',
-    click: () => console.log('Edit', row.id)
-  }, {
-    label: 'Duplicate',
-    icon: 'i-heroicons-document-duplicate-20-solid'
-  }], [{
-    label: 'Archive',
-    icon: 'i-heroicons-archive-box-20-solid'
-  }, {
-    label: 'Move',
-    icon: 'i-heroicons-arrow-right-circle-20-solid'
-  }], [{
-    label: 'Delete',
-    icon: 'i-heroicons-trash-20-solid'
-  }]
-]
-
-const selected = ref([people[1]])
-</script>
-
-<template>
-  <UTable v-model="selected" :rows="people" :columns="columns">
-    <template #name-data="{ row }">
-      <span :class="[selected.find(person => person.id === row.id) && 'text-primary-500 dark:text-primary-400']">{{ row.name }}</span>
-    </template>
-
-    <template #actions-data="{ row }">
-      <UDropdown :items="items(row)">
-        <UButton color="gray" variant="ghost" icon="i-heroicons-ellipsis-horizontal-20-solid" />
-      </UDropdown>
-    </template>
-  </UTable>
-</template>
diff --git a/docs/components/content/examples/TableExampleStyle.vue b/docs/components/content/examples/TableExampleStyle.vue
deleted file mode 100644
index 5b5bd2d8..00000000
--- a/docs/components/content/examples/TableExampleStyle.vue
+++ /dev/null
@@ -1,40 +0,0 @@
-<script setup lang="ts">
-const columns = [{
-  key: 'id',
-  label: '#'
-}, {
-  key: 'quantity',
-  label: 'Quantity',
-  class: 'italic'
-}, {
-  key: 'name',
-  label: 'Name'
-}]
-
-const items = [{
-  id: 1,
-  name: 'Apple',
-  quantity: { value: 100, class: 'bg-green-500/50 dark:bg-green-400/50' }
-}, {
-  id: 2,
-  name: 'Orange',
-  quantity: { value: 0 },
-  class: 'bg-red-500/50 dark:bg-red-400/50 animate-pulse'
-}, {
-  id: 3,
-  name: 'Banana',
-  quantity: { value: 30, class: 'bg-green-500/50 dark:bg-green-400/50' }
-}, {
-  id: 4,
-  name: 'Mango',
-  quantity: { value: 5, class: 'bg-green-500/50 dark:bg-green-400/50' }
-}]
-</script>
-
-<template>
-  <UTable :rows="items" :columns="columns">
-    <template #quantity-data="{ row }">
-      {{ row.quantity.value }}
-    </template>
-  </UTable>
-</template>
diff --git a/docs/components/content/examples/TabsExampleBasic.vue b/docs/components/content/examples/TabsExampleBasic.vue
deleted file mode 100644
index d2357ea7..00000000
--- a/docs/components/content/examples/TabsExampleBasic.vue
+++ /dev/null
@@ -1,17 +0,0 @@
-<script setup lang="ts">
-const items = [{
-  label: 'Tab1',
-  content: 'This is the content shown for Tab1'
-}, {
-  label: 'Tab2',
-  disabled: true,
-  content: 'And, this is the content for Tab2'
-}, {
-  label: 'Tab3',
-  content: 'Finally, this is the content for Tab3'
-}]
-</script>
-
-<template>
-  <UTabs :items="items" />
-</template>
diff --git a/docs/components/content/examples/TabsExampleChange.vue b/docs/components/content/examples/TabsExampleChange.vue
deleted file mode 100644
index d893e7e7..00000000
--- a/docs/components/content/examples/TabsExampleChange.vue
+++ /dev/null
@@ -1,22 +0,0 @@
-<script setup lang="ts">
-const items = [{
-  label: 'Tab1',
-  content: 'This is the content shown for Tab1'
-}, {
-  label: 'Tab2',
-  content: 'And, this is the content for Tab2'
-}, {
-  label: 'Tab3',
-  content: 'Finally, this is the content for Tab3'
-}]
-
-function onChange (index) {
-  const item = items[index]
-
-  alert(`${item.label} was clicked!`)
-}
-</script>
-
-<template>
-  <UTabs :items="items" @change="onChange" />
-</template>
diff --git a/docs/components/content/examples/TabsExampleDefaultSlot.vue b/docs/components/content/examples/TabsExampleDefaultSlot.vue
deleted file mode 100644
index 6d335b87..00000000
--- a/docs/components/content/examples/TabsExampleDefaultSlot.vue
+++ /dev/null
@@ -1,29 +0,0 @@
-<script setup lang="ts">
-const items = [{
-  label: 'Getting Started',
-  icon: 'i-heroicons-information-circle',
-  content: 'This is the content shown for Tab1'
-}, {
-  label: 'Installation',
-  icon: 'i-heroicons-arrow-down-tray',
-  content: 'And, this is the content for Tab2'
-}, {
-  label: 'Theming',
-  icon: 'i-heroicons-eye-dropper',
-  content: 'Finally, this is the content for Tab3'
-}]
-</script>
-
-<template>
-  <UTabs :items="items" class="w-full">
-    <template #default="{ item, index, selected }">
-      <div class="flex items-center gap-2 relative truncate">
-        <UIcon :name="item.icon" class="w-4 h-4 flex-shrink-0" />
-
-        <span class="truncate">{{ index + 1 }}. {{ item.label }}</span>
-
-        <span v-if="selected" class="absolute -right-4 w-2 h-2 rounded-full bg-primary-500 dark:bg-primary-400" />
-      </div>
-    </template>
-  </UTabs>
-</template>
diff --git a/docs/components/content/examples/TabsExampleIndex.vue b/docs/components/content/examples/TabsExampleIndex.vue
deleted file mode 100644
index 1482d147..00000000
--- a/docs/components/content/examples/TabsExampleIndex.vue
+++ /dev/null
@@ -1,16 +0,0 @@
-<script setup lang="ts">
-const items = [{
-  label: 'Tab1',
-  content: 'This is the content shown for Tab1'
-}, {
-  label: 'Tab2',
-  content: 'And, this is the content for Tab2'
-}, {
-  label: 'Tab3',
-  content: 'Finally, this is the content for Tab3'
-}]
-</script>
-
-<template>
-  <UTabs :items="items" :default-index="2" />
-</template>
diff --git a/docs/components/content/examples/TabsExampleItemCustomSlot.vue b/docs/components/content/examples/TabsExampleItemCustomSlot.vue
deleted file mode 100644
index 5a15e10a..00000000
--- a/docs/components/content/examples/TabsExampleItemCustomSlot.vue
+++ /dev/null
@@ -1,76 +0,0 @@
-<script setup lang="ts">
-const items = [{
-  slot: 'account',
-  label: 'Account'
-}, {
-  slot: 'password',
-  label: 'Password'
-}]
-
-const accountForm = reactive({ name: 'Benjamin', username: 'benjamincanac' })
-const passwordForm = reactive({ currentPassword: '', newPassword: '' })
-
-function onSubmitAccount () {
-  console.log('Submitted form:', accountForm)
-}
-
-function onSubmitPassword () {
-  console.log('Submitted form:', passwordForm)
-}
-</script>
-
-<template>
-  <UTabs :items="items" class="w-full">
-    <template #account="{ item }">
-      <UCard @submit.prevent="onSubmitAccount">
-        <template #header>
-          <p class="text-base font-semibold leading-6 text-gray-900 dark:text-white">
-            {{ item.label }}
-          </p>
-          <p class="mt-1 text-sm text-gray-500 dark:text-gray-400">
-            Make changes to your account here. Click save when you're done.
-          </p>
-        </template>
-
-        <UFormGroup label="Name" name="name" class="mb-3">
-          <UInput v-model="accountForm.name" />
-        </UFormGroup>
-        <UFormGroup label="Username" name="username">
-          <UInput v-model="accountForm.username" />
-        </UFormGroup>
-
-        <template #footer>
-          <UButton type="submit" color="black">
-            Save account
-          </UButton>
-        </template>
-      </UCard>
-    </template>
-
-    <template #password="{ item }">
-      <UCard @submit.prevent="onSubmitPassword">
-        <template #header>
-          <h3 class="text-base font-semibold leading-6 text-gray-900 dark:text-white">
-            {{ item.label }}
-          </h3>
-          <p class="mt-1 text-sm text-gray-500 dark:text-gray-400">
-            Change your password here. After saving, you'll be logged out.
-          </p>
-        </template>
-
-        <UFormGroup label="Current Password" name="current" required class="mb-3">
-          <UInput v-model="passwordForm.currentPassword" type="password" required />
-        </UFormGroup>
-        <UFormGroup label="New Password" name="new" required>
-          <UInput v-model="passwordForm.newPassword" type="password" required />
-        </UFormGroup>
-
-        <template #footer>
-          <UButton type="submit" color="black">
-            Save password
-          </UButton>
-        </template>
-      </UCard>
-    </template>
-  </UTabs>
-</template>
diff --git a/docs/components/content/examples/TabsExampleItemSlot.vue b/docs/components/content/examples/TabsExampleItemSlot.vue
deleted file mode 100644
index 9bc2a33a..00000000
--- a/docs/components/content/examples/TabsExampleItemSlot.vue
+++ /dev/null
@@ -1,58 +0,0 @@
-<script setup lang="ts">
-const items = [{
-  key: 'account',
-  label: 'Account',
-  description: 'Make changes to your account here. Click save when you\'re done.'
-}, {
-  key: 'password',
-  label: 'Password',
-  description: 'Change your password here. After saving, you\'ll be logged out.'
-}]
-
-const accountForm = reactive({ name: 'Benjamin', username: 'benjamincanac' })
-const passwordForm = reactive({ currentPassword: '', newPassword: '' })
-
-function onSubmit (form) {
-  console.log('Submitted form:', form)
-}
-</script>
-
-<template>
-  <UTabs :items="items" class="w-full">
-    <template #item="{ item }">
-      <UCard @submit.prevent="() => onSubmit(item.key === 'account' ? accountForm : passwordForm)">
-        <template #header>
-          <p class="text-base font-semibold leading-6 text-gray-900 dark:text-white">
-            {{ item.label }}
-          </p>
-          <p class="mt-1 text-sm text-gray-500 dark:text-gray-400">
-            {{ item.description }}
-          </p>
-        </template>
-
-        <div v-if="item.key === 'account'" class="space-y-3">
-          <UFormGroup label="Name" name="name">
-            <UInput v-model="accountForm.name" />
-          </UFormGroup>
-          <UFormGroup label="Username" name="username">
-            <UInput v-model="accountForm.username" />
-          </UFormGroup>
-        </div>
-        <div v-else-if="item.key === 'password'" class="space-y-3">
-          <UFormGroup label="Current Password" name="current" required>
-            <UInput v-model="passwordForm.currentPassword" type="password" required />
-          </UFormGroup>
-          <UFormGroup label="New Password" name="new" required>
-            <UInput v-model="passwordForm.newPassword" type="password" required />
-          </UFormGroup>
-        </div>
-
-        <template #footer>
-          <UButton type="submit" color="black">
-            Save {{ item.key === 'account' ? 'account' : 'password' }}
-          </UButton>
-        </template>
-      </UCard>
-    </template>
-  </UTabs>
-</template>
diff --git a/docs/components/content/examples/TabsExampleVModel.vue b/docs/components/content/examples/TabsExampleVModel.vue
deleted file mode 100644
index 97c690b4..00000000
--- a/docs/components/content/examples/TabsExampleVModel.vue
+++ /dev/null
@@ -1,34 +0,0 @@
-<script setup lang="ts">
-const items = [{
-  label: 'Tab1',
-  content: 'This is the content shown for Tab1'
-}, {
-  label: 'Tab2',
-  content: 'And, this is the content for Tab2'
-}, {
-  label: 'Tab3',
-  content: 'Finally, this is the content for Tab3'
-}]
-
-const route = useRoute()
-const router = useRouter()
-
-const selected = computed({
-  get () {
-    const index = items.findIndex((item) => item.label === route.query.tab)
-    if (index === -1) {
-      return 0
-    }
-
-    return index
-  },
-  set (value) {
-    // Hash is specified here to prevent the page from scrolling to the top
-    router.replace({ query: { tab: items[value].label }, hash: '#control-the-selected-index' })
-  }
-})
-</script>
-
-<template>
-  <UTabs v-model="selected" :items="items" />
-</template>
diff --git a/docs/components/content/examples/TabsExampleVertical.vue b/docs/components/content/examples/TabsExampleVertical.vue
deleted file mode 100644
index e49802ea..00000000
--- a/docs/components/content/examples/TabsExampleVertical.vue
+++ /dev/null
@@ -1,16 +0,0 @@
-<script setup lang="ts">
-const items = [{
-  label: 'Tab1',
-  content: 'This is the content shown for Tab1'
-}, {
-  label: 'Tab2',
-  content: 'And, this is the content for Tab2'
-}, {
-  label: 'Tab3',
-  content: 'Finally, this is the content for Tab3'
-}]
-</script>
-
-<template>
-  <UTabs :items="items" orientation="vertical" :ui="{ wrapper: 'flex items-center gap-4', list: { width: 'w-48' } }" />
-</template>
diff --git a/docs/components/content/examples/TextareaExample.vue b/docs/components/content/examples/TextareaExample.vue
deleted file mode 100644
index cbcb27d5..00000000
--- a/docs/components/content/examples/TextareaExample.vue
+++ /dev/null
@@ -1,7 +0,0 @@
-<script setup lang="ts">
-const value = ref('')
-</script>
-
-<template>
-  <UTextarea v-model="value" />
-</template>
diff --git a/docs/components/content/examples/ToggleExample.vue b/docs/components/content/examples/ToggleExample.vue
deleted file mode 100644
index 85d91463..00000000
--- a/docs/components/content/examples/ToggleExample.vue
+++ /dev/null
@@ -1,7 +0,0 @@
-<script setup lang="ts">
-const selected = ref(false)
-</script>
-
-<template>
-  <UToggle v-model="selected" />
-</template>
diff --git a/docs/components/content/examples/TooltipExample.vue b/docs/components/content/examples/TooltipExample.vue
deleted file mode 100644
index 41914e42..00000000
--- a/docs/components/content/examples/TooltipExample.vue
+++ /dev/null
@@ -1,5 +0,0 @@
-<template>
-  <UTooltip text="Tooltip example" :shortcuts="['⌘', 'O']">
-    <UButton color="gray" label="Hover me" />
-  </UTooltip>
-</template>
diff --git a/docs/components/content/examples/TooltipExampleArrow.vue b/docs/components/content/examples/TooltipExampleArrow.vue
deleted file mode 100644
index 16b56205..00000000
--- a/docs/components/content/examples/TooltipExampleArrow.vue
+++ /dev/null
@@ -1,5 +0,0 @@
-<template>
-  <UTooltip text="Tooltip example" :shortcuts="['⌘', 'O']" :popper="{ arrow: true }">
-    <UButton color="gray" label="Hover me" />
-  </UTooltip>
-</template>
diff --git a/docs/components/content/examples/TooltipExampleOffset.vue b/docs/components/content/examples/TooltipExampleOffset.vue
deleted file mode 100644
index c48d1f8c..00000000
--- a/docs/components/content/examples/TooltipExampleOffset.vue
+++ /dev/null
@@ -1,5 +0,0 @@
-<template>
-  <UTooltip text="Tooltip example" :shortcuts="['⌘', 'O']" :popper="{ offsetDistance: 16 }">
-    <UButton color="gray" label="Hover me" />
-  </UTooltip>
-</template>
diff --git a/docs/components/content/examples/TooltipExamplePlacement.vue b/docs/components/content/examples/TooltipExamplePlacement.vue
deleted file mode 100644
index 2723c071..00000000
--- a/docs/components/content/examples/TooltipExamplePlacement.vue
+++ /dev/null
@@ -1,5 +0,0 @@
-<template>
-  <UTooltip text="Tooltip example" :shortcuts="['⌘', 'O']" :popper="{ placement: 'right' }">
-    <UButton color="gray" label="Hover me" />
-  </UTooltip>
-</template>
diff --git a/docs/components/content/examples/VerticalNavigationExample.vue b/docs/components/content/examples/VerticalNavigationExample.vue
deleted file mode 100644
index f6b30567..00000000
--- a/docs/components/content/examples/VerticalNavigationExample.vue
+++ /dev/null
@@ -1,27 +0,0 @@
-<script setup lang="ts">
-const route = useRoute()
-
-const links = [{
-  label: 'Profile',
-  avatar: {
-    src: 'https://avatars.githubusercontent.com/u/739984?v=4'
-  },
-  badge: 100
-}, {
-  label: 'Installation',
-  icon: 'i-heroicons-home',
-  to: '/getting-started/installation'
-}, {
-  label: 'Vertical Navigation',
-  icon: 'i-heroicons-chart-bar',
-  to: `${route.path.startsWith('/dev') ? '/dev' : ''}/components/vertical-navigation`
-}, {
-  label: 'Command Palette',
-  icon: 'i-heroicons-command-line',
-  to: '/components/command-palette'
-}]
-</script>
-
-<template>
-  <UVerticalNavigation :links="links" />
-</template>
diff --git a/docs/components/content/examples/VerticalNavigationExampleAvatarSlot.vue b/docs/components/content/examples/VerticalNavigationExampleAvatarSlot.vue
deleted file mode 100644
index 04632259..00000000
--- a/docs/components/content/examples/VerticalNavigationExampleAvatarSlot.vue
+++ /dev/null
@@ -1,38 +0,0 @@
-<script setup lang="ts">
-const links = [{
-  avatar: {
-    src: 'https://ipx.nuxt.com/s_16x16/gh_avatar/benjamincanac',
-    srcset: 'https://ipx.nuxt.com/s_32x32/gh_avatar/benjamincanac 2x',
-    alt: ''
-  },
-  label: 'benjamincanac',
-  to: 'https://github.com/benjamincanac',
-  target: '_blank'
-}, {
-  avatar: {
-    src: 'https://ipx.nuxt.com/s_16x16/gh_avatar/Atinux',
-    srcset: 'https://ipx.nuxt.com/s_32x32/gh_avatar/Atinux 2x',
-    alt: ''
-  },
-  label: 'Atinux',
-  to: 'https://github.com/Atinux',
-  target: '_blank'
-}, {
-  avatar: {
-    src: 'https://ipx.nuxt.com/s_16x16/gh_avatar/smarroufin',
-    srcset: 'https://ipx.nuxt.com/s_32x32/gh_avatar/smarroufin 2x',
-    alt: ''
-  },
-  label: 'smarroufin',
-  to: 'https://github.com/smarroufin',
-  target: '_blank'
-}]
-</script>
-
-<template>
-  <UVerticalNavigation :links="links">
-    <template #avatar="{ link }">
-      <UAvatar v-bind="link.avatar" size="2xs" loading="lazy" />
-    </template>
-  </UVerticalNavigation>
-</template>
diff --git a/docs/components/content/examples/VerticalNavigationExampleBadgeSlot.vue b/docs/components/content/examples/VerticalNavigationExampleBadgeSlot.vue
deleted file mode 100644
index cecacf96..00000000
--- a/docs/components/content/examples/VerticalNavigationExampleBadgeSlot.vue
+++ /dev/null
@@ -1,35 +0,0 @@
-<script setup lang="ts">
-const links = [{
-  label: '.github',
-  icon: 'i-heroicons-folder-20-solid',
-  badge: 'chore(github): use pnpm 8',
-  time: 'last month'
-}, {
-  label: '.editorconfig',
-  icon: 'i-heroicons-document-solid',
-  badge: 'Initial commit',
-  time: '2 years ago'
-}, {
-  label: '.package.json',
-  icon: 'i-heroicons-document-solid',
-  badge: 'chore(deps): bump',
-  time: '16 hours ago'
-}]
-</script>
-
-<template>
-  <UVerticalNavigation
-    :links="links"
-    class="w-full"
-    :ui="{
-      label: 'truncate relative text-gray-900 dark:text-white flex-initial w-32 text-left'
-    }"
-  >
-    <template #badge="{ link }">
-      <div class="flex-1 flex justify-between relative truncate">
-        <div>{{ link.badge }}</div>
-        <div>{{ link.time }}</div>
-      </div>
-    </template>
-  </UVerticalNavigation>
-</template>
diff --git a/docs/components/content/examples/VerticalNavigationExampleDefaultSlot.vue b/docs/components/content/examples/VerticalNavigationExampleDefaultSlot.vue
deleted file mode 100644
index c99dd4f8..00000000
--- a/docs/components/content/examples/VerticalNavigationExampleDefaultSlot.vue
+++ /dev/null
@@ -1,20 +0,0 @@
-<script setup lang="ts">
-const links = [{
-  label: 'Vertical Navigation',
-  to: '/components/vertical-navigation'
-}, {
-  label: 'Command Palette',
-  to: '/components/command-palette'
-}, {
-  label: 'Table',
-  to: '/components/table'
-}]
-</script>
-
-<template>
-  <UVerticalNavigation :links="links">
-    <template #default="{ link }">
-      <span class="group-hover:text-primary relative">{{ link.label }}</span>
-    </template>
-  </UVerticalNavigation>
-</template>
diff --git a/docs/components/content/examples/VerticalNavigationExampleIconSlot.vue b/docs/components/content/examples/VerticalNavigationExampleIconSlot.vue
deleted file mode 100644
index 10806722..00000000
--- a/docs/components/content/examples/VerticalNavigationExampleIconSlot.vue
+++ /dev/null
@@ -1,44 +0,0 @@
-<script setup lang="ts">
-const types = {
-  bug: {
-    icon: 'i-heroicons-bug-ant-20-solid',
-    color: 'text-red-500'
-  },
-  docs: {
-    icon: 'i-heroicons-document-text-20-solid',
-    color: 'text-blue-500'
-  },
-  lock: {
-    icon: 'i-heroicons-lock-closed-20-solid',
-    color: 'text-gray dark:text-white'
-  },
-  default: {
-    icon: 'i-heroicons-question-mark-circle-20-solid',
-    color: 'text-green-500'
-  }
-}
-const links = [{
-  label: 'UDropdown and UPopover dropdown menu, dropdown will be obscured',
-  type: 'bug'
-}, {
-  label: 'Uncaught (in promise) ReferenceError: ref is not defined',
-  type: 'lock'
-}, {
-  label: 'Fully styled and customizable components for Nuxt.',
-  type: 'docs'
-}, {
-  label: 'Can I pass a tailwind color to UNotifications with `toast.add()` ?'
-}]
-</script>
-
-<template>
-  <UVerticalNavigation
-    :links="links"
-    :ui="{ wrapper: 'truncate' }"
-  >
-    <template #icon="{ link }">
-      <UIcon v-if="link.type" :name="types[link.type].icon" :class="types[link.type].color" class="text-base" />
-      <UIcon v-else :name="types.default.icon" :class="types.default.color" class="text-base" />
-    </template>
-  </UVerticalNavigation>
-</template>
diff --git a/docs/components/content/examples/VerticalNavigationExampleSections.vue b/docs/components/content/examples/VerticalNavigationExampleSections.vue
deleted file mode 100644
index 5cf73ebf..00000000
--- a/docs/components/content/examples/VerticalNavigationExampleSections.vue
+++ /dev/null
@@ -1,35 +0,0 @@
-<script setup lang="ts">
-const route = useRoute()
-
-const links = [
-  [{
-    label: 'Profile',
-    avatar: {
-      src: 'https://avatars.githubusercontent.com/u/739984?v=4'
-    },
-    badge: 100
-  }, {
-    label: 'Installation',
-    icon: 'i-heroicons-home',
-    to: '/getting-started/installation'
-  }, {
-    label: 'Vertical Navigation',
-    icon: 'i-heroicons-chart-bar',
-    to: `${route.path.startsWith('/dev') ? '/dev' : ''}/components/vertical-navigation`
-  }, {
-    label: 'Command Palette',
-    icon: 'i-heroicons-command-line',
-    to: '/components/command-palette'
-  }], [{
-    label: 'Examples',
-    icon: 'i-heroicons-light-bulb'
-  }, {
-    label: 'Help',
-    icon: 'i-heroicons-question-mark-circle'
-  }]
-]
-</script>
-
-<template>
-  <UVerticalNavigation :links="links" />
-</template>
diff --git a/docs/components/content/examples/VerticalNavigationExampleThemeTailwind.vue b/docs/components/content/examples/VerticalNavigationExampleThemeTailwind.vue
deleted file mode 100644
index 548960f9..00000000
--- a/docs/components/content/examples/VerticalNavigationExampleThemeTailwind.vue
+++ /dev/null
@@ -1,31 +0,0 @@
-<script setup lang="ts">
-const links = [{
-  label: 'Introduction',
-  to: '/getting-started'
-}, {
-  label: 'Installation',
-  to: '/getting-started/installation'
-}, {
-  label: 'Theming',
-  to: '/getting-started/theming'
-}, {
-  label: 'Shortcuts',
-  to: '/getting-started/shortcuts'
-}]
-</script>
-
-<template>
-  <UVerticalNavigation
-    :links="links"
-    :ui="{
-      wrapper: 'border-s border-gray-200 dark:border-gray-800 space-y-2',
-      base: 'group block border-s -ms-px leading-6 before:hidden',
-      padding: 'p-0 ps-4',
-      rounded: '',
-      font: '',
-      ring: '',
-      active: 'text-primary-500 dark:text-primary-400 border-current font-semibold',
-      inactive: 'border-transparent hover:border-gray-400 dark:hover:border-gray-500 text-gray-700 hover:text-gray-900 dark:text-gray-400 dark:hover:text-gray-300'
-    }"
-  />
-</template>
diff --git a/docs/components/date-picker/DatePicker.vue b/docs/components/date-picker/DatePicker.vue
deleted file mode 100644
index ad3168c8..00000000
--- a/docs/components/date-picker/DatePicker.vue
+++ /dev/null
@@ -1,73 +0,0 @@
-<script setup lang="ts">
-import { useBreakpoints, breakpointsTailwind } from '@vueuse/core'
-import { DatePicker as VCalendarDatePicker } from 'v-calendar'
-// @ts-ignore
-import type { DatePickerDate, DatePickerRangeObject } from 'v-calendar/dist/types/src/use/datePicker'
-import 'v-calendar/dist/style.css'
-
-defineOptions({
-  inheritAttrs: false
-})
-
-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 breakpoints = useBreakpoints(breakpointsTailwind)
-
-const smallerThanSm = breakpoints.smaller('sm')
-
-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 && (date as DatePickerRangeObject)?.start && (date as DatePickerRangeObject)?.end" v-model.range="date" :columns="smallerThanSm ? 1 : 2" :rows="smallerThanSm ? 2 : 1" 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>