diff --git a/apps/www/__registry__/index.ts b/apps/www/__registry__/index.ts
index 4f8045fe..73cd6b10 100644
--- a/apps/www/__registry__/index.ts
+++ b/apps/www/__registry__/index.ts
@@ -415,6 +415,27 @@ export const Index = {
       component: () => import('../src/lib/registry/default/example/TypographyTable.vue').then(m => m.default),
       files: ['../src/lib/registry/default/example/TypographyTable.vue'],
     },
+    ActivityGoal: {
+      name: 'ActivityGoal',
+      type: 'components:example',
+      registryDependencies: ['button', 'card', 'themes', 'config'],
+      component: () => import('../src/lib/registry/default/example/ActivityGoal.vue').then(m => m.default),
+      files: ['../src/lib/registry/default/example/ActivityGoal.vue'],
+    },
+    DataTable: {
+      name: 'DataTable',
+      type: 'components:example',
+      registryDependencies: ['button', 'checkbox', 'dropdown-menu', 'input', 'table', 'card', 'utils'],
+      component: () => import('../src/lib/registry/default/example/DataTable.vue').then(m => m.default),
+      files: ['../src/lib/registry/default/example/DataTable.vue'],
+    },
+    Metric: {
+      name: 'Metric',
+      type: 'components:example',
+      registryDependencies: ['card', 'config'],
+      component: () => import('../src/lib/registry/default/example/Metric.vue').then(m => m.default),
+      files: ['../src/lib/registry/default/example/Metric.vue'],
+    },
   },
   'new-york': {
     AccordionDemo: {
@@ -830,5 +851,26 @@ export const Index = {
       component: () => import('../src/lib/registry/new-york/example/TypographyTable.vue').then(m => m.default),
       files: ['../src/lib/registry/new-york/example/TypographyTable.vue'],
     },
+    ActivityGoal: {
+      name: 'ActivityGoal',
+      type: 'components:example',
+      registryDependencies: ['button', 'card', 'themes', 'config'],
+      component: () => import('../src/lib/registry/new-york/example/ActivityGoal.vue').then(m => m.default),
+      files: ['../src/lib/registry/new-york/example/ActivityGoal.vue'],
+    },
+    DataTable: {
+      name: 'DataTable',
+      type: 'components:example',
+      registryDependencies: ['button', 'checkbox', 'dropdown-menu', 'input', 'table', 'card', 'utils'],
+      component: () => import('../src/lib/registry/new-york/example/DataTable.vue').then(m => m.default),
+      files: ['../src/lib/registry/new-york/example/DataTable.vue'],
+    },
+    Metric: {
+      name: 'Metric',
+      type: 'components:example',
+      registryDependencies: ['card', 'config'],
+      component: () => import('../src/lib/registry/new-york/example/Metric.vue').then(m => m.default),
+      files: ['../src/lib/registry/new-york/example/Metric.vue'],
+    },
   },
 }
