From f5ac23b79b6a5fca6cc0c34bf6ec2d422c6ccbb9 Mon Sep 17 00:00:00 2001
From: selemondev <selemondev19@gmail.com>
Date: Tue, 19 Sep 2023 18:51:11 +0300
Subject: [PATCH] docs: improve the installation section for each component

---
 .../theme/components/TabPreview.vue           |  39 ++
 apps/www/.vitepress/theme/components/index.ts |   1 +
 apps/www/__registry__/index.ts                |  56 +--
 .../src/content/docs/components/accordion.md  | 165 +++++++-
 .../content/docs/components/alert-dialog.md   | 133 +++++-
 apps/www/src/content/docs/components/alert.md |  19 +-
 .../content/docs/components/aspect-ratio.md   |  57 ++-
 .../www/src/content/docs/components/avatar.md |  82 +++-
 apps/www/src/content/docs/components/badge.md |  38 +-
 .../www/src/content/docs/components/button.md |  41 +-
 .../src/content/docs/components/calendar.md   | 137 +++++-
 apps/www/src/content/docs/components/card.md  |  18 +-
 .../src/content/docs/components/checkbox.md   |  76 +++-
 .../content/docs/components/collapsible.md    |  83 +++-
 .../src/content/docs/components/combobox.md   | 123 +++++-
 .../src/content/docs/components/command.md    |  17 +-
 .../content/docs/components/context-menu.md   | 353 +++++++++++++++-
 .../www/src/content/docs/components/dialog.md | 139 +++++-
 .../content/docs/components/dropdown-menu.md  | 400 +++++++++++++++++-
 .../src/content/docs/components/hover-card.md | 139 +++++-
 apps/www/src/content/docs/components/input.md |  44 +-
 apps/www/src/content/docs/components/label.md |  41 +-
 .../src/content/docs/components/menubar.md    | 376 +++++++++++++++-
 .../docs/components/navigation-menu.md        | 356 +++++++++++++++-
 .../src/content/docs/components/popover.md    | 141 +++++-
 .../src/content/docs/components/progress.md   |  66 ++-
 .../content/docs/components/radio-group.md    |  98 ++++-
 .../content/docs/components/scroll-area.md    | 103 ++++-
 .../www/src/content/docs/components/select.md | 169 +++++++-
 .../src/content/docs/components/separator.md  |  77 +++-
 apps/www/src/content/docs/components/sheet.md |  16 +-
 .../src/content/docs/components/skeleton.md   |  32 +-
 .../www/src/content/docs/components/slider.md |  63 ++-
 .../www/src/content/docs/components/switch.md |  59 ++-
 apps/www/src/content/docs/components/table.md |  16 +-
 apps/www/src/content/docs/components/tabs.md  | 142 ++++++-
 .../src/content/docs/components/textarea.md   |  28 +-
 .../www/src/content/docs/components/toggle.md |  63 ++-
 .../src/content/docs/components/tooltip.md    |  99 ++++-
 apps/www/src/content/docs/typography.md       |  84 +---
 .../registry/default/example/CardWithForm.vue |  10 +-
 .../default/example/CheckboxDisabled.vue      |  20 +
 .../new-york/example/AccordionDemo.vue        |   2 +-
 43 files changed, 3914 insertions(+), 307 deletions(-)
 create mode 100644 apps/www/.vitepress/theme/components/TabPreview.vue
 create mode 100644 apps/www/src/lib/registry/default/example/CheckboxDisabled.vue

diff --git a/apps/www/.vitepress/theme/components/TabPreview.vue b/apps/www/.vitepress/theme/components/TabPreview.vue
new file mode 100644
index 00000000..025e1c34
--- /dev/null
+++ b/apps/www/.vitepress/theme/components/TabPreview.vue
@@ -0,0 +1,39 @@
+<script setup lang="ts">
+import { Tabs, TabsContent, TabsList, TabsTrigger } from '@/lib/registry/default/ui/tabs'
+
+const props = withDefaults(defineProps<{
+  name: string
+  align?: 'center' | 'start' | 'end'
+  sfcTsCode?: string
+  sfcTsHtml?: string
+}>(), { align: 'center' })
+</script>
+
+<template>
+  <div>
+    <Tabs :default-value="props.name" class="relative mr-auto w-full">
+      <div class="flex items-center justify-between pb-3">
+        <TabsList class="w-full justify-start rounded-none border-b bg-transparent p-0">
+          <TabsTrigger
+            value="CLI"
+            class="relative h-9 rounded-none border-b-2 border-b-transparent bg-transparent px-4 pb-3 pt-2 font-semibold text-muted-foreground shadow-none transition-none data-[state=active]:border-b-primary data-[state=active]:text-foreground data-[state=active]:shadow-none"
+          >
+            CLI
+          </TabsTrigger>
+          <TabsTrigger
+            value="Manual"
+            class="relative h-9 rounded-none border-b-2 border-b-transparent bg-transparent px-4 pb-3 pt-2 font-semibold text-muted-foreground shadow-none transition-none data-[state=active]:border-b-primary data-[state=active]:text-foreground data-[state=active]:shadow-none"
+          >
+            Manual
+          </TabsTrigger>
+        </TabsList>
+      </div>
+      <TabsContent value="CLI" class="relative space-y-10">
+        <slot name="CLI" />
+      </TabsContent>
+      <TabsContent value="Manual">
+        <slot name="Manual" />
+      </TabsContent>
+    </Tabs>
+  </div>
+</template>
diff --git a/apps/www/.vitepress/theme/components/index.ts b/apps/www/.vitepress/theme/components/index.ts
index 49421ad1..bf7a4b3a 100644
--- a/apps/www/.vitepress/theme/components/index.ts
+++ b/apps/www/.vitepress/theme/components/index.ts
@@ -1,4 +1,5 @@
 export { default as ComponentPreview } from './ComponentPreview.vue'
+export { default as TabPreview } from './TabPreview.vue'
 export { default as Callout } from './Callout.vue'
 export { default as LinkedCard } from './LinkedCard.vue'
 export { default as ManualInstall } from './ManualInstall.vue'
