From 0456a5ba0b0f6a786a51881b33dfc57120a261f8 Mon Sep 17 00:00:00 2001
From: zernonia <zernonia@gmail.com>
Date: Wed, 20 Sep 2023 14:19:08 +0800
Subject: [PATCH] docs: update docs build, some content

---
 .../.vitepress/theme/layout/MainLayout.vue    |  63 ++-
 .../src/content/docs/components/accordion.md  | 148 +------
 .../content/docs/components/alert-dialog.md   | 135 +-----
 apps/www/src/content/docs/components/alert.md |  13 +-
 .../content/docs/components/aspect-ratio.md   |  41 +-
 .../www/src/content/docs/components/avatar.md |  90 +---
 apps/www/src/content/docs/components/badge.md |  26 +-
 .../www/src/content/docs/components/button.md |  32 +-
 .../src/content/docs/components/calendar.md   | 112 +----
 apps/www/src/content/docs/components/card.md  |  12 +-
 .../src/content/docs/components/checkbox.md   |  74 +---
 .../content/docs/components/collapsible.md    |  87 +---
 .../src/content/docs/components/combobox.md   | 119 +----
 .../src/content/docs/components/command.md    |  14 +-
 .../content/docs/components/context-menu.md   | 358 +--------------
 .../www/src/content/docs/components/dialog.md | 144 +------
 .../content/docs/components/dropdown-menu.md  | 407 +-----------------
 .../src/content/docs/components/hover-card.md | 146 +------
 apps/www/src/content/docs/components/input.md |  26 +-
 apps/www/src/content/docs/components/label.md |  23 +-
 .../src/content/docs/components/menubar.md    | 382 +---------------
 .../docs/components/navigation-menu.md        | 362 +---------------
 .../src/content/docs/components/popover.md    | 145 -------
 .../src/content/docs/components/progress.md   |  48 +--
 .../content/docs/components/radio-group.md    | 100 -----
 .../content/docs/components/scroll-area.md    | 108 -----
 .../www/src/content/docs/components/select.md | 173 --------
 .../src/content/docs/components/separator.md  |  59 +--
 apps/www/src/content/docs/components/sheet.md |  13 +-
 .../src/content/docs/components/skeleton.md   |  16 +-
 .../www/src/content/docs/components/slider.md |  68 ---
 .../www/src/content/docs/components/switch.md |  43 +-
 apps/www/src/content/docs/components/table.md |  11 -
 apps/www/src/content/docs/components/tabs.md  | 145 +------
 .../src/content/docs/components/textarea.md   |  10 +-
 .../www/src/content/docs/components/toggle.md |  45 +-
 .../src/content/docs/components/tooltip.md    | 102 -----
 .../registry/default/example/CardWithForm.vue |  10 +-
 .../default/ui/command/CommandGroup.vue       |   2 +-
 .../default/ui/command/CommandList.vue        |   6 +-
 .../default/ui/dialog/DialogContent.vue       |   2 +-
 .../lib/registry/default/ui/input/Input.vue   |   2 +-
 .../new-york/example/AccordionDemo.vue        |   2 +-
 .../new-york/example/DatePickerDemo.vue       |   6 +-
 .../lib/registry/new-york/ui/input/Input.vue  |   2 +-
 45 files changed, 147 insertions(+), 3785 deletions(-)

diff --git a/apps/www/.vitepress/theme/layout/MainLayout.vue b/apps/www/.vitepress/theme/layout/MainLayout.vue
index 8a607f98..a1a0015c 100644
--- a/apps/www/.vitepress/theme/layout/MainLayout.vue
+++ b/apps/www/.vitepress/theme/layout/MainLayout.vue
@@ -1,10 +1,9 @@
 <script setup lang="ts">
-import { useToggle } from '@vueuse/core'
-import { onMounted, watch } from 'vue'
+import { useMagicKeys, useToggle } from '@vueuse/core'
+import { onMounted, ref, watch } from 'vue'
 import { Content, useData, useRoute, useRouter } from 'vitepress'
-import { onMounted, onUnmounted, ref } from 'vue'
 import { SearchIcon } from 'lucide-vue-next'
-import { docsConfig } from '../config/docs'
+import { type NavItem, docsConfig } from '../config/docs'
 import Logo from '../components/Logo.vue'
 import MobileNav from '../components/MobileNav.vue'
 
@@ -27,7 +26,6 @@ const { radius, theme } = useConfigStore()
 onMounted(() => {
   document.documentElement.style.setProperty('--radius', `${radius.value}rem`)
   document.documentElement.classList.add(`theme-${theme.value}`)
-  window.addEventListener('keydown', onKeyDown)
 })
 
 const { frontmatter, isDark } = useData()
@@ -48,26 +46,22 @@ const links = [
   //   icon: TablerBrandX,
   // },
 ]
- 
-const isOpen = ref<boolean>(false)
 
-function onKeyDown(event: KeyboardEvent) {
-  if (isOpen.value)
-    return
+const isOpen = ref(false)
+const { Meta_K, Ctrl_K } = useMagicKeys()
 
-  if ((event.metaKey || event.ctrlKey) && event.key === 'k') {
-    event.preventDefault()
+watch([Meta_K, Ctrl_K], (v) => {
+  if (v[0] || v[1])
     isOpen.value = true
-  }
-}
-
-onUnmounted(() => {
-  window.removeEventListener('keydown', onKeyDown)
 })
 
-function openInNewTab(url: string | undefined) {
-  const win = window.open(url, '_blank')
-  win?.focus()
+function handleSelectLink(item: NavItem) {
+  if (item.external)
+    window.open(item.href, '_blank')
+  else
+    $router.go(item.href)
+
+  isOpen.value = false
 }
 
 watch(() => $route.path, (n) => {
@@ -78,7 +72,7 @@ watch(() => $route.path, (n) => {
       console.log('soft navigating to: ', n)
     })
   }
-}) 
+})
 </script>
 
 <template>