diff --git a/apps/www/src/lib/registry/default/example/Cards/index.vue b/apps/www/src/lib/registry/default/example/Cards/index.vue
deleted file mode 100644
index 44ad59d6..00000000
--- a/apps/www/src/lib/registry/default/example/Cards/index.vue
+++ /dev/null
@@ -1,125 +0,0 @@
-<script setup lang="ts">
-import { ref } from 'vue'
-import { ChevronDown, Minus, Plus, Send } from 'lucide-vue-next'
-import { addDays, startOfToday } from 'date-fns'
-import {
-  months,
-  payments,
-  roles,
-  teamMembers,
-  years,
-} from './utils/data'
-import {
-  Card,
-  CardContent,
-  CardDescription,
-  CardFooter,
-  CardHeader,
-  CardTitle,
-} from '@/lib/registry/default/ui/card'
-import {
-  Avatar,
-  AvatarFallback,
-  AvatarImage,
-} from '@/lib/registry/default/ui/avatar'
-import { Button } from '@/lib/registry/default/ui/button'
-import { Textarea } from '@/lib/registry/default/ui/textarea'
-import { Calendar } from '@/lib/registry/default/ui/calendar'
-import {
-  DropdownMenu,
-  DropdownMenuContent,
-  DropdownMenuGroup,
-  DropdownMenuItem,
-  DropdownMenuLabel,
-  DropdownMenuSeparator,
-  DropdownMenuTrigger,
-} from '@/lib/registry/default/ui/dropdown-menu'
-import { Label } from '@/lib/registry/default/ui/label'
-import { Switch } from '@/lib/registry/default/ui/switch'
-import {
-  Select,
-  SelectContent,
-  SelectGroup,
-  SelectItem,
-  SelectTrigger,
-  SelectValue,
-} from '@/lib/registry/default/ui/select'
-import { Input } from '@/lib/registry/default/ui/input'
-import {
-  Tooltip,
-  TooltipContent,
-  TooltipProvider,
-  TooltipTrigger,
-} from '@/lib/registry/default/ui/tooltip'
-import { Separator } from '@/lib/registry/default/ui/separator'
-import RadixIconsGithubLogo from '~icons/radix-icons/github-logo'
-import RiGoogleLine from '~icons/ri/google-line'
-
-const strictlyNecessarySwitch = ref<boolean>(true)
-const functionalCookiesSwitch = ref<boolean>(false)
-const performanceCookiesSwitch = ref<boolean>(false)
-const selectedArea = ref('Billing')
-const selectedSecurity = ref('Medium')
-const selectedMonth = ref<string>(months[0])
-const selectedYear = ref<string>(years[0])
-const selectedPayment = ref(payments[0])
-const goal = ref(350)
-
-function switchPayment(payment: any) {
-  selectedPayment.value = payment
-}
-
-const range = ref({
-  start: startOfToday(),
-  end: addDays(startOfToday(), 8),
-})
-</script>
-
-<template>
-  <div class="md:grids-col-2 grid md:gap-4 lg:grid-cols-10 xl:grid-cols-11 xl:gap-4">
-    <div class="space-y-4 lg:col-span-4 xl:col-span-6 xl:space-y-4">
-      <CardsStats />
-      <div class="grid gap-1 sm:grid-cols-[280px_1fr] md:hidden">
-        <CardsCalendar />
-        <div class="pt-3 sm:pl-2 sm:pt-0 xl:pl-4">
-          <CardsActivityGoal />
-        </div>
-        <div class="pt-3 sm:col-span-2 xl:pt-4">
-          <CardsMetric />
-        </div>
-      </div>
-      <div class="grid gap-4 md:grid-cols-2 lg:grid-cols-1 xl:grid-cols-2">
-        <div class="space-y-4 xl:space-y-4">
-          <CardsTeamMembers />
-          <CardsCookieSettings />
-          <CardsPaymentMethod />
-        </div>
-        <div class="space-y-4 xl:space-y-4">
-          <CardsChat />
-          <CardsCreateAccount />
-          <div class="hidden xl:block">
-            <CardsReportIssue />
-          </div>
-        </div>
-      </div>
-    </div>
-    <div class="space-y-4 lg:col-span-6 xl:col-span-5 xl:space-y-4">
-      <div class="hidden gap-1 sm:grid-cols-[280px_1fr] md:grid">
-        <CardsCalendar />
-        <div class="pt-3 sm:pl-2 sm:pt-0 xl:pl-3">
-          <CardsActivityGoal />
-        </div>
-        <div class="pt-3 sm:col-span-2 xl:pt-3">
-          <CardsMetric />
-        </div>
-      </div>
-      <div class="hidden md:block">
-        <CardsDataTable />
-      </div>
-      <CardsShare />
-      <div class="xl:hidden">
-        <CardsReportIssue />
-      </div>
-    </div>
-  </div>
-</template>
diff --git a/apps/www/src/lib/registry/registry.ts b/apps/www/src/lib/registry/registry.ts
index 2f0a7f02..3ffd3248 100644
--- a/apps/www/src/lib/registry/registry.ts
+++ b/apps/www/src/lib/registry/registry.ts
@@ -64,7 +64,7 @@ async function crawlExample(rootPath: string) {
       const [name] = dirent.name.split('.vue')
       const file_path = join('example', dirent.name)
       const { dependencies, registryDependencies }
-				= await getDependencies(join(rootPath, dirent.name))
+      = await getDependencies(join(dirent.path, dirent.name))
 
       exampleRegistry.push({
         name,
diff --git a/apps/www/src/public/registry/styles/default/menubar.json b/apps/www/src/public/registry/styles/default/menubar.json
index 3a37f6ab..b04470db 100644
--- a/apps/www/src/public/registry/styles/default/menubar.json
+++ b/apps/www/src/public/registry/styles/default/menubar.json
@@ -13,7 +13,7 @@
     },
     {
       "name": "MenubarCheckboxItem.vue",
-      "content": "<script setup lang=\"ts\">\nimport {\n  MenubarCheckboxItem,\n  type MenubarCheckboxItemEmits,\n  type MenubarCheckboxItemProps,\n  MenubarItemIndicator,\n} from 'radix-vue'\nimport { cn } from '@/lib/utils'\nimport RadixIconsCheck from '~icons/radix-icons/check'\n\nconst props = defineProps<MenubarCheckboxItemProps & { class?: string }>()\n\nconst emit = defineEmits<MenubarCheckboxItemEmits>()\n</script>\n\n<template>\n  <MenubarCheckboxItem\n    v-bind=\"props\"\n    :class=\"[\n      cn(\n        'relative flex cursor-default select-none items-center rounded-sm py-1.5 pl-8 pr-2 text-sm outline-none focus:bg-accent focus:text-accent-foreground data-[disabled]:pointer-events-none data-[disabled]:opacity-50',\n        props.class,\n      ),\n    ]\"\n    @update:checked=\"emit('update:checked', $event)\"\n    @select=\"emit('select', $event)\"\n  >\n    <MenubarItemIndicator\n      class=\"absolute left-2 flex h-3.5 w-3.5 items-center justify-center\"\n    >\n      <RadixIconsCheck class=\"w-4 h-4\" />\n    </MenubarItemIndicator>\n    <slot />\n  </MenubarCheckboxItem>\n</template>\n"
+      "content": "<script setup lang=\"ts\">\nimport {\n  MenubarCheckboxItem,\n  type MenubarCheckboxItemEmits,\n  type MenubarCheckboxItemProps,\n  MenubarItemIndicator,\n} from 'radix-vue'\nimport { Check } from 'lucide-vue-next'\nimport { cn } from '@/lib/utils'\n\nconst props = defineProps<MenubarCheckboxItemProps & { class?: string }>()\n\nconst emit = defineEmits<MenubarCheckboxItemEmits>()\n</script>\n\n<template>\n  <MenubarCheckboxItem\n    v-bind=\"props\"\n    :class=\"[\n      cn(\n        'relative flex cursor-default select-none items-center rounded-sm py-1.5 pl-8 pr-2 text-sm outline-none focus:bg-accent focus:text-accent-foreground data-[disabled]:pointer-events-none data-[disabled]:opacity-50',\n        props.class,\n      ),\n    ]\"\n    @update:checked=\"emit('update:checked', $event)\"\n    @select=\"emit('select', $event)\"\n  >\n    <MenubarItemIndicator\n      class=\"absolute left-2 flex h-3.5 w-3.5 items-center justify-center\"\n    >\n      <Check class=\"w-4 h-4\" />\n    </MenubarItemIndicator>\n    <slot />\n  </MenubarCheckboxItem>\n</template>\n"
     },
     {
       "name": "MenubarContent.vue",
@@ -41,7 +41,7 @@
     },
     {
       "name": "MenubarRadioItem.vue",
-      "content": "<script setup lang=\"ts\">\nimport {\n  MenubarItemIndicator,\n  MenubarRadioItem,\n  type MenubarRadioItemEmits,\n  type MenubarRadioItemProps,\n} from 'radix-vue'\nimport { cn } from '@/lib/utils'\nimport RiCheckboxBlankCircleFill from '~icons/ri/checkbox-blank-circle-fill'\n\nconst props = defineProps<MenubarRadioItemProps & { class?: string }>()\n\nconst emits = defineEmits<MenubarRadioItemEmits>()\n</script>\n\n<template>\n  <MenubarRadioItem\n    v-bind=\"props\"\n    :class=\"[\n      cn(\n        'relative flex cursor-default select-none items-center rounded-sm py-1.5 pl-8 pr-2 text-sm outline-none focus:bg-accent focus:text-accent-foreground data-[disabled]:pointer-events-none data-[disabled]:opacity-50',\n        props.class,\n      ),\n    ]\"\n    @select=\"emits('select', $event)\"\n  >\n    <MenubarItemIndicator\n      class=\"absolute left-2 flex h-3.5 w-3.5 items-center justify-center\"\n    >\n      <RiCheckboxBlankCircleFill class=\"h-2 w-2 fill-curren\" />\n    </MenubarItemIndicator>\n\n    <slot />\n  </MenubarRadioItem>\n</template>\n"
+      "content": "<script setup lang=\"ts\">\nimport {\n  MenubarItemIndicator,\n  MenubarRadioItem,\n  type MenubarRadioItemEmits,\n  type MenubarRadioItemProps,\n} from 'radix-vue'\nimport { Circle } from 'lucide-vue-next'\nimport { cn } from '@/lib/utils'\n\nconst props = defineProps<MenubarRadioItemProps & { class?: string }>()\n\nconst emits = defineEmits<MenubarRadioItemEmits>()\n</script>\n\n<template>\n  <MenubarRadioItem\n    v-bind=\"props\"\n    :class=\"[\n      cn(\n        'relative flex cursor-default select-none items-center rounded-sm py-1.5 pl-8 pr-2 text-sm outline-none focus:bg-accent focus:text-accent-foreground data-[disabled]:pointer-events-none data-[disabled]:opacity-50',\n        props.class,\n      ),\n    ]\"\n    @select=\"emits('select', $event)\"\n  >\n    <MenubarItemIndicator\n      class=\"absolute left-2 flex h-3.5 w-3.5 items-center justify-center\"\n    >\n      <Circle class=\"h-2 w-2 fill-curren\" />\n    </MenubarItemIndicator>\n\n    <slot />\n  </MenubarRadioItem>\n</template>\n"
     },
     {
       "name": "MenubarSeparator.vue",
diff --git a/apps/www/src/public/registry/styles/default/radio-group.json b/apps/www/src/public/registry/styles/default/radio-group.json
index e05dcd8c..6bdf20b7 100644
--- a/apps/www/src/public/registry/styles/default/radio-group.json
+++ b/apps/www/src/public/registry/styles/default/radio-group.json
@@ -13,7 +13,7 @@
     },
     {
       "name": "RadioGroupItem.vue",
-      "content": "<script setup lang=\"ts\">\nimport {\n  RadioGroupIndicator,\n  RadioGroupItem,\n  type RadioGroupItemProps,\n} from 'radix-vue'\nimport { cn } from '@/lib/utils'\nimport RiCheckboxBlankCircleFill from '~icons/ri/checkbox-blank-circle-fill'\n\nconst props = defineProps<RadioGroupItemProps & { class?: string }>()\n</script>\n\n<template>\n  <RadioGroupItem\n    v-bind=\"props\"\n    :class=\"\n      cn(\n        'aspect-square h-4 w-4 rounded-full cursor-pointer flex justify-center items-center border border-primary disabled:cursor-not-allowed disabled:opacity-50',\n        props.class,\n      )\n    \"\n  >\n    <RadioGroupIndicator\n      :class=\"cn('flex items-center justify-center', props.class)\"\n    >\n      <RiCheckboxBlankCircleFill class=\"w-2.5 h-2.5 text-foreground\" />\n    </RadioGroupIndicator>\n  </RadioGroupItem>\n</template>\n"
+      "content": "<script setup lang=\"ts\">\nimport {\n  RadioGroupIndicator,\n  RadioGroupItem,\n  type RadioGroupItemProps,\n} from 'radix-vue'\nimport { Circle } from 'lucide-vue-next'\nimport { cn } from '@/lib/utils'\n\nconst props = defineProps<RadioGroupItemProps & { class?: string }>()\n</script>\n\n<template>\n  <RadioGroupItem\n    v-bind=\"props\"\n    :class=\"\n      cn(\n        'aspect-square h-4 w-4 rounded-full cursor-pointer flex justify-center items-center border border-primary disabled:cursor-not-allowed disabled:opacity-50',\n        props.class,\n      )\n    \"\n  >\n    <RadioGroupIndicator\n      :class=\"cn('flex items-center justify-center', props.class)\"\n    >\n      <Circle class=\"w-2.5 h-2.5 text-foreground\" />\n    </RadioGroupIndicator>\n  </RadioGroupItem>\n</template>\n"
     },
     {
       "name": "index.ts",
diff --git a/apps/www/src/public/registry/styles/default/select.json b/apps/www/src/public/registry/styles/default/select.json
index 285f7f16..8cd6d903 100644
--- a/apps/www/src/public/registry/styles/default/select.json
+++ b/apps/www/src/public/registry/styles/default/select.json
@@ -21,7 +21,7 @@
     },
     {
       "name": "SelectItem.vue",
-      "content": "<script setup lang=\"ts\">\nimport {\n  SelectItem,\n  SelectItemIndicator,\n  type SelectItemProps,\n  SelectItemText,\n} from 'radix-vue'\nimport { cn } from '@/lib/utils'\nimport RadixIconsCheck from '~icons/radix-icons/check'\n\nconst props = defineProps<SelectItemProps & { class?: string }>()\n</script>\n\n<template>\n  <SelectItem\n    v-bind=\"props\"\n    :class=\"\n      cn(\n        'relative flex w-full cursor-default select-none items-center rounded-sm py-1.5 pl-8 pr-2 text-sm outline-none focus:bg-accent focus:text-accent-foreground data-[disabled]:pointer-events-none data-[disabled]:opacity-50',\n        props.class,\n      )\n    \"\n  >\n    <span class=\"absolute left-2 flex h-3.5 w-3.5 items-center justify-center\">\n      <SelectItemIndicator>\n        <RadixIconsCheck class=\"h-4 w-4\" />\n      </SelectItemIndicator>\n    </span>\n\n    <SelectItemText>\n      <slot />\n    </SelectItemText>\n  </SelectItem>\n</template>\n"
+      "content": "<script setup lang=\"ts\">\nimport {\n  SelectItem,\n  SelectItemIndicator,\n  type SelectItemProps,\n  SelectItemText,\n} from 'radix-vue'\nimport { Check } from 'lucide-vue-next'\nimport { cn } from '@/lib/utils'\n\nconst props = defineProps<SelectItemProps & { class?: string }>()\n</script>\n\n<template>\n  <SelectItem\n    v-bind=\"props\"\n    :class=\"\n      cn(\n        'relative flex w-full cursor-default select-none items-center rounded-sm py-1.5 pl-8 pr-2 text-sm outline-none focus:bg-accent focus:text-accent-foreground data-[disabled]:pointer-events-none data-[disabled]:opacity-50',\n        props.class,\n      )\n    \"\n  >\n    <span class=\"absolute left-2 flex h-3.5 w-3.5 items-center justify-center\">\n      <SelectItemIndicator>\n        <Check class=\"h-4 w-4\" />\n      </SelectItemIndicator>\n    </span>\n\n    <SelectItemText>\n      <slot />\n    </SelectItemText>\n  </SelectItem>\n</template>\n"
     },
     {
       "name": "SelectItemText.vue",
diff --git a/apps/www/src/public/registry/styles/default/textarea.json b/apps/www/src/public/registry/styles/default/textarea.json
index 7ceaf393..66db3556 100644
--- a/apps/www/src/public/registry/styles/default/textarea.json
+++ b/apps/www/src/public/registry/styles/default/textarea.json
@@ -7,7 +7,7 @@
   "files": [
     {
       "name": "Textarea.vue",
-      "content": "<script setup lang=\"ts\">\nimport { cn } from '@/lib/utils'\n</script>\n\n<template>\n  <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 ?? '')\" />\n</template>\n"
+      "content": "<script setup lang=\"ts\">\nimport { useVModel } from '@vueuse/core'\nimport { cn } from '@/lib/utils'\n\nconst props = defineProps<{\n  defaultValue?: string | number\n  modelValue?: string | number\n}>()\n\nconst emits = defineEmits<{\n  (e: 'update:modelValue', payload: string | number): void\n}>()\n\nconst modelValue = useVModel(props, 'modelValue', emits, {\n  passive: true,\n  defaultValue: props.defaultValue,\n})\n</script>\n\n<template>\n  <textarea v-model=\"modelValue\" :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 ?? '')\" />\n</template>\n"
     },
     {
       "name": "index.ts",
diff --git a/apps/www/src/public/registry/styles/new-york/accordion.json b/apps/www/src/public/registry/styles/new-york/accordion.json
index 2699f4a3..a9af530d 100644
--- a/apps/www/src/public/registry/styles/new-york/accordion.json
+++ b/apps/www/src/public/registry/styles/new-york/accordion.json
@@ -21,7 +21,7 @@
     },
     {
       "name": "AccordionTrigger.vue",
-      "content": "<script setup lang=\"ts\">\nimport {\n  AccordionHeader,\n  AccordionTrigger,\n  type AccordionTriggerProps,\n} from 'radix-vue'\nimport RadixIconsChevronDown from '~icons/radix-icons/chevron-down'\nimport { cn } from '@/lib/utils'\n\nconst props = defineProps<AccordionTriggerProps & { class?: string }>()\n</script>\n\n<template>\n  <AccordionHeader class=\"flex\" as=\"div\">\n    <AccordionTrigger\n      v-bind=\"props\"\n      :class=\"\n        cn(\n          'flex flex-1 items-center justify-between py-4 text-sm font-medium transition-all hover:underline [&[data-state=open]>svg]:rotate-180',\n          props.class,\n        )\n      \"\n    >\n      <slot />\n      <RadixIconsChevronDown\n        class=\"h-4 w-4 shrink-0 text-muted-foreground transition-transform duration-200\"\n      />\n    </AccordionTrigger>\n  </AccordionHeader>\n</template>\n"
+      "content": "<script setup lang=\"ts\">\nimport {\n  AccordionHeader,\n  AccordionTrigger,\n  type AccordionTriggerProps,\n} from 'radix-vue'\nimport { ChevronDownIcon } from '@radix-icons/vue'\nimport { cn } from '@/lib/utils'\n\nconst props = defineProps<AccordionTriggerProps & { class?: string }>()\n</script>\n\n<template>\n  <AccordionHeader class=\"flex\" as=\"div\">\n    <AccordionTrigger\n      v-bind=\"props\"\n      :class=\"\n        cn(\n          'flex flex-1 items-center justify-between py-4 text-sm font-medium transition-all hover:underline [&[data-state=open]>svg]:rotate-180',\n          props.class,\n        )\n      \"\n    >\n      <slot />\n      <ChevronDownIcon\n        class=\"h-4 w-4 shrink-0 text-muted-foreground transition-transform duration-200\"\n      />\n    </AccordionTrigger>\n  </AccordionHeader>\n</template>\n"
     },
     {
       "name": "index.ts",
diff --git a/apps/www/src/public/registry/styles/new-york/checkbox.json b/apps/www/src/public/registry/styles/new-york/checkbox.json
index 6c80566e..f07667fe 100644
--- a/apps/www/src/public/registry/styles/new-york/checkbox.json
+++ b/apps/www/src/public/registry/styles/new-york/checkbox.json
@@ -9,7 +9,7 @@
   "files": [
     {
       "name": "Checkbox.vue",
-      "content": "<script setup lang=\"ts\">\nimport type { CheckboxRootEmits, CheckboxRootProps } from 'radix-vue'\nimport { CheckboxIndicator, CheckboxRoot } from 'radix-vue'\nimport RadixIconsCheck from '~icons/radix-icons/check'\nimport { cn, useEmitAsProps } from '@/lib/utils'\n\nconst props = defineProps<CheckboxRootProps>()\nconst emits = defineEmits<CheckboxRootEmits>()\n\nconst emitsAsProps = useEmitAsProps(emits)\n</script>\n\n<template>\n  <CheckboxRoot\n    v-bind=\"{ ...props, ...emitsAsProps }\"\n    :class=\"\n      cn('peer h-4 w-4 shrink-0 rounded-sm border border-primary ring-offset-background focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:cursor-not-allowed disabled:opacity-50 data-[state=checked]:bg-primary data-[state=checked]:text-primary-foreground',\n         $attrs.class ?? '')\"\n  >\n    <CheckboxIndicator class=\"flex items-center justify-center text-current\">\n      <RadixIconsCheck class=\"h-4 w-4\" />\n    </CheckboxIndicator>\n  </CheckboxRoot>\n</template>\n"
+      "content": "<script setup lang=\"ts\">\nimport type { CheckboxRootEmits, CheckboxRootProps } from 'radix-vue'\nimport { CheckboxIndicator, CheckboxRoot } from 'radix-vue'\nimport { CheckIcon } from '@radix-icons/vue'\nimport { cn, useEmitAsProps } from '@/lib/utils'\n\nconst props = defineProps<CheckboxRootProps>()\nconst emits = defineEmits<CheckboxRootEmits>()\n\nconst emitsAsProps = useEmitAsProps(emits)\n</script>\n\n<template>\n  <CheckboxRoot\n    v-bind=\"{ ...props, ...emitsAsProps }\"\n    :class=\"\n      cn('peer h-4 w-4 shrink-0 rounded-sm border border-primary ring-offset-background focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:cursor-not-allowed disabled:opacity-50 data-[state=checked]:bg-primary data-[state=checked]:text-primary-foreground',\n         $attrs.class ?? '')\"\n  >\n    <CheckboxIndicator class=\"flex items-center justify-center text-current\">\n      <CheckIcon class=\"h-4 w-4\" />\n    </CheckboxIndicator>\n  </CheckboxRoot>\n</template>\n"
     },
     {
       "name": "index.ts",
diff --git a/apps/www/src/public/registry/styles/new-york/context-menu.json b/apps/www/src/public/registry/styles/new-york/context-menu.json
index bb1bd4ef..72d83033 100644
--- a/apps/www/src/public/registry/styles/new-york/context-menu.json
+++ b/apps/www/src/public/registry/styles/new-york/context-menu.json
@@ -13,7 +13,7 @@
     },
     {
       "name": "ContextMenuCheckboxItem.vue",
-      "content": "<script setup lang=\"ts\">\nimport {\n  ContextMenuCheckboxItem,\n  type ContextMenuCheckboxItemEmits,\n  type ContextMenuCheckboxItemProps,\n  ContextMenuItemIndicator,\n} from 'radix-vue'\nimport RadixIconsCheck from '~icons/radix-icons/check'\nimport { cn, useEmitAsProps } from '@/lib/utils'\n\nconst props = defineProps<ContextMenuCheckboxItemProps & { class?: string }>()\nconst emits = defineEmits<ContextMenuCheckboxItemEmits>()\n</script>\n\n<template>\n  <ContextMenuCheckboxItem\n    v-bind=\"{ ...props, ...useEmitAsProps(emits) }\"\n    :class=\"[\n      cn(\n        'relative flex cursor-default select-none items-center rounded-sm py-1.5 pl-8 pr-2 text-sm outline-none focus:bg-accent focus:text-accent-foreground data-[disabled]:pointer-events-none data-[disabled]:opacity-50',\n        props.class,\n      ),\n    ]\"\n  >\n    <span class=\"absolute left-2 flex h-3.5 w-3.5 items-center justify-center\">\n      <ContextMenuItemIndicator\n        class=\"absolute left-1.5 inline-flex w-4 h-4 items-center justify-center\"\n      >\n        <RadixIconsCheck class=\"h-4 w-4\" />\n      </ContextMenuItemIndicator>\n    </span>\n    <slot />\n  </ContextMenuCheckboxItem>\n</template>\n"
+      "content": "<script setup lang=\"ts\">\nimport {\n  ContextMenuCheckboxItem,\n  type ContextMenuCheckboxItemEmits,\n  type ContextMenuCheckboxItemProps,\n  ContextMenuItemIndicator,\n} from 'radix-vue'\nimport { CheckIcon } from '@radix-icons/vue'\nimport { cn, useEmitAsProps } from '@/lib/utils'\n\nconst props = defineProps<ContextMenuCheckboxItemProps & { class?: string }>()\nconst emits = defineEmits<ContextMenuCheckboxItemEmits>()\n</script>\n\n<template>\n  <ContextMenuCheckboxItem\n    v-bind=\"{ ...props, ...useEmitAsProps(emits) }\"\n    :class=\"[\n      cn(\n        'relative flex cursor-default select-none items-center rounded-sm py-1.5 pl-8 pr-2 text-sm outline-none focus:bg-accent focus:text-accent-foreground data-[disabled]:pointer-events-none data-[disabled]:opacity-50',\n        props.class,\n      ),\n    ]\"\n  >\n    <span class=\"absolute left-2 flex h-3.5 w-3.5 items-center justify-center\">\n      <ContextMenuItemIndicator\n        class=\"absolute left-1.5 inline-flex w-4 h-4 items-center justify-center\"\n      >\n        <CheckIcon class=\"h-4 w-4\" />\n      </ContextMenuItemIndicator>\n    </span>\n    <slot />\n  </ContextMenuCheckboxItem>\n</template>\n"
     },
     {
       "name": "ContextMenuContent.vue",
@@ -41,7 +41,7 @@
     },
     {
       "name": "ContextMenuRadioItem.vue",
-      "content": "<script setup lang=\"ts\">\nimport {\n  ContextMenuItemIndicator,\n  ContextMenuRadioItem,\n  type ContextMenuRadioItemEmits,\n  type ContextMenuRadioItemProps,\n} from 'radix-vue'\nimport RadixIconsDotFilled from '~icons/radix-icons/dot-filled'\nimport { cn, useEmitAsProps } from '@/lib/utils'\n\nconst props = defineProps<ContextMenuRadioItemProps & { class?: string }>()\nconst emits = defineEmits<ContextMenuRadioItemEmits>()\n</script>\n\n<template>\n  <ContextMenuRadioItem\n    v-bind=\"{ ...props, ...useEmitAsProps(emits) }\"\n    :class=\"[\n      cn(\n        'relative flex cursor-default select-none items-center rounded-sm py-1.5 pl-8 pr-2 text-sm outline-none focus:bg-accent focus:text-accent-foreground data-[disabled]:pointer-events-none data-[disabled]:opacity-50',\n        props.class,\n      ),\n    ]\"\n  >\n    <span class=\"absolute left-2 flex h-3.5 w-3.5 items-center justify-center\">\n      <ContextMenuItemIndicator>\n        <RadixIconsDotFilled class=\"h-4 w-4 fill-current\" />\n      </ContextMenuItemIndicator>\n    </span>\n    <slot />\n  </ContextMenuRadioItem>\n</template>\n"
+      "content": "<script setup lang=\"ts\">\nimport {\n  ContextMenuItemIndicator,\n  ContextMenuRadioItem,\n  type ContextMenuRadioItemEmits,\n  type ContextMenuRadioItemProps,\n} from 'radix-vue'\nimport { DotFilledIcon } from '@radix-icons/vue'\nimport { cn, useEmitAsProps } from '@/lib/utils'\n\nconst props = defineProps<ContextMenuRadioItemProps & { class?: string }>()\nconst emits = defineEmits<ContextMenuRadioItemEmits>()\n</script>\n\n<template>\n  <ContextMenuRadioItem\n    v-bind=\"{ ...props, ...useEmitAsProps(emits) }\"\n    :class=\"[\n      cn(\n        'relative flex cursor-default select-none items-center rounded-sm py-1.5 pl-8 pr-2 text-sm outline-none focus:bg-accent focus:text-accent-foreground data-[disabled]:pointer-events-none data-[disabled]:opacity-50',\n        props.class,\n      ),\n    ]\"\n  >\n    <span class=\"absolute left-2 flex h-3.5 w-3.5 items-center justify-center\">\n      <ContextMenuItemIndicator>\n        <DotFilledIcon class=\"h-4 w-4 fill-current\" />\n      </ContextMenuItemIndicator>\n    </span>\n    <slot />\n  </ContextMenuRadioItem>\n</template>\n"
     },
     {
       "name": "ContextMenuSeparator.vue",
diff --git a/apps/www/src/public/registry/styles/new-york/dialog.json b/apps/www/src/public/registry/styles/new-york/dialog.json
index 7994d51f..1a4df169 100644
--- a/apps/www/src/public/registry/styles/new-york/dialog.json
+++ b/apps/www/src/public/registry/styles/new-york/dialog.json
@@ -13,7 +13,7 @@
     },
     {
       "name": "DialogContent.vue",
-      "content": "<script setup lang=\"ts\">\nimport {\n  DialogClose,\n  DialogContent,\n  type DialogContentEmits,\n  type DialogContentProps,\n  DialogOverlay,\n  DialogPortal,\n} from 'radix-vue'\nimport RadixIconsCross2 from '~icons/radix-icons/cross-2'\nimport { cn, useEmitAsProps } from '@/lib/utils'\n\nconst props = defineProps<DialogContentProps & { class?: string }>()\nconst emits = defineEmits<DialogContentEmits>()\n\nconst emitsAsProps = useEmitAsProps(emits)\n</script>\n\n<template>\n  <DialogPortal>\n    <DialogOverlay\n      class=\"fixed inset-0 z-50 bg-background/80 backdrop-blur-sm data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0\"\n    />\n    <DialogContent\n      :class=\"\n        cn(\n          'fixed left-[50%] top-[50%] z-50 grid w-full max-w-lg translate-x-[-50%] translate-y-[-50%] gap-4 border border-border bg-background p-6 shadow-lg duration-200 data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[state=closed]:slide-out-to-left-1/2 data-[state=closed]:slide-out-to-top-[48%] data-[state=open]:slide-in-from-left-1/2 data-[state=open]:slide-in-from-top-[48%] sm:rounded-lg md:w-full',\n          props.class,\n        )\n      \"\n      v-bind=\"{ ...props, ...emitsAsProps }\"\n    >\n      <slot />\n\n      <DialogClose\n        class=\"absolute top-4 right-4 p-0.5 transition-colors rounded-md hover:bg-secondary\"\n      >\n        <RadixIconsCross2 class=\"w-4 h-4\" />\n        <span class=\"sr-only\">Close</span>\n      </DialogClose>\n    </DialogContent>\n  </DialogPortal>\n</template>\n"
+      "content": "<script setup lang=\"ts\">\nimport {\n  DialogClose,\n  DialogContent,\n  type DialogContentEmits,\n  type DialogContentProps,\n  DialogOverlay,\n  DialogPortal,\n} from 'radix-vue'\nimport { Cross2Icon } from '@radix-icons/vue'\nimport { cn, useEmitAsProps } from '@/lib/utils'\n\nconst props = defineProps<DialogContentProps & { class?: string }>()\nconst emits = defineEmits<DialogContentEmits>()\n\nconst emitsAsProps = useEmitAsProps(emits)\n</script>\n\n<template>\n  <DialogPortal>\n    <DialogOverlay\n      class=\"fixed inset-0 z-50 bg-background/80 backdrop-blur-sm data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0\"\n    />\n    <DialogContent\n      :class=\"\n        cn(\n          'fixed left-[50%] top-[50%] z-50 grid w-full max-w-lg translate-x-[-50%] translate-y-[-50%] gap-4 border border-border bg-background p-6 shadow-lg duration-200 data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[state=closed]:slide-out-to-left-1/2 data-[state=closed]:slide-out-to-top-[48%] data-[state=open]:slide-in-from-left-1/2 data-[state=open]:slide-in-from-top-[48%] sm:rounded-lg md:w-full',\n          props.class,\n        )\n      \"\n      v-bind=\"{ ...props, ...emitsAsProps }\"\n    >\n      <slot />\n\n      <DialogClose\n        class=\"absolute top-4 right-4 p-0.5 transition-colors rounded-md hover:bg-secondary\"\n      >\n        <Cross2Icon class=\"w-4 h-4\" />\n        <span class=\"sr-only\">Close</span>\n      </DialogClose>\n    </DialogContent>\n  </DialogPortal>\n</template>\n"
     },
     {
       "name": "DialogDescription.vue",
diff --git a/apps/www/src/public/registry/styles/new-york/dropdown-menu.json b/apps/www/src/public/registry/styles/new-york/dropdown-menu.json
index 6fb694ee..8e18caf3 100644
--- a/apps/www/src/public/registry/styles/new-york/dropdown-menu.json
+++ b/apps/www/src/public/registry/styles/new-york/dropdown-menu.json
@@ -13,7 +13,7 @@
     },
     {
       "name": "DropdownMenuCheckboxItem.vue",
-      "content": "<script setup lang=\"ts\">\nimport {\n  DropdownMenuCheckboxItem,\n  type DropdownMenuCheckboxItemEmits,\n  type DropdownMenuCheckboxItemProps,\n  DropdownMenuItemIndicator,\n} from 'radix-vue'\nimport RadixIconsCheck from '~icons/radix-icons/check'\nimport { cn, useEmitAsProps } from '@/lib/utils'\n\nconst props = defineProps<DropdownMenuCheckboxItemProps & { class?: string }>()\nconst emits = defineEmits<DropdownMenuCheckboxItemEmits>()\n</script>\n\n<template>\n  <DropdownMenuCheckboxItem\n    v-bind=\"{ ...props, ...useEmitAsProps(emits) }\"\n    :class=\" cn(\n      'relative flex cursor-default select-none items-center rounded-sm py-1.5 pl-8 pr-2 text-sm outline-none transition-colors focus:bg-accent focus:text-accent-foreground data-[disabled]:pointer-events-none data-[disabled]:opacity-50',\n      props.class,\n    )\"\n  >\n    <span class=\"absolute left-2 flex h-3.5 w-3.5 items-center justify-center\">\n      <DropdownMenuItemIndicator>\n        <RadixIconsCheck class=\"w-4 h-4\" />\n      </DropdownMenuItemIndicator>\n    </span>\n    <slot />\n  </DropdownMenuCheckboxItem>\n</template>\n"
+      "content": "<script setup lang=\"ts\">\nimport {\n  DropdownMenuCheckboxItem,\n  type DropdownMenuCheckboxItemEmits,\n  type DropdownMenuCheckboxItemProps,\n  DropdownMenuItemIndicator,\n} from 'radix-vue'\nimport { CheckIcon } from '@radix-icons/vue'\nimport { cn, useEmitAsProps } from '@/lib/utils'\n\nconst props = defineProps<DropdownMenuCheckboxItemProps & { class?: string }>()\nconst emits = defineEmits<DropdownMenuCheckboxItemEmits>()\n</script>\n\n<template>\n  <DropdownMenuCheckboxItem\n    v-bind=\"{ ...props, ...useEmitAsProps(emits) }\"\n    :class=\" cn(\n      'relative flex cursor-default select-none items-center rounded-sm py-1.5 pl-8 pr-2 text-sm outline-none transition-colors focus:bg-accent focus:text-accent-foreground data-[disabled]:pointer-events-none data-[disabled]:opacity-50',\n      props.class,\n    )\"\n  >\n    <span class=\"absolute left-2 flex h-3.5 w-3.5 items-center justify-center\">\n      <DropdownMenuItemIndicator>\n        <CheckIcon class=\"w-4 h-4\" />\n      </DropdownMenuItemIndicator>\n    </span>\n    <slot />\n  </DropdownMenuCheckboxItem>\n</template>\n"
     },
     {
       "name": "DropdownMenuContent.vue",
@@ -37,7 +37,7 @@
     },
     {
       "name": "DropdownMenuRadioItem.vue",
-      "content": "<script setup lang=\"ts\">\nimport {\n  DropdownMenuItemIndicator,\n  DropdownMenuRadioItem,\n  type DropdownMenuRadioItemEmits,\n  type DropdownMenuRadioItemProps,\n} from 'radix-vue'\nimport RadixIconsDotFilled from '~icons/radix-icons/dot-filled'\nimport { cn, useEmitAsProps } from '@/lib/utils'\n\nconst props = defineProps<DropdownMenuRadioItemProps & { class?: string }>()\n\nconst emits = defineEmits<DropdownMenuRadioItemEmits>()\n</script>\n\n<template>\n  <DropdownMenuRadioItem\n    v-bind=\"{ ...props, ...useEmitAsProps(emits) }\"\n    :class=\"cn(\n      'flex relative items-center rounded-md transition-colors data-[disabled]:opacity-50 data-[disabled]:pointer-events-none data-[highlighted]:bg-outline-hover pl-7 py-1.5 text-sm outline-none select-none cursor-default',\n      props.class,\n    )\"\n  >\n    <span class=\"absolute left-2 flex h-3.5 w-3.5 items-center justify-center\">\n\n      <DropdownMenuItemIndicator>\n        <RadixIconsDotFilled class=\"h-4 w-4 fill-current\" />\n      </DropdownMenuItemIndicator>\n    </span>\n    <slot />\n  </DropdownMenuRadioItem>\n</template>\n"
+      "content": "<script setup lang=\"ts\">\nimport {\n  DropdownMenuItemIndicator,\n  DropdownMenuRadioItem,\n  type DropdownMenuRadioItemEmits,\n  type DropdownMenuRadioItemProps,\n} from 'radix-vue'\nimport { DotFilledIcon } from '@radix-icons/vue'\nimport { cn, useEmitAsProps } from '@/lib/utils'\n\nconst props = defineProps<DropdownMenuRadioItemProps & { class?: string }>()\n\nconst emits = defineEmits<DropdownMenuRadioItemEmits>()\n</script>\n\n<template>\n  <DropdownMenuRadioItem\n    v-bind=\"{ ...props, ...useEmitAsProps(emits) }\"\n    :class=\"cn(\n      'flex relative items-center rounded-md transition-colors data-[disabled]:opacity-50 data-[disabled]:pointer-events-none data-[highlighted]:bg-outline-hover pl-7 py-1.5 text-sm outline-none select-none cursor-default',\n      props.class,\n    )\"\n  >\n    <span class=\"absolute left-2 flex h-3.5 w-3.5 items-center justify-center\">\n\n      <DropdownMenuItemIndicator>\n        <DotFilledIcon class=\"h-4 w-4 fill-current\" />\n      </DropdownMenuItemIndicator>\n    </span>\n    <slot />\n  </DropdownMenuRadioItem>\n</template>\n"
     },
     {
       "name": "DropdownMenuSeparator.vue",
@@ -57,7 +57,7 @@
     },
     {
       "name": "DropdownMenuSubTrigger.vue",
-      "content": "<script setup lang=\"ts\">\nimport {\n  DropdownMenuSubTrigger,\n  type DropdownMenuSubTriggerProps,\n} from 'radix-vue'\nimport RadixIconsChevronRight from '~icons/radix-icons/chevron-right'\nimport { cn } from '@/lib/utils'\n\nconst props = defineProps<DropdownMenuSubTriggerProps & { class?: string }>()\n</script>\n\n<template>\n  <DropdownMenuSubTrigger\n    v-bind=\"props\"\n    :class=\"[\n      cn(\n        'flex cursor-default select-none items-center rounded-sm px-2 py-1.5 text-sm outline-none focus:bg-accent data-[state=open]:bg-accent',\n        props.class,\n      ),\n    ]\"\n  >\n    <slot />\n    <RadixIconsChevronRight class=\"ml-auto h-4 w-4\" />\n  </DropdownMenuSubTrigger>\n</template>\n"
+      "content": "<script setup lang=\"ts\">\nimport {\n  DropdownMenuSubTrigger,\n  type DropdownMenuSubTriggerProps,\n} from 'radix-vue'\nimport { ChevronRightIcon } from '@radix-icons/vue'\nimport { cn } from '@/lib/utils'\n\nconst props = defineProps<DropdownMenuSubTriggerProps & { class?: string }>()\n</script>\n\n<template>\n  <DropdownMenuSubTrigger\n    v-bind=\"props\"\n    :class=\"[\n      cn(\n        'flex cursor-default select-none items-center rounded-sm px-2 py-1.5 text-sm outline-none focus:bg-accent data-[state=open]:bg-accent',\n        props.class,\n      ),\n    ]\"\n  >\n    <slot />\n    <ChevronRightIcon class=\"ml-auto h-4 w-4\" />\n  </DropdownMenuSubTrigger>\n</template>\n"
     },
     {
       "name": "DropdownMenuTrigger.vue",
diff --git a/apps/www/src/public/registry/styles/new-york/menubar.json b/apps/www/src/public/registry/styles/new-york/menubar.json
index 71129d6d..9b15b69f 100644
--- a/apps/www/src/public/registry/styles/new-york/menubar.json
+++ b/apps/www/src/public/registry/styles/new-york/menubar.json
@@ -13,7 +13,7 @@
     },
     {
       "name": "MenubarCheckboxItem.vue",
-      "content": "<script setup lang=\"ts\">\nimport {\n  MenubarCheckboxItem,\n  type MenubarCheckboxItemEmits,\n  type MenubarCheckboxItemProps,\n  MenubarItemIndicator,\n} from 'radix-vue'\nimport { cn } from '@/lib/utils'\nimport RadixIconsCheck from '~icons/radix-icons/check'\n\nconst props = defineProps<MenubarCheckboxItemProps & { class?: string }>()\n\nconst emit = defineEmits<MenubarCheckboxItemEmits>()\n</script>\n\n<template>\n  <MenubarCheckboxItem\n    v-bind=\"props\"\n    :class=\"[\n      cn(\n        'relative flex cursor-default select-none items-center rounded-sm py-1.5 pl-8 pr-2 text-sm outline-none focus:bg-accent focus:text-accent-foreground data-[disabled]:pointer-events-none data-[disabled]:opacity-50',\n        props.class,\n      ),\n    ]\"\n    @update:checked=\"emit('update:checked', $event)\"\n    @select=\"emit('select', $event)\"\n  >\n    <MenubarItemIndicator\n      class=\"absolute left-2 flex h-3.5 w-3.5 items-center justify-center\"\n    >\n      <RadixIconsCheck class=\"w-4 h-4\" />\n    </MenubarItemIndicator>\n    <slot />\n  </MenubarCheckboxItem>\n</template>\n"
+      "content": "<script setup lang=\"ts\">\nimport {\n  MenubarCheckboxItem,\n  type MenubarCheckboxItemEmits,\n  type MenubarCheckboxItemProps,\n  MenubarItemIndicator,\n} from 'radix-vue'\nimport { CheckIcon } from '@radix-icons/vue'\nimport { cn } from '@/lib/utils'\n\nconst props = defineProps<MenubarCheckboxItemProps & { class?: string }>()\n\nconst emit = defineEmits<MenubarCheckboxItemEmits>()\n</script>\n\n<template>\n  <MenubarCheckboxItem\n    v-bind=\"props\"\n    :class=\"[\n      cn(\n        'relative flex cursor-default select-none items-center rounded-sm py-1.5 pl-8 pr-2 text-sm outline-none focus:bg-accent focus:text-accent-foreground data-[disabled]:pointer-events-none data-[disabled]:opacity-50',\n        props.class,\n      ),\n    ]\"\n    @update:checked=\"emit('update:checked', $event)\"\n    @select=\"emit('select', $event)\"\n  >\n    <MenubarItemIndicator\n      class=\"absolute left-2 flex h-3.5 w-3.5 items-center justify-center\"\n    >\n      <CheckIcon class=\"w-4 h-4\" />\n    </MenubarItemIndicator>\n    <slot />\n  </MenubarCheckboxItem>\n</template>\n"
     },
     {
       "name": "MenubarContent.vue",
@@ -41,7 +41,7 @@
     },
     {
       "name": "MenubarRadioItem.vue",
-      "content": "<script setup lang=\"ts\">\nimport {\n  MenubarItemIndicator,\n  MenubarRadioItem,\n  type MenubarRadioItemEmits,\n  type MenubarRadioItemProps,\n} from 'radix-vue'\nimport { cn } from '@/lib/utils'\nimport RadixIconsDotFilled from '~icons/radix-icons/dot-filled'\n\nconst props = defineProps<MenubarRadioItemProps & { class?: string }>()\n\nconst emits = defineEmits<MenubarRadioItemEmits>()\n</script>\n\n<template>\n  <MenubarRadioItem\n    v-bind=\"props\"\n    :class=\"[\n      cn(\n        'relative flex cursor-default select-none items-center rounded-sm py-1.5 pl-8 pr-2 text-sm outline-none focus:bg-accent focus:text-accent-foreground data-[disabled]:pointer-events-none data-[disabled]:opacity-50',\n        props.class,\n      ),\n    ]\"\n    @select=\"emits('select', $event)\"\n  >\n    <MenubarItemIndicator\n      class=\"absolute left-2 flex h-3.5 w-3.5 items-center justify-center\"\n    >\n      <RadixIconsDotFilled class=\"h-4 w-4 fill-current\" />\n    </MenubarItemIndicator>\n\n    <slot />\n  </MenubarRadioItem>\n</template>\n"
+      "content": "<script setup lang=\"ts\">\nimport {\n  MenubarItemIndicator,\n  MenubarRadioItem,\n  type MenubarRadioItemEmits,\n  type MenubarRadioItemProps,\n} from 'radix-vue'\nimport { DotFilledIcon } from '@radix-icons/vue'\nimport { cn } from '@/lib/utils'\n\nconst props = defineProps<MenubarRadioItemProps & { class?: string }>()\n\nconst emits = defineEmits<MenubarRadioItemEmits>()\n</script>\n\n<template>\n  <MenubarRadioItem\n    v-bind=\"props\"\n    :class=\"[\n      cn(\n        'relative flex cursor-default select-none items-center rounded-sm py-1.5 pl-8 pr-2 text-sm outline-none focus:bg-accent focus:text-accent-foreground data-[disabled]:pointer-events-none data-[disabled]:opacity-50',\n        props.class,\n      ),\n    ]\"\n    @select=\"emits('select', $event)\"\n  >\n    <MenubarItemIndicator\n      class=\"absolute left-2 flex h-3.5 w-3.5 items-center justify-center\"\n    >\n      <DotFilledIcon class=\"h-4 w-4 fill-current\" />\n    </MenubarItemIndicator>\n\n    <slot />\n  </MenubarRadioItem>\n</template>\n"
     },
     {
       "name": "MenubarSeparator.vue",
diff --git a/apps/www/src/public/registry/styles/new-york/navigation-menu.json b/apps/www/src/public/registry/styles/new-york/navigation-menu.json
index cd3f0f83..5fe38445 100644
--- a/apps/www/src/public/registry/styles/new-york/navigation-menu.json
+++ b/apps/www/src/public/registry/styles/new-york/navigation-menu.json
@@ -33,7 +33,7 @@
     },
     {
       "name": "NavigationMenuTrigger.vue",
-      "content": "<script setup lang=\"ts\">\nimport {\n  NavigationMenuTrigger,\n  type NavigationMenuTriggerProps,\n} from 'radix-vue'\nimport { navigationMenuTriggerStyle } from '.'\nimport RadixIconsChevronDown from '~icons/radix-icons/chevron-down'\nimport { cn } from '@/lib/utils'\n\nconst props = defineProps<NavigationMenuTriggerProps & { class?: string }>()\n</script>\n\n<template>\n  <NavigationMenuTrigger\n    :class=\"cn(navigationMenuTriggerStyle(), 'group', props.class)\"\n    v-bind=\"props\"\n  >\n    <slot />\n    <RadixIconsChevronDown\n      class=\"relative top-[1px] ml-1 h-3 w-3 transition duration-200 group-data-[state=open]:rotate-180\"\n      aria-hidden=\"true\"\n    />\n  </NavigationMenuTrigger>\n</template>\n"
+      "content": "<script setup lang=\"ts\">\nimport {\n  NavigationMenuTrigger,\n  type NavigationMenuTriggerProps,\n} from 'radix-vue'\nimport { ChevronDownIcon } from '@radix-icons/vue'\nimport { navigationMenuTriggerStyle } from '.'\nimport { cn } from '@/lib/utils'\n\nconst props = defineProps<NavigationMenuTriggerProps & { class?: string }>()\n</script>\n\n<template>\n  <NavigationMenuTrigger\n    :class=\"cn(navigationMenuTriggerStyle(), 'group', props.class)\"\n    v-bind=\"props\"\n  >\n    <slot />\n    <ChevronDownIcon\n      class=\"relative top-[1px] ml-1 h-3 w-3 transition duration-200 group-data-[state=open]:rotate-180\"\n      aria-hidden=\"true\"\n    />\n  </NavigationMenuTrigger>\n</template>\n"
     },
     {
       "name": "NavigationMenuViewport.vue",
diff --git a/apps/www/src/public/registry/styles/new-york/radio-group.json b/apps/www/src/public/registry/styles/new-york/radio-group.json
index 0dbb6205..5f648bab 100644
--- a/apps/www/src/public/registry/styles/new-york/radio-group.json
+++ b/apps/www/src/public/registry/styles/new-york/radio-group.json
@@ -13,7 +13,7 @@
     },
     {
       "name": "RadioGroupItem.vue",
-      "content": "<script setup lang=\"ts\">\nimport {\n  RadioGroupIndicator,\n  RadioGroupItem,\n  type RadioGroupItemProps,\n} from 'radix-vue'\nimport { cn } from '@/lib/utils'\nimport RadixIconsCheck from '~icons/radix-icons/check'\n\nconst props = defineProps<RadioGroupItemProps & { class?: string }>()\n</script>\n\n<template>\n  <RadioGroupItem\n    v-bind=\"props\"\n    :class=\"\n      cn(\n        'aspect-square h-4 w-4 rounded-full border border-primary text-primary shadow focus:outline-none focus-visible:ring-1 focus-visible:ring-ring disabled:cursor-not-allowed disabled:opacity-50',\n        props.class,\n      )\n    \"\n  >\n    <RadioGroupIndicator\n      :class=\"cn('flex items-center justify-center', props.class)\"\n    >\n      <RadixIconsCheck class=\"h-3.5 w-3.5 fill-primary\" />\n    </RadioGroupIndicator>\n  </RadioGroupItem>\n</template>\n"
+      "content": "<script setup lang=\"ts\">\nimport {\n  RadioGroupIndicator,\n  RadioGroupItem,\n  type RadioGroupItemProps,\n} from 'radix-vue'\nimport { CheckIcon } from '@radix-icons/vue'\nimport { cn } from '@/lib/utils'\n\nconst props = defineProps<RadioGroupItemProps & { class?: string }>()\n</script>\n\n<template>\n  <RadioGroupItem\n    v-bind=\"props\"\n    :class=\"\n      cn(\n        'aspect-square h-4 w-4 rounded-full border border-primary text-primary shadow focus:outline-none focus-visible:ring-1 focus-visible:ring-ring disabled:cursor-not-allowed disabled:opacity-50',\n        props.class,\n      )\n    \"\n  >\n    <RadioGroupIndicator\n      :class=\"cn('flex items-center justify-center', props.class)\"\n    >\n      <CheckIcon class=\"h-3.5 w-3.5 fill-primary\" />\n    </RadioGroupIndicator>\n  </RadioGroupItem>\n</template>\n"
     },
     {
       "name": "index.ts",
diff --git a/apps/www/src/public/registry/styles/new-york/select.json b/apps/www/src/public/registry/styles/new-york/select.json
index 35d5ee2e..b5c6b691 100644
--- a/apps/www/src/public/registry/styles/new-york/select.json
+++ b/apps/www/src/public/registry/styles/new-york/select.json
@@ -21,7 +21,7 @@
     },
     {
       "name": "SelectItem.vue",
-      "content": "<script setup lang=\"ts\">\nimport {\n  SelectItem,\n  SelectItemIndicator,\n  type SelectItemProps,\n  SelectItemText,\n} from 'radix-vue'\nimport { cn } from '@/lib/utils'\nimport RadixIconsCheck from '~icons/radix-icons/check'\n\nconst props = defineProps<SelectItemProps & { class?: string }>()\n</script>\n\n<template>\n  <SelectItem\n    v-bind=\"props\"\n    :class=\"\n      cn(\n        'relative flex w-full cursor-default select-none items-center rounded-sm py-1.5 pl-8 pr-2 text-sm outline-none focus:bg-accent focus:text-accent-foreground data-[disabled]:pointer-events-none data-[disabled]:opacity-50',\n        props.class,\n      )\n    \"\n  >\n    <span class=\"absolute left-2 flex h-3.5 w-3.5 items-center justify-center\">\n      <SelectItemIndicator>\n        <RadixIconsCheck class=\"h-4 w-4\" />\n      </SelectItemIndicator>\n    </span>\n\n    <SelectItemText>\n      <slot />\n    </SelectItemText>\n  </SelectItem>\n</template>\n"
+      "content": "<script setup lang=\"ts\">\nimport {\n  SelectItem,\n  SelectItemIndicator,\n  type SelectItemProps,\n  SelectItemText,\n} from 'radix-vue'\nimport { CheckIcon } from '@radix-icons/vue'\nimport { cn } from '@/lib/utils'\n\nconst props = defineProps<SelectItemProps & { class?: string }>()\n</script>\n\n<template>\n  <SelectItem\n    v-bind=\"props\"\n    :class=\"\n      cn(\n        'relative flex w-full cursor-default select-none items-center rounded-sm py-1.5 pl-8 pr-2 text-sm outline-none focus:bg-accent focus:text-accent-foreground data-[disabled]:pointer-events-none data-[disabled]:opacity-50',\n        props.class,\n      )\n    \"\n  >\n    <span class=\"absolute left-2 flex h-3.5 w-3.5 items-center justify-center\">\n      <SelectItemIndicator>\n        <CheckIcon class=\"h-4 w-4\" />\n      </SelectItemIndicator>\n    </span>\n\n    <SelectItemText>\n      <slot />\n    </SelectItemText>\n  </SelectItem>\n</template>\n"
     },
     {
       "name": "SelectItemText.vue",
@@ -37,7 +37,7 @@
     },
     {
       "name": "SelectTrigger.vue",
-      "content": "<script setup lang=\"ts\">\nimport { SelectIcon, SelectTrigger, type SelectTriggerProps } from 'radix-vue'\nimport RadixIconsChevronDown from '~icons/radix-icons/chevron-down'\nimport { cn } from '@/lib/utils'\n\nconst props = withDefaults(\n  defineProps<SelectTriggerProps & { class?: string; invalid?: boolean }>(),\n  {\n    class: '',\n    invalid: false,\n  },\n)\n</script>\n\n<template>\n  <SelectTrigger\n    v-bind=\"props\"\n    :class=\"[\n      cn(\n        'flex h-9 w-full items-center justify-between rounded-md border border-input bg-transparent px-3 py-2 text-sm shadow-sm ring-offset-background placeholder:text-muted-foreground focus:outline-none focus:ring-1 focus:ring-ring disabled:cursor-not-allowed disabled:opacity-50',\n        props.class,\n      ),\n      props.invalid\n        ? '!ring-destructive ring-2 placeholder:!text-destructive'\n        : '',\n    ]\"\n  >\n    <slot />\n    <SelectIcon as-child>\n      <RadixIconsChevronDown class=\"w-4 h-4 opacity-50\" />\n    </SelectIcon>\n  </SelectTrigger>\n</template>\n"
+      "content": "<script setup lang=\"ts\">\nimport { SelectIcon, SelectTrigger, type SelectTriggerProps } from 'radix-vue'\nimport { ChevronDownIcon } from '@radix-icons/vue'\nimport { cn } from '@/lib/utils'\n\nconst props = withDefaults(\n  defineProps<SelectTriggerProps & { class?: string; invalid?: boolean }>(),\n  {\n    class: '',\n    invalid: false,\n  },\n)\n</script>\n\n<template>\n  <SelectTrigger\n    v-bind=\"props\"\n    :class=\"[\n      cn(\n        'flex h-9 w-full items-center justify-between rounded-md border border-input bg-transparent px-3 py-2 text-sm shadow-sm ring-offset-background placeholder:text-muted-foreground focus:outline-none focus:ring-1 focus:ring-ring disabled:cursor-not-allowed disabled:opacity-50',\n        props.class,\n      ),\n      props.invalid\n        ? '!ring-destructive ring-2 placeholder:!text-destructive'\n        : '',\n    ]\"\n  >\n    <slot />\n    <SelectIcon as-child>\n      <ChevronDownIcon class=\"w-4 h-4 opacity-50\" />\n    </SelectIcon>\n  </SelectTrigger>\n</template>\n"
     },
     {
       "name": "SelectValue.vue",
diff --git a/apps/www/src/public/registry/styles/new-york/sheet.json b/apps/www/src/public/registry/styles/new-york/sheet.json
index a95648b3..82ae92a6 100644
--- a/apps/www/src/public/registry/styles/new-york/sheet.json
+++ b/apps/www/src/public/registry/styles/new-york/sheet.json
@@ -17,7 +17,7 @@
     },
     {
       "name": "SheetContent.vue",
-      "content": "<script setup lang=\"ts\">\nimport {\n  DialogClose,\n  DialogContent,\n  type DialogContentEmits,\n  type DialogContentProps,\n  DialogOverlay,\n  DialogPortal,\n} from 'radix-vue'\nimport { cva } from 'class-variance-authority'\nimport RadixIconsCross2 from '~icons/radix-icons/cross-2'\nimport { cn, useEmitAsProps } from '@/lib/utils'\n\ninterface SheetContentProps extends DialogContentProps {\n  side?: 'left' | 'right' | 'top' | 'bottom'\n  class?: string\n}\n\nconst props = defineProps<SheetContentProps>()\n\nconst emits = defineEmits<DialogContentEmits>()\n\nconst emitsAsProps = useEmitAsProps(emits)\n\nconst sheetVariants = cva(\n  'fixed z-50 gap-4 bg-background p-6 shadow-lg transition ease-in-out data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:duration-300 data-[state=open]:duration-500',\n  {\n    variants: {\n      side: {\n        top: 'inset-x-0 top-0 border-b border-border data-[state=closed]:slide-out-to-top data-[state=open]:slide-in-from-top',\n        bottom:\n          'inset-x-0 bottom-0 border-t border-border data-[state=closed]:slide-out-to-bottom data-[state=open]:slide-in-from-bottom',\n        left: 'inset-y-0 left-0 h-full w-3/4 border-r border-border data-[state=closed]:slide-out-to-left data-[state=open]:slide-in-from-left sm:max-w-sm',\n        right:\n          'inset-y-0 right-0 h-full w-3/4  border-l border-border data-[state=closed]:slide-out-to-right data-[state=open]:slide-in-from-right sm:max-w-sm',\n      },\n    },\n    defaultVariants: {\n      side: 'right',\n    },\n  },\n)\n</script>\n\n<template>\n  <DialogPortal>\n    <DialogOverlay\n      class=\"fixed inset-0 z-50 bg-background/80 backdrop-blur-sm data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0\"\n    />\n    <DialogContent\n      :class=\"cn(sheetVariants({ side: props.side }), props.class)\"\n      v-bind=\"{ ...props, ...emitsAsProps }\"\n    >\n      <slot />\n\n      <DialogClose\n        class=\"absolute top-4 right-4 p-0.5 transition-colors rounded-md hover:bg-secondary\"\n      >\n        <RadixIconsCross2 class=\"w-4 h-4 text-muted-foreground\" />\n      </DialogClose>\n    </DialogContent>\n  </DialogPortal>\n</template>\n"
+      "content": "<script setup lang=\"ts\">\nimport {\n  DialogClose,\n  DialogContent,\n  type DialogContentEmits,\n  type DialogContentProps,\n  DialogOverlay,\n  DialogPortal,\n} from 'radix-vue'\nimport { cva } from 'class-variance-authority'\nimport { Cross2Icon } from '@radix-icons/vue'\nimport { cn, useEmitAsProps } from '@/lib/utils'\n\ninterface SheetContentProps extends DialogContentProps {\n  side?: 'left' | 'right' | 'top' | 'bottom'\n  class?: string\n}\n\nconst props = defineProps<SheetContentProps>()\n\nconst emits = defineEmits<DialogContentEmits>()\n\nconst emitsAsProps = useEmitAsProps(emits)\n\nconst sheetVariants = cva(\n  'fixed z-50 gap-4 bg-background p-6 shadow-lg transition ease-in-out data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:duration-300 data-[state=open]:duration-500',\n  {\n    variants: {\n      side: {\n        top: 'inset-x-0 top-0 border-b border-border data-[state=closed]:slide-out-to-top data-[state=open]:slide-in-from-top',\n        bottom:\n          'inset-x-0 bottom-0 border-t border-border data-[state=closed]:slide-out-to-bottom data-[state=open]:slide-in-from-bottom',\n        left: 'inset-y-0 left-0 h-full w-3/4 border-r border-border data-[state=closed]:slide-out-to-left data-[state=open]:slide-in-from-left sm:max-w-sm',\n        right:\n          'inset-y-0 right-0 h-full w-3/4  border-l border-border data-[state=closed]:slide-out-to-right data-[state=open]:slide-in-from-right sm:max-w-sm',\n      },\n    },\n    defaultVariants: {\n      side: 'right',\n    },\n  },\n)\n</script>\n\n<template>\n  <DialogPortal>\n    <DialogOverlay\n      class=\"fixed inset-0 z-50 bg-background/80 backdrop-blur-sm data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0\"\n    />\n    <DialogContent\n      :class=\"cn(sheetVariants({ side: props.side }), props.class)\"\n      v-bind=\"{ ...props, ...emitsAsProps }\"\n    >\n      <slot />\n\n      <DialogClose\n        class=\"absolute top-4 right-4 p-0.5 transition-colors rounded-md hover:bg-secondary\"\n      >\n        <Cross2Icon class=\"w-4 h-4 text-muted-foreground\" />\n      </DialogClose>\n    </DialogContent>\n  </DialogPortal>\n</template>\n"
     },
     {
       "name": "SheetDescription.vue",
diff --git a/packages/cli/src/commands/init.ts b/packages/cli/src/commands/init.ts
index 594ff177..052fee3f 100644
--- a/packages/cli/src/commands/init.ts
+++ b/packages/cli/src/commands/init.ts
@@ -269,7 +269,7 @@ export async function runInit(cwd: string, config: Config) {
   const deps = PROJECT_DEPENDENCIES.base.concat(
     config.framework === 'nuxt' ? PROJECT_DEPENDENCIES.nuxt : [],
   ).concat(
-    config.style === 'new-york' ? [] : ['lucide-vue-next'],
+    config.style === 'new-york' ? ['@radix-icons/vue'] : ['lucide-vue-next'],
   ).filter(Boolean)
 
   await execa(