diff --git a/apps/www/__registry__/index.ts b/apps/www/__registry__/index.ts
index e0a88842..a4666075 100644
--- a/apps/www/__registry__/index.ts
+++ b/apps/www/__registry__/index.ts
@@ -694,99 +694,99 @@ export const Index = {
       name: 'TypographyBlockquote',
       type: 'components:example',
       registryDependencies: [],
-      component: () => import('../src/lib/registry/new-york/example/TypographyBlockquote.vue').then(m => m.default),
-      files: ['../src/lib/registry/new-york/example/TypographyBlockquote.vue'],
+      component: () => import('../src/lib/registry/default/example/TypographyBlockquote.vue').then(m => m.default),
+      files: ['../src/lib/registry/default/example/TypographyBlockquote.vue'],
     },
     TypographyDemo: {
       name: 'TypographyDemo',
       type: 'components:example',
       registryDependencies: [],
-      component: () => import('../src/lib/registry/new-york/example/TypographyDemo.vue').then(m => m.default),
-      files: ['../src/lib/registry/new-york/example/TypographyDemo.vue'],
+      component: () => import('../src/lib/registry/default/example/TypographyDemo.vue').then(m => m.default),
+      files: ['../src/lib/registry/default/example/TypographyDemo.vue'],
     },
     TypographyH1: {
       name: 'TypographyH1',
       type: 'components:example',
       registryDependencies: [],
-      component: () => import('../src/lib/registry/new-york/example/TypographyH1.vue').then(m => m.default),
-      files: ['../src/lib/registry/new-york/example/TypographyH1.vue'],
+      component: () => import('../src/lib/registry/default/example/TypographyH1.vue').then(m => m.default),
+      files: ['../src/lib/registry/default/example/TypographyH1.vue'],
     },
     TypographyH2: {
       name: 'TypographyH2',
       type: 'components:example',
       registryDependencies: [],
-      component: () => import('../src/lib/registry/new-york/example/TypographyH2.vue').then(m => m.default),
-      files: ['../src/lib/registry/new-york/example/TypographyH2.vue'],
+      component: () => import('../src/lib/registry/default/example/TypographyH2.vue').then(m => m.default),
+      files: ['../src/lib/registry/default/example/TypographyH2.vue'],
     },
     TypographyH3: {
       name: 'TypographyH3',
       type: 'components:example',
       registryDependencies: [],
-      component: () => import('../src/lib/registry/new-york/example/TypographyH3.vue').then(m => m.default),
-      files: ['../src/lib/registry/new-york/example/TypographyH3.vue'],
+      component: () => import('../src/lib/registry/default/example/TypographyH3.vue').then(m => m.default),
+      files: ['../src/lib/registry/default/example/TypographyH3.vue'],
     },
     TypographyH4: {
       name: 'TypographyH4',
       type: 'components:example',
       registryDependencies: [],
-      component: () => import('../src/lib/registry/new-york/example/TypographyH4.vue').then(m => m.default),
-      files: ['../src/lib/registry/new-york/example/TypographyH4.vue'],
+      component: () => import('../src/lib/registry/default/example/TypographyH4.vue').then(m => m.default),
+      files: ['../src/lib/registry/default/example/TypographyH4.vue'],
     },
     TypographyInlineCode: {
       name: 'TypographyInlineCode',
       type: 'components:example',
       registryDependencies: [],
-      component: () => import('../src/lib/registry/new-york/example/TypographyInlineCode.vue').then(m => m.default),
-      files: ['../src/lib/registry/new-york/example/TypographyInlineCode.vue'],
+      component: () => import('../src/lib/registry/default/example/TypographyInlineCode.vue').then(m => m.default),
+      files: ['../src/lib/registry/default/example/TypographyInlineCode.vue'],
     },
     TypographyLarge: {
       name: 'TypographyLarge',
       type: 'components:example',
       registryDependencies: [],
-      component: () => import('../src/lib/registry/new-york/example/TypographyLarge.vue').then(m => m.default),
-      files: ['../src/lib/registry/new-york/example/TypographyLarge.vue'],
+      component: () => import('../src/lib/registry/default/example/TypographyLarge.vue').then(m => m.default),
+      files: ['../src/lib/registry/default/example/TypographyLarge.vue'],
     },
     TypographyLead: {
       name: 'TypographyLead',
       type: 'components:example',
       registryDependencies: [],
-      component: () => import('../src/lib/registry/new-york/example/TypographyLead.vue').then(m => m.default),
-      files: ['../src/lib/registry/new-york/example/TypographyLead.vue'],
+      component: () => import('../src/lib/registry/default/example/TypographyLead.vue').then(m => m.default),
+      files: ['../src/lib/registry/default/example/TypographyLead.vue'],
     },
     TypographyList: {
       name: 'TypographyList',
       type: 'components:example',
       registryDependencies: [],
-      component: () => import('../src/lib/registry/new-york/example/TypographyList.vue').then(m => m.default),
-      files: ['../src/lib/registry/new-york/example/TypographyList.vue'],
+      component: () => import('../src/lib/registry/default/example/TypographyList.vue').then(m => m.default),
+      files: ['../src/lib/registry/default/example/TypographyList.vue'],
     },
     TypographyMuted: {
       name: 'TypographyMuted',
       type: 'components:example',
       registryDependencies: [],
-      component: () => import('../src/lib/registry/new-york/example/TypographyMuted.vue').then(m => m.default),
-      files: ['../src/lib/registry/new-york/example/TypographyMuted.vue'],
+      component: () => import('../src/lib/registry/default/example/TypographyMuted.vue').then(m => m.default),
+      files: ['../src/lib/registry/default/example/TypographyMuted.vue'],
     },
     TypographyP: {
       name: 'TypographyP',
       type: 'components:example',
       registryDependencies: [],
-      component: () => import('../src/lib/registry/new-york/example/TypographyP.vue').then(m => m.default),
-      files: ['../src/lib/registry/new-york/example/TypographyP.vue'],
+      component: () => import('../src/lib/registry/default/example/TypographyP.vue').then(m => m.default),
+      files: ['../src/lib/registry/default/example/TypographyP.vue'],
     },
     TypographySmall: {
       name: 'TypographySmall',
       type: 'components:example',
       registryDependencies: [],
-      component: () => import('../src/lib/registry/new-york/example/TypographySmall.vue').then(m => m.default),
-      files: ['../src/lib/registry/new-york/example/TypographySmall.vue'],
+      component: () => import('../src/lib/registry/default/example/TypographySmall.vue').then(m => m.default),
+      files: ['../src/lib/registry/default/example/TypographySmall.vue'],
     },
     TypographyTable: {
       name: 'TypographyTable',
       type: 'components:example',
       registryDependencies: [],
-      component: () => import('../src/lib/registry/new-york/example/TypographyTable.vue').then(m => m.default),
-      files: ['../src/lib/registry/new-york/example/TypographyTable.vue'],
+      component: () => import('../src/lib/registry/default/example/TypographyTable.vue').then(m => m.default),
+      files: ['../src/lib/registry/default/example/TypographyTable.vue'],
     },
   },
 }