@@ -218,7 +212,9 @@ watch(() => $route.path, (n) => {
           <CommandEmpty>
             No results found.
           </CommandEmpty>
-          <CommandList>
+          <CommandList
+            @escape-key-down=" isOpen = false"
+          >
             <CommandGroup heading="Links">
               <CommandItem
                 v-for="item in docsConfig.mainNav"
@@ -226,15 +222,7 @@ watch(() => $route.path, (n) => {
                 :heading="item.title"
                 :value="item.title"
                 class="py-3"
-                @select="() => {
-                  if (item.external) {
-                    openInNewTab(item.href);
-                  }
-                  else {
-                    $router.go(`${item.href}.html`);
-                  }
-                  isOpen = false;
-                }"
+                @select="handleSelectLink(item)"
               >
                 <File class="mr-2 h-5 w-5" />
                 <span>{{ item.title }}</span>
@@ -243,12 +231,15 @@ watch(() => $route.path, (n) => {
             <CommandSeparator />
             <CommandGroup v-for="item in docsConfig.sidebarNav" :key="item.title" :heading="item.title">
               <CommandItem
-                v-for="subItem in item.items" :key="subItem.title" :heading="subItem.title" :value="subItem.title" class="py-3" @select="() => {
-                  $router.go(`${subItem.href}.html`)
-                  isOpen = false
-                }"
+                v-for="subItem in item.items"
+                :key="subItem.title"
+                :heading="subItem.title"
+                :value="subItem.title"
+                class="py-3"
+                @select="
+                  handleSelectLink(subItem)"
               >
-                <Circle class="mr-2 h-5 w-5" />
+                <Circle class="mr-2 h-4 w-4" />
                 <span>{{ subItem.title }}</span>
               </CommandItem>
             </CommandGroup>
diff --git a/apps/www/src/content/docs/components/accordion.md b/apps/www/src/content/docs/components/accordion.md
index 4f4c29cd..a2f6b862 100644
--- a/apps/www/src/content/docs/components/accordion.md
+++ b/apps/www/src/content/docs/components/accordion.md
@@ -9,9 +9,7 @@ primitive: https://www.radix-vue.com/components/accordion.html
 <ComponentPreview name="AccordionDemo" class="[&_.accordion]:sm:max-w-[70%]" />
 
 ## Installation
-
-<TabPreview name="CLI">
-<template #CLI>
+ 
 
 <Steps>
 
@@ -48,134 +46,9 @@ module.exports = {
   },
 }
 ```
-
+  
 </Steps>
-
-</template>
-
-<template #Manual>
-
-<Steps>
-
-### Install the following dependencies:
-
-```bash
-npm install radix-vue
-
-npm install --save-dev @iconify/vue
-```
-
-### Copy and paste the following code into your project
-
-```vue
-<script setup lang="ts">
-import { AccordionContent, AccordionHeader, AccordionItem, AccordionRoot, AccordionTrigger } from 'radix-vue'
-import { Icon } from '@iconify/vue'
-
-const accordionItems = [
-  {
-    value: 'item-1',
-    title: 'Is it accessible?',
-    content: 'Yes. It adheres to the WAI-ARIA design pattern.',
-  },
-  {
-    value: 'item-2',
-    title: 'Is it unstyled?',
-    content: 'Yes. It\'s unstyled by default, giving you freedom over the look and feel.',
-  },
-  {
-    value: 'item-3',
-    title: 'Can it be animated?',
-    content: 'Yes! You can use the transition prop to configure the animation.',
-  },
-]
-</script>
-
-<template>
-  <AccordionRoot
-    class="bg-mauve6 w-[300px] rounded-md shadow-[0_2px_10px] shadow-black/5"
-    default-value="'item-1'"
-    type="single"
-    :collapsible="true"
-  >
-    <template v-for="item in accordionItems" :key="item.value">
-      <AccordionItem class="accordion-item" :value="item.value">
-        <AccordionHeader class="flex">
-          <AccordionTrigger class="accordion-trigger group">
-            <span>{{ item.title }}</span>
-            <Icon
-              icon="radix-icons:chevron-down"
-              class="text-green10 ease-[cubic-bezier(0.87,_0,_0.13,_1)] transition-transform duration-300 group-data-[state=open]:rotate-180"
-              aria-hidden
-            />
-          </AccordionTrigger>
-        </AccordionHeader>
-        <AccordionContent class="accordion-content">
-          <div class="px-5 py-4">
-            {{ item.content }}
-          </div>
-        </AccordionContent>
-      </AccordionItem>
-    </template>
-  </AccordionRoot>
-</template>
-
-<style scoped>
-.accordion-item {
-  @apply focus-within:shadow-mauve12 mt-px overflow-hidden first:mt-0 first:rounded-t last:rounded-b focus-within:relative focus-within:z-10 focus-within:shadow-[0_0_0_2px];
-}
-
-.accordion-trigger {
-  @apply text-grass11  shadow-mauve6 hover:bg-mauve2 flex h-[45px] flex-1 cursor-default items-center justify-between bg-white px-5 text-[15px] leading-none shadow-[0_1px_0] outline-none;
-}
-
-.accordion-content {
-  @apply text-mauve11 bg-mauve2 data-[state=open]:animate-slideDown data-[state=closed]:animate-slideUp overflow-hidden text-[15px];
-}
-</style>
-```
-
-### Update `tailwind.config.js`
-
-Add the following animations to your `tailwind.config.js` file:
-
-```ts
-const { green, grass, mauve } = require('@radix-ui/colors')
-
-/** @type {import('tailwindcss').Config} */
-module.exports = {
-  content: ['./**/*.vue'],
-  theme: {
-    extend: {
-      colors: {
-        ...mauve,
-        ...green,
-        ...grass,
-      },
-      keyframes: {
-        slideDown: {
-          from: { height: 0 },
-          to: { height: 'var(--radix-accordion-content-height)' },
-        },
-        slideUp: {
-          from: { height: 'var(--radix-accordion-content-height)' },
-          to: { height: 0 },
-        },
-      },
-      animation: {
-        slideDown: 'slideDown 300ms cubic-bezier(0.87, 0, 0.13, 1)',
-        slideUp: 'slideUp 300ms cubic-bezier(0.87, 0, 0.13, 1)',
-      },
-    },
-  },
-  plugins: [],
-}
-```
-
-</Steps>
-
-</template>
-</TabPreview>
+ 
 
 ## Usage
 
@@ -185,26 +58,13 @@ import { Accordion, AccordionContent, AccordionItem, AccordionTrigger } from '@/
 </script>
 
 <template>
-  <Accordion type="single" collapsible class="w-full">
+  <Accordion type="single" collapsible>
     <AccordionItem value="item-1">
       <AccordionTrigger>Is it accessible?</AccordionTrigger>
       <AccordionContent>
         Yes. It adheres to the WAI-ARIA design pattern.
       </AccordionContent>
     </AccordionItem>
-    <AccordionItem value="item-2">
-      <AccordionTrigger>Is it styled?</AccordionTrigger>
-      <AccordionContent>
-        Yes. It comes with default styles that matches the other
-        components&apos; aesthetic.
-      </AccordionContent>
-    </AccordionItem>
-    <AccordionItem value="item-3">
-      <AccordionTrigger>Is it animated?</AccordionTrigger>
-      <AccordionContent>
-        Yes. It's animated by default, but you can disable it if you prefer.
-      </AccordionContent>
-    </AccordionItem>
   </Accordion>
 </template>
 ```
diff --git a/apps/www/src/content/docs/components/alert-dialog.md b/apps/www/src/content/docs/components/alert-dialog.md
index 4e042861..73ea6da1 100644
--- a/apps/www/src/content/docs/components/alert-dialog.md
+++ b/apps/www/src/content/docs/components/alert-dialog.md
@@ -10,135 +10,12 @@ primitive: https://www.radix-vue.com/components/alert-dialog.html
  
 ## Installation
 
-<TabPreview name="CLI">
-<template #CLI>
+ 
 
 ```bash
 npx shadcn-vue@latest add alert-dialog
 ```
-</template>
-
-<template #Manual>
-
-<Steps>
-
-### Install the following dependency:
-
-```bash
-npm install radix-vue
-```
-
-### Copy and paste the following code into your project
-
-```vue
-<script setup lang="ts">
-import {
-  AlertDialogAction,
-  AlertDialogCancel,
-  AlertDialogContent,
-  AlertDialogDescription,
-  AlertDialogOverlay,
-  AlertDialogPortal,
-  AlertDialogRoot,
-  AlertDialogTitle,
-  AlertDialogTrigger,
-} from 'radix-vue'
-
-function handleAction() {
-  alert('clicked action button!')
-}
-</script>
-
-<template>
-  <AlertDialogRoot>
-    <AlertDialogTrigger
-      class="bg-white text-grass11 font-semibold hover:bg-white/90 shadow-sm inline-flex h-[35px] items-center justify-center rounded-[4px] px-[15px] leading-none outline-none focus:shadow-[0_0_0_2px] focus:shadow-black transition-all"
-    >
-      Delete account
-    </AlertDialogTrigger>
-    <AlertDialogPortal>
-      <AlertDialogOverlay class="alert-dialog-overlay" />
-      <AlertDialogContent
-        class="alert-dialog-content"
-      >
-        <AlertDialogTitle class="text-mauve12 m-0 text-[17px] font-semibold">
-          Are you absolutely sure?
-        </AlertDialogTitle>
-        <AlertDialogDescription class="text-mauve11 mt-4 mb-5 text-[15px] leading-normal">
-          This action cannot be undone. This will permanently delete your account and remove your data from our servers.
-        </AlertDialogDescription>
-        <div class="flex justify-end gap-[25px]">
-          <AlertDialogCancel
-            class="text-mauve11 bg-mauve4 hover:bg-mauve5 focus:shadow-mauve7 inline-flex h-[35px] items-center justify-center rounded-[4px] px-[15px] font-semibold leading-none outline-none focus:shadow-[0_0_0_2px]"
-          >
-            Cancel
-          </AlertDialogCancel>
-          <AlertDialogAction
-            class="text-red11 bg-red4 hover:bg-red5 focus:shadow-red7 inline-flex h-[35px] items-center justify-center rounded-[4px] px-[15px] font-semibold leading-none outline-none focus:shadow-[0_0_0_2px]"
-            @click="handleAction"
-          >
-            Yes, delete account
-          </AlertDialogAction>
-        </div>
-      </AlertDialogContent>
-    </AlertDialogPortal>
-  </AlertDialogRoot>
-</template>
-
-<style>
-.alert-dialog-overlay {
-  @apply bg-blackA9 data-[state=open]:animate-overlayShow fixed inset-0 z-20;
-}
-
-.alert-dialog-content {
-  @apply z-20 text-[15px] data-[state=open]:animate-contentShow fixed top-[50%] left-[50%] max-h-[85vh] w-[90vw] max-w-[500px] translate-x-[-50%] translate-y-[-50%] rounded-[6px] bg-white p-[25px] shadow-[hsl(206_22%_7%_/_35%)_0px_10px_38px_-10px,_hsl(206_22%_7%_/_20%)_0px_10px_20px_-15px] focus:outline-none;
-}
-</style>
-```
-
-### Update `tailwind.config.js`
-
-Add the following animations to your `tailwind.config.js` file:
-
-```ts
-const { mauve, green, grass, blackA } = require('@radix-ui/colors')
-
-/** @type {import('tailwindcss').Config} */
-module.exports = {
-  content: ['./**/*.vue'],
-  theme: {
-    extend: {
-      colors: {
-        ...mauve,
-        ...green,
-        ...grass,
-        ...blackA,
-      },
-      keyframes: {
-        overlayShow: {
-          from: { opacity: 0 },
-          to: { opacity: 1 },
-        },
-        contentShow: {
-          from: { opacity: 0, transform: 'translate(-50%, -48%) scale(0.96)' },
-          to: { opacity: 1, transform: 'translate(-50%, -50%) scale(1)' },
-        },
-      },
-      animation: {
-        overlayShow: 'overlayShow 150ms cubic-bezier(0.16, 1, 0.3, 1)',
-        contentShow: 'contentShow 150ms cubic-bezier(0.16, 1, 0.3, 1)',
-      },
-    },
-  },
-  plugins: [],
-}
-```
-</Steps>
-
-</template>
-</TabPreview>
-
-
+  
 ## Usage
 
 ```vue
@@ -158,15 +35,13 @@ import {
 
 <template>
   <AlertDialog>
-    <AlertDialogTrigger>
-      Open
-    </AlertDialogTrigger>
+    <AlertDialogTrigger>Open</AlertDialogTrigger>
     <AlertDialogContent>
       <AlertDialogHeader>
         <AlertDialogTitle>Are you absolutely sure?</AlertDialogTitle>
         <AlertDialogDescription>
-          This action cannot be undone. This will permanently delete your
-          account and remove your data from our servers.
+          This action cannot be undone. This will permanently delete your account
+          and remove your data from our servers.
         </AlertDialogDescription>
       </AlertDialogHeader>
       <AlertDialogFooter>
diff --git a/apps/www/src/content/docs/components/alert.md b/apps/www/src/content/docs/components/alert.md
index 5243f72c..aeda3888 100644
--- a/apps/www/src/content/docs/components/alert.md
+++ b/apps/www/src/content/docs/components/alert.md
@@ -8,20 +8,11 @@ description: Displays a callout for user attention.
 
 ## Installation
 
-<TabPreview name="CLI">
-<template #CLI>
-
+ 
 ```bash
 npx shadcn-vue@latest add alert
 ```
-</template>
-
-<template #Manual>
-
-#### Coming soon...
-</template>
-</TabPreview>
-
+  
 ## Usage
 
 ```vue
diff --git a/apps/www/src/content/docs/components/aspect-ratio.md b/apps/www/src/content/docs/components/aspect-ratio.md
index 6ba948bc..ec6475d9 100644
--- a/apps/www/src/content/docs/components/aspect-ratio.md
+++ b/apps/www/src/content/docs/components/aspect-ratio.md
@@ -30,44 +30,7 @@ npm install radix-vue
 
 ### Copy and paste the following code into your project:
 
-```vue
-<script setup lang="ts">
-import { AspectRatio } from 'radix-vue'
-</script>
-
-<template>
-  <div class="shadow-blackA7 w-full sm:w-[300px] overflow-hidden rounded-md shadow-[0_2px_10px]">
-    <AspectRatio :ratio="16 / 9">
-      <img
-        class="h-full w-full object-cover"
-        src="https://images.unsplash.com/photo-1535025183041-0991a977e25b?w=300&dpr=2&q=80"
-        alt="Landscape photograph by Tobias Tullius"
-      >
-    </AspectRatio>
-  </div>
-</template>
-```
-
-### Update `tailwind.config.js`
-
-Add the following to your `tailwind.config.js` file:
-
-```ts
-const { blackA } = require('@radix-ui/colors')
-
-/** @type {import('tailwindcss').Config} */
-module.exports = {
-  content: ['./**/*.vue'],
-  theme: {
-    extend: {
-      colors: {
-        ...blackA,
-      },
-    },
-  },
-  plugins: [],
-}
-```
+<<< @/lib/registry/default/ui/aspect-ratio/AspectRatio.vue
 
 </Steps>
 
@@ -84,7 +47,7 @@ import { AspectRatio } from '@/components/ui/aspect-ratio'
 <template>
   <div class="w-[450px]">
     <AspectRatio :ratio="16 / 9">
-      <img src="https://images.unsplash.com/photo-1588345921523-c2dcdb7f1dcd?w=800&dpr=2&q=80">
+      <img src="..." alt="Image" class="rounded-md object-cover">
     </AspectRatio>
   </div>
 </template>
diff --git a/apps/www/src/content/docs/components/avatar.md b/apps/www/src/content/docs/components/avatar.md
index 0a2cd8b7..0f1dbdef 100644
--- a/apps/www/src/content/docs/components/avatar.md
+++ b/apps/www/src/content/docs/components/avatar.md
@@ -11,94 +11,10 @@ primitive: https://www.radix-vue.com/components/avatar.html
 
 ## Installation
 
-<TabPreview name="CLI">
-<template #CLI>
-
+ 
 ```bash
 npx shadcn-vue@latest add avatar
-```
-</template>
-
-<template #Manual>
-
-<Steps>
-
-### Install the following dependency:
-
-```bash
-npm install radix-vue
-```
-
-### Copy and paste the following code into your project:
-
-```vue
-<script setup lang="ts">
-import { AvatarFallback, AvatarImage, AvatarRoot } from 'radix-vue'
-</script>
-
-<template>
-  <div class="flex gap-5">
-    <AvatarRoot class="bg-blackA3 inline-flex h-[45px] w-[45px] select-none items-center justify-center overflow-hidden rounded-full align-middle">
-      <AvatarImage
-        class="h-full w-full rounded-[inherit] object-cover"
-        src="https://images.unsplash.com/photo-1492633423870-43d1cd2775eb?&w=128&h=128&dpr=2&q=80"
-        alt="Colm Tuite"
-      />
-      <AvatarFallback
-        class="text-grass11 leading-1 flex h-full w-full items-center justify-center bg-white text-[15px] font-medium"
-        :delay-ms="600"
-      >
-        CT
-      </AvatarFallback>
-    </AvatarRoot>
-    <AvatarRoot class="bg-blackA3 inline-flex h-[45px] w-[45px] select-none items-center justify-center overflow-hidden rounded-full align-middle">
-      <AvatarImage
-        class="h-full w-full rounded-[inherit] object-cover"
-        src="https://images.unsplash.com/photo-1511485977113-f34c92461ad9?ixlib=rb-1.2.1&w=128&h=128&dpr=2&q=80"
-        alt="Pedro Duarte"
-      />
-      <AvatarFallback
-        class="text-grass11 leading-1 flex h-full w-full items-center justify-center bg-white text-[15px] font-medium"
-        :delay-ms="600"
-      >
-        JD
-      </AvatarFallback>
-    </AvatarRoot>
-    <AvatarRoot class="bg-blackA3 inline-flex h-[45px] w-[45px] select-none items-center justify-center overflow-hidden rounded-full align-middle">
-      <AvatarFallback class="text-grass11 leading-1 flex h-full w-full items-center justify-center bg-white text-[15px] font-medium">
-        PD
-      </AvatarFallback>
-    </AvatarRoot>
-  </div>
-</template>
-```
-
-### Update `tailwind.config.js`
-
-Add the following to your `tailwind.config.js` file:
-
-```ts
-const { blackA, grass } = require('@radix-ui/colors')
-
-/** @type {import('tailwindcss').Config} */
-module.exports = {
-  content: ['./**/*.vue'],
-  theme: {
-    extend: {
-      colors: {
-        ...blackA,
-        ...grass,
-      },
-    },
-  },
-  plugins: [],
-}
-```
-
-</Steps>
-
-</template>
-</TabPreview>
+``` 
 
 ## Usage
 
@@ -109,7 +25,7 @@ import { Avatar, AvatarFallback, AvatarImage } from '@/components/ui/avatar'
 
 <template>
   <Avatar>
-    <AvatarImage src="https://github.com/shadcn.png" alt="@shadcn" />
+    <AvatarImage src="https://github.com/radix-vue.png" alt="@radix-vue" />
     <AvatarFallback>CN</AvatarFallback>
   </Avatar>
 </template>
diff --git a/apps/www/src/content/docs/components/badge.md b/apps/www/src/content/docs/components/badge.md
index ef552aae..adb588cc 100644
--- a/apps/www/src/content/docs/components/badge.md
+++ b/apps/www/src/content/docs/components/badge.md
@@ -24,16 +24,36 @@ npx shadcn-vue@latest add badge
 
 ```vue
 <script setup lang="ts">
-import type { VariantProps } from 'class-variance-authority'
-import { badgeVariants } from '.'
+import { type VariantProps, cva } from 'class-variance-authority'
 import { cn } from '@/lib/utils'
 
+defineProps<Props>()
+
+const badgeVariants = cva(
+  'inline-flex items-center rounded-full border px-2.5 py-0.5 text-xs font-semibold transition-colors focus:outline-none focus:ring-2 focus:ring-ring focus:ring-offset-2',
+  {
+    variants: {
+      variant: {
+        default:
+          'border-transparent bg-primary text-primary-foreground hover:bg-primary/80',
+        secondary:
+          'border-transparent bg-secondary text-secondary-foreground hover:bg-secondary/80',
+        destructive:
+          'border-transparent bg-destructive text-destructive-foreground hover:bg-destructive/80',
+        outline: 'text-foreground',
+      },
+    },
+    defaultVariants: {
+      variant: 'default',
+    },
+  },
+)
+
 interface BadgeVariantProps extends VariantProps<typeof badgeVariants> {}
 
 interface Props {
   variant?: BadgeVariantProps['variant']
 }
-defineProps<Props>()
 </script>
 
 <template>
diff --git a/apps/www/src/content/docs/components/button.md b/apps/www/src/content/docs/components/button.md
index 389a771d..3644921c 100644
--- a/apps/www/src/content/docs/components/button.md
+++ b/apps/www/src/content/docs/components/button.md
@@ -24,15 +24,45 @@ npx shadcn-vue@latest add button
 
 ```vue
 <script setup lang="ts">
-import { buttonVariants } from '.'
+import { cva } from 'class-variance-authority'
 import { cn } from '@/lib/utils'
 
+const buttonVariants = cva(
+  'inline-flex items-center justify-center rounded-md text-sm font-medium ring-offset-background transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:pointer-events-none disabled:opacity-50',
+  {
+    variants: {
+      variant: {
+        default: 'bg-primary text-primary-foreground hover:bg-primary/90',
+        destructive:
+          'bg-destructive text-destructive-foreground hover:bg-destructive/90',
+        outline:
+          'border border-input bg-background hover:bg-accent hover:text-accent-foreground',
+        secondary:
+          'bg-secondary text-secondary-foreground hover:bg-secondary/80',
+        ghost: 'hover:bg-accent hover:text-accent-foreground',
+        link: 'text-primary underline-offset-4 hover:underline',
+      },
+      size: {
+        default: 'h-10 px-4 py-2',
+        sm: 'h-9 rounded-md px-3',
+        lg: 'h-11 rounded-md px-8',
+        icon: 'h-10 w-10',
+      },
+    },
+    defaultVariants: {
+      variant: 'default',
+      size: 'default',
+    },
+  },
+)
+
 interface Props {
   variant?: NonNullable<Parameters<typeof buttonVariants>[0]>['variant']
   size?: NonNullable<Parameters<typeof buttonVariants>[0]>['size']
   as?: string
 }
 
+// eslint-disable-next-line vue/define-macros-order
 withDefaults(defineProps<Props>(), {
   as: 'button',
 })
diff --git a/apps/www/src/content/docs/components/calendar.md b/apps/www/src/content/docs/components/calendar.md
index 0691cd22..130f63f3 100644
--- a/apps/www/src/content/docs/components/calendar.md
+++ b/apps/www/src/content/docs/components/calendar.md
@@ -32,118 +32,8 @@ npm install v-calendar
 
 ### Copy and paste the following code into your project
 
-```vue
-<script setup lang="ts">
-import { useVModel } from '@vueuse/core'
-import type { Calendar } from 'v-calendar'
-import { DatePicker } from 'v-calendar'
-import { ChevronLeft, ChevronRight } from 'lucide-vue-next'
-import { computed, nextTick, onMounted, ref } from 'vue'
-import { buttonVariants } from '../button'
-import { cn } from '@/lib/utils'
 
-const props = withDefaults(defineProps< {
-  modelValue?: string | number | Date | Partial<{
-    start: Date
-    end: Date
-  }>
-  modelModifiers?: object
-  columns?: number
-  type?: 'single' | 'range'
-}>(), {
-  type: 'single',
-  columns: 1,
-})
-const emits = defineEmits<{
-  (e: 'update:modelValue', payload: typeof props.modelValue): void
-}>()
-
-const modelValue = useVModel(props, 'modelValue', emits, {
-  passive: true,
-})
-
-const datePicker = ref<InstanceType<typeof DatePicker>>()
-// @ts-expect-error in this current version of v-calendar has the calendaRef instance, which is required to handle arrow nav.
-const calendarRef = computed<InstanceType<typeof Calendar>>(() => datePicker.value.calendarRef)
-
-function handleNav(direction: 'prev' | 'next') {
-  if (!calendarRef.value)
-    return
-
-  if (direction === 'prev')
-    calendarRef.value.movePrev()
-  else calendarRef.value.moveNext()
-}
-
-onMounted(async () => {
-  await nextTick()
-  await nextTick()
-  if (modelValue.value instanceof Date && calendarRef.value)
-    calendarRef.value.focusDate(modelValue.value)
-})
-</script>
-
-<template>
-  <div class="relative">
-    <div class="absolute top-3 flex justify-between w-full px-4">
-      <button :class="cn(buttonVariants({ variant: 'outline' }), 'h-7 w-7 bg-transparent p-0 opacity-50 hover:opacity-100')" @click="handleNav('prev')">
-        <ChevronLeft class="w-4 h-4" />
-      </button>
-      <button :class="cn(buttonVariants({ variant: 'outline' }), 'h-7 w-7 bg-transparent p-0 opacity-50 hover:opacity-100')" @click="handleNav('next')">
-        <ChevronRight class="w-4 h-4" />
-      </button>
-    </div>
-
-    <DatePicker ref="datePicker" v-model="modelValue" :model-modifiers="modelModifiers" class="calendar" trim-weeks :transition="'none'" :columns="columns" />
-  </div>
-</template>
-
-<style lang="postcss">
-.calendar {
-  @apply p-3 text-center;
-}
-.calendar .vc-pane-layout {
-  @apply grid gap-4;
-}
-.calendar .vc-title {
-  @apply text-sm font-medium pointer-events-none;
-}
-.calendar .vc-pane-header-wrapper {
-  @apply hidden;
-}
-.calendar .vc-weeks {
-  @apply mt-4;
-}
-.calendar .vc-weekdays {
-  @apply flex;
-}
-.calendar .vc-weekday {
-  @apply text-muted-foreground rounded-md w-9 font-normal text-[0.8rem];
-}
-.calendar .vc-weeks {
-  @apply w-full space-y-2 flex flex-col [&>_div]:grid [&>_div]:grid-cols-7;
-}
-.calendar .vc-day:has(.vc-highlights) {
-  @apply bg-accent first:rounded-l-md last:rounded-r-md overflow-hidden;
-}
-.calendar .vc-day-content  {
-  @apply text-center text-sm p-0 relative focus-within:relative focus-within:z-20 inline-flex items-center justify-center ring-offset-background transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 hover:bg-accent hover:text-accent-foreground h-9 w-9  font-normal aria-selected:opacity-100 select-none;
-}
-.calendar .vc-day-content:not(.vc-highlight-content-light) {
-  @apply rounded-md;
-}
-.calendar .is-not-in-month:not(:has(.vc-highlight-content-solid)):not(:has(.vc-highlight-content-light)):not(:has(.vc-highlight-content-outline)),
-.calendar .vc-disabled {
-  @apply text-muted-foreground opacity-50;
-}
-.calendar .vc-highlight-content-solid, .calendar .vc-highlight-content-outline {
-  @apply bg-primary text-primary-foreground hover:bg-primary hover:text-primary-foreground focus:bg-primary focus:text-primary-foreground;
-}
-.calendar .vc-highlight-content-light {
-  @apply bg-accent text-accent-foreground;
-}
-</style>
-```
+<<< @/lib/registry/default/ui/calendar/Calendar.vue
 
 
 </Steps>
diff --git a/apps/www/src/content/docs/components/card.md b/apps/www/src/content/docs/components/card.md
index 95bac00e..87c970da 100644
--- a/apps/www/src/content/docs/components/card.md
+++ b/apps/www/src/content/docs/components/card.md
@@ -8,19 +8,11 @@ description: Displays a card with header, content, and footer.
 
 ## Installation
 
-<TabPreview name="CLI">
-<template #CLI>
+ 
 
 ```bash
 npx shadcn-vue@latest add card
-```
-</template>
-
-<template #Manual>
-
-#### Coming soon...
-</template>
-</TabPreview>
+``` 
 
 ## Usage
 
diff --git a/apps/www/src/content/docs/components/checkbox.md b/apps/www/src/content/docs/components/checkbox.md
index dbcd61fb..65db264d 100644
--- a/apps/www/src/content/docs/components/checkbox.md
+++ b/apps/www/src/content/docs/components/checkbox.md
@@ -10,81 +10,11 @@ primitive: https://www.radix-vue.com/components/checkbox.html
 
 
 ## Installation
-
-<TabPreview name="CLI">
-<template #CLI>
+ 
 
 ```bash
 npx shadcn-vue@latest add checkbox
-```
-</template>
-
-<template #Manual>
-
-<Steps>
-
-### Install the following dependencies:
-
-```bash
-npm install radix-vue
-
-npm install --save-dev @iconify/vue
-```
-
-### Copy and paste the following code into your project
-
-```vue
-<script setup lang="ts">
-import { ref } from 'vue'
-import { CheckboxIndicator, CheckboxRoot } from 'radix-vue'
-import { Icon } from '@iconify/vue'
-
-const checkboxOne = ref(true)
-</script>
-
-<template>
-  <div class="flex flex-col gap-2.5">
-    <label class="flex flex-row gap-4 items-center [&>.checkbox]:hover:bg-neutral-100">
-      <CheckboxRoot
-        v-model="checkboxOne"
-        class="shadow-blackA7 hover:bg-green3 flex h-[25px] w-[25px] appearance-none items-center justify-center rounded-[4px] bg-white shadow-[0_2px_10px] outline-none focus-within:shadow-[0_0_0_2px_black]"
-      >
-        <CheckboxIndicator class="bg-white h-full w-full rounded flex items-center justify-center">
-          <Icon icon="radix-icons:check" class="h-3.5 w-3.5 text-grass11" />
-        </CheckboxIndicator>
-      </CheckboxRoot>
-      <span class="select-none text-white">Accept terms and conditions.</span>
-    </label>
-  </div>
-</template>
-```
-
-### Update `tailwind.config.js`
-
-Add the following to your tailwind.config.js file:
-
-```ts
-const { blackA, green } = require('@radix-ui/colors')
-
-/** @type {import('tailwindcss').Config} */
-module.exports = {
-  content: ['./**/*.vue'],
-  theme: {
-    extend: {
-      colors: {
-        ...blackA,
-        ...green,
-      },
-    },
-  },
-  plugins: [],
-}
-```
-
-</Steps>
-
-</template>
-</TabPreview>
+``` 
 
 ## Usage
 
diff --git a/apps/www/src/content/docs/components/collapsible.md b/apps/www/src/content/docs/components/collapsible.md
index 316cf346..a1307c5a 100644
--- a/apps/www/src/content/docs/components/collapsible.md
+++ b/apps/www/src/content/docs/components/collapsible.md
@@ -10,93 +10,10 @@ primitive: https://www.radix-vue.com/components/collapsible.html
 
 ## Installation
 
-<TabPreview name="CLI">
-<template #CLI>
-
+ 
 ```bash
 npx shadcn-vue@latest add collapsible
-```
-</template>
-
-<template #Manual>
-
-<Steps>
-
-### Install the following dependencies:
-
-```bash
-npm install radix-vue
-
-npm install --save-dev @iconify/vue
-```
-
-### Copy and paste the following code into your project:
-
-```vue
-<script setup lang="ts">
-import { ref } from 'vue'
-import { CollapsibleContent, CollapsibleRoot, CollapsibleTrigger } from 'radix-vue'
-import { Icon } from '@iconify/vue'
-
-const rootOpen = ref(false)
-const rootDisabled = ref(false)
-const open = ref(false)
-</script>
-
-<template>
-  <CollapsibleRoot v-model:open="rootOpen" class="w-[300px]" :disabled="rootDisabled">
-    <div style="display: flex; align-items: center; justify-content: space-between">
-      <span class="text-white text-[15px] leading-[25px]"> @peduarte starred 3 repos </span>
-      <CollapsibleTrigger
-        class="cursor-default rounded-full h-[25px] w-[25px] inline-flex items-center justify-center text-grass11 shadow-[0_2px_10px] shadow-blackA7 outline-none data-[state=closed]:bg-white data-[state=open]:bg-green3 hover:bg-green3 focus:shadow-[0_0_0_2px] focus:shadow-black"
-      >
-        <Icon v-if="rootOpen" icon="radix-icons:cross-2" class="h-3.5 w-3.5" />
-        <Icon v-else icon="radix-icons:row-spacing" class="h-3.5 w-3.5" />
-      </CollapsibleTrigger>
-    </div>
-
-    <div class="bg-white rounded my-[10px] p-[10px] shadow-[0_2px_10px] shadow-blackA7">
-      <span class="text-grass11 text-[15px] leading-[25px]">@radix-vue/radix-vue</span>
-    </div>
-
-    <CollapsibleContent>
-      <div class="bg-white rounded my-[10px] p-[10px] shadow-[0_2px_10px] shadow-blackA7">
-        <span class="text-grass11 text-[15px] leading-[25px]">@vuejs/core</span>
-      </div>
-      <div class="bg-white rounded my-[10px] p-[10px] shadow-[0_2px_10px] shadow-blackA7">
-        <span class="text-grass11 text-[15px] leading-[25px]">@radix-ui/primitives</span>
-      </div>
-    </CollapsibleContent>
-  </CollapsibleRoot>
-</template>
-```
-
-### Update `tailwind.config.js`
-
-Add the following animations to your `tailwind.config.js` file:
-
-```ts
-const { blackA, green, grass } = require('@radix-ui/colors')
-
-/** @type {import('tailwindcss').Config} */
-module.exports = {
-  content: ['./**/*.vue'],
-  theme: {
-    extend: {
-      colors: {
-        ...blackA,
-        ...green,
-        ...grass,
-      },
-    },
-  },
-  plugins: [],
-}
-```
-
-</Steps>
-</template>
-</TabPreview>
+``` 
 
 ## Usage
 
diff --git a/apps/www/src/content/docs/components/combobox.md b/apps/www/src/content/docs/components/combobox.md
index bb0c6b39..e8f021da 100644
--- a/apps/www/src/content/docs/components/combobox.md
+++ b/apps/www/src/content/docs/components/combobox.md
@@ -11,124 +11,7 @@ component: true
 The Combobox is built using a composition of the `<Popover />` and the `<Command />` components.
 
 See installation instructions for the [Popover](/docs/components/popover#installation) and the [Command](/docs/components/command#installation) components.
-
-<TabPreview name="Manual">
-<template #Manual>
-
-<Steps>
-
-### Install the following dependencies:
-
-```bash
-npm install radix-vue
-
-npm install --save-dev @iconify/vue
-```
-
-### Copy and paste the following code into your project:
-
-```vue
-<script setup lang="ts">
-import { ref } from 'vue'
-import { ComboboxContent, ComboboxEmpty, ComboboxGroup, ComboboxHeader, ComboboxInput, ComboboxItem, ComboboxItemIndicator, ComboboxLabel, ComboboxRoot, ComboboxSeparator, ComboboxTrigger, ComboboxViewport } from 'radix-vue'
-import { Icon } from '@iconify/vue'
-
-const v = ref('')
-const options = ['Apple', 'Banana', 'Blueberry', 'Grapes', 'Pineapple']
-const vegetables = ['Aubergine', 'Broccoli', 'Carrot', 'Courgette', 'Leek']
-</script>
-
-<template>
-  <ComboboxRoot v-model="v" class="relative">
-    <ComboboxHeader class="min-w-[160px] inline-flex items-center justify-between rounded px-[15px] text-[13px] leading-none h-[35px] gap-[5px] bg-white text-grass11 shadow-[0_2px_10px] shadow-black/10 hover:bg-mauve3 focus:shadow-[0_0_0_2px] focus:shadow-black data-[placeholder]:text-grass9 outline-none">
-      <ComboboxInput class="bg-transparent outline-none text-grass11 h-full selection:bg-grass5 placeholder-mauve8" placeholder="Placeholder..." />
-      <ComboboxTrigger>
-        <Icon icon="radix-icons:chevron-down" class="h-4 w-4 text-grass11" />
-      </ComboboxTrigger>
-    </ComboboxHeader>
-
-    <ComboboxContent class="absolute z-10 w-full mt-2 min-w-[160px] bg-white overflow-hidden rounded shadow-[0px_10px_38px_-10px_rgba(22,_23,_24,_0.35),_0px_10px_20px_-15px_rgba(22,_23,_24,_0.2)] will-change-[opacity,transform] data-[side=top]:animate-slideDownAndFade data-[side=right]:animate-slideLeftAndFade data-[side=bottom]:animate-slideUpAndFade data-[side=left]:animate-slideRightAndFade">
-      <ComboboxViewport class="p-[5px]">
-        <ComboboxEmpty class="text-mauve8 text-xs font-medium text-center py-2" />
-
-        <ComboboxGroup>
-          <ComboboxLabel class="px-[25px] text-xs leading-[25px] text-mauve11">
-            Fruits
-          </ComboboxLabel>
-
-          <ComboboxItem
-            v-for="(option, index) in options" :key="index"
-            class="text-[13px] leading-none text-grass11 rounded-[3px] flex items-center h-[25px] pr-[35px] pl-[25px] relative select-none data-[disabled]:text-mauve8 data-[disabled]:pointer-events-none data-[highlighted]:outline-none data-[highlighted]:bg-grass9 data-[highlighted]:text-grass1"
-            :value="option"
-          >
-            <ComboboxItemIndicator
-              class="absolute left-0 w-[25px] inline-flex items-center justify-center"
-            >
-              <Icon icon="radix-icons:check" />
-            </ComboboxItemIndicator>
-            <span>
-              {{ option }}
-            </span>
-          </ComboboxItem>
-          <ComboboxSeparator class="h-[1px] bg-grass6 m-[5px]" />
-        </ComboboxGroup>
-
-        <ComboboxGroup>
-          <ComboboxLabel
-            class="px-[25px] text-xs leading-[25px] text-mauve11"
-          >
-            Vegetables
-          </ComboboxLabel>
-          <ComboboxItem
-            v-for="(option, index) in vegetables" :key="index"
-            class="text-[13px] leading-none text-grass11 rounded-[3px] flex items-center h-[25px] pr-[35px] pl-[25px] relative select-none data-[disabled]:text-mauve8 data-[disabled]:pointer-events-none data-[highlighted]:outline-none data-[highlighted]:bg-grass9 data-[highlighted]:text-grass1"
-            :value="option"
-          >
-            <ComboboxItemIndicator
-              class="absolute left-0 w-[25px] inline-flex items-center justify-center"
-            >
-              <Icon icon="radix-icons:check" />
-            </ComboboxItemIndicator>
-            <span>
-              {{ option }}
-            </span>
-          </ComboboxItem>
-        </ComboboxGroup>
-      </ComboboxViewport>
-    </ComboboxContent>
-  </ComboboxRoot>
-</template>
-```
-
-### Update `tailwind.config.js`
-
-Add the following animations to your `tailwind.config.js` file:
-
-```ts
-const { blackA, green, grass, mauve } = require('@radix-ui/colors')
-
-/** @type {import('tailwindcss').Config} */
-module.exports = {
-  content: ['./**/*.vue'],
-  theme: {
-    extend: {
-      colors: {
-        ...blackA,
-        ...green,
-        ...grass,
-        ...mauve,
-      },
-    },
-  },
-  plugins: [],
-}
-```
-
-</Steps>
-</template>
-</TabPreview>
-
-
+ 
 ## Usage
 
 ```vue
diff --git a/apps/www/src/content/docs/components/command.md b/apps/www/src/content/docs/components/command.md
index 80bf283d..7b2b7542 100644
--- a/apps/www/src/content/docs/components/command.md
+++ b/apps/www/src/content/docs/components/command.md
@@ -12,20 +12,10 @@ primitive: https://www.radix-vue.com/components/popover.html
 
 ## Installation
 
-<TabPreview name="CLI">
-<template #CLI>
-
+ 
 ```bash
 npx shadcn-vue@latest add command
-```
-</template>
-
-<template #Manual>
-
-#### Coming soon...
-</template>
-</TabPreview>
-
+``` 
 ## Usage
 
 ```vue
diff --git a/apps/www/src/content/docs/components/context-menu.md b/apps/www/src/content/docs/components/context-menu.md
index 5b0c9e9d..13bc11ec 100644
--- a/apps/www/src/content/docs/components/context-menu.md
+++ b/apps/www/src/content/docs/components/context-menu.md
@@ -9,364 +9,10 @@ primitive: https://www.radix-vue.com/components/context-menu.html
 <ComponentPreview name="ContextMenuDemo"  /> 
 
 ## Installation
-
-<TabPreview name="CLI">
-<template #CLI>
-
+ 
 ```bash
 npx shadcn-vue@latest add context-menu
-```
-</template>
-
-<template #Manual>
-
-<Steps>
-
-### Install the following dependencies:
-
-```bash
-npm install radix-vue
-
-npm install --save-dev @iconify/vue
-```
-
-### Copy and paste the following code into your project
-
-```vue
-<script setup lang="ts">
-import { Icon } from '@iconify/vue'
-import { ref } from 'vue'
-import {
-  ContextMenuArrow,
-  ContextMenuCheckboxItem,
-  ContextMenuContent,
-  ContextMenuItem,
-  ContextMenuItemIndicator,
-  ContextMenuLabel,
-  ContextMenuPortal,
-  ContextMenuRadioGroup,
-  ContextMenuRadioItem,
-  ContextMenuRoot,
-  ContextMenuSeparator,
-  ContextMenuSub,
-  ContextMenuSubContent,
-  ContextMenuSubTrigger,
-  ContextMenuTrigger,
-} from 'radix-vue'
-
-const checkboxOne = ref(false)
-const checkboxTwo = ref(false)
-const person = ref('pedro')
-
-function handleClick() {
-  alert('hello!')
-}
-</script>
-
-<template>
-  <ContextMenuRoot>
-    <ContextMenuTrigger
-      as-child
-      class="block border-2 border-white border-dashed text-white rounded text-[15px] select-none py-[45px] w-[300px] text-center"
-    >
-      <span> Right click here. </span>
-    </ContextMenuTrigger>
-    <ContextMenuPortal>
-      <ContextMenuContent
-        class="min-w-[220px] bg-white outline-none rounded-md p-[5px] shadow-[0px_10px_38px_-10px_rgba(22,_23,_24,_0.35),_0px_10px_20px_-15px_rgba(22,_23,_24,_0.2)] will-change-[opacity,transform] data-[side=top]:animate-slideDownAndFade data-[side=right]:animate-slideLeftAndFade data-[side=bottom]:animate-slideUpAndFade data-[side=left]:animate-slideRightAndFade"
-        :side-offset="5"
-      >
-        <ContextMenuItem
-          value="New Tab"
-          class="group text-[13px] leading-none text-grass11 rounded-[3px] flex items-center h-[25px] px-[5px] relative pl-[25px] select-none outline-none data-[disabled]:text-mauve8 data-[disabled]:pointer-events-none data-[highlighted]:bg-green9 data-[highlighted]:text-green1"
-          @click="handleClick"
-        >
-          New Tab <div
-            class="ml-auto pl-[20px] text-mauve11 group-data-[highlighted]:text-white group-data-[disabled]:text-mauve8"
-          >
-            ⌘+T
-          </div>
-        </ContextMenuItem>
-        <ContextMenuSub>
-          <ContextMenuSubTrigger
-            value="more toolsz"
-            class="group w-full text-[13px] leading-none text-grass11 rounded-[3px] flex items-center h-[25px] px-[5px] relative pl-[25px] select-none outline-none data-[state=open]:bg-green4 data-[state=open]:text-grass11 data-[disabled]:text-mauve8 data-[disabled]:pointer-events-none data-[highlighted]:bg-green9 data-[highlighted]:text-green1 data-[highlighted]:data-[state=open]:bg-green9 data-[highlighted]:data-[state=open]:text-green1"
-          >
-            More Tools <div
-              class="ml-auto pl-[20px] text-mauve11 group-data-[highlighted]:text-white group-data-[disabled]:text-mauve8"
-            >
-              <Icon icon="radix-icons:chevron-right" />
-            </div>
-          </ContextMenuSubTrigger>
-          <ContextMenuPortal>
-            <ContextMenuSubContent
-              class="min-w-[220px] outline-none bg-white rounded-md p-[5px] shadow-[0px_10px_38px_-10px_rgba(22,_23,_24,_0.35),_0px_10px_20px_-15px_rgba(22,_23,_24,_0.2)] will-change-[opacity,transform] data-[side=top]:animate-slideDownAndFade data-[side=right]:animate-slideLeftAndFade data-[side=bottom]:animate-slideUpAndFade data-[side=left]:animate-slideRightAndFade"
-              :side-offset="2" :align-offset="-5"
-            >
-              <ContextMenuItem
-                class="group text-[13px] leading-none text-grass11 rounded-[3px] flex items-center h-[25px] px-[5px] relative pl-[25px] select-none outline-none data-[disabled]:text-mauve8 data-[disabled]:pointer-events-none data-[highlighted]:bg-green9 data-[highlighted]:text-green1"
-              >
-                Save Page As… <div
-                  class="ml-auto pl-[20px] text-mauve11 group-data-[highlighted]:text-white group-data-[disabled]:text-mauve8"
-                >
-                  ⌘+S
-                </div>
-              </ContextMenuItem>
-              <ContextMenuItem
-                class="text-[13px] leading-none text-grass11 rounded-[3px] flex items-center h-[25px] px-[5px] relative pl-[25px] select-none outline-none data-[disabled]:text-mauve8 data-[disabled]:pointer-events-none data-[highlighted]:bg-green9 data-[highlighted]:text-green1"
-              >
-                Create Shortcut…
-              </ContextMenuItem>
-              <ContextMenuItem
-                class="text-[13px] leading-none text-grass11 rounded-[3px] flex items-center h-[25px] px-[5px] relative pl-[25px] select-none outline-none data-[disabled]:text-mauve8 data-[disabled]:pointer-events-none data-[highlighted]:bg-green9 data-[highlighted]:text-green1"
-              >
-                Name Window…
-              </ContextMenuItem>
-              <ContextMenuSeparator class="h-[1px] bg-green6 m-[5px]" />
-              <ContextMenuItem
-                class="text-[13px] leading-none text-grass11 rounded-[3px] flex items-center h-[25px] px-[5px] relative pl-[25px] select-none outline-none data-[disabled]:text-mauve8 data-[disabled]:pointer-events-none data-[highlighted]:bg-green9 data-[highlighted]:text-green1"
-              >
-                Developer Tools
-              </ContextMenuItem>
-              <ContextMenuArrow class="fill-white" />
-            </ContextMenuSubContent>
-          </ContextMenuPortal>
-        </ContextMenuSub>
-        <ContextMenuItem
-          value="New Window"
-          class="group text-[13px] leading-none text-grass11 rounded-[3px] flex items-center h-[25px] px-[5px] relative pl-[25px] select-none outline-none data-[disabled]:text-mauve8 data-[disabled]:pointer-events-none data-[highlighted]:bg-green9 data-[highlighted]:text-green1"
-        >
-          New Window <div
-            class="ml-auto pl-[20px] text-mauve11 group-data-[highlighted]:text-white group-data-[disabled]:text-mauve8"
-          >
-            ⌘+N
-          </div>
-        </ContextMenuItem>
-        <ContextMenuItem
-          value="New Private Window"
-          class="group text-[13px] leading-none text-grass11 rounded-[3px] flex items-center h-[25px] px-[5px] relative pl-[25px] select-none outline-none data-[disabled]:text-mauve8 data-[disabled]:pointer-events-none data-[highlighted]:bg-green9 data-[highlighted]:text-green1"
-          disabled
-        >
-          New Private Window <div
-            class="ml-auto pl-[20px] text-mauve11 group-data-[highlighted]:text-white group-data-[disabled]:text-mauve8"
-          >
-            ⇧+⌘+N
-          </div>
-        </ContextMenuItem>
-        <ContextMenuSub>
-          <ContextMenuSubTrigger
-            value="more tools"
-            class="group text-[13px] leading-none text-grass11 rounded-[3px] flex items-center h-[25px] px-[5px] relative pl-[25px] select-none w-full outline-none data-[state=open]:bg-green4 data-[state=open]:text-grass11 data-[disabled]:text-mauve8 data-[disabled]:pointer-events-none data-[highlighted]:bg-green9 data-[highlighted]:text-green1 data-[highlighted]:data-[state=open]:bg-green9 data-[highlighted]:data-[state=open]:text-green1"
-          >
-            More Tools <div
-              class="ml-auto pl-[20px] text-mauve11 group-data-[highlighted]:text-white group-data-[disabled]:text-mauve8"
-            >
-              <Icon icon="radix-icons:chevron-right" />
-            </div>
-          </ContextMenuSubTrigger>
-          <ContextMenuPortal>
-            <ContextMenuSubContent
-              class="min-w-[220px] outline-none bg-white rounded-md p-[5px] shadow-[0px_10px_38px_-10px_rgba(22,_23,_24,_0.35),_0px_10px_20px_-15px_rgba(22,_23,_24,_0.2)] will-change-[opacity,transform] data-[side=top]:animate-slideDownAndFade data-[side=right]:animate-slideLeftAndFade data-[side=bottom]:animate-slideUpAndFade data-[side=left]:animate-slideRightAndFade"
-              :side-offset="2" :align-offset="-5"
-            >
-              <ContextMenuItem
-                class="group text-[13px] leading-none text-grass11 rounded-[3px] flex items-center h-[25px] px-[5px] relative pl-[25px] select-none outline-none data-[disabled]:text-mauve8 data-[disabled]:pointer-events-none data-[highlighted]:bg-green9 data-[highlighted]:text-green1"
-              >
-                Save Page As… <div
-                  class="ml-auto pl-[20px] text-mauve11 group-data-[highlighted]:text-white group-data-[disabled]:text-mauve8"
-                >
-                  ⌘+S
-                </div>
-              </ContextMenuItem>
-              <ContextMenuItem
-                class="text-[13px] leading-none text-grass11 rounded-[3px] flex items-center h-[25px] px-[5px] relative pl-[25px] select-none outline-none data-[disabled]:text-mauve8 data-[disabled]:pointer-events-none data-[highlighted]:bg-green9 data-[highlighted]:text-green1"
-              >
-                Create Shortcut…
-              </ContextMenuItem>
-              <ContextMenuItem
-                class="text-[13px] leading-none text-grass11 rounded-[3px] flex items-center h-[25px] px-[5px] relative pl-[25px] select-none outline-none data-[disabled]:text-mauve8 data-[disabled]:pointer-events-none data-[highlighted]:bg-green9 data-[highlighted]:text-green1"
-              >
-                Name Window…
-              </ContextMenuItem>
-              <ContextMenuSeparator class="h-[1px] bg-green6 m-[5px]" />
-              <ContextMenuItem
-                class="text-[13px] leading-none text-grass11 rounded-[3px] flex items-center h-[25px] px-[5px] relative pl-[25px] select-none outline-none data-[disabled]:text-mauve8 data-[disabled]:pointer-events-none data-[highlighted]:bg-green9 data-[highlighted]:text-green1"
-              >
-                Developer Tools
-              </ContextMenuItem>
-              <ContextMenuSub>
-                <ContextMenuSubTrigger
-                  value="more toolsz"
-                  class="group w-full text-[13px] leading-none text-grass11 rounded-[3px] flex items-center h-[25px] px-[5px] relative pl-[25px] select-none outline-none data-[state=open]:bg-green4 data-[state=open]:text-grass11 data-[disabled]:text-mauve8 data-[disabled]:pointer-events-none data-[highlighted]:bg-green9 data-[highlighted]:text-green1 data-[highlighted]:data-[state=open]:bg-green9 data-[highlighted]:data-[state=open]:text-green1"
-                >
-                  More Tools <div
-                    class="ml-auto pl-[20px] text-mauve11 group-data-[highlighted]:text-white group-data-[disabled]:text-mauve8"
-                  >
-                    <Icon icon="radix-icons:chevron-right" />
-                  </div>
-                </ContextMenuSubTrigger>
-                <ContextMenuPortal>
-                  <ContextMenuSubContent
-                    class="min-w-[220px] outline-none bg-white rounded-md p-[5px] shadow-[0px_10px_38px_-10px_rgba(22,_23,_24,_0.35),_0px_10px_20px_-15px_rgba(22,_23,_24,_0.2)] will-change-[opacity,transform] data-[side=top]:animate-slideDownAndFade data-[side=right]:animate-slideLeftAndFade data-[side=bottom]:animate-slideUpAndFade data-[side=left]:animate-slideRightAndFade"
-                    :side-offset="2" :align-offset="-5"
-                  >
-                    <ContextMenuItem
-                      class="group text-[13px] leading-none text-grass11 rounded-[3px] flex items-center h-[25px] px-[5px] relative pl-[25px] select-none outline-none data-[disabled]:text-mauve8 data-[disabled]:pointer-events-none data-[highlighted]:bg-green9 data-[highlighted]:text-green1"
-                    >
-                      Save Page As… <div
-                        class="ml-auto pl-[20px] text-mauve11 group-data-[highlighted]:text-white group-data-[disabled]:text-mauve8"
-                      >
-                        ⌘+S
-                      </div>
-                    </ContextMenuItem>
-                    <ContextMenuItem
-                      class="text-[13px] leading-none text-grass11 rounded-[3px] flex items-center h-[25px] px-[5px] relative pl-[25px] select-none outline-none data-[disabled]:text-mauve8 data-[disabled]:pointer-events-none data-[highlighted]:bg-green9 data-[highlighted]:text-green1"
-                    >
-                      Create Shortcut…
-                    </ContextMenuItem>
-                    <ContextMenuItem
-                      class="text-[13px] leading-none text-grass11 rounded-[3px] flex items-center h-[25px] px-[5px] relative pl-[25px] select-none outline-none data-[disabled]:text-mauve8 data-[disabled]:pointer-events-none data-[highlighted]:bg-green9 data-[highlighted]:text-green1"
-                    >
-                      Name Window…
-                    </ContextMenuItem>
-                    <ContextMenuSeparator class="h-[1px] bg-green6 m-[5px]" />
-                    <ContextMenuItem
-                      class="text-[13px] leading-none text-grass11 rounded-[3px] flex items-center h-[25px] px-[5px] relative pl-[25px] select-none outline-none data-[disabled]:text-mauve8 data-[disabled]:pointer-events-none data-[highlighted]:bg-green9 data-[highlighted]:text-green1"
-                    >
-                      Developer Tools
-                    </ContextMenuItem>
-                    <ContextMenuSub>
-                      <ContextMenuSubTrigger
-                        value="more toolsz"
-                        class="group w-full text-[13px] leading-none text-grass11 rounded-[3px] flex items-center h-[25px] px-[5px] relative pl-[25px] select-none outline-none data-[state=open]:bg-green4 data-[state=open]:text-grass11 data-[disabled]:text-mauve8 data-[disabled]:pointer-events-none data-[highlighted]:bg-green9 data-[highlighted]:text-green1 data-[highlighted]:data-[state=open]:bg-green9 data-[highlighted]:data-[state=open]:text-green1"
-                      >
-                        More Tools <div
-                          class="ml-auto pl-[20px] text-mauve11 group-data-[highlighted]:text-white group-data-[disabled]:text-mauve8"
-                        >
-                          <Icon icon="radix-icons:chevron-right" />
-                        </div>
-                      </ContextMenuSubTrigger>
-                      <ContextMenuPortal>
-                        <ContextMenuSubContent
-                          class="min-w-[220px] outline-none bg-white rounded-md p-[5px] shadow-[0px_10px_38px_-10px_rgba(22,_23,_24,_0.35),_0px_10px_20px_-15px_rgba(22,_23,_24,_0.2)] will-change-[opacity,transform] data-[side=top]:animate-slideDownAndFade data-[side=right]:animate-slideLeftAndFade data-[side=bottom]:animate-slideUpAndFade data-[side=left]:animate-slideRightAndFade"
-                          :side-offset="2" :align-offset="-5"
-                        >
-                          <ContextMenuItem
-                            class="group text-[13px] leading-none text-grass11 rounded-[3px] flex items-center h-[25px] px-[5px] relative pl-[25px] select-none outline-none data-[disabled]:text-mauve8 data-[disabled]:pointer-events-none data-[highlighted]:bg-green9 data-[highlighted]:text-green1"
-                          >
-                            Save Page As… <div
-                              class="ml-auto pl-[20px] text-mauve11 group-data-[highlighted]:text-white group-data-[disabled]:text-mauve8"
-                            >
-                              ⌘+S
-                            </div>
-                          </ContextMenuItem>
-                          <ContextMenuItem
-                            class="text-[13px] leading-none text-grass11 rounded-[3px] flex items-center h-[25px] px-[5px] relative pl-[25px] select-none outline-none data-[disabled]:text-mauve8 data-[disabled]:pointer-events-none data-[highlighted]:bg-green9 data-[highlighted]:text-green1"
-                          >
-                            Create Shortcut…
-                          </ContextMenuItem>
-                          <ContextMenuItem
-                            class="text-[13px] leading-none text-grass11 rounded-[3px] flex items-center h-[25px] px-[5px] relative pl-[25px] select-none outline-none data-[disabled]:text-mauve8 data-[disabled]:pointer-events-none data-[highlighted]:bg-green9 data-[highlighted]:text-green1"
-                          >
-                            Name Window…
-                          </ContextMenuItem>
-                          <ContextMenuSeparator class="h-[1px] bg-green6 m-[5px]" />
-                          <ContextMenuItem
-                            class="text-[13px] leading-none text-grass11 rounded-[3px] flex items-center h-[25px] px-[5px] relative pl-[25px] select-none outline-none data-[disabled]:text-mauve8 data-[disabled]:pointer-events-none data-[highlighted]:bg-green9 data-[highlighted]:text-green1"
-                          >
-                            Developer Tools
-                          </ContextMenuItem>
-                        </ContextMenuSubContent>
-                      </ContextMenuPortal>
-                    </ContextMenuSub>
-                  </ContextMenuSubContent>
-                </ContextMenuPortal>
-              </ContextMenuSub>
-              <ContextMenuItem
-                class="text-[13px] leading-none text-grass11 rounded-[3px] flex items-center h-[25px] px-[5px] relative pl-[25px] select-none outline-none data-[disabled]:text-mauve8 data-[disabled]:pointer-events-none data-[highlighted]:bg-green9 data-[highlighted]:text-green1"
-              >
-                Developer Tools
-              </ContextMenuItem>
-            </ContextMenuSubContent>
-          </ContextMenuPortal>
-        </ContextMenuSub>
-        <ContextMenuSeparator class="h-[1px] bg-green6 m-[5px]" />
-        <ContextMenuCheckboxItem
-          v-model="checkboxOne"
-          class="group text-[13px] leading-none text-grass11 rounded-[3px] flex items-center h-[25px] px-[5px] relative pl-[25px] select-none outline-none data-[disabled]:text-mauve8 data-[disabled]:pointer-events-none data-[highlighted]:bg-green9 data-[highlighted]:text-green1"
-        >
-          <ContextMenuItemIndicator class="absolute left-0 w-[25px] inline-flex items-center justify-center">
-            <Icon icon="radix-icons:check" />
-          </ContextMenuItemIndicator> Show Bookmarks <div
-            class="ml-auto pl-[20px] text-mauve11 group-data-[highlighted]:text-white group-data-[disabled]:text-mauve8"
-          >
-            ⌘+B
-          </div>
-        </ContextMenuCheckboxItem>
-        <ContextMenuCheckboxItem
-          v-model="checkboxTwo"
-          class="text-[13px] leading-none text-grass11 rounded-[3px] flex items-center h-[25px] px-[5px] relative pl-[25px] select-none outline-none data-[disabled]:text-mauve8 data-[disabled]:pointer-events-none data-[highlighted]:bg-green9 data-[highlighted]:text-green1"
-        >
-          <ContextMenuItemIndicator class="absolute left-0 w-[25px] inline-flex items-center justify-center">
-            <Icon icon="radix-icons:check" />
-          </ContextMenuItemIndicator> Show Full URLs
-        </ContextMenuCheckboxItem>
-        <ContextMenuSeparator class="h-[1px] bg-green6 m-[5px]" />
-        <ContextMenuLabel class="pl-[25px] text-xs leading-[25px] text-mauve11">
-          People
-        </ContextMenuLabel>
-        <ContextMenuRadioGroup v-model="person">
-          <ContextMenuRadioItem
-            class="text-[13px] leading-none text-grass11 rounded-[3px] flex items-center h-[25px] px-[5px] relative pl-[25px] select-none outline-none data-[disabled]:text-mauve8 data-[disabled]:pointer-events-none data-[highlighted]:bg-green9 data-[highlighted]:text-green1"
-            value="pedro"
-          >
-            <ContextMenuItemIndicator class="absolute left-0 w-[25px] inline-flex items-center justify-center">
-              <Icon icon="radix-icons:dot-filled" />
-            </ContextMenuItemIndicator> Pedro Duarte
-          </ContextMenuRadioItem>
-          <ContextMenuRadioItem
-            class="text-[13px] leading-none text-grass11 rounded-[3px] flex items-center h-[25px] px-[5px] relative pl-[25px] select-none outline-none data-[disabled]:text-mauve8 data-[disabled]:pointer-events-none data-[highlighted]:bg-green9 data-[highlighted]:text-green1"
-            value="colm"
-          >
-            <ContextMenuItemIndicator class="absolute left-0 w-[25px] inline-flex items-center justify-center">
-              <Icon icon="radix-icons:dot-filled" />
-            </ContextMenuItemIndicator> Colm Tuite
-          </ContextMenuRadioItem>
-        </ContextMenuRadioGroup>
-      </ContextMenuContent>
-    </ContextMenuPortal>
-  </ContextMenuRoot>
-</template>
-```
-
-### Update `tailwind.config.js` file
-
-Add the following to your `tailwind.config.js` file:
-
-```ts
-const { blackA, green, grass, mauve } = require('@radix-ui/colors')
-
-/** @type {import('tailwindcss').Config} */
-module.exports = {
-  content: ['./**/*.vue'],
-  theme: {
-    extend: {
-      colors: {
-        ...blackA,
-        ...green,
-        ...grass,
-        ...mauve,
-      },
-    },
-  },
-  plugins: [],
-}
-```
-
-</Steps>
-
-</template>
-</TabPreview>
+``` 
 
 ## Usage
 
diff --git a/apps/www/src/content/docs/components/dialog.md b/apps/www/src/content/docs/components/dialog.md
index ac013f94..4346daf1 100644
--- a/apps/www/src/content/docs/components/dialog.md
+++ b/apps/www/src/content/docs/components/dialog.md
@@ -7,151 +7,11 @@ primitive: https://www.radix-vue.com/components/dialog.html
 
 
 <ComponentPreview name="DialogDemo" /> 
-
-<TabPreview name="CLI">
-<template #CLI>
-
+ 
+ ## Installation
 ```bash
 npx shadcn-vue@latest add dialog
 ```
-</template>
-
-<template #Manual>
-
-<Steps>
-
-### Install the following dependencies:
-
-```bash
-npm install radix-vue
-
-npm install --save-dev @iconify/vue
-```
-
-### Copy and paste the following code into your project
-
-```vue
-<script setup lang="ts">
-import {
-  DialogClose,
-  DialogContent,
-  DialogDescription,
-  DialogOverlay,
-  DialogPortal,
-  DialogRoot,
-  DialogTitle,
-  DialogTrigger,
-} from 'radix-vue'
-import { Icon } from '@iconify/vue'
-</script>
-
-<template>
-  <DialogRoot>
-    <DialogTrigger
-      class="text-grass11 font-semibold shadow-blackA7 hover:bg-mauve3 inline-flex h-[35px] items-center justify-center rounded-[4px] bg-white px-[15px] leading-none shadow-[0_2px_10px] focus:shadow-[0_0_0_2px] focus:shadow-black focus:outline-none"
-    >
-      Edit profile
-    </DialogTrigger>
-    <DialogPortal>
-      <DialogOverlay class="dialog-overlay" />
-      <DialogContent
-        class="dialog-content"
-      >
-        <DialogTitle class="text-mauve12 m-0 text-[17px] font-semibold">
-          Edit profile
-        </DialogTitle>
-        <DialogDescription class="text-mauve11 mt-[10px] mb-5 text-[15px] leading-normal">
-          Make changes to your profile here. Click save when you're done.
-        </DialogDescription>
-        <fieldset class="mb-[15px] flex items-center gap-5">
-          <label class="text-grass11 w-[90px] text-right text-[15px]" for="name"> Name </label>
-          <input
-            id="name"
-            class="text-grass11 shadow-green7 focus:shadow-green8 inline-flex h-[35px] w-full flex-1 items-center justify-center rounded-[4px] px-[10px] text-[15px] leading-none shadow-[0_0_0_1px] outline-none focus:shadow-[0_0_0_2px]"
-            defaultValue="Pedro Duarte"
-          >
-        </fieldset>
-        <fieldset class="mb-[15px] flex items-center gap-5">
-          <label class="text-grass11 w-[90px] text-right text-[15px]" for="username"> Username </label>
-          <input
-            id="username"
-            class="text-grass11 shadow-green7 focus:shadow-green8 inline-flex h-[35px] w-full flex-1 items-center justify-center rounded-[4px] px-[10px] text-[15px] leading-none shadow-[0_0_0_1px] outline-none focus:shadow-[0_0_0_2px]"
-            defaultValue="@peduarte"
-          >
-        </fieldset>
-        <div class="mt-[25px] flex justify-end">
-          <DialogClose as-child>
-            <button
-              class="bg-green4 text-green11 hover:bg-green5 focus:shadow-green7 inline-flex h-[35px] items-center justify-center rounded-[4px] px-[15px] font-semibold leading-none focus:shadow-[0_0_0_2px] focus:outline-none"
-            >
-              Save changes
-            </button>
-          </DialogClose>
-        </div>
-        <DialogClose
-          class="text-grass11 hover:bg-green4 focus:shadow-green7 absolute top-[10px] right-[10px] inline-flex h-[25px] w-[25px] appearance-none items-center justify-center rounded-full focus:shadow-[0_0_0_2px] focus:outline-none"
-          aria-label="Close"
-        >
-          <Icon icon="lucide:x" />
-        </DialogClose>
-      </DialogContent>
-    </DialogPortal>
-  </DialogRoot>
-</template>
-
-<style>
-.dialog-overlay {
-  @apply bg-blackA9 data-[state=open]:animate-overlayShow fixed inset-0 z-20;
-}
-
-.dialog-content {
-  @apply data-[state=open]:animate-contentShow fixed top-[50%] left-[50%] max-h-[85vh] w-[90vw] max-w-[450px] translate-x-[-50%] translate-y-[-50%] rounded-[6px] bg-white p-[25px] shadow-[hsl(206_22%_7%_/_35%)_0px_10px_38px_-10px,_hsl(206_22%_7%_/_20%)_0px_10px_20px_-15px] focus:outline-none z-20;
-}
-</style>
-```
-
-### Update `tailwind.config.js`
-
-Add the following to your `tailwind.config.js` file:
-
-```ts
-const { blackA, green, grass, mauve } = require('@radix-ui/colors')
-
-/** @type {import('tailwindcss').Config} */
-module.exports = {
-  content: ['./**/*.vue'],
-  theme: {
-    extend: {
-      colors: {
-        ...blackA,
-        ...green,
-        ...grass,
-        ...mauve,
-      },
-      keyframes: {
-        overlayShow: {
-          from: { opacity: 0 },
-          to: { opacity: 1 },
-        },
-        contentShow: {
-          from: { opacity: 0, transform: 'translate(-50%, -48%) scale(0.96)' },
-          to: { opacity: 1, transform: 'translate(-50%, -50%) scale(1)' },
-        },
-      },
-      animation: {
-        overlayShow: 'overlayShow 150ms cubic-bezier(0.16, 1, 0.3, 1)',
-        contentShow: 'contentShow 150ms cubic-bezier(0.16, 1, 0.3, 1)',
-      },
-    },
-  },
-  plugins: [],
-}
-```
-
-</Steps>
-
-</template>
-</TabPreview>
 
 ## Usage
 
diff --git a/apps/www/src/content/docs/components/dropdown-menu.md b/apps/www/src/content/docs/components/dropdown-menu.md
index 59880f0f..503461e4 100644
--- a/apps/www/src/content/docs/components/dropdown-menu.md
+++ b/apps/www/src/content/docs/components/dropdown-menu.md
@@ -8,414 +8,11 @@ primitive: https://www.radix-vue.com/components/dropdown-menu.html
 
 <ComponentPreview name="DropdownMenuDemo" /> 
 
-
-<TabPreview name="CLI">
-<template #CLI>
+## Installation
 
 ```bash
 npx shadcn-vue@latest add dropdown-menu
-```
-</template>
-
-<template #Manual>
-
-<Steps>
-
-### Install the following dependencies:
-
-```bash
-npm install radix-vue
-
-npm install --save-dev @iconify/vue
-```
-
-### Copy and paste the following code into your project:
-
-```vue
-<script setup lang="ts">
-import { Icon } from '@iconify/vue'
-import { ref } from 'vue'
-import {
-  DropdownMenuArrow,
-  DropdownMenuCheckboxItem,
-  DropdownMenuContent,
-  DropdownMenuItem,
-  DropdownMenuItemIndicator,
-  DropdownMenuLabel,
-  DropdownMenuPortal,
-  DropdownMenuRadioGroup,
-  DropdownMenuRadioItem,
-  DropdownMenuRoot,
-  DropdownMenuSeparator,
-  DropdownMenuSub,
-  DropdownMenuSubContent,
-  DropdownMenuSubTrigger,
-  DropdownMenuTrigger,
-} from 'radix-vue'
-
-const toggleState = ref(false)
-const checkboxOne = ref(false)
-const checkboxTwo = ref(false)
-const person = ref('pedro')
-
-function handleClick() {
-  alert('hello!')
-}
-</script>
-
-<template>
-  <DropdownMenuRoot v-model:open="toggleState">
-    <DropdownMenuTrigger
-      class="rounded-full w-[35px] h-[35px] inline-flex items-center justify-center text-grass11 bg-white shadow-[0_2px_10px] shadow-blackA7 outline-none hover:bg-green3 focus:shadow-[0_0_0_2px] focus:shadow-black"
-      aria-label="Customise options"
-    >
-      <Icon icon="radix-icons:hamburger-menu" />
-    </DropdownMenuTrigger>
-
-    <DropdownMenuPortal>
-      <DropdownMenuContent
-        class="min-w-[220px] outline-none bg-white rounded-md p-[5px] shadow-[0px_10px_38px_-10px_rgba(22,_23,_24,_0.35),_0px_10px_20px_-15px_rgba(22,_23,_24,_0.2)] will-change-[opacity,transform] data-[side=top]:animate-slideDownAndFade data-[side=right]:animate-slideLeftAndFade data-[side=bottom]:animate-slideUpAndFade data-[side=left]:animate-slideRightAndFade"
-        :side-offset="5"
-      >
-        <DropdownMenuItem
-          value="New Tab"
-          class="group text-[13px] leading-none text-grass11 rounded-[3px] flex items-center h-[25px] px-[5px] relative pl-[25px] select-none outline-none data-[disabled]:text-mauve8 data-[disabled]:pointer-events-none data-[highlighted]:bg-green9 data-[highlighted]:text-green1"
-          @click="handleClick"
-        >
-          New Tab
-          <div
-            class="ml-auto pl-[20px] text-mauve11 group-data-[highlighted]:text-white group-data-[disabled]:text-mauve8"
-          >
-            ⌘+T
-          </div>
-        </DropdownMenuItem>
-        <DropdownMenuSub>
-          <DropdownMenuSubTrigger
-            value="more toolsz"
-            class="group w-full text-[13px] leading-none text-grass11 rounded-[3px] flex items-center h-[25px] px-[5px] relative pl-[25px] select-none outline-none data-[state=open]:bg-green4 data-[state=open]:text-grass11 data-[disabled]:text-mauve8 data-[disabled]:pointer-events-none data-[highlighted]:bg-green9 data-[highlighted]:text-green1 data-[highlighted]:data-[state=open]:bg-green9 data-[highlighted]:data-[state=open]:text-green1"
-          >
-            More Tools
-            <div
-              class="ml-auto pl-[20px] text-mauve11 group-data-[highlighted]:text-white group-data-[disabled]:text-mauve8"
-            >
-              <Icon icon="radix-icons:chevron-right" />
-            </div>
-          </DropdownMenuSubTrigger>
-          <DropdownMenuPortal>
-            <DropdownMenuSubContent
-              class="min-w-[220px] outline-none bg-white rounded-md p-[5px] shadow-[0px_10px_38px_-10px_rgba(22,_23,_24,_0.35),_0px_10px_20px_-15px_rgba(22,_23,_24,_0.2)] will-change-[opacity,transform] data-[side=top]:animate-slideDownAndFade data-[side=right]:animate-slideLeftAndFade data-[side=bottom]:animate-slideUpAndFade data-[side=left]:animate-slideRightAndFade"
-              :side-offset="2"
-              :align-offset="-5"
-            >
-              <DropdownMenuItem
-                class="group text-[13px] leading-none text-grass11 rounded-[3px] flex items-center h-[25px] px-[5px] relative pl-[25px] select-none outline-none data-[disabled]:text-mauve8 data-[disabled]:pointer-events-none data-[highlighted]:bg-green9 data-[highlighted]:text-green1"
-              >
-                Save Page As…
-                <div
-                  class="ml-auto pl-[20px] text-mauve11 group-data-[highlighted]:text-white group-data-[disabled]:text-mauve8"
-                >
-                  ⌘+S
-                </div>
-              </DropdownMenuItem>
-              <DropdownMenuItem
-                class="text-[13px] leading-none text-grass11 rounded-[3px] flex items-center h-[25px] px-[5px] relative pl-[25px] select-none outline-none data-[disabled]:text-mauve8 data-[disabled]:pointer-events-none data-[highlighted]:bg-green9 data-[highlighted]:text-green1"
-              >
-                Create Shortcut…
-              </DropdownMenuItem>
-              <DropdownMenuItem
-                class="text-[13px] leading-none text-grass11 rounded-[3px] flex items-center h-[25px] px-[5px] relative pl-[25px] select-none outline-none data-[disabled]:text-mauve8 data-[disabled]:pointer-events-none data-[highlighted]:bg-green9 data-[highlighted]:text-green1"
-              >
-                Name Window…
-              </DropdownMenuItem>
-              <DropdownMenuSeparator class="h-[1px] bg-green6 m-[5px]" />
-              <DropdownMenuItem
-                class="text-[13px] leading-none text-grass11 rounded-[3px] flex items-center h-[25px] px-[5px] relative pl-[25px] select-none outline-none data-[disabled]:text-mauve8 data-[disabled]:pointer-events-none data-[highlighted]:bg-green9 data-[highlighted]:text-green1"
-              >
-                Developer Tools
-              </DropdownMenuItem>
-            </DropdownMenuSubContent>
-          </DropdownMenuPortal>
-        </DropdownMenuSub>
-        <DropdownMenuItem
-          value="New Window"
-          class="group text-[13px] leading-none text-grass11 rounded-[3px] flex items-center h-[25px] px-[5px] relative pl-[25px] select-none outline-none data-[disabled]:text-mauve8 data-[disabled]:pointer-events-none data-[highlighted]:bg-green9 data-[highlighted]:text-green1"
-        >
-          New Window
-          <div
-            class="ml-auto pl-[20px] text-mauve11 group-data-[highlighted]:text-white group-data-[disabled]:text-mauve8"
-          >
-            ⌘+N
-          </div>
-        </DropdownMenuItem>
-        <DropdownMenuItem
-          value="New Private Window"
-          class="group text-[13px] leading-none text-grass11 rounded-[3px] flex items-center h-[25px] px-[5px] relative pl-[25px] select-none outline-none data-[disabled]:text-mauve8 data-[disabled]:pointer-events-none data-[highlighted]:bg-green9 data-[highlighted]:text-green1"
-          disabled
-        >
-          New Private Window
-          <div
-            class="ml-auto pl-[20px] text-mauve11 group-data-[highlighted]:text-white group-data-[disabled]:text-mauve8"
-          >
-            ⇧+⌘+N
-          </div>
-        </DropdownMenuItem>
-        <DropdownMenuSub>
-          <DropdownMenuSubTrigger
-            value="more tools"
-            class="group text-[13px] leading-none text-grass11 rounded-[3px] flex items-center h-[25px] px-[5px] relative pl-[25px] select-none w-full outline-none data-[state=open]:bg-green4 data-[state=open]:text-grass11 data-[disabled]:text-mauve8 data-[disabled]:pointer-events-none data-[highlighted]:bg-green9 data-[highlighted]:text-green1 data-[highlighted]:data-[state=open]:bg-green9 data-[highlighted]:data-[state=open]:text-green1"
-          >
-            More Tools
-            <div
-              class="ml-auto pl-[20px] text-mauve11 group-data-[highlighted]:text-white group-data-[disabled]:text-mauve8"
-            >
-              <Icon icon="radix-icons:chevron-right" />
-            </div>
-          </DropdownMenuSubTrigger>
-          <DropdownMenuPortal>
-            <DropdownMenuSubContent
-              class="min-w-[220px] outline-none bg-white rounded-md p-[5px] shadow-[0px_10px_38px_-10px_rgba(22,_23,_24,_0.35),_0px_10px_20px_-15px_rgba(22,_23,_24,_0.2)] will-change-[opacity,transform] data-[side=top]:animate-slideDownAndFade data-[side=right]:animate-slideLeftAndFade data-[side=bottom]:animate-slideUpAndFade data-[side=left]:animate-slideRightAndFade"
-              :side-offset="2"
-              :align-offset="-5"
-            >
-              <DropdownMenuItem
-                class="group text-[13px] leading-none text-grass11 rounded-[3px] flex items-center h-[25px] px-[5px] relative pl-[25px] select-none outline-none data-[disabled]:text-mauve8 data-[disabled]:pointer-events-none data-[highlighted]:bg-green9 data-[highlighted]:text-green1"
-              >
-                Save Page As…
-                <div
-                  class="ml-auto pl-[20px] text-mauve11 group-data-[highlighted]:text-white group-data-[disabled]:text-mauve8"
-                >
-                  ⌘+S
-                </div>
-              </DropdownMenuItem>
-              <DropdownMenuItem
-                class="text-[13px] leading-none text-grass11 rounded-[3px] flex items-center h-[25px] px-[5px] relative pl-[25px] select-none outline-none data-[disabled]:text-mauve8 data-[disabled]:pointer-events-none data-[highlighted]:bg-green9 data-[highlighted]:text-green1"
-              >
-                Create Shortcut…
-              </DropdownMenuItem>
-              <DropdownMenuItem
-                class="text-[13px] leading-none text-grass11 rounded-[3px] flex items-center h-[25px] px-[5px] relative pl-[25px] select-none outline-none data-[disabled]:text-mauve8 data-[disabled]:pointer-events-none data-[highlighted]:bg-green9 data-[highlighted]:text-green1"
-              >
-                Name Window…
-              </DropdownMenuItem>
-              <DropdownMenuSeparator class="h-[1px] bg-green6 m-[5px]" />
-              <DropdownMenuItem
-                class="text-[13px] leading-none text-grass11 rounded-[3px] flex items-center h-[25px] px-[5px] relative pl-[25px] select-none outline-none data-[disabled]:text-mauve8 data-[disabled]:pointer-events-none data-[highlighted]:bg-green9 data-[highlighted]:text-green1"
-              >
-                Developer Tools
-              </DropdownMenuItem>
-              <DropdownMenuSub>
-                <DropdownMenuSubTrigger
-                  value="more toolsz"
-                  class="group w-full text-[13px] leading-none text-grass11 rounded-[3px] flex items-center h-[25px] px-[5px] relative pl-[25px] select-none outline-none data-[state=open]:bg-green4 data-[state=open]:text-grass11 data-[disabled]:text-mauve8 data-[disabled]:pointer-events-none data-[highlighted]:bg-green9 data-[highlighted]:text-green1 data-[highlighted]:data-[state=open]:bg-green9 data-[highlighted]:data-[state=open]:text-green1"
-                >
-                  More Tools
-                  <div
-                    class="ml-auto pl-[20px] text-mauve11 group-data-[highlighted]:text-white group-data-[disabled]:text-mauve8"
-                  >
-                    <Icon icon="radix-icons:chevron-right" />
-                  </div>
-                </DropdownMenuSubTrigger>
-                <DropdownMenuPortal>
-                  <DropdownMenuSubContent
-                    class="min-w-[220px] outline-none bg-white rounded-md p-[5px] shadow-[0px_10px_38px_-10px_rgba(22,_23,_24,_0.35),_0px_10px_20px_-15px_rgba(22,_23,_24,_0.2)] will-change-[opacity,transform] data-[side=top]:animate-slideDownAndFade data-[side=right]:animate-slideLeftAndFade data-[side=bottom]:animate-slideUpAndFade data-[side=left]:animate-slideRightAndFade"
-                    :side-offset="2"
-                    :align-offset="-5"
-                  >
-                    <DropdownMenuItem
-                      class="group text-[13px] leading-none text-grass11 rounded-[3px] flex items-center h-[25px] px-[5px] relative pl-[25px] select-none outline-none data-[disabled]:text-mauve8 data-[disabled]:pointer-events-none data-[highlighted]:bg-green9 data-[highlighted]:text-green1"
-                    >
-                      Save Page As…
-                      <div
-                        class="ml-auto pl-[20px] text-mauve11 group-data-[highlighted]:text-white group-data-[disabled]:text-mauve8"
-                      >
-                        ⌘+S
-                      </div>
-                    </DropdownMenuItem>
-                    <DropdownMenuItem
-                      class="text-[13px] leading-none text-grass11 rounded-[3px] flex items-center h-[25px] px-[5px] relative pl-[25px] select-none outline-none data-[disabled]:text-mauve8 data-[disabled]:pointer-events-none data-[highlighted]:bg-green9 data-[highlighted]:text-green1"
-                    >
-                      Create Shortcut…
-                    </DropdownMenuItem>
-                    <DropdownMenuItem
-                      class="text-[13px] leading-none text-grass11 rounded-[3px] flex items-center h-[25px] px-[5px] relative pl-[25px] select-none outline-none data-[disabled]:text-mauve8 data-[disabled]:pointer-events-none data-[highlighted]:bg-green9 data-[highlighted]:text-green1"
-                    >
-                      Name Window…
-                    </DropdownMenuItem>
-                    <DropdownMenuSeparator class="h-[1px] bg-green6 m-[5px]" />
-                    <DropdownMenuItem
-                      class="text-[13px] leading-none text-grass11 rounded-[3px] flex items-center h-[25px] px-[5px] relative pl-[25px] select-none outline-none data-[disabled]:text-mauve8 data-[disabled]:pointer-events-none data-[highlighted]:bg-green9 data-[highlighted]:text-green1"
-                    >
-                      Developer Tools
-                    </DropdownMenuItem>
-                    <DropdownMenuSub>
-                      <DropdownMenuSubTrigger
-                        value="more toolsz"
-                        class="group w-full text-[13px] leading-none text-grass11 rounded-[3px] flex items-center h-[25px] px-[5px] relative pl-[25px] select-none outline-none data-[state=open]:bg-green4 data-[state=open]:text-grass11 data-[disabled]:text-mauve8 data-[disabled]:pointer-events-none data-[highlighted]:bg-green9 data-[highlighted]:text-green1 data-[highlighted]:data-[state=open]:bg-green9 data-[highlighted]:data-[state=open]:text-green1"
-                      >
-                        More Tools
-                        <div
-                          class="ml-auto pl-[20px] text-mauve11 group-data-[highlighted]:text-white group-data-[disabled]:text-mauve8"
-                        >
-                          <Icon icon="radix-icons:chevron-right" />
-                        </div>
-                      </DropdownMenuSubTrigger>
-                      <DropdownMenuPortal>
-                        <DropdownMenuSubContent
-                          class="min-w-[220px] outline-none bg-white rounded-md p-[5px] shadow-[0px_10px_38px_-10px_rgba(22,_23,_24,_0.35),_0px_10px_20px_-15px_rgba(22,_23,_24,_0.2)] will-change-[opacity,transform] data-[side=top]:animate-slideDownAndFade data-[side=right]:animate-slideLeftAndFade data-[side=bottom]:animate-slideUpAndFade data-[side=left]:animate-slideRightAndFade"
-                          :side-offset="2"
-                          :align-offset="-5"
-                        >
-                          <DropdownMenuItem
-                            class="group text-[13px] leading-none text-grass11 rounded-[3px] flex items-center h-[25px] px-[5px] relative pl-[25px] select-none outline-none data-[disabled]:text-mauve8 data-[disabled]:pointer-events-none data-[highlighted]:bg-green9 data-[highlighted]:text-green1"
-                          >
-                            Save Page As…
-                            <div
-                              class="ml-auto pl-[20px] text-mauve11 group-data-[highlighted]:text-white group-data-[disabled]:text-mauve8"
-                            >
-                              ⌘+S
-                            </div>
-                          </DropdownMenuItem>
-                          <DropdownMenuItem
-                            class="text-[13px] leading-none text-grass11 rounded-[3px] flex items-center h-[25px] px-[5px] relative pl-[25px] select-none outline-none data-[disabled]:text-mauve8 data-[disabled]:pointer-events-none data-[highlighted]:bg-green9 data-[highlighted]:text-green1"
-                          >
-                            Create Shortcut…
-                          </DropdownMenuItem>
-                          <DropdownMenuItem
-                            class="text-[13px] leading-none text-grass11 rounded-[3px] flex items-center h-[25px] px-[5px] relative pl-[25px] select-none outline-none data-[disabled]:text-mauve8 data-[disabled]:pointer-events-none data-[highlighted]:bg-green9 data-[highlighted]:text-green1"
-                          >
-                            Name Window…
-                          </DropdownMenuItem>
-                          <DropdownMenuSeparator class="h-[1px] bg-green6 m-[5px]" />
-                          <DropdownMenuItem
-                            class="text-[13px] leading-none text-grass11 rounded-[3px] flex items-center h-[25px] px-[5px] relative pl-[25px] select-none outline-none data-[disabled]:text-mauve8 data-[disabled]:pointer-events-none data-[highlighted]:bg-green9 data-[highlighted]:text-green1"
-                          >
-                            Developer Tools
-                          </DropdownMenuItem>
-                        </DropdownMenuSubContent>
-                      </DropdownMenuPortal>
-                    </DropdownMenuSub>
-                  </DropdownMenuSubContent>
-                </DropdownMenuPortal>
-              </DropdownMenuSub>
-              <DropdownMenuItem
-                class="text-[13px] leading-none text-grass11 rounded-[3px] flex items-center h-[25px] px-[5px] relative pl-[25px] select-none outline-none data-[disabled]:text-mauve8 data-[disabled]:pointer-events-none data-[highlighted]:bg-green9 data-[highlighted]:text-green1"
-              >
-                Developer Tools
-              </DropdownMenuItem>
-            </DropdownMenuSubContent>
-          </DropdownMenuPortal>
-        </DropdownMenuSub>
-        <DropdownMenuSeparator class="h-[1px] bg-green6 m-[5px]" />
-        <DropdownMenuCheckboxItem
-          v-model:checked="checkboxOne"
-          class="group text-[13px] leading-none text-grass11 rounded-[3px] flex items-center h-[25px] px-[5px] relative pl-[25px] select-none outline-none data-[disabled]:text-mauve8 data-[disabled]:pointer-events-none data-[highlighted]:bg-green9 data-[highlighted]:text-green1"
-        >
-          <DropdownMenuItemIndicator class="absolute left-0 w-[25px] inline-flex items-center justify-center">
-            <Icon icon="radix-icons:check" />
-          </DropdownMenuItemIndicator>
-          Show Bookmarks
-          <div
-            class="ml-auto pl-[20px] text-mauve11 group-data-[highlighted]:text-white group-data-[disabled]:text-mauve8"
-          >
-            ⌘+B
-          </div>
-        </DropdownMenuCheckboxItem>
-        <DropdownMenuCheckboxItem
-          v-model:checked="checkboxTwo"
-          class="text-[13px] leading-none text-grass11 rounded-[3px] flex items-center h-[25px] px-[5px] relative pl-[25px] select-none outline-none data-[disabled]:text-mauve8 data-[disabled]:pointer-events-none data-[highlighted]:bg-green9 data-[highlighted]:text-green1"
-        >
-          <DropdownMenuItemIndicator class="absolute left-0 w-[25px] inline-flex items-center justify-center">
-            <Icon icon="radix-icons:check" />
-          </DropdownMenuItemIndicator>
-          Show Full URLs
-        </DropdownMenuCheckboxItem>
-        <DropdownMenuSeparator class="h-[1px] bg-green6 m-[5px]" />
-
-        <DropdownMenuLabel class="pl-[25px] text-xs leading-[25px] text-mauve11">
-          People
-        </DropdownMenuLabel>
-        <DropdownMenuRadioGroup v-model="person">
-          <DropdownMenuRadioItem
-            class="text-[13px] leading-none text-grass11 rounded-[3px] flex items-center h-[25px] px-[5px] relative pl-[25px] select-none outline-none data-[disabled]:text-mauve8 data-[disabled]:pointer-events-none data-[highlighted]:bg-green9 data-[highlighted]:text-green1"
-            value="pedro"
-          >
-            <DropdownMenuItemIndicator class="absolute left-0 w-[25px] inline-flex items-center justify-center">
-              <Icon icon="radix-icons:dot-filled" />
-            </DropdownMenuItemIndicator>
-            Pedro Duarte
-          </DropdownMenuRadioItem>
-          <DropdownMenuRadioItem
-            class="text-[13px] leading-none text-grass11 rounded-[3px] flex items-center h-[25px] px-[5px] relative pl-[25px] select-none outline-none data-[disabled]:text-mauve8 data-[disabled]:pointer-events-none data-[highlighted]:bg-green9 data-[highlighted]:text-green1"
-            value="colm"
-          >
-            <DropdownMenuItemIndicator class="absolute left-0 w-[25px] inline-flex items-center justify-center">
-              <Icon icon="radix-icons:dot-filled" />
-            </DropdownMenuItemIndicator>
-            Colm Tuite
-          </DropdownMenuRadioItem>
-        </DropdownMenuRadioGroup>
-        <DropdownMenuArrow class="fill-white" />
-      </DropdownMenuContent>
-    </DropdownMenuPortal>
-  </DropdownMenuRoot>
-</template>
-```
-
-### Update `tailwind.config.js`
-
-Add the following to your `tailwind.config.js` file:
-
-```ts
-const { blackA, green, grass, mauve } = require('@radix-ui/colors')
-
-/** @type {import('tailwindcss').Config} */
-module.exports = {
-  content: ['./**/*.vue'],
-  theme: {
-    extend: {
-      colors: {
-        ...blackA,
-        ...green,
-        ...grass,
-        ...mauve,
-      },
-      keyframes: {
-        slideDownAndFade: {
-          from: { opacity: 0, transform: 'translateY(-2px)' },
-          to: { opacity: 1, transform: 'translateY(0)' },
-        },
-        slideLeftAndFade: {
-          from: { opacity: 0, transform: 'translateX(2px)' },
-          to: { opacity: 1, transform: 'translateX(0)' },
-        },
-        slideUpAndFade: {
-          from: { opacity: 0, transform: 'translateY(2px)' },
-          to: { opacity: 1, transform: 'translateY(0)' },
-        },
-        slideRightAndFade: {
-          from: { opacity: 0, transform: 'translateX(-2px)' },
-          to: { opacity: 1, transform: 'translateX(0)' },
-        },
-      },
-      animation: {
-        slideDownAndFade: 'slideDownAndFade 400ms cubic-bezier(0.16, 1, 0.3, 1)',
-        slideLeftAndFade: 'slideLeftAndFade 400ms cubic-bezier(0.16, 1, 0.3, 1)',
-        slideUpAndFade: 'slideUpAndFade 400ms cubic-bezier(0.16, 1, 0.3, 1)',
-        slideRightAndFade: 'slideRightAndFade 400ms cubic-bezier(0.16, 1, 0.3, 1)',
-      },
-    },
-  },
-  plugins: [],
-}
-```
-
-
-</Steps>
-
-
-</template>
-</TabPreview>
-
+``` 
 ## Usage
 
 ```vue
diff --git a/apps/www/src/content/docs/components/hover-card.md b/apps/www/src/content/docs/components/hover-card.md
index 7daf9e8b..6d58163d 100644
--- a/apps/www/src/content/docs/components/hover-card.md
+++ b/apps/www/src/content/docs/components/hover-card.md
@@ -8,153 +8,11 @@ primitive: https://www.radix-vue.com/components/hover-card.html
 
 <ComponentPreview name="HoverCardDemo" /> 
 
-
-<TabPreview name="CLI">
-<template #CLI>
+## Installation
 
 ```bash
 npx shadcn-vue@latest add hover-card
-```
-</template>
-
-<template #Manual>
-
-<Steps>
-
-### Install the following dependency:
-
-```bash
-npm install radix-vue
-```
-
-### Copy and paste the following code into your project:
-
-```vue
-<script setup lang="ts">
-import { ref } from 'vue'
-import { HoverCardArrow, HoverCardContent, HoverCardPortal, HoverCardRoot, HoverCardTrigger } from 'radix-vue'
-
-const hoverState = ref(false)
-</script>
-
-<template>
-  <HoverCardRoot v-model:open="hoverState">
-    <HoverCardTrigger
-      class="inline-block cursor-pointer rounded-full shadow-[hsl(206_22%_7%_/_35%)_0px_10px_38px_-10px,hsl(206_22%_7%_/_20%)_0px_10px_20px_-15px] outline-none focus:shadow-[0_0_0_2px_white]"
-      href="https://twitter.com/radix_ui"
-      target="_blank"
-      rel="noreferrer noopener"
-    >
-      <img
-        class="block h-[45px] w-[45px] rounded-full"
-        src="https://pbs.twimg.com/profile_images/1337055608613253126/r_eiMp2H_400x400.png"
-        alt="Radix UI"
-      >
-    </HoverCardTrigger>
-    <HoverCardPortal>
-      <HoverCardContent
-        class="data-[side=bottom]:animate-slideUpAndFade data-[side=right]:animate-slideLeftAndFade data-[side=left]:animate-slideRightAndFade data-[side=top]:animate-slideDownAndFade w-[300px] rounded-md bg-white p-5 shadow-[hsl(206_22%_7%_/_35%)_0px_10px_38px_-10px,hsl(206_22%_7%_/_20%)_0px_10px_20px_-15px] data-[state=open]:transition-all"
-        :side-offset="5"
-      >
-        <div class="flex flex-col gap-[7px]">
-          <img
-            class="block h-[60px] w-[60px] rounded-full"
-            src="https://pbs.twimg.com/profile_images/1337055608613253126/r_eiMp2H_400x400.png"
-            alt="Radix UI"
-          >
-          <div class="flex flex-col gap-[15px]">
-            <div>
-              <div class="text-mauve12 m-0 text-[15px] font-medium leading-[1.5]">
-                Radix
-              </div>
-              <div class="text-mauve10 m-0 text-[15px] leading-[1.5]">
-                @radix_ui
-              </div>
-            </div>
-            <div class="text-mauve12 m-0 text-[15px] leading-[1.5]">
-              Components, icons, colors, and templates for building high-quality, accessible UI. Free and open-source.
-            </div>
-            <div class="flex gap-[15px]">
-              <div class="flex gap-[5px]">
-                <div class="text-mauve12 m-0 text-[15px] font-medium leading-[1.5]">
-                  0
-                </div>
-                <div class="text-mauve10 m-0 text-[15px] leading-[1.5]">
-                  Following
-                </div>
-              </div>
-              <div class="flex gap-[5px]">
-                <div class="text-mauve12 m-0 text-[15px] font-medium leading-[1.5]">
-                  2,900
-                </div>
-                <div class="text-mauve10 m-0 text-[15px] leading-[1.5]">
-                  Followers
-                </div>
-              </div>
-            </div>
-          </div>
-        </div>
-
-        <HoverCardArrow class="fill-white" size="8" />
-      </HoverCardContent>
-    </HoverCardPortal>
-  </HoverCardRoot>
-</template>
-```
-
-### Update `tailwind.config.js`
-
-Add the following to your `tailwind.config.js` file:
-
-```ts
-const { blackA, green, grass, mauve } = require('@radix-ui/colors')
-
-/** @type {import('tailwindcss').Config} */
-module.exports = {
-  content: ['./**/*.vue'],
-  theme: {
-    extend: {
-      colors: {
-        ...blackA,
-        ...green,
-        ...grass,
-        ...mauve,
-      },
-      keyframes: {
-        slideDownAndFade: {
-          from: { opacity: 0, transform: 'translateY(-2px)' },
-          to: { opacity: 1, transform: 'translateY(0)' },
-        },
-        slideLeftAndFade: {
-          from: { opacity: 0, transform: 'translateX(2px)' },
-          to: { opacity: 1, transform: 'translateX(0)' },
-        },
-        slideUpAndFade: {
-          from: { opacity: 0, transform: 'translateY(2px)' },
-          to: { opacity: 1, transform: 'translateY(0)' },
-        },
-        slideRightAndFade: {
-          from: { opacity: 0, transform: 'translateX(-2px)' },
-          to: { opacity: 1, transform: 'translateX(0)' },
-        },
-      },
-      animation: {
-        slideDownAndFade: 'slideDownAndFade 400ms cubic-bezier(0.16, 1, 0.3, 1)',
-        slideLeftAndFade: 'slideLeftAndFade 400ms cubic-bezier(0.16, 1, 0.3, 1)',
-        slideUpAndFade: 'slideUpAndFade 400ms cubic-bezier(0.16, 1, 0.3, 1)',
-        slideRightAndFade: 'slideRightAndFade 400ms cubic-bezier(0.16, 1, 0.3, 1)',
-      },
-    },
-  },
-  plugins: [],
-}
-```
-
-</Steps>
-
-</template>
-</TabPreview>
-
+``` 
 ## Usage
 
 ```vue
diff --git a/apps/www/src/content/docs/components/input.md b/apps/www/src/content/docs/components/input.md
index 154a4b3a..bfa96c75 100644
--- a/apps/www/src/content/docs/components/input.md
+++ b/apps/www/src/content/docs/components/input.md
@@ -6,6 +6,7 @@ description: Displays a form input field or a component that looks like an input
 
 <ComponentPreview name="InputDemo" class="[&_input]:max-w-xs" /> 
 
+## Installation
 
 <TabPreview name="CLI">
 <template #CLI>
@@ -21,30 +22,7 @@ npx shadcn-vue@latest add input
 
 ### Copy and paste the following code into your project:
 
-```vue
-<script setup lang="ts">
-import { useVModel } from '@vueuse/core'
-import { cn } from '@/lib/utils'
-
-const props = defineProps<{
-  defaultValue?: string | number
-  modelValue?: string | number
-}>()
-
-const emits = defineEmits<{
-  (e: 'update:modelValue', payload: string | number): void
-}>()
-
-const modelValue = useVModel(props, 'modelValue', emits, {
-  passive: true,
-  defaultValue: props.defaultValue,
-})
-</script>
-
-<template>
-  <input v-model="modelValue" type="text" :class="cn(cn('flex h-10 w-full rounded-md border border-input bg-background px-3 py-2 text-sm ring-offset-background file:border-0 file:bg-transparent file:text-sm file:font-medium placeholder:text-muted-foreground focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:cursor-not-allowed disabled:opacity-50', $attrs.class ?? ''))">
-</template>
-```
+<<< @/lib/registry/default/ui/input/Input.vue
 
 </Steps>
 
diff --git a/apps/www/src/content/docs/components/label.md b/apps/www/src/content/docs/components/label.md
index 22a31baa..9d2535c2 100644
--- a/apps/www/src/content/docs/components/label.md
+++ b/apps/www/src/content/docs/components/label.md
@@ -30,28 +30,7 @@ npm install radix-vue
 
 ### Copy and paste the following code into your project:
 
-```vue
-<script setup lang="ts">
-import { Label, type LabelProps } from 'radix-vue'
-import { cn } from '@/lib/utils'
-
-const props = defineProps<LabelProps & { class?: string }>()
-</script>
-
-<template>
-  <Label
-    v-bind="props"
-    :class="
-      cn(
-        'block text-sm tracking-tight font-medium text-foreground text-left',
-        props.class,
-      )
-    "
-  >
-    <slot />
-  </Label>
-</template>
-```
+<<< @/lib/registry/default/ui/label/Label.vue
 
 </Steps>
 
diff --git a/apps/www/src/content/docs/components/menubar.md b/apps/www/src/content/docs/components/menubar.md
index 8387f5c5..8c856d82 100644
--- a/apps/www/src/content/docs/components/menubar.md
+++ b/apps/www/src/content/docs/components/menubar.md
@@ -7,392 +7,12 @@ primitive: https://www.radix-vue.com/components/menubar.html
 
 <ComponentPreview name="MenubarDemo" /> 
 
-
-
 ## Installation
-
-<TabPreview name="CLI">
-<template #CLI>
+ 
 
 ```bash
 npx shadcn-vue@latest add menubar
 ```
-</template>
-
-<template #Manual>
-
-<Steps>
-
-### Install the following dependencies:
-
-```bash
-npm install radix-vue
-
-npm install --save-dev @iconify/vue
-```
-
-### Copy and paste the following code into your project:
-
-```vue
-<script setup lang="ts">
-import { Icon } from '@iconify/vue'
-import { ref } from 'vue'
-import {
-  MenubarCheckboxItem,
-  MenubarContent,
-  MenubarItem,
-  MenubarItemIndicator,
-  MenubarMenu,
-  MenubarPortal,
-  MenubarRadioGroup,
-  MenubarRadioItem,
-  MenubarRoot,
-  MenubarSeparator,
-  MenubarSub,
-  MenubarSubContent,
-  MenubarSubTrigger,
-  MenubarTrigger,
-} from 'radix-vue'
-
-const currentMenu = ref('')
-const checkboxOne = ref(false)
-const checkboxTwo = ref(false)
-const person = ref('pedro')
-function handleClick() {
-  alert('hello!')
-}
-
-const RADIO_ITEMS = ['Andy', 'Benoît', 'Luis']
-const CHECK_ITEMS = ['Always Show Bookmarks Bar', 'Always Show Full URLs']
-</script>
-
-<template>
-  <MenubarRoot v-model="currentMenu" class="flex bg-white p-[3px] rounded-md shadow-[0_2px_10px] shadow-blackA7">
-    <MenubarMenu value="file">
-      <MenubarTrigger
-        class="py-2 px-3 outline-none select-none font-semibold leading-none rounded text-grass11 text-[13px] flex items-center justify-between gap-[2px] data-[highlighted]:bg-green4 data-[state=open]:bg-green4"
-      >
-        File
-      </MenubarTrigger>
-      <MenubarPortal>
-        <MenubarContent
-          class="min-w-[220px] outline-none bg-white rounded-md p-[5px] shadow-[0px_10px_38px_-10px_rgba(22,_23,_24,_0.35),_0px_10px_20px_-15px_rgba(22,_23,_24,_0.2)] [animation-duration:_400ms] [animation-timing-function:_cubic-bezier(0.16,_1,_0.3,_1)] will-change-[transform,opacity]"
-          align="start"
-          :side-offset="5"
-          :align-offset="-3"
-        >
-          <MenubarItem
-            class="group text-[13px] leading-none text-grass11 rounded flex items-center h-[25px] px-[10px] relative select-none outline-none data-[state=open]:bg-green4 data-[state=open]:text-grass11 data-[highlighted]:bg-gradient-to-br data-[highlighted]:from-green9 data-[highlighted]:to-green10 data-[highlighted]:text-green1 data-[highlighted]:data-[state=open]:text-green1 data-[disabled]:text-mauve8 data-[disabled]:pointer-events-none"
-          >
-            New Tab
-            <div class="ml-auto pl-5 text-mauve9 group-data-[highlighted]:text-white group-data-[disabled]:text-mauve8">
-              ⌘ T
-            </div>
-          </MenubarItem>
-          <MenubarItem
-            class="group text-[13px] leading-none text-grass11 rounded flex items-center h-[25px] px-[10px] relative select-none outline-none data-[state=open]:bg-green4 data-[state=open]:text-grass11 data-[highlighted]:bg-gradient-to-br data-[highlighted]:from-green9 data-[highlighted]:to-green10 data-[highlighted]:text-green1 data-[highlighted]:data-[state=open]:text-green1 data-[disabled]:text-mauve8 data-[disabled]:pointer-events-none"
-          >
-            New Window
-            <div class="ml-auto pl-5 text-mauve9 group-data-[highlighted]:text-white group-data-[disabled]:text-mauve8">
-              ⌘ N
-            </div>
-          </MenubarItem>
-          <MenubarItem
-            class="text-[13px] leading-none text-grass11 rounded flex items-center h-[25px] px-[10px] relative select-none outline-none data-[state=open]:bg-green4 data-[state=open]:text-grass11 data-[highlighted]:bg-gradient-to-br data-[highlighted]:from-green9 data-[highlighted]:to-green10 data-[highlighted]:text-green1 data-[highlighted]:data-[state=open]:text-green1 data-[disabled]:text-mauve8 data-[disabled]:pointer-events-none"
-            disabled
-          >
-            New Incognito Window
-          </MenubarItem>
-          <MenubarSeparator class="h-[1px] bg-green6 m-[5px]" />
-          <MenubarSub>
-            <MenubarSubTrigger
-              class="group text-[13px] leading-none text-grass11 rounded flex items-center h-[25px] px-[10px] relative select-none outline-none data-[state=open]:bg-green4 data-[state=open]:text-grass11 data-[highlighted]:bg-gradient-to-br data-[highlighted]:from-green9 data-[highlighted]:to-green10 data-[highlighted]:text-green1 data-[highlighted]:data-[state=open]:text-green1 data-[disabled]:text-mauve8 data-[disabled]:pointer-events-none"
-            >
-              Share
-              <div
-                class="ml-auto pl-5 text-mauve9 group-data-[highlighted]:text-white group-data-[disabled]:text-mauve8"
-              >
-                <Icon icon="radix-icons:chevron-right" />
-              </div>
-            </MenubarSubTrigger>
-            <MenubarPortal>
-              <MenubarSubContent
-                class="min-w-[220px] outline-none bg-white rounded-md p-[5px] shadow-[0px_10px_38px_-10px_rgba(22,_23,_24,_0.35),_0px_10px_20px_-15px_rgba(22,_23,_24,_0.2)] [animation-duration:_400ms] [animation-timing-function:_cubic-bezier(0.16,_1,_0.3,_1)] will-change-[transform,opacity]"
-                :align-offset="-5"
-              >
-                <MenubarItem
-                  class="text-[13px] leading-none text-grass11 rounded flex items-center h-[25px] px-[10px] relative select-none outline-none data-[state=open]:bg-green4 data-[state=open]:text-grass11 data-[highlighted]:bg-gradient-to-br data-[highlighted]:from-green9 data-[highlighted]:to-green10 data-[highlighted]:text-green1 data-[highlighted]::to-green10 data-[state=open]:text-green1 data-[disabled]:text-mauve8 data-[disabled]:pointer-events-none"
-                >
-                  Email Link
-                </MenubarItem>
-                <MenubarItem
-                  class="text-[13px] leading-none text-grass11 rounded flex items-center h-[25px] px-[10px] relative select-none outline-none data-[state=open]:bg-green4 data-[state=open]:text-grass11 data-[highlighted]:bg-gradient-to-br data-[highlighted]:from-green9 data-[highlighted]:to-green10 data-[highlighted]:text-green1 data-[highlighted]::to-green10 data-[state=open]:text-green1 data-[disabled]:text-mauve8 data-[disabled]:pointer-events-none"
-                >
-                  Messages
-                </MenubarItem>
-                <MenubarItem
-                  class="text-[13px] leading-none text-grass11 rounded flex items-center h-[25px] px-[10px] relative select-none outline-none data-[state=open]:bg-green4 data-[state=open]:text-grass11 data-[highlighted]:bg-gradient-to-br data-[highlighted]:from-green9 data-[highlighted]:to-green10 data-[highlighted]:text-green1 data-[highlighted]::to-green10 data-[state=open]:text-green1 data-[disabled]:text-mauve8 data-[disabled]:pointer-events-none"
-                >
-                  Notes
-                </MenubarItem>
-              </MenubarSubContent>
-            </MenubarPortal>
-          </MenubarSub>
-          <MenubarSeparator class="h-[1px] bg-green6 m-[5px]" />
-          <MenubarItem
-            class="group text-[13px] leading-none text-grass11 rounded flex items-center h-[25px] px-[10px] relative select-none outline-none data-[highlighted]:bg-gradient-to-br data-[highlighted]:from-green9 data-[highlighted]:to-green10 data-[highlighted]:text-green1 data-[disabled]:text-mauve8 data-[disabled]:pointer-events-none"
-          >
-            Print…
-            <div class="ml-auto pl-5 text-mauve9 group-data-[highlighted]:text-white group-data-[disabled]:text-mauve8">
-              ⌘ P
-            </div>
-          </MenubarItem>
-        </MenubarContent>
-      </MenubarPortal>
-    </MenubarMenu>
-
-    <MenubarMenu>
-      <MenubarTrigger
-        class="py-2 px-3 outline-none select-none font-semibold leading-none rounded text-grass11 text-[13px] flex items-center justify-between gap-[2px] data-[highlighted]:bg-green4 data-[state=open]:bg-green4"
-      >
-        Edit
-      </MenubarTrigger>
-      <MenubarPortal>
-        <MenubarContent
-          class="min-w-[220px] outline-none bg-white rounded-md p-[5px] shadow-[0px_10px_38px_-10px_rgba(22,_23,_24,_0.35),_0px_10px_20px_-15px_rgba(22,_23,_24,_0.2)] [animation-duration:_400ms] [animation-timing-function:_cubic-bezier(0.16,_1,_0.3,_1)] will-change-[transform,opacity]"
-          align="start"
-          :side-offset="5"
-          :align-offset="-3"
-        >
-          <MenubarItem
-            class="group text-[13px] leading-none text-grass11 rounded flex items-center h-[25px] px-[10px] relative select-none outline-none data-[state=open]:bg-green4 data-[state=open]:text-grass11 data-[highlighted]:bg-gradient-to-br data-[highlighted]:from-green9 data-[highlighted]:to-green10 data-[highlighted]:text-green1 data-[highlighted]:data-[state=open]:text-green1 data-[disabled]:text-mauve8 data-[disabled]:pointer-events-none"
-          >
-            Undo
-            <div class="ml-auto pl-5 text-mauve9 group-data-[highlighted]:text-white group-data-[disabled]:text-mauve8">
-              ⌘ Z
-            </div>
-          </MenubarItem>
-          <MenubarItem
-            class="group text-[13px] leading-none text-grass11 rounded flex items-center h-[25px] px-[10px] relative select-none outline-none data-[state=open]:bg-green4 data-[state=open]:text-grass11 data-[highlighted]:bg-gradient-to-br data-[highlighted]:from-green9 data-[highlighted]:to-green10 data-[highlighted]:text-green1 data-[highlighted]:data-[state=open]:text-green1 data-[disabled]:text-mauve8 data-[disabled]:pointer-events-none"
-          >
-            Redo
-            <div class="ml-auto pl-5 text-mauve9 group-data-[highlighted]:text-white group-data-[disabled]:text-mauve8">
-              ⇧ ⌘ Z
-            </div>
-          </MenubarItem>
-          <MenubarSeparator class="h-[1px] bg-green6 m-[5px]" />
-          <MenubarSub>
-            <MenubarSubTrigger
-              class="group text-[13px] leading-none text-grass11 rounded flex items-center h-[25px] px-[10px] relative select-none outline-none data-[state=open]:bg-green4 data-[state=open]:text-grass11 data-[highlighted]:bg-gradient-to-br data-[highlighted]:from-green9 data-[highlighted]:to-green10 data-[highlighted]:text-green1 data-[highlighted]:data-[state=open]:text-green1 data-[disabled]:text-mauve8 data-[disabled]:pointer-events-none"
-            >
-              Find
-              <div
-                class="ml-auto pl-5 text-mauve9 group-data-[highlighted]:text-white group-data-[disabled]:text-mauve8"
-              >
-                <Icon icon="radix-icons:chevron-right" />
-              </div>
-            </MenubarSubTrigger>
-
-            <MenubarPortal>
-              <MenubarSubContent
-                class="min-w-[220px] outline-none bg-white rounded-md p-[5px] shadow-[0px_10px_38px_-10px_rgba(22,_23,_24,_0.35),_0px_10px_20px_-15px_rgba(22,_23,_24,_0.2)] [animation-duration:_400ms] [animation-timing-function:_cubic-bezier(0.16,_1,_0.3,_1)] will-change-[transform,opacity]"
-                :align-offset="-5"
-              >
-                <MenubarItem
-                  class="group text-[13px] leading-none text-grass11 rounded flex items-center h-[25px] px-[10px] relative select-none outline-none data-[state=open]:bg-green4 data-[state=open]:text-grass11 data-[highlighted]:bg-gradient-to-br data-[highlighted]:from-green9 data-[highlighted]:to-green10 data-[highlighted]:text-green1 data-[highlighted]::to-green10 data-[state=open]:text-green1 data-[disabled]:text-mauve8 data-[disabled]:pointer-events-none"
-                >
-                  Search the web…
-                </MenubarItem>
-                <MenubarSeparator class="h-[1px] bg-green6 m-[5px]" />
-                <MenubarItem
-                  class="text-[13px] leading-none text-grass11 rounded flex items-center h-[25px] px-[10px] relative select-none outline-none data-[state=open]:bg-green4 data-[state=open]:text-grass11 data-[highlighted]:bg-gradient-to-br data-[highlighted]:from-green9 data-[highlighted]:to-green10 data-[highlighted]:text-green1 data-[highlighted]::to-green10 data-[state=open]:text-green1 data-[disabled]:text-mauve8 data-[disabled]:pointer-events-none"
-                >
-                  Find…
-                </MenubarItem>
-                <MenubarItem
-                  class="text-[13px] leading-none text-grass11 rounded flex items-center h-[25px] px-[10px] relative select-none outline-none data-[state=open]:bg-green4 data-[state=open]:text-grass11 data-[highlighted]:bg-gradient-to-br data-[highlighted]:from-green9 data-[highlighted]:to-green10 data-[highlighted]:text-green1 data-[highlighted]::to-green10 data-[state=open]:text-green1 data-[disabled]:text-mauve8 data-[disabled]:pointer-events-none"
-                >
-                  Find Next
-                </MenubarItem>
-                <MenubarItem
-                  class="text-[13px] leading-none text-grass11 rounded flex items-center h-[25px] px-[10px] relative select-none outline-none data-[state=open]:bg-green4 data-[state=open]:text-grass11 data-[highlighted]:bg-gradient-to-br data-[highlighted]:from-green9 data-[highlighted]:to-green10 data-[highlighted]:text-green1 data-[highlighted]::to-green10 data-[state=open]:text-green1 data-[disabled]:text-mauve8 data-[disabled]:pointer-events-none"
-                >
-                  Find Previous
-                </MenubarItem>
-              </MenubarSubContent>
-            </MenubarPortal>
-          </MenubarSub>
-          <MenubarSeparator class="h-[1px] bg-green6 m-[5px]" />
-          <MenubarItem
-            class="text-[13px] leading-none text-grass11 rounded flex items-center h-[25px] px-[10px] relative select-none outline-none data-[state=open]:bg-green4 data-[state=open]:text-grass11 data-[highlighted]:bg-gradient-to-br data-[highlighted]:from-green9 data-[highlighted]:to-green10 data-[highlighted]:text-green1 data-[highlighted]:data-[state=open]:text-green1 data-[disabled]:text-mauve8 data-[disabled]:pointer-events-none"
-          >
-            Cut
-          </MenubarItem>
-          <MenubarItem
-            class="text-[13px] leading-none text-grass11 rounded flex items-center h-[25px] px-[10px] relative select-none outline-none data-[state=open]:bg-green4 data-[state=open]:text-grass11 data-[highlighted]:bg-gradient-to-br data-[highlighted]:from-green9 data-[highlighted]:to-green10 data-[highlighted]:text-green1 data-[highlighted]:data-[state=open]:text-green1 data-[disabled]:text-mauve8 data-[disabled]:pointer-events-none"
-          >
-            Copy
-          </MenubarItem>
-          <MenubarItem
-            class="text-[13px] leading-none text-grass11 rounded flex items-center h-[25px] px-[10px] relative select-none outline-none data-[state=open]:bg-green4 data-[state=open]:text-grass11 data-[highlighted]:bg-gradient-to-br data-[highlighted]:from-green9 data-[highlighted]:to-green10 data-[highlighted]:text-green1 data-[highlighted]:data-[state=open]:text-green1 data-[disabled]:text-mauve8 data-[disabled]:pointer-events-none"
-          >
-            Paste
-          </MenubarItem>
-        </MenubarContent>
-      </MenubarPortal>
-    </MenubarMenu>
-
-    <MenubarMenu>
-      <MenubarTrigger
-        class="py-2 px-3 outline-none select-none font-semibold leading-none rounded text-grass11 text-[13px] flex items-center justify-between gap-[2px] data-[highlighted]:bg-green4 data-[state=open]:bg-green4"
-      >
-        View
-      </MenubarTrigger>
-      <MenubarPortal>
-        <MenubarContent
-          class="min-w-[220px] outline-none bg-white rounded-md p-[5px] shadow-[0px_10px_38px_-10px_rgba(22,_23,_24,_0.35),_0px_10px_20px_-15px_rgba(22,_23,_24,_0.2)] [animation-duration:_400ms] [animation-timing-function:_cubic-bezier(0.16,_1,_0.3,_1)] will-change-[transform,opacity]"
-          align="start"
-          :side-offset="5"
-          :align-offset="-14"
-        >
-          <MenubarCheckboxItem
-            v-model="checkboxOne"
-            class="group text-[13px] leading-none text-grass11 rounded-[3px] flex items-center h-[25px] px-[5px] relative pl-[20px] select-none outline-none data-[disabled]:text-mauve8 data-[disabled]:pointer-events-none data-[highlighted]:bg-green9 data-[highlighted]:text-green1"
-          >
-            <MenubarItemIndicator class="absolute left-0 w-[20px] inline-flex items-center justify-center">
-              <Icon icon="radix-icons:check" />
-            </MenubarItemIndicator>
-            Show Bookmarks
-            <div
-              class="ml-auto pl-[20px] text-mauve11 group-data-[highlighted]:text-white group-data-[disabled]:text-mauve8"
-            >
-              ⌘+B
-            </div>
-          </MenubarCheckboxItem>
-          <MenubarCheckboxItem
-            v-model="checkboxTwo"
-            class="text-[13px] leading-none text-grass11 rounded-[3px] flex items-center h-[25px] px-[5px] relative pl-[20px] select-none outline-none data-[disabled]:text-mauve8 data-[disabled]:pointer-events-none data-[highlighted]:bg-green9 data-[highlighted]:text-green1"
-          >
-            <MenubarItemIndicator class="absolute left-0 w-[20px] inline-flex items-center justify-center">
-              <Icon icon="radix-icons:check" />
-            </MenubarItemIndicator>
-            Show Full URLs
-          </MenubarCheckboxItem>
-          <MenubarSeparator class="h-[1px] bg-green6 m-[5px]" />
-          <MenubarItem
-            class="group text-[13px] leading-none text-grass11 rounded flex items-center h-[25px] px-[10px] relative select-none pl-5 outline-none data-[state=open]:bg-green4 data-[state=open]:text-grass11 data-[highlighted]:bg-gradient-to-br data-[highlighted]:from-green9 data-[highlighted]:to-green10 data-[highlighted]:text-green1 data-[highlighted]:data-[state=open]:text-green1 data-[disabled]:text-mauve8 data-[disabled]:pointer-events-none"
-          >
-            Reload
-            <div class="ml-auto pl-5 text-mauve9 group-data-[highlighted]:text-white group-data-[disabled]:text-mauve8">
-              ⌘ R
-            </div>
-          </MenubarItem>
-          <MenubarItem
-            class="group text-[13px] leading-none text-grass11 rounded flex items-center h-[25px] px-[10px] relative select-none pl-5 outline-none data-[state=open]:bg-green4 data-[state=open]:text-grass11 data-[highlighted]:bg-gradient-to-br data-[highlighted]:from-green9 data-[highlighted]:to-green10 data-[highlighted]:text-green1 data-[highlighted]:data-[state=open]:text-green1 data-[disabled]:text-mauve8 data-[disabled]:pointer-events-none"
-            disabled
-          >
-            Force Reload
-            <div class="ml-auto pl-5 text-mauve9 group-data-[highlighted]:text-white group-data-[disabled]:text-mauve8">
-              ⇧ ⌘ R
-            </div>
-          </MenubarItem>
-          <MenubarSeparator class="h-[1px] bg-green6 m-[5px]" />
-          <MenubarItem
-            class="text-[13px] leading-none text-grass11 rounded flex items-center h-[25px] px-[10px] relative select-none pl-5 outline-none data-[state=open]:bg-green4 data-[state=open]:text-grass11 data-[highlighted]:bg-gradient-to-br data-[highlighted]:from-green9 data-[highlighted]:to-green10 data-[highlighted]:text-green1 data-[highlighted]:data-[state=open]:text-green1 data-[disabled]:text-mauve8 data-[disabled]:pointer-events-none"
-          >
-            Toggle Fullscreen
-          </MenubarItem>
-          <MenubarSeparator class="h-[1px] bg-green6 m-[5px]" />
-          <MenubarItem
-            class="text-[13px] leading-none text-grass11 rounded flex items-center h-[25px] px-[10px] relative select-none pl-5 outline-none data-[state=open]:bg-green4 data-[state=open]:text-grass11 data-[highlighted]:bg-gradient-to-br data-[highlighted]:from-green9 data-[highlighted]:to-green10 data-[highlighted]:text-green1 data-[highlighted]:data-[state=open]:text-green1 data-[disabled]:text-mauve8 data-[disabled]:pointer-events-none"
-          >
-            Hide Sidebar
-          </MenubarItem>
-        </MenubarContent>
-      </MenubarPortal>
-    </MenubarMenu>
-
-    <MenubarMenu>
-      <MenubarTrigger
-        class="py-2 px-3 outline-none select-none font-semibold leading-none rounded text-grass11 text-[13px] flex items-center justify-between gap-[2px] data-[highlighted]:bg-green4 data-[state=open]:bg-green4"
-      >
-        Profiles
-      </MenubarTrigger>
-      <MenubarPortal>
-        <MenubarContent
-          class="min-w-[220px] outline-none bg-white rounded-md p-[5px] shadow-[0px_10px_38px_-10px_rgba(22,_23,_24,_0.35),_0px_10px_20px_-15px_rgba(22,_23,_24,_0.2)] [animation-duration:_400ms] [animation-timing-function:_cubic-bezier(0.16,_1,_0.3,_1)] will-change-[transform,opacity]"
-          align="start"
-          :side-offset="5"
-          :align-offset="-14"
-        >
-          <MenubarRadioGroup v-model="person">
-            <MenubarRadioItem
-              class="text-[13px] leading-none text-grass11 rounded-[3px] flex items-center h-[25px] px-[5px] relative pl-[20px] select-none outline-none data-[disabled]:text-mauve8 data-[disabled]:pointer-events-none data-[highlighted]:bg-green9 data-[highlighted]:text-green1"
-              value="pedro"
-            >
-              <MenubarItemIndicator class="absolute left-0 w-[20px] inline-flex items-center justify-center">
-                <Icon icon="radix-icons:dot-filled" />
-              </MenubarItemIndicator>
-              Pedro Duarte
-            </MenubarRadioItem>
-            <MenubarRadioItem
-              class="text-[13px] leading-none text-grass11 rounded-[3px] flex items-center h-[25px] px-[5px] relative pl-[20px] select-none outline-none data-[disabled]:text-mauve8 data-[disabled]:pointer-events-none data-[highlighted]:bg-green9 data-[highlighted]:text-green1"
-              value="colm"
-            >
-              <MenubarItemIndicator class="absolute left-0 w-[20px] inline-flex items-center justify-center">
-                <Icon icon="radix-icons:dot-filled" />
-              </MenubarItemIndicator>
-              Colm Tuite
-            </MenubarRadioItem>
-          </MenubarRadioGroup>
-          <MenubarSeparator class="h-[1px] bg-green6 m-[5px]" />
-          <MenubarItem
-            class="text-[13px] leading-none text-grass11 rounded flex items-center h-[25px] px-[10px] relative select-none pl-5 outline-none data-[state=open]:bg-green4 data-[state=open]:text-grass11 data-[highlighted]:bg-gradient-to-br data-[highlighted]:from-green9 data-[highlighted]:to-green10 data-[highlighted]:text-green1 data-[highlighted]:data-[state=open]:text-green1 data-[disabled]:text-mauve8 data-[disabled]:pointer-events-none"
-            @click="handleClick"
-          >
-            Edit…
-          </MenubarItem>
-          <MenubarSeparator class="h-[1px] bg-green6 m-[5px]" />
-          <MenubarItem
-            class="text-[13px] leading-none text-grass11 rounded flex items-center h-[25px] px-[10px] relative select-none pl-5 outline-none data-[state=open]:bg-green4 data-[state=open]:text-grass11 data-[highlighted]:bg-gradient-to-br data-[highlighted]:from-green9 data-[highlighted]:to-green10 data-[highlighted]:text-green1 data-[highlighted]:data-[state=open]:text-green1 data-[disabled]:text-mauve8 data-[disabled]:pointer-events-none"
-          >
-            Add Profile…
-          </MenubarItem>
-        </MenubarContent>
-      </MenubarPortal>
-    </MenubarMenu>
-  </MenubarRoot>
-</template>
-```
-
-### Update `tailwind.config.js`
-
-Add the following to your `tailwind.config.js` file:
-
-```ts
-const { blackA, green, grass, mauve } = require('@radix-ui/colors')
-
-/** @type {import('tailwindcss').Config} */
-module.exports = {
-  content: ['./**/*.vue'],
-  theme: {
-    extend: {
-      colors: {
-        ...blackA,
-        ...green,
-        ...grass,
-        ...mauve,
-      },
-    },
-  },
-  plugins: [],
-}
-```
-
-</Steps>
-
-</template>
-</TabPreview>
 
 ## Usage
 
diff --git a/apps/www/src/content/docs/components/navigation-menu.md b/apps/www/src/content/docs/components/navigation-menu.md
index 3de85430..03043b05 100644
--- a/apps/www/src/content/docs/components/navigation-menu.md
+++ b/apps/www/src/content/docs/components/navigation-menu.md
@@ -7,371 +7,11 @@ primitive: https://www.radix-vue.com/components/navigation-menu.html
 
 <ComponentPreview name="NavigationMenuDemo" /> 
 
-
-## Installation
-
-<TabPreview name="CLI">
-<template #CLI>
+## Installation 
 
 ```bash
 npx shadcn-vue@latest add navigation-menu
 ```
-</template>
-
-<template #Manual>
-
-<Steps>
-
-### Install the following dependencies:
-
-```bash
-npm install radix-vue
-
-npm install --save-dev @iconify/vue
-```
-
-### Copy and paste the following code into your project:
-
-Add the following code into your `NavigationMenuListItem.vue` file:
-
-```vue
-<script setup lang="ts">
-import { Icon } from '@iconify/vue'
-import { ref } from 'vue'
-import {
-  NavigationMenuContent,
-  NavigationMenuIndicator,
-  NavigationMenuItem,
-  NavigationMenuLink,
-  NavigationMenuList,
-  NavigationMenuRoot,
-  NavigationMenuTrigger,
-  NavigationMenuViewport,
-} from 'radix-vue'
-import NavigationMenuListItem from './NavigationMenuListItem.vue'
-
-function handleClick() {
-  alert('hello!')
-}
-
-const currentTrigger = ref('')
-</script>
-
-<template>
-  <NavigationMenuRoot v-model="currentTrigger" class="relative z-[1] flex w-full justify-center">
-    <NavigationMenuList class="center shadow-blackA7 m-0 flex list-none rounded-[6px] bg-white p-1 shadow-[0_2px_10px]">
-      <NavigationMenuItem>
-        <NavigationMenuTrigger
-          class="text-grass11 hover:bg-green3 focus:shadow-green7 group flex select-none items-center justify-between gap-[2px] rounded-[4px] px-3 py-2 text-[15px] font-medium leading-none outline-none focus:shadow-[0_0_0_2px]"
-        >
-          Learn
-          <Icon
-            icon="radix-icons:caret-down"
-            class="text-green10 relative top-[1px] transition-transform duration-[250] ease-in group-data-[state=open]:-rotate-180"
-            aria-hidden
-          />
-        </NavigationMenuTrigger>
-        <NavigationMenuContent
-          class="data-[motion=from-start]:animate-enterFromLeft data-[motion=from-end]:animate-enterFromRight data-[motion=to-start]:animate-exitToLeft data-[motion=to-end]:animate-exitToRight absolute top-0 left-0 w-full sm:w-auto"
-        >
-          <ul class="one m-0 grid list-none gap-x-[10px] p-[22px] sm:w-[500px] sm:grid-cols-[0.75fr_1fr]">
-            <li class="row-span-3 grid">
-              <NavigationMenuLink as-child>
-                <a
-                  class="focus:shadow-green7 from-green9 to-teal9 flex h-full w-full select-none flex-col justify-end rounded-[6px] bg-gradient-to-b p-[25px] no-underline outline-none focus:shadow-[0_0_0_2px]"
-                  href="/"
-                >
-                  <img class="w-16" src="/logo.svg">
-                  <div class="mt-4 mb-[7px] text-[18px] font-medium leading-[1.2] text-white">Radix Primitives</div>
-                  <p class="text-mauve4 text-[14px] leading-[1.3]">Unstyled, accessible components for React.</p>
-                </a>
-              </NavigationMenuLink>
-            </li>
-
-            <NavigationMenuListItem href="https://stitches.dev/" title="Stitches">
-              CSS-in-JS with best-in-class developer experience.
-            </NavigationMenuListItem>
-            <NavigationMenuListItem href="/colors" title="Colors">
-              Beautiful, thought-out palettes with auto dark mode.
-            </NavigationMenuListItem>
-            <NavigationMenuListItem href="https://icons.radix-ui.com/" title="Icons">
-              A crisp set of 15x15 icons, balanced and consistent.
-            </NavigationMenuListItem>
-          </ul>
-        </NavigationMenuContent>
-      </NavigationMenuItem>
-
-      <NavigationMenuItem>
-        <NavigationMenuTrigger
-          class="text-grass11 hover:bg-green3 focus:shadow-green7 group flex select-none items-center justify-between gap-[2px] rounded-[4px] px-3 py-2 text-[15px] font-medium leading-none outline-none focus:shadow-[0_0_0_2px]"
-        >
-          Overview
-          <Icon
-            icon="radix-icons:caret-down"
-            class="text-green10 relative top-[1px] transition-transform duration-[250] ease-in group-data-[state=open]:-rotate-180"
-            aria-hidden
-          />
-        </NavigationMenuTrigger>
-        <NavigationMenuContent class="absolute top-0 left-0 w-full sm:w-auto">
-          <ul class="m-0 grid list-none gap-x-[10px] p-[22px] sm:w-[600px] sm:grid-flow-col sm:grid-rows-3">
-            <NavigationMenuListItem title="Introduction" href="/docs/primitives/overview/introduction">
-              Build high-quality, accessible design systems and web apps.
-            </NavigationMenuListItem>
-            <NavigationMenuListItem title="Getting started" href="/docs/primitives/overview/getting-started">
-              A quick tutorial to get you up and running with Radix Primitives.
-            </NavigationMenuListItem>
-            <NavigationMenuListItem title="Styling" href="/docs/primitives/guides/styling">
-              Unstyled and compatible with any styling solution.
-            </NavigationMenuListItem>
-            <NavigationMenuListItem title="Animation" href="/docs/primitives/guides/animation">
-              Use CSS keyframes or any animation library of your choice.
-            </NavigationMenuListItem>
-            <NavigationMenuListItem title="Accessibility" href="/docs/primitives/overview/accessibility">
-              Tested in a range of browsers and assistive technologies.
-            </NavigationMenuListItem>
-            <NavigationMenuListItem title="Releases" href="/docs/primitives/overview/releases">
-              Radix Primitives releases and their changelogs.
-            </NavigationMenuListItem>
-          </ul>
-        </NavigationMenuContent>
-      </NavigationMenuItem>
-
-      <NavigationMenuItem>
-        <NavigationMenuLink
-          class="text-grass11 hover:bg-green3 focus:shadow-green7 block select-none rounded-[4px] px-3 py-2 text-[15px] font-medium leading-none no-underline outline-none focus:shadow-[0_0_0_2px]"
-          href="https://github.com/radix-vue"
-        >
-          Github
-        </NavigationMenuLink>
-      </NavigationMenuItem>
-
-      <NavigationMenuIndicator
-        class="data-[state=hidden]:opacity-0 duration-200 data-[state=visible]:animate-fadeIn data-[state=hidden]:animate-fadeOut top-full z-[1] flex h-[10px] items-end justify-center overflow-hidden transition-[all,transform_250ms_ease]"
-      >
-        <div class="relative top-[70%] h-[10px] w-[10px] rotate-[45deg] rounded-tl-[2px] bg-white" />
-      </NavigationMenuIndicator>
-    </NavigationMenuList>
-
-    <div class="perspective-[2000px] absolute top-full left-0 flex w-full justify-center">
-      <NavigationMenuViewport
-        class="data-[state=open]:animate-scaleIn data-[state=closed]:animate-scaleOut relative mt-[10px] h-[var(--radix-navigation-menu-viewport-height)] w-full origin-[top_center] overflow-hidden rounded-[10px] bg-white transition-[width,_height] duration-300 sm:w-[var(--radix-navigation-menu-viewport-width)]"
-      />
-    </div>
-  </NavigationMenuRoot>
-</template>
-```
-
-Add the following code into your `index.vue` file:
-
-```vue
-<script setup lang="ts">
-import { Icon } from '@iconify/vue'
-import { ref } from 'vue'
-import {
-  NavigationMenuContent,
-  NavigationMenuIndicator,
-  NavigationMenuItem,
-  NavigationMenuLink,
-  NavigationMenuList,
-  NavigationMenuRoot,
-  NavigationMenuTrigger,
-  NavigationMenuViewport,
-} from 'radix-vue'
-import NavigationMenuListItem from './NavigationMenuListItem.vue'
-
-function handleClick() {
-  alert('hello!')
-}
-
-const currentTrigger = ref('')
-</script>
-
-<template>
-  <NavigationMenuRoot v-model="currentTrigger" class="relative z-[1] flex w-full justify-center">
-    <NavigationMenuList class="center shadow-blackA7 m-0 flex list-none rounded-[6px] bg-white p-1 shadow-[0_2px_10px]">
-      <NavigationMenuItem>
-        <NavigationMenuTrigger
-          class="text-grass11 hover:bg-green3 focus:shadow-green7 group flex select-none items-center justify-between gap-[2px] rounded-[4px] px-3 py-2 text-[15px] font-medium leading-none outline-none focus:shadow-[0_0_0_2px]"
-        >
-          Learn
-          <Icon
-            icon="radix-icons:caret-down"
-            class="text-green10 relative top-[1px] transition-transform duration-[250] ease-in group-data-[state=open]:-rotate-180"
-            aria-hidden
-          />
-        </NavigationMenuTrigger>
-        <NavigationMenuContent
-          class="data-[motion=from-start]:animate-enterFromLeft data-[motion=from-end]:animate-enterFromRight data-[motion=to-start]:animate-exitToLeft data-[motion=to-end]:animate-exitToRight absolute top-0 left-0 w-full sm:w-auto"
-        >
-          <ul class="one m-0 grid list-none gap-x-[10px] p-[22px] sm:w-[500px] sm:grid-cols-[0.75fr_1fr]">
-            <li class="row-span-3 grid">
-              <NavigationMenuLink as-child>
-                <a
-                  class="focus:shadow-green7 from-green9 to-teal9 flex h-full w-full select-none flex-col justify-end rounded-[6px] bg-gradient-to-b p-[25px] no-underline outline-none focus:shadow-[0_0_0_2px]"
-                  href="/"
-                >
-                  <img class="w-16" src="/logo.svg">
-                  <div class="mt-4 mb-[7px] text-[18px] font-medium leading-[1.2] text-white">Radix Primitives</div>
-                  <p class="text-mauve4 text-[14px] leading-[1.3]">Unstyled, accessible components for React.</p>
-                </a>
-              </NavigationMenuLink>
-            </li>
-
-            <NavigationMenuListItem href="https://stitches.dev/" title="Stitches">
-              CSS-in-JS with best-in-class developer experience.
-            </NavigationMenuListItem>
-            <NavigationMenuListItem href="/colors" title="Colors">
-              Beautiful, thought-out palettes with auto dark mode.
-            </NavigationMenuListItem>
-            <NavigationMenuListItem href="https://icons.radix-ui.com/" title="Icons">
-              A crisp set of 15x15 icons, balanced and consistent.
-            </NavigationMenuListItem>
-          </ul>
-        </NavigationMenuContent>
-      </NavigationMenuItem>
-
-      <NavigationMenuItem>
-        <NavigationMenuTrigger
-          class="text-grass11 hover:bg-green3 focus:shadow-green7 group flex select-none items-center justify-between gap-[2px] rounded-[4px] px-3 py-2 text-[15px] font-medium leading-none outline-none focus:shadow-[0_0_0_2px]"
-        >
-          Overview
-          <Icon
-            icon="radix-icons:caret-down"
-            class="text-green10 relative top-[1px] transition-transform duration-[250] ease-in group-data-[state=open]:-rotate-180"
-            aria-hidden
-          />
-        </NavigationMenuTrigger>
-        <NavigationMenuContent class="absolute top-0 left-0 w-full sm:w-auto">
-          <ul class="m-0 grid list-none gap-x-[10px] p-[22px] sm:w-[600px] sm:grid-flow-col sm:grid-rows-3">
-            <NavigationMenuListItem title="Introduction" href="/docs/primitives/overview/introduction">
-              Build high-quality, accessible design systems and web apps.
-            </NavigationMenuListItem>
-            <NavigationMenuListItem title="Getting started" href="/docs/primitives/overview/getting-started">
-              A quick tutorial to get you up and running with Radix Primitives.
-            </NavigationMenuListItem>
-            <NavigationMenuListItem title="Styling" href="/docs/primitives/guides/styling">
-              Unstyled and compatible with any styling solution.
-            </NavigationMenuListItem>
-            <NavigationMenuListItem title="Animation" href="/docs/primitives/guides/animation">
-              Use CSS keyframes or any animation library of your choice.
-            </NavigationMenuListItem>
-            <NavigationMenuListItem title="Accessibility" href="/docs/primitives/overview/accessibility">
-              Tested in a range of browsers and assistive technologies.
-            </NavigationMenuListItem>
-            <NavigationMenuListItem title="Releases" href="/docs/primitives/overview/releases">
-              Radix Primitives releases and their changelogs.
-            </NavigationMenuListItem>
-          </ul>
-        </NavigationMenuContent>
-      </NavigationMenuItem>
-
-      <NavigationMenuItem>
-        <NavigationMenuLink
-          class="text-grass11 hover:bg-green3 focus:shadow-green7 block select-none rounded-[4px] px-3 py-2 text-[15px] font-medium leading-none no-underline outline-none focus:shadow-[0_0_0_2px]"
-          href="https://github.com/radix-vue"
-        >
-          Github
-        </NavigationMenuLink>
-      </NavigationMenuItem>
-
-      <NavigationMenuIndicator
-        class="data-[state=hidden]:opacity-0 duration-200 data-[state=visible]:animate-fadeIn data-[state=hidden]:animate-fadeOut top-full z-[1] flex h-[10px] items-end justify-center overflow-hidden transition-[all,transform_250ms_ease]"
-      >
-        <div class="relative top-[70%] h-[10px] w-[10px] rotate-[45deg] rounded-tl-[2px] bg-white" />
-      </NavigationMenuIndicator>
-    </NavigationMenuList>
-
-    <div class="perspective-[2000px] absolute top-full left-0 flex w-full justify-center">
-      <NavigationMenuViewport
-        class="data-[state=open]:animate-scaleIn data-[state=closed]:animate-scaleOut relative mt-[10px] h-[var(--radix-navigation-menu-viewport-height)] w-full origin-[top_center] overflow-hidden rounded-[10px] bg-white transition-[width,_height] duration-300 sm:w-[var(--radix-navigation-menu-viewport-width)]"
-      />
-    </div>
-  </NavigationMenuRoot>
-</template>
-```
-
-### Update `tailwind.config.js` file:
-
-Add the following into your `tailwind.config.js` file:
-
-```ts
-const plugin = require('tailwindcss/plugin')
-const { blackA, green, grass, teal } = require('@radix-ui/colors')
-
-/** @type {import('tailwindcss').Config} */
-module.exports = {
-  content: ['./**/*.vue'],
-  theme: {
-    extend: {
-      colors: {
-        ...blackA,
-        ...green,
-        ...grass,
-        ...teal,
-      },
-    },
-    keyframes: {
-      enterFromRight: {
-        from: { opacity: 0, transform: 'translateX(200px)' },
-        to: { opacity: 1, transform: 'translateX(0)' },
-      },
-      enterFromLeft: {
-        from: { opacity: 0, transform: 'translateX(-200px)' },
-        to: { opacity: 1, transform: 'translateX(0)' },
-      },
-      exitToRight: {
-        from: { opacity: 1, transform: 'translateX(0)' },
-        to: { opacity: 0, transform: 'translateX(200px)' },
-      },
-      exitToLeft: {
-        from: { opacity: 1, transform: 'translateX(0)' },
-        to: { opacity: 0, transform: 'translateX(-200px)' },
-      },
-      scaleIn: {
-        from: { opacity: 0, transform: 'rotateX(-10deg) scale(0.9)' },
-        to: { opacity: 1, transform: 'rotateX(0deg) scale(1)' },
-      },
-      scaleOut: {
-        from: { opacity: 1, transform: 'rotateX(0deg) scale(1)' },
-        to: { opacity: 0, transform: 'rotateX(-10deg) scale(0.95)' },
-      },
-      fadeIn: {
-        from: { opacity: 0 },
-        to: { opacity: 1 },
-      },
-      fadeOut: {
-        from: { opacity: 1 },
-        to: { opacity: 0 },
-      },
-    },
-  },
-  animation: {
-    scaleIn: 'scaleIn 200ms ease',
-    scaleOut: 'scaleOut 200ms ease',
-    fadeIn: 'fadeIn 200ms ease',
-    fadeOut: 'fadeOut 200ms ease',
-    enterFromLeft: 'enterFromLeft 250ms ease',
-    enterFromRight: 'enterFromRight 250ms ease',
-    exitToLeft: 'exitToLeft 250ms ease',
-    exitToRight: 'exitToRight 250ms ease',
-  },
-  plugins: [
-    plugin(({ matchUtilities }) => {
-      matchUtilities({
-        perspective: value => ({
-          perspective: value,
-        }),
-      })
-    }),
-  ],
-}
-```
-
-
-</Steps>
-
-</template>
-</TabPreview>
 
 ## Usage
 
diff --git a/apps/www/src/content/docs/components/popover.md b/apps/www/src/content/docs/components/popover.md
index 58fe691f..4a19b82e 100644
--- a/apps/www/src/content/docs/components/popover.md
+++ b/apps/www/src/content/docs/components/popover.md
@@ -8,157 +8,12 @@ primitive: https://www.radix-vue.com/components/popover.html
 
 <ComponentPreview name="PopoverDemo" /> 
 
-
-
 ## Installation
 
-<TabPreview name="CLI">
-<template #CLI>
 
 ```bash
 npx shadcn-vue@latest add popover
 ```
-</template>
-
-<template #Manual>
-
-<Steps>
-
-### Install the following dependencies:
-
-```bash
-npm install radix-vue
-
-npm install --save-dev @iconify/vue
-```
-
-### Copy and paste the following code into your project:
-
-Add the following code into your project:
-
-```vue
-<script setup lang="ts">
-import { Icon } from '@iconify/vue'
-import { PopoverArrow, PopoverClose, PopoverContent, PopoverPortal, PopoverRoot, PopoverTrigger } from 'radix-vue'
-</script>
-
-<template>
-  <PopoverRoot>
-    <PopoverTrigger
-      class="rounded-full w-[35px] h-[35px] inline-flex items-center justify-center text-grass11 bg-white shadow-[0_2px_10px] shadow-blackA7 hover:bg-green3 focus:shadow-[0_0_0_2px] focus:shadow-black cursor-default outline-none"
-      aria-label="Update dimensions"
-    >
-      <Icon icon="radix-icons:mixer-horizontal" />
-    </PopoverTrigger>
-    <PopoverPortal>
-      <PopoverContent
-        side="bottom"
-        :side-offset="5"
-        class="rounded p-5 w-[260px] bg-white shadow-[0_10px_38px_-10px_hsla(206,22%,7%,.35),0_10px_20px_-15px_hsla(206,22%,7%,.2)] focus:shadow-[0_10px_38px_-10px_hsla(206,22%,7%,.35),0_10px_20px_-15px_hsla(206,22%,7%,.2),0_0_0_2px_theme(colors.green7)] will-change-[transform,opacity] data-[state=open]:data-[side=top]:animate-slideDownAndFade data-[state=open]:data-[side=right]:animate-slideLeftAndFade data-[state=open]:data-[side=bottom]:animate-slideUpAndFade data-[state=open]:data-[side=left]:animate-slideRightAndFade"
-      >
-        <div class="flex flex-col gap-2.5">
-          <p class="text-mauve12 text-[15px] leading-[19px] font-semibold mb-2.5">
-            Dimensions
-          </p>
-          <fieldset class="flex gap-5 items-center">
-            <label class="text-[13px] text-grass11 w-[75px]" for="width"> Width </label>
-            <input
-              id="width"
-              class="w-full inline-flex items-center justify-center flex-1 rounded px-2.5 text-[13px] leading-none text-grass11 shadow-[0_0_0_1px] shadow-green7 h-[25px] focus:shadow-[0_0_0_2px] focus:shadow-green8 outline-none"
-              defaultValue="100%"
-            >
-          </fieldset>
-          <fieldset class="flex gap-5 items-center">
-            <label class="text-[13px] text-grass11 w-[75px]" for="maxWidth"> Max. width </label>
-            <input
-              id="maxWidth"
-              class="w-full inline-flex items-center justify-center flex-1 rounded px-2.5 text-[13px] leading-none text-grass11 shadow-[0_0_0_1px] shadow-green7 h-[25px] focus:shadow-[0_0_0_2px] focus:shadow-green8 outline-none"
-              defaultValue="300px"
-            >
-          </fieldset>
-          <fieldset class="flex gap-5 items-center">
-            <label class="text-[13px] text-grass11 w-[75px]" for="height"> Height </label>
-            <input
-              id="height"
-              class="w-full inline-flex items-center justify-center flex-1 rounded px-2.5 text-[13px] leading-none text-grass11 shadow-[0_0_0_1px] shadow-green7 h-[25px] focus:shadow-[0_0_0_2px] focus:shadow-green8 outline-none"
-              defaultValue="25px"
-            >
-          </fieldset>
-          <fieldset class="flex gap-5 items-center">
-            <label class="text-[13px] text-grass11 w-[75px]" for="maxHeight"> Max. height </label>
-            <input
-              id="maxHeight"
-              class="w-full inline-flex items-center justify-center flex-1 rounded px-2.5 text-[13px] leading-none text-grass11 shadow-[0_0_0_1px] shadow-green7 h-[25px] focus:shadow-[0_0_0_2px] focus:shadow-green8 outline-none"
-              defaultValue="none"
-            >
-          </fieldset>
-        </div>
-        <PopoverClose
-          class="rounded-full h-[25px] w-[25px] inline-flex items-center justify-center text-grass11 absolute top-[5px] right-[5px] hover:bg-green4 focus:shadow-[0_0_0_2px] focus:shadow-green7 outline-none cursor-default"
-          aria-label="Close"
-        >
-          <Icon icon="radix-icons:cross-2" />
-        </PopoverClose>
-        <PopoverArrow class="fill-white" />
-      </PopoverContent>
-    </PopoverPortal>
-  </PopoverRoot>
-</template>
-```
-
-### Update `tailwind.config.js`
-
-Add the following code into your `tailwind.config.js` file:
-
-```ts
-const { blackA, green, grass, mauve } = require('@radix-ui/colors')
-
-/** @type {import('tailwindcss').Config} */
-module.exports = {
-  content: ['./**/*.vue'],
-  theme: {
-    extend: {
-      colors: {
-        ...blackA,
-        ...green,
-        ...grass,
-        ...mauve,
-      },
-      keyframes: {
-        slideDownAndFade: {
-          from: { opacity: 0, transform: 'translateY(-2px)' },
-          to: { opacity: 1, transform: 'translateY(0)' },
-        },
-        slideLeftAndFade: {
-          from: { opacity: 0, transform: 'translateX(2px)' },
-          to: { opacity: 1, transform: 'translateX(0)' },
-        },
-        slideUpAndFade: {
-          from: { opacity: 0, transform: 'translateY(2px)' },
-          to: { opacity: 1, transform: 'translateY(0)' },
-        },
-        slideRightAndFade: {
-          from: { opacity: 0, transform: 'translateX(-2px)' },
-          to: { opacity: 1, transform: 'translateX(0)' },
-        },
-      },
-      animation: {
-        slideDownAndFade: 'slideDownAndFade 400ms cubic-bezier(0.16, 1, 0.3, 1)',
-        slideLeftAndFade: 'slideLeftAndFade 400ms cubic-bezier(0.16, 1, 0.3, 1)',
-        slideUpAndFade: 'slideUpAndFade 400ms cubic-bezier(0.16, 1, 0.3, 1)',
-        slideRightAndFade: 'slideRightAndFade 400ms cubic-bezier(0.16, 1, 0.3, 1)',
-      },
-    },
-  },
-  plugins: [],
-}
-```
-
-
-</Steps>
-
-</template>
-</TabPreview>
 
 ## Usage
 
diff --git a/apps/www/src/content/docs/components/progress.md b/apps/www/src/content/docs/components/progress.md
index 83bb1f1a..bb1515a6 100644
--- a/apps/www/src/content/docs/components/progress.md
+++ b/apps/www/src/content/docs/components/progress.md
@@ -31,53 +31,7 @@ npm install radix-vue
 
 ### Copy and paste the following code into your project:
 
-```vue
-<script setup lang="ts">
-import { onMounted, ref } from 'vue'
-import { ProgressIndicator, ProgressRoot } from 'radix-vue'
-
-const progressValue = ref(10)
-
-onMounted(() => {
-  const timer = setTimeout(() => (progressValue.value = 66), 500)
-  return () => clearTimeout(timer)
-})
-</script>
-
-<template>
-  <ProgressRoot
-    v-model="progressValue"
-    class="relative overflow-hidden bg-blackA9 rounded-full w-full sm:w-[300px] h-4 sm:h-5"
-    style="transform: translateZ(0)"
-  >
-    <ProgressIndicator
-      class="bg-white rounded-full w-full h-full transition-transform duration-[660ms] ease-[cubic-bezier(0.65, 0, 0.35, 1)]"
-      :style="`transform: translateX(-${100 - progressValue}%)`"
-    />
-  </ProgressRoot>
-</template>
-```
-
-### Update `tailwind.config.js`
-
-Add the following code into your `tailwind.config.js` file:
-
-```ts
-const { blackA } = require('@radix-ui/colors')
-
-/** @type {import('tailwindcss').Config} */
-module.exports = {
-  content: ['./**/*.vue'],
-  theme: {
-    extend: {
-      colors: {
-        ...blackA,
-      },
-    },
-  },
-  plugins: [],
-}
-```
+ <<< @/lib/registry/default/ui/progress/Progress.vue
 
 </Steps>
 
diff --git a/apps/www/src/content/docs/components/radio-group.md b/apps/www/src/content/docs/components/radio-group.md
index 3b16b2aa..a2b9a762 100644
--- a/apps/www/src/content/docs/components/radio-group.md
+++ b/apps/www/src/content/docs/components/radio-group.md
@@ -7,112 +7,12 @@ primitive: https://www.radix-vue.com/components/radio-group.html
 
 <ComponentPreview name="RadioGroupDemo" /> 
 
-
 ## Installation
 
-<TabPreview name="CLI">
-<template #CLI>
 
 ```bash
 npx shadcn-vue@latest add radio-group
 ```
-</template>
-
-<template #Manual>
-
-<Steps>
-
-### Install the following dependency:
-
-```bash
-npm install radix-vue
-```
-
-### Copy and paste the following code into your project:
-
-```vue
-<script setup lang="ts">
-import { RadioGroupIndicator, RadioGroupItem, RadioGroupRoot } from 'radix-vue'
-import { ref } from 'vue'
-
-const radioStateSingle = ref('default')
-</script>
-
-<template>
-  <RadioGroupRoot
-    v-model="radioStateSingle" class="flex flex-col gap-2.5" default-value="default"
-    aria-label="View density"
-  >
-    <div class="flex items-center">
-      <RadioGroupItem
-        id="r1"
-        class="bg-white w-[25px] h-[25px] rounded-full shadow-[0_2px_10px] shadow-blackA7 hover:bg-green3 focus:shadow-[0_0_0_2px] focus:shadow-black outline-none cursor-default" value="default"
-      >
-        <RadioGroupIndicator
-          class="flex items-center justify-center w-full h-full relative after:content-[''] after:block after:w-[11px] after:h-[11px] after:rounded-[50%] after:bg-grass11"
-        />
-      </RadioGroupItem>
-      <label class="text-white text-[15px] leading-none pl-[15px]" for="r1">
-        Default
-      </label>
-    </div>
-    <div class="flex items-center">
-      <RadioGroupItem
-        id="r2"
-        class="bg-white w-[25px] h-[25px] rounded-full shadow-[0_2px_10px] shadow-blackA7 hover:bg-green3 focus:shadow-[0_0_0_2px] focus:shadow-black outline-none cursor-default" value="comfortable"
-      >
-        <RadioGroupIndicator
-          class="flex items-center justify-center w-full h-full relative after:content-[''] after:block after:w-[11px] after:h-[11px] after:rounded-[50%] after:bg-grass11"
-        />
-      </RadioGroupItem>
-      <label class="text-white text-[15px] leading-none pl-[15px]" for="r2">
-        Comfortable
-      </label>
-    </div>
-    <div class="flex items-center">
-      <RadioGroupItem
-        id="r3"
-        class="bg-white w-[25px] h-[25px] rounded-full shadow-[0_2px_10px] shadow-blackA7 hover:bg-green3 focus:shadow-[0_0_0_2px] focus:shadow-black outline-none cursor-default" value="compact"
-      >
-        <RadioGroupIndicator
-          class="flex items-center justify-center w-full h-full relative after:content-[''] after:block after:w-[11px] after:h-[11px] after:rounded-[50%] after:bg-grass11"
-        />
-      </RadioGroupItem>
-      <label class="text-white text-[15px] leading-none pl-[15px]" for="r3">
-        Compact
-      </label>
-    </div>
-  </RadioGroupRoot>
-</template>
-```
-
-### Update `tailwind.config.js` 
-
-Add the following code into your `tailwind.config.js` file:
-
-```ts
-const { blackA, green, grass } = require('@radix-ui/colors')
-
-/** @type {import('tailwindcss').Config} */
-module.exports = {
-  content: ['./**/*.vue'],
-  theme: {
-    extend: {
-      colors: {
-        ...blackA,
-        ...green,
-        ...grass,
-      },
-    },
-  },
-  plugins: [],
-}
-```
-
-</Steps>
-
-</template>
-</TabPreview>
 
 ## Usage
 
diff --git a/apps/www/src/content/docs/components/scroll-area.md b/apps/www/src/content/docs/components/scroll-area.md
index fce0fd09..1f7a4023 100644
--- a/apps/www/src/content/docs/components/scroll-area.md
+++ b/apps/www/src/content/docs/components/scroll-area.md
@@ -7,120 +7,12 @@ primitive: https://www.radix-vue.com/components/scroll-area.html
 
 <ComponentPreview name="ScrollAreaDemo" /> 
 
-
-
 ## Installation
 
-<TabPreview name="CLI">
-<template #CLI>
 
 ```bash
 npx shadcn-vue@latest add scroll-area
 ```
-</template>
-
-<template #Manual>
-
-<Steps>
-
-### Install the following dependency:
-
-```bash
-npm install radix-vue
-```
-
-### Copy and paste the following code into your project:
-
-```vue
-<script setup lang="ts">
-import { ScrollAreaRoot, ScrollAreaScrollbar, ScrollAreaThumb, ScrollAreaViewport } from 'radix-vue'
-
-const tags = Array.from({ length: 50 }).map((_, i, a) => `v1.2.0-beta.${a.length - i}`)
-</script>
-
-<template>
-  <ScrollAreaRoot
-    class="w-[200px] h-[225px] rounded overflow-hidden shadow-[0_2px_10px] shadow-blackA7 bg-white"
-    style="--scrollbar-size: 10px"
-  >
-    <ScrollAreaViewport class="w-full h-full rounded">
-      <div class="py-[15px] px-5">
-        <div class="text-grass11 text-[15px] leading-[18px] font-semibold">
-          Tags
-        </div>
-        <div
-          v-for="tag in tags"
-          :key="tag"
-          class="text-mauve12 text-[13px] leading-[18px] mt-2.5 pt-2.5 border-t border-t-mauve6"
-        >
-          {{ tag }}
-        </div>
-      </div>
-    </ScrollAreaViewport>
-    <ScrollAreaScrollbar
-      class="flex select-none touch-none p-0.5 bg-blackA6 transition-colors duration-[160ms] ease-out hover:bg-blackA8 data-[orientation=vertical]:w-2.5 data-[orientation=horizontal]:flex-col data-[orientation=horizontal]:h-2.5"
-      orientation="vertical"
-    >
-      <ScrollAreaThumb
-        class="flex-1 bg-mauve10 rounded-[10px] relative before:content-[''] before:absolute before:top-1/2 before:left-1/2 before:-translate-x-1/2 before:-translate-y-1/2 before:w-full before:h-full before:min-w-[44px] before:min-h-[44px]"
-      />
-    </ScrollAreaScrollbar>
-    <ScrollAreaScrollbar
-      class="flex select-none touch-none p-0.5 bg-blackA6 transition-colors duration-[160ms] ease-out hover:bg-blackA8 data-[orientation=vertical]:w-2.5 data-[orientation=horizontal]:flex-col data-[orientation=horizontal]:h-2.5"
-      orientation="horizontal"
-    >
-      <ScrollAreaThumb
-        class="flex-1 bg-mauve10 rounded-[10px] relative before:content-[''] before:absolute before:top-1/2 before:left-1/2 before:-translate-x-1/2 before:-translate-y-1/2 before:w-full before:h-full before:min-w-[44px] before:min-h-[44px]"
-      />
-    </ScrollAreaScrollbar>
-  </ScrollAreaRoot>
-</template>
-
-<style>
-/* increase target size for touch devices https://www.w3.org/WAI/WCAG21/Understanding/target-size.html */
-.ScrollAreaThumb::before {
-  content: "";
-  position: absolute;
-  top: 50%;
-  left: 50%;
-  transform: translate(-50%, -50%);
-  width: 100%;
-  height: 100%;
-  min-width: 44px;
-  min-height: 44px;
-}
-</style>
-```
-
-### Update `tailwind.config.js`
-
-Add the following code into your `tailwind.config.js` file:
-
-```ts
-const { blackA, green, grass, mauve } = require('@radix-ui/colors')
-
-/** @type {import('tailwindcss').Config} */
-module.exports = {
-  content: ['./**/*.vue'],
-  theme: {
-    extend: {
-      colors: {
-        ...blackA,
-        ...green,
-        ...grass,
-        ...mauve,
-      },
-    },
-  },
-  plugins: [],
-}
-```
-
-</Steps>
-
-</template>
-</TabPreview>
-
 ## Usage
 
 ```vue
diff --git a/apps/www/src/content/docs/components/select.md b/apps/www/src/content/docs/components/select.md
index bcf16961..e6798284 100644
--- a/apps/www/src/content/docs/components/select.md
+++ b/apps/www/src/content/docs/components/select.md
@@ -8,185 +8,12 @@ primitive: https://www.radix-vue.com/components/popover.html
 
 <ComponentPreview name="SelectDemo" /> 
 
-
-
 ## Installation
 
-<TabPreview name="CLI">
-<template #CLI>
 
 ```bash
 npx shadcn-vue@latest add select
 ```
-</template>
-
-<template #Manual>
-
-<Steps>
-
-### Install the following dependencies
-
-```bash
-npm install radix-vue
-
-npm install --save-dev @iconify/vue
-```
-
-### Copy and paste the following code into your project
-
-```vue
-<script setup lang="ts">
-import { Icon } from '@iconify/vue'
-import { ref } from 'vue'
-import {
-  SelectContent,
-  SelectGroup,
-  SelectItem,
-  SelectItemIndicator,
-  SelectItemText,
-  SelectLabel,
-  SelectPortal,
-  SelectRoot,
-  SelectScrollDownButton,
-  SelectScrollUpButton,
-  SelectSeparator,
-  SelectTrigger,
-  SelectValue,
-  SelectViewport,
-} from 'radix-vue'
-
-const fruit = ref()
-
-function handleClick() {
-  alert('hello!')
-}
-
-const options = ['Apple', 'Banana', 'Blueberry', 'Grapes', 'Pineapple']
-const vegetables = ['Aubergine', 'Broccoli', 'Carrot', 'Courgette', 'Leek']
-</script>
-
-<template>
-  <SelectRoot v-model="fruit">
-    <SelectTrigger
-      class="inline-flex w-[150px] items-center justify-between rounded px-[15px] text-[13px] leading-none h-[35px] gap-[5px] bg-white text-grass11 shadow-[0_2px_10px] shadow-black/10 hover:bg-mauve3 focus:shadow-[0_0_0_2px] focus:shadow-black data-[placeholder]:text-green9 outline-none"
-      aria-label="Customise options"
-    >
-      <SelectValue placeholder="Select a fruit..." />
-      <Icon icon="radix-icons:chevron-down" class="h-3.5 w-3.5" />
-    </SelectTrigger>
-
-    <SelectPortal>
-      <SelectContent
-        class="w-[150px] bg-white rounded shadow-[0px_10px_38px_-10px_rgba(22,_23,_24,_0.35),_0px_10px_20px_-15px_rgba(22,_23,_24,_0.2)] will-change-[opacity,transform] data-[side=top]:animate-slideDownAndFade data-[side=right]:animate-slideLeftAndFade data-[side=bottom]:animate-slideUpAndFade data-[side=left]:animate-slideRightAndFade"
-        :side-offset="5"
-        position="popper"
-      >
-        <SelectScrollUpButton class="flex items-center justify-center h-[25px] bg-white text-violet11 cursor-default">
-          <Icon icon="radix-icons:chevron-up" />
-        </SelectScrollUpButton>
-
-        <SelectViewport class="p-[5px]">
-          <SelectLabel class="px-[25px] text-xs leading-[25px] text-mauve11">
-            Fruits
-          </SelectLabel>
-          <SelectGroup>
-            <SelectItem
-              v-for="(option, index) in options"
-              :key="index"
-              class="text-[13px] leading-none text-grass11 rounded-[3px] flex items-center h-[25px] pr-[35px] pl-[25px] relative select-none data-[disabled]:text-mauve8 data-[disabled]:pointer-events-none data-[highlighted]:outline-none data-[highlighted]:bg-green9 data-[highlighted]:text-green1"
-              :value="option"
-            >
-              <SelectItemIndicator class="absolute left-0 w-[25px] inline-flex items-center justify-center">
-                <Icon icon="radix-icons:check" />
-              </SelectItemIndicator>
-              <SelectItemText>
-                {{ option }}
-              </SelectItemText>
-            </SelectItem>
-          </SelectGroup>
-          <SelectSeparator class="h-[1px] bg-green6 m-[5px]" />
-          <SelectLabel class="px-[25px] text-xs leading-[25px] text-mauve11">
-            Vegetables
-          </SelectLabel>
-          <SelectGroup>
-            <SelectItem
-              v-for="(option, index) in vegetables"
-              :key="index"
-              class="text-[13px] leading-none text-grass11 rounded-[3px] flex items-center h-[25px] pr-[35px] pl-[25px] relative select-none data-[disabled]:text-mauve8 data-[disabled]:pointer-events-none data-[highlighted]:outline-none data-[highlighted]:bg-green9 data-[highlighted]:text-green1"
-              :value="option"
-              :disabled="option === 'Courgette'"
-            >
-              <SelectItemIndicator class="absolute left-0 w-[25px] inline-flex items-center justify-center">
-                <Icon icon="radix-icons:check" />
-              </SelectItemIndicator>
-              <SelectItemText>
-                {{ option }}
-              </SelectItemText>
-            </SelectItem>
-          </SelectGroup>
-        </SelectViewport>
-
-        <SelectScrollDownButton class="flex items-center justify-center h-[25px] bg-white text-violet11 cursor-default">
-          <Icon icon="radix-icons:chevron-down" />
-        </SelectScrollDownButton>
-      </SelectContent>
-    </SelectPortal>
-  </SelectRoot>
-</template>
-```
-
-### Update `tailwind.config.js`
-
-Add the following code into your `tailwind.config.js` file:
-
-```ts
-const { blackA, green, grass, mauve } = require('@radix-ui/colors')
-
-/** @type {import('tailwindcss').Config} */
-module.exports = {
-  content: ['./**/*.vue'],
-  theme: {
-    extend: {
-      colors: {
-        ...blackA,
-        ...green,
-        ...grass,
-        ...mauve,
-      },
-      keyframes: {
-        slideDownAndFade: {
-          from: { opacity: 0, transform: 'translateY(-2px)' },
-          to: { opacity: 1, transform: 'translateY(0)' },
-        },
-        slideLeftAndFade: {
-          from: { opacity: 0, transform: 'translateX(2px)' },
-          to: { opacity: 1, transform: 'translateX(0)' },
-        },
-        slideUpAndFade: {
-          from: { opacity: 0, transform: 'translateY(2px)' },
-          to: { opacity: 1, transform: 'translateY(0)' },
-        },
-        slideRightAndFade: {
-          from: { opacity: 0, transform: 'translateX(-2px)' },
-          to: { opacity: 1, transform: 'translateX(0)' },
-        },
-      },
-      animation: {
-        slideDownAndFade: 'slideDownAndFade 400ms cubic-bezier(0.16, 1, 0.3, 1)',
-        slideLeftAndFade: 'slideLeftAndFade 400ms cubic-bezier(0.16, 1, 0.3, 1)',
-        slideUpAndFade: 'slideUpAndFade 400ms cubic-bezier(0.16, 1, 0.3, 1)',
-        slideRightAndFade: 'slideRightAndFade 400ms cubic-bezier(0.16, 1, 0.3, 1)',
-      },
-    },
-  },
-  plugins: [],
-}
-```
-
-</Steps>
-
-</template>
-</TabPreview>
 
 ## Usage
 
diff --git a/apps/www/src/content/docs/components/separator.md b/apps/www/src/content/docs/components/separator.md
index b603a12e..3e0bc281 100644
--- a/apps/www/src/content/docs/components/separator.md
+++ b/apps/www/src/content/docs/components/separator.md
@@ -30,64 +30,9 @@ npm install radix-vue
 
 ### Copy and paste the following code into your project
 
-```vue
-<script setup lang="ts">
-import { Separator } from 'radix-vue'
-</script>
-
-<template>
-  <div class="w-full max-w-[300px] mx-[15px]">
-    <div class="text-white text-[15px] leading-5 font-semibold">
-      Radix Primitives
-    </div>
-    <div class="text-white text-[15px] leading-5">
-      An open-source UI component library.
-    </div>
-    <Separator
-      class="bg-[#d7cff9] data-[orientation=horizontal]:h-px data-[orientation=horizontal]:w-full data-[orientation=vertical]:h-full data-[orientation=vertical]:w-px my-[15px]"
-    />
-    <div class="flex h-5 items-center">
-      <div class="text-white text-[15px] leading-5">
-        Blog
-      </div>
-      <Separator
-        class="bg-[#d7cff9] data-[orientation=horizontal]:h-px data-[orientation=horizontal]:w-full data-[orientation=vertical]:h-full data-[orientation=vertical]:w-px mx-[15px]"
-        decorative
-        orientation="vertical"
-      />
-      <div class="text-white text-[15px] leading-5">
-        Docs
-      </div>
-      <Separator
-        class="bg-[#d7cff9] data-[orientation=horizontal]:h-px data-[orientation=horizontal]:w-full data-[orientation=vertical]:h-full data-[orientation=vertical]:w-px mx-[15px]"
-        decorative
-        orientation="vertical"
-      />
-      <div class="text-white text-[15px] leading-5">
-        Source
-      </div>
-    </div>
-  </div>
-</template>
-```
-
-### Update `tailwind.config.js`
-
-Add the following code into your `tailwind.config.js` file:
-
-```ts
-/** @type {import('tailwindcss').Config} */
-module.exports = {
-  content: ['./**/*.vue'],
-  theme: {
-    extend: {
-      colors: {},
-    },
-  },
-  plugins: [],
-}
-```
+<<< @/lib/registry/default/ui/separator/Separator.vue
 
+ 
 </Steps>
 
 </template>
diff --git a/apps/www/src/content/docs/components/sheet.md b/apps/www/src/content/docs/components/sheet.md
index b0520a12..caa3ee91 100644
--- a/apps/www/src/content/docs/components/sheet.md
+++ b/apps/www/src/content/docs/components/sheet.md
@@ -9,21 +9,10 @@ primitive: https://www.radix-vue.com/components/dialog.html
 
 
 ## Installation
-
-<TabPreview name="CLI">
-<template #CLI>
-
+ 
 ```bash
 npx shadcn-vue@latest add sheet
 ```
-</template>
-
-<template #Manual>
-
-#### Coming soon...
-
-</template>
-</TabPreview>
 
 ## Usage
 
diff --git a/apps/www/src/content/docs/components/skeleton.md b/apps/www/src/content/docs/components/skeleton.md
index 69351c82..af07e1b8 100644
--- a/apps/www/src/content/docs/components/skeleton.md
+++ b/apps/www/src/content/docs/components/skeleton.md
@@ -5,7 +5,6 @@ description: Use to show a placeholder while content is loading.
 
 <ComponentPreview name="SkeletonDemo" /> 
 
-
 ## Installation
 
 <TabPreview name="CLI">
@@ -22,21 +21,8 @@ npx shadcn-vue@latest add skeleton
 
 ### Copy and paste the following code into your project
 
-```vue
-<script setup lang="ts">
-import { cn } from '@/lib/utils'
 
-interface SkeletonProps {
-  class?: string
-}
-
-const props = defineProps<SkeletonProps>()
-</script>
-
-<template>
-  <div :class="cn('animate-pulse rounded-md bg-secondary', props.class)" />
-</template>
-```
+<<< @/lib/registry/default/ui/skeleton/Skeleton.vue
 
 </Steps>
 
diff --git a/apps/www/src/content/docs/components/slider.md b/apps/www/src/content/docs/components/slider.md
index 8ceb3a71..b0ee54f0 100644
--- a/apps/www/src/content/docs/components/slider.md
+++ b/apps/www/src/content/docs/components/slider.md
@@ -7,79 +7,11 @@ primitive: https://www.radix-vue.com/components/slider.html
 
 <ComponentPreview name="SliderDemo" /> 
 
-
-
 ## Installation
 
-<TabPreview name="CLI">
-<template #CLI>
-
 ```bash
 npx shadcn-vue@latest add slider
 ```
-</template>
-
-<template #Manual>
-
-<Steps>
-
-### Install the following dependency:
-
-```bash
-npm install radix-vue
-```
-
-### Copy and paste the following code into your project
-
-```vue
-<script setup lang="ts">
-import { ref } from 'vue'
-import { SliderRange, SliderRoot, SliderThumb, SliderTrack } from 'radix-vue'
-
-const sliderValue = ref([50])
-</script>
-
-<template>
-  <SliderRoot
-    v-model="sliderValue" class="relative flex items-center select-none touch-none w-[200px] h-5" :max="100"
-    :step="1"
-  >
-    <SliderTrack class="bg-blackA10 relative grow rounded-full h-[3px]">
-      <SliderRange class="absolute bg-white rounded-full h-full" />
-    </SliderTrack>
-    <SliderThumb
-      class="block w-5 h-5 bg-white shadow-[0_2px_10px] shadow-blackA7 rounded-[10px] hover:bg-violet3 focus:outline-none focus:shadow-[0_0_0_5px] focus:shadow-blackA8"
-      aria-label="Volume"
-    />
-  </SliderRoot>
-</template>
-```
-
-### Update `tailwind.config.js`
-
-Add the following code into your `tailwind.config.js` file:
-
-```ts
-const { blackA } = require('@radix-ui/colors')
-
-/** @type {import('tailwindcss').Config} */
-module.exports = {
-  content: ['./**/*.vue'],
-  theme: {
-    extend: {
-      colors: {
-        ...blackA,
-      },
-    },
-  },
-  plugins: [],
-}
-```
-
-</Steps>
-
-</template>
-</TabPreview>
 
 ## Usage
 
diff --git a/apps/www/src/content/docs/components/switch.md b/apps/www/src/content/docs/components/switch.md
index 102ae202..ccb8c1ad 100644
--- a/apps/www/src/content/docs/components/switch.md
+++ b/apps/www/src/content/docs/components/switch.md
@@ -29,47 +29,8 @@ npm install radix-vue
 ```
 
 ### Copy and paste the following code into your project
-
-```vue
-<script setup lang="ts">
-import { SwitchRoot, SwitchThumb } from 'radix-vue'
-import { ref } from 'vue'
-
-const switchState = ref(false)
-</script>
-
-<template>
-  <div class="flex gap-2 items-center">
-    <label className="text-white text-[15px] leading-none pr-[15px] select-none" for="airplane-mode">
-      Airplane mode
-    </label>
-    <SwitchRoot
-      id="airplane-mode"
-      v-model:checked="switchState"
-      class="w-[42px] h-[25px] focus-within:outline focus-within:outline-black flex bg-black/50 shadow-sm rounded-full relative data-[state=checked]:bg-black cursor-default"
-    >
-      <SwitchThumb
-        class="block w-[21px] h-[21px] my-auto bg-white shadow-sm rounded-full transition-transform duration-100 translate-x-0.5 will-change-transform data-[state=checked]:translate-x-[19px]"
-      />
-    </SwitchRoot>
-  </div>
-</template>
-```
-
-### Update `tailwind.config.js`
-
-Add the following code into your `tailwind.config.js` file:
-
-```ts
-/** @type {import('tailwindcss').Config} */
-module.exports = {
-  content: ['./**/*.vue'],
-  theme: {
-    extend: {},
-  },
-  plugins: [],
-}
-```
+ 
+ <<< @/lib/registry/default/ui/switch/Switch.vue
 
 </Steps>
 
diff --git a/apps/www/src/content/docs/components/table.md b/apps/www/src/content/docs/components/table.md
index 39e7fbb9..e56d20c6 100644
--- a/apps/www/src/content/docs/components/table.md
+++ b/apps/www/src/content/docs/components/table.md
@@ -8,20 +8,9 @@ description: A responsive table component.
 
 ## Installation
 
-<TabPreview name="CLI">
-<template #CLI>
-
 ```bash
 npx shadcn-vue@latest add table
 ```
-</template>
-
-<template #Manual>
-
-#### Coming soon...
-
-</template>
-</TabPreview>
 
 ## Usage
 
diff --git a/apps/www/src/content/docs/components/tabs.md b/apps/www/src/content/docs/components/tabs.md
index 92e68515..317836e7 100644
--- a/apps/www/src/content/docs/components/tabs.md
+++ b/apps/www/src/content/docs/components/tabs.md
@@ -10,154 +10,11 @@ primitive: https://www.radix-vue.com/components/tabs.html
 
 ## Installation
 
-<TabPreview name="CLI">
-<template #CLI>
+
 
 ```bash
 npx shadcn-vue@latest add tabs
 ```
-</template>
-
-<template #Manual>
-
-<Steps>
-
-### Install the following dependency:
-
-```bash
-npm install radix-vue
-```
-
-### Copy and paste the following code into your project
-
-```vue
-<script setup lang="ts">
-import { TabsContent, TabsList, TabsRoot, TabsTrigger } from 'radix-vue'
-</script>
-
-<template>
-  <TabsRoot class="flex flex-col w-full sm:w-[300px] shadow-[0_2px_10px] shadow-blackA4" default-value="tab1">
-    <TabsList class="shrink-0 flex border-b border-mauve6" aria-label="Manage your account">
-      <TabsTrigger
-        class="bg-white px-5 h-[45px] flex-1 flex items-center justify-center text-[15px] leading-none text-mauve11 select-none first:rounded-tl-md last:rounded-tr-md hover:text-grass11 data-[state=active]:text-grass11 data-[state=active]:shadow-[inset_0_-1px_0_0,0_1px_0_0] data-[state=active]:shadow-current data-[state=active]:focus:relative data-[state=active]:focus:shadow-[0_0_0_2px] data-[state=active]:focus:shadow-black outline-none cursor-default"
-        value="tab1"
-      >
-        Account
-      </TabsTrigger>
-      <TabsTrigger
-        class="bg-white px-5 h-[45px] flex-1 flex items-center justify-center text-[15px] leading-none text-mauve11 select-none first:rounded-tl-md last:rounded-tr-md hover:text-grass11 data-[state=active]:text-grass11 data-[state=active]:shadow-[inset_0_-1px_0_0,0_1px_0_0] data-[state=active]:shadow-current data-[state=active]:focus:relative data-[state=active]:focus:shadow-[0_0_0_2px] data-[state=active]:focus:shadow-black outline-none cursor-default"
-        value="tab2"
-      >
-        Password
-      </TabsTrigger>
-    </TabsList>
-    <TabsContent
-      class="grow p-5 bg-white rounded-b-md outline-none focus:shadow-[0_0_0_2px] focus:shadow-black"
-      value="tab1"
-    >
-      <p class="mb-5 !mt-0 text-mauve11 text-[15px] !leading-normal">
-        Make changes to your account here. Click save when you're done.
-      </p>
-      <fieldset class="mb-[15px] w-full flex flex-col justify-start">
-        <label class="text-[13px] leading-none mb-2.5 text-green12 block" for="name"> Name </label>
-        <input
-          id="name"
-          class="grow shrink-0 rounded px-2.5 text-[15px] leading-none text-grass11 shadow-[0_0_0_1px] shadow-green7 h-[35px] focus:shadow-[0_0_0_2px] focus:shadow-green8 outline-none"
-          value="Pedro Duarte"
-        >
-      </fieldset>
-      <fieldset class="mb-[15px] w-full flex flex-col justify-start">
-        <label class="text-[13px] leading-none mb-2.5 text-green12 block" for="username"> Username </label>
-        <input
-          id="username"
-          class="grow shrink-0 rounded px-2.5 text-[15px] leading-none text-grass11 shadow-[0_0_0_1px] shadow-green7 h-[35px] focus:shadow-[0_0_0_2px] focus:shadow-green8 outline-none"
-          value="@peduarte"
-        >
-      </fieldset>
-      <div class="flex justify-end mt-5">
-        <button
-          class="inline-flex items-center justify-center rounded px-[15px] text-[15px] leading-none font-medium h-[35px] bg-green4 text-green11 hover:bg-green5 focus:shadow-[0_0_0_2px] focus:shadow-green7 outline-none cursor-default"
-        >
-          Save changes
-        </button>
-      </div>
-    </TabsContent>
-    <TabsContent
-      class="grow p-5 bg-white rounded-b-md outline-none focus:shadow-[0_0_0_2px] focus:shadow-black"
-      value="tab2"
-    >
-      <p class="mb-5 !mt-0 text-mauve11 text-[15px] !leading-normal">
-        Change your password here. After saving, you'll be logged out.
-      </p>
-      <fieldset class="mb-[15px] w-full flex flex-col justify-start">
-        <label class="text-[13px] leading-none mb-2.5 text-green12 block" for="currentPassword">
-          Current password
-        </label>
-        <input
-          id="currentPassword"
-          class="grow shrink-0 rounded px-2.5 text-[15px] leading-none text-grass11 shadow-[0_0_0_1px] shadow-green7 h-[35px] focus:shadow-[0_0_0_2px] focus:shadow-green8 outline-none"
-          type="password"
-        >
-      </fieldset>
-      <fieldset class="mb-[15px] w-full flex flex-col justify-start">
-        <label class="text-[13px] leading-none mb-2.5 text-green12 block" for="newPassword"> New password </label>
-        <input
-          id="newPassword"
-          class="grow shrink-0 rounded px-2.5 text-[15px] leading-none text-grass11 shadow-[0_0_0_1px] shadow-green7 h-[35px] focus:shadow-[0_0_0_2px] focus:shadow-green8 outline-none"
-          type="password"
-        >
-      </fieldset>
-      <fieldset class="mb-[15px] w-full flex flex-col justify-start">
-        <label class="text-[13px] leading-none mb-2.5 text-green12 block" for="confirmPassword">
-          Confirm password
-        </label>
-        <input
-          id="confirmPassword"
-          class="grow shrink-0 rounded px-2.5 text-[15px] leading-none text-grass11 shadow-[0_0_0_1px] shadow-green7 h-[35px] focus:shadow-[0_0_0_2px] focus:shadow-green8 outline-none"
-          type="password"
-        >
-      </fieldset>
-      <div class="flex justify-end mt-5">
-        <button
-          class="inline-flex items-center justify-center rounded px-[15px] text-[15px] leading-none font-medium h-[35px] bg-green4 text-green11 hover:bg-green5 focus:shadow-[0_0_0_2px] focus:shadow-green7 outline-none cursor-default"
-        >
-          Change password
-        </button>
-      </div>
-    </TabsContent>
-  </TabsRoot>
-</template>
-```
-
-
-### Update `tailwind.config.js`
-
-Add the following code into your `tailwind.config.js` file:
-
-```ts
-const { blackA, green, grass, mauve } = require('@radix-ui/colors')
-
-/** @type {import('tailwindcss').Config} */
-module.exports = {
-  content: ['./**/*.vue'],
-  theme: {
-    extend: {
-      colors: {
-        ...blackA,
-        ...green,
-        ...grass,
-        ...mauve,
-      },
-    },
-  },
-  plugins: [],
-}
-```
-
-</Steps>
-
-</template>
-</TabPreview>
 
 ## Usage
 
diff --git a/apps/www/src/content/docs/components/textarea.md b/apps/www/src/content/docs/components/textarea.md
index 625c0ae4..39229b03 100644
--- a/apps/www/src/content/docs/components/textarea.md
+++ b/apps/www/src/content/docs/components/textarea.md
@@ -28,15 +28,7 @@ npm install radix-vue
 
 ### Copy and paste the following code into your project
 
-```vue
-<script setup lang="ts">
-import { cn } from '@/lib/utils'
-</script>
-
-<template>
-  <textarea :class="cn('flex min-h-[80px] w-full rounded-md border border-input bg-background px-3 py-2 text-sm ring-offset-background placeholder:text-muted-foreground focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:cursor-not-allowed disabled:opacity-50', $attrs.class ?? '')" />
-</template>
-```
+<<< @/lib/registry/default/ui/textarea/Textarea.vue
 
 </Steps>
 
diff --git a/apps/www/src/content/docs/components/toggle.md b/apps/www/src/content/docs/components/toggle.md
index 0dce43e9..45f70104 100644
--- a/apps/www/src/content/docs/components/toggle.md
+++ b/apps/www/src/content/docs/components/toggle.md
@@ -27,54 +27,11 @@ npx shadcn-vue@latest add toggle
 
 ```bash
 npm install radix-vue
-
-npm install --save-dev @iconify/vue
 ```
 
 ### Copy and paste the following code into your project
 
-```vue
-<script setup lang="ts">
-import { Toggle } from 'radix-vue'
-import { Icon } from '@iconify/vue'
-import { ref } from 'vue'
-
-const toggleState = ref(false)
-</script>
-
-<template>
-  <Toggle
-    v-model:pressed="toggleState" aria-label="Toggle italic"
-    class="hover:bg-green3 text-mauve11 data-[state=on]:bg-green6 data-[state=on]:text-violet12 shadow-blackA7 flex h-[35px] w-[35px] items-center justify-center rounded bg-white text-base leading-4 shadow-[0_2px_10px] focus-within:shadow-[0_0_0_2px] focus-within:shadow-black"
-  >
-    <Icon icon="radix-icons:font-italic" class="w-[15px] h-[15px]" />
-  </Toggle>
-</template>
-```
-
-### Update `tailwind.config.js`
-
-Add the following code into your `tailwind.config.js` file:
-
-```ts
-const { blackA, green, grass, mauve } = require('@radix-ui/colors')
-
-/** @type {import('tailwindcss').Config} */
-module.exports = {
-  content: ['./**/*.vue'],
-  theme: {
-    extend: {
-      colors: {
-        ...blackA,
-        ...green,
-        ...grass,
-        ...mauve,
-      },
-    },
-  },
-  plugins: [],
-}
-```
+<<< @/lib/registry/default/ui/toggle/Toggle.vue
 
 </Steps>
 
diff --git a/apps/www/src/content/docs/components/tooltip.md b/apps/www/src/content/docs/components/tooltip.md
index 8a667288..14108ed3 100644
--- a/apps/www/src/content/docs/components/tooltip.md
+++ b/apps/www/src/content/docs/components/tooltip.md
@@ -10,111 +10,9 @@ primitive: https://www.radix-vue.com/components/tooltip.html
 
 ## Installation
 
-<TabPreview name="CLI">
-<template #CLI>
-
 ```bash
 npx shadcn-vue@latest add tooltip
 ```
-</template>
-
-<template #Manual>
-
-<Steps>
-
-### Install the following dependencies:
-
-```bash
-npm install radix-vue
-
-npm install --save-dev @iconify/vue
-```
-
-### Copy and paste the following code into your project
-
-```vue
-<script setup lang="ts">
-import { TooltipArrow, TooltipContent, TooltipPortal, TooltipProvider, TooltipRoot, TooltipTrigger } from 'radix-vue'
-import { Icon } from '@iconify/vue'
-</script>
-
-<template>
-  <TooltipProvider>
-    <TooltipRoot>
-      <TooltipTrigger
-        class="text-grass11 shadow-blackA7 hover:bg-green3 inline-flex h-[35px] w-[35px] items-center justify-center rounded-full bg-white shadow-[0_2px_10px] outline-none focus:shadow-[0_0_0_2px] focus:shadow-black"
-      >
-        <Icon icon="radix-icons:plus" />
-      </TooltipTrigger>
-      <TooltipPortal>
-        <TooltipContent
-          as-child
-          class="data-[state=delayed-open]:data-[side=top]:animate-slideDownAndFade data-[state=delayed-open]:data-[side=right]:animate-slideLeftAndFade data-[state=delayed-open]:data-[side=left]:animate-slideRightAndFade data-[state=delayed-open]:data-[side=bottom]:animate-slideUpAndFade text-grass11 select-none rounded-[4px] bg-white px-[15px] py-[10px] text-[15px] leading-none shadow-[hsl(206_22%_7%_/_35%)_0px_10px_38px_-10px,_hsl(206_22%_7%_/_20%)_0px_10px_20px_-15px] will-change-[transform,opacity]"
-          :side-offset="5"
-        >
-          <ul>
-            Add to library
-            <TooltipArrow class="fill-white" size="8" />
-          </ul>
-        </TooltipContent>
-      </TooltipPortal>
-    </TooltipRoot>
-  </TooltipProvider>
-</template>
-```
-
-
-### Update `tailwind.config.js`
-
-Add the following code into your `tailwind.config.js` file:
-
-```ts
-const { blackA, green, grass } = require('@radix-ui/colors')
-
-/** @type {import('tailwindcss').Config} */
-module.exports = {
-  content: ['./**/*.vue'],
-  theme: {
-    extend: {
-      colors: {
-        ...blackA,
-        ...green,
-        ...grass,
-      },
-      keyframes: {
-        slideDownAndFade: {
-          from: { opacity: 0, transform: 'translateY(-2px)' },
-          to: { opacity: 1, transform: 'translateY(0)' },
-        },
-        slideLeftAndFade: {
-          from: { opacity: 0, transform: 'translateX(2px)' },
-          to: { opacity: 1, transform: 'translateX(0)' },
-        },
-        slideUpAndFade: {
-          from: { opacity: 0, transform: 'translateY(2px)' },
-          to: { opacity: 1, transform: 'translateY(0)' },
-        },
-        slideRightAndFade: {
-          from: { opacity: 0, transform: 'translateX(-2px)' },
-          to: { opacity: 1, transform: 'translateX(0)' },
-        },
-      },
-      animation: {
-        slideDownAndFade: 'slideDownAndFade 400ms cubic-bezier(0.16, 1, 0.3, 1)',
-        slideLeftAndFade: 'slideLeftAndFade 400ms cubic-bezier(0.16, 1, 0.3, 1)',
-        slideUpAndFade: 'slideUpAndFade 400ms cubic-bezier(0.16, 1, 0.3, 1)',
-        slideRightAndFade: 'slideRightAndFade 400ms cubic-bezier(0.16, 1, 0.3, 1)',
-      },
-    },
-  },
-  plugins: [],
-}
-```
-
-</Steps>
-
-</template>
-</TabPreview>
 
 ## Usage
 
diff --git a/apps/www/src/lib/registry/default/example/CardWithForm.vue b/apps/www/src/lib/registry/default/example/CardWithForm.vue
index 18f74036..8f74fdaa 100644
--- a/apps/www/src/lib/registry/default/example/CardWithForm.vue
+++ b/apps/www/src/lib/registry/default/example/CardWithForm.vue
@@ -1,5 +1,5 @@
 <script setup lang="ts">
-import { Button } from '@/components/ui/button'
+import { Button } from '@/lib/registry/default/ui/button'
 import {
   Card,
   CardContent,
@@ -7,16 +7,16 @@ import {
   CardFooter,
   CardHeader,
   CardTitle,
-} from '@/components/ui/card'
-import { Input } from '@/components/ui/input'
-import { Label } from '@/components/ui/label'
+} from '@/lib/registry/default/ui/card'
+import { Input } from '@/lib/registry/default/ui/input'
+import { Label } from '@/lib/registry/default/ui/label'
 import {
   Select,
   SelectContent,
   SelectItem,
   SelectTrigger,
   SelectValue,
-} from '@/components/ui/select'
+} from '@/lib/registry/default/ui/select'
 </script>
 
 <template>
diff --git a/apps/www/src/lib/registry/default/ui/command/CommandGroup.vue b/apps/www/src/lib/registry/default/ui/command/CommandGroup.vue
index f74f3837..1d994b9a 100644
--- a/apps/www/src/lib/registry/default/ui/command/CommandGroup.vue
+++ b/apps/www/src/lib/registry/default/ui/command/CommandGroup.vue
@@ -11,7 +11,7 @@ const props = defineProps<ComboboxGroupProps & {
 <template>
   <ComboboxGroup
     v-bind="props"
-    :class="cn('p-1 text-foreground', $attrs.class ?? '')"
+    :class="cn('overflow-hidden p-1 text-foreground', $attrs.class ?? '')"
   >
     <ComboboxLabel v-if="heading" class="px-2 py-1.5 text-xs font-medium text-muted-foreground">
       {{ heading }}
diff --git a/apps/www/src/lib/registry/default/ui/command/CommandList.vue b/apps/www/src/lib/registry/default/ui/command/CommandList.vue
index 5d5bc750..504a0ad3 100644
--- a/apps/www/src/lib/registry/default/ui/command/CommandList.vue
+++ b/apps/www/src/lib/registry/default/ui/command/CommandList.vue
@@ -1,6 +1,6 @@
 <script setup lang="ts">
 import type { ComboboxContentEmits, ComboboxContentProps } from 'radix-vue'
-import { ComboboxContent } from 'radix-vue'
+import { ComboboxContent, ComboboxViewport } from 'radix-vue'
 import { cn, useEmitAsProps } from '@/lib/utils'
 
 const props = defineProps<ComboboxContentProps>()
@@ -11,6 +11,8 @@ const emitsAsProps = useEmitAsProps(emits)
 
 <template>
   <ComboboxContent v-bind="{ ...props, ...emitsAsProps }" :class="cn('max-h-[300px] overflow-y-auto overflow-x-hidden', $attrs.class ?? '')">
-    <slot />
+    <div role="presentation">
+      <slot />
+    </div>
   </ComboboxContent>
 </template>
diff --git a/apps/www/src/lib/registry/default/ui/dialog/DialogContent.vue b/apps/www/src/lib/registry/default/ui/dialog/DialogContent.vue
index 36a01130..f76cd3ae 100644
--- a/apps/www/src/lib/registry/default/ui/dialog/DialogContent.vue
+++ b/apps/www/src/lib/registry/default/ui/dialog/DialogContent.vue
@@ -35,7 +35,7 @@ const emitsAsProps = useEmitAsProps(emits)
       <DialogClose
         class="absolute top-3 right-3 p-0.5 transition-colors rounded-md hover:bg-secondary"
       >
-        <X class="w-4 h-4 text-muted-foreground" />
+        <X class="w-4 h-4" />
         <span class="sr-only">Close</span>
       </DialogClose>
     </DialogContent>
diff --git a/apps/www/src/lib/registry/default/ui/input/Input.vue b/apps/www/src/lib/registry/default/ui/input/Input.vue
index b1aff848..66ece7a6 100644
--- a/apps/www/src/lib/registry/default/ui/input/Input.vue
+++ b/apps/www/src/lib/registry/default/ui/input/Input.vue
@@ -18,5 +18,5 @@ const modelValue = useVModel(props, 'modelValue', emits, {
 </script>
 
 <template>
-  <input v-model="modelValue" type="text" :class="cn(cn('flex h-10 w-full rounded-md border border-input bg-background px-3 py-2 text-sm ring-offset-background file:border-0 file:bg-transparent file:text-sm file:font-medium placeholder:text-muted-foreground focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:cursor-not-allowed disabled:opacity-50', $attrs.class ?? ''))">
+  <input v-model="modelValue" type="text" :class="cn('flex h-10 w-full rounded-md border border-input bg-background px-3 py-2 text-sm ring-offset-background file:border-0 file:bg-transparent file:text-sm file:font-medium placeholder:text-muted-foreground focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:cursor-not-allowed disabled:opacity-50', $attrs.class ?? '')">
 </template>
diff --git a/apps/www/src/lib/registry/new-york/example/AccordionDemo.vue b/apps/www/src/lib/registry/new-york/example/AccordionDemo.vue
index 7a99ad50..1dc12ffe 100644
--- a/apps/www/src/lib/registry/new-york/example/AccordionDemo.vue
+++ b/apps/www/src/lib/registry/new-york/example/AccordionDemo.vue
@@ -1,5 +1,5 @@
 <script setup lang="ts">
-import { Accordion, AccordionContent, AccordionItem, AccordionTrigger } from '@/lib/registry/default/ui/accordion'
+import { Accordion, AccordionContent, AccordionItem, AccordionTrigger } from '@/lib/registry/new-york/ui/accordion'
 
 const defaultValue = 'item-1'
 
diff --git a/apps/www/src/lib/registry/new-york/example/DatePickerDemo.vue b/apps/www/src/lib/registry/new-york/example/DatePickerDemo.vue
index 442c2bf5..a39c9af3 100644
--- a/apps/www/src/lib/registry/new-york/example/DatePickerDemo.vue
+++ b/apps/www/src/lib/registry/new-york/example/DatePickerDemo.vue
@@ -4,13 +4,13 @@ import { ref } from 'vue'
 import RadixIconsCalendar from '~icons/radix-icons/calendar'
 
 import { cn } from '@/lib/utils'
-import { Button } from '@/components/ui/button'
-import { Calendar } from '@/components/ui/calendar'
+import { Button } from '@/lib/registry/new-york/ui/button'
+import { Calendar } from '@/lib/registry/new-york/ui/calendar'
 import {
   Popover,
   PopoverContent,
   PopoverTrigger,
-} from '@/components/ui/popover'
+} from '@/lib/registry/new-york/ui/popover'
 
 const date = ref<Date>()
 </script>
diff --git a/apps/www/src/lib/registry/new-york/ui/input/Input.vue b/apps/www/src/lib/registry/new-york/ui/input/Input.vue
index 7a7fbd07..ceb9c095 100644
--- a/apps/www/src/lib/registry/new-york/ui/input/Input.vue
+++ b/apps/www/src/lib/registry/new-york/ui/input/Input.vue
@@ -18,5 +18,5 @@ const modelValue = useVModel(props, 'modelValue', emits, {
 </script>
 
 <template>
-  <input v-model="modelValue" type="text" :class="cn(cn('flex h-9 w-full rounded-md border border-input bg-transparent px-3 py-1 text-sm shadow-sm transition-colors file:border-0 file:bg-transparent file:text-sm file:font-medium placeholder:text-muted-foreground focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-ring disabled:cursor-not-allowed disabled:opacity-50', $attrs.class ?? ''))">
+  <input v-model="modelValue" type="text" :class="cn('flex h-9 w-full rounded-md border border-input bg-transparent px-3 py-1 text-sm shadow-sm transition-colors file:border-0 file:bg-transparent file:text-sm file:font-medium placeholder:text-muted-foreground focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-ring disabled:cursor-not-allowed disabled:opacity-50', $attrs.class ?? '')">
 </template>