diff --git a/apps/www/src/content/docs/components/accordion.md b/apps/www/src/content/docs/components/accordion.md
index dc0d658f..4f4c29cd 100644
--- a/apps/www/src/content/docs/components/accordion.md
+++ b/apps/www/src/content/docs/components/accordion.md
@@ -8,24 +8,174 @@ 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>
+
+### Run the following command
+
 ```bash
 npx shadcn-vue@latest add accordion
 ```
 
-<ManualInstall>
+### Update `tailwind.config.js`
 
-1. Install `radix-vue`:
+Add the following animations to your `tailwind.config.js` file:
+
+```js title="tailwind.config.js" {5-18}
+/** @type {import('tailwindcss').Config} */
+module.exports = {
+  theme: {
+    extend: {
+      keyframes: {
+        'accordion-down': {
+          from: { height: 0 },
+          to: { height: 'var(--radix-accordion-content-height)' },
+        },
+        'accordion-up': {
+          from: { height: 'var(--radix-accordion-content-height)' },
+          to: { height: 0 },
+        },
+      },
+      animation: {
+        'accordion-down': 'accordion-down 0.2s ease-out',
+        'accordion-up': 'accordion-up 0.2s ease-out',
+      },
+    },
+  },
+}
+```
+
+</Steps>
+
+</template>
+
+<template #Manual>
+
+<Steps>
+
+### Install the following dependencies:
 
 ```bash
 npm install radix-vue
+
+npm install --save-dev @iconify/vue
 ```
 
-2. Copy and paste the component source files linked at the top of this page into your project.
-</ManualInstall>
+### 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
 
@@ -57,4 +207,5 @@ import { Accordion, AccordionContent, AccordionItem, AccordionTrigger } from '@/
     </AccordionItem>
   </Accordion>
 </template>
-```
\ No newline at end of file
+```
+
diff --git a/apps/www/src/content/docs/components/alert-dialog.md b/apps/www/src/content/docs/components/alert-dialog.md
index e48bc4f7..4e042861 100644
--- a/apps/www/src/content/docs/components/alert-dialog.md
+++ b/apps/www/src/content/docs/components/alert-dialog.md
@@ -7,26 +7,137 @@ primitive: https://www.radix-vue.com/components/alert-dialog.html
     
  
 <ComponentPreview name="AlertDialogDemo" />
-
-
-
  
 ## Installation
 
-```bash
-npx shadcn-vue@latest add alert-dialog 
-```  
-  
-<ManualInstall>
+<TabPreview name="CLI">
+<template #CLI>
 
-1. Install `radix-vue`:
+```bash
+npx shadcn-vue@latest add alert-dialog
+```
+</template>
+
+<template #Manual>
+
+<Steps>
+
+### Install the following dependency:
 
 ```bash
 npm install radix-vue
 ```
 
-2. Copy and paste the component source files linked at the top of this page into your project.
-</ManualInstall>
+### 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
 
diff --git a/apps/www/src/content/docs/components/alert.md b/apps/www/src/content/docs/components/alert.md
index 11433097..5243f72c 100644
--- a/apps/www/src/content/docs/components/alert.md
+++ b/apps/www/src/content/docs/components/alert.md
@@ -6,24 +6,21 @@ description: Displays a callout for user attention.
 
 <ComponentPreview name="AlertDemo"  /> 
 
-
-
 ## Installation
 
+<TabPreview name="CLI">
+<template #CLI>
+
 ```bash
 npx shadcn-vue@latest add alert
 ```
+</template>
 
-<ManualInstall>
+<template #Manual>
 
-1. Install `radix-vue`:
-
-```bash
-npm install radix-vue
-```
-
-2. Copy and paste the component source files linked at the top of this page into your project.
-</ManualInstall>
+#### Coming soon...
+</template>
+</TabPreview>
 
 ## Usage
 
diff --git a/apps/www/src/content/docs/components/aspect-ratio.md b/apps/www/src/content/docs/components/aspect-ratio.md
index 95443312..6ba948bc 100644
--- a/apps/www/src/content/docs/components/aspect-ratio.md
+++ b/apps/www/src/content/docs/components/aspect-ratio.md
@@ -10,20 +10,69 @@ primitive: https://www.radix-vue.com/components/aspect-ratio.html
 
 ## Installation
 
+<TabPreview name="CLI">
+<template #CLI>
+
 ```bash
 npx shadcn-vue@latest add aspect-ratio
 ```
+</template>
 
-<ManualInstall>
+<template #Manual>
 
-1. Install `radix-vue`:
+<Steps>
+
+### Install the following dependency:
 
 ```bash
 npm install radix-vue
 ```
 
-2. Copy and paste the component source files linked at the top of this page into your project.
-</ManualInstall>
+### 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: [],
+}
+```
+
+</Steps>
+
+</template>
+</TabPreview>
 
 ## Usage
 
diff --git a/apps/www/src/content/docs/components/avatar.md b/apps/www/src/content/docs/components/avatar.md
index 424a89c0..0a2cd8b7 100644
--- a/apps/www/src/content/docs/components/avatar.md
+++ b/apps/www/src/content/docs/components/avatar.md
@@ -11,20 +11,94 @@ primitive: https://www.radix-vue.com/components/avatar.html
 
 ## Installation
 
+<TabPreview name="CLI">
+<template #CLI>
+
 ```bash
 npx shadcn-vue@latest add avatar
 ```
+</template>
 
-<ManualInstall>
+<template #Manual>
 
-1. Install `radix-vue`:
+<Steps>
+
+### Install the following dependency:
 
 ```bash
 npm install radix-vue
 ```
 
-2. Copy and paste the component source files linked at the top of this page into your project.
-</ManualInstall>
+### 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
 
diff --git a/apps/www/src/content/docs/components/badge.md b/apps/www/src/content/docs/components/badge.md
index adcf2cc6..ef552aae 100644
--- a/apps/www/src/content/docs/components/badge.md
+++ b/apps/www/src/content/docs/components/badge.md
@@ -6,23 +6,47 @@ description: Displays a badge or a component that looks like a badge.
 
 <ComponentPreview name="BadgeDemo"  /> 
 
-
 ## Installation
 
+<TabPreview name="CLI">
+<template #CLI>
+
 ```bash
 npx shadcn-vue@latest add badge
 ```
+</template>
 
-<ManualInstall>
+<template #Manual>
 
-1. Install `radix-vue`:
+<Steps>
 
-```bash
-npm install radix-vue
+### Copy and paste the following code into your project
+
+```vue
+<script setup lang="ts">
+import type { VariantProps } from 'class-variance-authority'
+import { badgeVariants } from '.'
+import { cn } from '@/lib/utils'
+
+interface BadgeVariantProps extends VariantProps<typeof badgeVariants> {}
+
+interface Props {
+  variant?: BadgeVariantProps['variant']
+}
+defineProps<Props>()
+</script>
+
+<template>
+  <div :class="cn(badgeVariants({ variant }), $attrs.class ?? '')">
+    <slot />
+  </div>
+</template>
 ```
 
-2. Copy and paste the component source files linked at the top of this page into your project.
-</ManualInstall>
+</Steps>
+
+</template>
+</TabPreview>
 
 ## Usage
 
diff --git a/apps/www/src/content/docs/components/button.md b/apps/www/src/content/docs/components/button.md
index 5d635117..389a771d 100644
--- a/apps/www/src/content/docs/components/button.md
+++ b/apps/www/src/content/docs/components/button.md
@@ -8,20 +8,49 @@ description: Displays a button or a component that looks like a button.
 
 ## Installation
 
+<TabPreview name="CLI">
+<template #CLI>
+
 ```bash
 npx shadcn-vue@latest add button
 ```
+</template>
 
-<ManualInstall>
+<template #Manual>
 
-1. Install `radix-vue`:
+<Steps>
 
-```bash
-npm install radix-vue
+### Copy and paste the following code into your project
+
+```vue
+<script setup lang="ts">
+import { buttonVariants } from '.'
+import { cn } from '@/lib/utils'
+
+interface Props {
+  variant?: NonNullable<Parameters<typeof buttonVariants>[0]>['variant']
+  size?: NonNullable<Parameters<typeof buttonVariants>[0]>['size']
+  as?: string
+}
+
+withDefaults(defineProps<Props>(), {
+  as: 'button',
+})
+</script>
+
+<template>
+  <component
+    :is="as"
+    :class="cn(buttonVariants({ variant, size }), $attrs.class ?? '')"
+  >
+    <slot />
+  </component>
+</template>
 ```
 
-2. Copy and paste the component source files linked at the top of this page into your project.
-</ManualInstall>
+</Steps>
+</template>
+</TabPreview>
 
 ## Usage
 
diff --git a/apps/www/src/content/docs/components/calendar.md b/apps/www/src/content/docs/components/calendar.md
index 1227be84..0691cd22 100644
--- a/apps/www/src/content/docs/components/calendar.md
+++ b/apps/www/src/content/docs/components/calendar.md
@@ -11,21 +11,146 @@ description: A date field component that allows users to enter and edit date.
 The `Calendar` component is built on top of [VCalendar](https://vcalendar.io/getting-started/installation.html).
 
 ## Installation
- 
+
+<TabPreview name="CLI">
+<template #CLI>
+
 ```bash
 npx shadcn-vue@latest add calendar
 ```
+</template>
 
-<ManualInstall>
+<template #Manual>
 
-1. Install `radix-vue`:
+<Steps>
+
+### Install the following dependency
 
 ```bash
-npm install radix-vue
+npm install v-calendar
 ```
 
-2. Copy and paste the component source files linked at the top of this page into your project.
-</ManualInstall>
+### 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>
+```
+
+
+</Steps>
+
+
+</template>
+</TabPreview>
 
 ## Usage
 
diff --git a/apps/www/src/content/docs/components/card.md b/apps/www/src/content/docs/components/card.md
index 147b40a6..95bac00e 100644
--- a/apps/www/src/content/docs/components/card.md
+++ b/apps/www/src/content/docs/components/card.md
@@ -6,23 +6,21 @@ description: Displays a card with header, content, and footer.
 
 <ComponentPreview name="CardDemo"  /> 
 
-
 ## Installation
 
+<TabPreview name="CLI">
+<template #CLI>
+
 ```bash
 npx shadcn-vue@latest add card
 ```
+</template>
 
-<ManualInstall>
+<template #Manual>
 
-1. Install `radix-vue`:
-
-```bash
-npm install radix-vue
-```
-
-2. Copy and paste the component source files linked at the top of this page into your project.
-</ManualInstall>
+#### 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 b69a0b09..dbcd61fb 100644
--- a/apps/www/src/content/docs/components/checkbox.md
+++ b/apps/www/src/content/docs/components/checkbox.md
@@ -11,20 +11,80 @@ primitive: https://www.radix-vue.com/components/checkbox.html
 
 ## Installation
 
+<TabPreview name="CLI">
+<template #CLI>
+
 ```bash
 npx shadcn-vue@latest add checkbox
 ```
+</template>
 
-<ManualInstall>
+<template #Manual>
 
-1. Install `radix-vue`:
+<Steps>
+
+### Install the following dependencies:
 
 ```bash
 npm install radix-vue
+
+npm install --save-dev @iconify/vue
 ```
 
-2. Copy and paste the component source files linked at the top of this page into your project.
-</ManualInstall>
+### 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
 
@@ -36,4 +96,10 @@ import { Checkbox } from '@/components/ui/checkbox'
 <template>
   <Checkbox id="terms" />
 </template>
-```
\ No newline at end of file
+```
+
+## Examples
+
+### With text
+
+<ComponentPreview name="CheckboxDisabled"  /> 
\ No newline at end of file
diff --git a/apps/www/src/content/docs/components/collapsible.md b/apps/www/src/content/docs/components/collapsible.md
index f045c40b..316cf346 100644
--- a/apps/www/src/content/docs/components/collapsible.md
+++ b/apps/www/src/content/docs/components/collapsible.md
@@ -8,24 +8,95 @@ primitive: https://www.radix-vue.com/components/collapsible.html
 
 <ComponentPreview name="CollapsibleDemo" /> 
 
-
-
 ## Installation
 
+<TabPreview name="CLI">
+<template #CLI>
+
 ```bash
 npx shadcn-vue@latest add collapsible
 ```
+</template>
 
-<ManualInstall>
+<template #Manual>
 
-1. Install `radix-vue`:
+<Steps>
+
+### Install the following dependencies:
 
 ```bash
 npm install radix-vue
+
+npm install --save-dev @iconify/vue
 ```
 
-2. Copy and paste the component source files linked at the top of this page into your project.
-</ManualInstall>
+### 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 69223751..bb0c6b39 100644
--- a/apps/www/src/content/docs/components/combobox.md
+++ b/apps/www/src/content/docs/components/combobox.md
@@ -12,6 +12,123 @@ The Combobox is built using a composition of the `<Popover />` and the `<Command
 
 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
@@ -20,19 +137,19 @@ import { Check, ChevronsUpDown } from 'lucide-vue-next'
 
 import { ref } from 'vue'
 import { cn } from '@/lib/utils'
-import { Button } from '@/lib/registry/default/ui/button'
+import { Button } from '@/components/ui/button'
 import {
   Command,
   CommandEmpty,
   CommandGroup,
   CommandInput,
   CommandItem,
-} from '@/lib/registry/default/ui/command'
+} from '@/components/ui/command'
 import {
   Popover,
   PopoverContent,
   PopoverTrigger,
-} from '@/lib/registry/default/ui/popover'
+} from '@/components/ui/popover'
 
 const frameworks = [
   { value: 'next.js', label: 'Next.js' },
diff --git a/apps/www/src/content/docs/components/command.md b/apps/www/src/content/docs/components/command.md
index 93b5a25e..80bf283d 100644
--- a/apps/www/src/content/docs/components/command.md
+++ b/apps/www/src/content/docs/components/command.md
@@ -12,20 +12,19 @@ primitive: https://www.radix-vue.com/components/popover.html
 
 ## Installation
 
+<TabPreview name="CLI">
+<template #CLI>
+
 ```bash
 npx shadcn-vue@latest add command
 ```
+</template>
 
-<ManualInstall>
+<template #Manual>
 
-1. Install `radix-vue`:
-
-```bash
-npm install radix-vue
-```
-
-2. Copy and paste the component source files linked at the top of this page into your project.
-</ManualInstall>
+#### Coming soon...
+</template>
+</TabPreview>
 
 ## Usage
 
diff --git a/apps/www/src/content/docs/components/context-menu.md b/apps/www/src/content/docs/components/context-menu.md
index 467418d0..5b0c9e9d 100644
--- a/apps/www/src/content/docs/components/context-menu.md
+++ b/apps/www/src/content/docs/components/context-menu.md
@@ -8,24 +8,365 @@ 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>
 
-<ManualInstall>
+<template #Manual>
 
-1. Install `radix-vue`:
+<Steps>
+
+### Install the following dependencies:
 
 ```bash
 npm install radix-vue
+
+npm install --save-dev @iconify/vue
 ```
 
-2. Copy and paste the component source files linked at the top of this page into your project.
-</ManualInstall>
+### 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 10764c3e..ac013f94 100644
--- a/apps/www/src/content/docs/components/dialog.md
+++ b/apps/www/src/content/docs/components/dialog.md
@@ -8,23 +8,150 @@ primitive: https://www.radix-vue.com/components/dialog.html
 
 <ComponentPreview name="DialogDemo" /> 
 
-
-## Installation
+<TabPreview name="CLI">
+<template #CLI>
 
 ```bash
 npx shadcn-vue@latest add dialog
 ```
+</template>
 
-<ManualInstall>
+<template #Manual>
 
-1. Install `radix-vue`:
+<Steps>
+
+### Install the following dependencies:
 
 ```bash
 npm install radix-vue
+
+npm install --save-dev @iconify/vue
 ```
 
-2. Copy and paste the component source files linked at the top of this page into your project.
-</ManualInstall>
+### 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 935500f3..59880f0f 100644
--- a/apps/www/src/content/docs/components/dropdown-menu.md
+++ b/apps/www/src/content/docs/components/dropdown-menu.md
@@ -9,22 +9,412 @@ primitive: https://www.radix-vue.com/components/dropdown-menu.html
 <ComponentPreview name="DropdownMenuDemo" /> 
 
 
-## Installation
+<TabPreview name="CLI">
+<template #CLI>
 
 ```bash
 npx shadcn-vue@latest add dropdown-menu
 ```
+</template>
 
-<ManualInstall>
+<template #Manual>
 
-1. Install `radix-vue`:
+<Steps>
+
+### Install the following dependencies:
 
 ```bash
 npm install radix-vue
+
+npm install --save-dev @iconify/vue
 ```
 
-2. Copy and paste the component source files linked at the top of this page into your project.
-</ManualInstall>
+### 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
 
diff --git a/apps/www/src/content/docs/components/hover-card.md b/apps/www/src/content/docs/components/hover-card.md
index 5be38160..7daf9e8b 100644
--- a/apps/www/src/content/docs/components/hover-card.md
+++ b/apps/www/src/content/docs/components/hover-card.md
@@ -9,22 +9,151 @@ primitive: https://www.radix-vue.com/components/hover-card.html
 <ComponentPreview name="HoverCardDemo" /> 
 
 
-## Installation
+<TabPreview name="CLI">
+<template #CLI>
 
 ```bash
 npx shadcn-vue@latest add hover-card
 ```
+</template>
 
-<ManualInstall>
+<template #Manual>
 
-1. Install `radix-vue`:
+<Steps>
+
+### Install the following dependency:
 
 ```bash
 npm install radix-vue
 ```
 
-2. Copy and paste the component source files linked at the top of this page into your project.
-</ManualInstall>
+### 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
 
diff --git a/apps/www/src/content/docs/components/input.md b/apps/www/src/content/docs/components/input.md
index e473e9a6..154a4b3a 100644
--- a/apps/www/src/content/docs/components/input.md
+++ b/apps/www/src/content/docs/components/input.md
@@ -7,23 +7,51 @@ 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>
 
 ```bash
 npx shadcn-vue@latest add input
 ```
+</template>
 
-<ManualInstall>
+<template #Manual>
 
-1. Install `radix-vue`:
+<Steps>
 
-```bash
-npm install radix-vue
+### 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>
 ```
 
-2. Copy and paste the component source files linked at the top of this page into your project.
-</ManualInstall>
+</Steps>
+
+
+
+</template>
+</TabPreview>
 
 ## Usage
 
diff --git a/apps/www/src/content/docs/components/label.md b/apps/www/src/content/docs/components/label.md
index 1a2fdec7..22a31baa 100644
--- a/apps/www/src/content/docs/components/label.md
+++ b/apps/www/src/content/docs/components/label.md
@@ -10,20 +10,53 @@ primitive: https://www.radix-vue.com/components/label.html
 
 ## Installation
 
+<TabPreview name="CLI">
+<template #CLI>
+
 ```bash
 npx shadcn-vue@latest add label
 ```
+</template>
 
-<ManualInstall>
+<template #Manual>
 
-1. Install `radix-vue`:
+<Steps>
+
+### Install the following dependency:
 
 ```bash
 npm install radix-vue
 ```
 
-2. Copy and paste the component source files linked at the top of this page into your project.
-</ManualInstall>
+### 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>
+```
+
+</Steps>
+
+</template>
+</TabPreview>
 
 ## Usage
 
diff --git a/apps/www/src/content/docs/components/menubar.md b/apps/www/src/content/docs/components/menubar.md
index 4fa7c17c..8387f5c5 100644
--- a/apps/www/src/content/docs/components/menubar.md
+++ b/apps/www/src/content/docs/components/menubar.md
@@ -11,20 +11,388 @@ primitive: https://www.radix-vue.com/components/menubar.html
 
 ## Installation
 
+<TabPreview name="CLI">
+<template #CLI>
+
 ```bash
 npx shadcn-vue@latest add menubar
 ```
+</template>
 
-<ManualInstall>
+<template #Manual>
 
-1. Install `radix-vue`:
+<Steps>
+
+### Install the following dependencies:
 
 ```bash
 npm install radix-vue
+
+npm install --save-dev @iconify/vue
 ```
 
-2. Copy and paste the component source files linked at the top of this page into your project.
-</ManualInstall>
+### 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 4b564e55..3de85430 100644
--- a/apps/www/src/content/docs/components/navigation-menu.md
+++ b/apps/www/src/content/docs/components/navigation-menu.md
@@ -10,20 +10,368 @@ primitive: https://www.radix-vue.com/components/navigation-menu.html
 
 ## Installation
 
+<TabPreview name="CLI">
+<template #CLI>
+
 ```bash
 npx shadcn-vue@latest add navigation-menu
 ```
+</template>
 
-<ManualInstall>
+<template #Manual>
 
-1. Install `radix-vue`:
+<Steps>
+
+### Install the following dependencies:
 
 ```bash
 npm install radix-vue
+
+npm install --save-dev @iconify/vue
 ```
 
-2. Copy and paste the component source files linked at the top of this page into your project.
-</ManualInstall>
+### 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 dfac75b2..58fe691f 100644
--- a/apps/www/src/content/docs/components/popover.md
+++ b/apps/www/src/content/docs/components/popover.md
@@ -12,20 +12,153 @@ primitive: https://www.radix-vue.com/components/popover.html
 
 ## Installation
 
+<TabPreview name="CLI">
+<template #CLI>
+
 ```bash
 npx shadcn-vue@latest add popover
 ```
+</template>
 
-<ManualInstall>
+<template #Manual>
 
-1. Install `radix-vue`:
+<Steps>
+
+### Install the following dependencies:
 
 ```bash
 npm install radix-vue
+
+npm install --save-dev @iconify/vue
 ```
 
-2. Copy and paste the component source files linked at the top of this page into your project.
-</ManualInstall>
+### 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 e1853db2..83bb1f1a 100644
--- a/apps/www/src/content/docs/components/progress.md
+++ b/apps/www/src/content/docs/components/progress.md
@@ -11,20 +11,78 @@ primitive: https://www.radix-vue.com/components/progress.html
 
 ## Installation
 
+<TabPreview name="CLI">
+<template #CLI>
+
 ```bash
 npx shadcn-vue@latest add progress
 ```
+</template>
 
-<ManualInstall>
+<template #Manual>
 
-1. Install `radix-vue`:
+<Steps>
+
+### Install the following dependency:
 
 ```bash
 npm install radix-vue
 ```
 
-2. Copy and paste the component source files linked at the top of this page into your project.
-</ManualInstall>
+### 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: [],
+}
+```
+
+</Steps>
+
+</template>
+</TabPreview>
 
 ## Usage
 
diff --git a/apps/www/src/content/docs/components/radio-group.md b/apps/www/src/content/docs/components/radio-group.md
index 6d006cd2..3b16b2aa 100644
--- a/apps/www/src/content/docs/components/radio-group.md
+++ b/apps/www/src/content/docs/components/radio-group.md
@@ -8,23 +8,111 @@ 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>
 
-<ManualInstall>
+<template #Manual>
 
-1. Install `radix-vue`:
+<Steps>
+
+### Install the following dependency:
 
 ```bash
 npm install radix-vue
 ```
 
-2. Copy and paste the component source files linked at the top of this page into your project.
-</ManualInstall>
+### 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 152a877f..fce0fd09 100644
--- a/apps/www/src/content/docs/components/scroll-area.md
+++ b/apps/www/src/content/docs/components/scroll-area.md
@@ -11,20 +11,115 @@ primitive: https://www.radix-vue.com/components/scroll-area.html
 
 ## Installation
 
+<TabPreview name="CLI">
+<template #CLI>
+
 ```bash
 npx shadcn-vue@latest add scroll-area
 ```
+</template>
 
-<ManualInstall>
+<template #Manual>
 
-1. Install `radix-vue`:
+<Steps>
+
+### Install the following dependency:
 
 ```bash
 npm install radix-vue
 ```
 
-2. Copy and paste the component source files linked at the top of this page into your project.
-</ManualInstall>
+### 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
 
diff --git a/apps/www/src/content/docs/components/select.md b/apps/www/src/content/docs/components/select.md
index 3de388b6..bcf16961 100644
--- a/apps/www/src/content/docs/components/select.md
+++ b/apps/www/src/content/docs/components/select.md
@@ -12,20 +12,181 @@ primitive: https://www.radix-vue.com/components/popover.html
 
 ## Installation
 
+<TabPreview name="CLI">
+<template #CLI>
+
 ```bash
 npx shadcn-vue@latest add select
 ```
+</template>
 
-<ManualInstall>
+<template #Manual>
 
-1. Install `radix-vue`:
+<Steps>
+
+### Install the following dependencies
 
 ```bash
 npm install radix-vue
+
+npm install --save-dev @iconify/vue
 ```
 
-2. Copy and paste the component source files linked at the top of this page into your project.
-</ManualInstall>
+### 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 bee269cf..b603a12e 100644
--- a/apps/www/src/content/docs/components/separator.md
+++ b/apps/www/src/content/docs/components/separator.md
@@ -8,23 +8,90 @@ primitive: https://www.radix-vue.com/components/separator.html
 <ComponentPreview name="SeparatorDemo" /> 
 
 
-
 ## Installation
 
+<TabPreview name="CLI">
+<template #CLI>
+
 ```bash
 npx shadcn-vue@latest add separator
 ```
+</template>
 
-<ManualInstall>
+<template #Manual>
 
-1. Install `radix-vue`:
+<Steps>
+
+### Install the following dependency
 
 ```bash
 npm install radix-vue
 ```
 
-2. Copy and paste the component source files linked at the top of this page into your project.
-</ManualInstall>
+### 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: [],
+}
+```
+
+</Steps>
+
+</template>
+</TabPreview>
 
 ## Usage
 
diff --git a/apps/www/src/content/docs/components/sheet.md b/apps/www/src/content/docs/components/sheet.md
index 3cb6415a..b0520a12 100644
--- a/apps/www/src/content/docs/components/sheet.md
+++ b/apps/www/src/content/docs/components/sheet.md
@@ -10,20 +10,20 @@ primitive: https://www.radix-vue.com/components/dialog.html
 
 ## Installation
 
+<TabPreview name="CLI">
+<template #CLI>
+
 ```bash
 npx shadcn-vue@latest add sheet
 ```
+</template>
 
-<ManualInstall>
+<template #Manual>
 
-1. Install `radix-vue`:
+#### Coming soon...
 
-```bash
-npm install radix-vue
-```
-
-2. Copy and paste the component source files linked at the top of this page into your project.
-</ManualInstall>
+</template>
+</TabPreview>
 
 ## Usage
 
diff --git a/apps/www/src/content/docs/components/skeleton.md b/apps/www/src/content/docs/components/skeleton.md
index 3d138c91..69351c82 100644
--- a/apps/www/src/content/docs/components/skeleton.md
+++ b/apps/www/src/content/docs/components/skeleton.md
@@ -8,20 +8,40 @@ description: Use to show a placeholder while content is loading.
 
 ## Installation
 
+<TabPreview name="CLI">
+<template #CLI>
+
 ```bash
 npx shadcn-vue@latest add skeleton
 ```
+</template>
 
-<ManualInstall>
+<template #Manual>
 
-1. Install `radix-vue`:
+<Steps>
 
-```bash
-npm install radix-vue
+### 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>
 ```
 
-2. Copy and paste the component source files linked at the top of this page into your project.
-</ManualInstall>
+</Steps>
+
+</template>
+</TabPreview>
 
 ## Usage
 
diff --git a/apps/www/src/content/docs/components/slider.md b/apps/www/src/content/docs/components/slider.md
index f9da8915..8ceb3a71 100644
--- a/apps/www/src/content/docs/components/slider.md
+++ b/apps/www/src/content/docs/components/slider.md
@@ -11,20 +11,75 @@ primitive: https://www.radix-vue.com/components/slider.html
 
 ## Installation
 
+<TabPreview name="CLI">
+<template #CLI>
+
 ```bash
 npx shadcn-vue@latest add slider
 ```
+</template>
 
-<ManualInstall>
+<template #Manual>
 
-1. Install `radix-vue`:
+<Steps>
+
+### Install the following dependency:
 
 ```bash
 npm install radix-vue
 ```
 
-2. Copy and paste the component source files linked at the top of this page into your project.
-</ManualInstall>
+### 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 3d97c017..102ae202 100644
--- a/apps/www/src/content/docs/components/switch.md
+++ b/apps/www/src/content/docs/components/switch.md
@@ -10,20 +10,71 @@ primitive: https://www.radix-vue.com/components/switch.html
 
 ## Installation
 
+<TabPreview name="CLI">
+<template #CLI>
+
 ```bash
 npx shadcn-vue@latest add switch
 ```
+</template>
 
-<ManualInstall>
+<template #Manual>
 
-1. Install `radix-vue`:
+<Steps>
+
+### Install the following dependency:
 
 ```bash
 npm install radix-vue
 ```
 
-2. Copy and paste the component source files linked at the top of this page into your project.
-</ManualInstall>
+### 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: [],
+}
+```
+
+</Steps>
+
+</template>
+</TabPreview>
 
 ## Usage
 
diff --git a/apps/www/src/content/docs/components/table.md b/apps/www/src/content/docs/components/table.md
index 1e7a76be..39e7fbb9 100644
--- a/apps/www/src/content/docs/components/table.md
+++ b/apps/www/src/content/docs/components/table.md
@@ -8,20 +8,20 @@ description: A responsive table component.
 
 ## Installation
 
+<TabPreview name="CLI">
+<template #CLI>
+
 ```bash
 npx shadcn-vue@latest add table
 ```
+</template>
 
-<ManualInstall>
+<template #Manual>
 
-1. Install `radix-vue`:
+#### Coming soon...
 
-```bash
-npm install radix-vue
-```
-
-2. Copy and paste the component source files linked at the top of this page into your project.
-</ManualInstall>
+</template>
+</TabPreview>
 
 ## Usage
 
diff --git a/apps/www/src/content/docs/components/tabs.md b/apps/www/src/content/docs/components/tabs.md
index 394211e9..92e68515 100644
--- a/apps/www/src/content/docs/components/tabs.md
+++ b/apps/www/src/content/docs/components/tabs.md
@@ -10,20 +10,154 @@ primitive: https://www.radix-vue.com/components/tabs.html
 
 ## Installation
 
+<TabPreview name="CLI">
+<template #CLI>
+
 ```bash
 npx shadcn-vue@latest add tabs
 ```
+</template>
 
-<ManualInstall>
+<template #Manual>
 
-1. Install `radix-vue`:
+<Steps>
+
+### Install the following dependency:
 
 ```bash
 npm install radix-vue
 ```
 
-2. Copy and paste the component source files linked at the top of this page into your project.
-</ManualInstall>
+### 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 5334b124..625c0ae4 100644
--- a/apps/www/src/content/docs/components/textarea.md
+++ b/apps/www/src/content/docs/components/textarea.md
@@ -8,20 +8,40 @@ description: Displays a form textarea or a component that looks like a textarea.
 
 ## Installation
 
+<TabPreview name="CLI">
+<template #CLI>
+
 ```bash
 npx shadcn-vue@latest add textarea
 ```
+</template>
 
-<ManualInstall>
+<template #Manual>
 
-1. Install `radix-vue`:
+<Steps>
+
+### Install the following dependency:
 
 ```bash
 npm install radix-vue
 ```
 
-2. Copy and paste the component source files linked at the top of this page into your project.
-</ManualInstall>
+### 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>
+```
+
+</Steps>
+
+</template>
+</TabPreview>
 
 ## Usage
 
diff --git a/apps/www/src/content/docs/components/toggle.md b/apps/www/src/content/docs/components/toggle.md
index 6f74afa9..0dce43e9 100644
--- a/apps/www/src/content/docs/components/toggle.md
+++ b/apps/www/src/content/docs/components/toggle.md
@@ -11,20 +11,75 @@ primitive: https://www.radix-vue.com/components/toggle.html
 
 ## Installation
 
+<TabPreview name="CLI">
+<template #CLI>
+
 ```bash
 npx shadcn-vue@latest add toggle
 ```
+</template>
 
-<ManualInstall>
+<template #Manual>
 
-1. Install `radix-vue`:
+<Steps>
+
+### Install the following dependencies:
 
 ```bash
 npm install radix-vue
+
+npm install --save-dev @iconify/vue
 ```
 
-2. Copy and paste the component source files linked at the top of this page into your project.
-</ManualInstall>
+### 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: [],
+}
+```
+
+</Steps>
+
+</template>
+</TabPreview>
 
 ## Usage
 
diff --git a/apps/www/src/content/docs/components/tooltip.md b/apps/www/src/content/docs/components/tooltip.md
index 02d5b570..8a667288 100644
--- a/apps/www/src/content/docs/components/tooltip.md
+++ b/apps/www/src/content/docs/components/tooltip.md
@@ -10,20 +10,111 @@ primitive: https://www.radix-vue.com/components/tooltip.html
 
 ## Installation
 
+<TabPreview name="CLI">
+<template #CLI>
+
 ```bash
 npx shadcn-vue@latest add tooltip
 ```
+</template>
 
-<ManualInstall>
+<template #Manual>
 
-1. Install `radix-vue`:
+<Steps>
+
+### Install the following dependencies:
 
 ```bash
 npm install radix-vue
+
+npm install --save-dev @iconify/vue
 ```
 
-2. Copy and paste the component source files linked at the top of this page into your project.
-</ManualInstall>
+### 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/content/docs/typography.md b/apps/www/src/content/docs/typography.md
index e1f037ca..8851f1f6 100644
--- a/apps/www/src/content/docs/typography.md
+++ b/apps/www/src/content/docs/typography.md
@@ -4,112 +4,56 @@ description: Styles for headings, paragraphs, lists...etc
 component: true
 ---
 
-<ComponentPreview name="TypographyDemo">
-
-<div/>
-
-</ComponentPreview>
+<ComponentPreview name="TypographyDemo" />
 
 ## h1
 
-<ComponentPreview name="TypographyH1">
-
-<div/>
-
-</ComponentPreview>
+<ComponentPreview name="TypographyH1" />
 
 ## h2
 
-<ComponentPreview name="TypographyH2">
-
-<div/>
-
-</ComponentPreview>
+<ComponentPreview name="TypographyH2" />
 
 ## h3
 
-<ComponentPreview name="TypographyH3">
-
-<div/>
-
-</ComponentPreview>
+<ComponentPreview name="TypographyH3" />
 
 ## h4
 
-<ComponentPreview name="TypographyH4">
-
-<div/>
-
-</ComponentPreview>
+<ComponentPreview name="TypographyH4" />
 
 ## p
 
-<ComponentPreview name="TypographyP">
-
-<div/>
-
-</ComponentPreview>
+<ComponentPreview name="TypographyP" />
 
 ## blockquote
 
-<ComponentPreview name="TypographyBlockquote">
-
-<div/>
-
-</ComponentPreview>
+<ComponentPreview name="TypographyBlockquote" />
 
 ## table
 
-<ComponentPreview name="TypographyTable">
-
-<div/>
-
-</ComponentPreview>
+<ComponentPreview name="TypographyTable" />
 
 ## list
 
-<ComponentPreview name="TypographyList">
-
-<div/>
-
-</ComponentPreview>
+<ComponentPreview name="TypographyList" />
 
 ## Inline code
 
-<ComponentPreview name="TypographyInlineCode">
-
-<div/>
-
-</ComponentPreview>
+<ComponentPreview name="TypographyInlineCode" />
 
 ## Lead
 
-<ComponentPreview name="TypographyLead">
-
-<div/>
-
-</ComponentPreview>
+<ComponentPreview name="TypographyLead" />
 
 ## Large
 
-<ComponentPreview name="TypographyLarge">
-
-<div/>
-
-</ComponentPreview>
+<ComponentPreview name="TypographyLarge" />
 
 ## Small
 
-<ComponentPreview name="TypographySmall">
-
-<div/>
-
-</ComponentPreview>
+<ComponentPreview name="TypographySmall" />
 
 ## Muted
 
-<ComponentPreview name="TypographyMuted">
-
-<div/>
-
-</ComponentPreview>
\ No newline at end of file
+<ComponentPreview name="TypographyMuted" />
\ No newline at end of file
diff --git a/apps/www/src/lib/registry/default/example/CardWithForm.vue b/apps/www/src/lib/registry/default/example/CardWithForm.vue
index 8f74fdaa..18f74036 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 '@/lib/registry/default/ui/button'
+import { Button } from '@/components/ui/button'
 import {
   Card,
   CardContent,
@@ -7,16 +7,16 @@ import {
   CardFooter,
   CardHeader,
   CardTitle,
-} from '@/lib/registry/default/ui/card'
-import { Input } from '@/lib/registry/default/ui/input'
-import { Label } from '@/lib/registry/default/ui/label'
+} from '@/components/ui/card'
+import { Input } from '@/components/ui/input'
+import { Label } from '@/components/ui/label'
 import {
   Select,
   SelectContent,
   SelectItem,
   SelectTrigger,
   SelectValue,
-} from '@/lib/registry/default/ui/select'
+} from '@/components/ui/select'
 </script>
 
 <template>
diff --git a/apps/www/src/lib/registry/default/example/CheckboxDisabled.vue b/apps/www/src/lib/registry/default/example/CheckboxDisabled.vue
new file mode 100644
index 00000000..52eeb4a4
--- /dev/null
+++ b/apps/www/src/lib/registry/default/example/CheckboxDisabled.vue
@@ -0,0 +1,20 @@
+<script setup lang="ts">
+import { Checkbox } from '@/lib/registry/default/ui/checkbox'
+</script>
+
+<template>
+  <div className="items-top flex space-x-2">
+    <Checkbox id="terms1" disabled />
+    <div className="grid gap-1.5 leading-none">
+      <label
+        htmlFor="terms1"
+        className="text-sm font-medium leading-none peer-disabled:cursor-not-allowed peer-disabled:opacity-70"
+      >
+        Accept terms and conditions
+      </label>
+      <p className="text-sm text-muted-foreground">
+        You agree to our Terms of Service and Privacy Policy.
+      </p>
+    </div>
+  </div>
+</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 1dc12ffe..7a99ad50 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/new-york/ui/accordion'
+import { Accordion, AccordionContent, AccordionItem, AccordionTrigger } from '@/lib/registry/default/ui/accordion'
 
 const defaultValue = 'item-1'