diff --git a/apps/www/__registry__/README.md b/apps/www/__registry__/README.md
new file mode 100644
index 00000000..e72612d9
--- /dev/null
+++ b/apps/www/__registry__/README.md
@@ -0,0 +1 @@
+> Files inside this directory is autogenerated by `./scripts/build-registry.ts`. **Do not edit them manually.**
\ No newline at end of file
diff --git a/apps/www/scripts/build-registry.ts b/apps/www/scripts/build-registry.ts
index 3faae061..07550cc1 100644
--- a/apps/www/scripts/build-registry.ts
+++ b/apps/www/scripts/build-registry.ts
@@ -9,7 +9,7 @@ import { styles } from '../src/lib/registry/styles'
 import { themes } from '../src/lib/registry/themes'
 import { buildRegistry } from '../src/lib/registry/registry'
 
-const REGISTRY_PATH = path.join(process.cwd(), 'static/registry')
+const REGISTRY_PATH = path.join(process.cwd(), 'src/public/registry')
 
 const registry = await buildRegistry()
 const result = registrySchema.safeParse(registry)
diff --git a/apps/www/src/lib/registry/registry.ts b/apps/www/src/lib/registry/registry.ts
index cf2ea490..2f0a7f02 100644
--- a/apps/www/src/lib/registry/registry.ts
+++ b/apps/www/src/lib/registry/registry.ts
@@ -6,6 +6,8 @@ import type { Registry } from '../../lib/registry'
 
 const DEPENDENCIES = new Map<string, string[]>([
   ['radix-vue', []],
+  ['v-calendar', []],
+  ['@tanstack/vue-table', []],
   ['formsnap', ['zod']],
 ])
 const REGISTRY_DEPENDENCY = '@/'
diff --git a/apps/www/src/public/registry/colors/gray.json b/apps/www/src/public/registry/colors/gray.json
index 6de69e6d..8a1d9438 100644
--- a/apps/www/src/public/registry/colors/gray.json
+++ b/apps/www/src/public/registry/colors/gray.json
@@ -88,5 +88,5 @@
     }
   },
   "inlineColorsTemplate": "@tailwind base;\n@tailwind components;\n@tailwind utilities;\n",
-  "cssVarsTemplate": "@tailwind base;\n@tailwind components;\n@tailwind utilities;\n \n@layer base {\n  :root {\n    --background: 0 0% 100%;\n    --foreground: 224 71.4% 4.1%;\n\n    --card: 0 0% 100%;\n    --card-foreground: 224 71.4% 4.1%;\n \n    --popover: 0 0% 100%;\n    --popover-foreground: 224 71.4% 4.1%;\n \n    --primary: 220.9 39.3% 11%;\n    --primary-foreground: 210 20% 98%;\n \n    --secondary: 220 14.3% 95.9%;\n    --secondary-foreground: 220.9 39.3% 11%;\n \n    --muted: 220 14.3% 95.9%;\n    --muted-foreground: 220 8.9% 46.1%;\n \n    --accent: 220 14.3% 95.9%;\n    --accent-foreground: 220.9 39.3% 11%;\n \n    --destructive: 0 84.2% 60.2%;\n    --destructive-foreground: 210 20% 98%;\n\n    --border: 220 13% 91%;\n    --input: 220 13% 91%;\n    --ring: 224 71.4% 4.1%;\n \n    --radius: 0.5rem;\n  }\n \n  .dark {\n    --background: 224 71.4% 4.1%;\n    --foreground: 210 20% 98%;\n \n    --card: 224 71.4% 4.1%;\n    --card-foreground: 210 20% 98%;\n \n    --popover: 224 71.4% 4.1%;\n    --popover-foreground: 210 20% 98%;\n \n    --primary: 210 20% 98%;\n    --primary-foreground: 220.9 39.3% 11%;\n \n    --secondary: 215 27.9% 16.9%;\n    --secondary-foreground: 210 20% 98%;\n \n    --muted: 215 27.9% 16.9%;\n    --muted-foreground: 217.9 10.6% 64.9%;\n \n    --accent: 215 27.9% 16.9%;\n    --accent-foreground: 210 20% 98%;\n \n    --destructive: 0 62.8% 30.6%;\n    --destructive-foreground: 210 20% 98%;\n \n    --border: 215 27.9% 16.9%;\n    --input: 215 27.9% 16.9%;\n    --ring: 216 12.2% 83.9%;\n  }\n}\n \n@layer base {\n  * {\n    @apply border-border;\n  }\n  body {\n    @apply bg-background text-foreground;\n  }\n}"
+  "cssVarsTemplate": "@tailwind base;\n@tailwind components;\n@tailwind utilities;\n \n@layer base {\n  :root {\n    --background: 0 0% 100%;\n    --foreground: 224 71.4% 4.1%;\n \n    --muted: 220 14.3% 95.9%;\n    --muted-foreground: 220 8.9% 46.1%;\n \n    --popover: 0 0% 100%;\n    --popover-foreground: 224 71.4% 4.1%;\n \n    --card: 0 0% 100%;\n    --card-foreground: 224 71.4% 4.1%;\n \n    --border: 220 13% 91%;\n    --input: 220 13% 91%;\n \n    --primary: 220.9 39.3% 11%;\n    --primary-foreground: 210 20% 98%;\n \n    --secondary: 220 14.3% 95.9%;\n    --secondary-foreground: 220.9 39.3% 11%;\n \n    --accent: 220 14.3% 95.9%;\n    --accent-foreground: 220.9 39.3% 11%;\n \n    --destructive: 0 84.2% 60.2%;\n    --destructive-foreground: 210 20% 98%;\n \n    --ring: 224 71.4% 4.1%;\n \n    --radius: 0.5rem;\n  }\n \n  .dark {\n    --background: 224 71.4% 4.1%;\n    --foreground: 210 20% 98%;\n \n    --muted: 215 27.9% 16.9%;\n    --muted-foreground: 217.9 10.6% 64.9%;\n \n    --popover: 224 71.4% 4.1%;\n    --popover-foreground: 210 20% 98%;\n \n    --card: 224 71.4% 4.1%;\n    --card-foreground: 210 20% 98%;\n \n    --border: 215 27.9% 16.9%;\n    --input: 215 27.9% 16.9%;\n \n    --primary: 210 20% 98%;\n    --primary-foreground: 220.9 39.3% 11%;\n \n    --secondary: 215 27.9% 16.9%;\n    --secondary-foreground: 210 20% 98%;\n \n    --accent: 215 27.9% 16.9%;\n    --accent-foreground: 210 20% 98%;\n \n    --destructive: 0 62.8% 30.6%;\n    --destructive-foreground: 210 20% 98%;\n \n    --ring: 216 12.2% 83.9%;\n  }\n}\n \n@layer base {\n  * {\n    @apply border-border;\n  }\n  body {\n    @apply bg-background text-foreground;\n  }\n}"
 }
\ No newline at end of file
diff --git a/apps/www/src/public/registry/colors/index.json b/apps/www/src/public/registry/colors/index.json
index 6b70773e..c25158ef 100644
--- a/apps/www/src/public/registry/colors/index.json
+++ b/apps/www/src/public/registry/colors/index.json
@@ -1996,4 +1996,4 @@
       "hslChannel": "343.1 87.7% 15.9%"
     }
   ]
-}
+}
\ No newline at end of file
diff --git a/apps/www/static/registry/colors/lime.json b/apps/www/src/public/registry/colors/lime.json
similarity index 99%
rename from apps/www/static/registry/colors/lime.json
rename to apps/www/src/public/registry/colors/lime.json
index cec9a36d..e36faf45 100644
--- a/apps/www/static/registry/colors/lime.json
+++ b/apps/www/src/public/registry/colors/lime.json
@@ -89,4 +89,4 @@
   },
   "inlineColorsTemplate": "@tailwind base;\n@tailwind components;\n@tailwind utilities;\n",
   "cssVarsTemplate": "@tailwind base;\n@tailwind components;\n@tailwind utilities;\n \n@layer base {\n  :root {\n    --background: 0 0% 100%;\n    --foreground: 89.3 80.4% 10%;\n \n    --muted: 79.6 89.1% 89.2%;\n    --muted-foreground: 83.7 80.5% 44.3%;\n \n    --popover: 0 0% 100%;\n    --popover-foreground: 89.3 80.4% 10%;\n \n    --card: 0 0% 100%;\n    --card-foreground: 89.3 80.4% 10%;\n \n    --border: 80.9 88.5% 79.6%;\n    --input: 80.9 88.5% 79.6%;\n \n    --primary: 87.6 61.2% 20.2%;\n    --primary-foreground: 78.3 92% 95.1%;\n \n    --secondary: 79.6 89.1% 89.2%;\n    --secondary-foreground: 87.6 61.2% 20.2%;\n \n    --accent: 79.6 89.1% 89.2%;\n    --accent-foreground: 87.6 61.2% 20.2%;\n \n    --destructive: 0 84.2% 60.2%;\n    --destructive-foreground: 78.3 92% 95.1%;\n \n    --ring: 89.3 80.4% 10%;\n \n    --radius: 0.5rem;\n  }\n \n  .dark {\n    --background: 89.3 80.4% 10%;\n    --foreground: 78.3 92% 95.1%;\n \n    --muted: 86.3 69% 22.7%;\n    --muted-foreground: 82.7 78% 55.5%;\n \n    --popover: 89.3 80.4% 10%;\n    --popover-foreground: 78.3 92% 95.1%;\n \n    --card: 89.3 80.4% 10%;\n    --card-foreground: 78.3 92% 95.1%;\n \n    --border: 86.3 69% 22.7%;\n    --input: 86.3 69% 22.7%;\n \n    --primary: 78.3 92% 95.1%;\n    --primary-foreground: 87.6 61.2% 20.2%;\n \n    --secondary: 86.3 69% 22.7%;\n    --secondary-foreground: 78.3 92% 95.1%;\n \n    --accent: 86.3 69% 22.7%;\n    --accent-foreground: 78.3 92% 95.1%;\n \n    --destructive: 0 62.8% 30.6%;\n    --destructive-foreground: 78.3 92% 95.1%;\n \n    --ring: 82 84.5% 67.1%;\n  }\n}\n \n@layer base {\n  * {\n    @apply border-border;\n  }\n  body {\n    @apply bg-background text-foreground;\n  }\n}"
-}
+}
\ No newline at end of file
diff --git a/apps/www/src/public/registry/colors/neutral.json b/apps/www/src/public/registry/colors/neutral.json
index 2f29127b..3deb3deb 100644
--- a/apps/www/src/public/registry/colors/neutral.json
+++ b/apps/www/src/public/registry/colors/neutral.json
@@ -88,5 +88,5 @@
     }
   },
   "inlineColorsTemplate": "@tailwind base;\n@tailwind components;\n@tailwind utilities;\n",
-  "cssVarsTemplate": "@tailwind base;\n@tailwind components;\n@tailwind utilities;\n \n@layer base {\n  :root {\n    --background: 0 0% 100%;\n    --foreground: 0 0% 3.9%;\n\n    --card: 0 0% 100%;\n    --card-foreground: 0 0% 3.9%;\n \n    --popover: 0 0% 100%;\n    --popover-foreground: 0 0% 3.9%;\n \n    --primary: 0 0% 9%;\n    --primary-foreground: 0 0% 98%;\n \n    --secondary: 0 0% 96.1%;\n    --secondary-foreground: 0 0% 9%;\n \n    --muted: 0 0% 96.1%;\n    --muted-foreground: 0 0% 45.1%;\n \n    --accent: 0 0% 96.1%;\n    --accent-foreground: 0 0% 9%;\n \n    --destructive: 0 84.2% 60.2%;\n    --destructive-foreground: 0 0% 98%;\n\n    --border: 0 0% 89.8%;\n    --input: 0 0% 89.8%;\n    --ring: 0 0% 3.9%;\n \n    --radius: 0.5rem;\n  }\n \n  .dark {\n    --background: 0 0% 3.9%;\n    --foreground: 0 0% 98%;\n \n    --card: 0 0% 3.9%;\n    --card-foreground: 0 0% 98%;\n \n    --popover: 0 0% 3.9%;\n    --popover-foreground: 0 0% 98%;\n \n    --primary: 0 0% 98%;\n    --primary-foreground: 0 0% 9%;\n \n    --secondary: 0 0% 14.9%;\n    --secondary-foreground: 0 0% 98%;\n \n    --muted: 0 0% 14.9%;\n    --muted-foreground: 0 0% 63.9%;\n \n    --accent: 0 0% 14.9%;\n    --accent-foreground: 0 0% 98%;\n \n    --destructive: 0 62.8% 30.6%;\n    --destructive-foreground: 0 0% 98%;\n \n    --border: 0 0% 14.9%;\n    --input: 0 0% 14.9%;\n    --ring: 0 0% 83.1%;\n  }\n}\n \n@layer base {\n  * {\n    @apply border-border;\n  }\n  body {\n    @apply bg-background text-foreground;\n  }\n}"
+  "cssVarsTemplate": "@tailwind base;\n@tailwind components;\n@tailwind utilities;\n \n@layer base {\n  :root {\n    --background: 0 0% 100%;\n    --foreground: 0 0% 3.9%;\n \n    --muted: 0 0% 96.1%;\n    --muted-foreground: 0 0% 45.1%;\n \n    --popover: 0 0% 100%;\n    --popover-foreground: 0 0% 3.9%;\n \n    --card: 0 0% 100%;\n    --card-foreground: 0 0% 3.9%;\n \n    --border: 0 0% 89.8%;\n    --input: 0 0% 89.8%;\n \n    --primary: 0 0% 9%;\n    --primary-foreground: 0 0% 98%;\n \n    --secondary: 0 0% 96.1%;\n    --secondary-foreground: 0 0% 9%;\n \n    --accent: 0 0% 96.1%;\n    --accent-foreground: 0 0% 9%;\n \n    --destructive: 0 84.2% 60.2%;\n    --destructive-foreground: 0 0% 98%;\n \n    --ring: 0 0% 3.9%;\n \n    --radius: 0.5rem;\n  }\n \n  .dark {\n    --background: 0 0% 3.9%;\n    --foreground: 0 0% 98%;\n \n    --muted: 0 0% 14.9%;\n    --muted-foreground: 0 0% 63.9%;\n \n    --popover: 0 0% 3.9%;\n    --popover-foreground: 0 0% 98%;\n \n    --card: 0 0% 3.9%;\n    --card-foreground: 0 0% 98%;\n \n    --border: 0 0% 14.9%;\n    --input: 0 0% 14.9%;\n \n    --primary: 0 0% 98%;\n    --primary-foreground: 0 0% 9%;\n \n    --secondary: 0 0% 14.9%;\n    --secondary-foreground: 0 0% 98%;\n \n    --accent: 0 0% 14.9%;\n    --accent-foreground: 0 0% 98%;\n \n    --destructive: 0 62.8% 30.6%;\n    --destructive-foreground: 0 0% 98%;\n \n    --ring: 0 0% 83.1%;\n  }\n}\n \n@layer base {\n  * {\n    @apply border-border;\n  }\n  body {\n    @apply bg-background text-foreground;\n  }\n}"
 }
\ No newline at end of file
diff --git a/apps/www/src/public/registry/colors/slate.json b/apps/www/src/public/registry/colors/slate.json
index 5db830be..19a86b72 100644
--- a/apps/www/src/public/registry/colors/slate.json
+++ b/apps/www/src/public/registry/colors/slate.json
@@ -88,5 +88,5 @@
     }
   },
   "inlineColorsTemplate": "@tailwind base;\n@tailwind components;\n@tailwind utilities;\n",
-  "cssVarsTemplate": "@tailwind base;\n@tailwind components;\n@tailwind utilities;\n \n@layer base {\n  :root {\n    --background: 0 0% 100%;\n    --foreground: 222.2 84% 4.9%;\n\n    --card: 0 0% 100%;\n    --card-foreground: 222.2 84% 4.9%;\n \n    --popover: 0 0% 100%;\n    --popover-foreground: 222.2 84% 4.9%;\n \n    --primary: 222.2 47.4% 11.2%;\n    --primary-foreground: 210 40% 98%;\n \n    --secondary: 210 40% 96.1%;\n    --secondary-foreground: 222.2 47.4% 11.2%;\n \n    --muted: 210 40% 96.1%;\n    --muted-foreground: 215.4 16.3% 46.9%;\n \n    --accent: 210 40% 96.1%;\n    --accent-foreground: 222.2 47.4% 11.2%;\n \n    --destructive: 0 84.2% 60.2%;\n    --destructive-foreground: 210 40% 98%;\n\n    --border: 214.3 31.8% 91.4%;\n    --input: 214.3 31.8% 91.4%;\n    --ring: 222.2 84% 4.9%;\n \n    --radius: 0.5rem;\n  }\n \n  .dark {\n    --background: 222.2 84% 4.9%;\n    --foreground: 210 40% 98%;\n \n    --card: 222.2 84% 4.9%;\n    --card-foreground: 210 40% 98%;\n \n    --popover: 222.2 84% 4.9%;\n    --popover-foreground: 210 40% 98%;\n \n    --primary: 210 40% 98%;\n    --primary-foreground: 222.2 47.4% 11.2%;\n \n    --secondary: 217.2 32.6% 17.5%;\n    --secondary-foreground: 210 40% 98%;\n \n    --muted: 217.2 32.6% 17.5%;\n    --muted-foreground: 215 20.2% 65.1%;\n \n    --accent: 217.2 32.6% 17.5%;\n    --accent-foreground: 210 40% 98%;\n \n    --destructive: 0 62.8% 30.6%;\n    --destructive-foreground: 210 40% 98%;\n \n    --border: 217.2 32.6% 17.5%;\n    --input: 217.2 32.6% 17.5%;\n    --ring: 212.7 26.8% 83.9%;\n  }\n}\n \n@layer base {\n  * {\n    @apply border-border;\n  }\n  body {\n    @apply bg-background text-foreground;\n  }\n}"
-}
+  "cssVarsTemplate": "@tailwind base;\n@tailwind components;\n@tailwind utilities;\n \n@layer base {\n  :root {\n    --background: 0 0% 100%;\n    --foreground: 222.2 84% 4.9%;\n \n    --muted: 210 40% 96.1%;\n    --muted-foreground: 215.4 16.3% 46.9%;\n \n    --popover: 0 0% 100%;\n    --popover-foreground: 222.2 84% 4.9%;\n \n    --card: 0 0% 100%;\n    --card-foreground: 222.2 84% 4.9%;\n \n    --border: 214.3 31.8% 91.4%;\n    --input: 214.3 31.8% 91.4%;\n \n    --primary: 222.2 47.4% 11.2%;\n    --primary-foreground: 210 40% 98%;\n \n    --secondary: 210 40% 96.1%;\n    --secondary-foreground: 222.2 47.4% 11.2%;\n \n    --accent: 210 40% 96.1%;\n    --accent-foreground: 222.2 47.4% 11.2%;\n \n    --destructive: 0 84.2% 60.2%;\n    --destructive-foreground: 210 40% 98%;\n \n    --ring: 222.2 84% 4.9%;\n \n    --radius: 0.5rem;\n  }\n \n  .dark {\n    --background: 222.2 84% 4.9%;\n    --foreground: 210 40% 98%;\n \n    --muted: 217.2 32.6% 17.5%;\n    --muted-foreground: 215 20.2% 65.1%;\n \n    --popover: 222.2 84% 4.9%;\n    --popover-foreground: 210 40% 98%;\n \n    --card: 222.2 84% 4.9%;\n    --card-foreground: 210 40% 98%;\n \n    --border: 217.2 32.6% 17.5%;\n    --input: 217.2 32.6% 17.5%;\n \n    --primary: 210 40% 98%;\n    --primary-foreground: 222.2 47.4% 11.2%;\n \n    --secondary: 217.2 32.6% 17.5%;\n    --secondary-foreground: 210 40% 98%;\n \n    --accent: 217.2 32.6% 17.5%;\n    --accent-foreground: 210 40% 98%;\n \n    --destructive: 0 62.8% 30.6%;\n    --destructive-foreground: 210 40% 98%;\n \n    --ring: 212.7 26.8% 83.9%;\n  }\n}\n \n@layer base {\n  * {\n    @apply border-border;\n  }\n  body {\n    @apply bg-background text-foreground;\n  }\n}"
+}
\ No newline at end of file
diff --git a/apps/www/src/public/registry/colors/stone.json b/apps/www/src/public/registry/colors/stone.json
index e06a1346..bd31d945 100644
--- a/apps/www/src/public/registry/colors/stone.json
+++ b/apps/www/src/public/registry/colors/stone.json
@@ -88,5 +88,5 @@
     }
   },
   "inlineColorsTemplate": "@tailwind base;\n@tailwind components;\n@tailwind utilities;\n",
-  "cssVarsTemplate": "@tailwind base;\n@tailwind components;\n@tailwind utilities;\n \n@layer base {\n  :root {\n    --background: 0 0% 100%;\n    --foreground: 20 14.3% 4.1%;\n\n    --card: 0 0% 100%;\n    --card-foreground: 20 14.3% 4.1%;\n \n    --popover: 0 0% 100%;\n    --popover-foreground: 20 14.3% 4.1%;\n \n    --primary: 24 9.8% 10%;\n    --primary-foreground: 60 9.1% 97.8%;\n \n    --secondary: 60 4.8% 95.9%;\n    --secondary-foreground: 24 9.8% 10%;\n \n    --muted: 60 4.8% 95.9%;\n    --muted-foreground: 25 5.3% 44.7%;\n \n    --accent: 60 4.8% 95.9%;\n    --accent-foreground: 24 9.8% 10%;\n \n    --destructive: 0 84.2% 60.2%;\n    --destructive-foreground: 60 9.1% 97.8%;\n\n    --border: 20 5.9% 90%;\n    --input: 20 5.9% 90%;\n    --ring: 20 14.3% 4.1%;\n \n    --radius: 0.5rem;\n  }\n \n  .dark {\n    --background: 20 14.3% 4.1%;\n    --foreground: 60 9.1% 97.8%;\n \n    --card: 20 14.3% 4.1%;\n    --card-foreground: 60 9.1% 97.8%;\n \n    --popover: 20 14.3% 4.1%;\n    --popover-foreground: 60 9.1% 97.8%;\n \n    --primary: 60 9.1% 97.8%;\n    --primary-foreground: 24 9.8% 10%;\n \n    --secondary: 12 6.5% 15.1%;\n    --secondary-foreground: 60 9.1% 97.8%;\n \n    --muted: 12 6.5% 15.1%;\n    --muted-foreground: 24 5.4% 63.9%;\n \n    --accent: 12 6.5% 15.1%;\n    --accent-foreground: 60 9.1% 97.8%;\n \n    --destructive: 0 62.8% 30.6%;\n    --destructive-foreground: 60 9.1% 97.8%;\n \n    --border: 12 6.5% 15.1%;\n    --input: 12 6.5% 15.1%;\n    --ring: 24 5.7% 82.9%;\n  }\n}\n \n@layer base {\n  * {\n    @apply border-border;\n  }\n  body {\n    @apply bg-background text-foreground;\n  }\n}"
+  "cssVarsTemplate": "@tailwind base;\n@tailwind components;\n@tailwind utilities;\n \n@layer base {\n  :root {\n    --background: 0 0% 100%;\n    --foreground: 20 14.3% 4.1%;\n \n    --muted: 60 4.8% 95.9%;\n    --muted-foreground: 25 5.3% 44.7%;\n \n    --popover: 0 0% 100%;\n    --popover-foreground: 20 14.3% 4.1%;\n \n    --card: 0 0% 100%;\n    --card-foreground: 20 14.3% 4.1%;\n \n    --border: 20 5.9% 90%;\n    --input: 20 5.9% 90%;\n \n    --primary: 24 9.8% 10%;\n    --primary-foreground: 60 9.1% 97.8%;\n \n    --secondary: 60 4.8% 95.9%;\n    --secondary-foreground: 24 9.8% 10%;\n \n    --accent: 60 4.8% 95.9%;\n    --accent-foreground: 24 9.8% 10%;\n \n    --destructive: 0 84.2% 60.2%;\n    --destructive-foreground: 60 9.1% 97.8%;\n \n    --ring: 20 14.3% 4.1%;\n \n    --radius: 0.5rem;\n  }\n \n  .dark {\n    --background: 20 14.3% 4.1%;\n    --foreground: 60 9.1% 97.8%;\n \n    --muted: 12 6.5% 15.1%;\n    --muted-foreground: 24 5.4% 63.9%;\n \n    --popover: 20 14.3% 4.1%;\n    --popover-foreground: 60 9.1% 97.8%;\n \n    --card: 20 14.3% 4.1%;\n    --card-foreground: 60 9.1% 97.8%;\n \n    --border: 12 6.5% 15.1%;\n    --input: 12 6.5% 15.1%;\n \n    --primary: 60 9.1% 97.8%;\n    --primary-foreground: 24 9.8% 10%;\n \n    --secondary: 12 6.5% 15.1%;\n    --secondary-foreground: 60 9.1% 97.8%;\n \n    --accent: 12 6.5% 15.1%;\n    --accent-foreground: 60 9.1% 97.8%;\n \n    --destructive: 0 62.8% 30.6%;\n    --destructive-foreground: 60 9.1% 97.8%;\n \n    --ring: 24 5.7% 82.9%;\n  }\n}\n \n@layer base {\n  * {\n    @apply border-border;\n  }\n  body {\n    @apply bg-background text-foreground;\n  }\n}"
 }
\ No newline at end of file
diff --git a/apps/www/src/public/registry/colors/zinc.json b/apps/www/src/public/registry/colors/zinc.json
index b13b9e6c..72484fec 100644
--- a/apps/www/src/public/registry/colors/zinc.json
+++ b/apps/www/src/public/registry/colors/zinc.json
@@ -88,5 +88,5 @@
     }
   },
   "inlineColorsTemplate": "@tailwind base;\n@tailwind components;\n@tailwind utilities;\n",
-  "cssVarsTemplate": "@tailwind base;\n@tailwind components;\n@tailwind utilities;\n \n@layer base {\n  :root {\n    --background: 0 0% 100%;\n    --foreground: 240 10% 3.9%;\n\n    --card: 0 0% 100%;\n    --card-foreground: 240 10% 3.9%;\n \n    --popover: 0 0% 100%;\n    --popover-foreground: 240 10% 3.9%;\n \n    --primary: 240 5.9% 10%;\n    --primary-foreground: 0 0% 98%;\n \n    --secondary: 240 4.8% 95.9%;\n    --secondary-foreground: 240 5.9% 10%;\n \n    --muted: 240 4.8% 95.9%;\n    --muted-foreground: 240 3.8% 46.1%;\n \n    --accent: 240 4.8% 95.9%;\n    --accent-foreground: 240 5.9% 10%;\n \n    --destructive: 0 84.2% 60.2%;\n    --destructive-foreground: 0 0% 98%;\n\n    --border: 240 5.9% 90%;\n    --input: 240 5.9% 90%;\n    --ring: 240 10% 3.9%;\n \n    --radius: 0.5rem;\n  }\n \n  .dark {\n    --background: 240 10% 3.9%;\n    --foreground: 0 0% 98%;\n \n    --card: 240 10% 3.9%;\n    --card-foreground: 0 0% 98%;\n \n    --popover: 240 10% 3.9%;\n    --popover-foreground: 0 0% 98%;\n \n    --primary: 0 0% 98%;\n    --primary-foreground: 240 5.9% 10%;\n \n    --secondary: 240 3.7% 15.9%;\n    --secondary-foreground: 0 0% 98%;\n \n    --muted: 240 3.7% 15.9%;\n    --muted-foreground: 240 5% 64.9%;\n \n    --accent: 240 3.7% 15.9%;\n    --accent-foreground: 0 0% 98%;\n \n    --destructive: 0 62.8% 30.6%;\n    --destructive-foreground: 0 0% 98%;\n \n    --border: 240 3.7% 15.9%;\n    --input: 240 3.7% 15.9%;\n    --ring: 240 4.9% 83.9%;\n  }\n}\n \n@layer base {\n  * {\n    @apply border-border;\n  }\n  body {\n    @apply bg-background text-foreground;\n  }\n}"
+  "cssVarsTemplate": "@tailwind base;\n@tailwind components;\n@tailwind utilities;\n \n@layer base {\n  :root {\n    --background: 0 0% 100%;\n    --foreground: 240 10% 3.9%;\n \n    --muted: 240 4.8% 95.9%;\n    --muted-foreground: 240 3.8% 46.1%;\n \n    --popover: 0 0% 100%;\n    --popover-foreground: 240 10% 3.9%;\n \n    --card: 0 0% 100%;\n    --card-foreground: 240 10% 3.9%;\n \n    --border: 240 5.9% 90%;\n    --input: 240 5.9% 90%;\n \n    --primary: 240 5.9% 10%;\n    --primary-foreground: 0 0% 98%;\n \n    --secondary: 240 4.8% 95.9%;\n    --secondary-foreground: 240 5.9% 10%;\n \n    --accent: 240 4.8% 95.9%;\n    --accent-foreground: 240 5.9% 10%;\n \n    --destructive: 0 84.2% 60.2%;\n    --destructive-foreground: 0 0% 98%;\n \n    --ring: 240 10% 3.9%;\n \n    --radius: 0.5rem;\n  }\n \n  .dark {\n    --background: 240 10% 3.9%;\n    --foreground: 0 0% 98%;\n \n    --muted: 240 3.7% 15.9%;\n    --muted-foreground: 240 5% 64.9%;\n \n    --popover: 240 10% 3.9%;\n    --popover-foreground: 0 0% 98%;\n \n    --card: 240 10% 3.9%;\n    --card-foreground: 0 0% 98%;\n \n    --border: 240 3.7% 15.9%;\n    --input: 240 3.7% 15.9%;\n \n    --primary: 0 0% 98%;\n    --primary-foreground: 240 5.9% 10%;\n \n    --secondary: 240 3.7% 15.9%;\n    --secondary-foreground: 0 0% 98%;\n \n    --accent: 240 3.7% 15.9%;\n    --accent-foreground: 0 0% 98%;\n \n    --destructive: 0 62.8% 30.6%;\n    --destructive-foreground: 0 0% 98%;\n \n    --ring: 240 4.9% 83.9%;\n  }\n}\n \n@layer base {\n  * {\n    @apply border-border;\n  }\n  body {\n    @apply bg-background text-foreground;\n  }\n}"
 }
\ No newline at end of file
diff --git a/apps/www/src/public/registry/index.json b/apps/www/src/public/registry/index.json
index 78d8c905..d8cb9e8a 100644
--- a/apps/www/src/public/registry/index.json
+++ b/apps/www/src/public/registry/index.json
@@ -2,369 +2,615 @@
   {
     "name": "accordion",
     "dependencies": [
-      "@radix-ui/react-accordion"
+      "radix-vue"
+    ],
+    "registryDependencies": [
+      "utils"
     ],
     "files": [
-      "ui/accordion.tsx"
+      "ui/accordion/Accordion.vue",
+      "ui/accordion/AccordionContent.vue",
+      "ui/accordion/AccordionItem.vue",
+      "ui/accordion/AccordionTrigger.vue",
+      "ui/accordion/index.ts"
     ],
     "type": "components:ui"
   },
   {
     "name": "alert",
+    "dependencies": [],
+    "registryDependencies": [
+      "utils"
+    ],
     "files": [
-      "ui/alert.tsx"
+      "ui/alert/Alert.vue",
+      "ui/alert/AlertDescription.vue",
+      "ui/alert/AlertTitle.vue",
+      "ui/alert/index.ts"
     ],
     "type": "components:ui"
   },
   {
     "name": "alert-dialog",
     "dependencies": [
-      "@radix-ui/react-alert-dialog"
+      "radix-vue"
     ],
     "registryDependencies": [
+      "utils",
       "button"
     ],
     "files": [
-      "ui/alert-dialog.tsx"
+      "ui/alert-dialog/AlertDialog.vue",
+      "ui/alert-dialog/AlertDialogAction.vue",
+      "ui/alert-dialog/AlertDialogCancel.vue",
+      "ui/alert-dialog/AlertDialogContent.vue",
+      "ui/alert-dialog/AlertDialogDescription.vue",
+      "ui/alert-dialog/AlertDialogFooter.vue",
+      "ui/alert-dialog/AlertDialogHeader.vue",
+      "ui/alert-dialog/AlertDialogTitle.vue",
+      "ui/alert-dialog/AlertDialogTrigger.vue",
+      "ui/alert-dialog/index.ts"
     ],
     "type": "components:ui"
   },
   {
     "name": "aspect-ratio",
     "dependencies": [
-      "@radix-ui/react-aspect-ratio"
+      "radix-vue"
     ],
+    "registryDependencies": [],
     "files": [
-      "ui/aspect-ratio.tsx"
+      "ui/aspect-ratio/AspectRatio.vue",
+      "ui/aspect-ratio/index.ts"
     ],
     "type": "components:ui"
   },
   {
     "name": "avatar",
     "dependencies": [
-      "@radix-ui/react-avatar"
+      "radix-vue"
+    ],
+    "registryDependencies": [
+      "utils"
     ],
     "files": [
-      "ui/avatar.tsx"
+      "ui/avatar/Avatar.vue",
+      "ui/avatar/AvatarFallback.vue",
+      "ui/avatar/AvatarImage.vue",
+      "ui/avatar/index.ts"
     ],
     "type": "components:ui"
   },
   {
     "name": "badge",
+    "dependencies": [],
+    "registryDependencies": [
+      "utils"
+    ],
     "files": [
-      "ui/badge.tsx"
+      "ui/badge/Badge.vue",
+      "ui/badge/index.ts"
+    ],
+    "type": "components:ui"
+  },
+  {
+    "name": "breadcrumb",
+    "dependencies": [],
+    "registryDependencies": [],
+    "files": [
+      "ui/breadcrumb/BreadCrumb.vue",
+      "ui/breadcrumb/BreadCrumbItem.vue",
+      "ui/breadcrumb/index.ts"
     ],
     "type": "components:ui"
   },
   {
     "name": "button",
-    "dependencies": [
-      "@radix-ui/react-slot"
+    "dependencies": [],
+    "registryDependencies": [
+      "utils"
     ],
     "files": [
-      "ui/button.tsx"
+      "ui/button/Button.vue",
+      "ui/button/index.ts"
     ],
     "type": "components:ui"
   },
   {
     "name": "calendar",
     "dependencies": [
-      "react-day-picker",
-      "date-fns"
+      "v-calendar"
     ],
     "registryDependencies": [
-      "button"
+      "utils"
     ],
     "files": [
-      "ui/calendar.tsx"
+      "ui/calendar/Calendar.vue",
+      "ui/calendar/index.ts"
     ],
     "type": "components:ui"
   },
   {
     "name": "card",
+    "dependencies": [],
+    "registryDependencies": [
+      "utils"
+    ],
     "files": [
-      "ui/card.tsx"
+      "ui/card/Card.vue",
+      "ui/card/CardContent.vue",
+      "ui/card/CardDescription.vue",
+      "ui/card/CardFooter.vue",
+      "ui/card/CardHeader.vue",
+      "ui/card/CardTitle.vue",
+      "ui/card/index.ts"
     ],
     "type": "components:ui"
   },
   {
     "name": "checkbox",
     "dependencies": [
-      "@radix-ui/react-checkbox"
+      "radix-vue"
+    ],
+    "registryDependencies": [
+      "utils"
     ],
     "files": [
-      "ui/checkbox.tsx"
+      "ui/checkbox/Checkbox.vue",
+      "ui/checkbox/index.ts"
     ],
     "type": "components:ui"
   },
   {
     "name": "collapsible",
     "dependencies": [
-      "@radix-ui/react-collapsible"
-    ],
-    "files": [
-      "ui/collapsible.tsx"
-    ],
-    "type": "components:ui"
-  },
-  {
-    "name": "command",
-    "dependencies": [
-      "cmdk"
+      "radix-vue"
     ],
     "registryDependencies": [
-      "dialog"
+      "utils"
     ],
     "files": [
-      "ui/command.tsx"
+      "ui/collapsible/Collapsible.vue",
+      "ui/collapsible/CollapsibleContent.vue",
+      "ui/collapsible/CollapsibleTrigger.vue",
+      "ui/collapsible/index.ts"
     ],
     "type": "components:ui"
   },
   {
     "name": "context-menu",
     "dependencies": [
-      "@radix-ui/react-context-menu"
+      "radix-vue"
+    ],
+    "registryDependencies": [
+      "utils"
     ],
     "files": [
-      "ui/context-menu.tsx"
+      "ui/context-menu/ContextMenu.vue",
+      "ui/context-menu/ContextMenuCheckboxItem.vue",
+      "ui/context-menu/ContextMenuContent.vue",
+      "ui/context-menu/ContextMenuGroup.vue",
+      "ui/context-menu/ContextMenuItem.vue",
+      "ui/context-menu/ContextMenuLabel.vue",
+      "ui/context-menu/ContextMenuPortal.vue",
+      "ui/context-menu/ContextMenuRadioGroup.vue",
+      "ui/context-menu/ContextMenuRadioItem.vue",
+      "ui/context-menu/ContextMenuSeparator.vue",
+      "ui/context-menu/ContextMenuShortcut.vue",
+      "ui/context-menu/ContextMenuSub.vue",
+      "ui/context-menu/ContextMenuSubContent.vue",
+      "ui/context-menu/ContextMenuSubTrigger.vue",
+      "ui/context-menu/ContextMenuTrigger.vue",
+      "ui/context-menu/index.ts"
+    ],
+    "type": "components:ui"
+  },
+  {
+    "name": "data-table",
+    "dependencies": [
+      "@tanstack/vue-table"
+    ],
+    "registryDependencies": [],
+    "files": [
+      "ui/data-table/DataTable.vue",
+      "ui/data-table/index.ts"
+    ],
+    "type": "components:ui"
+  },
+  {
+    "name": "date-picker",
+    "dependencies": [
+      "v-calendar"
+    ],
+    "registryDependencies": [],
+    "files": [
+      "ui/date-picker/DatePicker.vue",
+      "ui/date-picker/index.ts"
     ],
     "type": "components:ui"
   },
   {
     "name": "dialog",
     "dependencies": [
-      "@radix-ui/react-dialog"
+      "radix-vue"
+    ],
+    "registryDependencies": [
+      "utils"
     ],
     "files": [
-      "ui/dialog.tsx"
+      "ui/dialog/Dialog.vue",
+      "ui/dialog/DialogContent.vue",
+      "ui/dialog/DialogDescription.vue",
+      "ui/dialog/DialogFooter.vue",
+      "ui/dialog/DialogHeader.vue",
+      "ui/dialog/DialogTitle.vue",
+      "ui/dialog/DialogTrigger.vue",
+      "ui/dialog/index.ts"
     ],
     "type": "components:ui"
   },
   {
     "name": "dropdown-menu",
     "dependencies": [
-      "@radix-ui/react-dropdown-menu"
-    ],
-    "files": [
-      "ui/dropdown-menu.tsx"
-    ],
-    "type": "components:ui"
-  },
-  {
-    "name": "form",
-    "dependencies": [
-      "@radix-ui/react-label",
-      "@radix-ui/react-slot",
-      "@hookform/resolvers",
-      "zod",
-      "react-hook-form"
+      "radix-vue"
     ],
     "registryDependencies": [
-      "button",
-      "label"
+      "utils"
     ],
     "files": [
-      "ui/form.tsx"
+      "ui/dropdown-menu/DropdownMenu.vue",
+      "ui/dropdown-menu/DropdownMenuCheckboxItem.vue",
+      "ui/dropdown-menu/DropdownMenuContent.vue",
+      "ui/dropdown-menu/DropdownMenuGroup.vue",
+      "ui/dropdown-menu/DropdownMenuItem.vue",
+      "ui/dropdown-menu/DropdownMenuLabel.vue",
+      "ui/dropdown-menu/DropdownMenuRadioGroup.vue",
+      "ui/dropdown-menu/DropdownMenuRadioItem.vue",
+      "ui/dropdown-menu/DropdownMenuSeparator.vue",
+      "ui/dropdown-menu/DropdownMenuShortcut.vue",
+      "ui/dropdown-menu/DropdownMenuSub.vue",
+      "ui/dropdown-menu/DropdownMenuSubContent.vue",
+      "ui/dropdown-menu/DropdownMenuSubTrigger.vue",
+      "ui/dropdown-menu/DropdownMenuTrigger.vue",
+      "ui/dropdown-menu/index.ts"
     ],
     "type": "components:ui"
   },
   {
     "name": "hover-card",
     "dependencies": [
-      "@radix-ui/react-hover-card"
+      "radix-vue"
+    ],
+    "registryDependencies": [
+      "utils"
     ],
     "files": [
-      "ui/hover-card.tsx"
+      "ui/hover-card/HoverCard.vue",
+      "ui/hover-card/HoverCardContent.vue",
+      "ui/hover-card/HoverCardTrigger.vue",
+      "ui/hover-card/index.ts"
     ],
     "type": "components:ui"
   },
   {
     "name": "input",
+    "dependencies": [],
+    "registryDependencies": [
+      "utils"
+    ],
     "files": [
-      "ui/input.tsx"
+      "ui/input/Input.vue",
+      "ui/input/index.ts"
+    ],
+    "type": "components:ui"
+  },
+  {
+    "name": "kbd",
+    "dependencies": [],
+    "registryDependencies": [],
+    "files": [
+      "ui/kbd/Kbd.vue",
+      "ui/kbd/index.ts"
     ],
     "type": "components:ui"
   },
   {
     "name": "label",
     "dependencies": [
-      "@radix-ui/react-label"
+      "radix-vue"
+    ],
+    "registryDependencies": [
+      "utils"
     ],
     "files": [
-      "ui/label.tsx"
+      "ui/label/Label.vue",
+      "ui/label/index.ts"
     ],
     "type": "components:ui"
   },
   {
     "name": "menubar",
     "dependencies": [
-      "@radix-ui/react-menubar"
+      "radix-vue"
+    ],
+    "registryDependencies": [
+      "utils"
     ],
     "files": [
-      "ui/menubar.tsx"
+      "ui/menubar/Menubar.vue",
+      "ui/menubar/MenubarCheckboxItem.vue",
+      "ui/menubar/MenubarContent.vue",
+      "ui/menubar/MenubarGroup.vue",
+      "ui/menubar/MenubarItem.vue",
+      "ui/menubar/MenubarLabel.vue",
+      "ui/menubar/MenubarMenu.vue",
+      "ui/menubar/MenubarRadioGroup.vue",
+      "ui/menubar/MenubarRadioItem.vue",
+      "ui/menubar/MenubarSeparator.vue",
+      "ui/menubar/MenubarShortcut.vue",
+      "ui/menubar/MenubarSub.vue",
+      "ui/menubar/MenubarSubContent.vue",
+      "ui/menubar/MenubarSubTrigger.vue",
+      "ui/menubar/MenubarTrigger.vue",
+      "ui/menubar/index.ts"
     ],
     "type": "components:ui"
   },
   {
     "name": "navigation-menu",
     "dependencies": [
-      "@radix-ui/react-navigation-menu"
+      "radix-vue"
+    ],
+    "registryDependencies": [
+      "utils"
     ],
     "files": [
-      "ui/navigation-menu.tsx"
+      "ui/navigation-menu/NavigationMenu.vue",
+      "ui/navigation-menu/NavigationMenuContent.vue",
+      "ui/navigation-menu/NavigationMenuIndicator.vue",
+      "ui/navigation-menu/NavigationMenuItem.vue",
+      "ui/navigation-menu/NavigationMenuLink.vue",
+      "ui/navigation-menu/NavigationMenuList.vue",
+      "ui/navigation-menu/NavigationMenuTrigger.vue",
+      "ui/navigation-menu/NavigationMenuViewport.vue",
+      "ui/navigation-menu/index.ts"
     ],
     "type": "components:ui"
   },
   {
     "name": "popover",
     "dependencies": [
-      "@radix-ui/react-popover"
+      "radix-vue"
+    ],
+    "registryDependencies": [
+      "utils"
     ],
     "files": [
-      "ui/popover.tsx"
+      "ui/popover/Popover.vue",
+      "ui/popover/PopoverContent.vue",
+      "ui/popover/PopoverTrigger.vue",
+      "ui/popover/index.ts"
     ],
     "type": "components:ui"
   },
   {
     "name": "progress",
     "dependencies": [
-      "@radix-ui/react-progress"
+      "radix-vue"
+    ],
+    "registryDependencies": [
+      "utils"
     ],
     "files": [
-      "ui/progress.tsx"
+      "ui/progress/Progress.vue",
+      "ui/progress/index.ts"
     ],
     "type": "components:ui"
   },
   {
     "name": "radio-group",
     "dependencies": [
-      "@radix-ui/react-radio-group"
+      "radix-vue"
+    ],
+    "registryDependencies": [
+      "utils"
     ],
     "files": [
-      "ui/radio-group.tsx"
+      "ui/radio-group/RadioGroup.vue",
+      "ui/radio-group/RadioGroupItem.vue",
+      "ui/radio-group/index.ts"
     ],
     "type": "components:ui"
   },
   {
     "name": "scroll-area",
     "dependencies": [
-      "@radix-ui/react-scroll-area"
+      "radix-vue"
+    ],
+    "registryDependencies": [
+      "utils"
     ],
     "files": [
-      "ui/scroll-area.tsx"
+      "ui/scroll-area/ScrollArea.vue",
+      "ui/scroll-area/ScrollBar.vue",
+      "ui/scroll-area/index.ts"
     ],
     "type": "components:ui"
   },
   {
     "name": "select",
     "dependencies": [
-      "@radix-ui/react-select"
+      "radix-vue"
+    ],
+    "registryDependencies": [
+      "utils"
     ],
     "files": [
-      "ui/select.tsx"
+      "ui/select/Select.vue",
+      "ui/select/SelectContent.vue",
+      "ui/select/SelectGroup.vue",
+      "ui/select/SelectItem.vue",
+      "ui/select/SelectItemText.vue",
+      "ui/select/SelectLabel.vue",
+      "ui/select/SelectSeparator.vue",
+      "ui/select/SelectTrigger.vue",
+      "ui/select/SelectValue.vue",
+      "ui/select/index.ts"
     ],
     "type": "components:ui"
   },
   {
     "name": "separator",
     "dependencies": [
-      "@radix-ui/react-separator"
+      "radix-vue"
+    ],
+    "registryDependencies": [
+      "utils"
     ],
     "files": [
-      "ui/separator.tsx"
+      "ui/separator/Separator.vue",
+      "ui/separator/index.ts"
     ],
     "type": "components:ui"
   },
   {
     "name": "sheet",
     "dependencies": [
-      "@radix-ui/react-dialog"
+      "radix-vue"
+    ],
+    "registryDependencies": [
+      "utils"
     ],
     "files": [
-      "ui/sheet.tsx"
+      "ui/sheet/Sheet.vue",
+      "ui/sheet/SheetClose.vue",
+      "ui/sheet/SheetContent.vue",
+      "ui/sheet/SheetDescription.vue",
+      "ui/sheet/SheetFooter.vue",
+      "ui/sheet/SheetHeader.vue",
+      "ui/sheet/SheetTitle.vue",
+      "ui/sheet/SheetTrigger.vue",
+      "ui/sheet/index.ts"
     ],
     "type": "components:ui"
   },
   {
     "name": "skeleton",
+    "dependencies": [],
+    "registryDependencies": [
+      "utils"
+    ],
     "files": [
-      "ui/skeleton.tsx"
+      "ui/skeleton/Skeleton.vue",
+      "ui/skeleton/index.ts"
     ],
     "type": "components:ui"
   },
   {
     "name": "slider",
     "dependencies": [
-      "@radix-ui/react-slider"
+      "radix-vue"
+    ],
+    "registryDependencies": [
+      "utils"
     ],
     "files": [
-      "ui/slider.tsx"
+      "ui/slider/Slider.vue",
+      "ui/slider/index.ts"
     ],
     "type": "components:ui"
   },
   {
     "name": "switch",
     "dependencies": [
-      "@radix-ui/react-switch"
+      "radix-vue"
+    ],
+    "registryDependencies": [
+      "utils"
     ],
     "files": [
-      "ui/switch.tsx"
+      "ui/switch/Switch.vue",
+      "ui/switch/index.ts"
     ],
     "type": "components:ui"
   },
   {
     "name": "table",
+    "dependencies": [],
+    "registryDependencies": [
+      "utils"
+    ],
     "files": [
-      "ui/table.tsx"
+      "ui/table/Table.vue",
+      "ui/table/TableBody.vue",
+      "ui/table/TableCaption.vue",
+      "ui/table/TableCell.vue",
+      "ui/table/TableEmpty.vue",
+      "ui/table/TableFooter.vue",
+      "ui/table/TableHead.vue",
+      "ui/table/TableHeader.vue",
+      "ui/table/TableRow.vue",
+      "ui/table/index.ts"
     ],
     "type": "components:ui"
   },
   {
     "name": "tabs",
     "dependencies": [
-      "@radix-ui/react-tabs"
+      "radix-vue"
+    ],
+    "registryDependencies": [
+      "utils"
     ],
     "files": [
-      "ui/tabs.tsx"
+      "ui/tabs/Tabs.vue",
+      "ui/tabs/TabsContent.vue",
+      "ui/tabs/TabsList.vue",
+      "ui/tabs/TabsTrigger.vue",
+      "ui/tabs/index.ts"
     ],
     "type": "components:ui"
   },
   {
     "name": "textarea",
-    "files": [
-      "ui/textarea.tsx"
-    ],
-    "type": "components:ui"
-  },
-  {
-    "name": "toast",
-    "dependencies": [
-      "@radix-ui/react-toast"
+    "dependencies": [],
+    "registryDependencies": [
+      "utils"
     ],
     "files": [
-      "ui/toast.tsx",
-      "ui/use-toast.ts",
-      "ui/toaster.tsx"
+      "ui/textarea/Textarea.vue",
+      "ui/textarea/index.ts"
     ],
     "type": "components:ui"
   },
   {
     "name": "toggle",
     "dependencies": [
-      "@radix-ui/react-toggle"
+      "radix-vue"
+    ],
+    "registryDependencies": [
+      "utils"
     ],
     "files": [
-      "ui/toggle.tsx"
+      "ui/toggle/Toggle.vue",
+      "ui/toggle/index.ts"
     ],
     "type": "components:ui"
   },
   {
     "name": "tooltip",
     "dependencies": [
-      "@radix-ui/react-tooltip"
+      "radix-vue"
+    ],
+    "registryDependencies": [
+      "utils"
     ],
     "files": [
-      "ui/tooltip.tsx"
+      "ui/tooltip/Tooltip.vue",
+      "ui/tooltip/TooltipContent.vue",
+      "ui/tooltip/TooltipProvider.vue",
+      "ui/tooltip/TooltipTrigger.vue",
+      "ui/tooltip/index.ts"
     ],
     "type": "components:ui"
   }
diff --git a/apps/www/src/public/registry/styles/default/accordion.json b/apps/www/src/public/registry/styles/default/accordion.json
index 4ed833ab..32b57e7b 100644
--- a/apps/www/src/public/registry/styles/default/accordion.json
+++ b/apps/www/src/public/registry/styles/default/accordion.json
@@ -1,12 +1,31 @@
 {
   "name": "accordion",
   "dependencies": [
-    "@radix-ui/react-accordion"
+    "radix-vue"
+  ],
+  "registryDependencies": [
+    "utils"
   ],
   "files": [
     {
-      "name": "accordion.tsx",
-      "content": "\"use client\"\n\nimport * as React from \"react\"\nimport * as AccordionPrimitive from \"@radix-ui/react-accordion\"\nimport { ChevronDown } from \"lucide-react\"\n\nimport { cn } from \"@/lib/utils\"\n\nconst Accordion = AccordionPrimitive.Root\n\nconst AccordionItem = React.forwardRef<\n  React.ElementRef<typeof AccordionPrimitive.Item>,\n  React.ComponentPropsWithoutRef<typeof AccordionPrimitive.Item>\n>(({ className, ...props }, ref) => (\n  <AccordionPrimitive.Item\n    ref={ref}\n    className={cn(\"border-b\", className)}\n    {...props}\n  />\n))\nAccordionItem.displayName = \"AccordionItem\"\n\nconst AccordionTrigger = React.forwardRef<\n  React.ElementRef<typeof AccordionPrimitive.Trigger>,\n  React.ComponentPropsWithoutRef<typeof AccordionPrimitive.Trigger>\n>(({ className, children, ...props }, ref) => (\n  <AccordionPrimitive.Header className=\"flex\">\n    <AccordionPrimitive.Trigger\n      ref={ref}\n      className={cn(\n        \"flex flex-1 items-center justify-between py-4 font-medium transition-all hover:underline [&[data-state=open]>svg]:rotate-180\",\n        className\n      )}\n      {...props}\n    >\n      {children}\n      <ChevronDown className=\"h-4 w-4 shrink-0 transition-transform duration-200\" />\n    </AccordionPrimitive.Trigger>\n  </AccordionPrimitive.Header>\n))\nAccordionTrigger.displayName = AccordionPrimitive.Trigger.displayName\n\nconst AccordionContent = React.forwardRef<\n  React.ElementRef<typeof AccordionPrimitive.Content>,\n  React.ComponentPropsWithoutRef<typeof AccordionPrimitive.Content>\n>(({ className, children, ...props }, ref) => (\n  <AccordionPrimitive.Content\n    ref={ref}\n    className={cn(\n      \"overflow-hidden text-sm transition-all data-[state=closed]:animate-accordion-up data-[state=open]:animate-accordion-down\",\n      className\n    )}\n    {...props}\n  >\n    <div className=\"pb-4 pt-0\">{children}</div>\n  </AccordionPrimitive.Content>\n))\nAccordionContent.displayName = AccordionPrimitive.Content.displayName\n\nexport { Accordion, AccordionItem, AccordionTrigger, AccordionContent }\n"
+      "name": "Accordion.vue",
+      "content": "<script setup lang=\"ts\">\nimport {\n  AccordionRoot,\n  type AccordionRootEmits,\n  type AccordionRootProps,\n} from 'radix-vue'\nimport { useEmitAsProps } from '@/lib/utils'\n\nconst props = defineProps<AccordionRootProps>()\nconst emits = defineEmits<AccordionRootEmits>()\n</script>\n\n<template>\n  <AccordionRoot v-bind=\"{ ...props, ...useEmitAsProps(emits) }\" class=\"accordion\">\n    <slot />\n  </AccordionRoot>\n</template>\n"
+    },
+    {
+      "name": "AccordionContent.vue",
+      "content": "<script setup lang=\"ts\">\nimport { AccordionContent, type AccordionContentProps } from 'radix-vue'\nimport { cn } from '@/lib/utils'\n\nconst props = defineProps<AccordionContentProps & { class?: string }>()\n</script>\n\n<template>\n  <AccordionContent\n    v-bind=\"props\"\n    :class=\"\n      cn(\n        'overflow-hidden text-sm transition-all data-[state=closed]:animate-accordion-up data-[state=open]:animate-accordion-down',\n        props.class,\n      )\n    \"\n  >\n    <div class=\"pb-4 pt-0\">\n      <slot />\n    </div>\n  </AccordionContent>\n</template>\n"
+    },
+    {
+      "name": "AccordionItem.vue",
+      "content": "<script setup lang=\"ts\">\nimport { AccordionItem, type AccordionItemProps } from 'radix-vue'\nimport { cn } from '@/lib/utils'\n\nconst props = defineProps<AccordionItemProps & { class?: string }>()\n</script>\n\n<template>\n  <AccordionItem\n    v-bind=\"props\"\n    :class=\"cn('border-b', props.class ?? '')\"\n  >\n    <slot />\n  </AccordionItem>\n</template>\n"
+    },
+    {
+      "name": "AccordionTrigger.vue",
+      "content": "<script setup lang=\"ts\">\nimport {\n  AccordionHeader,\n  AccordionTrigger,\n  type AccordionTriggerProps,\n} from 'radix-vue'\nimport { ChevronDown } from 'lucide-vue-next'\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 font-medium transition-all hover:underline [&[data-state=open]>svg]:rotate-180',\n          props.class,\n        )\n      \"\n    >\n      <slot />\n      <ChevronDown\n        class=\"h-4 w-4 shrink-0 transition-transform duration-200\"\n      />\n    </AccordionTrigger>\n  </AccordionHeader>\n</template>\n"
+    },
+    {
+      "name": "index.ts",
+      "content": "export { default as Accordion } from './Accordion.vue'\nexport { default as AccordionContent } from './AccordionContent.vue'\nexport { default as AccordionItem } from './AccordionItem.vue'\nexport { default as AccordionTrigger } from './AccordionTrigger.vue'\n"
     }
   ],
   "type": "components:ui"
diff --git a/apps/www/src/public/registry/styles/default/alert-dialog.json b/apps/www/src/public/registry/styles/default/alert-dialog.json
index d39d893d..3910076a 100644
--- a/apps/www/src/public/registry/styles/default/alert-dialog.json
+++ b/apps/www/src/public/registry/styles/default/alert-dialog.json
@@ -1,15 +1,52 @@
 {
   "name": "alert-dialog",
   "dependencies": [
-    "@radix-ui/react-alert-dialog"
+    "radix-vue"
   ],
   "registryDependencies": [
+    "utils",
     "button"
   ],
   "files": [
     {
-      "name": "alert-dialog.tsx",
-      "content": "\"use client\"\n\nimport * as React from \"react\"\nimport * as AlertDialogPrimitive from \"@radix-ui/react-alert-dialog\"\n\nimport { cn } from \"@/lib/utils\"\nimport { buttonVariants } from \"@/registry/default/ui/button\"\n\nconst AlertDialog = AlertDialogPrimitive.Root\n\nconst AlertDialogTrigger = AlertDialogPrimitive.Trigger\n\nconst AlertDialogPortal = ({\n  className,\n  ...props\n}: AlertDialogPrimitive.AlertDialogPortalProps) => (\n  <AlertDialogPrimitive.Portal className={cn(className)} {...props} />\n)\nAlertDialogPortal.displayName = AlertDialogPrimitive.Portal.displayName\n\nconst AlertDialogOverlay = React.forwardRef<\n  React.ElementRef<typeof AlertDialogPrimitive.Overlay>,\n  React.ComponentPropsWithoutRef<typeof AlertDialogPrimitive.Overlay>\n>(({ className, children, ...props }, ref) => (\n  <AlertDialogPrimitive.Overlay\n    className={cn(\n      \"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      className\n    )}\n    {...props}\n    ref={ref}\n  />\n))\nAlertDialogOverlay.displayName = AlertDialogPrimitive.Overlay.displayName\n\nconst AlertDialogContent = React.forwardRef<\n  React.ElementRef<typeof AlertDialogPrimitive.Content>,\n  React.ComponentPropsWithoutRef<typeof AlertDialogPrimitive.Content>\n>(({ className, ...props }, ref) => (\n  <AlertDialogPortal>\n    <AlertDialogOverlay />\n    <AlertDialogPrimitive.Content\n      ref={ref}\n      className={cn(\n        \"fixed left-[50%] top-[50%] z-50 grid w-full max-w-lg translate-x-[-50%] translate-y-[-50%] gap-4 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        className\n      )}\n      {...props}\n    />\n  </AlertDialogPortal>\n))\nAlertDialogContent.displayName = AlertDialogPrimitive.Content.displayName\n\nconst AlertDialogHeader = ({\n  className,\n  ...props\n}: React.HTMLAttributes<HTMLDivElement>) => (\n  <div\n    className={cn(\n      \"flex flex-col space-y-2 text-center sm:text-left\",\n      className\n    )}\n    {...props}\n  />\n)\nAlertDialogHeader.displayName = \"AlertDialogHeader\"\n\nconst AlertDialogFooter = ({\n  className,\n  ...props\n}: React.HTMLAttributes<HTMLDivElement>) => (\n  <div\n    className={cn(\n      \"flex flex-col-reverse sm:flex-row sm:justify-end sm:space-x-2\",\n      className\n    )}\n    {...props}\n  />\n)\nAlertDialogFooter.displayName = \"AlertDialogFooter\"\n\nconst AlertDialogTitle = React.forwardRef<\n  React.ElementRef<typeof AlertDialogPrimitive.Title>,\n  React.ComponentPropsWithoutRef<typeof AlertDialogPrimitive.Title>\n>(({ className, ...props }, ref) => (\n  <AlertDialogPrimitive.Title\n    ref={ref}\n    className={cn(\"text-lg font-semibold\", className)}\n    {...props}\n  />\n))\nAlertDialogTitle.displayName = AlertDialogPrimitive.Title.displayName\n\nconst AlertDialogDescription = React.forwardRef<\n  React.ElementRef<typeof AlertDialogPrimitive.Description>,\n  React.ComponentPropsWithoutRef<typeof AlertDialogPrimitive.Description>\n>(({ className, ...props }, ref) => (\n  <AlertDialogPrimitive.Description\n    ref={ref}\n    className={cn(\"text-sm text-muted-foreground\", className)}\n    {...props}\n  />\n))\nAlertDialogDescription.displayName =\n  AlertDialogPrimitive.Description.displayName\n\nconst AlertDialogAction = React.forwardRef<\n  React.ElementRef<typeof AlertDialogPrimitive.Action>,\n  React.ComponentPropsWithoutRef<typeof AlertDialogPrimitive.Action>\n>(({ className, ...props }, ref) => (\n  <AlertDialogPrimitive.Action\n    ref={ref}\n    className={cn(buttonVariants(), className)}\n    {...props}\n  />\n))\nAlertDialogAction.displayName = AlertDialogPrimitive.Action.displayName\n\nconst AlertDialogCancel = React.forwardRef<\n  React.ElementRef<typeof AlertDialogPrimitive.Cancel>,\n  React.ComponentPropsWithoutRef<typeof AlertDialogPrimitive.Cancel>\n>(({ className, ...props }, ref) => (\n  <AlertDialogPrimitive.Cancel\n    ref={ref}\n    className={cn(\n      buttonVariants({ variant: \"outline\" }),\n      \"mt-2 sm:mt-0\",\n      className\n    )}\n    {...props}\n  />\n))\nAlertDialogCancel.displayName = AlertDialogPrimitive.Cancel.displayName\n\nexport {\n  AlertDialog,\n  AlertDialogTrigger,\n  AlertDialogContent,\n  AlertDialogHeader,\n  AlertDialogFooter,\n  AlertDialogTitle,\n  AlertDialogDescription,\n  AlertDialogAction,\n  AlertDialogCancel,\n}\n"
+      "name": "AlertDialog.vue",
+      "content": "<script setup lang=\"ts\">\nimport { type AlertDialogEmits, type AlertDialogProps, AlertDialogRoot } from 'radix-vue'\nimport { useEmitAsProps } from '@/lib/utils'\n\nconst props = defineProps<AlertDialogProps>()\n\nconst emits = defineEmits<AlertDialogEmits>()\n\nconst emitsAsProps = useEmitAsProps(emits)\n</script>\n\n<template>\n  <AlertDialogRoot v-bind=\"{ ...props, ...emitsAsProps }\">\n    <slot />\n  </AlertDialogRoot>\n</template>\n"
+    },
+    {
+      "name": "AlertDialogAction.vue",
+      "content": "<script setup lang=\"ts\">\nimport { AlertDialogAction, type AlertDialogActionProps } from 'radix-vue'\nimport { cn } from '@/lib/utils'\nimport { buttonVariants } from '@/lib/registry/default/ui/button'\n\nconst props = defineProps<AlertDialogActionProps>()\n</script>\n\n<template>\n  <AlertDialogAction v-bind=\"props\" :class=\"cn(buttonVariants(), $attrs.class ?? '')\">\n    <slot />\n  </AlertDialogAction>\n</template>\n"
+    },
+    {
+      "name": "AlertDialogCancel.vue",
+      "content": "<script setup lang=\"ts\">\nimport { AlertDialogCancel, type AlertDialogCancelProps } from 'radix-vue'\nimport { cn } from '@/lib/utils'\nimport { buttonVariants } from '@/lib/registry/default/ui/button'\n\nconst props = defineProps<AlertDialogCancelProps>()\n</script>\n\n<template>\n  <AlertDialogCancel v-bind=\"props\" :class=\"cn(buttonVariants({ variant: 'outline' }), 'mt-2 sm:mt-0', $attrs.class ?? '')\">\n    <slot />\n  </AlertDialogCancel>\n</template>\n"
+    },
+    {
+      "name": "AlertDialogContent.vue",
+      "content": "<script setup lang=\"ts\">\nimport {\n  AlertDialogContent,\n  type AlertDialogContentEmits,\n  type AlertDialogContentProps,\n  AlertDialogOverlay,\n  AlertDialogPortal,\n} from 'radix-vue'\nimport { cn, useEmitAsProps } from '@/lib/utils'\n\nconst props = defineProps<AlertDialogContentProps & { class?: string }>()\n\nconst emits = defineEmits<AlertDialogContentEmits>()\n\nconst emitsAsProps = useEmitAsProps(emits)\n</script>\n\n<template>\n  <AlertDialogPortal>\n    <AlertDialogOverlay\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    <AlertDialogContent\n      v-bind=\"{ ...props, ...emitsAsProps }\"\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    >\n      <slot />\n    </AlertDialogContent>\n  </AlertDialogPortal>\n</template>\n"
+    },
+    {
+      "name": "AlertDialogDescription.vue",
+      "content": "<script setup lang=\"ts\">\nimport {\n  AlertDialogDescription,\n  type AlertDialogDescriptionProps,\n} from 'radix-vue'\nimport { cn } from '@/lib/utils'\n\nconst props = defineProps<AlertDialogDescriptionProps & { class?: string }>()\n</script>\n\n<template>\n  <AlertDialogDescription\n    :class=\"cn('text-muted-foreground text-sm', props.class)\"\n    :as-child=\"props.asChild\"\n  >\n    <slot />\n  </AlertDialogDescription>\n</template>\n"
+    },
+    {
+      "name": "AlertDialogFooter.vue",
+      "content": "<script setup lang=\"ts\">\nimport { cn } from '@/lib/utils'\n\nconst props = defineProps({\n  class: {\n    type: String,\n    default: '',\n  },\n})\n</script>\n\n<template>\n  <div\n    :class=\"\n      cn(\n        'flex flex-col space-y-2 sm:space-y-0 mt-3.5 sm:flex-row sm:justify-end sm:space-x-2',\n        props.class,\n      )\n    \"\n  >\n    <slot />\n  </div>\n</template>\n"
+    },
+    {
+      "name": "AlertDialogHeader.vue",
+      "content": "<script setup lang=\"ts\">\nimport { cn } from '@/lib/utils'\n\nconst props = defineProps({\n  class: {\n    type: String,\n    default: '',\n  },\n})\n</script>\n\n<template>\n  <div\n    :class=\"cn('flex flex-col space-y-2 text-center sm:text-left', props.class)\"\n  >\n    <slot />\n  </div>\n</template>\n"
+    },
+    {
+      "name": "AlertDialogTitle.vue",
+      "content": "<script setup lang=\"ts\">\nimport { AlertDialogTitle, type AlertDialogTitleProps } from 'radix-vue'\nimport { cn } from '@/lib/utils'\n\nconst props = defineProps<AlertDialogTitleProps & { class?: string }>()\n</script>\n\n<template>\n  <AlertDialogTitle\n    :as-child=\"props.asChild\"\n    :class=\"cn('text-lg text-foreground font-semibold', props.class)\"\n  >\n    <slot />\n  </AlertDialogTitle>\n</template>\n"
+    },
+    {
+      "name": "AlertDialogTrigger.vue",
+      "content": "<script setup lang=\"ts\">\nimport { AlertDialogTrigger, type AlertDialogTriggerProps } from 'radix-vue'\n\nconst props = defineProps<AlertDialogTriggerProps>()\n</script>\n\n<template>\n  <AlertDialogTrigger v-bind=\"props\">\n    <slot />\n  </AlertDialogTrigger>\n</template>\n"
+    },
+    {
+      "name": "index.ts",
+      "content": "export { default as AlertDialog } from './AlertDialog.vue'\nexport { default as AlertDialogTrigger } from './AlertDialogTrigger.vue'\nexport { default as AlertDialogContent } from './AlertDialogContent.vue'\nexport { default as AlertDialogHeader } from './AlertDialogHeader.vue'\nexport { default as AlertDialogTitle } from './AlertDialogTitle.vue'\nexport { default as AlertDialogDescription } from './AlertDialogDescription.vue'\nexport { default as AlertDialogFooter } from './AlertDialogFooter.vue'\nexport { default as AlertDialogAction } from './AlertDialogAction.vue'\nexport { default as AlertDialogCancel } from './AlertDialogCancel.vue'\n"
     }
   ],
   "type": "components:ui"
diff --git a/apps/www/src/public/registry/styles/default/alert.json b/apps/www/src/public/registry/styles/default/alert.json
index e1bc8d0f..2155bad8 100644
--- a/apps/www/src/public/registry/styles/default/alert.json
+++ b/apps/www/src/public/registry/styles/default/alert.json
@@ -1,9 +1,25 @@
 {
   "name": "alert",
+  "dependencies": [],
+  "registryDependencies": [
+    "utils"
+  ],
   "files": [
     {
-      "name": "alert.tsx",
-      "content": "import * as React from \"react\"\nimport { cva, type VariantProps } from \"class-variance-authority\"\n\nimport { cn } from \"@/lib/utils\"\n\nconst alertVariants = cva(\n  \"relative w-full rounded-lg border p-4 [&>svg~*]:pl-7 [&>svg+div]:translate-y-[-3px] [&>svg]:absolute [&>svg]:left-4 [&>svg]:top-4 [&>svg]:text-foreground\",\n  {\n    variants: {\n      variant: {\n        default: \"bg-background text-foreground\",\n        destructive:\n          \"border-destructive/50 text-destructive dark:border-destructive [&>svg]:text-destructive\",\n      },\n    },\n    defaultVariants: {\n      variant: \"default\",\n    },\n  }\n)\n\nconst Alert = React.forwardRef<\n  HTMLDivElement,\n  React.HTMLAttributes<HTMLDivElement> & VariantProps<typeof alertVariants>\n>(({ className, variant, ...props }, ref) => (\n  <div\n    ref={ref}\n    role=\"alert\"\n    className={cn(alertVariants({ variant }), className)}\n    {...props}\n  />\n))\nAlert.displayName = \"Alert\"\n\nconst AlertTitle = React.forwardRef<\n  HTMLParagraphElement,\n  React.HTMLAttributes<HTMLHeadingElement>\n>(({ className, ...props }, ref) => (\n  <h5\n    ref={ref}\n    className={cn(\"mb-1 font-medium leading-none tracking-tight\", className)}\n    {...props}\n  />\n))\nAlertTitle.displayName = \"AlertTitle\"\n\nconst AlertDescription = React.forwardRef<\n  HTMLParagraphElement,\n  React.HTMLAttributes<HTMLParagraphElement>\n>(({ className, ...props }, ref) => (\n  <div\n    ref={ref}\n    className={cn(\"text-sm [&_p]:leading-relaxed\", className)}\n    {...props}\n  />\n))\nAlertDescription.displayName = \"AlertDescription\"\n\nexport { Alert, AlertTitle, AlertDescription }\n"
+      "name": "Alert.vue",
+      "content": "<script setup lang=\"ts\">\nimport { alertVariants } from '.'\nimport { cn } from '@/lib/utils'\n\ninterface Props {\n  variant?: NonNullable<Parameters<typeof alertVariants>[0]>['variant']\n  class?: string\n}\n\nconst props = defineProps<Props>()\n</script>\n\n<template>\n  <div :class=\"cn(alertVariants({ variant }), props.class ?? '')\">\n    <slot />\n  </div>\n</template>\n"
+    },
+    {
+      "name": "AlertDescription.vue",
+      "content": "<script setup lang=\"ts\">\nimport { cn } from '@/lib/utils'\n\nconst props = defineProps({\n  class: String,\n})\n</script>\n\n<template>\n  <div :class=\"cn('text-sm [&_p]:leading-relaxed', props.class)\">\n    <slot />\n  </div>\n</template>\n"
+    },
+    {
+      "name": "AlertTitle.vue",
+      "content": "<script setup lang=\"ts\">\nimport { cn } from '@/lib/utils'\n</script>\n\n<template>\n  <h5 :class=\"cn('mb-1 font-medium leading-none tracking-tight', $attrs.class ?? '')\">\n    <slot />\n  </h5>\n</template>\n"
+    },
+    {
+      "name": "index.ts",
+      "content": "import { cva } from 'class-variance-authority'\n\nexport { default as Alert } from './Alert.vue'\nexport { default as AlertTitle } from './AlertTitle.vue'\nexport { default as AlertDescription } from './AlertDescription.vue'\n\nexport const alertVariants = cva(\n  'relative w-full rounded-lg border p-4 [&>svg~*]:pl-7 [&>svg+div]:translate-y-[-3px] [&>svg]:absolute [&>svg]:left-4 [&>svg]:top-4 [&>svg]:text-foreground',\n  {\n    variants: {\n      variant: {\n        default: 'bg-background text-foreground',\n        destructive:\n          'border-destructive/50 text-destructive dark:border-destructive [&>svg]:text-destructive',\n      },\n    },\n    defaultVariants: {\n      variant: 'default',\n    },\n  },\n)\n"
     }
   ],
   "type": "components:ui"
diff --git a/apps/www/src/public/registry/styles/default/aspect-ratio.json b/apps/www/src/public/registry/styles/default/aspect-ratio.json
index bf7ada61..53980c68 100644
--- a/apps/www/src/public/registry/styles/default/aspect-ratio.json
+++ b/apps/www/src/public/registry/styles/default/aspect-ratio.json
@@ -1,12 +1,17 @@
 {
   "name": "aspect-ratio",
   "dependencies": [
-    "@radix-ui/react-aspect-ratio"
+    "radix-vue"
   ],
+  "registryDependencies": [],
   "files": [
     {
-      "name": "aspect-ratio.tsx",
-      "content": "\"use client\"\n\nimport * as AspectRatioPrimitive from \"@radix-ui/react-aspect-ratio\"\n\nconst AspectRatio = AspectRatioPrimitive.Root\n\nexport { AspectRatio }\n"
+      "name": "AspectRatio.vue",
+      "content": "<script setup lang=\"ts\">\nimport { AspectRatio, type AspectRatioProps } from 'radix-vue'\n\nconst props = defineProps<AspectRatioProps>()\n</script>\n\n<template>\n  <AspectRatio v-bind=\"props\">\n    <slot />\n  </AspectRatio>\n</template>\n"
+    },
+    {
+      "name": "index.ts",
+      "content": "export { default as AspectRatio } from './AspectRatio.vue'\n"
     }
   ],
   "type": "components:ui"
diff --git a/apps/www/src/public/registry/styles/default/avatar.json b/apps/www/src/public/registry/styles/default/avatar.json
index 2fa35c3e..6051b428 100644
--- a/apps/www/src/public/registry/styles/default/avatar.json
+++ b/apps/www/src/public/registry/styles/default/avatar.json
@@ -1,12 +1,27 @@
 {
   "name": "avatar",
   "dependencies": [
-    "@radix-ui/react-avatar"
+    "radix-vue"
+  ],
+  "registryDependencies": [
+    "utils"
   ],
   "files": [
     {
-      "name": "avatar.tsx",
-      "content": "\"use client\"\n\nimport * as React from \"react\"\nimport * as AvatarPrimitive from \"@radix-ui/react-avatar\"\n\nimport { cn } from \"@/lib/utils\"\n\nconst Avatar = React.forwardRef<\n  React.ElementRef<typeof AvatarPrimitive.Root>,\n  React.ComponentPropsWithoutRef<typeof AvatarPrimitive.Root>\n>(({ className, ...props }, ref) => (\n  <AvatarPrimitive.Root\n    ref={ref}\n    className={cn(\n      \"relative flex h-10 w-10 shrink-0 overflow-hidden rounded-full\",\n      className\n    )}\n    {...props}\n  />\n))\nAvatar.displayName = AvatarPrimitive.Root.displayName\n\nconst AvatarImage = React.forwardRef<\n  React.ElementRef<typeof AvatarPrimitive.Image>,\n  React.ComponentPropsWithoutRef<typeof AvatarPrimitive.Image>\n>(({ className, ...props }, ref) => (\n  <AvatarPrimitive.Image\n    ref={ref}\n    className={cn(\"aspect-square h-full w-full\", className)}\n    {...props}\n  />\n))\nAvatarImage.displayName = AvatarPrimitive.Image.displayName\n\nconst AvatarFallback = React.forwardRef<\n  React.ElementRef<typeof AvatarPrimitive.Fallback>,\n  React.ComponentPropsWithoutRef<typeof AvatarPrimitive.Fallback>\n>(({ className, ...props }, ref) => (\n  <AvatarPrimitive.Fallback\n    ref={ref}\n    className={cn(\n      \"flex h-full w-full items-center justify-center rounded-full bg-muted\",\n      className\n    )}\n    {...props}\n  />\n))\nAvatarFallback.displayName = AvatarPrimitive.Fallback.displayName\n\nexport { Avatar, AvatarImage, AvatarFallback }\n"
+      "name": "Avatar.vue",
+      "content": "<script setup lang=\"ts\">\nimport { AvatarRoot } from 'radix-vue'\nimport { avatarVariant } from '.'\nimport { cn } from '@/lib/utils'\n\ninterface Props {\n  size?: NonNullable<Parameters<typeof avatarVariant>[0]>['size']\n  shape?: NonNullable<Parameters<typeof avatarVariant>[0]>['shape']\n  class?: string\n}\n\nconst props = withDefaults(defineProps<Props>(), {\n  size: 'sm',\n  shape: 'circle',\n})\n</script>\n\n<template>\n  <AvatarRoot :class=\"cn(avatarVariant({ size, shape }), props.class)\">\n    <slot />\n  </AvatarRoot>\n</template>\n"
+    },
+    {
+      "name": "AvatarFallback.vue",
+      "content": "<script setup lang=\"ts\">\nimport { AvatarFallback, type AvatarFallbackProps } from 'radix-vue'\n\nconst props = defineProps<AvatarFallbackProps>()\n</script>\n\n<template>\n  <AvatarFallback v-bind=\"props\">\n    <slot />\n  </AvatarFallback>\n</template>\n"
+    },
+    {
+      "name": "AvatarImage.vue",
+      "content": "<script setup lang=\"ts\">\nimport { AvatarImage, type AvatarImageProps } from 'radix-vue'\n\nconst props = defineProps<AvatarImageProps>()\n</script>\n\n<template>\n  <AvatarImage v-bind=\"props\" class=\"h-full w-full object-cover\" />\n</template>\n"
+    },
+    {
+      "name": "index.ts",
+      "content": "import { cva } from 'class-variance-authority'\n\nexport { default as Avatar } from './Avatar.vue'\nexport { default as AvatarImage } from './AvatarImage.vue'\nexport { default as AvatarFallback } from './AvatarFallback.vue'\n\nexport const avatarVariant = cva(\n  'inline-flex items-center justify-center font-normal text-foregorund select-none shrink-0 bg-secondary overflow-hidden',\n  {\n    variants: {\n      size: {\n        sm: 'h-10 w-10 text-xs',\n        base: 'h-16 w-16 text-2xl',\n        lg: 'h-32 w-32 text-5xl',\n      },\n      shape: {\n        circle: 'rounded-full',\n        square: 'rounded-md',\n      },\n    },\n  },\n)\n"
     }
   ],
   "type": "components:ui"
diff --git a/apps/www/src/public/registry/styles/default/badge.json b/apps/www/src/public/registry/styles/default/badge.json
index ef710481..d94584f2 100644
--- a/apps/www/src/public/registry/styles/default/badge.json
+++ b/apps/www/src/public/registry/styles/default/badge.json
@@ -1,9 +1,17 @@
 {
   "name": "badge",
+  "dependencies": [],
+  "registryDependencies": [
+    "utils"
+  ],
   "files": [
     {
-      "name": "badge.tsx",
-      "content": "import * as React from \"react\"\nimport { cva, type VariantProps } from \"class-variance-authority\"\n\nimport { cn } from \"@/lib/utils\"\n\nconst badgeVariants = cva(\n  \"inline-flex items-center rounded-full border px-2.5 py-0.5 text-xs font-semibold transition-colors focus:outline-none focus:ring-2 focus:ring-ring focus:ring-offset-2\",\n  {\n    variants: {\n      variant: {\n        default:\n          \"border-transparent bg-primary text-primary-foreground hover:bg-primary/80\",\n        secondary:\n          \"border-transparent bg-secondary text-secondary-foreground hover:bg-secondary/80\",\n        destructive:\n          \"border-transparent bg-destructive text-destructive-foreground hover:bg-destructive/80\",\n        outline: \"text-foreground\",\n      },\n    },\n    defaultVariants: {\n      variant: \"default\",\n    },\n  }\n)\n\nexport interface BadgeProps\n  extends React.HTMLAttributes<HTMLDivElement>,\n    VariantProps<typeof badgeVariants> {}\n\nfunction Badge({ className, variant, ...props }: BadgeProps) {\n  return (\n    <div className={cn(badgeVariants({ variant }), className)} {...props} />\n  )\n}\n\nexport { Badge, badgeVariants }\n"
+      "name": "Badge.vue",
+      "content": "<script setup lang=\"ts\">\nimport type { VariantProps } from 'class-variance-authority'\nimport { badgeVariants } from '.'\nimport { cn } from '@/lib/utils'\n\ninterface BadgeVariantProps extends VariantProps<typeof badgeVariants> {}\n\ninterface Props {\n  variant?: BadgeVariantProps['variant']\n}\ndefineProps<Props>()\n</script>\n\n<template>\n  <div :class=\"cn(badgeVariants({ variant }), $attrs.class ?? '')\">\n    <slot />\n  </div>\n</template>\n"
+    },
+    {
+      "name": "index.ts",
+      "content": "import { cva } from 'class-variance-authority'\n\nexport { default as Badge } from './Badge.vue'\n\nexport const badgeVariants = cva(\n  'inline-flex items-center rounded-full border px-2.5 py-0.5 text-xs font-semibold transition-colors focus:outline-none focus:ring-2 focus:ring-ring focus:ring-offset-2',\n  {\n    variants: {\n      variant: {\n        default:\n          'border-transparent bg-primary text-primary-foreground hover:bg-primary/80',\n        secondary:\n          'border-transparent bg-secondary text-secondary-foreground hover:bg-secondary/80',\n        destructive:\n          'border-transparent bg-destructive text-destructive-foreground hover:bg-destructive/80',\n        outline: 'text-foreground',\n      },\n    },\n    defaultVariants: {\n      variant: 'default',\n    },\n  },\n)\n"
     }
   ],
   "type": "components:ui"
diff --git a/apps/www/static/registry/styles/default/breadcrumb.json b/apps/www/src/public/registry/styles/default/breadcrumb.json
similarity index 99%
rename from apps/www/static/registry/styles/default/breadcrumb.json
rename to apps/www/src/public/registry/styles/default/breadcrumb.json
index e3141670..b597e1d3 100644
--- a/apps/www/static/registry/styles/default/breadcrumb.json
+++ b/apps/www/src/public/registry/styles/default/breadcrumb.json
@@ -17,4 +17,4 @@
     }
   ],
   "type": "components:ui"
-}
+}
\ No newline at end of file
diff --git a/apps/www/src/public/registry/styles/default/button.json b/apps/www/src/public/registry/styles/default/button.json
index 73861d96..de7618f5 100644
--- a/apps/www/src/public/registry/styles/default/button.json
+++ b/apps/www/src/public/registry/styles/default/button.json
@@ -1,12 +1,17 @@
 {
   "name": "button",
-  "dependencies": [
-    "@radix-ui/react-slot"
+  "dependencies": [],
+  "registryDependencies": [
+    "utils"
   ],
   "files": [
     {
-      "name": "button.tsx",
-      "content": "import * as React from \"react\"\nimport { Slot } from \"@radix-ui/react-slot\"\nimport { cva, type VariantProps } from \"class-variance-authority\"\n\nimport { cn } from \"@/lib/utils\"\n\nconst buttonVariants = cva(\n  \"inline-flex items-center justify-center rounded-md text-sm font-medium ring-offset-background transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:pointer-events-none disabled:opacity-50\",\n  {\n    variants: {\n      variant: {\n        default: \"bg-primary text-primary-foreground hover:bg-primary/90\",\n        destructive:\n          \"bg-destructive text-destructive-foreground hover:bg-destructive/90\",\n        outline:\n          \"border border-input bg-background hover:bg-accent hover:text-accent-foreground\",\n        secondary:\n          \"bg-secondary text-secondary-foreground hover:bg-secondary/80\",\n        ghost: \"hover:bg-accent hover:text-accent-foreground\",\n        link: \"text-primary underline-offset-4 hover:underline\",\n      },\n      size: {\n        default: \"h-10 px-4 py-2\",\n        sm: \"h-9 rounded-md px-3\",\n        lg: \"h-11 rounded-md px-8\",\n        icon: \"h-10 w-10\",\n      },\n    },\n    defaultVariants: {\n      variant: \"default\",\n      size: \"default\",\n    },\n  }\n)\n\nexport interface ButtonProps\n  extends React.ButtonHTMLAttributes<HTMLButtonElement>,\n    VariantProps<typeof buttonVariants> {\n  asChild?: boolean\n}\n\nconst Button = React.forwardRef<HTMLButtonElement, ButtonProps>(\n  ({ className, variant, size, asChild = false, ...props }, ref) => {\n    const Comp = asChild ? Slot : \"button\"\n    return (\n      <Comp\n        className={cn(buttonVariants({ variant, size, className }))}\n        ref={ref}\n        {...props}\n      />\n    )\n  }\n)\nButton.displayName = \"Button\"\n\nexport { Button, buttonVariants }\n"
+      "name": "Button.vue",
+      "content": "<script setup lang=\"ts\">\nimport { buttonVariants } from '.'\nimport { cn } from '@/lib/utils'\n\ninterface Props {\n  variant?: NonNullable<Parameters<typeof buttonVariants>[0]>['variant']\n  size?: NonNullable<Parameters<typeof buttonVariants>[0]>['size']\n  as?: string\n}\n\nwithDefaults(defineProps<Props>(), {\n  as: 'button',\n})\n</script>\n\n<template>\n  <component\n    :is=\"as\"\n    :class=\"cn(buttonVariants({ variant, size }), $attrs.class ?? '')\"\n  >\n    <slot />\n  </component>\n</template>\n"
+    },
+    {
+      "name": "index.ts",
+      "content": "import { cva } from 'class-variance-authority'\n\nexport { default as Button } from './Button.vue'\n\nexport const buttonVariants = cva(\n  'inline-flex items-center justify-center rounded-md text-sm font-medium ring-offset-background transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:pointer-events-none disabled:opacity-50',\n  {\n    variants: {\n      variant: {\n        default: 'bg-primary text-primary-foreground hover:bg-primary/90',\n        destructive:\n          'bg-destructive text-destructive-foreground hover:bg-destructive/90',\n        outline:\n          'border border-input bg-background hover:bg-accent hover:text-accent-foreground',\n        secondary:\n          'bg-secondary text-secondary-foreground hover:bg-secondary/80',\n        ghost: 'hover:bg-accent hover:text-accent-foreground',\n        link: 'text-primary underline-offset-4 hover:underline',\n      },\n      size: {\n        default: 'h-10 px-4 py-2',\n        sm: 'h-9 rounded-md px-3',\n        lg: 'h-11 rounded-md px-8',\n        icon: 'h-10 w-10',\n      },\n    },\n    defaultVariants: {\n      variant: 'default',\n      size: 'default',\n    },\n  },\n)\n"
     }
   ],
   "type": "components:ui"
diff --git a/apps/www/src/public/registry/styles/default/calendar.json b/apps/www/src/public/registry/styles/default/calendar.json
index aac65b09..81f3016e 100644
--- a/apps/www/src/public/registry/styles/default/calendar.json
+++ b/apps/www/src/public/registry/styles/default/calendar.json
@@ -1,16 +1,19 @@
 {
   "name": "calendar",
   "dependencies": [
-    "react-day-picker",
-    "date-fns"
+    "v-calendar"
   ],
   "registryDependencies": [
-    "button"
+    "utils"
   ],
   "files": [
     {
-      "name": "calendar.tsx",
-      "content": "\"use client\"\n\nimport * as React from \"react\"\nimport { ChevronLeft, ChevronRight } from \"lucide-react\"\nimport { DayPicker } from \"react-day-picker\"\n\nimport { cn } from \"@/lib/utils\"\nimport { buttonVariants } from \"@/registry/default/ui/button\"\n\nexport type CalendarProps = React.ComponentProps<typeof DayPicker>\n\nfunction Calendar({\n  className,\n  classNames,\n  showOutsideDays = true,\n  ...props\n}: CalendarProps) {\n  return (\n    <DayPicker\n      showOutsideDays={showOutsideDays}\n      className={cn(\"p-3\", className)}\n      classNames={{\n        months: \"flex flex-col sm:flex-row space-y-4 sm:space-x-4 sm:space-y-0\",\n        month: \"space-y-4\",\n        caption: \"flex justify-center pt-1 relative items-center\",\n        caption_label: \"text-sm font-medium\",\n        nav: \"space-x-1 flex items-center\",\n        nav_button: cn(\n          buttonVariants({ variant: \"outline\" }),\n          \"h-7 w-7 bg-transparent p-0 opacity-50 hover:opacity-100\"\n        ),\n        nav_button_previous: \"absolute left-1\",\n        nav_button_next: \"absolute right-1\",\n        table: \"w-full border-collapse space-y-1\",\n        head_row: \"flex\",\n        head_cell:\n          \"text-muted-foreground rounded-md w-9 font-normal text-[0.8rem]\",\n        row: \"flex w-full mt-2\",\n        cell: \"text-center text-sm p-0 relative [&:has([aria-selected])]:bg-accent first:[&:has([aria-selected])]:rounded-l-md last:[&:has([aria-selected])]:rounded-r-md focus-within:relative focus-within:z-20\",\n        day: cn(\n          buttonVariants({ variant: \"ghost\" }),\n          \"h-9 w-9 p-0 font-normal aria-selected:opacity-100\"\n        ),\n        day_selected:\n          \"bg-primary text-primary-foreground hover:bg-primary hover:text-primary-foreground focus:bg-primary focus:text-primary-foreground\",\n        day_today: \"bg-accent text-accent-foreground\",\n        day_outside: \"text-muted-foreground opacity-50\",\n        day_disabled: \"text-muted-foreground opacity-50\",\n        day_range_middle:\n          \"aria-selected:bg-accent aria-selected:text-accent-foreground\",\n        day_hidden: \"invisible\",\n        ...classNames,\n      }}\n      components={{\n        IconLeft: ({ ...props }) => <ChevronLeft className=\"h-4 w-4\" />,\n        IconRight: ({ ...props }) => <ChevronRight className=\"h-4 w-4\" />,\n      }}\n      {...props}\n    />\n  )\n}\nCalendar.displayName = \"Calendar\"\n\nexport { Calendar }\n"
+      "name": "Calendar.vue",
+      "content": "<script setup lang=\"ts\">\nimport { useVModel } from '@vueuse/core'\nimport type { Calendar } from 'v-calendar'\nimport { DatePicker } from 'v-calendar'\nimport { ChevronLeft, ChevronRight } from 'lucide-vue-next'\nimport { computed, nextTick, onMounted, ref } from 'vue'\nimport { buttonVariants } from '../button'\nimport { cn } from '@/lib/utils'\n\nconst props = withDefaults(defineProps< {\n  modelValue?: string | number | Date | Partial<{\n    start: Date\n    end: Date\n  }>\n  modelModifiers?: object\n  columns?: number\n  type?: 'single' | 'range'\n}>(), {\n  type: 'single',\n  columns: 1,\n})\nconst emits = defineEmits<{\n  (e: 'update:modelValue', payload: typeof props.modelValue): void\n}>()\n\nconst modelValue = useVModel(props, 'modelValue', emits, {\n  passive: true,\n})\n\nconst datePicker = ref<InstanceType<typeof DatePicker>>()\n// @ts-expect-error in this current version of v-calendar has the calendaRef instance, which is required to handle arrow nav.\nconst calendarRef = computed<InstanceType<typeof Calendar>>(() => datePicker.value.calendarRef)\n\nfunction handleNav(direction: 'prev' | 'next') {\n  if (!calendarRef.value)\n    return\n\n  if (direction === 'prev')\n    calendarRef.value.movePrev()\n  else calendarRef.value.moveNext()\n}\n\nonMounted(async () => {\n  await nextTick()\n  await nextTick()\n  if (modelValue.value instanceof Date && calendarRef.value)\n    calendarRef.value.focusDate(modelValue.value)\n})\n</script>\n\n<template>\n  <div class=\"relative\">\n    <div class=\"absolute top-3 flex justify-between w-full px-4\">\n      <button :class=\"cn(buttonVariants({ variant: 'outline' }), 'h-7 w-7 bg-transparent p-0 opacity-50 hover:opacity-100')\" @click=\"handleNav('prev')\">\n        <ChevronLeft class=\"w-4 h-4\" />\n      </button>\n      <button :class=\"cn(buttonVariants({ variant: 'outline' }), 'h-7 w-7 bg-transparent p-0 opacity-50 hover:opacity-100')\" @click=\"handleNav('next')\">\n        <ChevronRight class=\"w-4 h-4\" />\n      </button>\n    </div>\n\n    <DatePicker ref=\"datePicker\" v-model=\"modelValue\" :model-modifiers=\"modelModifiers\" class=\"calendar\" trim-weeks :transition=\"'none'\" :columns=\"columns\" />\n  </div>\n</template>\n\n<style lang=\"postcss\">\n.calendar {\n  @apply p-3 text-center;\n}\n.calendar .vc-pane-layout {\n  @apply grid gap-4;\n}\n.calendar .vc-title {\n  @apply text-sm font-medium pointer-events-none;\n}\n.calendar .vc-pane-header-wrapper {\n  @apply hidden;\n}\n.calendar .vc-weeks {\n  @apply mt-4;\n}\n.calendar .vc-weekdays {\n  @apply flex;\n}\n.calendar .vc-weekday {\n  @apply text-muted-foreground rounded-md w-9 font-normal text-[0.8rem];\n}\n.calendar .vc-weeks {\n  @apply w-full space-y-2 flex flex-col [&>_div]:grid [&>_div]:grid-cols-7;\n}\n.calendar .vc-day:has(.vc-highlights) {\n  @apply bg-accent first:rounded-l-md last:rounded-r-md overflow-hidden;\n}\n.calendar .vc-day-content  {\n  @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;\n}\n.calendar .vc-day-content:not(.vc-highlight-content-light) {\n  @apply rounded-md;\n}\n.calendar .is-not-in-month:not(:has(.vc-highlight-content-solid)):not(:has(.vc-highlight-content-light)):not(:has(.vc-highlight-content-outline)),\n.calendar .vc-disabled {\n  @apply text-muted-foreground opacity-50;\n}\n.calendar .vc-highlight-content-solid, .calendar .vc-highlight-content-outline {\n  @apply bg-primary text-primary-foreground hover:bg-primary hover:text-primary-foreground focus:bg-primary focus:text-primary-foreground;\n}\n.calendar .vc-highlight-content-light {\n  @apply bg-accent text-accent-foreground;\n}\n</style>\n"
+    },
+    {
+      "name": "index.ts",
+      "content": "export { default as Calendar } from './Calendar.vue'\n"
     }
   ],
   "type": "components:ui"
diff --git a/apps/www/src/public/registry/styles/default/card.json b/apps/www/src/public/registry/styles/default/card.json
index ef31d3a6..b1c1ca0c 100644
--- a/apps/www/src/public/registry/styles/default/card.json
+++ b/apps/www/src/public/registry/styles/default/card.json
@@ -1,9 +1,37 @@
 {
   "name": "card",
+  "dependencies": [],
+  "registryDependencies": [
+    "utils"
+  ],
   "files": [
     {
-      "name": "card.tsx",
-      "content": "import * as React from \"react\"\n\nimport { cn } from \"@/lib/utils\"\n\nconst Card = React.forwardRef<\n  HTMLDivElement,\n  React.HTMLAttributes<HTMLDivElement>\n>(({ className, ...props }, ref) => (\n  <div\n    ref={ref}\n    className={cn(\n      \"rounded-lg border bg-card text-card-foreground shadow-sm\",\n      className\n    )}\n    {...props}\n  />\n))\nCard.displayName = \"Card\"\n\nconst CardHeader = React.forwardRef<\n  HTMLDivElement,\n  React.HTMLAttributes<HTMLDivElement>\n>(({ className, ...props }, ref) => (\n  <div\n    ref={ref}\n    className={cn(\"flex flex-col space-y-1.5 p-6\", className)}\n    {...props}\n  />\n))\nCardHeader.displayName = \"CardHeader\"\n\nconst CardTitle = React.forwardRef<\n  HTMLParagraphElement,\n  React.HTMLAttributes<HTMLHeadingElement>\n>(({ className, ...props }, ref) => (\n  <h3\n    ref={ref}\n    className={cn(\n      \"text-2xl font-semibold leading-none tracking-tight\",\n      className\n    )}\n    {...props}\n  />\n))\nCardTitle.displayName = \"CardTitle\"\n\nconst CardDescription = React.forwardRef<\n  HTMLParagraphElement,\n  React.HTMLAttributes<HTMLParagraphElement>\n>(({ className, ...props }, ref) => (\n  <p\n    ref={ref}\n    className={cn(\"text-sm text-muted-foreground\", className)}\n    {...props}\n  />\n))\nCardDescription.displayName = \"CardDescription\"\n\nconst CardContent = React.forwardRef<\n  HTMLDivElement,\n  React.HTMLAttributes<HTMLDivElement>\n>(({ className, ...props }, ref) => (\n  <div ref={ref} className={cn(\"p-6 pt-0\", className)} {...props} />\n))\nCardContent.displayName = \"CardContent\"\n\nconst CardFooter = React.forwardRef<\n  HTMLDivElement,\n  React.HTMLAttributes<HTMLDivElement>\n>(({ className, ...props }, ref) => (\n  <div\n    ref={ref}\n    className={cn(\"flex items-center p-6 pt-0\", className)}\n    {...props}\n  />\n))\nCardFooter.displayName = \"CardFooter\"\n\nexport { Card, CardHeader, CardFooter, CardTitle, CardDescription, CardContent }\n"
+      "name": "Card.vue",
+      "content": "<script setup lang=\"ts\">\nimport { cn } from '@/lib/utils'\n\nconst props = defineProps({\n  class: {\n    type: String,\n    default: '',\n  },\n})\n</script>\n\n<template>\n  <div\n    :class=\"\n      cn(\n        'rounded-lg border bg-card text-card-foreground shadow-sm',\n        props.class,\n      )\n    \"\n  >\n    <slot />\n  </div>\n</template>\n"
+    },
+    {
+      "name": "CardContent.vue",
+      "content": "<script setup lang=\"ts\">\nimport { cn } from '@/lib/utils'\n\nconst props = defineProps({\n  class: {\n    type: String,\n    default: '',\n  },\n})\n</script>\n\n<template>\n  <div :class=\"cn('p-6 pt-0', props.class)\">\n    <slot />\n  </div>\n</template>\n"
+    },
+    {
+      "name": "CardDescription.vue",
+      "content": "<script setup lang=\"ts\">\nimport { cn } from '@/lib/utils'\n\nconst props = defineProps({\n  class: {\n    type: String,\n    default: '',\n  },\n})\n</script>\n\n<template>\n  <p :class=\"cn('text-sm text-muted-foreground', props.class)\">\n    <slot />\n  </p>\n</template>\n"
+    },
+    {
+      "name": "CardFooter.vue",
+      "content": "<script setup lang=\"ts\">\nimport { cn } from '@/lib/utils'\n\nconst props = defineProps({\n  class: {\n    type: String,\n    default: '',\n  },\n})\n</script>\n\n<template>\n  <div :class=\"cn('p-6 pt-0', props.class)\">\n    <slot />\n  </div>\n</template>\n"
+    },
+    {
+      "name": "CardHeader.vue",
+      "content": "<script setup lang=\"ts\">\nimport { cn } from '@/lib/utils'\n\nconst props = defineProps({\n  class: {\n    type: String,\n    default: '',\n  },\n})\n</script>\n\n<template>\n  <div :class=\"cn('flex flex-col space-y-1.5 p-6', props.class)\">\n    <slot />\n  </div>\n</template>\n"
+    },
+    {
+      "name": "CardTitle.vue",
+      "content": "<script setup lang=\"ts\">\nimport { cn } from '@/lib/utils'\n\nconst props = defineProps({\n  class: {\n    type: String,\n    default: '',\n  },\n})\n</script>\n\n<template>\n  <h3\n    :class=\"\n      cn('text-2xl font-semibold leading-none tracking-tighter', props.class)\n    \"\n  >\n    <slot />\n  </h3>\n</template>\n"
+    },
+    {
+      "name": "index.ts",
+      "content": "export { default as Card } from './Card.vue'\nexport { default as CardHeader } from './CardHeader.vue'\nexport { default as CardTitle } from './CardTitle.vue'\nexport { default as CardDescription } from './CardDescription.vue'\nexport { default as CardContent } from './CardContent.vue'\nexport { default as CardFooter } from './CardFooter.vue'\n"
     }
   ],
   "type": "components:ui"
diff --git a/apps/www/src/public/registry/styles/default/checkbox.json b/apps/www/src/public/registry/styles/default/checkbox.json
index 2a31260e..a6aa8254 100644
--- a/apps/www/src/public/registry/styles/default/checkbox.json
+++ b/apps/www/src/public/registry/styles/default/checkbox.json
@@ -1,12 +1,19 @@
 {
   "name": "checkbox",
   "dependencies": [
-    "@radix-ui/react-checkbox"
+    "radix-vue"
+  ],
+  "registryDependencies": [
+    "utils"
   ],
   "files": [
     {
-      "name": "checkbox.tsx",
-      "content": "\"use client\"\n\nimport * as React from \"react\"\nimport * as CheckboxPrimitive from \"@radix-ui/react-checkbox\"\nimport { Check } from \"lucide-react\"\n\nimport { cn } from \"@/lib/utils\"\n\nconst Checkbox = React.forwardRef<\n  React.ElementRef<typeof CheckboxPrimitive.Root>,\n  React.ComponentPropsWithoutRef<typeof CheckboxPrimitive.Root>\n>(({ className, ...props }, ref) => (\n  <CheckboxPrimitive.Root\n    ref={ref}\n    className={cn(\n      \"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      className\n    )}\n    {...props}\n  >\n    <CheckboxPrimitive.Indicator\n      className={cn(\"flex items-center justify-center text-current\")}\n    >\n      <Check className=\"h-4 w-4\" />\n    </CheckboxPrimitive.Indicator>\n  </CheckboxPrimitive.Root>\n))\nCheckbox.displayName = CheckboxPrimitive.Root.displayName\n\nexport { Checkbox }\n"
+      "name": "Checkbox.vue",
+      "content": "<script setup lang=\"ts\">\nimport type { CheckboxRootEmits, CheckboxRootProps } from 'radix-vue'\nimport { CheckboxIndicator, CheckboxRoot } from 'radix-vue'\nimport { Check } from 'lucide-vue-next'\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      <Check class=\"h-4 w-4\" />\n    </CheckboxIndicator>\n  </CheckboxRoot>\n</template>\n"
+    },
+    {
+      "name": "index.ts",
+      "content": "export { default as Checkbox } from './Checkbox.vue'\n"
     }
   ],
   "type": "components:ui"
diff --git a/apps/www/src/public/registry/styles/default/collapsible.json b/apps/www/src/public/registry/styles/default/collapsible.json
index 99a398a9..6cce817e 100644
--- a/apps/www/src/public/registry/styles/default/collapsible.json
+++ b/apps/www/src/public/registry/styles/default/collapsible.json
@@ -1,12 +1,27 @@
 {
   "name": "collapsible",
   "dependencies": [
-    "@radix-ui/react-collapsible"
+    "radix-vue"
+  ],
+  "registryDependencies": [
+    "utils"
   ],
   "files": [
     {
-      "name": "collapsible.tsx",
-      "content": "\"use client\"\n\nimport * as CollapsiblePrimitive from \"@radix-ui/react-collapsible\"\n\nconst Collapsible = CollapsiblePrimitive.Root\n\nconst CollapsibleTrigger = CollapsiblePrimitive.CollapsibleTrigger\n\nconst CollapsibleContent = CollapsiblePrimitive.CollapsibleContent\n\nexport { Collapsible, CollapsibleTrigger, CollapsibleContent }\n"
+      "name": "Collapsible.vue",
+      "content": "<script setup lang=\"ts\">\nimport { CollapsibleRoot } from 'radix-vue'\nimport type { CollapsibleRootEmits, CollapsibleRootProps } from 'radix-vue'\nimport { useEmitAsProps } from '@/lib/utils'\n\nconst props = defineProps<CollapsibleRootProps>()\nconst emits = defineEmits<CollapsibleRootEmits>()\n</script>\n\n<template>\n  <CollapsibleRoot v-slot=\"{ open }\" v-bind=\"{ ...props, ...useEmitAsProps(emits) }\">\n    <slot :open=\"open\" />\n  </CollapsibleRoot>\n</template>\n"
+    },
+    {
+      "name": "CollapsibleContent.vue",
+      "content": "<script setup lang=\"ts\">\nimport { CollapsibleContent, type CollapsibleContentProps } from 'radix-vue'\n\nconst props = defineProps<CollapsibleContentProps>()\n</script>\n\n<template>\n  <CollapsibleContent v-bind=\"props\">\n    <slot />\n  </CollapsibleContent>\n</template>\n"
+    },
+    {
+      "name": "CollapsibleTrigger.vue",
+      "content": "<script setup lang=\"ts\">\nimport { CollapsibleTrigger, type CollapsibleTriggerProps } from 'radix-vue'\n\nconst props = defineProps<CollapsibleTriggerProps>()\n</script>\n\n<template>\n  <CollapsibleTrigger v-bind=\"props\">\n    <slot />\n  </CollapsibleTrigger>\n</template>\n"
+    },
+    {
+      "name": "index.ts",
+      "content": "export { default as Collapsible } from './Collapsible.vue'\nexport { default as CollapsibleTrigger } from './CollapsibleTrigger.vue'\nexport { default as CollapsibleContent } from './CollapsibleContent.vue'\n"
     }
   ],
   "type": "components:ui"
diff --git a/apps/www/src/public/registry/styles/default/context-menu.json b/apps/www/src/public/registry/styles/default/context-menu.json
index 2eb10035..5d486263 100644
--- a/apps/www/src/public/registry/styles/default/context-menu.json
+++ b/apps/www/src/public/registry/styles/default/context-menu.json
@@ -1,12 +1,75 @@
 {
   "name": "context-menu",
   "dependencies": [
-    "@radix-ui/react-context-menu"
+    "radix-vue"
+  ],
+  "registryDependencies": [
+    "utils"
   ],
   "files": [
     {
-      "name": "context-menu.tsx",
-      "content": "\"use client\"\n\nimport * as React from \"react\"\nimport * as ContextMenuPrimitive from \"@radix-ui/react-context-menu\"\nimport { Check, ChevronRight, Circle } from \"lucide-react\"\n\nimport { cn } from \"@/lib/utils\"\n\nconst ContextMenu = ContextMenuPrimitive.Root\n\nconst ContextMenuTrigger = ContextMenuPrimitive.Trigger\n\nconst ContextMenuGroup = ContextMenuPrimitive.Group\n\nconst ContextMenuPortal = ContextMenuPrimitive.Portal\n\nconst ContextMenuSub = ContextMenuPrimitive.Sub\n\nconst ContextMenuRadioGroup = ContextMenuPrimitive.RadioGroup\n\nconst ContextMenuSubTrigger = React.forwardRef<\n  React.ElementRef<typeof ContextMenuPrimitive.SubTrigger>,\n  React.ComponentPropsWithoutRef<typeof ContextMenuPrimitive.SubTrigger> & {\n    inset?: boolean\n  }\n>(({ className, inset, children, ...props }, ref) => (\n  <ContextMenuPrimitive.SubTrigger\n    ref={ref}\n    className={cn(\n      \"flex cursor-default select-none items-center rounded-sm px-2 py-1.5 text-sm outline-none focus:bg-accent focus:text-accent-foreground data-[state=open]:bg-accent data-[state=open]:text-accent-foreground\",\n      inset && \"pl-8\",\n      className\n    )}\n    {...props}\n  >\n    {children}\n    <ChevronRight className=\"ml-auto h-4 w-4\" />\n  </ContextMenuPrimitive.SubTrigger>\n))\nContextMenuSubTrigger.displayName = ContextMenuPrimitive.SubTrigger.displayName\n\nconst ContextMenuSubContent = React.forwardRef<\n  React.ElementRef<typeof ContextMenuPrimitive.SubContent>,\n  React.ComponentPropsWithoutRef<typeof ContextMenuPrimitive.SubContent>\n>(({ className, ...props }, ref) => (\n  <ContextMenuPrimitive.SubContent\n    ref={ref}\n    className={cn(\n      \"z-50 min-w-[8rem] overflow-hidden rounded-md border bg-popover p-1 text-popover-foreground shadow-md 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-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2\",\n      className\n    )}\n    {...props}\n  />\n))\nContextMenuSubContent.displayName = ContextMenuPrimitive.SubContent.displayName\n\nconst ContextMenuContent = React.forwardRef<\n  React.ElementRef<typeof ContextMenuPrimitive.Content>,\n  React.ComponentPropsWithoutRef<typeof ContextMenuPrimitive.Content>\n>(({ className, ...props }, ref) => (\n  <ContextMenuPrimitive.Portal>\n    <ContextMenuPrimitive.Content\n      ref={ref}\n      className={cn(\n        \"z-50 min-w-[8rem] overflow-hidden rounded-md border bg-popover p-1 text-popover-foreground shadow-md animate-in fade-in-80 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-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2\",\n        className\n      )}\n      {...props}\n    />\n  </ContextMenuPrimitive.Portal>\n))\nContextMenuContent.displayName = ContextMenuPrimitive.Content.displayName\n\nconst ContextMenuItem = React.forwardRef<\n  React.ElementRef<typeof ContextMenuPrimitive.Item>,\n  React.ComponentPropsWithoutRef<typeof ContextMenuPrimitive.Item> & {\n    inset?: boolean\n  }\n>(({ className, inset, ...props }, ref) => (\n  <ContextMenuPrimitive.Item\n    ref={ref}\n    className={cn(\n      \"relative flex cursor-default select-none items-center rounded-sm px-2 py-1.5 text-sm outline-none focus:bg-accent focus:text-accent-foreground data-[disabled]:pointer-events-none data-[disabled]:opacity-50\",\n      inset && \"pl-8\",\n      className\n    )}\n    {...props}\n  />\n))\nContextMenuItem.displayName = ContextMenuPrimitive.Item.displayName\n\nconst ContextMenuCheckboxItem = React.forwardRef<\n  React.ElementRef<typeof ContextMenuPrimitive.CheckboxItem>,\n  React.ComponentPropsWithoutRef<typeof ContextMenuPrimitive.CheckboxItem>\n>(({ className, children, checked, ...props }, ref) => (\n  <ContextMenuPrimitive.CheckboxItem\n    ref={ref}\n    className={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      className\n    )}\n    checked={checked}\n    {...props}\n  >\n    <span className=\"absolute left-2 flex h-3.5 w-3.5 items-center justify-center\">\n      <ContextMenuPrimitive.ItemIndicator>\n        <Check className=\"h-4 w-4\" />\n      </ContextMenuPrimitive.ItemIndicator>\n    </span>\n    {children}\n  </ContextMenuPrimitive.CheckboxItem>\n))\nContextMenuCheckboxItem.displayName =\n  ContextMenuPrimitive.CheckboxItem.displayName\n\nconst ContextMenuRadioItem = React.forwardRef<\n  React.ElementRef<typeof ContextMenuPrimitive.RadioItem>,\n  React.ComponentPropsWithoutRef<typeof ContextMenuPrimitive.RadioItem>\n>(({ className, children, ...props }, ref) => (\n  <ContextMenuPrimitive.RadioItem\n    ref={ref}\n    className={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      className\n    )}\n    {...props}\n  >\n    <span className=\"absolute left-2 flex h-3.5 w-3.5 items-center justify-center\">\n      <ContextMenuPrimitive.ItemIndicator>\n        <Circle className=\"h-2 w-2 fill-current\" />\n      </ContextMenuPrimitive.ItemIndicator>\n    </span>\n    {children}\n  </ContextMenuPrimitive.RadioItem>\n))\nContextMenuRadioItem.displayName = ContextMenuPrimitive.RadioItem.displayName\n\nconst ContextMenuLabel = React.forwardRef<\n  React.ElementRef<typeof ContextMenuPrimitive.Label>,\n  React.ComponentPropsWithoutRef<typeof ContextMenuPrimitive.Label> & {\n    inset?: boolean\n  }\n>(({ className, inset, ...props }, ref) => (\n  <ContextMenuPrimitive.Label\n    ref={ref}\n    className={cn(\n      \"px-2 py-1.5 text-sm font-semibold text-foreground\",\n      inset && \"pl-8\",\n      className\n    )}\n    {...props}\n  />\n))\nContextMenuLabel.displayName = ContextMenuPrimitive.Label.displayName\n\nconst ContextMenuSeparator = React.forwardRef<\n  React.ElementRef<typeof ContextMenuPrimitive.Separator>,\n  React.ComponentPropsWithoutRef<typeof ContextMenuPrimitive.Separator>\n>(({ className, ...props }, ref) => (\n  <ContextMenuPrimitive.Separator\n    ref={ref}\n    className={cn(\"-mx-1 my-1 h-px bg-border\", className)}\n    {...props}\n  />\n))\nContextMenuSeparator.displayName = ContextMenuPrimitive.Separator.displayName\n\nconst ContextMenuShortcut = ({\n  className,\n  ...props\n}: React.HTMLAttributes<HTMLSpanElement>) => {\n  return (\n    <span\n      className={cn(\n        \"ml-auto text-xs tracking-widest text-muted-foreground\",\n        className\n      )}\n      {...props}\n    />\n  )\n}\nContextMenuShortcut.displayName = \"ContextMenuShortcut\"\n\nexport {\n  ContextMenu,\n  ContextMenuTrigger,\n  ContextMenuContent,\n  ContextMenuItem,\n  ContextMenuCheckboxItem,\n  ContextMenuRadioItem,\n  ContextMenuLabel,\n  ContextMenuSeparator,\n  ContextMenuShortcut,\n  ContextMenuGroup,\n  ContextMenuPortal,\n  ContextMenuSub,\n  ContextMenuSubContent,\n  ContextMenuSubTrigger,\n  ContextMenuRadioGroup,\n}\n"
+      "name": "ContextMenu.vue",
+      "content": "<script setup lang=\"ts\">\nimport { ContextMenuRoot } from 'radix-vue'\nimport type { ContextMenuRootEmits, ContextMenuRootProps } from 'radix-vue'\nimport { useEmitAsProps } from '@/lib/utils'\n\nconst props = defineProps<ContextMenuRootProps>()\nconst emits = defineEmits<ContextMenuRootEmits>()\n</script>\n\n<template>\n  <ContextMenuRoot v-bind=\"{ ...props, ...useEmitAsProps(emits) }\">\n    <slot />\n  </ContextMenuRoot>\n</template>\n"
+    },
+    {
+      "name": "ContextMenuCheckboxItem.vue",
+      "content": "<script setup lang=\"ts\">\nimport {\n  ContextMenuCheckboxItem,\n  type ContextMenuCheckboxItemEmits,\n  type ContextMenuCheckboxItemProps,\n  ContextMenuItemIndicator,\n} from 'radix-vue'\nimport { Check } from 'lucide-vue-next'\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        <Check class=\"h-4 h-w\" />\n      </ContextMenuItemIndicator>\n    </span>\n    <slot />\n  </ContextMenuCheckboxItem>\n</template>\n"
+    },
+    {
+      "name": "ContextMenuContent.vue",
+      "content": "<script setup lang=\"ts\">\nimport {\n  ContextMenuContent,\n  type ContextMenuContentEmits,\n  type ContextMenuContentProps,\n  ContextMenuPortal,\n} from 'radix-vue'\nimport { cn, useEmitAsProps } from '@/lib/utils'\n\nconst props = defineProps<ContextMenuContentProps & { class?: string }>()\nconst emits = defineEmits<ContextMenuContentEmits>()\n</script>\n\n<template>\n  <ContextMenuPortal>\n    <ContextMenuContent\n      :align-offset=\"props.alignOffset\"\n      :class=\"[\n        cn(\n          'z-50 min-w-[8rem] overflow-hidden rounded-md border bg-popover p-1 text-popover-foreground shadow-md animate-in fade-in-80 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-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2',\n          props.class,\n        ),\n      ]\"\n      v-bind=\"{ ...props, ...useEmitAsProps(emits) }\"\n    >\n      <slot />\n    </ContextMenuContent>\n  </ContextMenuPortal>\n</template>\n"
+    },
+    {
+      "name": "ContextMenuGroup.vue",
+      "content": "<script setup lang=\"ts\">\nimport { ContextMenuGroup, type ContextMenuGroupProps } from 'radix-vue'\n\nconst props = defineProps<ContextMenuGroupProps>()\n</script>\n\n<template>\n  <ContextMenuGroup v-bind=\"props\">\n    <slot />\n  </ContextMenuGroup>\n</template>\n"
+    },
+    {
+      "name": "ContextMenuItem.vue",
+      "content": "<script setup lang=\"ts\">\nimport {\n  ContextMenuItem,\n  type ContextMenuItemEmits,\n  type ContextMenuItemProps,\n} from 'radix-vue'\nimport { cn, useEmitAsProps } from '@/lib/utils'\n\nconst props = defineProps<ContextMenuItemProps & { class?: string; inset?: boolean }>()\nconst emits = defineEmits<ContextMenuItemEmits>()\n</script>\n\n<template>\n  <ContextMenuItem\n    v-bind=\"{ ...props, ...useEmitAsProps(emits) }\"\n    :class=\"[\n      cn(\n        'relative flex cursor-default select-none items-center rounded-sm px-2 py-1.5 text-sm outline-none focus:bg-accent focus:text-accent-foreground data-[disabled]:pointer-events-none data-[disabled]:opacity-50',\n        inset && 'pl-8',\n        props.class,\n      ),\n    ]\"\n  >\n    <slot />\n  </ContextMenuItem>\n</template>\n"
+    },
+    {
+      "name": "ContextMenuLabel.vue",
+      "content": "<script setup lang=\"ts\">\nimport { ContextMenuLabel, type ContextMenuLabelProps } from 'radix-vue'\nimport { cn } from '@/lib/utils'\n\nconst props = defineProps<ContextMenuLabelProps & { class?: string; inset?: boolean }>()\n</script>\n\n<template>\n  <ContextMenuLabel\n    v-bind=\"props\"\n    :class=\"\n      cn('px-2 py-1.5 text-sm font-semibold text-foreground',\n         inset && 'pl-8', props.class ?? '',\n      )\"\n  >\n    <slot />\n  </ContextMenuLabel>\n</template>\n"
+    },
+    {
+      "name": "ContextMenuPortal.vue",
+      "content": "<script setup lang=\"ts\">\nimport { ContextMenuPortal, type ContextMenuPortalProps } from 'radix-vue'\n\nconst props = defineProps<ContextMenuPortalProps>()\n</script>\n\n<template>\n  <ContextMenuPortal v-bind=\"props\">\n    <slot />\n  </ContextMenuPortal>\n</template>\n"
+    },
+    {
+      "name": "ContextMenuRadioGroup.vue",
+      "content": "<script setup lang=\"ts\">\nimport {\n  ContextMenuRadioGroup,\n  type ContextMenuRadioGroupEmits,\n  type ContextMenuRadioGroupProps,\n} from 'radix-vue'\n\nconst props = defineProps<ContextMenuRadioGroupProps>()\n\nconst emits = defineEmits<ContextMenuRadioGroupEmits>()\n</script>\n\n<template>\n  <ContextMenuRadioGroup\n    v-bind=\"props\"\n    @update:model-value=\"emits('update:modelValue', $event)\"\n  >\n    <slot />\n  </ContextMenuRadioGroup>\n</template>\n"
+    },
+    {
+      "name": "ContextMenuRadioItem.vue",
+      "content": "<script setup lang=\"ts\">\nimport {\n  ContextMenuItemIndicator,\n  ContextMenuRadioItem,\n  type ContextMenuRadioItemEmits,\n  type ContextMenuRadioItemProps,\n} from 'radix-vue'\nimport { Circle } from 'lucide-vue-next'\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        <Circle class=\"h-2 w-2 fill-current\" />\n      </ContextMenuItemIndicator>\n    </span>\n    <slot />\n  </ContextMenuRadioItem>\n</template>\n"
+    },
+    {
+      "name": "ContextMenuSeparator.vue",
+      "content": "<script setup lang=\"ts\">\nimport {\n  ContextMenuSeparator,\n  type ContextMenuSeparatorProps,\n} from 'radix-vue'\nimport { cn } from '@/lib/utils'\n\nconst props = defineProps<ContextMenuSeparatorProps>()\n</script>\n\n<template>\n  <ContextMenuSeparator v-bind=\"props\" :class=\"cn('-mx-1 my-1 h-px bg-border', $attrs.class ?? '')\" />\n</template>\n"
+    },
+    {
+      "name": "ContextMenuShortcut.vue",
+      "content": "<script setup lang=\"ts\">\nimport { cn } from '@/lib/utils'\n</script>\n\n<template>\n  <span :class=\"cn('ml-auto text-xs tracking-widest text-muted-foreground', $attrs.class ?? '')\">\n    <slot />\n  </span>\n</template>\n"
+    },
+    {
+      "name": "ContextMenuSub.vue",
+      "content": "<script setup lang=\"ts\">\nimport {\n  ContextMenuSub,\n  type ContextMenuSubEmits,\n  type ContextMenuSubProps,\n} from 'radix-vue'\n\nconst props = defineProps<ContextMenuSubProps>()\n\nconst emits = defineEmits<ContextMenuSubEmits>()\n</script>\n\n<template>\n  <ContextMenuSub v-bind=\"props\" @update:open=\"emits('update:open', $event)\">\n    <slot />\n  </ContextMenuSub>\n</template>\n"
+    },
+    {
+      "name": "ContextMenuSubContent.vue",
+      "content": "<script setup lang=\"ts\">\nimport {\n  ContextMenuSubContent,\n  type DropdownMenuSubContentEmits,\n  type DropdownMenuSubContentProps,\n} from 'radix-vue'\nimport { cn, useEmitAsProps } from '@/lib/utils'\n\nconst props = defineProps<DropdownMenuSubContentProps & { class?: string }>()\nconst emits = defineEmits<DropdownMenuSubContentEmits>()\n</script>\n\n<template>\n  <ContextMenuSubContent\n    v-bind=\"{ ...props, ...useEmitAsProps(emits) }\"\n    :class=\"\n      cn(\n        'z-50 min-w-[8rem] overflow-hidden rounded-md border bg-popover p-1 text-popover-foreground shadow-md 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-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2',\n        props.class,\n      )\n    \"\n  >\n    <slot />\n  </ContextMenuSubContent>\n</template>\n"
+    },
+    {
+      "name": "ContextMenuSubTrigger.vue",
+      "content": "<script setup lang=\"ts\">\nimport {\n  ContextMenuSubTrigger,\n  type ContextMenuSubTriggerProps,\n} from 'radix-vue'\nimport { ChevronRight } from 'lucide-vue-next'\nimport { cn } from '@/lib/utils'\n\nconst props = defineProps<ContextMenuSubTriggerProps & { class?: string; inset?: boolean }>()\n</script>\n\n<template>\n  <ContextMenuSubTrigger\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 focus:text-accent-foreground data-[state=open]:bg-accent data-[state=open]:text-accent-foreground',\n        inset && 'pl-8',\n        props.class,\n      ),\n    ]\"\n  >\n    <slot />\n    <ChevronRight class=\"ml-auto h-4 w-4\" />\n  </ContextMenuSubTrigger>\n</template>\n"
+    },
+    {
+      "name": "ContextMenuTrigger.vue",
+      "content": "<script setup lang=\"ts\">\nimport { ContextMenuTrigger, type ContextMenuTriggerProps } from 'radix-vue'\n\nconst props = defineProps<ContextMenuTriggerProps>()\n</script>\n\n<template>\n  <ContextMenuTrigger v-bind=\"props\">\n    <slot />\n  </ContextMenuTrigger>\n</template>\n"
+    },
+    {
+      "name": "index.ts",
+      "content": "export { default as ContextMenu } from './ContextMenu.vue'\nexport { default as ContextMenuTrigger } from './ContextMenuTrigger.vue'\nexport { default as ContextMenuContent } from './ContextMenuContent.vue'\nexport { default as ContextMenuGroup } from './ContextMenuGroup.vue'\nexport { default as ContextMenuRadioGroup } from './ContextMenuRadioGroup.vue'\nexport { default as ContextMenuItem } from './ContextMenuItem.vue'\nexport { default as ContextMenuCheckboxItem } from './ContextMenuCheckboxItem.vue'\nexport { default as ContextMenuRadioItem } from './ContextMenuRadioItem.vue'\nexport { default as ContextMenuShortcut } from './ContextMenuShortcut.vue'\nexport { default as ContextMenuSeparator } from './ContextMenuSeparator.vue'\nexport { default as ContextMenuLabel } from './ContextMenuLabel.vue'\nexport { default as ContextMenuSub } from './ContextMenuSub.vue'\nexport { default as ContextMenuSubTrigger } from './ContextMenuSubTrigger.vue'\nexport { default as ContextMenuSubContent } from './ContextMenuSubContent.vue'\n"
     }
   ],
   "type": "components:ui"
diff --git a/apps/www/static/registry/styles/default/data-table.json b/apps/www/src/public/registry/styles/default/data-table.json
similarity index 99%
rename from apps/www/static/registry/styles/default/data-table.json
rename to apps/www/src/public/registry/styles/default/data-table.json
index fea94d9b..6f15fbca 100644
--- a/apps/www/static/registry/styles/default/data-table.json
+++ b/apps/www/src/public/registry/styles/default/data-table.json
@@ -1,6 +1,8 @@
 {
   "name": "data-table",
-  "dependencies": [],
+  "dependencies": [
+    "@tanstack/vue-table"
+  ],
   "registryDependencies": [],
   "files": [
     {
@@ -13,4 +15,4 @@
     }
   ],
   "type": "components:ui"
-}
+}
\ No newline at end of file
diff --git a/apps/www/static/registry/styles/default/date-picker.json b/apps/www/src/public/registry/styles/default/date-picker.json
similarity index 97%
rename from apps/www/static/registry/styles/default/date-picker.json
rename to apps/www/src/public/registry/styles/default/date-picker.json
index 4aaa7837..26acd94f 100644
--- a/apps/www/static/registry/styles/default/date-picker.json
+++ b/apps/www/src/public/registry/styles/default/date-picker.json
@@ -1,6 +1,8 @@
 {
   "name": "date-picker",
-  "dependencies": [],
+  "dependencies": [
+    "v-calendar"
+  ],
   "registryDependencies": [],
   "files": [
     {
@@ -13,4 +15,4 @@
     }
   ],
   "type": "components:ui"
-}
+}
\ No newline at end of file
diff --git a/apps/www/src/public/registry/styles/default/dialog.json b/apps/www/src/public/registry/styles/default/dialog.json
index ed0ad45d..1601bae5 100644
--- a/apps/www/src/public/registry/styles/default/dialog.json
+++ b/apps/www/src/public/registry/styles/default/dialog.json
@@ -1,12 +1,43 @@
 {
   "name": "dialog",
   "dependencies": [
-    "@radix-ui/react-dialog"
+    "radix-vue"
+  ],
+  "registryDependencies": [
+    "utils"
   ],
   "files": [
     {
-      "name": "dialog.tsx",
-      "content": "\"use client\"\n\nimport * as React from \"react\"\nimport * as DialogPrimitive from \"@radix-ui/react-dialog\"\nimport { X } from \"lucide-react\"\n\nimport { cn } from \"@/lib/utils\"\n\nconst Dialog = DialogPrimitive.Root\n\nconst DialogTrigger = DialogPrimitive.Trigger\n\nconst DialogPortal = ({\n  className,\n  ...props\n}: DialogPrimitive.DialogPortalProps) => (\n  <DialogPrimitive.Portal className={cn(className)} {...props} />\n)\nDialogPortal.displayName = DialogPrimitive.Portal.displayName\n\nconst DialogOverlay = React.forwardRef<\n  React.ElementRef<typeof DialogPrimitive.Overlay>,\n  React.ComponentPropsWithoutRef<typeof DialogPrimitive.Overlay>\n>(({ className, ...props }, ref) => (\n  <DialogPrimitive.Overlay\n    ref={ref}\n    className={cn(\n      \"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      className\n    )}\n    {...props}\n  />\n))\nDialogOverlay.displayName = DialogPrimitive.Overlay.displayName\n\nconst DialogContent = React.forwardRef<\n  React.ElementRef<typeof DialogPrimitive.Content>,\n  React.ComponentPropsWithoutRef<typeof DialogPrimitive.Content>\n>(({ className, children, ...props }, ref) => (\n  <DialogPortal>\n    <DialogOverlay />\n    <DialogPrimitive.Content\n      ref={ref}\n      className={cn(\n        \"fixed left-[50%] top-[50%] z-50 grid w-full max-w-lg translate-x-[-50%] translate-y-[-50%] gap-4 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        className\n      )}\n      {...props}\n    >\n      {children}\n      <DialogPrimitive.Close className=\"absolute right-4 top-4 rounded-sm opacity-70 ring-offset-background transition-opacity hover:opacity-100 focus:outline-none focus:ring-2 focus:ring-ring focus:ring-offset-2 disabled:pointer-events-none data-[state=open]:bg-accent data-[state=open]:text-muted-foreground\">\n        <X className=\"h-4 w-4\" />\n        <span className=\"sr-only\">Close</span>\n      </DialogPrimitive.Close>\n    </DialogPrimitive.Content>\n  </DialogPortal>\n))\nDialogContent.displayName = DialogPrimitive.Content.displayName\n\nconst DialogHeader = ({\n  className,\n  ...props\n}: React.HTMLAttributes<HTMLDivElement>) => (\n  <div\n    className={cn(\n      \"flex flex-col space-y-1.5 text-center sm:text-left\",\n      className\n    )}\n    {...props}\n  />\n)\nDialogHeader.displayName = \"DialogHeader\"\n\nconst DialogFooter = ({\n  className,\n  ...props\n}: React.HTMLAttributes<HTMLDivElement>) => (\n  <div\n    className={cn(\n      \"flex flex-col-reverse sm:flex-row sm:justify-end sm:space-x-2\",\n      className\n    )}\n    {...props}\n  />\n)\nDialogFooter.displayName = \"DialogFooter\"\n\nconst DialogTitle = React.forwardRef<\n  React.ElementRef<typeof DialogPrimitive.Title>,\n  React.ComponentPropsWithoutRef<typeof DialogPrimitive.Title>\n>(({ className, ...props }, ref) => (\n  <DialogPrimitive.Title\n    ref={ref}\n    className={cn(\n      \"text-lg font-semibold leading-none tracking-tight\",\n      className\n    )}\n    {...props}\n  />\n))\nDialogTitle.displayName = DialogPrimitive.Title.displayName\n\nconst DialogDescription = React.forwardRef<\n  React.ElementRef<typeof DialogPrimitive.Description>,\n  React.ComponentPropsWithoutRef<typeof DialogPrimitive.Description>\n>(({ className, ...props }, ref) => (\n  <DialogPrimitive.Description\n    ref={ref}\n    className={cn(\"text-sm text-muted-foreground\", className)}\n    {...props}\n  />\n))\nDialogDescription.displayName = DialogPrimitive.Description.displayName\n\nexport {\n  Dialog,\n  DialogTrigger,\n  DialogContent,\n  DialogHeader,\n  DialogFooter,\n  DialogTitle,\n  DialogDescription,\n}\n"
+      "name": "Dialog.vue",
+      "content": "<script setup lang=\"ts\">\nimport { DialogRoot } from 'radix-vue'\n</script>\n\n<template>\n  <DialogRoot>\n    <slot />\n  </DialogRoot>\n</template>\n"
+    },
+    {
+      "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 { X } from 'lucide-vue-next'\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-white/80 dark: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        <X class=\"w-4 h-4\" />\n        <span className=\"sr-only\">Close</span>\n      </DialogClose>\n    </DialogContent>\n  </DialogPortal>\n</template>\n"
+    },
+    {
+      "name": "DialogDescription.vue",
+      "content": "<script setup lang=\"ts\">\nimport { DialogDescription, type DialogDescriptionProps } from 'radix-vue'\nimport { cn } from '@/lib/utils'\n\nconst props = defineProps<DialogDescriptionProps & { class?: string }>()\n</script>\n\n<template>\n  <DialogDescription\n    v-bind=\"props\"\n    :class=\"cn('text-muted-foreground text-sm', props.class)\"\n  >\n    <slot />\n  </DialogDescription>\n</template>\n"
+    },
+    {
+      "name": "DialogFooter.vue",
+      "content": "<script setup lang=\"ts\">\nimport { cn } from '@/lib/utils'\n\ninterface DialogFooterProps {\n  class?: string\n}\n\nconst props = defineProps<DialogFooterProps>()\n</script>\n\n<template>\n  <div\n    :class=\"\n      cn(\n        'flex flex-col space-y-2 sm:space-y-0 mt-1.5 sm:flex-row sm:justify-end sm:space-x-2',\n        props.class,\n      )\n    \"\n  >\n    <slot />\n  </div>\n</template>\n"
+    },
+    {
+      "name": "DialogHeader.vue",
+      "content": "<script setup lang=\"ts\">\nimport { cn } from '@/lib/utils'\n\ninterface DialogHeaderProps {\n  class?: string\n}\n\nconst props = defineProps<DialogHeaderProps>()\n</script>\n\n<template>\n  <div\n    :class=\"cn('flex flex-col space-y-2 text-center sm:text-left', props.class)\"\n  >\n    <slot />\n  </div>\n</template>\n"
+    },
+    {
+      "name": "DialogTitle.vue",
+      "content": "<script setup lang=\"ts\">\nimport { DialogTitle, type DialogTitleProps } from 'radix-vue'\nimport { cn } from '@/lib/utils'\n\nconst props = defineProps<DialogTitleProps & { class?: string }>()\n</script>\n\n<template>\n  <DialogTitle\n    v-bind=\"props\"\n    :class=\"\n      cn(\n        'text-lg text-foreground font-semibold leading-none tracking-tight',\n        props.class,\n      )\n    \"\n  >\n    <slot />\n  </DialogTitle>\n</template>\n"
+    },
+    {
+      "name": "DialogTrigger.vue",
+      "content": "<script setup lang=\"ts\">\nimport { DialogTrigger, type DialogTriggerProps } from 'radix-vue'\n\nconst props = defineProps<DialogTriggerProps>()\n</script>\n\n<template>\n  <DialogTrigger v-bind=\"props\">\n    <slot />\n  </DialogTrigger>\n</template>\n"
+    },
+    {
+      "name": "index.ts",
+      "content": "export { default as Dialog } from './Dialog.vue'\nexport { default as DialogTrigger } from './DialogTrigger.vue'\nexport { default as DialogHeader } from './DialogHeader.vue'\nexport { default as DialogTitle } from './DialogTitle.vue'\nexport { default as DialogDescription } from './DialogDescription.vue'\nexport { default as DialogContent } from './DialogContent.vue'\nexport { default as DialogFooter } from './DialogFooter.vue'\n"
     }
   ],
   "type": "components:ui"
diff --git a/apps/www/src/public/registry/styles/default/dropdown-menu.json b/apps/www/src/public/registry/styles/default/dropdown-menu.json
index f9e2288f..72ec6533 100644
--- a/apps/www/src/public/registry/styles/default/dropdown-menu.json
+++ b/apps/www/src/public/registry/styles/default/dropdown-menu.json
@@ -1,12 +1,71 @@
 {
   "name": "dropdown-menu",
   "dependencies": [
-    "@radix-ui/react-dropdown-menu"
+    "radix-vue"
+  ],
+  "registryDependencies": [
+    "utils"
   ],
   "files": [
     {
-      "name": "dropdown-menu.tsx",
-      "content": "\"use client\"\n\nimport * as React from \"react\"\nimport * as DropdownMenuPrimitive from \"@radix-ui/react-dropdown-menu\"\nimport { Check, ChevronRight, Circle } from \"lucide-react\"\n\nimport { cn } from \"@/lib/utils\"\n\nconst DropdownMenu = DropdownMenuPrimitive.Root\n\nconst DropdownMenuTrigger = DropdownMenuPrimitive.Trigger\n\nconst DropdownMenuGroup = DropdownMenuPrimitive.Group\n\nconst DropdownMenuPortal = DropdownMenuPrimitive.Portal\n\nconst DropdownMenuSub = DropdownMenuPrimitive.Sub\n\nconst DropdownMenuRadioGroup = DropdownMenuPrimitive.RadioGroup\n\nconst DropdownMenuSubTrigger = React.forwardRef<\n  React.ElementRef<typeof DropdownMenuPrimitive.SubTrigger>,\n  React.ComponentPropsWithoutRef<typeof DropdownMenuPrimitive.SubTrigger> & {\n    inset?: boolean\n  }\n>(({ className, inset, children, ...props }, ref) => (\n  <DropdownMenuPrimitive.SubTrigger\n    ref={ref}\n    className={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      inset && \"pl-8\",\n      className\n    )}\n    {...props}\n  >\n    {children}\n    <ChevronRight className=\"ml-auto h-4 w-4\" />\n  </DropdownMenuPrimitive.SubTrigger>\n))\nDropdownMenuSubTrigger.displayName =\n  DropdownMenuPrimitive.SubTrigger.displayName\n\nconst DropdownMenuSubContent = React.forwardRef<\n  React.ElementRef<typeof DropdownMenuPrimitive.SubContent>,\n  React.ComponentPropsWithoutRef<typeof DropdownMenuPrimitive.SubContent>\n>(({ className, ...props }, ref) => (\n  <DropdownMenuPrimitive.SubContent\n    ref={ref}\n    className={cn(\n      \"z-50 min-w-[8rem] overflow-hidden rounded-md border bg-popover p-1 text-popover-foreground shadow-lg 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-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2\",\n      className\n    )}\n    {...props}\n  />\n))\nDropdownMenuSubContent.displayName =\n  DropdownMenuPrimitive.SubContent.displayName\n\nconst DropdownMenuContent = React.forwardRef<\n  React.ElementRef<typeof DropdownMenuPrimitive.Content>,\n  React.ComponentPropsWithoutRef<typeof DropdownMenuPrimitive.Content>\n>(({ className, sideOffset = 4, ...props }, ref) => (\n  <DropdownMenuPrimitive.Portal>\n    <DropdownMenuPrimitive.Content\n      ref={ref}\n      sideOffset={sideOffset}\n      className={cn(\n        \"z-50 min-w-[8rem] overflow-hidden rounded-md border bg-popover p-1 text-popover-foreground shadow-md 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-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2\",\n        className\n      )}\n      {...props}\n    />\n  </DropdownMenuPrimitive.Portal>\n))\nDropdownMenuContent.displayName = DropdownMenuPrimitive.Content.displayName\n\nconst DropdownMenuItem = React.forwardRef<\n  React.ElementRef<typeof DropdownMenuPrimitive.Item>,\n  React.ComponentPropsWithoutRef<typeof DropdownMenuPrimitive.Item> & {\n    inset?: boolean\n  }\n>(({ className, inset, ...props }, ref) => (\n  <DropdownMenuPrimitive.Item\n    ref={ref}\n    className={cn(\n      \"relative flex cursor-default select-none items-center rounded-sm px-2 py-1.5 text-sm outline-none transition-colors focus:bg-accent focus:text-accent-foreground data-[disabled]:pointer-events-none data-[disabled]:opacity-50\",\n      inset && \"pl-8\",\n      className\n    )}\n    {...props}\n  />\n))\nDropdownMenuItem.displayName = DropdownMenuPrimitive.Item.displayName\n\nconst DropdownMenuCheckboxItem = React.forwardRef<\n  React.ElementRef<typeof DropdownMenuPrimitive.CheckboxItem>,\n  React.ComponentPropsWithoutRef<typeof DropdownMenuPrimitive.CheckboxItem>\n>(({ className, children, checked, ...props }, ref) => (\n  <DropdownMenuPrimitive.CheckboxItem\n    ref={ref}\n    className={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      className\n    )}\n    checked={checked}\n    {...props}\n  >\n    <span className=\"absolute left-2 flex h-3.5 w-3.5 items-center justify-center\">\n      <DropdownMenuPrimitive.ItemIndicator>\n        <Check className=\"h-4 w-4\" />\n      </DropdownMenuPrimitive.ItemIndicator>\n    </span>\n    {children}\n  </DropdownMenuPrimitive.CheckboxItem>\n))\nDropdownMenuCheckboxItem.displayName =\n  DropdownMenuPrimitive.CheckboxItem.displayName\n\nconst DropdownMenuRadioItem = React.forwardRef<\n  React.ElementRef<typeof DropdownMenuPrimitive.RadioItem>,\n  React.ComponentPropsWithoutRef<typeof DropdownMenuPrimitive.RadioItem>\n>(({ className, children, ...props }, ref) => (\n  <DropdownMenuPrimitive.RadioItem\n    ref={ref}\n    className={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      className\n    )}\n    {...props}\n  >\n    <span className=\"absolute left-2 flex h-3.5 w-3.5 items-center justify-center\">\n      <DropdownMenuPrimitive.ItemIndicator>\n        <Circle className=\"h-2 w-2 fill-current\" />\n      </DropdownMenuPrimitive.ItemIndicator>\n    </span>\n    {children}\n  </DropdownMenuPrimitive.RadioItem>\n))\nDropdownMenuRadioItem.displayName = DropdownMenuPrimitive.RadioItem.displayName\n\nconst DropdownMenuLabel = React.forwardRef<\n  React.ElementRef<typeof DropdownMenuPrimitive.Label>,\n  React.ComponentPropsWithoutRef<typeof DropdownMenuPrimitive.Label> & {\n    inset?: boolean\n  }\n>(({ className, inset, ...props }, ref) => (\n  <DropdownMenuPrimitive.Label\n    ref={ref}\n    className={cn(\n      \"px-2 py-1.5 text-sm font-semibold\",\n      inset && \"pl-8\",\n      className\n    )}\n    {...props}\n  />\n))\nDropdownMenuLabel.displayName = DropdownMenuPrimitive.Label.displayName\n\nconst DropdownMenuSeparator = React.forwardRef<\n  React.ElementRef<typeof DropdownMenuPrimitive.Separator>,\n  React.ComponentPropsWithoutRef<typeof DropdownMenuPrimitive.Separator>\n>(({ className, ...props }, ref) => (\n  <DropdownMenuPrimitive.Separator\n    ref={ref}\n    className={cn(\"-mx-1 my-1 h-px bg-muted\", className)}\n    {...props}\n  />\n))\nDropdownMenuSeparator.displayName = DropdownMenuPrimitive.Separator.displayName\n\nconst DropdownMenuShortcut = ({\n  className,\n  ...props\n}: React.HTMLAttributes<HTMLSpanElement>) => {\n  return (\n    <span\n      className={cn(\"ml-auto text-xs tracking-widest opacity-60\", className)}\n      {...props}\n    />\n  )\n}\nDropdownMenuShortcut.displayName = \"DropdownMenuShortcut\"\n\nexport {\n  DropdownMenu,\n  DropdownMenuTrigger,\n  DropdownMenuContent,\n  DropdownMenuItem,\n  DropdownMenuCheckboxItem,\n  DropdownMenuRadioItem,\n  DropdownMenuLabel,\n  DropdownMenuSeparator,\n  DropdownMenuShortcut,\n  DropdownMenuGroup,\n  DropdownMenuPortal,\n  DropdownMenuSub,\n  DropdownMenuSubContent,\n  DropdownMenuSubTrigger,\n  DropdownMenuRadioGroup,\n}\n"
+      "name": "DropdownMenu.vue",
+      "content": "<script setup lang=\"ts\">\nimport { DropdownMenuRoot, type DropdownMenuRootEmits, type DropdownMenuRootProps } from 'radix-vue'\nimport { useEmitAsProps } from '@/lib/utils'\n\nconst props = defineProps<DropdownMenuRootProps>()\nconst emits = defineEmits<DropdownMenuRootEmits>()\n</script>\n\n<template>\n  <DropdownMenuRoot v-bind=\"{ ...props, ...useEmitAsProps(emits) }\">\n    <slot />\n  </DropdownMenuRoot>\n</template>\n"
+    },
+    {
+      "name": "DropdownMenuCheckboxItem.vue",
+      "content": "<script setup lang=\"ts\">\nimport {\n  DropdownMenuCheckboxItem,\n  type DropdownMenuCheckboxItemEmits,\n  type DropdownMenuCheckboxItemProps,\n  DropdownMenuItemIndicator,\n} from 'radix-vue'\nimport { Check } from 'lucide-vue-next'\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        <Check class=\"w-4 h-4\" />\n      </DropdownMenuItemIndicator>\n    </span>\n    <slot />\n  </DropdownMenuCheckboxItem>\n</template>\n"
+    },
+    {
+      "name": "DropdownMenuContent.vue",
+      "content": "<script setup lang=\"ts\">\nimport {\n  DropdownMenuContent,\n  type DropdownMenuContentProps,\n  DropdownMenuPortal,\n} from 'radix-vue'\nimport { cn } from '@/lib/utils'\n\nconst props = withDefaults(\n  defineProps<DropdownMenuContentProps & { class?: string }>(),\n  {\n    sideOffset: 4,\n  },\n)\n</script>\n\n<template>\n  <DropdownMenuPortal>\n    <DropdownMenuContent\n      :loop=\"props.loop\"\n      :as-child=\"props.asChild\"\n      :side-offset=\"props.sideOffset\"\n      :side=\"props.side\"\n      :align=\"props.align\"\n      :align-offset=\"props.alignOffset\"\n      :class=\"[\n        cn(\n          'z-50 min-w-[8rem] overflow-hidden rounded-md border bg-popover p-1 text-popover-foreground shadow-md 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-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2',\n          props.class,\n        ),\n      ]\"\n    >\n      <slot />\n    </DropdownMenuContent>\n  </DropdownMenuPortal>\n</template>\n"
+    },
+    {
+      "name": "DropdownMenuGroup.vue",
+      "content": "<script setup lang=\"ts\">\nimport { DropdownMenuGroup, type DropdownMenuGroupProps } from 'radix-vue'\n\nconst props = defineProps<DropdownMenuGroupProps>()\n</script>\n\n<template>\n  <DropdownMenuGroup v-bind=\"props\">\n    <slot />\n  </DropdownMenuGroup>\n</template>\n"
+    },
+    {
+      "name": "DropdownMenuItem.vue",
+      "content": "<script setup lang=\"ts\">\nimport { DropdownMenuItem, type DropdownMenuItemProps } from 'radix-vue'\nimport { cn } from '@/lib/utils'\n\nconst props = defineProps<DropdownMenuItemProps & { inset?: boolean; class?: string }>()\n</script>\n\n<template>\n  <DropdownMenuItem\n    v-bind=\"props\"\n    :class=\"[\n      cn(\n        'relative flex cursor-default select-none items-center rounded-sm px-2 py-1.5 text-sm outline-none transition-colors focus:bg-accent focus:text-accent-foreground data-[disabled]:pointer-events-none data-[disabled]:opacity-50',\n        inset && 'pl-8',\n        props.class,\n      ),\n    ]\"\n  >\n    <slot />\n  </DropdownMenuItem>\n</template>\n"
+    },
+    {
+      "name": "DropdownMenuLabel.vue",
+      "content": "<script setup lang=\"ts\">\nimport { DropdownMenuLabel, type DropdownMenuLabelProps } from 'radix-vue'\nimport { cn } from '@/lib/utils'\n\nconst props = defineProps<DropdownMenuLabelProps & {\n  inset?: boolean\n  class?: string\n}>()\n</script>\n\n<template>\n  <DropdownMenuLabel\n    v-bind=\"props\"\n    :class=\"\n      cn('px-2 py-1.5 text-sm font-semibold',\n         inset && 'pl-8', props.class)\"\n  >\n    <slot />\n  </DropdownMenuLabel>\n</template>\n"
+    },
+    {
+      "name": "DropdownMenuRadioGroup.vue",
+      "content": "<script setup lang=\"ts\">\nimport {\n  DropdownMenuRadioGroup,\n  type DropdownMenuRadioGroupEmits,\n  type DropdownMenuRadioGroupProps,\n} from 'radix-vue'\n\nconst props = defineProps<DropdownMenuRadioGroupProps>()\n\nconst emits = defineEmits<DropdownMenuRadioGroupEmits>()\n</script>\n\n<template>\n  <DropdownMenuRadioGroup\n    v-bind=\"props\"\n    @update:model-value=\"emits('update:modelValue', $event)\"\n  >\n    <slot />\n  </DropdownMenuRadioGroup>\n</template>\n"
+    },
+    {
+      "name": "DropdownMenuRadioItem.vue",
+      "content": "<script setup lang=\"ts\">\nimport {\n  DropdownMenuItemIndicator,\n  DropdownMenuRadioItem,\n  type DropdownMenuRadioItemEmits,\n  type DropdownMenuRadioItemProps,\n} from 'radix-vue'\nimport { Circle } from 'lucide-vue-next'\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 className=\"absolute left-2 flex h-3.5 w-3.5 items-center justify-center\">\n\n      <DropdownMenuItemIndicator>\n        <Circle class=\"h-2 w-2 fill-current\" />\n      </DropdownMenuItemIndicator>\n    </span>\n    <slot />\n  </DropdownMenuRadioItem>\n</template>\n"
+    },
+    {
+      "name": "DropdownMenuSeparator.vue",
+      "content": "<script setup lang=\"ts\">\nimport {\n  DropdownMenuSeparator,\n  type DropdownMenuSeparatorProps,\n} from 'radix-vue'\n\nconst props = defineProps<DropdownMenuSeparatorProps>()\n</script>\n\n<template>\n  <DropdownMenuSeparator v-bind=\"props\" class=\"-mx-1 my-1 h-px bg-muted\" />\n</template>\n"
+    },
+    {
+      "name": "DropdownMenuShortcut.vue",
+      "content": "<script setup lang=\"ts\">\nimport { cn } from '@/lib/utils'\n</script>\n\n<template>\n  <span :class=\"cn('ml-auto text-xs tracking-widest opacity-60', $attrs.class ?? '')\">\n    <slot />\n  </span>\n</template>\n"
+    },
+    {
+      "name": "DropdownMenuSub.vue",
+      "content": "<script setup lang=\"ts\">\nimport {\n  DropdownMenuSub,\n  type DropdownMenuSubEmits,\n  type DropdownMenuSubProps,\n} from 'radix-vue'\n\nconst props = defineProps<DropdownMenuSubProps>()\n\nconst emits = defineEmits<DropdownMenuSubEmits>()\n</script>\n\n<template>\n  <DropdownMenuSub v-bind=\"props\" @update:open=\"emits('update:open', $event)\">\n    <slot />\n  </DropdownMenuSub>\n</template>\n"
+    },
+    {
+      "name": "DropdownMenuSubContent.vue",
+      "content": "<script setup lang=\"ts\">\nimport {\n  DropdownMenuSubContent,\n  type DropdownMenuSubContentEmits,\n  type DropdownMenuSubContentProps,\n} from 'radix-vue'\nimport { cn, useEmitAsProps } from '@/lib/utils'\n\nconst props = defineProps<DropdownMenuSubContentProps>()\nconst emits = defineEmits<DropdownMenuSubContentEmits>()\n</script>\n\n<template>\n  <DropdownMenuSubContent\n    v-bind=\"{ ...props, ...useEmitAsProps(emits) }\"\n    :class=\"cn('z-50 min-w-[8rem] overflow-hidden rounded-md border bg-popover p-1 text-popover-foreground shadow-lg 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-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2', $attrs.class ?? '')\"\n  >\n    <slot />\n  </DropdownMenuSubContent>\n</template>\n"
+    },
+    {
+      "name": "DropdownMenuSubTrigger.vue",
+      "content": "<script setup lang=\"ts\">\nimport {\n  DropdownMenuSubTrigger,\n  type DropdownMenuSubTriggerProps,\n} from 'radix-vue'\nimport { ChevronRight } from 'lucide-vue-next'\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    <ChevronRight class=\"ml-auto h-4 w-4\" />\n  </DropdownMenuSubTrigger>\n</template>\n"
+    },
+    {
+      "name": "DropdownMenuTrigger.vue",
+      "content": "<script setup lang=\"ts\">\nimport { DropdownMenuTrigger, type DropdownMenuTriggerProps } from 'radix-vue'\n\nconst props = defineProps<DropdownMenuTriggerProps>()\n</script>\n\n<template>\n  <DropdownMenuTrigger class=\"outline-none\" v-bind=\"props\">\n    <slot />\n  </DropdownMenuTrigger>\n</template>\n"
+    },
+    {
+      "name": "index.ts",
+      "content": "export { DropdownMenuPortal } from 'radix-vue'\n\nexport { default as DropdownMenu } from './DropdownMenu.vue'\nexport { default as DropdownMenuTrigger } from './DropdownMenuTrigger.vue'\nexport { default as DropdownMenuContent } from './DropdownMenuContent.vue'\nexport { default as DropdownMenuGroup } from './DropdownMenuGroup.vue'\nexport { default as DropdownMenuRadioGroup } from './DropdownMenuRadioGroup.vue'\nexport { default as DropdownMenuItem } from './DropdownMenuItem.vue'\nexport { default as DropdownMenuCheckboxItem } from './DropdownMenuCheckboxItem.vue'\nexport { default as DropdownMenuRadioItem } from './DropdownMenuRadioItem.vue'\nexport { default as DropdownMenuShortcut } from './DropdownMenuShortcut.vue'\nexport { default as DropdownMenuSeparator } from './DropdownMenuSeparator.vue'\nexport { default as DropdownMenuLabel } from './DropdownMenuLabel.vue'\nexport { default as DropdownMenuSub } from './DropdownMenuSub.vue'\nexport { default as DropdownMenuSubTrigger } from './DropdownMenuSubTrigger.vue'\nexport { default as DropdownMenuSubContent } from './DropdownMenuSubContent.vue'\n"
     }
   ],
   "type": "components:ui"
diff --git a/apps/www/src/public/registry/styles/default/hover-card.json b/apps/www/src/public/registry/styles/default/hover-card.json
index db69042a..c35bf896 100644
--- a/apps/www/src/public/registry/styles/default/hover-card.json
+++ b/apps/www/src/public/registry/styles/default/hover-card.json
@@ -1,12 +1,27 @@
 {
   "name": "hover-card",
   "dependencies": [
-    "@radix-ui/react-hover-card"
+    "radix-vue"
+  ],
+  "registryDependencies": [
+    "utils"
   ],
   "files": [
     {
-      "name": "hover-card.tsx",
-      "content": "\"use client\"\n\nimport * as React from \"react\"\nimport * as HoverCardPrimitive from \"@radix-ui/react-hover-card\"\n\nimport { cn } from \"@/lib/utils\"\n\nconst HoverCard = HoverCardPrimitive.Root\n\nconst HoverCardTrigger = HoverCardPrimitive.Trigger\n\nconst HoverCardContent = React.forwardRef<\n  React.ElementRef<typeof HoverCardPrimitive.Content>,\n  React.ComponentPropsWithoutRef<typeof HoverCardPrimitive.Content>\n>(({ className, align = \"center\", sideOffset = 4, ...props }, ref) => (\n  <HoverCardPrimitive.Content\n    ref={ref}\n    align={align}\n    sideOffset={sideOffset}\n    className={cn(\n      \"z-50 w-64 rounded-md border bg-popover p-4 text-popover-foreground shadow-md outline-none 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-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2\",\n      className\n    )}\n    {...props}\n  />\n))\nHoverCardContent.displayName = HoverCardPrimitive.Content.displayName\n\nexport { HoverCard, HoverCardTrigger, HoverCardContent }\n"
+      "name": "HoverCard.vue",
+      "content": "<script setup lang=\"ts\">\nimport { HoverCardRoot, type HoverCardRootProps } from 'radix-vue'\n\nconst props = defineProps<HoverCardRootProps>()\n</script>\n\n<template>\n  <HoverCardRoot v-bind=\"props\">\n    <slot />\n  </HoverCardRoot>\n</template>\n"
+    },
+    {
+      "name": "HoverCardContent.vue",
+      "content": "<script setup lang=\"ts\">\nimport {\n  HoverCardContent,\n  type HoverCardContentProps,\n  HoverCardPortal,\n} from 'radix-vue'\nimport { cn } from '@/lib/utils'\n\nconst props = withDefaults(\n  defineProps<HoverCardContentProps & { class?: string }>(),\n  {\n    sideOffset: 4,\n  },\n)\n</script>\n\n<template>\n  <HoverCardPortal>\n    <HoverCardContent\n      v-bind=\"props\"\n      :class=\"\n        cn(\n          'z-50 w-64 rounded-md bg-background border border-border p-4 text-foreground shadow-md outline-none 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-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2',\n          props.class,\n        )\n      \"\n    >\n      <slot />\n    </HoverCardContent>\n  </HoverCardPortal>\n</template>\n"
+    },
+    {
+      "name": "HoverCardTrigger.vue",
+      "content": "<script setup lang=\"ts\">\nimport { HoverCardTrigger, type HoverCardTriggerProps } from 'radix-vue'\n\nconst props = defineProps<HoverCardTriggerProps>()\n</script>\n\n<template>\n  <HoverCardTrigger v-bind=\"props\">\n    <slot />\n  </HoverCardTrigger>\n</template>\n"
+    },
+    {
+      "name": "index.ts",
+      "content": "export { default as HoverCard } from './HoverCard.vue'\nexport { default as HoverCardTrigger } from './HoverCardTrigger.vue'\nexport { default as HoverCardContent } from './HoverCardContent.vue'\n"
     }
   ],
   "type": "components:ui"
diff --git a/apps/www/src/public/registry/styles/default/input.json b/apps/www/src/public/registry/styles/default/input.json
index 762ccf00..33cd20ea 100644
--- a/apps/www/src/public/registry/styles/default/input.json
+++ b/apps/www/src/public/registry/styles/default/input.json
@@ -1,9 +1,17 @@
 {
   "name": "input",
+  "dependencies": [],
+  "registryDependencies": [
+    "utils"
+  ],
   "files": [
     {
-      "name": "input.tsx",
-      "content": "import * as React from \"react\"\n\nimport { cn } from \"@/lib/utils\"\n\nexport interface InputProps\n  extends React.InputHTMLAttributes<HTMLInputElement> {}\n\nconst Input = React.forwardRef<HTMLInputElement, InputProps>(\n  ({ className, type, ...props }, ref) => {\n    return (\n      <input\n        type={type}\n        className={cn(\n          \"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\",\n          className\n        )}\n        ref={ref}\n        {...props}\n      />\n    )\n  }\n)\nInput.displayName = \"Input\"\n\nexport { Input }\n"
+      "name": "Input.vue",
+      "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  <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 ?? ''))\">\n</template>\n"
+    },
+    {
+      "name": "index.ts",
+      "content": "export { default as Input } from './Input.vue'\n"
     }
   ],
   "type": "components:ui"
diff --git a/apps/www/static/registry/styles/default/kbd.json b/apps/www/src/public/registry/styles/default/kbd.json
similarity index 99%
rename from apps/www/static/registry/styles/default/kbd.json
rename to apps/www/src/public/registry/styles/default/kbd.json
index 8a10d8bd..db9ad268 100644
--- a/apps/www/static/registry/styles/default/kbd.json
+++ b/apps/www/src/public/registry/styles/default/kbd.json
@@ -13,4 +13,4 @@
     }
   ],
   "type": "components:ui"
-}
+}
\ No newline at end of file
diff --git a/apps/www/src/public/registry/styles/default/label.json b/apps/www/src/public/registry/styles/default/label.json
index 81d3efd2..ce93da47 100644
--- a/apps/www/src/public/registry/styles/default/label.json
+++ b/apps/www/src/public/registry/styles/default/label.json
@@ -1,12 +1,19 @@
 {
   "name": "label",
   "dependencies": [
-    "@radix-ui/react-label"
+    "radix-vue"
+  ],
+  "registryDependencies": [
+    "utils"
   ],
   "files": [
     {
-      "name": "label.tsx",
-      "content": "\"use client\"\n\nimport * as React from \"react\"\nimport * as LabelPrimitive from \"@radix-ui/react-label\"\nimport { cva, type VariantProps } from \"class-variance-authority\"\n\nimport { cn } from \"@/lib/utils\"\n\nconst labelVariants = cva(\n  \"text-sm font-medium leading-none peer-disabled:cursor-not-allowed peer-disabled:opacity-70\"\n)\n\nconst Label = React.forwardRef<\n  React.ElementRef<typeof LabelPrimitive.Root>,\n  React.ComponentPropsWithoutRef<typeof LabelPrimitive.Root> &\n    VariantProps<typeof labelVariants>\n>(({ className, ...props }, ref) => (\n  <LabelPrimitive.Root\n    ref={ref}\n    className={cn(labelVariants(), className)}\n    {...props}\n  />\n))\nLabel.displayName = LabelPrimitive.Root.displayName\n\nexport { Label }\n"
+      "name": "Label.vue",
+      "content": "<script setup lang=\"ts\">\nimport { Label, type LabelProps } from 'radix-vue'\nimport { cn } from '@/lib/utils'\n\nconst props = defineProps<LabelProps & { class?: string }>()\n</script>\n\n<template>\n  <Label\n    v-bind=\"props\"\n    :class=\"\n      cn(\n        'block text-sm tracking-tight font-medium text-foreground text-left',\n        props.class,\n      )\n    \"\n  >\n    <slot />\n  </Label>\n</template>\n"
+    },
+    {
+      "name": "index.ts",
+      "content": "export { default as Label } from './Label.vue'\n"
     }
   ],
   "type": "components:ui"
diff --git a/apps/www/src/public/registry/styles/default/menubar.json b/apps/www/src/public/registry/styles/default/menubar.json
index 4d99795c..3a37f6ab 100644
--- a/apps/www/src/public/registry/styles/default/menubar.json
+++ b/apps/www/src/public/registry/styles/default/menubar.json
@@ -1,12 +1,75 @@
 {
   "name": "menubar",
   "dependencies": [
-    "@radix-ui/react-menubar"
+    "radix-vue"
+  ],
+  "registryDependencies": [
+    "utils"
   ],
   "files": [
     {
-      "name": "menubar.tsx",
-      "content": "\"use client\"\n\nimport * as React from \"react\"\nimport * as MenubarPrimitive from \"@radix-ui/react-menubar\"\nimport { Check, ChevronRight, Circle } from \"lucide-react\"\n\nimport { cn } from \"@/lib/utils\"\n\nconst MenubarMenu = MenubarPrimitive.Menu\n\nconst MenubarGroup = MenubarPrimitive.Group\n\nconst MenubarPortal = MenubarPrimitive.Portal\n\nconst MenubarSub = MenubarPrimitive.Sub\n\nconst MenubarRadioGroup = MenubarPrimitive.RadioGroup\n\nconst Menubar = React.forwardRef<\n  React.ElementRef<typeof MenubarPrimitive.Root>,\n  React.ComponentPropsWithoutRef<typeof MenubarPrimitive.Root>\n>(({ className, ...props }, ref) => (\n  <MenubarPrimitive.Root\n    ref={ref}\n    className={cn(\n      \"flex h-10 items-center space-x-1 rounded-md border bg-background p-1\",\n      className\n    )}\n    {...props}\n  />\n))\nMenubar.displayName = MenubarPrimitive.Root.displayName\n\nconst MenubarTrigger = React.forwardRef<\n  React.ElementRef<typeof MenubarPrimitive.Trigger>,\n  React.ComponentPropsWithoutRef<typeof MenubarPrimitive.Trigger>\n>(({ className, ...props }, ref) => (\n  <MenubarPrimitive.Trigger\n    ref={ref}\n    className={cn(\n      \"flex cursor-default select-none items-center rounded-sm px-3 py-1.5 text-sm font-medium outline-none focus:bg-accent focus:text-accent-foreground data-[state=open]:bg-accent data-[state=open]:text-accent-foreground\",\n      className\n    )}\n    {...props}\n  />\n))\nMenubarTrigger.displayName = MenubarPrimitive.Trigger.displayName\n\nconst MenubarSubTrigger = React.forwardRef<\n  React.ElementRef<typeof MenubarPrimitive.SubTrigger>,\n  React.ComponentPropsWithoutRef<typeof MenubarPrimitive.SubTrigger> & {\n    inset?: boolean\n  }\n>(({ className, inset, children, ...props }, ref) => (\n  <MenubarPrimitive.SubTrigger\n    ref={ref}\n    className={cn(\n      \"flex cursor-default select-none items-center rounded-sm px-2 py-1.5 text-sm outline-none focus:bg-accent focus:text-accent-foreground data-[state=open]:bg-accent data-[state=open]:text-accent-foreground\",\n      inset && \"pl-8\",\n      className\n    )}\n    {...props}\n  >\n    {children}\n    <ChevronRight className=\"ml-auto h-4 w-4\" />\n  </MenubarPrimitive.SubTrigger>\n))\nMenubarSubTrigger.displayName = MenubarPrimitive.SubTrigger.displayName\n\nconst MenubarSubContent = React.forwardRef<\n  React.ElementRef<typeof MenubarPrimitive.SubContent>,\n  React.ComponentPropsWithoutRef<typeof MenubarPrimitive.SubContent>\n>(({ className, ...props }, ref) => (\n  <MenubarPrimitive.SubContent\n    ref={ref}\n    className={cn(\n      \"z-50 min-w-[8rem] overflow-hidden rounded-md border bg-popover p-1 text-popover-foreground 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-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2\",\n      className\n    )}\n    {...props}\n  />\n))\nMenubarSubContent.displayName = MenubarPrimitive.SubContent.displayName\n\nconst MenubarContent = React.forwardRef<\n  React.ElementRef<typeof MenubarPrimitive.Content>,\n  React.ComponentPropsWithoutRef<typeof MenubarPrimitive.Content>\n>(\n  (\n    { className, align = \"start\", alignOffset = -4, sideOffset = 8, ...props },\n    ref\n  ) => (\n    <MenubarPrimitive.Portal>\n      <MenubarPrimitive.Content\n        ref={ref}\n        align={align}\n        alignOffset={alignOffset}\n        sideOffset={sideOffset}\n        className={cn(\n          \"z-50 min-w-[12rem] overflow-hidden rounded-md border bg-popover p-1 text-popover-foreground shadow-md data-[state=open]:animate-in 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-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2\",\n          className\n        )}\n        {...props}\n      />\n    </MenubarPrimitive.Portal>\n  )\n)\nMenubarContent.displayName = MenubarPrimitive.Content.displayName\n\nconst MenubarItem = React.forwardRef<\n  React.ElementRef<typeof MenubarPrimitive.Item>,\n  React.ComponentPropsWithoutRef<typeof MenubarPrimitive.Item> & {\n    inset?: boolean\n  }\n>(({ className, inset, ...props }, ref) => (\n  <MenubarPrimitive.Item\n    ref={ref}\n    className={cn(\n      \"relative flex cursor-default select-none items-center rounded-sm px-2 py-1.5 text-sm outline-none focus:bg-accent focus:text-accent-foreground data-[disabled]:pointer-events-none data-[disabled]:opacity-50\",\n      inset && \"pl-8\",\n      className\n    )}\n    {...props}\n  />\n))\nMenubarItem.displayName = MenubarPrimitive.Item.displayName\n\nconst MenubarCheckboxItem = React.forwardRef<\n  React.ElementRef<typeof MenubarPrimitive.CheckboxItem>,\n  React.ComponentPropsWithoutRef<typeof MenubarPrimitive.CheckboxItem>\n>(({ className, children, checked, ...props }, ref) => (\n  <MenubarPrimitive.CheckboxItem\n    ref={ref}\n    className={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      className\n    )}\n    checked={checked}\n    {...props}\n  >\n    <span className=\"absolute left-2 flex h-3.5 w-3.5 items-center justify-center\">\n      <MenubarPrimitive.ItemIndicator>\n        <Check className=\"h-4 w-4\" />\n      </MenubarPrimitive.ItemIndicator>\n    </span>\n    {children}\n  </MenubarPrimitive.CheckboxItem>\n))\nMenubarCheckboxItem.displayName = MenubarPrimitive.CheckboxItem.displayName\n\nconst MenubarRadioItem = React.forwardRef<\n  React.ElementRef<typeof MenubarPrimitive.RadioItem>,\n  React.ComponentPropsWithoutRef<typeof MenubarPrimitive.RadioItem>\n>(({ className, children, ...props }, ref) => (\n  <MenubarPrimitive.RadioItem\n    ref={ref}\n    className={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      className\n    )}\n    {...props}\n  >\n    <span className=\"absolute left-2 flex h-3.5 w-3.5 items-center justify-center\">\n      <MenubarPrimitive.ItemIndicator>\n        <Circle className=\"h-2 w-2 fill-current\" />\n      </MenubarPrimitive.ItemIndicator>\n    </span>\n    {children}\n  </MenubarPrimitive.RadioItem>\n))\nMenubarRadioItem.displayName = MenubarPrimitive.RadioItem.displayName\n\nconst MenubarLabel = React.forwardRef<\n  React.ElementRef<typeof MenubarPrimitive.Label>,\n  React.ComponentPropsWithoutRef<typeof MenubarPrimitive.Label> & {\n    inset?: boolean\n  }\n>(({ className, inset, ...props }, ref) => (\n  <MenubarPrimitive.Label\n    ref={ref}\n    className={cn(\n      \"px-2 py-1.5 text-sm font-semibold\",\n      inset && \"pl-8\",\n      className\n    )}\n    {...props}\n  />\n))\nMenubarLabel.displayName = MenubarPrimitive.Label.displayName\n\nconst MenubarSeparator = React.forwardRef<\n  React.ElementRef<typeof MenubarPrimitive.Separator>,\n  React.ComponentPropsWithoutRef<typeof MenubarPrimitive.Separator>\n>(({ className, ...props }, ref) => (\n  <MenubarPrimitive.Separator\n    ref={ref}\n    className={cn(\"-mx-1 my-1 h-px bg-muted\", className)}\n    {...props}\n  />\n))\nMenubarSeparator.displayName = MenubarPrimitive.Separator.displayName\n\nconst MenubarShortcut = ({\n  className,\n  ...props\n}: React.HTMLAttributes<HTMLSpanElement>) => {\n  return (\n    <span\n      className={cn(\n        \"ml-auto text-xs tracking-widest text-muted-foreground\",\n        className\n      )}\n      {...props}\n    />\n  )\n}\nMenubarShortcut.displayname = \"MenubarShortcut\"\n\nexport {\n  Menubar,\n  MenubarMenu,\n  MenubarTrigger,\n  MenubarContent,\n  MenubarItem,\n  MenubarSeparator,\n  MenubarLabel,\n  MenubarCheckboxItem,\n  MenubarRadioGroup,\n  MenubarRadioItem,\n  MenubarPortal,\n  MenubarSubContent,\n  MenubarSubTrigger,\n  MenubarGroup,\n  MenubarSub,\n  MenubarShortcut,\n}\n"
+      "name": "Menubar.vue",
+      "content": "<script setup lang=\"ts\">\nimport {\n  MenubarRoot,\n  type MenubarRootEmits,\n  type MenubarRootProps,\n} from 'radix-vue'\nimport { cn } from '@/lib/utils'\n\nconst props = defineProps<MenubarRootProps & { class?: string }>()\n\nconst emits = defineEmits<MenubarRootEmits>()\n</script>\n\n<template>\n  <MenubarRoot\n    v-bind=\"props\"\n    :class=\"\n      cn(\n        'flex h-10 items-center space-x-1 rounded-md border border-border p-1',\n        props.class,\n      )\n    \"\n    @update:model-value=\"emits('update:modelValue', $event)\"\n  >\n    <slot />\n  </MenubarRoot>\n</template>\n"
+    },
+    {
+      "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"
+    },
+    {
+      "name": "MenubarContent.vue",
+      "content": "<script setup lang=\"ts\">\nimport {\n  MenubarContent,\n  type MenubarContentProps,\n  MenubarPortal,\n} from 'radix-vue'\nimport { cn } from '@/lib/utils'\n\nconst props = withDefaults(\n  defineProps<MenubarContentProps & { class?: string }>(),\n  {\n    align: 'start',\n    alignOffset: -4,\n    sideOffset: 8,\n  },\n)\n</script>\n\n<template>\n  <MenubarPortal>\n    <MenubarContent\n      :loop=\"props.loop\"\n      :as-child=\"props.asChild\"\n      :side-offset=\"props.sideOffset\"\n      :side=\"props.side\"\n      :align=\"props.align\"\n      :align-offset=\"props.alignOffset\"\n      :class=\"\n        cn(\n          'z-50 min-w-[12rem] overflow-hidden rounded-md border bg-popover p-1 text-popover-foreground shadow-md data-[state=open]:animate-in 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-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2',\n          props.class,\n        )\n      \"\n    >\n      <slot />\n    </MenubarContent>\n  </MenubarPortal>\n</template>\n"
+    },
+    {
+      "name": "MenubarGroup.vue",
+      "content": "<script setup lang=\"ts\">\nimport { MenubarGroup, type MenubarGroupProps } from 'radix-vue'\n\nconst props = defineProps<MenubarGroupProps>()\n</script>\n\n<template>\n  <MenubarGroup v-bind=\"props\">\n    <slot />\n  </MenubarGroup>\n</template>\n"
+    },
+    {
+      "name": "MenubarItem.vue",
+      "content": "<script setup lang=\"ts\">\nimport {\n  MenubarItem,\n  type MenubarItemEmits,\n  type MenubarItemProps,\n} from 'radix-vue'\nimport { cn } from '@/lib/utils'\n\nconst props = defineProps<MenubarItemProps & { inset?: boolean; class?: string }>()\n\nconst emits = defineEmits<MenubarItemEmits>()\n</script>\n\n<template>\n  <MenubarItem\n    v-bind=\"props\"\n    :class=\"[\n      cn(\n        'relative flex cursor-default select-none items-center rounded-sm px-2 py-1.5 text-sm outline-none focus:bg-accent focus:text-accent-foreground data-[disabled]:pointer-events-none data-[disabled]:opacity-50',\n        inset && 'pl-8',\n        props.class,\n      ),\n    ]\"\n    @select=\"emits('select', $event)\"\n  >\n    <slot />\n  </MenubarItem>\n</template>\n"
+    },
+    {
+      "name": "MenubarLabel.vue",
+      "content": "<script setup lang=\"ts\">\nimport { MenubarLabel, type MenubarLabelProps } from 'radix-vue'\nimport { cn } from '@/lib/utils'\n\nconst props = defineProps<MenubarLabelProps & { inset?: boolean; class?: string }>()\n</script>\n\n<template>\n  <MenubarLabel :class=\"cn('px-2 py-1.5 text-sm font-semibold', inset && 'pl-8', props.class)\">\n    <slot />\n  </MenubarLabel>\n</template>\n"
+    },
+    {
+      "name": "MenubarMenu.vue",
+      "content": "<script setup lang=\"ts\">\nimport { MenubarMenu, type MenubarMenuProps } from 'radix-vue'\n\nconst props = defineProps<MenubarMenuProps>()\n</script>\n\n<template>\n  <MenubarMenu v-bind=\"props\">\n    <slot />\n  </MenubarMenu>\n</template>\n"
+    },
+    {
+      "name": "MenubarRadioGroup.vue",
+      "content": "<script setup lang=\"ts\">\nimport {\n  MenubarRadioGroup,\n  type MenubarRadioGroupEmits,\n  type MenubarRadioGroupProps,\n} from 'radix-vue'\n\nconst props = defineProps<MenubarRadioGroupProps>()\n\nconst emits = defineEmits<MenubarRadioGroupEmits>()\n</script>\n\n<template>\n  <MenubarRadioGroup\n    v-bind=\"props\"\n    @update:model-value=\"emits('update:modelValue', $event)\"\n  >\n    <slot />\n  </MenubarRadioGroup>\n</template>\n"
+    },
+    {
+      "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"
+    },
+    {
+      "name": "MenubarSeparator.vue",
+      "content": "<script setup lang=\"ts\">\nimport { MenubarSeparator, type MenubarSeparatorProps } from 'radix-vue'\nimport { cn } from '@/lib/utils'\n\nconst props = defineProps<MenubarSeparatorProps>()\n</script>\n\n<template>\n  <MenubarSeparator :class=\" cn('-mx-1 my-1 h-px bg-secondary', $attrs.class ?? '')\" v-bind=\"props\" />\n</template>\n"
+    },
+    {
+      "name": "MenubarShortcut.vue",
+      "content": "<script setup lang=\"ts\">\nimport { cn } from '@/lib/utils'\n</script>\n\n<template>\n  <span :class=\"cn('text-xxs ml-auto tracking-widest opacity-50', $attrs.class ?? '')\">\n    <slot />\n  </span>\n</template>\n"
+    },
+    {
+      "name": "MenubarSub.vue",
+      "content": "<script setup lang=\"ts\">\nimport {\n  MenubarSub,\n  type MenubarSubEmits,\n} from 'radix-vue'\n\ninterface MenubarSubRootProps {\n  defaultOpen?: boolean\n  open?: boolean\n}\n\nconst props = defineProps<MenubarSubRootProps>()\n\nconst emits = defineEmits<MenubarSubEmits>()\n</script>\n\n<template>\n  <MenubarSub v-bind=\"props\" @update:open=\"emits('update:open', $event)\">\n    <slot />\n  </MenubarSub>\n</template>\n"
+    },
+    {
+      "name": "MenubarSubContent.vue",
+      "content": "<script setup lang=\"ts\">\nimport {\n  MenubarPortal,\n  MenubarSubContent,\n  type MenubarSubContentEmits,\n  type MenubarSubContentProps,\n} from 'radix-vue'\nimport { cn } from '@/lib/utils'\n\nconst props = withDefaults(\n  defineProps<MenubarSubContentProps & { class?: string }>(),\n  {\n    sideOffset: 2,\n    alignOffset: 0,\n  },\n)\n\nconst emits = defineEmits<MenubarSubContentEmits>()\n</script>\n\n<template>\n  <MenubarPortal>\n    <MenubarSubContent\n      :loop=\"props.loop\"\n      :as-child=\"props.asChild\"\n      :side-offset=\"props.sideOffset\"\n      :side=\"props.side\"\n      :align=\"props.align\"\n      :align-offset=\"props.alignOffset\"\n      :class=\"\n        cn(\n          'z-50 min-w-[8rem] overflow-hidden rounded-md border bg-popover p-1 text-popover-foreground 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-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2',\n          props.class,\n        )\n      \"\n    >\n      <slot />\n    </MenubarSubContent>\n  </MenubarPortal>\n</template>\n"
+    },
+    {
+      "name": "MenubarSubTrigger.vue",
+      "content": "<script setup lang=\"ts\">\nimport { MenubarSubTrigger, type MenubarSubTriggerProps } from 'radix-vue'\nimport { cn } from '@/lib/utils'\n\nconst props = defineProps<MenubarSubTriggerProps & { inset?: boolean; class?: string }>()\n</script>\n\n<template>\n  <MenubarSubTrigger\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 focus:text-accent-foreground data-[state=open]:bg-accent data-[state=open]:text-accent-foreground',\n        inset && 'pl-8',\n        props.class,\n      ),\n    ]\"\n  >\n    <slot />\n  </MenubarSubTrigger>\n</template>\n"
+    },
+    {
+      "name": "MenubarTrigger.vue",
+      "content": "<script setup lang=\"ts\">\nimport { MenubarTrigger, type MenubarTriggerProps } from 'radix-vue'\nimport { cn } from '@/lib/utils'\n\nconst props = defineProps<MenubarTriggerProps & { class?: string }>()\n</script>\n\n<template>\n  <MenubarTrigger\n    v-bind=\"props\"\n    :class=\"\n      cn(\n        'flex cursor-default select-none items-center rounded-sm px-3 py-1.5 text-sm font-medium outline-none focus:bg-accent focus:text-accent-foreground data-[state=open]:bg-accent data-[state=open]:text-accent-foreground',\n        props.class,\n      )\n    \"\n  >\n    <slot />\n  </MenubarTrigger>\n</template>\n"
+    },
+    {
+      "name": "index.ts",
+      "content": "export { default as Menubar } from './Menubar.vue'\nexport { default as MenubarItem } from './MenubarItem.vue'\nexport { default as MenubarContent } from './MenubarContent.vue'\nexport { default as MenubarGroup } from './MenubarGroup.vue'\nexport { default as MenubarMenu } from './MenubarMenu.vue'\nexport { default as MenubarRadioGroup } from './MenubarRadioGroup.vue'\nexport { default as MenubarRadioItem } from './MenubarRadioItem.vue'\nexport { default as MenubarCheckboxItem } from './MenubarCheckboxItem.vue'\nexport { default as MenubarSeparator } from './MenubarSeparator.vue'\nexport { default as MenubarSub } from './MenubarSub.vue'\nexport { default as MenubarSubContent } from './MenubarSubContent.vue'\nexport { default as MenubarSubTrigger } from './MenubarSubTrigger.vue'\nexport { default as MenubarTrigger } from './MenubarTrigger.vue'\nexport { default as MenubarShortcut } from './MenubarShortcut.vue'\nexport { default as MenubarLabel } from './MenubarLabel.vue'\n"
     }
   ],
   "type": "components:ui"
diff --git a/apps/www/src/public/registry/styles/default/navigation-menu.json b/apps/www/src/public/registry/styles/default/navigation-menu.json
index a7efd542..3aa97c8d 100644
--- a/apps/www/src/public/registry/styles/default/navigation-menu.json
+++ b/apps/www/src/public/registry/styles/default/navigation-menu.json
@@ -1,12 +1,47 @@
 {
   "name": "navigation-menu",
   "dependencies": [
-    "@radix-ui/react-navigation-menu"
+    "radix-vue"
+  ],
+  "registryDependencies": [
+    "utils"
   ],
   "files": [
     {
-      "name": "navigation-menu.tsx",
-      "content": "import * as React from \"react\"\nimport * as NavigationMenuPrimitive from \"@radix-ui/react-navigation-menu\"\nimport { cva } from \"class-variance-authority\"\nimport { ChevronDown } from \"lucide-react\"\n\nimport { cn } from \"@/lib/utils\"\n\nconst NavigationMenu = React.forwardRef<\n  React.ElementRef<typeof NavigationMenuPrimitive.Root>,\n  React.ComponentPropsWithoutRef<typeof NavigationMenuPrimitive.Root>\n>(({ className, children, ...props }, ref) => (\n  <NavigationMenuPrimitive.Root\n    ref={ref}\n    className={cn(\n      \"relative z-10 flex max-w-max flex-1 items-center justify-center\",\n      className\n    )}\n    {...props}\n  >\n    {children}\n    <NavigationMenuViewport />\n  </NavigationMenuPrimitive.Root>\n))\nNavigationMenu.displayName = NavigationMenuPrimitive.Root.displayName\n\nconst NavigationMenuList = React.forwardRef<\n  React.ElementRef<typeof NavigationMenuPrimitive.List>,\n  React.ComponentPropsWithoutRef<typeof NavigationMenuPrimitive.List>\n>(({ className, ...props }, ref) => (\n  <NavigationMenuPrimitive.List\n    ref={ref}\n    className={cn(\n      \"group flex flex-1 list-none items-center justify-center space-x-1\",\n      className\n    )}\n    {...props}\n  />\n))\nNavigationMenuList.displayName = NavigationMenuPrimitive.List.displayName\n\nconst NavigationMenuItem = NavigationMenuPrimitive.Item\n\nconst navigationMenuTriggerStyle = cva(\n  \"group inline-flex h-10 w-max items-center justify-center rounded-md bg-background px-4 py-2 text-sm font-medium transition-colors hover:bg-accent hover:text-accent-foreground focus:bg-accent focus:text-accent-foreground focus:outline-none disabled:pointer-events-none disabled:opacity-50 data-[active]:bg-accent/50 data-[state=open]:bg-accent/50\"\n)\n\nconst NavigationMenuTrigger = React.forwardRef<\n  React.ElementRef<typeof NavigationMenuPrimitive.Trigger>,\n  React.ComponentPropsWithoutRef<typeof NavigationMenuPrimitive.Trigger>\n>(({ className, children, ...props }, ref) => (\n  <NavigationMenuPrimitive.Trigger\n    ref={ref}\n    className={cn(navigationMenuTriggerStyle(), \"group\", className)}\n    {...props}\n  >\n    {children}{\" \"}\n    <ChevronDown\n      className=\"relative top-[1px] ml-1 h-3 w-3 transition duration-200 group-data-[state=open]:rotate-180\"\n      aria-hidden=\"true\"\n    />\n  </NavigationMenuPrimitive.Trigger>\n))\nNavigationMenuTrigger.displayName = NavigationMenuPrimitive.Trigger.displayName\n\nconst NavigationMenuContent = React.forwardRef<\n  React.ElementRef<typeof NavigationMenuPrimitive.Content>,\n  React.ComponentPropsWithoutRef<typeof NavigationMenuPrimitive.Content>\n>(({ className, ...props }, ref) => (\n  <NavigationMenuPrimitive.Content\n    ref={ref}\n    className={cn(\n      \"left-0 top-0 w-full data-[motion^=from-]:animate-in data-[motion^=to-]:animate-out data-[motion^=from-]:fade-in data-[motion^=to-]:fade-out data-[motion=from-end]:slide-in-from-right-52 data-[motion=from-start]:slide-in-from-left-52 data-[motion=to-end]:slide-out-to-right-52 data-[motion=to-start]:slide-out-to-left-52 md:absolute md:w-auto \",\n      className\n    )}\n    {...props}\n  />\n))\nNavigationMenuContent.displayName = NavigationMenuPrimitive.Content.displayName\n\nconst NavigationMenuLink = NavigationMenuPrimitive.Link\n\nconst NavigationMenuViewport = React.forwardRef<\n  React.ElementRef<typeof NavigationMenuPrimitive.Viewport>,\n  React.ComponentPropsWithoutRef<typeof NavigationMenuPrimitive.Viewport>\n>(({ className, ...props }, ref) => (\n  <div className={cn(\"absolute left-0 top-full flex justify-center\")}>\n    <NavigationMenuPrimitive.Viewport\n      className={cn(\n        \"origin-top-center relative mt-1.5 h-[var(--radix-navigation-menu-viewport-height)] w-full overflow-hidden rounded-md border bg-popover text-popover-foreground shadow-lg data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-90 md:w-[var(--radix-navigation-menu-viewport-width)]\",\n        className\n      )}\n      ref={ref}\n      {...props}\n    />\n  </div>\n))\nNavigationMenuViewport.displayName =\n  NavigationMenuPrimitive.Viewport.displayName\n\nconst NavigationMenuIndicator = React.forwardRef<\n  React.ElementRef<typeof NavigationMenuPrimitive.Indicator>,\n  React.ComponentPropsWithoutRef<typeof NavigationMenuPrimitive.Indicator>\n>(({ className, ...props }, ref) => (\n  <NavigationMenuPrimitive.Indicator\n    ref={ref}\n    className={cn(\n      \"top-full z-[1] flex h-1.5 items-end justify-center overflow-hidden data-[state=visible]:animate-in data-[state=hidden]:animate-out data-[state=hidden]:fade-out data-[state=visible]:fade-in\",\n      className\n    )}\n    {...props}\n  >\n    <div className=\"relative top-[60%] h-2 w-2 rotate-45 rounded-tl-sm bg-border shadow-md\" />\n  </NavigationMenuPrimitive.Indicator>\n))\nNavigationMenuIndicator.displayName =\n  NavigationMenuPrimitive.Indicator.displayName\n\nexport {\n  navigationMenuTriggerStyle,\n  NavigationMenu,\n  NavigationMenuList,\n  NavigationMenuItem,\n  NavigationMenuContent,\n  NavigationMenuTrigger,\n  NavigationMenuLink,\n  NavigationMenuIndicator,\n  NavigationMenuViewport,\n}\n"
+      "name": "NavigationMenu.vue",
+      "content": "<script setup lang=\"ts\">\nimport {\n  NavigationMenuRoot,\n  type NavigationMenuRootEmits,\n  type NavigationMenuRootProps,\n} from 'radix-vue'\nimport NavigationMenuViewport from './NavigationMenuViewport.vue'\nimport { cn } from '@/lib/utils'\n\nconst props = defineProps<NavigationMenuRootProps & { class?: string }>()\n\nconst emits = defineEmits<NavigationMenuRootEmits>()\n</script>\n\n<template>\n  <NavigationMenuRoot\n    v-bind=\"props\"\n    :class=\"cn('relative z-10 flex max-w-max flex-1 items-center justify-center', props.class)\"\n    @update:model-value=\"emits('update:modelValue', $event)\"\n  >\n    <slot />\n    <NavigationMenuViewport />\n  </NavigationMenuRoot>\n</template>\n"
+    },
+    {
+      "name": "NavigationMenuContent.vue",
+      "content": "<script setup lang=\"ts\">\nimport {\n  NavigationMenuContent,\n  type NavigationMenuContentEmits,\n  type NavigationMenuContentProps,\n} from 'radix-vue'\nimport { cn, useEmitAsProps } from '@/lib/utils'\n\nconst props = defineProps<NavigationMenuContentProps & { class?: string }>()\n\nconst emits = defineEmits<NavigationMenuContentEmits>()\n</script>\n\n<template>\n  <NavigationMenuContent\n    v-bind=\"{ ...props, ...useEmitAsProps(emits) }\"\n    :class=\"\n      cn(\n        'left-0 top-0 w-full data-[motion^=from-]:animate-in data-[motion^=to-]:animate-out data-[motion^=from-]:fade-in data-[motion^=to-]:fade-out data-[motion=from-end]:slide-in-from-right-52 data-[motion=from-start]:slide-in-from-left-52 data-[motion=to-end]:slide-out-to-right-52 data-[motion=to-start]:slide-out-to-left-52 md:absolute md:w-auto ',\n        props.class,\n      )\n    \"\n  >\n    <slot />\n  </NavigationMenuContent>\n</template>\n"
+    },
+    {
+      "name": "NavigationMenuIndicator.vue",
+      "content": "<script setup lang=\"ts\">\nimport { NavigationMenuIndicator, type NavigationMenuIndicatorProps } from 'radix-vue'\nimport { cn } from '@/lib/utils'\n\nconst props = defineProps<NavigationMenuIndicatorProps>()\n</script>\n\n<template>\n  <NavigationMenuIndicator\n    v-bind=\"props\"\n    :class=\"cn('top-full z-[1] flex h-1.5 items-end justify-center overflow-hidden data-[state=visible]:animate-in data-[state=hidden]:animate-out data-[state=hidden]:fade-out data-[state=visible]:fade-in', $attrs.class ?? '')\"\n  >\n    <div class=\"relative top-[60%] h-2 w-2 rotate-45 rounded-tl-sm bg-border shadow-md\" />\n  </NavigationMenuIndicator>\n</template>\n"
+    },
+    {
+      "name": "NavigationMenuItem.vue",
+      "content": "<script setup lang=\"ts\">\nimport { NavigationMenuItem, type NavigationMenuItemProps } from 'radix-vue'\n\nconst props = defineProps<NavigationMenuItemProps>()\n</script>\n\n<template>\n  <NavigationMenuItem v-bind=\"props\">\n    <slot />\n  </NavigationMenuItem>\n</template>\n"
+    },
+    {
+      "name": "NavigationMenuLink.vue",
+      "content": "<script setup lang=\"ts\">\nimport {\n  NavigationMenuLink,\n  type NavigationMenuLinkEmits,\n  type NavigationMenuLinkProps,\n} from 'radix-vue'\nimport { useEmitAsProps } from '@/lib/utils'\n\nconst props = defineProps<NavigationMenuLinkProps>()\nconst emits = defineEmits<NavigationMenuLinkEmits>()\n</script>\n\n<template>\n  <NavigationMenuLink v-bind=\"{ ...props, ...useEmitAsProps(emits) }\">\n    <slot />\n  </NavigationMenuLink>\n</template>\n"
+    },
+    {
+      "name": "NavigationMenuList.vue",
+      "content": "<script setup lang=\"ts\">\nimport { NavigationMenuList, type NavigationMenuListProps } from 'radix-vue'\nimport { cn } from '@/lib/utils'\n\nconst props = defineProps<NavigationMenuListProps & { class?: string }>()\n</script>\n\n<template>\n  <NavigationMenuList\n    v-bind=\"props\"\n    :class=\"\n      cn(\n        'group flex flex-1 list-none items-center justify-center space-x-1',\n        props.class,\n      )\n    \"\n  >\n    <slot />\n  </NavigationMenuList>\n</template>\n"
+    },
+    {
+      "name": "NavigationMenuTrigger.vue",
+      "content": "<script setup lang=\"ts\">\nimport {\n  NavigationMenuTrigger,\n  type NavigationMenuTriggerProps,\n} from 'radix-vue'\nimport { ChevronDown } from 'lucide-vue-next'\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    <ChevronDown\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",
+      "content": "<script setup lang=\"ts\">\nimport {\n  NavigationMenuViewport,\n  type NavigationMenuViewportProps,\n} from 'radix-vue'\nimport { cn } from '@/lib/utils'\n\nconst props = defineProps<NavigationMenuViewportProps>()\n</script>\n\n<template>\n  <div class=\"absolute left-0 top-full flex justify-center\">\n    <NavigationMenuViewport\n      v-bind=\"props\"\n      :class=\"\n        cn(\n          'origin-top-center relative mt-1.5 h-[var(--radix-navigation-menu-viewport-height)] w-full overflow-hidden rounded-md border bg-popover text-popover-foreground shadow-lg data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-90 md:w-[var(--radix-navigation-menu-viewport-width)]',\n          $attrs.class ?? '',\n        )\n      \"\n    />\n  </div>\n</template>\n"
+    },
+    {
+      "name": "index.ts",
+      "content": "import { cva } from 'class-variance-authority'\n\nexport { default as NavigationMenu } from './NavigationMenu.vue'\nexport { default as NavigationMenuList } from './NavigationMenuList.vue'\nexport { default as NavigationMenuItem } from './NavigationMenuItem.vue'\nexport { default as NavigationMenuTrigger } from './NavigationMenuTrigger.vue'\nexport { default as NavigationMenuContent } from './NavigationMenuContent.vue'\nexport { default as NavigationMenuLink } from './NavigationMenuLink.vue'\n\nexport const navigationMenuTriggerStyle = cva(\n  'group inline-flex h-10 w-max items-center justify-center rounded-md bg-background px-4 py-2 text-sm font-medium transition-colors hover:bg-accent hover:text-accent-foreground focus:bg-accent focus:text-accent-foreground focus:outline-none disabled:pointer-events-none disabled:opacity-50 data-[active]:bg-accent/50 data-[state=open]:bg-accent/50',\n)\n"
     }
   ],
   "type": "components:ui"
diff --git a/apps/www/src/public/registry/styles/default/popover.json b/apps/www/src/public/registry/styles/default/popover.json
index 28ffef3d..a911d0a7 100644
--- a/apps/www/src/public/registry/styles/default/popover.json
+++ b/apps/www/src/public/registry/styles/default/popover.json
@@ -1,12 +1,27 @@
 {
   "name": "popover",
   "dependencies": [
-    "@radix-ui/react-popover"
+    "radix-vue"
+  ],
+  "registryDependencies": [
+    "utils"
   ],
   "files": [
     {
-      "name": "popover.tsx",
-      "content": "\"use client\"\n\nimport * as React from \"react\"\nimport * as PopoverPrimitive from \"@radix-ui/react-popover\"\n\nimport { cn } from \"@/lib/utils\"\n\nconst Popover = PopoverPrimitive.Root\n\nconst PopoverTrigger = PopoverPrimitive.Trigger\n\nconst PopoverContent = React.forwardRef<\n  React.ElementRef<typeof PopoverPrimitive.Content>,\n  React.ComponentPropsWithoutRef<typeof PopoverPrimitive.Content>\n>(({ className, align = \"center\", sideOffset = 4, ...props }, ref) => (\n  <PopoverPrimitive.Portal>\n    <PopoverPrimitive.Content\n      ref={ref}\n      align={align}\n      sideOffset={sideOffset}\n      className={cn(\n        \"z-50 w-72 rounded-md border bg-popover p-4 text-popover-foreground shadow-md outline-none 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-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2\",\n        className\n      )}\n      {...props}\n    />\n  </PopoverPrimitive.Portal>\n))\nPopoverContent.displayName = PopoverPrimitive.Content.displayName\n\nexport { Popover, PopoverTrigger, PopoverContent }\n"
+      "name": "Popover.vue",
+      "content": "<script setup lang=\"ts\">\nimport { PopoverRoot, type PopoverRootProps } from 'radix-vue'\n\nconst props = defineProps<PopoverRootProps>()\n</script>\n\n<template>\n  <PopoverRoot v-bind=\"props\">\n    <slot />\n  </PopoverRoot>\n</template>\n"
+    },
+    {
+      "name": "PopoverContent.vue",
+      "content": "<script setup lang=\"ts\">\nimport {\n  PopoverContent,\n  type PopoverContentEmits,\n  type PopoverContentProps,\n  PopoverPortal,\n} from 'radix-vue'\nimport { cn, useEmitAsProps } from '@/lib/utils'\n\nconst props = withDefaults(\n  defineProps<PopoverContentProps & { class?: string }>(),\n  {\n    sideOffset: 4,\n  },\n)\nconst emits = defineEmits<PopoverContentEmits>()\nconst emitsAsProps = useEmitAsProps(emits)\n</script>\n\n<template>\n  <PopoverPortal>\n    <PopoverContent\n      v-bind=\"{ ...props, ...emitsAsProps, $attrs }\"\n      :class=\"\n        cn(\n          'z-50 w-72 rounded-md border bg-popover p-4 text-popover-foreground shadow-md outline-none 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-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2',\n          props.class,\n        )\n      \"\n    >\n      <slot />\n    </PopoverContent>\n  </PopoverPortal>\n</template>\n"
+    },
+    {
+      "name": "PopoverTrigger.vue",
+      "content": "<script setup lang=\"ts\">\nimport { PopoverTrigger, type PopoverTriggerProps } from 'radix-vue'\n\nconst props = defineProps<PopoverTriggerProps>()\n</script>\n\n<template>\n  <PopoverTrigger v-bind=\"props\">\n    <slot />\n  </PopoverTrigger>\n</template>\n"
+    },
+    {
+      "name": "index.ts",
+      "content": "export { default as Popover } from './Popover.vue'\nexport { default as PopoverTrigger } from './PopoverTrigger.vue'\nexport { default as PopoverContent } from './PopoverContent.vue'\n"
     }
   ],
   "type": "components:ui"
diff --git a/apps/www/src/public/registry/styles/default/progress.json b/apps/www/src/public/registry/styles/default/progress.json
index 16dd5136..29acceb5 100644
--- a/apps/www/src/public/registry/styles/default/progress.json
+++ b/apps/www/src/public/registry/styles/default/progress.json
@@ -1,12 +1,19 @@
 {
   "name": "progress",
   "dependencies": [
-    "@radix-ui/react-progress"
+    "radix-vue"
+  ],
+  "registryDependencies": [
+    "utils"
   ],
   "files": [
     {
-      "name": "progress.tsx",
-      "content": "\"use client\"\n\nimport * as React from \"react\"\nimport * as ProgressPrimitive from \"@radix-ui/react-progress\"\n\nimport { cn } from \"@/lib/utils\"\n\nconst Progress = React.forwardRef<\n  React.ElementRef<typeof ProgressPrimitive.Root>,\n  React.ComponentPropsWithoutRef<typeof ProgressPrimitive.Root>\n>(({ className, value, ...props }, ref) => (\n  <ProgressPrimitive.Root\n    ref={ref}\n    className={cn(\n      \"relative h-4 w-full overflow-hidden rounded-full bg-secondary\",\n      className\n    )}\n    {...props}\n  >\n    <ProgressPrimitive.Indicator\n      className=\"h-full w-full flex-1 bg-primary transition-all\"\n      style={{ transform: `translateX(-${100 - (value || 0)}%)` }}\n    />\n  </ProgressPrimitive.Root>\n))\nProgress.displayName = ProgressPrimitive.Root.displayName\n\nexport { Progress }\n"
+      "name": "Progress.vue",
+      "content": "<script setup lang=\"ts\">\nimport {\n  ProgressIndicator,\n  ProgressRoot,\n  type ProgressRootProps,\n} from 'radix-vue'\nimport { cn } from '@/lib/utils'\n\nconst props = withDefaults(\n  defineProps<ProgressRootProps & { class?: string }>(),\n  {\n    class: '',\n    modelValue: 0,\n  },\n)\n</script>\n\n<template>\n  <ProgressRoot\n    :class=\"\n      cn(\n        'relative h-4 w-full overflow-hidden rounded-full bg-secondary',\n        props.class,\n      )\n    \"\n    v-bind=\"props\"\n  >\n    <ProgressIndicator\n      :class=\"\n        cn(\n          'h-full w-full flex-1 duration-300 bg-foreground transition-all',\n          props.class,\n        )\n      \"\n      :style=\"`transform: translateX(-${100 - (props.modelValue ?? 0)}%);`\"\n    />\n  </ProgressRoot>\n</template>\n"
+    },
+    {
+      "name": "index.ts",
+      "content": "export { default as Progress } from './Progress.vue'\n"
     }
   ],
   "type": "components:ui"
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 cff19eba..80dffba8 100644
--- a/apps/www/src/public/registry/styles/default/radio-group.json
+++ b/apps/www/src/public/registry/styles/default/radio-group.json
@@ -1,12 +1,23 @@
 {
   "name": "radio-group",
   "dependencies": [
-    "@radix-ui/react-radio-group"
+    "radix-vue"
+  ],
+  "registryDependencies": [
+    "utils"
   ],
   "files": [
     {
-      "name": "radio-group.tsx",
-      "content": "\"use client\"\n\nimport * as React from \"react\"\nimport * as RadioGroupPrimitive from \"@radix-ui/react-radio-group\"\nimport { Circle } from \"lucide-react\"\n\nimport { cn } from \"@/lib/utils\"\n\nconst RadioGroup = React.forwardRef<\n  React.ElementRef<typeof RadioGroupPrimitive.Root>,\n  React.ComponentPropsWithoutRef<typeof RadioGroupPrimitive.Root>\n>(({ className, ...props }, ref) => {\n  return (\n    <RadioGroupPrimitive.Root\n      className={cn(\"grid gap-2\", className)}\n      {...props}\n      ref={ref}\n    />\n  )\n})\nRadioGroup.displayName = RadioGroupPrimitive.Root.displayName\n\nconst RadioGroupItem = React.forwardRef<\n  React.ElementRef<typeof RadioGroupPrimitive.Item>,\n  React.ComponentPropsWithoutRef<typeof RadioGroupPrimitive.Item>\n>(({ className, children, ...props }, ref) => {\n  return (\n    <RadioGroupPrimitive.Item\n      ref={ref}\n      className={cn(\n        \"aspect-square h-4 w-4 rounded-full border border-primary text-primary ring-offset-background focus:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:cursor-not-allowed disabled:opacity-50\",\n        className\n      )}\n      {...props}\n    >\n      <RadioGroupPrimitive.Indicator className=\"flex items-center justify-center\">\n        <Circle className=\"h-2.5 w-2.5 fill-current text-current\" />\n      </RadioGroupPrimitive.Indicator>\n    </RadioGroupPrimitive.Item>\n  )\n})\nRadioGroupItem.displayName = RadioGroupPrimitive.Item.displayName\n\nexport { RadioGroup, RadioGroupItem }\n"
+      "name": "RadioGroup.vue",
+      "content": "<script setup lang=\"ts\">\nimport { RadioGroupRoot, type RadioGroupRootProps } from 'radix-vue'\nimport { cn } from '@/lib/utils'\n\nconst props = defineProps<RadioGroupRootProps & { class?: string }>()\n</script>\n\n<template>\n  <RadioGroupRoot :class=\"cn('grid gap-2', props.class)\">\n    <slot />\n  </RadioGroupRoot>\n</template>\n"
+    },
+    {
+      "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"
+    },
+    {
+      "name": "index.ts",
+      "content": "export { default as RadioGroup } from './RadioGroup.vue'\nexport { default as RadioGroupItem } from './RadioGroupItem.vue'\n"
     }
   ],
   "type": "components:ui"
diff --git a/apps/www/src/public/registry/styles/default/scroll-area.json b/apps/www/src/public/registry/styles/default/scroll-area.json
index ee9db739..4b2efc5d 100644
--- a/apps/www/src/public/registry/styles/default/scroll-area.json
+++ b/apps/www/src/public/registry/styles/default/scroll-area.json
@@ -1,12 +1,23 @@
 {
   "name": "scroll-area",
   "dependencies": [
-    "@radix-ui/react-scroll-area"
+    "radix-vue"
+  ],
+  "registryDependencies": [
+    "utils"
   ],
   "files": [
     {
-      "name": "scroll-area.tsx",
-      "content": "\"use client\"\n\nimport * as React from \"react\"\nimport * as ScrollAreaPrimitive from \"@radix-ui/react-scroll-area\"\n\nimport { cn } from \"@/lib/utils\"\n\nconst ScrollArea = React.forwardRef<\n  React.ElementRef<typeof ScrollAreaPrimitive.Root>,\n  React.ComponentPropsWithoutRef<typeof ScrollAreaPrimitive.Root>\n>(({ className, children, ...props }, ref) => (\n  <ScrollAreaPrimitive.Root\n    ref={ref}\n    className={cn(\"relative overflow-hidden\", className)}\n    {...props}\n  >\n    <ScrollAreaPrimitive.Viewport className=\"h-full w-full rounded-[inherit]\">\n      {children}\n    </ScrollAreaPrimitive.Viewport>\n    <ScrollBar />\n    <ScrollAreaPrimitive.Corner />\n  </ScrollAreaPrimitive.Root>\n))\nScrollArea.displayName = ScrollAreaPrimitive.Root.displayName\n\nconst ScrollBar = React.forwardRef<\n  React.ElementRef<typeof ScrollAreaPrimitive.ScrollAreaScrollbar>,\n  React.ComponentPropsWithoutRef<typeof ScrollAreaPrimitive.ScrollAreaScrollbar>\n>(({ className, orientation = \"vertical\", ...props }, ref) => (\n  <ScrollAreaPrimitive.ScrollAreaScrollbar\n    ref={ref}\n    orientation={orientation}\n    className={cn(\n      \"flex touch-none select-none transition-colors\",\n      orientation === \"vertical\" &&\n        \"h-full w-2.5 border-l border-l-transparent p-[1px]\",\n      orientation === \"horizontal\" &&\n        \"h-2.5 border-t border-t-transparent p-[1px]\",\n      className\n    )}\n    {...props}\n  >\n    <ScrollAreaPrimitive.ScrollAreaThumb className=\"relative flex-1 rounded-full bg-border\" />\n  </ScrollAreaPrimitive.ScrollAreaScrollbar>\n))\nScrollBar.displayName = ScrollAreaPrimitive.ScrollAreaScrollbar.displayName\n\nexport { ScrollArea, ScrollBar }\n"
+      "name": "ScrollArea.vue",
+      "content": "<script setup lang=\"ts\">\nimport {\n  ScrollAreaCorner,\n  ScrollAreaRoot,\n  type ScrollAreaRootProps,\n  ScrollAreaViewport,\n} from 'radix-vue'\nimport ScrollBar from './ScrollBar.vue'\nimport { cn } from '@/lib/utils'\n\nconst props = withDefaults(\n  defineProps<\n    ScrollAreaRootProps & { class?: string }\n  >(),\n  {\n    class: '',\n    orientation: 'vertical',\n  },\n)\n</script>\n\n<template>\n  <ScrollAreaRoot :type=\"type\" :class=\"cn('relative overflow-hidden', props.class)\">\n    <ScrollAreaViewport class=\"h-full w-full  rounded-[inherit]\">\n      <slot />\n    </ScrollAreaViewport>\n    <ScrollBar />\n    <ScrollAreaCorner />\n  </ScrollAreaRoot>\n</template>\n"
+    },
+    {
+      "name": "ScrollBar.vue",
+      "content": "<script setup lang=\"ts\">\nimport { ScrollAreaScrollbar, type ScrollAreaScrollbarProps, ScrollAreaThumb } from 'radix-vue'\nimport { cn } from '@/lib/utils'\n\nconst props = withDefaults(defineProps<ScrollAreaScrollbarProps>(), {\n  orientation: 'vertical',\n})\n</script>\n\n<template>\n  <ScrollAreaScrollbar\n    v-bind=\"props\"\n    :class=\"\n      cn('flex touch-none select-none transition-colors',\n         orientation === 'vertical'\n           && 'h-full w-2.5 border-l border-l-transparent p-[1px]',\n         orientation === 'horizontal'\n           && 'h-2.5 border-t border-t-transparent p-[1px]',\n         $attrs.class ?? '')\"\n  >\n    <ScrollAreaThumb class=\"relative flex-1 rounded-full bg-border\" />\n  </ScrollAreaScrollbar>\n</template>\n"
+    },
+    {
+      "name": "index.ts",
+      "content": "export { default as ScrollArea } from './ScrollArea.vue'\nexport { default as ScrollBar } from './ScrollBar.vue'\n"
     }
   ],
   "type": "components:ui"
diff --git a/apps/www/src/public/registry/styles/default/select.json b/apps/www/src/public/registry/styles/default/select.json
index 514f6708..285f7f16 100644
--- a/apps/www/src/public/registry/styles/default/select.json
+++ b/apps/www/src/public/registry/styles/default/select.json
@@ -1,12 +1,51 @@
 {
   "name": "select",
   "dependencies": [
-    "@radix-ui/react-select"
+    "radix-vue"
+  ],
+  "registryDependencies": [
+    "utils"
   ],
   "files": [
     {
-      "name": "select.tsx",
-      "content": "\"use client\"\n\nimport * as React from \"react\"\nimport * as SelectPrimitive from \"@radix-ui/react-select\"\nimport { Check, ChevronDown } from \"lucide-react\"\n\nimport { cn } from \"@/lib/utils\"\n\nconst Select = SelectPrimitive.Root\n\nconst SelectGroup = SelectPrimitive.Group\n\nconst SelectValue = SelectPrimitive.Value\n\nconst SelectTrigger = React.forwardRef<\n  React.ElementRef<typeof SelectPrimitive.Trigger>,\n  React.ComponentPropsWithoutRef<typeof SelectPrimitive.Trigger>\n>(({ className, children, ...props }, ref) => (\n  <SelectPrimitive.Trigger\n    ref={ref}\n    className={cn(\n      \"flex h-10 w-full items-center justify-between rounded-md border border-input bg-background px-3 py-2 text-sm ring-offset-background placeholder:text-muted-foreground focus:outline-none focus:ring-2 focus:ring-ring focus:ring-offset-2 disabled:cursor-not-allowed disabled:opacity-50\",\n      className\n    )}\n    {...props}\n  >\n    {children}\n    <SelectPrimitive.Icon asChild>\n      <ChevronDown className=\"h-4 w-4 opacity-50\" />\n    </SelectPrimitive.Icon>\n  </SelectPrimitive.Trigger>\n))\nSelectTrigger.displayName = SelectPrimitive.Trigger.displayName\n\nconst SelectContent = React.forwardRef<\n  React.ElementRef<typeof SelectPrimitive.Content>,\n  React.ComponentPropsWithoutRef<typeof SelectPrimitive.Content>\n>(({ className, children, position = \"popper\", ...props }, ref) => (\n  <SelectPrimitive.Portal>\n    <SelectPrimitive.Content\n      ref={ref}\n      className={cn(\n        \"relative z-50 min-w-[8rem] overflow-hidden rounded-md border bg-popover text-popover-foreground shadow-md 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-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2\",\n        position === \"popper\" &&\n          \"data-[side=bottom]:translate-y-1 data-[side=left]:-translate-x-1 data-[side=right]:translate-x-1 data-[side=top]:-translate-y-1\",\n        className\n      )}\n      position={position}\n      {...props}\n    >\n      <SelectPrimitive.Viewport\n        className={cn(\n          \"p-1\",\n          position === \"popper\" &&\n            \"h-[var(--radix-select-trigger-height)] w-full min-w-[var(--radix-select-trigger-width)]\"\n        )}\n      >\n        {children}\n      </SelectPrimitive.Viewport>\n    </SelectPrimitive.Content>\n  </SelectPrimitive.Portal>\n))\nSelectContent.displayName = SelectPrimitive.Content.displayName\n\nconst SelectLabel = React.forwardRef<\n  React.ElementRef<typeof SelectPrimitive.Label>,\n  React.ComponentPropsWithoutRef<typeof SelectPrimitive.Label>\n>(({ className, ...props }, ref) => (\n  <SelectPrimitive.Label\n    ref={ref}\n    className={cn(\"py-1.5 pl-8 pr-2 text-sm font-semibold\", className)}\n    {...props}\n  />\n))\nSelectLabel.displayName = SelectPrimitive.Label.displayName\n\nconst SelectItem = React.forwardRef<\n  React.ElementRef<typeof SelectPrimitive.Item>,\n  React.ComponentPropsWithoutRef<typeof SelectPrimitive.Item>\n>(({ className, children, ...props }, ref) => (\n  <SelectPrimitive.Item\n    ref={ref}\n    className={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      className\n    )}\n    {...props}\n  >\n    <span className=\"absolute left-2 flex h-3.5 w-3.5 items-center justify-center\">\n      <SelectPrimitive.ItemIndicator>\n        <Check className=\"h-4 w-4\" />\n      </SelectPrimitive.ItemIndicator>\n    </span>\n\n    <SelectPrimitive.ItemText>{children}</SelectPrimitive.ItemText>\n  </SelectPrimitive.Item>\n))\nSelectItem.displayName = SelectPrimitive.Item.displayName\n\nconst SelectSeparator = React.forwardRef<\n  React.ElementRef<typeof SelectPrimitive.Separator>,\n  React.ComponentPropsWithoutRef<typeof SelectPrimitive.Separator>\n>(({ className, ...props }, ref) => (\n  <SelectPrimitive.Separator\n    ref={ref}\n    className={cn(\"-mx-1 my-1 h-px bg-muted\", className)}\n    {...props}\n  />\n))\nSelectSeparator.displayName = SelectPrimitive.Separator.displayName\n\nexport {\n  Select,\n  SelectGroup,\n  SelectValue,\n  SelectTrigger,\n  SelectContent,\n  SelectLabel,\n  SelectItem,\n  SelectSeparator,\n}\n"
+      "name": "Select.vue",
+      "content": "<script setup lang=\"ts\">\nimport type { SelectRootEmits, SelectRootProps } from 'radix-vue'\nimport { SelectRoot } from 'radix-vue'\nimport { useEmitAsProps } from '@/lib/utils'\n\nconst props = defineProps<SelectRootProps>()\nconst emits = defineEmits<SelectRootEmits>()\n</script>\n\n<template>\n  <SelectRoot v-bind=\"{ ...props, ...useEmitAsProps(emits) }\">\n    <slot />\n  </SelectRoot>\n</template>\n"
+    },
+    {
+      "name": "SelectContent.vue",
+      "content": "<script setup lang=\"ts\">\nimport {\n  SelectContent,\n  type SelectContentEmits,\n  type SelectContentProps,\n  SelectPortal,\n  SelectViewport,\n} from 'radix-vue'\nimport { cn, useEmitAsProps } from '@/lib/utils'\n\nconst props = withDefaults(\n  defineProps<SelectContentProps & { class?: string }>(), {\n    position: 'popper',\n    sideOffset: 4,\n  },\n)\nconst emits = defineEmits<SelectContentEmits>()\nconst emitsAsProps = useEmitAsProps(emits)\n</script>\n\n<template>\n  <SelectPortal>\n    <SelectContent\n      v-bind=\"{ ...props, ...emitsAsProps, ...$attrs }\"\n      :class=\"\n        cn(\n          'relative z-50 min-w-[10rem] overflow-hidden rounded-md bg-background border border-border text-foreground shadow-md 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-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2',\n          position === 'popper'\n            && 'data-[side=bottom]:translate-y-1 data-[side=left]:-translate-x-1 data-[side=right]:translate-x-1 data-[side=top]:-translate-y-1',\n          props.class,\n        )\n      \"\n    >\n      <SelectViewport\n        :class=\"\n          cn('p-1',\n             position === 'popper'\n               && 'h-[var(--radix-select-trigger-height)] w-full min-w-[var(--radix-select-trigger-width)]')\"\n      >\n        <slot />\n      </SelectViewport>\n    </SelectContent>\n  </SelectPortal>\n</template>\n"
+    },
+    {
+      "name": "SelectGroup.vue",
+      "content": "<script setup lang=\"ts\">\nimport { SelectGroup, type SelectGroupProps } from 'radix-vue'\nimport { cn } from '@/lib/utils'\n\nconst props = defineProps<SelectGroupProps & { class?: string }>()\n</script>\n\n<template>\n  <SelectGroup :class=\"cn('p-1 w-full', props.class)\" v-bind=\"props\">\n    <slot />\n  </SelectGroup>\n</template>\n"
+    },
+    {
+      "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"
+    },
+    {
+      "name": "SelectItemText.vue",
+      "content": "<script setup lang=\"ts\">\nimport { SelectItemText, type SelectItemTextProps } from 'radix-vue'\n\nconst props = defineProps<SelectItemTextProps>()\n</script>\n\n<template>\n  <SelectItemText v-bind=\"props\">\n    <slot />\n  </SelectItemText>\n</template>\n"
+    },
+    {
+      "name": "SelectLabel.vue",
+      "content": "<script setup lang=\"ts\">\nimport { SelectLabel, type SelectLabelProps } from 'radix-vue'\nimport { cn } from '@/lib/utils'\n\nconst props = defineProps<SelectLabelProps & { class?: string }>()\n</script>\n\n<template>\n  <SelectLabel :class=\"cn('py-1.5 pl-8 pr-2 text-sm font-semibold', props.class)\">\n    <slot />\n  </SelectLabel>\n</template>\n"
+    },
+    {
+      "name": "SelectSeparator.vue",
+      "content": "<script setup lang=\"ts\">\nimport { SelectSeparator, type SelectSeparatorProps } from 'radix-vue'\nimport { cn } from '@/lib/utils'\n\nconst props = defineProps<SelectSeparatorProps & { class?: string }>()\n</script>\n\n<template>\n  <SelectSeparator :class=\"cn('-mx-1 my-1 h-px bg-muted', props.class)\" />\n</template>\n"
+    },
+    {
+      "name": "SelectTrigger.vue",
+      "content": "<script setup lang=\"ts\">\nimport { SelectIcon, SelectTrigger, type SelectTriggerProps } from 'radix-vue'\nimport { ChevronDown } from 'lucide-vue-next'\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-10 w-full items-center justify-between rounded-md border border-input bg-background px-3 py-2 text-sm ring-offset-background placeholder:text-muted-foreground focus:outline-none focus:ring-2 focus:ring-ring focus:ring-offset-2 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      <ChevronDown class=\"w-4 h-4 opacity-50\" />\n    </SelectIcon>\n  </SelectTrigger>\n</template>\n"
+    },
+    {
+      "name": "SelectValue.vue",
+      "content": "<script setup lang=\"ts\">\nimport { SelectValue, type SelectValueProps } from 'radix-vue'\n\nconst props = defineProps<SelectValueProps>()\n</script>\n\n<template>\n  <SelectValue v-bind=\"props\">\n    <slot />\n  </SelectValue>\n</template>\n"
+    },
+    {
+      "name": "index.ts",
+      "content": "export { default as Select } from './Select.vue'\nexport { default as SelectValue } from './SelectValue.vue'\nexport { default as SelectTrigger } from './SelectTrigger.vue'\nexport { default as SelectContent } from './SelectContent.vue'\nexport { default as SelectGroup } from './SelectGroup.vue'\nexport { default as SelectItem } from './SelectItem.vue'\nexport { default as SelectItemText } from './SelectItemText.vue'\nexport { default as SelectLabel } from './SelectLabel.vue'\nexport { default as SelectSeparator } from './SelectSeparator.vue'\n"
     }
   ],
   "type": "components:ui"
diff --git a/apps/www/src/public/registry/styles/default/separator.json b/apps/www/src/public/registry/styles/default/separator.json
index fc49fac7..1c4cd911 100644
--- a/apps/www/src/public/registry/styles/default/separator.json
+++ b/apps/www/src/public/registry/styles/default/separator.json
@@ -1,12 +1,19 @@
 {
   "name": "separator",
   "dependencies": [
-    "@radix-ui/react-separator"
+    "radix-vue"
+  ],
+  "registryDependencies": [
+    "utils"
   ],
   "files": [
     {
-      "name": "separator.tsx",
-      "content": "\"use client\"\n\nimport * as React from \"react\"\nimport * as SeparatorPrimitive from \"@radix-ui/react-separator\"\n\nimport { cn } from \"@/lib/utils\"\n\nconst Separator = React.forwardRef<\n  React.ElementRef<typeof SeparatorPrimitive.Root>,\n  React.ComponentPropsWithoutRef<typeof SeparatorPrimitive.Root>\n>(\n  (\n    { className, orientation = \"horizontal\", decorative = true, ...props },\n    ref\n  ) => (\n    <SeparatorPrimitive.Root\n      ref={ref}\n      decorative={decorative}\n      orientation={orientation}\n      className={cn(\n        \"shrink-0 bg-border\",\n        orientation === \"horizontal\" ? \"h-[1px] w-full\" : \"h-full w-[1px]\",\n        className\n      )}\n      {...props}\n    />\n  )\n)\nSeparator.displayName = SeparatorPrimitive.Root.displayName\n\nexport { Separator }\n"
+      "name": "Separator.vue",
+      "content": "<script setup lang=\"ts\">\nimport { Separator, type SeparatorProps } from 'radix-vue'\nimport { cn } from '@/lib/utils'\n\nconst props = defineProps<SeparatorProps & { class?: string }>()\n</script>\n\n<template>\n  <Separator\n    :class=\"[\n      cn('shrink-0 bg-secondary', props.class),\n      props.orientation === 'vertical' ? 'w-px h-full' : 'h-px w-full',\n    ]\"\n  />\n</template>\n"
+    },
+    {
+      "name": "index.ts",
+      "content": "export { default as Separator } from './Separator.vue'\n"
     }
   ],
   "type": "components:ui"
diff --git a/apps/www/src/public/registry/styles/default/sheet.json b/apps/www/src/public/registry/styles/default/sheet.json
index f755a087..599eecb2 100644
--- a/apps/www/src/public/registry/styles/default/sheet.json
+++ b/apps/www/src/public/registry/styles/default/sheet.json
@@ -1,12 +1,47 @@
 {
   "name": "sheet",
   "dependencies": [
-    "@radix-ui/react-dialog"
+    "radix-vue"
+  ],
+  "registryDependencies": [
+    "utils"
   ],
   "files": [
     {
-      "name": "sheet.tsx",
-      "content": "\"use client\"\n\nimport * as React from \"react\"\nimport * as SheetPrimitive from \"@radix-ui/react-dialog\"\nimport { cva, type VariantProps } from \"class-variance-authority\"\nimport { X } from \"lucide-react\"\n\nimport { cn } from \"@/lib/utils\"\n\nconst Sheet = SheetPrimitive.Root\n\nconst SheetTrigger = SheetPrimitive.Trigger\n\nconst SheetClose = SheetPrimitive.Close\n\nconst SheetPortal = ({\n  className,\n  ...props\n}: SheetPrimitive.DialogPortalProps) => (\n  <SheetPrimitive.Portal className={cn(className)} {...props} />\n)\nSheetPortal.displayName = SheetPrimitive.Portal.displayName\n\nconst SheetOverlay = React.forwardRef<\n  React.ElementRef<typeof SheetPrimitive.Overlay>,\n  React.ComponentPropsWithoutRef<typeof SheetPrimitive.Overlay>\n>(({ className, ...props }, ref) => (\n  <SheetPrimitive.Overlay\n    className={cn(\n      \"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      className\n    )}\n    {...props}\n    ref={ref}\n  />\n))\nSheetOverlay.displayName = SheetPrimitive.Overlay.displayName\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 data-[state=closed]:slide-out-to-top data-[state=open]:slide-in-from-top\",\n        bottom:\n          \"inset-x-0 bottom-0 border-t 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 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 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\ninterface SheetContentProps\n  extends React.ComponentPropsWithoutRef<typeof SheetPrimitive.Content>,\n    VariantProps<typeof sheetVariants> {}\n\nconst SheetContent = React.forwardRef<\n  React.ElementRef<typeof SheetPrimitive.Content>,\n  SheetContentProps\n>(({ side = \"right\", className, children, ...props }, ref) => (\n  <SheetPortal>\n    <SheetOverlay />\n    <SheetPrimitive.Content\n      ref={ref}\n      className={cn(sheetVariants({ side }), className)}\n      {...props}\n    >\n      {children}\n      <SheetPrimitive.Close className=\"absolute right-4 top-4 rounded-sm opacity-70 ring-offset-background transition-opacity hover:opacity-100 focus:outline-none focus:ring-2 focus:ring-ring focus:ring-offset-2 disabled:pointer-events-none data-[state=open]:bg-secondary\">\n        <X className=\"h-4 w-4\" />\n        <span className=\"sr-only\">Close</span>\n      </SheetPrimitive.Close>\n    </SheetPrimitive.Content>\n  </SheetPortal>\n))\nSheetContent.displayName = SheetPrimitive.Content.displayName\n\nconst SheetHeader = ({\n  className,\n  ...props\n}: React.HTMLAttributes<HTMLDivElement>) => (\n  <div\n    className={cn(\n      \"flex flex-col space-y-2 text-center sm:text-left\",\n      className\n    )}\n    {...props}\n  />\n)\nSheetHeader.displayName = \"SheetHeader\"\n\nconst SheetFooter = ({\n  className,\n  ...props\n}: React.HTMLAttributes<HTMLDivElement>) => (\n  <div\n    className={cn(\n      \"flex flex-col-reverse sm:flex-row sm:justify-end sm:space-x-2\",\n      className\n    )}\n    {...props}\n  />\n)\nSheetFooter.displayName = \"SheetFooter\"\n\nconst SheetTitle = React.forwardRef<\n  React.ElementRef<typeof SheetPrimitive.Title>,\n  React.ComponentPropsWithoutRef<typeof SheetPrimitive.Title>\n>(({ className, ...props }, ref) => (\n  <SheetPrimitive.Title\n    ref={ref}\n    className={cn(\"text-lg font-semibold text-foreground\", className)}\n    {...props}\n  />\n))\nSheetTitle.displayName = SheetPrimitive.Title.displayName\n\nconst SheetDescription = React.forwardRef<\n  React.ElementRef<typeof SheetPrimitive.Description>,\n  React.ComponentPropsWithoutRef<typeof SheetPrimitive.Description>\n>(({ className, ...props }, ref) => (\n  <SheetPrimitive.Description\n    ref={ref}\n    className={cn(\"text-sm text-muted-foreground\", className)}\n    {...props}\n  />\n))\nSheetDescription.displayName = SheetPrimitive.Description.displayName\n\nexport {\n  Sheet,\n  SheetTrigger,\n  SheetClose,\n  SheetContent,\n  SheetHeader,\n  SheetFooter,\n  SheetTitle,\n  SheetDescription,\n}\n"
+      "name": "Sheet.vue",
+      "content": "<script setup lang=\"ts\">\nimport { DialogRoot } from 'radix-vue'\n</script>\n\n<template>\n  <DialogRoot>\n    <slot />\n  </DialogRoot>\n</template>\n"
+    },
+    {
+      "name": "SheetClose.vue",
+      "content": "<script setup lang=\"ts\">\nimport { DialogClose, type DialogCloseProps } from 'radix-vue'\n\nconst props = defineProps<DialogCloseProps>()\n</script>\n\n<template>\n  <DialogClose v-bind=\"props\">\n    <slot />\n  </DialogClose>\n</template>\n"
+    },
+    {
+      "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 { X } from 'lucide-vue-next'\nimport { cva } from 'class-variance-authority'\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        <X class=\"w-4 h-4 text-muted-foreground\" />\n      </DialogClose>\n    </DialogContent>\n  </DialogPortal>\n</template>\n"
+    },
+    {
+      "name": "SheetDescription.vue",
+      "content": "<script setup lang=\"ts\">\nimport { DialogDescription, type DialogDescriptionProps } from 'radix-vue'\nimport { cn } from '@/lib/utils'\n\nconst props = defineProps<DialogDescriptionProps & { class?: string }>()\n</script>\n\n<template>\n  <DialogDescription\n    :class=\"cn('text-sm text-muted-foreground', props.class)\"\n    v-bind=\"props\"\n  >\n    <slot />\n  </DialogDescription>\n</template>\n"
+    },
+    {
+      "name": "SheetFooter.vue",
+      "content": "<script setup lang=\"ts\">\nimport { cn } from '@/lib/utils'\n\nconst props = defineProps<{ class?: string }>()\n</script>\n\n<template>\n  <div\n    :class=\"\n      cn(\n        'flex flex-col-reverse sm:flex-row sm:justify-end sm:space-x-2',\n        props.class,\n      )\n    \"\n  >\n    <slot />\n  </div>\n</template>\n"
+    },
+    {
+      "name": "SheetHeader.vue",
+      "content": "<script setup lang=\"ts\">\nimport { cn } from '@/lib/utils'\n\nconst props = defineProps<{ class?: string }>()\n</script>\n\n<template>\n  <div\n    :class=\"\n      cn('flex flex-col space-y-2 text-center sm:text-left', props.class)\n    \"\n  >\n    <slot />\n  </div>\n</template>\n"
+    },
+    {
+      "name": "SheetTitle.vue",
+      "content": "<script setup lang=\"ts\">\nimport { DialogTitle, type DialogTitleProps } from 'radix-vue'\nimport { cn } from '@/lib/utils'\n\nconst props = defineProps<DialogTitleProps & { class?: string }>()\n</script>\n\n<template>\n  <DialogTitle\n    :class=\"cn('text-lg font-semibold text-foreground', props.class)\"\n    v-bind=\"props\"\n  >\n    <slot />\n  </DialogTitle>\n</template>\n"
+    },
+    {
+      "name": "SheetTrigger.vue",
+      "content": "<script setup lang=\"ts\">\nimport { DialogTrigger, type DialogTriggerProps } from 'radix-vue'\n\nconst props = defineProps<DialogTriggerProps>()\n</script>\n\n<template>\n  <DialogTrigger v-bind=\"props\">\n    <slot />\n  </DialogTrigger>\n</template>\n"
+    },
+    {
+      "name": "index.ts",
+      "content": "export { default as Sheet } from './Sheet.vue'\nexport { default as SheetTrigger } from './SheetTrigger.vue'\nexport { default as SheetClose } from './SheetClose.vue'\nexport { default as SheetContent } from './SheetContent.vue'\nexport { default as SheetHeader } from './SheetHeader.vue'\nexport { default as SheetTitle } from './SheetTitle.vue'\nexport { default as SheetDescription } from './SheetDescription.vue'\nexport { default as SheetFooter } from './SheetFooter.vue'\n"
     }
   ],
   "type": "components:ui"
diff --git a/apps/www/src/public/registry/styles/default/skeleton.json b/apps/www/src/public/registry/styles/default/skeleton.json
index 71d6d85f..2c0fd3ef 100644
--- a/apps/www/src/public/registry/styles/default/skeleton.json
+++ b/apps/www/src/public/registry/styles/default/skeleton.json
@@ -1,9 +1,17 @@
 {
   "name": "skeleton",
+  "dependencies": [],
+  "registryDependencies": [
+    "utils"
+  ],
   "files": [
     {
-      "name": "skeleton.tsx",
-      "content": "import { cn } from \"@/lib/utils\"\n\nfunction Skeleton({\n  className,\n  ...props\n}: React.HTMLAttributes<HTMLDivElement>) {\n  return (\n    <div\n      className={cn(\"animate-pulse rounded-md bg-muted\", className)}\n      {...props}\n    />\n  )\n}\n\nexport { Skeleton }\n"
+      "name": "Skeleton.vue",
+      "content": "<script setup lang=\"ts\">\nimport { cn } from '@/lib/utils'\n\ninterface SkeletonProps {\n  class?: string\n}\n\nconst props = defineProps<SkeletonProps>()\n</script>\n\n<template>\n  <div :class=\"cn('animate-pulse rounded-md bg-secondary', props.class)\" />\n</template>\n"
+    },
+    {
+      "name": "index.ts",
+      "content": "export { default as Skeleton } from './Skeleton.vue'\n"
     }
   ],
   "type": "components:ui"
diff --git a/apps/www/src/public/registry/styles/default/slider.json b/apps/www/src/public/registry/styles/default/slider.json
index 662c5c2b..6b489789 100644
--- a/apps/www/src/public/registry/styles/default/slider.json
+++ b/apps/www/src/public/registry/styles/default/slider.json
@@ -1,12 +1,19 @@
 {
   "name": "slider",
   "dependencies": [
-    "@radix-ui/react-slider"
+    "radix-vue"
+  ],
+  "registryDependencies": [
+    "utils"
   ],
   "files": [
     {
-      "name": "slider.tsx",
-      "content": "\"use client\"\n\nimport * as React from \"react\"\nimport * as SliderPrimitive from \"@radix-ui/react-slider\"\n\nimport { cn } from \"@/lib/utils\"\n\nconst Slider = React.forwardRef<\n  React.ElementRef<typeof SliderPrimitive.Root>,\n  React.ComponentPropsWithoutRef<typeof SliderPrimitive.Root>\n>(({ className, ...props }, ref) => (\n  <SliderPrimitive.Root\n    ref={ref}\n    className={cn(\n      \"relative flex w-full touch-none select-none items-center\",\n      className\n    )}\n    {...props}\n  >\n    <SliderPrimitive.Track className=\"relative h-2 w-full grow overflow-hidden rounded-full bg-secondary\">\n      <SliderPrimitive.Range className=\"absolute h-full bg-primary\" />\n    </SliderPrimitive.Track>\n    <SliderPrimitive.Thumb className=\"block h-5 w-5 rounded-full border-2 border-primary bg-background ring-offset-background transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:pointer-events-none disabled:opacity-50\" />\n  </SliderPrimitive.Root>\n))\nSlider.displayName = SliderPrimitive.Root.displayName\n\nexport { Slider }\n"
+      "name": "Slider.vue",
+      "content": "<script setup lang=\"ts\">\nimport type { SliderRootEmits, SliderRootProps } from 'radix-vue'\nimport { SliderRange, SliderRoot, SliderThumb, SliderTrack } from 'radix-vue'\nimport { cn, useEmitAsProps } from '@/lib/utils'\n\nconst props = defineProps<SliderRootProps>()\nconst emits = defineEmits<SliderRootEmits>()\n</script>\n\n<template>\n  <SliderRoot\n    :class=\"cn(\n      'relative flex w-full touch-none select-none items-center',\n      $attrs.class ?? '',\n    )\"\n    v-bind=\"{ ...props, ...useEmitAsProps(emits) }\"\n  >\n    <SliderTrack class=\"relative h-2 w-full grow overflow-hidden rounded-full bg-secondary\">\n      <SliderRange class=\"absolute h-full bg-primary\" />\n    </SliderTrack>\n    <SliderThumb class=\"block h-5 w-5 rounded-full border-2 border-primary bg-background ring-offset-background transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:pointer-events-none disabled:opacity-50\" />\n  </SliderRoot>\n</template>\n"
+    },
+    {
+      "name": "index.ts",
+      "content": "export { default as Slider } from './Slider.vue'\n"
     }
   ],
   "type": "components:ui"
diff --git a/apps/www/src/public/registry/styles/default/switch.json b/apps/www/src/public/registry/styles/default/switch.json
index ac4dac95..8f5006b1 100644
--- a/apps/www/src/public/registry/styles/default/switch.json
+++ b/apps/www/src/public/registry/styles/default/switch.json
@@ -1,12 +1,19 @@
 {
   "name": "switch",
   "dependencies": [
-    "@radix-ui/react-switch"
+    "radix-vue"
+  ],
+  "registryDependencies": [
+    "utils"
   ],
   "files": [
     {
-      "name": "switch.tsx",
-      "content": "\"use client\"\n\nimport * as React from \"react\"\nimport * as SwitchPrimitives from \"@radix-ui/react-switch\"\n\nimport { cn } from \"@/lib/utils\"\n\nconst Switch = React.forwardRef<\n  React.ElementRef<typeof SwitchPrimitives.Root>,\n  React.ComponentPropsWithoutRef<typeof SwitchPrimitives.Root>\n>(({ className, ...props }, ref) => (\n  <SwitchPrimitives.Root\n    className={cn(\n      \"peer inline-flex h-[24px] w-[44px] shrink-0 cursor-pointer items-center rounded-full border-2 border-transparent transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 focus-visible:ring-offset-background disabled:cursor-not-allowed disabled:opacity-50 data-[state=checked]:bg-primary data-[state=unchecked]:bg-input\",\n      className\n    )}\n    {...props}\n    ref={ref}\n  >\n    <SwitchPrimitives.Thumb\n      className={cn(\n        \"pointer-events-none block h-5 w-5 rounded-full bg-background shadow-lg ring-0 transition-transform data-[state=checked]:translate-x-5 data-[state=unchecked]:translate-x-0\"\n      )}\n    />\n  </SwitchPrimitives.Root>\n))\nSwitch.displayName = SwitchPrimitives.Root.displayName\n\nexport { Switch }\n"
+      "name": "Switch.vue",
+      "content": "<script setup lang=\"ts\">\nimport {\n  SwitchRoot,\n  type SwitchRootEmits,\n  type SwitchRootProps,\n  SwitchThumb,\n} from 'radix-vue'\nimport { cn } from '@/lib/utils'\n\nconst props = defineProps<SwitchRootProps & { class?: string }>()\n\nconst emits = defineEmits<SwitchRootEmits>()\n</script>\n\n<template>\n  <SwitchRoot\n    v-bind=\"props\"\n    :class=\"\n      cn(\n        'peer inline-flex h-[24px] w-[44px] shrink-0 cursor-pointer items-center rounded-full border-2 border-transparent transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 focus-visible:ring-offset-background disabled:cursor-not-allowed disabled:opacity-50 data-[state=checked]:bg-primary data-[state=unchecked]:bg-input',\n        props.class,\n      )\n    \"\n    @update:checked=\"emits('update:checked', $event)\"\n  >\n    <SwitchThumb\n      :class=\"\n        cn(\n          'pointer-events-none block h-5 w-5 rounded-full bg-background shadow-lg ring-0 transition-transform data-[state=checked]:translate-x-5 data-[state=unchecked]:translate-x-0',\n        )\n      \"\n    />\n  </SwitchRoot>\n</template>\n"
+    },
+    {
+      "name": "index.ts",
+      "content": "export { default as Switch } from './Switch.vue'\n"
     }
   ],
   "type": "components:ui"
diff --git a/apps/www/src/public/registry/styles/default/table.json b/apps/www/src/public/registry/styles/default/table.json
index 5f61c81b..fb0d4341 100644
--- a/apps/www/src/public/registry/styles/default/table.json
+++ b/apps/www/src/public/registry/styles/default/table.json
@@ -1,9 +1,49 @@
 {
   "name": "table",
+  "dependencies": [],
+  "registryDependencies": [
+    "utils"
+  ],
   "files": [
     {
-      "name": "table.tsx",
-      "content": "import * as React from \"react\"\n\nimport { cn } from \"@/lib/utils\"\n\nconst Table = React.forwardRef<\n  HTMLTableElement,\n  React.HTMLAttributes<HTMLTableElement>\n>(({ className, ...props }, ref) => (\n  <div className=\"w-full overflow-auto\">\n    <table\n      ref={ref}\n      className={cn(\"w-full caption-bottom text-sm\", className)}\n      {...props}\n    />\n  </div>\n))\nTable.displayName = \"Table\"\n\nconst TableHeader = React.forwardRef<\n  HTMLTableSectionElement,\n  React.HTMLAttributes<HTMLTableSectionElement>\n>(({ className, ...props }, ref) => (\n  <thead ref={ref} className={cn(\"[&_tr]:border-b\", className)} {...props} />\n))\nTableHeader.displayName = \"TableHeader\"\n\nconst TableBody = React.forwardRef<\n  HTMLTableSectionElement,\n  React.HTMLAttributes<HTMLTableSectionElement>\n>(({ className, ...props }, ref) => (\n  <tbody\n    ref={ref}\n    className={cn(\"[&_tr:last-child]:border-0\", className)}\n    {...props}\n  />\n))\nTableBody.displayName = \"TableBody\"\n\nconst TableFooter = React.forwardRef<\n  HTMLTableSectionElement,\n  React.HTMLAttributes<HTMLTableSectionElement>\n>(({ className, ...props }, ref) => (\n  <tfoot\n    ref={ref}\n    className={cn(\"bg-primary font-medium text-primary-foreground\", className)}\n    {...props}\n  />\n))\nTableFooter.displayName = \"TableFooter\"\n\nconst TableRow = React.forwardRef<\n  HTMLTableRowElement,\n  React.HTMLAttributes<HTMLTableRowElement>\n>(({ className, ...props }, ref) => (\n  <tr\n    ref={ref}\n    className={cn(\n      \"border-b transition-colors hover:bg-muted/50 data-[state=selected]:bg-muted\",\n      className\n    )}\n    {...props}\n  />\n))\nTableRow.displayName = \"TableRow\"\n\nconst TableHead = React.forwardRef<\n  HTMLTableCellElement,\n  React.ThHTMLAttributes<HTMLTableCellElement>\n>(({ className, ...props }, ref) => (\n  <th\n    ref={ref}\n    className={cn(\n      \"h-12 px-4 text-left align-middle font-medium text-muted-foreground [&:has([role=checkbox])]:pr-0\",\n      className\n    )}\n    {...props}\n  />\n))\nTableHead.displayName = \"TableHead\"\n\nconst TableCell = React.forwardRef<\n  HTMLTableCellElement,\n  React.TdHTMLAttributes<HTMLTableCellElement>\n>(({ className, ...props }, ref) => (\n  <td\n    ref={ref}\n    className={cn(\"p-4 align-middle [&:has([role=checkbox])]:pr-0\", className)}\n    {...props}\n  />\n))\nTableCell.displayName = \"TableCell\"\n\nconst TableCaption = React.forwardRef<\n  HTMLTableCaptionElement,\n  React.HTMLAttributes<HTMLTableCaptionElement>\n>(({ className, ...props }, ref) => (\n  <caption\n    ref={ref}\n    className={cn(\"mt-4 text-sm text-muted-foreground\", className)}\n    {...props}\n  />\n))\nTableCaption.displayName = \"TableCaption\"\n\nexport {\n  Table,\n  TableHeader,\n  TableBody,\n  TableFooter,\n  TableHead,\n  TableRow,\n  TableCell,\n  TableCaption,\n}\n"
+      "name": "Table.vue",
+      "content": "<script setup lang=\"ts\">\nimport { cn } from '@/lib/utils'\n\nconst props = defineProps<{ class?: string }>()\n</script>\n\n<template>\n  <div class=\"w-full overflow-auto\">\n    <table :class=\"cn('w-full caption-bottom text-sm', props.class)\">\n      <slot />\n    </table>\n  </div>\n</template>\n"
+    },
+    {
+      "name": "TableBody.vue",
+      "content": "<script setup lang=\"ts\">\nimport { cn } from '@/lib/utils'\n\nconst props = defineProps<{ class?: string }>()\n</script>\n\n<template>\n  <tbody :class=\"cn('[&_tr:last-child]:border-0', props.class)\">\n    <slot />\n  </tbody>\n</template>\n"
+    },
+    {
+      "name": "TableCaption.vue",
+      "content": "<script setup lang=\"ts\">\nimport { cn } from '@/lib/utils'\n\nconst props = defineProps<{ class?: string }>()\n</script>\n\n<template>\n  <caption :class=\"cn('mt-4 text-sm text-muted-foreground', props.class)\">\n    <slot />\n  </caption>\n</template>\n"
+    },
+    {
+      "name": "TableCell.vue",
+      "content": "<script setup lang=\"ts\">\nimport { cn } from '@/lib/utils'\n\nconst props = defineProps<{ class?: string }>()\n</script>\n\n<template>\n  <td\n    :class=\"\n      cn(\n        'p-4 align-middle [&:has([role=checkbox])]:pr-0',\n        props.class,\n      )\n    \"\n  >\n    <slot />\n  </td>\n</template>\n"
+    },
+    {
+      "name": "TableEmpty.vue",
+      "content": "<script setup lang=\"ts\">\nimport TableRow from './TableRow.vue'\nimport TableCell from './TableCell.vue'\nimport { cn } from '@/lib/utils'\n\ninterface Props {\n  class?: string\n  colspan?: number\n}\n\nconst props = withDefaults(defineProps<Props>(), {\n  class: '',\n  colspan: 1,\n})\n</script>\n\n<template>\n  <TableRow>\n    <TableCell\n      :class=\"\n        cn(\n          'p-4 whitespace-nowrap align-middle text-sm text-foreground',\n          props.class,\n        )\n      \"\n      :colspan=\"props.colspan\"\n    >\n      <div class=\"flex items-center justify-center py-10\">\n        <slot />\n      </div>\n    </TableCell>\n  </TableRow>\n</template>\n"
+    },
+    {
+      "name": "TableFooter.vue",
+      "content": "<script setup lang=\"ts\">\nimport { cn } from '@/lib/utils'\n\nconst props = defineProps<{ class?: string }>()\n</script>\n\n<template>\n  <tfoot :class=\"cn('bg-primary font-medium text-primary-foreground', props.class)\">\n    <slot />\n  </tfoot>\n</template>\n"
+    },
+    {
+      "name": "TableHead.vue",
+      "content": "<script setup lang=\"ts\">\nimport { cn } from '@/lib/utils'\n\nconst props = defineProps<{ class?: string }>()\n</script>\n\n<template>\n  <th :class=\"cn('h-12 px-4 text-left align-middle font-medium text-muted-foreground [&:has([role=checkbox])]:pr-0', props.class)\">\n    <slot />\n  </th>\n</template>\n"
+    },
+    {
+      "name": "TableHeader.vue",
+      "content": "<script setup lang=\"ts\">\nimport { cn } from '@/lib/utils'\n\nconst props = defineProps<{ class?: string }>()\n</script>\n\n<template>\n  <thead :class=\"cn('[&_tr]:border-b', props.class)\">\n    <slot />\n  </thead>\n</template>\n"
+    },
+    {
+      "name": "TableRow.vue",
+      "content": "<script setup lang=\"ts\">\nimport { cn } from '@/lib/utils'\n\nconst props = defineProps<{ class?: string }>()\n</script>\n\n<template>\n  <tr :class=\"cn('border-b transition-colors hover:bg-muted/50 data-[state=selected]:bg-muted', props.class)\">\n    <slot />\n  </tr>\n</template>\n"
+    },
+    {
+      "name": "index.ts",
+      "content": "export { default as Table } from './Table.vue'\nexport { default as TableBody } from './TableBody.vue'\nexport { default as TableCell } from './TableCell.vue'\nexport { default as TableHead } from './TableHead.vue'\nexport { default as TableHeader } from './TableHeader.vue'\nexport { default as TableRow } from './TableRow.vue'\nexport { default as TableCaption } from './TableCaption.vue'\nexport { default as TableEmpty } from './TableEmpty.vue'\n"
     }
   ],
   "type": "components:ui"
diff --git a/apps/www/src/public/registry/styles/default/tabs.json b/apps/www/src/public/registry/styles/default/tabs.json
index 045928cd..3f89a0b7 100644
--- a/apps/www/src/public/registry/styles/default/tabs.json
+++ b/apps/www/src/public/registry/styles/default/tabs.json
@@ -1,12 +1,31 @@
 {
   "name": "tabs",
   "dependencies": [
-    "@radix-ui/react-tabs"
+    "radix-vue"
+  ],
+  "registryDependencies": [
+    "utils"
   ],
   "files": [
     {
-      "name": "tabs.tsx",
-      "content": "\"use client\"\n\nimport * as React from \"react\"\nimport * as TabsPrimitive from \"@radix-ui/react-tabs\"\n\nimport { cn } from \"@/lib/utils\"\n\nconst Tabs = TabsPrimitive.Root\n\nconst TabsList = React.forwardRef<\n  React.ElementRef<typeof TabsPrimitive.List>,\n  React.ComponentPropsWithoutRef<typeof TabsPrimitive.List>\n>(({ className, ...props }, ref) => (\n  <TabsPrimitive.List\n    ref={ref}\n    className={cn(\n      \"inline-flex h-10 items-center justify-center rounded-md bg-muted p-1 text-muted-foreground\",\n      className\n    )}\n    {...props}\n  />\n))\nTabsList.displayName = TabsPrimitive.List.displayName\n\nconst TabsTrigger = React.forwardRef<\n  React.ElementRef<typeof TabsPrimitive.Trigger>,\n  React.ComponentPropsWithoutRef<typeof TabsPrimitive.Trigger>\n>(({ className, ...props }, ref) => (\n  <TabsPrimitive.Trigger\n    ref={ref}\n    className={cn(\n      \"inline-flex items-center justify-center whitespace-nowrap rounded-sm px-3 py-1.5 text-sm font-medium ring-offset-background transition-all focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:pointer-events-none disabled:opacity-50 data-[state=active]:bg-background data-[state=active]:text-foreground data-[state=active]:shadow-sm\",\n      className\n    )}\n    {...props}\n  />\n))\nTabsTrigger.displayName = TabsPrimitive.Trigger.displayName\n\nconst TabsContent = React.forwardRef<\n  React.ElementRef<typeof TabsPrimitive.Content>,\n  React.ComponentPropsWithoutRef<typeof TabsPrimitive.Content>\n>(({ className, ...props }, ref) => (\n  <TabsPrimitive.Content\n    ref={ref}\n    className={cn(\n      \"mt-2 ring-offset-background focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2\",\n      className\n    )}\n    {...props}\n  />\n))\nTabsContent.displayName = TabsPrimitive.Content.displayName\n\nexport { Tabs, TabsList, TabsTrigger, TabsContent }\n"
+      "name": "Tabs.vue",
+      "content": "<script setup lang=\"ts\">\nimport { TabsRoot, type TabsRootProps } from 'radix-vue'\n\nconst props = defineProps<TabsRootProps>()\n</script>\n\n<template>\n  <TabsRoot v-bind=\"props\">\n    <slot />\n  </TabsRoot>\n</template>\n"
+    },
+    {
+      "name": "TabsContent.vue",
+      "content": "<script setup lang=\"ts\">\nimport { TabsContent, type TabsContentProps } from 'radix-vue'\nimport { cn } from '@/lib/utils'\n\nconst props = defineProps<TabsContentProps & { class?: string }>()\n</script>\n\n<template>\n  <TabsContent\n    :class=\"cn('mt-2 ring-offset-background focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2', props.class)\"\n    v-bind=\"props\"\n  >\n    <slot />\n  </TabsContent>\n</template>\n"
+    },
+    {
+      "name": "TabsList.vue",
+      "content": "<script setup lang=\"ts\">\nimport { TabsList, type TabsListProps } from 'radix-vue'\nimport { cn } from '@/lib/utils'\n\nconst props = defineProps<TabsListProps & { class?: string }>()\n</script>\n\n<template>\n  <TabsList\n    v-bind=\"props\"\n    :class=\"\n      cn(\n        'inline-flex h-10 items-center justify-center rounded-md bg-muted p-1 text-muted-foreground',\n        props.class,\n      )\n    \"\n  >\n    <slot />\n  </TabsList>\n</template>\n"
+    },
+    {
+      "name": "TabsTrigger.vue",
+      "content": "<script setup lang=\"ts\">\nimport { TabsTrigger, type TabsTriggerProps } from 'radix-vue'\nimport { cn } from '@/lib/utils'\n\nconst props = defineProps<TabsTriggerProps & { class?: string }>()\n</script>\n\n<template>\n  <TabsTrigger\n    v-bind=\"props\"\n    :class=\"\n      cn(\n        'inline-flex items-center justify-center whitespace-nowrap rounded-sm px-3 py-1.5 text-sm font-medium ring-offset-background transition-all focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:pointer-events-none disabled:opacity-50 data-[state=active]:bg-background data-[state=active]:text-foreground data-[state=active]:shadow-sm',\n        props.class,\n      )\n    \"\n  >\n    <slot />\n  </TabsTrigger>\n</template>\n"
+    },
+    {
+      "name": "index.ts",
+      "content": "export { default as Tabs } from './Tabs.vue'\nexport { default as TabsTrigger } from './TabsTrigger.vue'\nexport { default as TabsList } from './TabsList.vue'\nexport { default as TabsContent } from './TabsContent.vue'\n"
     }
   ],
   "type": "components:ui"
diff --git a/apps/www/src/public/registry/styles/default/textarea.json b/apps/www/src/public/registry/styles/default/textarea.json
index 1b94cf21..7ceaf393 100644
--- a/apps/www/src/public/registry/styles/default/textarea.json
+++ b/apps/www/src/public/registry/styles/default/textarea.json
@@ -1,9 +1,17 @@
 {
   "name": "textarea",
+  "dependencies": [],
+  "registryDependencies": [
+    "utils"
+  ],
   "files": [
     {
-      "name": "textarea.tsx",
-      "content": "import * as React from \"react\"\n\nimport { cn } from \"@/lib/utils\"\n\nexport interface TextareaProps\n  extends React.TextareaHTMLAttributes<HTMLTextAreaElement> {}\n\nconst Textarea = React.forwardRef<HTMLTextAreaElement, TextareaProps>(\n  ({ className, ...props }, ref) => {\n    return (\n      <textarea\n        className={cn(\n          \"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\",\n          className\n        )}\n        ref={ref}\n        {...props}\n      />\n    )\n  }\n)\nTextarea.displayName = \"Textarea\"\n\nexport { Textarea }\n"
+      "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"
+    },
+    {
+      "name": "index.ts",
+      "content": "export { default as Textarea } from './Textarea.vue'\n"
     }
   ],
   "type": "components:ui"
diff --git a/apps/www/src/public/registry/styles/default/toggle.json b/apps/www/src/public/registry/styles/default/toggle.json
index 3bb19f63..9fdd7c9c 100644
--- a/apps/www/src/public/registry/styles/default/toggle.json
+++ b/apps/www/src/public/registry/styles/default/toggle.json
@@ -1,12 +1,19 @@
 {
   "name": "toggle",
   "dependencies": [
-    "@radix-ui/react-toggle"
+    "radix-vue"
+  ],
+  "registryDependencies": [
+    "utils"
   ],
   "files": [
     {
-      "name": "toggle.tsx",
-      "content": "\"use client\"\n\nimport * as React from \"react\"\nimport * as TogglePrimitive from \"@radix-ui/react-toggle\"\nimport { cva, type VariantProps } from \"class-variance-authority\"\n\nimport { cn } from \"@/lib/utils\"\n\nconst toggleVariants = cva(\n  \"inline-flex items-center justify-center rounded-md text-sm font-medium ring-offset-background transition-colors hover:bg-muted hover:text-muted-foreground focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:pointer-events-none disabled:opacity-50 data-[state=on]:bg-accent data-[state=on]:text-accent-foreground\",\n  {\n    variants: {\n      variant: {\n        default: \"bg-transparent\",\n        outline:\n          \"border border-input bg-transparent hover:bg-accent hover:text-accent-foreground\",\n      },\n      size: {\n        default: \"h-10 px-3\",\n        sm: \"h-9 px-2.5\",\n        lg: \"h-11 px-5\",\n      },\n    },\n    defaultVariants: {\n      variant: \"default\",\n      size: \"default\",\n    },\n  }\n)\n\nconst Toggle = React.forwardRef<\n  React.ElementRef<typeof TogglePrimitive.Root>,\n  React.ComponentPropsWithoutRef<typeof TogglePrimitive.Root> &\n    VariantProps<typeof toggleVariants>\n>(({ className, variant, size, ...props }, ref) => (\n  <TogglePrimitive.Root\n    ref={ref}\n    className={cn(toggleVariants({ variant, size, className }))}\n    {...props}\n  />\n))\n\nToggle.displayName = TogglePrimitive.Root.displayName\n\nexport { Toggle, toggleVariants }\n"
+      "name": "Toggle.vue",
+      "content": "<script setup lang=\"ts\">\nimport type { ToggleEmits, ToggleProps } from 'radix-vue'\nimport { Toggle } from 'radix-vue'\nimport type { VariantProps } from 'class-variance-authority'\nimport { computed } from 'vue'\nimport { toggleVariants } from '.'\nimport { cn, useEmitAsProps } from '@/lib/utils'\n\ninterface ToggleVariantProps extends VariantProps<typeof toggleVariants> {}\n\ninterface Props extends ToggleProps {\n  variant?: ToggleVariantProps['variant']\n  size?: ToggleVariantProps['size']\n}\nconst props = withDefaults(defineProps<Props>(), {\n  variant: 'default',\n  size: 'default',\n})\nconst emits = defineEmits<ToggleEmits>()\n\nconst toggleProps = computed(() => {\n  // eslint-disable-next-line unused-imports/no-unused-vars\n  const { variant, size, ...otherProps } = props\n  return otherProps\n})\n</script>\n\n<template>\n  <Toggle\n    v-bind=\"{ ...toggleProps, ...useEmitAsProps(emits) }\"\n    :class=\"cn(toggleVariants({ variant, size, class: $attrs.class ?? '' }))\"\n  >\n    <slot />\n  </Toggle>\n</template>\n"
+    },
+    {
+      "name": "index.ts",
+      "content": "import { cva } from 'class-variance-authority'\n\nexport { default as Toggle } from './Toggle.vue'\n\nexport const toggleVariants = cva(\n  'inline-flex items-center justify-center rounded-md text-sm font-medium ring-offset-background transition-colors hover:bg-muted hover:text-muted-foreground focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:pointer-events-none disabled:opacity-50 data-[state=on]:bg-accent data-[state=on]:text-accent-foreground',\n  {\n    variants: {\n      variant: {\n        default: 'bg-transparent',\n        outline:\n          'border border-input bg-transparent hover:bg-accent hover:text-accent-foreground',\n      },\n      size: {\n        default: 'h-10 px-3',\n        sm: 'h-9 px-2.5',\n        lg: 'h-11 px-5',\n      },\n    },\n    defaultVariants: {\n      variant: 'default',\n      size: 'default',\n    },\n  },\n)\n"
     }
   ],
   "type": "components:ui"
diff --git a/apps/www/src/public/registry/styles/default/tooltip.json b/apps/www/src/public/registry/styles/default/tooltip.json
index 6d5046ca..2acd60ea 100644
--- a/apps/www/src/public/registry/styles/default/tooltip.json
+++ b/apps/www/src/public/registry/styles/default/tooltip.json
@@ -1,12 +1,31 @@
 {
   "name": "tooltip",
   "dependencies": [
-    "@radix-ui/react-tooltip"
+    "radix-vue"
+  ],
+  "registryDependencies": [
+    "utils"
   ],
   "files": [
     {
-      "name": "tooltip.tsx",
-      "content": "\"use client\"\n\nimport * as React from \"react\"\nimport * as TooltipPrimitive from \"@radix-ui/react-tooltip\"\n\nimport { cn } from \"@/lib/utils\"\n\nconst TooltipProvider = TooltipPrimitive.Provider\n\nconst Tooltip = TooltipPrimitive.Root\n\nconst TooltipTrigger = TooltipPrimitive.Trigger\n\nconst TooltipContent = React.forwardRef<\n  React.ElementRef<typeof TooltipPrimitive.Content>,\n  React.ComponentPropsWithoutRef<typeof TooltipPrimitive.Content>\n>(({ className, sideOffset = 4, ...props }, ref) => (\n  <TooltipPrimitive.Content\n    ref={ref}\n    sideOffset={sideOffset}\n    className={cn(\n      \"z-50 overflow-hidden rounded-md border bg-popover px-3 py-1.5 text-sm text-popover-foreground shadow-md animate-in fade-in-0 zoom-in-95 data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=closed]:zoom-out-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2\",\n      className\n    )}\n    {...props}\n  />\n))\nTooltipContent.displayName = TooltipPrimitive.Content.displayName\n\nexport { Tooltip, TooltipTrigger, TooltipContent, TooltipProvider }\n"
+      "name": "Tooltip.vue",
+      "content": "<script setup lang=\"ts\">\nimport { TooltipRoot, type TooltipRootEmits, type TooltipRootProps } from 'radix-vue'\nimport { useEmitAsProps } from '@/lib/utils'\n\nconst props = defineProps<TooltipRootProps>()\nconst emits = defineEmits<TooltipRootEmits>()\n</script>\n\n<template>\n  <TooltipRoot v-bind=\"{ ...props, ...useEmitAsProps(emits) }\">\n    <slot />\n  </TooltipRoot>\n</template>\n"
+    },
+    {
+      "name": "TooltipContent.vue",
+      "content": "<script setup lang=\"ts\">\nimport { TooltipContent, type TooltipContentEmits, type TooltipContentProps } from 'radix-vue'\nimport { cn, useEmitAsProps } from '@/lib/utils'\n\nconst props = withDefaults(defineProps<TooltipContentProps>(), {\n  sideOffset: 4,\n})\nconst emits = defineEmits<TooltipContentEmits>()\n</script>\n\n<template>\n  <TooltipContent v-bind=\"{ ...props, ...useEmitAsProps(emits) }\" :class=\"cn('z-50 overflow-hidden rounded-md border bg-popover px-3 py-1.5 text-sm text-popover-foreground shadow-md animate-in fade-in-0 zoom-in-95 data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=closed]:zoom-out-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2', $attrs.class ?? '')\">\n    <slot />\n  </TooltipContent>\n</template>\n"
+    },
+    {
+      "name": "TooltipProvider.vue",
+      "content": "<script setup lang=\"ts\">\nimport { TooltipProvider, type TooltipProviderProps } from 'radix-vue'\n\nconst props = defineProps<TooltipProviderProps>()\n</script>\n\n<template>\n  <TooltipProvider v-bind=\"props\">\n    <slot />\n  </TooltipProvider>\n</template>\n"
+    },
+    {
+      "name": "TooltipTrigger.vue",
+      "content": "<script setup lang=\"ts\">\nimport { TooltipTrigger, type TooltipTriggerProps } from 'radix-vue'\n\nconst props = defineProps<TooltipTriggerProps>()\n</script>\n\n<template>\n  <TooltipTrigger v-bind=\"props\">\n    <slot />\n  </TooltipTrigger>\n</template>\n"
+    },
+    {
+      "name": "index.ts",
+      "content": "export { default as Tooltip } from './Tooltip.vue'\nexport { default as TooltipContent } from './TooltipContent.vue'\nexport { default as TooltipTrigger } from './TooltipTrigger.vue'\nexport { default as TooltipProvider } from './TooltipProvider.vue'\n"
     }
   ],
   "type": "components:ui"
diff --git a/apps/www/src/public/registry/styles/index.json b/apps/www/src/public/registry/styles/index.json
index bbefdacf..e4116ca9 100644
--- a/apps/www/src/public/registry/styles/index.json
+++ b/apps/www/src/public/registry/styles/index.json
@@ -2,9 +2,5 @@
   {
     "name": "default",
     "label": "Default"
-  },
-  {
-    "name": "new-york",
-    "label": "New York"
   }
 ]
\ No newline at end of file
diff --git a/apps/www/src/public/registry/themes.css b/apps/www/src/public/registry/themes.css
index e6a22720..ce73cad2 100644
--- a/apps/www/src/public/registry/themes.css
+++ b/apps/www/src/public/registry/themes.css
@@ -157,7 +157,7 @@
  
     --ring: 20 14.3% 4.1%;
  
-    --radius: 0.95rem;
+    --radius: 0.5rem;
   }
  
   .dark .theme-stone {
@@ -221,7 +221,7 @@
  
     --ring: 224 71.4% 4.1%;
  
-    --radius: 0.35rem;
+    --radius: 0.5rem;
   }
  
   .dark .theme-gray {
@@ -285,7 +285,7 @@
  
     --ring: 0 0% 3.9%;
  
-    --radius: ;
+    --radius: 0.5rem;
   }
  
   .dark .theme-neutral {
@@ -349,7 +349,7 @@
  
     --ring: 0 72.2% 50.6%;
  
-    --radius: 0.4rem;
+    --radius: 0.5rem;
   }
  
   .dark .theme-red {
@@ -477,7 +477,7 @@
  
     --ring: 24.6 95% 53.1%;
  
-    --radius: 0.95rem;
+    --radius: 0.5rem;
   }
  
   .dark .theme-orange {
@@ -541,7 +541,7 @@
  
     --ring: 142.1 76.2% 36.3%;
  
-    --radius: ;
+    --radius: 0.5rem;
   }
  
   .dark .theme-green {
@@ -605,7 +605,7 @@
  
     --ring: 221.2 83.2% 53.3%;
  
-    --radius: ;
+    --radius: 0.5rem;
   }
  
   .dark .theme-blue {
@@ -669,7 +669,7 @@
  
     --ring: 20 14.3% 4.1%;
  
-    --radius: 0.95rem;
+    --radius: 0.5rem;
   }
  
   .dark .theme-yellow {
@@ -733,7 +733,7 @@
  
     --ring: 262.1 83.3% 57.8%;
  
-    --radius: ;
+    --radius: 0.5rem;
   }
  
   .dark .theme-violet {
diff --git a/apps/www/static/registry/colors/gray.json b/apps/www/static/registry/colors/gray.json
deleted file mode 100644
index 1f5c04f6..00000000
--- a/apps/www/static/registry/colors/gray.json
+++ /dev/null
@@ -1,92 +0,0 @@
-{
-  "inlineColors": {
-    "light": {
-      "background": "white",
-      "foreground": "gray-950",
-      "card": "white",
-      "card-foreground": "gray-950",
-      "popover": "white",
-      "popover-foreground": "gray-950",
-      "primary": "gray-900",
-      "primary-foreground": "gray-50",
-      "secondary": "gray-100",
-      "secondary-foreground": "gray-900",
-      "muted": "gray-100",
-      "muted-foreground": "gray-500",
-      "accent": "gray-100",
-      "accent-foreground": "gray-900",
-      "destructive": "red-500",
-      "destructive-foreground": "gray-50",
-      "border": "gray-200",
-      "input": "gray-200",
-      "ring": "gray-950"
-    },
-    "dark": {
-      "background": "gray-950",
-      "foreground": "gray-50",
-      "card": "gray-950",
-      "card-foreground": "gray-50",
-      "popover": "gray-950",
-      "popover-foreground": "gray-50",
-      "primary": "gray-50",
-      "primary-foreground": "gray-900",
-      "secondary": "gray-800",
-      "secondary-foreground": "gray-50",
-      "muted": "gray-800",
-      "muted-foreground": "gray-400",
-      "accent": "gray-800",
-      "accent-foreground": "gray-50",
-      "destructive": "red-900",
-      "destructive-foreground": "gray-50",
-      "border": "gray-800",
-      "input": "gray-800",
-      "ring": "gray-300"
-    }
-  },
-  "cssVars": {
-    "light": {
-      "background": "0 0% 100%",
-      "foreground": "224 71.4% 4.1%",
-      "card": "0 0% 100%",
-      "card-foreground": "224 71.4% 4.1%",
-      "popover": "0 0% 100%",
-      "popover-foreground": "224 71.4% 4.1%",
-      "primary": "220.9 39.3% 11%",
-      "primary-foreground": "210 20% 98%",
-      "secondary": "220 14.3% 95.9%",
-      "secondary-foreground": "220.9 39.3% 11%",
-      "muted": "220 14.3% 95.9%",
-      "muted-foreground": "220 8.9% 46.1%",
-      "accent": "220 14.3% 95.9%",
-      "accent-foreground": "220.9 39.3% 11%",
-      "destructive": "0 84.2% 60.2%",
-      "destructive-foreground": "210 20% 98%",
-      "border": "220 13% 91%",
-      "input": "220 13% 91%",
-      "ring": "224 71.4% 4.1%"
-    },
-    "dark": {
-      "background": "224 71.4% 4.1%",
-      "foreground": "210 20% 98%",
-      "card": "224 71.4% 4.1%",
-      "card-foreground": "210 20% 98%",
-      "popover": "224 71.4% 4.1%",
-      "popover-foreground": "210 20% 98%",
-      "primary": "210 20% 98%",
-      "primary-foreground": "220.9 39.3% 11%",
-      "secondary": "215 27.9% 16.9%",
-      "secondary-foreground": "210 20% 98%",
-      "muted": "215 27.9% 16.9%",
-      "muted-foreground": "217.9 10.6% 64.9%",
-      "accent": "215 27.9% 16.9%",
-      "accent-foreground": "210 20% 98%",
-      "destructive": "0 62.8% 30.6%",
-      "destructive-foreground": "210 20% 98%",
-      "border": "215 27.9% 16.9%",
-      "input": "215 27.9% 16.9%",
-      "ring": "216 12.2% 83.9%"
-    }
-  },
-  "inlineColorsTemplate": "@tailwind base;\n@tailwind components;\n@tailwind utilities;\n",
-  "cssVarsTemplate": "@tailwind base;\n@tailwind components;\n@tailwind utilities;\n \n@layer base {\n  :root {\n    --background: 0 0% 100%;\n    --foreground: 224 71.4% 4.1%;\n \n    --muted: 220 14.3% 95.9%;\n    --muted-foreground: 220 8.9% 46.1%;\n \n    --popover: 0 0% 100%;\n    --popover-foreground: 224 71.4% 4.1%;\n \n    --card: 0 0% 100%;\n    --card-foreground: 224 71.4% 4.1%;\n \n    --border: 220 13% 91%;\n    --input: 220 13% 91%;\n \n    --primary: 220.9 39.3% 11%;\n    --primary-foreground: 210 20% 98%;\n \n    --secondary: 220 14.3% 95.9%;\n    --secondary-foreground: 220.9 39.3% 11%;\n \n    --accent: 220 14.3% 95.9%;\n    --accent-foreground: 220.9 39.3% 11%;\n \n    --destructive: 0 84.2% 60.2%;\n    --destructive-foreground: 210 20% 98%;\n \n    --ring: 224 71.4% 4.1%;\n \n    --radius: 0.5rem;\n  }\n \n  .dark {\n    --background: 224 71.4% 4.1%;\n    --foreground: 210 20% 98%;\n \n    --muted: 215 27.9% 16.9%;\n    --muted-foreground: 217.9 10.6% 64.9%;\n \n    --popover: 224 71.4% 4.1%;\n    --popover-foreground: 210 20% 98%;\n \n    --card: 224 71.4% 4.1%;\n    --card-foreground: 210 20% 98%;\n \n    --border: 215 27.9% 16.9%;\n    --input: 215 27.9% 16.9%;\n \n    --primary: 210 20% 98%;\n    --primary-foreground: 220.9 39.3% 11%;\n \n    --secondary: 215 27.9% 16.9%;\n    --secondary-foreground: 210 20% 98%;\n \n    --accent: 215 27.9% 16.9%;\n    --accent-foreground: 210 20% 98%;\n \n    --destructive: 0 62.8% 30.6%;\n    --destructive-foreground: 210 20% 98%;\n \n    --ring: 216 12.2% 83.9%;\n  }\n}\n \n@layer base {\n  * {\n    @apply border-border;\n  }\n  body {\n    @apply bg-background text-foreground;\n  }\n}"
-}
diff --git a/apps/www/static/registry/colors/index.json b/apps/www/static/registry/colors/index.json
deleted file mode 100644
index 6b70773e..00000000
--- a/apps/www/static/registry/colors/index.json
+++ /dev/null
@@ -1,1999 +0,0 @@
-{
-  "inherit": "inherit",
-  "current": "currentColor",
-  "transparent": "transparent",
-  "black": {
-    "hex": "#000000",
-    "rgb": "rgb(0,0,0)",
-    "hsl": "hsl(0,0%,0%)",
-    "rgbChannel": "0 0 0",
-    "hslChannel": "0 0% 0%"
-  },
-  "white": {
-    "hex": "#ffffff",
-    "rgb": "rgb(255,255,255)",
-    "hsl": "hsl(0,0%,100%)",
-    "rgbChannel": "255 255 255",
-    "hslChannel": "0 0% 100%"
-  },
-  "slate": [
-    {
-      "scale": 50,
-      "hex": "#f8fafc",
-      "rgb": "rgb(248,250,252)",
-      "hsl": "hsl(210,40%,98%)",
-      "rgbChannel": "248 250 252",
-      "hslChannel": "210 40% 98%"
-    },
-    {
-      "scale": 100,
-      "hex": "#f1f5f9",
-      "rgb": "rgb(241,245,249)",
-      "hsl": "hsl(210,40%,96.1%)",
-      "rgbChannel": "241 245 249",
-      "hslChannel": "210 40% 96.1%"
-    },
-    {
-      "scale": 200,
-      "hex": "#e2e8f0",
-      "rgb": "rgb(226,232,240)",
-      "hsl": "hsl(214.3,31.8%,91.4%)",
-      "rgbChannel": "226 232 240",
-      "hslChannel": "214.3 31.8% 91.4%"
-    },
-    {
-      "scale": 300,
-      "hex": "#cbd5e1",
-      "rgb": "rgb(203,213,225)",
-      "hsl": "hsl(212.7,26.8%,83.9%)",
-      "rgbChannel": "203 213 225",
-      "hslChannel": "212.7 26.8% 83.9%"
-    },
-    {
-      "scale": 400,
-      "hex": "#94a3b8",
-      "rgb": "rgb(148,163,184)",
-      "hsl": "hsl(215,20.2%,65.1%)",
-      "rgbChannel": "148 163 184",
-      "hslChannel": "215 20.2% 65.1%"
-    },
-    {
-      "scale": 500,
-      "hex": "#64748b",
-      "rgb": "rgb(100,116,139)",
-      "hsl": "hsl(215.4,16.3%,46.9%)",
-      "rgbChannel": "100 116 139",
-      "hslChannel": "215.4 16.3% 46.9%"
-    },
-    {
-      "scale": 600,
-      "hex": "#475569",
-      "rgb": "rgb(71,85,105)",
-      "hsl": "hsl(215.3,19.3%,34.5%)",
-      "rgbChannel": "71 85 105",
-      "hslChannel": "215.3 19.3% 34.5%"
-    },
-    {
-      "scale": 700,
-      "hex": "#334155",
-      "rgb": "rgb(51,65,85)",
-      "hsl": "hsl(215.3,25%,26.7%)",
-      "rgbChannel": "51 65 85",
-      "hslChannel": "215.3 25% 26.7%"
-    },
-    {
-      "scale": 800,
-      "hex": "#1e293b",
-      "rgb": "rgb(30,41,59)",
-      "hsl": "hsl(217.2,32.6%,17.5%)",
-      "rgbChannel": "30 41 59",
-      "hslChannel": "217.2 32.6% 17.5%"
-    },
-    {
-      "scale": 900,
-      "hex": "#0f172a",
-      "rgb": "rgb(15,23,42)",
-      "hsl": "hsl(222.2,47.4%,11.2%)",
-      "rgbChannel": "15 23 42",
-      "hslChannel": "222.2 47.4% 11.2%"
-    },
-    {
-      "scale": 950,
-      "hex": "#020617",
-      "rgb": "rgb(2,6,23)",
-      "hsl": "hsl(222.2,84%,4.9%)",
-      "rgbChannel": "2 6 23",
-      "hslChannel": "222.2 84% 4.9%"
-    }
-  ],
-  "gray": [
-    {
-      "scale": 50,
-      "hex": "#f9fafb",
-      "rgb": "rgb(249,250,251)",
-      "hsl": "hsl(210,20%,98%)",
-      "rgbChannel": "249 250 251",
-      "hslChannel": "210 20% 98%"
-    },
-    {
-      "scale": 100,
-      "hex": "#f3f4f6",
-      "rgb": "rgb(243,244,246)",
-      "hsl": "hsl(220,14.3%,95.9%)",
-      "rgbChannel": "243 244 246",
-      "hslChannel": "220 14.3% 95.9%"
-    },
-    {
-      "scale": 200,
-      "hex": "#e5e7eb",
-      "rgb": "rgb(229,231,235)",
-      "hsl": "hsl(220,13%,91%)",
-      "rgbChannel": "229 231 235",
-      "hslChannel": "220 13% 91%"
-    },
-    {
-      "scale": 300,
-      "hex": "#d1d5db",
-      "rgb": "rgb(209,213,219)",
-      "hsl": "hsl(216,12.2%,83.9%)",
-      "rgbChannel": "209 213 219",
-      "hslChannel": "216 12.2% 83.9%"
-    },
-    {
-      "scale": 400,
-      "hex": "#9ca3af",
-      "rgb": "rgb(156,163,175)",
-      "hsl": "hsl(217.9,10.6%,64.9%)",
-      "rgbChannel": "156 163 175",
-      "hslChannel": "217.9 10.6% 64.9%"
-    },
-    {
-      "scale": 500,
-      "hex": "#6b7280",
-      "rgb": "rgb(107,114,128)",
-      "hsl": "hsl(220,8.9%,46.1%)",
-      "rgbChannel": "107 114 128",
-      "hslChannel": "220 8.9% 46.1%"
-    },
-    {
-      "scale": 600,
-      "hex": "#4b5563",
-      "rgb": "rgb(75,85,99)",
-      "hsl": "hsl(215,13.8%,34.1%)",
-      "rgbChannel": "75 85 99",
-      "hslChannel": "215 13.8% 34.1%"
-    },
-    {
-      "scale": 700,
-      "hex": "#374151",
-      "rgb": "rgb(55,65,81)",
-      "hsl": "hsl(216.9,19.1%,26.7%)",
-      "rgbChannel": "55 65 81",
-      "hslChannel": "216.9 19.1% 26.7%"
-    },
-    {
-      "scale": 800,
-      "hex": "#1f2937",
-      "rgb": "rgb(31,41,55)",
-      "hsl": "hsl(215,27.9%,16.9%)",
-      "rgbChannel": "31 41 55",
-      "hslChannel": "215 27.9% 16.9%"
-    },
-    {
-      "scale": 900,
-      "hex": "#111827",
-      "rgb": "rgb(17,24,39)",
-      "hsl": "hsl(220.9,39.3%,11%)",
-      "rgbChannel": "17 24 39",
-      "hslChannel": "220.9 39.3% 11%"
-    },
-    {
-      "scale": 950,
-      "hex": "#030712",
-      "rgb": "rgb(3,7,18)",
-      "hsl": "hsl(224,71.4%,4.1%)",
-      "rgbChannel": "3 7 18",
-      "hslChannel": "224 71.4% 4.1%"
-    }
-  ],
-  "zinc": [
-    {
-      "scale": 50,
-      "hex": "#fafafa",
-      "rgb": "rgb(250,250,250)",
-      "hsl": "hsl(0,0%,98%)",
-      "rgbChannel": "250 250 250",
-      "hslChannel": "0 0% 98%"
-    },
-    {
-      "scale": 100,
-      "hex": "#f4f4f5",
-      "rgb": "rgb(244,244,245)",
-      "hsl": "hsl(240,4.8%,95.9%)",
-      "rgbChannel": "244 244 245",
-      "hslChannel": "240 4.8% 95.9%"
-    },
-    {
-      "scale": 200,
-      "hex": "#e4e4e7",
-      "rgb": "rgb(228,228,231)",
-      "hsl": "hsl(240,5.9%,90%)",
-      "rgbChannel": "228 228 231",
-      "hslChannel": "240 5.9% 90%"
-    },
-    {
-      "scale": 300,
-      "hex": "#d4d4d8",
-      "rgb": "rgb(212,212,216)",
-      "hsl": "hsl(240,4.9%,83.9%)",
-      "rgbChannel": "212 212 216",
-      "hslChannel": "240 4.9% 83.9%"
-    },
-    {
-      "scale": 400,
-      "hex": "#a1a1aa",
-      "rgb": "rgb(161,161,170)",
-      "hsl": "hsl(240,5%,64.9%)",
-      "rgbChannel": "161 161 170",
-      "hslChannel": "240 5% 64.9%"
-    },
-    {
-      "scale": 500,
-      "hex": "#71717a",
-      "rgb": "rgb(113,113,122)",
-      "hsl": "hsl(240,3.8%,46.1%)",
-      "rgbChannel": "113 113 122",
-      "hslChannel": "240 3.8% 46.1%"
-    },
-    {
-      "scale": 600,
-      "hex": "#52525b",
-      "rgb": "rgb(82,82,91)",
-      "hsl": "hsl(240,5.2%,33.9%)",
-      "rgbChannel": "82 82 91",
-      "hslChannel": "240 5.2% 33.9%"
-    },
-    {
-      "scale": 700,
-      "hex": "#3f3f46",
-      "rgb": "rgb(63,63,70)",
-      "hsl": "hsl(240,5.3%,26.1%)",
-      "rgbChannel": "63 63 70",
-      "hslChannel": "240 5.3% 26.1%"
-    },
-    {
-      "scale": 800,
-      "hex": "#27272a",
-      "rgb": "rgb(39,39,42)",
-      "hsl": "hsl(240,3.7%,15.9%)",
-      "rgbChannel": "39 39 42",
-      "hslChannel": "240 3.7% 15.9%"
-    },
-    {
-      "scale": 900,
-      "hex": "#18181b",
-      "rgb": "rgb(24,24,27)",
-      "hsl": "hsl(240,5.9%,10%)",
-      "rgbChannel": "24 24 27",
-      "hslChannel": "240 5.9% 10%"
-    },
-    {
-      "scale": 950,
-      "hex": "#09090b",
-      "rgb": "rgb(9,9,11)",
-      "hsl": "hsl(240,10%,3.9%)",
-      "rgbChannel": "9 9 11",
-      "hslChannel": "240 10% 3.9%"
-    }
-  ],
-  "neutral": [
-    {
-      "scale": 50,
-      "hex": "#fafafa",
-      "rgb": "rgb(250,250,250)",
-      "hsl": "hsl(0,0%,98%)",
-      "rgbChannel": "250 250 250",
-      "hslChannel": "0 0% 98%"
-    },
-    {
-      "scale": 100,
-      "hex": "#f5f5f5",
-      "rgb": "rgb(245,245,245)",
-      "hsl": "hsl(0,0%,96.1%)",
-      "rgbChannel": "245 245 245",
-      "hslChannel": "0 0% 96.1%"
-    },
-    {
-      "scale": 200,
-      "hex": "#e5e5e5",
-      "rgb": "rgb(229,229,229)",
-      "hsl": "hsl(0,0%,89.8%)",
-      "rgbChannel": "229 229 229",
-      "hslChannel": "0 0% 89.8%"
-    },
-    {
-      "scale": 300,
-      "hex": "#d4d4d4",
-      "rgb": "rgb(212,212,212)",
-      "hsl": "hsl(0,0%,83.1%)",
-      "rgbChannel": "212 212 212",
-      "hslChannel": "0 0% 83.1%"
-    },
-    {
-      "scale": 400,
-      "hex": "#a3a3a3",
-      "rgb": "rgb(163,163,163)",
-      "hsl": "hsl(0,0%,63.9%)",
-      "rgbChannel": "163 163 163",
-      "hslChannel": "0 0% 63.9%"
-    },
-    {
-      "scale": 500,
-      "hex": "#737373",
-      "rgb": "rgb(115,115,115)",
-      "hsl": "hsl(0,0%,45.1%)",
-      "rgbChannel": "115 115 115",
-      "hslChannel": "0 0% 45.1%"
-    },
-    {
-      "scale": 600,
-      "hex": "#525252",
-      "rgb": "rgb(82,82,82)",
-      "hsl": "hsl(0,0%,32.2%)",
-      "rgbChannel": "82 82 82",
-      "hslChannel": "0 0% 32.2%"
-    },
-    {
-      "scale": 700,
-      "hex": "#404040",
-      "rgb": "rgb(64,64,64)",
-      "hsl": "hsl(0,0%,25.1%)",
-      "rgbChannel": "64 64 64",
-      "hslChannel": "0 0% 25.1%"
-    },
-    {
-      "scale": 800,
-      "hex": "#262626",
-      "rgb": "rgb(38,38,38)",
-      "hsl": "hsl(0,0%,14.9%)",
-      "rgbChannel": "38 38 38",
-      "hslChannel": "0 0% 14.9%"
-    },
-    {
-      "scale": 900,
-      "hex": "#171717",
-      "rgb": "rgb(23,23,23)",
-      "hsl": "hsl(0,0%,9%)",
-      "rgbChannel": "23 23 23",
-      "hslChannel": "0 0% 9%"
-    },
-    {
-      "scale": 950,
-      "hex": "#0a0a0a",
-      "rgb": "rgb(10,10,10)",
-      "hsl": "hsl(0,0%,3.9%)",
-      "rgbChannel": "10 10 10",
-      "hslChannel": "0 0% 3.9%"
-    }
-  ],
-  "stone": [
-    {
-      "scale": 50,
-      "hex": "#fafaf9",
-      "rgb": "rgb(250,250,249)",
-      "hsl": "hsl(60,9.1%,97.8%)",
-      "rgbChannel": "250 250 249",
-      "hslChannel": "60 9.1% 97.8%"
-    },
-    {
-      "scale": 100,
-      "hex": "#f5f5f4",
-      "rgb": "rgb(245,245,244)",
-      "hsl": "hsl(60,4.8%,95.9%)",
-      "rgbChannel": "245 245 244",
-      "hslChannel": "60 4.8% 95.9%"
-    },
-    {
-      "scale": 200,
-      "hex": "#e7e5e4",
-      "rgb": "rgb(231,229,228)",
-      "hsl": "hsl(20,5.9%,90%)",
-      "rgbChannel": "231 229 228",
-      "hslChannel": "20 5.9% 90%"
-    },
-    {
-      "scale": 300,
-      "hex": "#d6d3d1",
-      "rgb": "rgb(214,211,209)",
-      "hsl": "hsl(24,5.7%,82.9%)",
-      "rgbChannel": "214 211 209",
-      "hslChannel": "24 5.7% 82.9%"
-    },
-    {
-      "scale": 400,
-      "hex": "#a8a29e",
-      "rgb": "rgb(168,162,158)",
-      "hsl": "hsl(24,5.4%,63.9%)",
-      "rgbChannel": "168 162 158",
-      "hslChannel": "24 5.4% 63.9%"
-    },
-    {
-      "scale": 500,
-      "hex": "#78716c",
-      "rgb": "rgb(120,113,108)",
-      "hsl": "hsl(25,5.3%,44.7%)",
-      "rgbChannel": "120 113 108",
-      "hslChannel": "25 5.3% 44.7%"
-    },
-    {
-      "scale": 600,
-      "hex": "#57534e",
-      "rgb": "rgb(87,83,78)",
-      "hsl": "hsl(33.3,5.5%,32.4%)",
-      "rgbChannel": "87 83 78",
-      "hslChannel": "33.3 5.5% 32.4%"
-    },
-    {
-      "scale": 700,
-      "hex": "#44403c",
-      "rgb": "rgb(68,64,60)",
-      "hsl": "hsl(30,6.3%,25.1%)",
-      "rgbChannel": "68 64 60",
-      "hslChannel": "30 6.3% 25.1%"
-    },
-    {
-      "scale": 800,
-      "hex": "#292524",
-      "rgb": "rgb(41,37,36)",
-      "hsl": "hsl(12,6.5%,15.1%)",
-      "rgbChannel": "41 37 36",
-      "hslChannel": "12 6.5% 15.1%"
-    },
-    {
-      "scale": 900,
-      "hex": "#1c1917",
-      "rgb": "rgb(28,25,23)",
-      "hsl": "hsl(24,9.8%,10%)",
-      "rgbChannel": "28 25 23",
-      "hslChannel": "24 9.8% 10%"
-    },
-    {
-      "scale": 950,
-      "hex": "#0c0a09",
-      "rgb": "rgb(12,10,9)",
-      "hsl": "hsl(20,14.3%,4.1%)",
-      "rgbChannel": "12 10 9",
-      "hslChannel": "20 14.3% 4.1%"
-    }
-  ],
-  "red": [
-    {
-      "scale": 50,
-      "hex": "#fef2f2",
-      "rgb": "rgb(254,242,242)",
-      "hsl": "hsl(0,85.7%,97.3%)",
-      "rgbChannel": "254 242 242",
-      "hslChannel": "0 85.7% 97.3%"
-    },
-    {
-      "scale": 100,
-      "hex": "#fee2e2",
-      "rgb": "rgb(254,226,226)",
-      "hsl": "hsl(0,93.3%,94.1%)",
-      "rgbChannel": "254 226 226",
-      "hslChannel": "0 93.3% 94.1%"
-    },
-    {
-      "scale": 200,
-      "hex": "#fecaca",
-      "rgb": "rgb(254,202,202)",
-      "hsl": "hsl(0,96.3%,89.4%)",
-      "rgbChannel": "254 202 202",
-      "hslChannel": "0 96.3% 89.4%"
-    },
-    {
-      "scale": 300,
-      "hex": "#fca5a5",
-      "rgb": "rgb(252,165,165)",
-      "hsl": "hsl(0,93.5%,81.8%)",
-      "rgbChannel": "252 165 165",
-      "hslChannel": "0 93.5% 81.8%"
-    },
-    {
-      "scale": 400,
-      "hex": "#f87171",
-      "rgb": "rgb(248,113,113)",
-      "hsl": "hsl(0,90.6%,70.8%)",
-      "rgbChannel": "248 113 113",
-      "hslChannel": "0 90.6% 70.8%"
-    },
-    {
-      "scale": 500,
-      "hex": "#ef4444",
-      "rgb": "rgb(239,68,68)",
-      "hsl": "hsl(0,84.2%,60.2%)",
-      "rgbChannel": "239 68 68",
-      "hslChannel": "0 84.2% 60.2%"
-    },
-    {
-      "scale": 600,
-      "hex": "#dc2626",
-      "rgb": "rgb(220,38,38)",
-      "hsl": "hsl(0,72.2%,50.6%)",
-      "rgbChannel": "220 38 38",
-      "hslChannel": "0 72.2% 50.6%"
-    },
-    {
-      "scale": 700,
-      "hex": "#b91c1c",
-      "rgb": "rgb(185,28,28)",
-      "hsl": "hsl(0,73.7%,41.8%)",
-      "rgbChannel": "185 28 28",
-      "hslChannel": "0 73.7% 41.8%"
-    },
-    {
-      "scale": 800,
-      "hex": "#991b1b",
-      "rgb": "rgb(153,27,27)",
-      "hsl": "hsl(0,70%,35.3%)",
-      "rgbChannel": "153 27 27",
-      "hslChannel": "0 70% 35.3%"
-    },
-    {
-      "scale": 900,
-      "hex": "#7f1d1d",
-      "rgb": "rgb(127,29,29)",
-      "hsl": "hsl(0,62.8%,30.6%)",
-      "rgbChannel": "127 29 29",
-      "hslChannel": "0 62.8% 30.6%"
-    },
-    {
-      "scale": 950,
-      "hex": "#450a0a",
-      "rgb": "rgb(69,10,10)",
-      "hsl": "hsl(0,74.7%,15.5%)",
-      "rgbChannel": "69 10 10",
-      "hslChannel": "0 74.7% 15.5%"
-    }
-  ],
-  "orange": [
-    {
-      "scale": 50,
-      "hex": "#fff7ed",
-      "rgb": "rgb(255,247,237)",
-      "hsl": "hsl(33.3,100%,96.5%)",
-      "rgbChannel": "255 247 237",
-      "hslChannel": "33.3 100% 96.5%"
-    },
-    {
-      "scale": 100,
-      "hex": "#ffedd5",
-      "rgb": "rgb(255,237,213)",
-      "hsl": "hsl(34.3,100%,91.8%)",
-      "rgbChannel": "255 237 213",
-      "hslChannel": "34.3 100% 91.8%"
-    },
-    {
-      "scale": 200,
-      "hex": "#fed7aa",
-      "rgb": "rgb(254,215,170)",
-      "hsl": "hsl(32.1,97.7%,83.1%)",
-      "rgbChannel": "254 215 170",
-      "hslChannel": "32.1 97.7% 83.1%"
-    },
-    {
-      "scale": 300,
-      "hex": "#fdba74",
-      "rgb": "rgb(253,186,116)",
-      "hsl": "hsl(30.7,97.2%,72.4%)",
-      "rgbChannel": "253 186 116",
-      "hslChannel": "30.7 97.2% 72.4%"
-    },
-    {
-      "scale": 400,
-      "hex": "#fb923c",
-      "rgb": "rgb(251,146,60)",
-      "hsl": "hsl(27,96%,61%)",
-      "rgbChannel": "251 146 60",
-      "hslChannel": "27 96% 61%"
-    },
-    {
-      "scale": 500,
-      "hex": "#f97316",
-      "rgb": "rgb(249,115,22)",
-      "hsl": "hsl(24.6,95%,53.1%)",
-      "rgbChannel": "249 115 22",
-      "hslChannel": "24.6 95% 53.1%"
-    },
-    {
-      "scale": 600,
-      "hex": "#ea580c",
-      "rgb": "rgb(234,88,12)",
-      "hsl": "hsl(20.5,90.2%,48.2%)",
-      "rgbChannel": "234 88 12",
-      "hslChannel": "20.5 90.2% 48.2%"
-    },
-    {
-      "scale": 700,
-      "hex": "#c2410c",
-      "rgb": "rgb(194,65,12)",
-      "hsl": "hsl(17.5,88.3%,40.4%)",
-      "rgbChannel": "194 65 12",
-      "hslChannel": "17.5 88.3% 40.4%"
-    },
-    {
-      "scale": 800,
-      "hex": "#9a3412",
-      "rgb": "rgb(154,52,18)",
-      "hsl": "hsl(15,79.1%,33.7%)",
-      "rgbChannel": "154 52 18",
-      "hslChannel": "15 79.1% 33.7%"
-    },
-    {
-      "scale": 900,
-      "hex": "#7c2d12",
-      "rgb": "rgb(124,45,18)",
-      "hsl": "hsl(15.3,74.6%,27.8%)",
-      "rgbChannel": "124 45 18",
-      "hslChannel": "15.3 74.6% 27.8%"
-    },
-    {
-      "scale": 950,
-      "hex": "#431407",
-      "rgb": "rgb(67,20,7)",
-      "hsl": "hsl(13,81.1%,14.5%)",
-      "rgbChannel": "67 20 7",
-      "hslChannel": "13 81.1% 14.5%"
-    }
-  ],
-  "amber": [
-    {
-      "scale": 50,
-      "hex": "#fffbeb",
-      "rgb": "rgb(255,251,235)",
-      "hsl": "hsl(48,100%,96.1%)",
-      "rgbChannel": "255 251 235",
-      "hslChannel": "48 100% 96.1%"
-    },
-    {
-      "scale": 100,
-      "hex": "#fef3c7",
-      "rgb": "rgb(254,243,199)",
-      "hsl": "hsl(48,96.5%,88.8%)",
-      "rgbChannel": "254 243 199",
-      "hslChannel": "48 96.5% 88.8%"
-    },
-    {
-      "scale": 200,
-      "hex": "#fde68a",
-      "rgb": "rgb(253,230,138)",
-      "hsl": "hsl(48,96.6%,76.7%)",
-      "rgbChannel": "253 230 138",
-      "hslChannel": "48 96.6% 76.7%"
-    },
-    {
-      "scale": 300,
-      "hex": "#fcd34d",
-      "rgb": "rgb(252,211,77)",
-      "hsl": "hsl(45.9,96.7%,64.5%)",
-      "rgbChannel": "252 211 77",
-      "hslChannel": "45.9 96.7% 64.5%"
-    },
-    {
-      "scale": 400,
-      "hex": "#fbbf24",
-      "rgb": "rgb(251,191,36)",
-      "hsl": "hsl(43.3,96.4%,56.3%)",
-      "rgbChannel": "251 191 36",
-      "hslChannel": "43.3 96.4% 56.3%"
-    },
-    {
-      "scale": 500,
-      "hex": "#f59e0b",
-      "rgb": "rgb(245,158,11)",
-      "hsl": "hsl(37.7,92.1%,50.2%)",
-      "rgbChannel": "245 158 11",
-      "hslChannel": "37.7 92.1% 50.2%"
-    },
-    {
-      "scale": 600,
-      "hex": "#d97706",
-      "rgb": "rgb(217,119,6)",
-      "hsl": "hsl(32.1,94.6%,43.7%)",
-      "rgbChannel": "217 119 6",
-      "hslChannel": "32.1 94.6% 43.7%"
-    },
-    {
-      "scale": 700,
-      "hex": "#b45309",
-      "rgb": "rgb(180,83,9)",
-      "hsl": "hsl(26,90.5%,37.1%)",
-      "rgbChannel": "180 83 9",
-      "hslChannel": "26 90.5% 37.1%"
-    },
-    {
-      "scale": 800,
-      "hex": "#92400e",
-      "rgb": "rgb(146,64,14)",
-      "hsl": "hsl(22.7,82.5%,31.4%)",
-      "rgbChannel": "146 64 14",
-      "hslChannel": "22.7 82.5% 31.4%"
-    },
-    {
-      "scale": 900,
-      "hex": "#78350f",
-      "rgb": "rgb(120,53,15)",
-      "hsl": "hsl(21.7,77.8%,26.5%)",
-      "rgbChannel": "120 53 15",
-      "hslChannel": "21.7 77.8% 26.5%"
-    },
-    {
-      "scale": 950,
-      "hex": "#451a03",
-      "rgb": "rgb(69,26,3)",
-      "hsl": "hsl(20.9,91.7%,14.1%)",
-      "rgbChannel": "69 26 3",
-      "hslChannel": "20.9 91.7% 14.1%"
-    }
-  ],
-  "yellow": [
-    {
-      "scale": 50,
-      "hex": "#fefce8",
-      "rgb": "rgb(254,252,232)",
-      "hsl": "hsl(54.5,91.7%,95.3%)",
-      "rgbChannel": "254 252 232",
-      "hslChannel": "54.5 91.7% 95.3%"
-    },
-    {
-      "scale": 100,
-      "hex": "#fef9c3",
-      "rgb": "rgb(254,249,195)",
-      "hsl": "hsl(54.9,96.7%,88%)",
-      "rgbChannel": "254 249 195",
-      "hslChannel": "54.9 96.7% 88%"
-    },
-    {
-      "scale": 200,
-      "hex": "#fef08a",
-      "rgb": "rgb(254,240,138)",
-      "hsl": "hsl(52.8,98.3%,76.9%)",
-      "rgbChannel": "254 240 138",
-      "hslChannel": "52.8 98.3% 76.9%"
-    },
-    {
-      "scale": 300,
-      "hex": "#fde047",
-      "rgb": "rgb(253,224,71)",
-      "hsl": "hsl(50.4,97.8%,63.5%)",
-      "rgbChannel": "253 224 71",
-      "hslChannel": "50.4 97.8% 63.5%"
-    },
-    {
-      "scale": 400,
-      "hex": "#facc15",
-      "rgb": "rgb(250,204,21)",
-      "hsl": "hsl(47.9,95.8%,53.1%)",
-      "rgbChannel": "250 204 21",
-      "hslChannel": "47.9 95.8% 53.1%"
-    },
-    {
-      "scale": 500,
-      "hex": "#eab308",
-      "rgb": "rgb(234,179,8)",
-      "hsl": "hsl(45.4,93.4%,47.5%)",
-      "rgbChannel": "234 179 8",
-      "hslChannel": "45.4 93.4% 47.5%"
-    },
-    {
-      "scale": 600,
-      "hex": "#ca8a04",
-      "rgb": "rgb(202,138,4)",
-      "hsl": "hsl(40.6,96.1%,40.4%)",
-      "rgbChannel": "202 138 4",
-      "hslChannel": "40.6 96.1% 40.4%"
-    },
-    {
-      "scale": 700,
-      "hex": "#a16207",
-      "rgb": "rgb(161,98,7)",
-      "hsl": "hsl(35.5,91.7%,32.9%)",
-      "rgbChannel": "161 98 7",
-      "hslChannel": "35.5 91.7% 32.9%"
-    },
-    {
-      "scale": 800,
-      "hex": "#854d0e",
-      "rgb": "rgb(133,77,14)",
-      "hsl": "hsl(31.8,81%,28.8%)",
-      "rgbChannel": "133 77 14",
-      "hslChannel": "31.8 81% 28.8%"
-    },
-    {
-      "scale": 900,
-      "hex": "#713f12",
-      "rgb": "rgb(113,63,18)",
-      "hsl": "hsl(28.4,72.5%,25.7%)",
-      "rgbChannel": "113 63 18",
-      "hslChannel": "28.4 72.5% 25.7%"
-    },
-    {
-      "scale": 950,
-      "hex": "#422006",
-      "rgb": "rgb(66,32,6)",
-      "hsl": "hsl(26,83.3%,14.1%)",
-      "rgbChannel": "66 32 6",
-      "hslChannel": "26 83.3% 14.1%"
-    }
-  ],
-  "lime": [
-    {
-      "scale": 50,
-      "hex": "#f7fee7",
-      "rgb": "rgb(247,254,231)",
-      "hsl": "hsl(78.3,92%,95.1%)",
-      "rgbChannel": "247 254 231",
-      "hslChannel": "78.3 92% 95.1%"
-    },
-    {
-      "scale": 100,
-      "hex": "#ecfccb",
-      "rgb": "rgb(236,252,203)",
-      "hsl": "hsl(79.6,89.1%,89.2%)",
-      "rgbChannel": "236 252 203",
-      "hslChannel": "79.6 89.1% 89.2%"
-    },
-    {
-      "scale": 200,
-      "hex": "#d9f99d",
-      "rgb": "rgb(217,249,157)",
-      "hsl": "hsl(80.9,88.5%,79.6%)",
-      "rgbChannel": "217 249 157",
-      "hslChannel": "80.9 88.5% 79.6%"
-    },
-    {
-      "scale": 300,
-      "hex": "#bef264",
-      "rgb": "rgb(190,242,100)",
-      "hsl": "hsl(82,84.5%,67.1%)",
-      "rgbChannel": "190 242 100",
-      "hslChannel": "82 84.5% 67.1%"
-    },
-    {
-      "scale": 400,
-      "hex": "#a3e635",
-      "rgb": "rgb(163,230,53)",
-      "hsl": "hsl(82.7,78%,55.5%)",
-      "rgbChannel": "163 230 53",
-      "hslChannel": "82.7 78% 55.5%"
-    },
-    {
-      "scale": 500,
-      "hex": "#84cc16",
-      "rgb": "rgb(132,204,22)",
-      "hsl": "hsl(83.7,80.5%,44.3%)",
-      "rgbChannel": "132 204 22",
-      "hslChannel": "83.7 80.5% 44.3%"
-    },
-    {
-      "scale": 600,
-      "hex": "#65a30d",
-      "rgb": "rgb(101,163,13)",
-      "hsl": "hsl(84.8,85.2%,34.5%)",
-      "rgbChannel": "101 163 13",
-      "hslChannel": "84.8 85.2% 34.5%"
-    },
-    {
-      "scale": 700,
-      "hex": "#4d7c0f",
-      "rgb": "rgb(77,124,15)",
-      "hsl": "hsl(85.9,78.4%,27.3%)",
-      "rgbChannel": "77 124 15",
-      "hslChannel": "85.9 78.4% 27.3%"
-    },
-    {
-      "scale": 800,
-      "hex": "#3f6212",
-      "rgb": "rgb(63,98,18)",
-      "hsl": "hsl(86.3,69%,22.7%)",
-      "rgbChannel": "63 98 18",
-      "hslChannel": "86.3 69% 22.7%"
-    },
-    {
-      "scale": 900,
-      "hex": "#365314",
-      "rgb": "rgb(54,83,20)",
-      "hsl": "hsl(87.6,61.2%,20.2%)",
-      "rgbChannel": "54 83 20",
-      "hslChannel": "87.6 61.2% 20.2%"
-    },
-    {
-      "scale": 950,
-      "hex": "#1a2e05",
-      "rgb": "rgb(26,46,5)",
-      "hsl": "hsl(89.3,80.4%,10%)",
-      "rgbChannel": "26 46 5",
-      "hslChannel": "89.3 80.4% 10%"
-    }
-  ],
-  "green": [
-    {
-      "scale": 50,
-      "hex": "#f0fdf4",
-      "rgb": "rgb(240,253,244)",
-      "hsl": "hsl(138.5,76.5%,96.7%)",
-      "rgbChannel": "240 253 244",
-      "hslChannel": "138.5 76.5% 96.7%"
-    },
-    {
-      "scale": 100,
-      "hex": "#dcfce7",
-      "rgb": "rgb(220,252,231)",
-      "hsl": "hsl(140.6,84.2%,92.5%)",
-      "rgbChannel": "220 252 231",
-      "hslChannel": "140.6 84.2% 92.5%"
-    },
-    {
-      "scale": 200,
-      "hex": "#bbf7d0",
-      "rgb": "rgb(187,247,208)",
-      "hsl": "hsl(141,78.9%,85.1%)",
-      "rgbChannel": "187 247 208",
-      "hslChannel": "141 78.9% 85.1%"
-    },
-    {
-      "scale": 300,
-      "hex": "#86efac",
-      "rgb": "rgb(134,239,172)",
-      "hsl": "hsl(141.7,76.6%,73.1%)",
-      "rgbChannel": "134 239 172",
-      "hslChannel": "141.7 76.6% 73.1%"
-    },
-    {
-      "scale": 400,
-      "hex": "#4ade80",
-      "rgb": "rgb(74,222,128)",
-      "hsl": "hsl(141.9,69.2%,58%)",
-      "rgbChannel": "74 222 128",
-      "hslChannel": "141.9 69.2% 58%"
-    },
-    {
-      "scale": 500,
-      "hex": "#22c55e",
-      "rgb": "rgb(34,197,94)",
-      "hsl": "hsl(142.1,70.6%,45.3%)",
-      "rgbChannel": "34 197 94",
-      "hslChannel": "142.1 70.6% 45.3%"
-    },
-    {
-      "scale": 600,
-      "hex": "#16a34a",
-      "rgb": "rgb(22,163,74)",
-      "hsl": "hsl(142.1,76.2%,36.3%)",
-      "rgbChannel": "22 163 74",
-      "hslChannel": "142.1 76.2% 36.3%"
-    },
-    {
-      "scale": 700,
-      "hex": "#15803d",
-      "rgb": "rgb(21,128,61)",
-      "hsl": "hsl(142.4,71.8%,29.2%)",
-      "rgbChannel": "21 128 61",
-      "hslChannel": "142.4 71.8% 29.2%"
-    },
-    {
-      "scale": 800,
-      "hex": "#166534",
-      "rgb": "rgb(22,101,52)",
-      "hsl": "hsl(142.8,64.2%,24.1%)",
-      "rgbChannel": "22 101 52",
-      "hslChannel": "142.8 64.2% 24.1%"
-    },
-    {
-      "scale": 900,
-      "hex": "#14532d",
-      "rgb": "rgb(20,83,45)",
-      "hsl": "hsl(143.8,61.2%,20.2%)",
-      "rgbChannel": "20 83 45",
-      "hslChannel": "143.8 61.2% 20.2%"
-    },
-    {
-      "scale": 950,
-      "hex": "#052e16",
-      "rgb": "rgb(5,46,22)",
-      "hsl": "hsl(144.9,80.4%,10%)",
-      "rgbChannel": "5 46 22",
-      "hslChannel": "144.9 80.4% 10%"
-    }
-  ],
-  "emerald": [
-    {
-      "scale": 50,
-      "hex": "#ecfdf5",
-      "rgb": "rgb(236,253,245)",
-      "hsl": "hsl(151.8,81%,95.9%)",
-      "rgbChannel": "236 253 245",
-      "hslChannel": "151.8 81% 95.9%"
-    },
-    {
-      "scale": 100,
-      "hex": "#d1fae5",
-      "rgb": "rgb(209,250,229)",
-      "hsl": "hsl(149.3,80.4%,90%)",
-      "rgbChannel": "209 250 229",
-      "hslChannel": "149.3 80.4% 90%"
-    },
-    {
-      "scale": 200,
-      "hex": "#a7f3d0",
-      "rgb": "rgb(167,243,208)",
-      "hsl": "hsl(152.4,76%,80.4%)",
-      "rgbChannel": "167 243 208",
-      "hslChannel": "152.4 76% 80.4%"
-    },
-    {
-      "scale": 300,
-      "hex": "#6ee7b7",
-      "rgb": "rgb(110,231,183)",
-      "hsl": "hsl(156.2,71.6%,66.9%)",
-      "rgbChannel": "110 231 183",
-      "hslChannel": "156.2 71.6% 66.9%"
-    },
-    {
-      "scale": 400,
-      "hex": "#34d399",
-      "rgb": "rgb(52,211,153)",
-      "hsl": "hsl(158.1,64.4%,51.6%)",
-      "rgbChannel": "52 211 153",
-      "hslChannel": "158.1 64.4% 51.6%"
-    },
-    {
-      "scale": 500,
-      "hex": "#10b981",
-      "rgb": "rgb(16,185,129)",
-      "hsl": "hsl(160.1,84.1%,39.4%)",
-      "rgbChannel": "16 185 129",
-      "hslChannel": "160.1 84.1% 39.4%"
-    },
-    {
-      "scale": 600,
-      "hex": "#059669",
-      "rgb": "rgb(5,150,105)",
-      "hsl": "hsl(161.4,93.5%,30.4%)",
-      "rgbChannel": "5 150 105",
-      "hslChannel": "161.4 93.5% 30.4%"
-    },
-    {
-      "scale": 700,
-      "hex": "#047857",
-      "rgb": "rgb(4,120,87)",
-      "hsl": "hsl(162.9,93.5%,24.3%)",
-      "rgbChannel": "4 120 87",
-      "hslChannel": "162.9 93.5% 24.3%"
-    },
-    {
-      "scale": 800,
-      "hex": "#065f46",
-      "rgb": "rgb(6,95,70)",
-      "hsl": "hsl(163.1,88.1%,19.8%)",
-      "rgbChannel": "6 95 70",
-      "hslChannel": "163.1 88.1% 19.8%"
-    },
-    {
-      "scale": 900,
-      "hex": "#064e3b",
-      "rgb": "rgb(6,78,59)",
-      "hsl": "hsl(164.2,85.7%,16.5%)",
-      "rgbChannel": "6 78 59",
-      "hslChannel": "164.2 85.7% 16.5%"
-    },
-    {
-      "scale": 950,
-      "hex": "#022c22",
-      "rgb": "rgb(2,44,34)",
-      "hsl": "hsl(165.7,91.3%,9%)",
-      "rgbChannel": "2 44 34",
-      "hslChannel": "165.7 91.3% 9%"
-    }
-  ],
-  "teal": [
-    {
-      "scale": 50,
-      "hex": "#f0fdfa",
-      "rgb": "rgb(240,253,250)",
-      "hsl": "hsl(166.2,76.5%,96.7%)",
-      "rgbChannel": "240 253 250",
-      "hslChannel": "166.2 76.5% 96.7%"
-    },
-    {
-      "scale": 100,
-      "hex": "#ccfbf1",
-      "rgb": "rgb(204,251,241)",
-      "hsl": "hsl(167.2,85.5%,89.2%)",
-      "rgbChannel": "204 251 241",
-      "hslChannel": "167.2 85.5% 89.2%"
-    },
-    {
-      "scale": 200,
-      "hex": "#99f6e4",
-      "rgb": "rgb(153,246,228)",
-      "hsl": "hsl(168.4,83.8%,78.2%)",
-      "rgbChannel": "153 246 228",
-      "hslChannel": "168.4 83.8% 78.2%"
-    },
-    {
-      "scale": 300,
-      "hex": "#5eead4",
-      "rgb": "rgb(94,234,212)",
-      "hsl": "hsl(170.6,76.9%,64.3%)",
-      "rgbChannel": "94 234 212",
-      "hslChannel": "170.6 76.9% 64.3%"
-    },
-    {
-      "scale": 400,
-      "hex": "#2dd4bf",
-      "rgb": "rgb(45,212,191)",
-      "hsl": "hsl(172.5,66%,50.4%)",
-      "rgbChannel": "45 212 191",
-      "hslChannel": "172.5 66% 50.4%"
-    },
-    {
-      "scale": 500,
-      "hex": "#14b8a6",
-      "rgb": "rgb(20,184,166)",
-      "hsl": "hsl(173.4,80.4%,40%)",
-      "rgbChannel": "20 184 166",
-      "hslChannel": "173.4 80.4% 40%"
-    },
-    {
-      "scale": 600,
-      "hex": "#0d9488",
-      "rgb": "rgb(13,148,136)",
-      "hsl": "hsl(174.7,83.9%,31.6%)",
-      "rgbChannel": "13 148 136",
-      "hslChannel": "174.7 83.9% 31.6%"
-    },
-    {
-      "scale": 700,
-      "hex": "#0f766e",
-      "rgb": "rgb(15,118,110)",
-      "hsl": "hsl(175.3,77.4%,26.1%)",
-      "rgbChannel": "15 118 110",
-      "hslChannel": "175.3 77.4% 26.1%"
-    },
-    {
-      "scale": 800,
-      "hex": "#115e59",
-      "rgb": "rgb(17,94,89)",
-      "hsl": "hsl(176.1,69.4%,21.8%)",
-      "rgbChannel": "17 94 89",
-      "hslChannel": "176.1 69.4% 21.8%"
-    },
-    {
-      "scale": 900,
-      "hex": "#134e4a",
-      "rgb": "rgb(19,78,74)",
-      "hsl": "hsl(175.9,60.8%,19%)",
-      "rgbChannel": "19 78 74",
-      "hslChannel": "175.9 60.8% 19%"
-    },
-    {
-      "scale": 950,
-      "hex": "#042f2e",
-      "rgb": "rgb(4,47,46)",
-      "hsl": "hsl(178.6,84.3%,10%)",
-      "rgbChannel": "4 47 46",
-      "hslChannel": "178.6 84.3% 10%"
-    }
-  ],
-  "cyan": [
-    {
-      "scale": 50,
-      "hex": "#ecfeff",
-      "rgb": "rgb(236,254,255)",
-      "hsl": "hsl(183.2,100%,96.3%)",
-      "rgbChannel": "236 254 255",
-      "hslChannel": "183.2 100% 96.3%"
-    },
-    {
-      "scale": 100,
-      "hex": "#cffafe",
-      "rgb": "rgb(207,250,254)",
-      "hsl": "hsl(185.1,95.9%,90.4%)",
-      "rgbChannel": "207 250 254",
-      "hslChannel": "185.1 95.9% 90.4%"
-    },
-    {
-      "scale": 200,
-      "hex": "#a5f3fc",
-      "rgb": "rgb(165,243,252)",
-      "hsl": "hsl(186.2,93.5%,81.8%)",
-      "rgbChannel": "165 243 252",
-      "hslChannel": "186.2 93.5% 81.8%"
-    },
-    {
-      "scale": 300,
-      "hex": "#67e8f9",
-      "rgb": "rgb(103,232,249)",
-      "hsl": "hsl(187,92.4%,69%)",
-      "rgbChannel": "103 232 249",
-      "hslChannel": "187 92.4% 69%"
-    },
-    {
-      "scale": 400,
-      "hex": "#22d3ee",
-      "rgb": "rgb(34,211,238)",
-      "hsl": "hsl(187.9,85.7%,53.3%)",
-      "rgbChannel": "34 211 238",
-      "hslChannel": "187.9 85.7% 53.3%"
-    },
-    {
-      "scale": 500,
-      "hex": "#06b6d4",
-      "rgb": "rgb(6,182,212)",
-      "hsl": "hsl(188.7,94.5%,42.7%)",
-      "rgbChannel": "6 182 212",
-      "hslChannel": "188.7 94.5% 42.7%"
-    },
-    {
-      "scale": 600,
-      "hex": "#0891b2",
-      "rgb": "rgb(8,145,178)",
-      "hsl": "hsl(191.6,91.4%,36.5%)",
-      "rgbChannel": "8 145 178",
-      "hslChannel": "191.6 91.4% 36.5%"
-    },
-    {
-      "scale": 700,
-      "hex": "#0e7490",
-      "rgb": "rgb(14,116,144)",
-      "hsl": "hsl(192.9,82.3%,31%)",
-      "rgbChannel": "14 116 144",
-      "hslChannel": "192.9 82.3% 31%"
-    },
-    {
-      "scale": 800,
-      "hex": "#155e75",
-      "rgb": "rgb(21,94,117)",
-      "hsl": "hsl(194.4,69.6%,27.1%)",
-      "rgbChannel": "21 94 117",
-      "hslChannel": "194.4 69.6% 27.1%"
-    },
-    {
-      "scale": 900,
-      "hex": "#164e63",
-      "rgb": "rgb(22,78,99)",
-      "hsl": "hsl(196.4,63.6%,23.7%)",
-      "rgbChannel": "22 78 99",
-      "hslChannel": "196.4 63.6% 23.7%"
-    },
-    {
-      "scale": 950,
-      "hex": "#083344",
-      "rgb": "rgb(8,51,68)",
-      "hsl": "hsl(197,78.9%,14.9%)",
-      "rgbChannel": "8 51 68",
-      "hslChannel": "197 78.9% 14.9%"
-    }
-  ],
-  "sky": [
-    {
-      "scale": 50,
-      "hex": "#f0f9ff",
-      "rgb": "rgb(240,249,255)",
-      "hsl": "hsl(204,100%,97.1%)",
-      "rgbChannel": "240 249 255",
-      "hslChannel": "204 100% 97.1%"
-    },
-    {
-      "scale": 100,
-      "hex": "#e0f2fe",
-      "rgb": "rgb(224,242,254)",
-      "hsl": "hsl(204,93.8%,93.7%)",
-      "rgbChannel": "224 242 254",
-      "hslChannel": "204 93.8% 93.7%"
-    },
-    {
-      "scale": 200,
-      "hex": "#bae6fd",
-      "rgb": "rgb(186,230,253)",
-      "hsl": "hsl(200.6,94.4%,86.1%)",
-      "rgbChannel": "186 230 253",
-      "hslChannel": "200.6 94.4% 86.1%"
-    },
-    {
-      "scale": 300,
-      "hex": "#7dd3fc",
-      "rgb": "rgb(125,211,252)",
-      "hsl": "hsl(199.4,95.5%,73.9%)",
-      "rgbChannel": "125 211 252",
-      "hslChannel": "199.4 95.5% 73.9%"
-    },
-    {
-      "scale": 400,
-      "hex": "#38bdf8",
-      "rgb": "rgb(56,189,248)",
-      "hsl": "hsl(198.4,93.2%,59.6%)",
-      "rgbChannel": "56 189 248",
-      "hslChannel": "198.4 93.2% 59.6%"
-    },
-    {
-      "scale": 500,
-      "hex": "#0ea5e9",
-      "rgb": "rgb(14,165,233)",
-      "hsl": "hsl(198.6,88.7%,48.4%)",
-      "rgbChannel": "14 165 233",
-      "hslChannel": "198.6 88.7% 48.4%"
-    },
-    {
-      "scale": 600,
-      "hex": "#0284c7",
-      "rgb": "rgb(2,132,199)",
-      "hsl": "hsl(200.4,98%,39.4%)",
-      "rgbChannel": "2 132 199",
-      "hslChannel": "200.4 98% 39.4%"
-    },
-    {
-      "scale": 700,
-      "hex": "#0369a1",
-      "rgb": "rgb(3,105,161)",
-      "hsl": "hsl(201.3,96.3%,32.2%)",
-      "rgbChannel": "3 105 161",
-      "hslChannel": "201.3 96.3% 32.2%"
-    },
-    {
-      "scale": 800,
-      "hex": "#075985",
-      "rgb": "rgb(7,89,133)",
-      "hsl": "hsl(201,90%,27.5%)",
-      "rgbChannel": "7 89 133",
-      "hslChannel": "201 90% 27.5%"
-    },
-    {
-      "scale": 900,
-      "hex": "#0c4a6e",
-      "rgb": "rgb(12,74,110)",
-      "hsl": "hsl(202,80.3%,23.9%)",
-      "rgbChannel": "12 74 110",
-      "hslChannel": "202 80.3% 23.9%"
-    },
-    {
-      "scale": 950,
-      "hex": "#082f49",
-      "rgb": "rgb(8,47,73)",
-      "hsl": "hsl(204,80.2%,15.9%)",
-      "rgbChannel": "8 47 73",
-      "hslChannel": "204 80.2% 15.9%"
-    }
-  ],
-  "blue": [
-    {
-      "scale": 50,
-      "hex": "#eff6ff",
-      "rgb": "rgb(239,246,255)",
-      "hsl": "hsl(213.8,100%,96.9%)",
-      "rgbChannel": "239 246 255",
-      "hslChannel": "213.8 100% 96.9%"
-    },
-    {
-      "scale": 100,
-      "hex": "#dbeafe",
-      "rgb": "rgb(219,234,254)",
-      "hsl": "hsl(214.3,94.6%,92.7%)",
-      "rgbChannel": "219 234 254",
-      "hslChannel": "214.3 94.6% 92.7%"
-    },
-    {
-      "scale": 200,
-      "hex": "#bfdbfe",
-      "rgb": "rgb(191,219,254)",
-      "hsl": "hsl(213.3,96.9%,87.3%)",
-      "rgbChannel": "191 219 254",
-      "hslChannel": "213.3 96.9% 87.3%"
-    },
-    {
-      "scale": 300,
-      "hex": "#93c5fd",
-      "rgb": "rgb(147,197,253)",
-      "hsl": "hsl(211.7,96.4%,78.4%)",
-      "rgbChannel": "147 197 253",
-      "hslChannel": "211.7 96.4% 78.4%"
-    },
-    {
-      "scale": 400,
-      "hex": "#60a5fa",
-      "rgb": "rgb(96,165,250)",
-      "hsl": "hsl(213.1,93.9%,67.8%)",
-      "rgbChannel": "96 165 250",
-      "hslChannel": "213.1 93.9% 67.8%"
-    },
-    {
-      "scale": 500,
-      "hex": "#3b82f6",
-      "rgb": "rgb(59,130,246)",
-      "hsl": "hsl(217.2,91.2%,59.8%)",
-      "rgbChannel": "59 130 246",
-      "hslChannel": "217.2 91.2% 59.8%"
-    },
-    {
-      "scale": 600,
-      "hex": "#2563eb",
-      "rgb": "rgb(37,99,235)",
-      "hsl": "hsl(221.2,83.2%,53.3%)",
-      "rgbChannel": "37 99 235",
-      "hslChannel": "221.2 83.2% 53.3%"
-    },
-    {
-      "scale": 700,
-      "hex": "#1d4ed8",
-      "rgb": "rgb(29,78,216)",
-      "hsl": "hsl(224.3,76.3%,48%)",
-      "rgbChannel": "29 78 216",
-      "hslChannel": "224.3 76.3% 48%"
-    },
-    {
-      "scale": 800,
-      "hex": "#1e40af",
-      "rgb": "rgb(30,64,175)",
-      "hsl": "hsl(225.9,70.7%,40.2%)",
-      "rgbChannel": "30 64 175",
-      "hslChannel": "225.9 70.7% 40.2%"
-    },
-    {
-      "scale": 900,
-      "hex": "#1e3a8a",
-      "rgb": "rgb(30,58,138)",
-      "hsl": "hsl(224.4,64.3%,32.9%)",
-      "rgbChannel": "30 58 138",
-      "hslChannel": "224.4 64.3% 32.9%"
-    },
-    {
-      "scale": 950,
-      "hex": "#172554",
-      "rgb": "rgb(23,37,84)",
-      "hsl": "hsl(226.2,57%,21%)",
-      "rgbChannel": "23 37 84",
-      "hslChannel": "226.2 57% 21%"
-    }
-  ],
-  "indigo": [
-    {
-      "scale": 50,
-      "hex": "#eef2ff",
-      "rgb": "rgb(238,242,255)",
-      "hsl": "hsl(225.9,100%,96.7%)",
-      "rgbChannel": "238 242 255",
-      "hslChannel": "225.9 100% 96.7%"
-    },
-    {
-      "scale": 100,
-      "hex": "#e0e7ff",
-      "rgb": "rgb(224,231,255)",
-      "hsl": "hsl(226.5,100%,93.9%)",
-      "rgbChannel": "224 231 255",
-      "hslChannel": "226.5 100% 93.9%"
-    },
-    {
-      "scale": 200,
-      "hex": "#c7d2fe",
-      "rgb": "rgb(199,210,254)",
-      "hsl": "hsl(228,96.5%,88.8%)",
-      "rgbChannel": "199 210 254",
-      "hslChannel": "228 96.5% 88.8%"
-    },
-    {
-      "scale": 300,
-      "hex": "#a5b4fc",
-      "rgb": "rgb(165,180,252)",
-      "hsl": "hsl(229.7,93.5%,81.8%)",
-      "rgbChannel": "165 180 252",
-      "hslChannel": "229.7 93.5% 81.8%"
-    },
-    {
-      "scale": 400,
-      "hex": "#818cf8",
-      "rgb": "rgb(129,140,248)",
-      "hsl": "hsl(234.5,89.5%,73.9%)",
-      "rgbChannel": "129 140 248",
-      "hslChannel": "234.5 89.5% 73.9%"
-    },
-    {
-      "scale": 500,
-      "hex": "#6366f1",
-      "rgb": "rgb(99,102,241)",
-      "hsl": "hsl(238.7,83.5%,66.7%)",
-      "rgbChannel": "99 102 241",
-      "hslChannel": "238.7 83.5% 66.7%"
-    },
-    {
-      "scale": 600,
-      "hex": "#4f46e5",
-      "rgb": "rgb(79,70,229)",
-      "hsl": "hsl(243.4,75.4%,58.6%)",
-      "rgbChannel": "79 70 229",
-      "hslChannel": "243.4 75.4% 58.6%"
-    },
-    {
-      "scale": 700,
-      "hex": "#4338ca",
-      "rgb": "rgb(67,56,202)",
-      "hsl": "hsl(244.5,57.9%,50.6%)",
-      "rgbChannel": "67 56 202",
-      "hslChannel": "244.5 57.9% 50.6%"
-    },
-    {
-      "scale": 800,
-      "hex": "#3730a3",
-      "rgb": "rgb(55,48,163)",
-      "hsl": "hsl(243.7,54.5%,41.4%)",
-      "rgbChannel": "55 48 163",
-      "hslChannel": "243.7 54.5% 41.4%"
-    },
-    {
-      "scale": 900,
-      "hex": "#312e81",
-      "rgb": "rgb(49,46,129)",
-      "hsl": "hsl(242.2,47.4%,34.3%)",
-      "rgbChannel": "49 46 129",
-      "hslChannel": "242.2 47.4% 34.3%"
-    },
-    {
-      "scale": 950,
-      "hex": "#1e1b4b",
-      "rgb": "rgb(30,27,75)",
-      "hsl": "hsl(243.8,47.1%,20%)",
-      "rgbChannel": "30 27 75",
-      "hslChannel": "243.8 47.1% 20%"
-    }
-  ],
-  "violet": [
-    {
-      "scale": 50,
-      "hex": "#f5f3ff",
-      "rgb": "rgb(245,243,255)",
-      "hsl": "hsl(250,100%,97.6%)",
-      "rgbChannel": "245 243 255",
-      "hslChannel": "250 100% 97.6%"
-    },
-    {
-      "scale": 100,
-      "hex": "#ede9fe",
-      "rgb": "rgb(237,233,254)",
-      "hsl": "hsl(251.4,91.3%,95.5%)",
-      "rgbChannel": "237 233 254",
-      "hslChannel": "251.4 91.3% 95.5%"
-    },
-    {
-      "scale": 200,
-      "hex": "#ddd6fe",
-      "rgb": "rgb(221,214,254)",
-      "hsl": "hsl(250.5,95.2%,91.8%)",
-      "rgbChannel": "221 214 254",
-      "hslChannel": "250.5 95.2% 91.8%"
-    },
-    {
-      "scale": 300,
-      "hex": "#c4b5fd",
-      "rgb": "rgb(196,181,253)",
-      "hsl": "hsl(252.5,94.7%,85.1%)",
-      "rgbChannel": "196 181 253",
-      "hslChannel": "252.5 94.7% 85.1%"
-    },
-    {
-      "scale": 400,
-      "hex": "#a78bfa",
-      "rgb": "rgb(167,139,250)",
-      "hsl": "hsl(255.1,91.7%,76.3%)",
-      "rgbChannel": "167 139 250",
-      "hslChannel": "255.1 91.7% 76.3%"
-    },
-    {
-      "scale": 500,
-      "hex": "#8b5cf6",
-      "rgb": "rgb(139,92,246)",
-      "hsl": "hsl(258.3,89.5%,66.3%)",
-      "rgbChannel": "139 92 246",
-      "hslChannel": "258.3 89.5% 66.3%"
-    },
-    {
-      "scale": 600,
-      "hex": "#7c3aed",
-      "rgb": "rgb(124,58,237)",
-      "hsl": "hsl(262.1,83.3%,57.8%)",
-      "rgbChannel": "124 58 237",
-      "hslChannel": "262.1 83.3% 57.8%"
-    },
-    {
-      "scale": 700,
-      "hex": "#6d28d9",
-      "rgb": "rgb(109,40,217)",
-      "hsl": "hsl(263.4,70%,50.4%)",
-      "rgbChannel": "109 40 217",
-      "hslChannel": "263.4 70% 50.4%"
-    },
-    {
-      "scale": 800,
-      "hex": "#5b21b6",
-      "rgb": "rgb(91,33,182)",
-      "hsl": "hsl(263.4,69.3%,42.2%)",
-      "rgbChannel": "91 33 182",
-      "hslChannel": "263.4 69.3% 42.2%"
-    },
-    {
-      "scale": 900,
-      "hex": "#4c1d95",
-      "rgb": "rgb(76,29,149)",
-      "hsl": "hsl(263.5,67.4%,34.9%)",
-      "rgbChannel": "76 29 149",
-      "hslChannel": "263.5 67.4% 34.9%"
-    },
-    {
-      "scale": 950,
-      "hex": "#1e1b4b",
-      "rgb": "rgb(46,16,101)",
-      "hsl": "hsl(261.2,72.6%,22.9%)",
-      "rgbChannel": "46 16 101",
-      "hslChannel": "261.2 72.6% 22.9%"
-    }
-  ],
-  "purple": [
-    {
-      "scale": 50,
-      "hex": "#faf5ff",
-      "rgb": "rgb(250,245,255)",
-      "hsl": "hsl(270,100%,98%)",
-      "rgbChannel": "250 245 255",
-      "hslChannel": "270 100% 98%"
-    },
-    {
-      "scale": 100,
-      "hex": "#f3e8ff",
-      "rgb": "rgb(243,232,255)",
-      "hsl": "hsl(268.7,100%,95.5%)",
-      "rgbChannel": "243 232 255",
-      "hslChannel": "268.7 100% 95.5%"
-    },
-    {
-      "scale": 200,
-      "hex": "#e9d5ff",
-      "rgb": "rgb(233,213,255)",
-      "hsl": "hsl(268.6,100%,91.8%)",
-      "rgbChannel": "233 213 255",
-      "hslChannel": "268.6 100% 91.8%"
-    },
-    {
-      "scale": 300,
-      "hex": "#d8b4fe",
-      "rgb": "rgb(216,180,254)",
-      "hsl": "hsl(269.2,97.4%,85.1%)",
-      "rgbChannel": "216 180 254",
-      "hslChannel": "269.2 97.4% 85.1%"
-    },
-    {
-      "scale": 400,
-      "hex": "#c084fc",
-      "rgb": "rgb(192,132,252)",
-      "hsl": "hsl(270,95.2%,75.3%)",
-      "rgbChannel": "192 132 252",
-      "hslChannel": "270 95.2% 75.3%"
-    },
-    {
-      "scale": 500,
-      "hex": "#a855f7",
-      "rgb": "rgb(168,85,247)",
-      "hsl": "hsl(270.7,91%,65.1%)",
-      "rgbChannel": "168 85 247",
-      "hslChannel": "270.7 91% 65.1%"
-    },
-    {
-      "scale": 600,
-      "hex": "#9333ea",
-      "rgb": "rgb(147,51,234)",
-      "hsl": "hsl(271.5,81.3%,55.9%)",
-      "rgbChannel": "147 51 234",
-      "hslChannel": "271.5 81.3% 55.9%"
-    },
-    {
-      "scale": 700,
-      "hex": "#7e22ce",
-      "rgb": "rgb(126,34,206)",
-      "hsl": "hsl(272.1,71.7%,47.1%)",
-      "rgbChannel": "126 34 206",
-      "hslChannel": "272.1 71.7% 47.1%"
-    },
-    {
-      "scale": 800,
-      "hex": "#6b21a8",
-      "rgb": "rgb(107,33,168)",
-      "hsl": "hsl(272.9,67.2%,39.4%)",
-      "rgbChannel": "107 33 168",
-      "hslChannel": "272.9 67.2% 39.4%"
-    },
-    {
-      "scale": 900,
-      "hex": "#581c87",
-      "rgb": "rgb(88,28,135)",
-      "hsl": "hsl(273.6,65.6%,32%)",
-      "rgbChannel": "88 28 135",
-      "hslChannel": "273.6 65.6% 32%"
-    },
-    {
-      "scale": 950,
-      "hex": "#3b0764",
-      "rgb": "rgb(59,7,100)",
-      "hsl": "hsl(273.5,86.9%,21%)",
-      "rgbChannel": "59 7 100",
-      "hslChannel": "273.5 86.9% 21%"
-    }
-  ],
-  "fuchsia": [
-    {
-      "scale": 50,
-      "hex": "#fdf4ff",
-      "rgb": "rgb(253,244,255)",
-      "hsl": "hsl(289.1,100%,97.8%)",
-      "rgbChannel": "253 244 255",
-      "hslChannel": "289.1 100% 97.8%"
-    },
-    {
-      "scale": 100,
-      "hex": "#fae8ff",
-      "rgb": "rgb(250,232,255)",
-      "hsl": "hsl(287,100%,95.5%)",
-      "rgbChannel": "250 232 255",
-      "hslChannel": "287 100% 95.5%"
-    },
-    {
-      "scale": 200,
-      "hex": "#f5d0fe",
-      "rgb": "rgb(245,208,254)",
-      "hsl": "hsl(288.3,95.8%,90.6%)",
-      "rgbChannel": "245 208 254",
-      "hslChannel": "288.3 95.8% 90.6%"
-    },
-    {
-      "scale": 300,
-      "hex": "#f0abfc",
-      "rgb": "rgb(240,171,252)",
-      "hsl": "hsl(291.1,93.1%,82.9%)",
-      "rgbChannel": "240 171 252",
-      "hslChannel": "291.1 93.1% 82.9%"
-    },
-    {
-      "scale": 400,
-      "hex": "#e879f9",
-      "rgb": "rgb(232,121,249)",
-      "hsl": "hsl(292,91.4%,72.5%)",
-      "rgbChannel": "232 121 249",
-      "hslChannel": "292 91.4% 72.5%"
-    },
-    {
-      "scale": 500,
-      "hex": "#d946ef",
-      "rgb": "rgb(217,70,239)",
-      "hsl": "hsl(292.2,84.1%,60.6%)",
-      "rgbChannel": "217 70 239",
-      "hslChannel": "292.2 84.1% 60.6%"
-    },
-    {
-      "scale": 600,
-      "hex": "#c026d3",
-      "rgb": "rgb(192,38,211)",
-      "hsl": "hsl(293.4,69.5%,48.8%)",
-      "rgbChannel": "192 38 211",
-      "hslChannel": "293.4 69.5% 48.8%"
-    },
-    {
-      "scale": 700,
-      "hex": "#a21caf",
-      "rgb": "rgb(162,28,175)",
-      "hsl": "hsl(294.7,72.4%,39.8%)",
-      "rgbChannel": "162 28 175",
-      "hslChannel": "294.7 72.4% 39.8%"
-    },
-    {
-      "scale": 800,
-      "hex": "#86198f",
-      "rgb": "rgb(134,25,143)",
-      "hsl": "hsl(295.4,70.2%,32.9%)",
-      "rgbChannel": "134 25 143",
-      "hslChannel": "295.4 70.2% 32.9%"
-    },
-    {
-      "scale": 900,
-      "hex": "#701a75",
-      "rgb": "rgb(112,26,117)",
-      "hsl": "hsl(296.7,63.6%,28%)",
-      "rgbChannel": "112 26 117",
-      "hslChannel": "296.7 63.6% 28%"
-    },
-    {
-      "scale": 950,
-      "hex": "#4a044e",
-      "rgb": "rgb(74,4,78)",
-      "hsl": "hsl(296.8,90.2%,16.1%)",
-      "rgbChannel": "74 4 78",
-      "hslChannel": "296.8 90.2% 16.1%"
-    }
-  ],
-  "pink": [
-    {
-      "scale": 50,
-      "hex": "#fdf2f8",
-      "rgb": "rgb(253,242,248)",
-      "hsl": "hsl(327.3,73.3%,97.1%)",
-      "rgbChannel": "253 242 248",
-      "hslChannel": "327.3 73.3% 97.1%"
-    },
-    {
-      "scale": 100,
-      "hex": "#fce7f3",
-      "rgb": "rgb(252,231,243)",
-      "hsl": "hsl(325.7,77.8%,94.7%)",
-      "rgbChannel": "252 231 243",
-      "hslChannel": "325.7 77.8% 94.7%"
-    },
-    {
-      "scale": 200,
-      "hex": "#fbcfe8",
-      "rgb": "rgb(251,207,232)",
-      "hsl": "hsl(325.9,84.6%,89.8%)",
-      "rgbChannel": "251 207 232",
-      "hslChannel": "325.9 84.6% 89.8%"
-    },
-    {
-      "scale": 300,
-      "hex": "#f9a8d4",
-      "rgb": "rgb(249,168,212)",
-      "hsl": "hsl(327.4,87.1%,81.8%)",
-      "rgbChannel": "249 168 212",
-      "hslChannel": "327.4 87.1% 81.8%"
-    },
-    {
-      "scale": 400,
-      "hex": "#f472b6",
-      "rgb": "rgb(244,114,182)",
-      "hsl": "hsl(328.6,85.5%,70.2%)",
-      "rgbChannel": "244 114 182",
-      "hslChannel": "328.6 85.5% 70.2%"
-    },
-    {
-      "scale": 500,
-      "hex": "#ec4899",
-      "rgb": "rgb(236,72,153)",
-      "hsl": "hsl(330.4,81.2%,60.4%)",
-      "rgbChannel": "236 72 153",
-      "hslChannel": "330.4 81.2% 60.4%"
-    },
-    {
-      "scale": 600,
-      "hex": "#db2777",
-      "rgb": "rgb(219,39,119)",
-      "hsl": "hsl(333.3,71.4%,50.6%)",
-      "rgbChannel": "219 39 119",
-      "hslChannel": "333.3 71.4% 50.6%"
-    },
-    {
-      "scale": 700,
-      "hex": "#be185d",
-      "rgb": "rgb(190,24,93)",
-      "hsl": "hsl(335.1,77.6%,42%)",
-      "rgbChannel": "190 24 93",
-      "hslChannel": "335.1 77.6% 42%"
-    },
-    {
-      "scale": 800,
-      "hex": "#9d174d",
-      "rgb": "rgb(157,23,77)",
-      "hsl": "hsl(335.8,74.4%,35.3%)",
-      "rgbChannel": "157 23 77",
-      "hslChannel": "335.8 74.4% 35.3%"
-    },
-    {
-      "scale": 900,
-      "hex": "#831843",
-      "rgb": "rgb(131,24,67)",
-      "hsl": "hsl(335.9,69%,30.4%)",
-      "rgbChannel": "131 24 67",
-      "hslChannel": "335.9 69% 30.4%"
-    },
-    {
-      "scale": 950,
-      "hex": "#500724",
-      "rgb": "rgb(80,7,36)",
-      "hsl": "hsl(336.2,83.9%,17.1%)",
-      "rgbChannel": "80 7 36",
-      "hslChannel": "336.2 83.9% 17.1%"
-    }
-  ],
-  "rose": [
-    {
-      "scale": 50,
-      "hex": "#fff1f2",
-      "rgb": "rgb(255,241,242)",
-      "hsl": "hsl(355.7,100%,97.3%)",
-      "rgbChannel": "255 241 242",
-      "hslChannel": "355.7 100% 97.3%"
-    },
-    {
-      "scale": 100,
-      "hex": "#ffe4e6",
-      "rgb": "rgb(255,228,230)",
-      "hsl": "hsl(355.6,100%,94.7%)",
-      "rgbChannel": "255 228 230",
-      "hslChannel": "355.6 100% 94.7%"
-    },
-    {
-      "scale": 200,
-      "hex": "#fecdd3",
-      "rgb": "rgb(254,205,211)",
-      "hsl": "hsl(352.7,96.1%,90%)",
-      "rgbChannel": "254 205 211",
-      "hslChannel": "352.7 96.1% 90%"
-    },
-    {
-      "scale": 300,
-      "hex": "#fda4af",
-      "rgb": "rgb(253,164,175)",
-      "hsl": "hsl(352.6,95.7%,81.8%)",
-      "rgbChannel": "253 164 175",
-      "hslChannel": "352.6 95.7% 81.8%"
-    },
-    {
-      "scale": 400,
-      "hex": "#fb7185",
-      "rgb": "rgb(251,113,133)",
-      "hsl": "hsl(351.3,94.5%,71.4%)",
-      "rgbChannel": "251 113 133",
-      "hslChannel": "351.3 94.5% 71.4%"
-    },
-    {
-      "scale": 500,
-      "hex": "#f43f5e",
-      "rgb": "rgb(244,63,94)",
-      "hsl": "hsl(349.7,89.2%,60.2%)",
-      "rgbChannel": "244 63 94",
-      "hslChannel": "349.7 89.2% 60.2%"
-    },
-    {
-      "scale": 600,
-      "hex": "#e11d48",
-      "rgb": "rgb(225,29,72)",
-      "hsl": "hsl(346.8,77.2%,49.8%)",
-      "rgbChannel": "225 29 72",
-      "hslChannel": "346.8 77.2% 49.8%"
-    },
-    {
-      "scale": 700,
-      "hex": "#be123c",
-      "rgb": "rgb(190,18,60)",
-      "hsl": "hsl(345.3,82.7%,40.8%)",
-      "rgbChannel": "190 18 60",
-      "hslChannel": "345.3 82.7% 40.8%"
-    },
-    {
-      "scale": 800,
-      "hex": "#9f1239",
-      "rgb": "rgb(159,18,57)",
-      "hsl": "hsl(343.4,79.7%,34.7%)",
-      "rgbChannel": "159 18 57",
-      "hslChannel": "343.4 79.7% 34.7%"
-    },
-    {
-      "scale": 900,
-      "hex": "#881337",
-      "rgb": "rgb(136,19,55)",
-      "hsl": "hsl(341.5,75.5%,30.4%)",
-      "rgbChannel": "136 19 55",
-      "hslChannel": "341.5 75.5% 30.4%"
-    },
-    {
-      "scale": 950,
-      "hex": "#4c0519",
-      "rgb": "rgb(76,5,25)",
-      "hsl": "hsl(343.1,87.7%,15.9%)",
-      "rgbChannel": "76 5 25",
-      "hslChannel": "343.1 87.7% 15.9%"
-    }
-  ]
-}
diff --git a/apps/www/static/registry/colors/neutral.json b/apps/www/static/registry/colors/neutral.json
deleted file mode 100644
index 0a65056e..00000000
--- a/apps/www/static/registry/colors/neutral.json
+++ /dev/null
@@ -1,92 +0,0 @@
-{
-  "inlineColors": {
-    "light": {
-      "background": "white",
-      "foreground": "neutral-950",
-      "card": "white",
-      "card-foreground": "neutral-950",
-      "popover": "white",
-      "popover-foreground": "neutral-950",
-      "primary": "neutral-900",
-      "primary-foreground": "neutral-50",
-      "secondary": "neutral-100",
-      "secondary-foreground": "neutral-900",
-      "muted": "neutral-100",
-      "muted-foreground": "neutral-500",
-      "accent": "neutral-100",
-      "accent-foreground": "neutral-900",
-      "destructive": "red-500",
-      "destructive-foreground": "neutral-50",
-      "border": "neutral-200",
-      "input": "neutral-200",
-      "ring": "neutral-950"
-    },
-    "dark": {
-      "background": "neutral-950",
-      "foreground": "neutral-50",
-      "card": "neutral-950",
-      "card-foreground": "neutral-50",
-      "popover": "neutral-950",
-      "popover-foreground": "neutral-50",
-      "primary": "neutral-50",
-      "primary-foreground": "neutral-900",
-      "secondary": "neutral-800",
-      "secondary-foreground": "neutral-50",
-      "muted": "neutral-800",
-      "muted-foreground": "neutral-400",
-      "accent": "neutral-800",
-      "accent-foreground": "neutral-50",
-      "destructive": "red-900",
-      "destructive-foreground": "neutral-50",
-      "border": "neutral-800",
-      "input": "neutral-800",
-      "ring": "neutral-300"
-    }
-  },
-  "cssVars": {
-    "light": {
-      "background": "0 0% 100%",
-      "foreground": "0 0% 3.9%",
-      "card": "0 0% 100%",
-      "card-foreground": "0 0% 3.9%",
-      "popover": "0 0% 100%",
-      "popover-foreground": "0 0% 3.9%",
-      "primary": "0 0% 9%",
-      "primary-foreground": "0 0% 98%",
-      "secondary": "0 0% 96.1%",
-      "secondary-foreground": "0 0% 9%",
-      "muted": "0 0% 96.1%",
-      "muted-foreground": "0 0% 45.1%",
-      "accent": "0 0% 96.1%",
-      "accent-foreground": "0 0% 9%",
-      "destructive": "0 84.2% 60.2%",
-      "destructive-foreground": "0 0% 98%",
-      "border": "0 0% 89.8%",
-      "input": "0 0% 89.8%",
-      "ring": "0 0% 3.9%"
-    },
-    "dark": {
-      "background": "0 0% 3.9%",
-      "foreground": "0 0% 98%",
-      "card": "0 0% 3.9%",
-      "card-foreground": "0 0% 98%",
-      "popover": "0 0% 3.9%",
-      "popover-foreground": "0 0% 98%",
-      "primary": "0 0% 98%",
-      "primary-foreground": "0 0% 9%",
-      "secondary": "0 0% 14.9%",
-      "secondary-foreground": "0 0% 98%",
-      "muted": "0 0% 14.9%",
-      "muted-foreground": "0 0% 63.9%",
-      "accent": "0 0% 14.9%",
-      "accent-foreground": "0 0% 98%",
-      "destructive": "0 62.8% 30.6%",
-      "destructive-foreground": "0 0% 98%",
-      "border": "0 0% 14.9%",
-      "input": "0 0% 14.9%",
-      "ring": "0 0% 83.1%"
-    }
-  },
-  "inlineColorsTemplate": "@tailwind base;\n@tailwind components;\n@tailwind utilities;\n",
-  "cssVarsTemplate": "@tailwind base;\n@tailwind components;\n@tailwind utilities;\n \n@layer base {\n  :root {\n    --background: 0 0% 100%;\n    --foreground: 0 0% 3.9%;\n \n    --muted: 0 0% 96.1%;\n    --muted-foreground: 0 0% 45.1%;\n \n    --popover: 0 0% 100%;\n    --popover-foreground: 0 0% 3.9%;\n \n    --card: 0 0% 100%;\n    --card-foreground: 0 0% 3.9%;\n \n    --border: 0 0% 89.8%;\n    --input: 0 0% 89.8%;\n \n    --primary: 0 0% 9%;\n    --primary-foreground: 0 0% 98%;\n \n    --secondary: 0 0% 96.1%;\n    --secondary-foreground: 0 0% 9%;\n \n    --accent: 0 0% 96.1%;\n    --accent-foreground: 0 0% 9%;\n \n    --destructive: 0 84.2% 60.2%;\n    --destructive-foreground: 0 0% 98%;\n \n    --ring: 0 0% 3.9%;\n \n    --radius: 0.5rem;\n  }\n \n  .dark {\n    --background: 0 0% 3.9%;\n    --foreground: 0 0% 98%;\n \n    --muted: 0 0% 14.9%;\n    --muted-foreground: 0 0% 63.9%;\n \n    --popover: 0 0% 3.9%;\n    --popover-foreground: 0 0% 98%;\n \n    --card: 0 0% 3.9%;\n    --card-foreground: 0 0% 98%;\n \n    --border: 0 0% 14.9%;\n    --input: 0 0% 14.9%;\n \n    --primary: 0 0% 98%;\n    --primary-foreground: 0 0% 9%;\n \n    --secondary: 0 0% 14.9%;\n    --secondary-foreground: 0 0% 98%;\n \n    --accent: 0 0% 14.9%;\n    --accent-foreground: 0 0% 98%;\n \n    --destructive: 0 62.8% 30.6%;\n    --destructive-foreground: 0 0% 98%;\n \n    --ring: 0 0% 83.1%;\n  }\n}\n \n@layer base {\n  * {\n    @apply border-border;\n  }\n  body {\n    @apply bg-background text-foreground;\n  }\n}"
-}
diff --git a/apps/www/static/registry/colors/slate.json b/apps/www/static/registry/colors/slate.json
deleted file mode 100644
index bf5be7ff..00000000
--- a/apps/www/static/registry/colors/slate.json
+++ /dev/null
@@ -1,92 +0,0 @@
-{
-  "inlineColors": {
-    "light": {
-      "background": "white",
-      "foreground": "slate-950",
-      "card": "white",
-      "card-foreground": "slate-950",
-      "popover": "white",
-      "popover-foreground": "slate-950",
-      "primary": "slate-900",
-      "primary-foreground": "slate-50",
-      "secondary": "slate-100",
-      "secondary-foreground": "slate-900",
-      "muted": "slate-100",
-      "muted-foreground": "slate-500",
-      "accent": "slate-100",
-      "accent-foreground": "slate-900",
-      "destructive": "red-500",
-      "destructive-foreground": "slate-50",
-      "border": "slate-200",
-      "input": "slate-200",
-      "ring": "slate-950"
-    },
-    "dark": {
-      "background": "slate-950",
-      "foreground": "slate-50",
-      "card": "slate-950",
-      "card-foreground": "slate-50",
-      "popover": "slate-950",
-      "popover-foreground": "slate-50",
-      "primary": "slate-50",
-      "primary-foreground": "slate-900",
-      "secondary": "slate-800",
-      "secondary-foreground": "slate-50",
-      "muted": "slate-800",
-      "muted-foreground": "slate-400",
-      "accent": "slate-800",
-      "accent-foreground": "slate-50",
-      "destructive": "red-900",
-      "destructive-foreground": "slate-50",
-      "border": "slate-800",
-      "input": "slate-800",
-      "ring": "slate-300"
-    }
-  },
-  "cssVars": {
-    "light": {
-      "background": "0 0% 100%",
-      "foreground": "222.2 84% 4.9%",
-      "card": "0 0% 100%",
-      "card-foreground": "222.2 84% 4.9%",
-      "popover": "0 0% 100%",
-      "popover-foreground": "222.2 84% 4.9%",
-      "primary": "222.2 47.4% 11.2%",
-      "primary-foreground": "210 40% 98%",
-      "secondary": "210 40% 96.1%",
-      "secondary-foreground": "222.2 47.4% 11.2%",
-      "muted": "210 40% 96.1%",
-      "muted-foreground": "215.4 16.3% 46.9%",
-      "accent": "210 40% 96.1%",
-      "accent-foreground": "222.2 47.4% 11.2%",
-      "destructive": "0 84.2% 60.2%",
-      "destructive-foreground": "210 40% 98%",
-      "border": "214.3 31.8% 91.4%",
-      "input": "214.3 31.8% 91.4%",
-      "ring": "222.2 84% 4.9%"
-    },
-    "dark": {
-      "background": "222.2 84% 4.9%",
-      "foreground": "210 40% 98%",
-      "card": "222.2 84% 4.9%",
-      "card-foreground": "210 40% 98%",
-      "popover": "222.2 84% 4.9%",
-      "popover-foreground": "210 40% 98%",
-      "primary": "210 40% 98%",
-      "primary-foreground": "222.2 47.4% 11.2%",
-      "secondary": "217.2 32.6% 17.5%",
-      "secondary-foreground": "210 40% 98%",
-      "muted": "217.2 32.6% 17.5%",
-      "muted-foreground": "215 20.2% 65.1%",
-      "accent": "217.2 32.6% 17.5%",
-      "accent-foreground": "210 40% 98%",
-      "destructive": "0 62.8% 30.6%",
-      "destructive-foreground": "210 40% 98%",
-      "border": "217.2 32.6% 17.5%",
-      "input": "217.2 32.6% 17.5%",
-      "ring": "212.7 26.8% 83.9%"
-    }
-  },
-  "inlineColorsTemplate": "@tailwind base;\n@tailwind components;\n@tailwind utilities;\n",
-  "cssVarsTemplate": "@tailwind base;\n@tailwind components;\n@tailwind utilities;\n \n@layer base {\n  :root {\n    --background: 0 0% 100%;\n    --foreground: 222.2 84% 4.9%;\n \n    --muted: 210 40% 96.1%;\n    --muted-foreground: 215.4 16.3% 46.9%;\n \n    --popover: 0 0% 100%;\n    --popover-foreground: 222.2 84% 4.9%;\n \n    --card: 0 0% 100%;\n    --card-foreground: 222.2 84% 4.9%;\n \n    --border: 214.3 31.8% 91.4%;\n    --input: 214.3 31.8% 91.4%;\n \n    --primary: 222.2 47.4% 11.2%;\n    --primary-foreground: 210 40% 98%;\n \n    --secondary: 210 40% 96.1%;\n    --secondary-foreground: 222.2 47.4% 11.2%;\n \n    --accent: 210 40% 96.1%;\n    --accent-foreground: 222.2 47.4% 11.2%;\n \n    --destructive: 0 84.2% 60.2%;\n    --destructive-foreground: 210 40% 98%;\n \n    --ring: 222.2 84% 4.9%;\n \n    --radius: 0.5rem;\n  }\n \n  .dark {\n    --background: 222.2 84% 4.9%;\n    --foreground: 210 40% 98%;\n \n    --muted: 217.2 32.6% 17.5%;\n    --muted-foreground: 215 20.2% 65.1%;\n \n    --popover: 222.2 84% 4.9%;\n    --popover-foreground: 210 40% 98%;\n \n    --card: 222.2 84% 4.9%;\n    --card-foreground: 210 40% 98%;\n \n    --border: 217.2 32.6% 17.5%;\n    --input: 217.2 32.6% 17.5%;\n \n    --primary: 210 40% 98%;\n    --primary-foreground: 222.2 47.4% 11.2%;\n \n    --secondary: 217.2 32.6% 17.5%;\n    --secondary-foreground: 210 40% 98%;\n \n    --accent: 217.2 32.6% 17.5%;\n    --accent-foreground: 210 40% 98%;\n \n    --destructive: 0 62.8% 30.6%;\n    --destructive-foreground: 210 40% 98%;\n \n    --ring: 212.7 26.8% 83.9%;\n  }\n}\n \n@layer base {\n  * {\n    @apply border-border;\n  }\n  body {\n    @apply bg-background text-foreground;\n  }\n}"
-}
diff --git a/apps/www/static/registry/colors/stone.json b/apps/www/static/registry/colors/stone.json
deleted file mode 100644
index d31a29ae..00000000
--- a/apps/www/static/registry/colors/stone.json
+++ /dev/null
@@ -1,92 +0,0 @@
-{
-  "inlineColors": {
-    "light": {
-      "background": "white",
-      "foreground": "stone-950",
-      "card": "white",
-      "card-foreground": "stone-950",
-      "popover": "white",
-      "popover-foreground": "stone-950",
-      "primary": "stone-900",
-      "primary-foreground": "stone-50",
-      "secondary": "stone-100",
-      "secondary-foreground": "stone-900",
-      "muted": "stone-100",
-      "muted-foreground": "stone-500",
-      "accent": "stone-100",
-      "accent-foreground": "stone-900",
-      "destructive": "red-500",
-      "destructive-foreground": "stone-50",
-      "border": "stone-200",
-      "input": "stone-200",
-      "ring": "stone-950"
-    },
-    "dark": {
-      "background": "stone-950",
-      "foreground": "stone-50",
-      "card": "stone-950",
-      "card-foreground": "stone-50",
-      "popover": "stone-950",
-      "popover-foreground": "stone-50",
-      "primary": "stone-50",
-      "primary-foreground": "stone-900",
-      "secondary": "stone-800",
-      "secondary-foreground": "stone-50",
-      "muted": "stone-800",
-      "muted-foreground": "stone-400",
-      "accent": "stone-800",
-      "accent-foreground": "stone-50",
-      "destructive": "red-900",
-      "destructive-foreground": "stone-50",
-      "border": "stone-800",
-      "input": "stone-800",
-      "ring": "stone-300"
-    }
-  },
-  "cssVars": {
-    "light": {
-      "background": "0 0% 100%",
-      "foreground": "20 14.3% 4.1%",
-      "card": "0 0% 100%",
-      "card-foreground": "20 14.3% 4.1%",
-      "popover": "0 0% 100%",
-      "popover-foreground": "20 14.3% 4.1%",
-      "primary": "24 9.8% 10%",
-      "primary-foreground": "60 9.1% 97.8%",
-      "secondary": "60 4.8% 95.9%",
-      "secondary-foreground": "24 9.8% 10%",
-      "muted": "60 4.8% 95.9%",
-      "muted-foreground": "25 5.3% 44.7%",
-      "accent": "60 4.8% 95.9%",
-      "accent-foreground": "24 9.8% 10%",
-      "destructive": "0 84.2% 60.2%",
-      "destructive-foreground": "60 9.1% 97.8%",
-      "border": "20 5.9% 90%",
-      "input": "20 5.9% 90%",
-      "ring": "20 14.3% 4.1%"
-    },
-    "dark": {
-      "background": "20 14.3% 4.1%",
-      "foreground": "60 9.1% 97.8%",
-      "card": "20 14.3% 4.1%",
-      "card-foreground": "60 9.1% 97.8%",
-      "popover": "20 14.3% 4.1%",
-      "popover-foreground": "60 9.1% 97.8%",
-      "primary": "60 9.1% 97.8%",
-      "primary-foreground": "24 9.8% 10%",
-      "secondary": "12 6.5% 15.1%",
-      "secondary-foreground": "60 9.1% 97.8%",
-      "muted": "12 6.5% 15.1%",
-      "muted-foreground": "24 5.4% 63.9%",
-      "accent": "12 6.5% 15.1%",
-      "accent-foreground": "60 9.1% 97.8%",
-      "destructive": "0 62.8% 30.6%",
-      "destructive-foreground": "60 9.1% 97.8%",
-      "border": "12 6.5% 15.1%",
-      "input": "12 6.5% 15.1%",
-      "ring": "24 5.7% 82.9%"
-    }
-  },
-  "inlineColorsTemplate": "@tailwind base;\n@tailwind components;\n@tailwind utilities;\n",
-  "cssVarsTemplate": "@tailwind base;\n@tailwind components;\n@tailwind utilities;\n \n@layer base {\n  :root {\n    --background: 0 0% 100%;\n    --foreground: 20 14.3% 4.1%;\n \n    --muted: 60 4.8% 95.9%;\n    --muted-foreground: 25 5.3% 44.7%;\n \n    --popover: 0 0% 100%;\n    --popover-foreground: 20 14.3% 4.1%;\n \n    --card: 0 0% 100%;\n    --card-foreground: 20 14.3% 4.1%;\n \n    --border: 20 5.9% 90%;\n    --input: 20 5.9% 90%;\n \n    --primary: 24 9.8% 10%;\n    --primary-foreground: 60 9.1% 97.8%;\n \n    --secondary: 60 4.8% 95.9%;\n    --secondary-foreground: 24 9.8% 10%;\n \n    --accent: 60 4.8% 95.9%;\n    --accent-foreground: 24 9.8% 10%;\n \n    --destructive: 0 84.2% 60.2%;\n    --destructive-foreground: 60 9.1% 97.8%;\n \n    --ring: 20 14.3% 4.1%;\n \n    --radius: 0.5rem;\n  }\n \n  .dark {\n    --background: 20 14.3% 4.1%;\n    --foreground: 60 9.1% 97.8%;\n \n    --muted: 12 6.5% 15.1%;\n    --muted-foreground: 24 5.4% 63.9%;\n \n    --popover: 20 14.3% 4.1%;\n    --popover-foreground: 60 9.1% 97.8%;\n \n    --card: 20 14.3% 4.1%;\n    --card-foreground: 60 9.1% 97.8%;\n \n    --border: 12 6.5% 15.1%;\n    --input: 12 6.5% 15.1%;\n \n    --primary: 60 9.1% 97.8%;\n    --primary-foreground: 24 9.8% 10%;\n \n    --secondary: 12 6.5% 15.1%;\n    --secondary-foreground: 60 9.1% 97.8%;\n \n    --accent: 12 6.5% 15.1%;\n    --accent-foreground: 60 9.1% 97.8%;\n \n    --destructive: 0 62.8% 30.6%;\n    --destructive-foreground: 60 9.1% 97.8%;\n \n    --ring: 24 5.7% 82.9%;\n  }\n}\n \n@layer base {\n  * {\n    @apply border-border;\n  }\n  body {\n    @apply bg-background text-foreground;\n  }\n}"
-}
diff --git a/apps/www/static/registry/colors/zinc.json b/apps/www/static/registry/colors/zinc.json
deleted file mode 100644
index 9fcf1311..00000000
--- a/apps/www/static/registry/colors/zinc.json
+++ /dev/null
@@ -1,92 +0,0 @@
-{
-  "inlineColors": {
-    "light": {
-      "background": "white",
-      "foreground": "zinc-950",
-      "card": "white",
-      "card-foreground": "zinc-950",
-      "popover": "white",
-      "popover-foreground": "zinc-950",
-      "primary": "zinc-900",
-      "primary-foreground": "zinc-50",
-      "secondary": "zinc-100",
-      "secondary-foreground": "zinc-900",
-      "muted": "zinc-100",
-      "muted-foreground": "zinc-500",
-      "accent": "zinc-100",
-      "accent-foreground": "zinc-900",
-      "destructive": "red-500",
-      "destructive-foreground": "zinc-50",
-      "border": "zinc-200",
-      "input": "zinc-200",
-      "ring": "zinc-950"
-    },
-    "dark": {
-      "background": "zinc-950",
-      "foreground": "zinc-50",
-      "card": "zinc-950",
-      "card-foreground": "zinc-50",
-      "popover": "zinc-950",
-      "popover-foreground": "zinc-50",
-      "primary": "zinc-50",
-      "primary-foreground": "zinc-900",
-      "secondary": "zinc-800",
-      "secondary-foreground": "zinc-50",
-      "muted": "zinc-800",
-      "muted-foreground": "zinc-400",
-      "accent": "zinc-800",
-      "accent-foreground": "zinc-50",
-      "destructive": "red-900",
-      "destructive-foreground": "zinc-50",
-      "border": "zinc-800",
-      "input": "zinc-800",
-      "ring": "zinc-300"
-    }
-  },
-  "cssVars": {
-    "light": {
-      "background": "0 0% 100%",
-      "foreground": "240 10% 3.9%",
-      "card": "0 0% 100%",
-      "card-foreground": "240 10% 3.9%",
-      "popover": "0 0% 100%",
-      "popover-foreground": "240 10% 3.9%",
-      "primary": "240 5.9% 10%",
-      "primary-foreground": "0 0% 98%",
-      "secondary": "240 4.8% 95.9%",
-      "secondary-foreground": "240 5.9% 10%",
-      "muted": "240 4.8% 95.9%",
-      "muted-foreground": "240 3.8% 46.1%",
-      "accent": "240 4.8% 95.9%",
-      "accent-foreground": "240 5.9% 10%",
-      "destructive": "0 84.2% 60.2%",
-      "destructive-foreground": "0 0% 98%",
-      "border": "240 5.9% 90%",
-      "input": "240 5.9% 90%",
-      "ring": "240 10% 3.9%"
-    },
-    "dark": {
-      "background": "240 10% 3.9%",
-      "foreground": "0 0% 98%",
-      "card": "240 10% 3.9%",
-      "card-foreground": "0 0% 98%",
-      "popover": "240 10% 3.9%",
-      "popover-foreground": "0 0% 98%",
-      "primary": "0 0% 98%",
-      "primary-foreground": "240 5.9% 10%",
-      "secondary": "240 3.7% 15.9%",
-      "secondary-foreground": "0 0% 98%",
-      "muted": "240 3.7% 15.9%",
-      "muted-foreground": "240 5% 64.9%",
-      "accent": "240 3.7% 15.9%",
-      "accent-foreground": "0 0% 98%",
-      "destructive": "0 62.8% 30.6%",
-      "destructive-foreground": "0 0% 98%",
-      "border": "240 3.7% 15.9%",
-      "input": "240 3.7% 15.9%",
-      "ring": "240 4.9% 83.9%"
-    }
-  },
-  "inlineColorsTemplate": "@tailwind base;\n@tailwind components;\n@tailwind utilities;\n",
-  "cssVarsTemplate": "@tailwind base;\n@tailwind components;\n@tailwind utilities;\n \n@layer base {\n  :root {\n    --background: 0 0% 100%;\n    --foreground: 240 10% 3.9%;\n \n    --muted: 240 4.8% 95.9%;\n    --muted-foreground: 240 3.8% 46.1%;\n \n    --popover: 0 0% 100%;\n    --popover-foreground: 240 10% 3.9%;\n \n    --card: 0 0% 100%;\n    --card-foreground: 240 10% 3.9%;\n \n    --border: 240 5.9% 90%;\n    --input: 240 5.9% 90%;\n \n    --primary: 240 5.9% 10%;\n    --primary-foreground: 0 0% 98%;\n \n    --secondary: 240 4.8% 95.9%;\n    --secondary-foreground: 240 5.9% 10%;\n \n    --accent: 240 4.8% 95.9%;\n    --accent-foreground: 240 5.9% 10%;\n \n    --destructive: 0 84.2% 60.2%;\n    --destructive-foreground: 0 0% 98%;\n \n    --ring: 240 10% 3.9%;\n \n    --radius: 0.5rem;\n  }\n \n  .dark {\n    --background: 240 10% 3.9%;\n    --foreground: 0 0% 98%;\n \n    --muted: 240 3.7% 15.9%;\n    --muted-foreground: 240 5% 64.9%;\n \n    --popover: 240 10% 3.9%;\n    --popover-foreground: 0 0% 98%;\n \n    --card: 240 10% 3.9%;\n    --card-foreground: 0 0% 98%;\n \n    --border: 240 3.7% 15.9%;\n    --input: 240 3.7% 15.9%;\n \n    --primary: 0 0% 98%;\n    --primary-foreground: 240 5.9% 10%;\n \n    --secondary: 240 3.7% 15.9%;\n    --secondary-foreground: 0 0% 98%;\n \n    --accent: 240 3.7% 15.9%;\n    --accent-foreground: 0 0% 98%;\n \n    --destructive: 0 62.8% 30.6%;\n    --destructive-foreground: 0 0% 98%;\n \n    --ring: 240 4.9% 83.9%;\n  }\n}\n \n@layer base {\n  * {\n    @apply border-border;\n  }\n  body {\n    @apply bg-background text-foreground;\n  }\n}"
-}
diff --git a/apps/www/static/registry/index.json b/apps/www/static/registry/index.json
deleted file mode 100644
index c1f718a5..00000000
--- a/apps/www/static/registry/index.json
+++ /dev/null
@@ -1,611 +0,0 @@
-[
-  {
-    "name": "accordion",
-    "dependencies": [
-      "radix-vue"
-    ],
-    "registryDependencies": [
-      "utils"
-    ],
-    "files": [
-      "ui/accordion/Accordion.vue",
-      "ui/accordion/AccordionContent.vue",
-      "ui/accordion/AccordionItem.vue",
-      "ui/accordion/AccordionTrigger.vue",
-      "ui/accordion/index.ts"
-    ],
-    "type": "components:ui"
-  },
-  {
-    "name": "alert",
-    "dependencies": [],
-    "registryDependencies": [
-      "utils"
-    ],
-    "files": [
-      "ui/alert/Alert.vue",
-      "ui/alert/AlertDescription.vue",
-      "ui/alert/AlertTitle.vue",
-      "ui/alert/index.ts"
-    ],
-    "type": "components:ui"
-  },
-  {
-    "name": "alert-dialog",
-    "dependencies": [
-      "radix-vue"
-    ],
-    "registryDependencies": [
-      "utils",
-      "button"
-    ],
-    "files": [
-      "ui/alert-dialog/AlertDialog.vue",
-      "ui/alert-dialog/AlertDialogAction.vue",
-      "ui/alert-dialog/AlertDialogCancel.vue",
-      "ui/alert-dialog/AlertDialogContent.vue",
-      "ui/alert-dialog/AlertDialogDescription.vue",
-      "ui/alert-dialog/AlertDialogFooter.vue",
-      "ui/alert-dialog/AlertDialogHeader.vue",
-      "ui/alert-dialog/AlertDialogTitle.vue",
-      "ui/alert-dialog/AlertDialogTrigger.vue",
-      "ui/alert-dialog/index.ts"
-    ],
-    "type": "components:ui"
-  },
-  {
-    "name": "aspect-ratio",
-    "dependencies": [
-      "radix-vue"
-    ],
-    "registryDependencies": [],
-    "files": [
-      "ui/aspect-ratio/AspectRatio.vue",
-      "ui/aspect-ratio/index.ts"
-    ],
-    "type": "components:ui"
-  },
-  {
-    "name": "avatar",
-    "dependencies": [
-      "radix-vue"
-    ],
-    "registryDependencies": [
-      "utils"
-    ],
-    "files": [
-      "ui/avatar/Avatar.vue",
-      "ui/avatar/AvatarFallback.vue",
-      "ui/avatar/AvatarImage.vue",
-      "ui/avatar/index.ts"
-    ],
-    "type": "components:ui"
-  },
-  {
-    "name": "badge",
-    "dependencies": [],
-    "registryDependencies": [
-      "utils"
-    ],
-    "files": [
-      "ui/badge/Badge.vue",
-      "ui/badge/index.ts"
-    ],
-    "type": "components:ui"
-  },
-  {
-    "name": "breadcrumb",
-    "dependencies": [],
-    "registryDependencies": [],
-    "files": [
-      "ui/breadcrumb/BreadCrumb.vue",
-      "ui/breadcrumb/BreadCrumbItem.vue",
-      "ui/breadcrumb/index.ts"
-    ],
-    "type": "components:ui"
-  },
-  {
-    "name": "button",
-    "dependencies": [],
-    "registryDependencies": [
-      "utils"
-    ],
-    "files": [
-      "ui/button/Button.vue",
-      "ui/button/index.ts"
-    ],
-    "type": "components:ui"
-  },
-  {
-    "name": "calendar",
-    "dependencies": [],
-    "registryDependencies": [
-      "utils"
-    ],
-    "files": [
-      "ui/calendar/Calendar.vue",
-      "ui/calendar/index.ts"
-    ],
-    "type": "components:ui"
-  },
-  {
-    "name": "card",
-    "dependencies": [],
-    "registryDependencies": [
-      "utils"
-    ],
-    "files": [
-      "ui/card/Card.vue",
-      "ui/card/CardContent.vue",
-      "ui/card/CardDescription.vue",
-      "ui/card/CardFooter.vue",
-      "ui/card/CardHeader.vue",
-      "ui/card/CardTitle.vue",
-      "ui/card/index.ts"
-    ],
-    "type": "components:ui"
-  },
-  {
-    "name": "checkbox",
-    "dependencies": [
-      "radix-vue"
-    ],
-    "registryDependencies": [
-      "utils"
-    ],
-    "files": [
-      "ui/checkbox/Checkbox.vue",
-      "ui/checkbox/index.ts"
-    ],
-    "type": "components:ui"
-  },
-  {
-    "name": "collapsible",
-    "dependencies": [
-      "radix-vue"
-    ],
-    "registryDependencies": [
-      "utils"
-    ],
-    "files": [
-      "ui/collapsible/Collapsible.vue",
-      "ui/collapsible/CollapsibleContent.vue",
-      "ui/collapsible/CollapsibleTrigger.vue",
-      "ui/collapsible/index.ts"
-    ],
-    "type": "components:ui"
-  },
-  {
-    "name": "context-menu",
-    "dependencies": [
-      "radix-vue"
-    ],
-    "registryDependencies": [
-      "utils"
-    ],
-    "files": [
-      "ui/context-menu/ContextMenu.vue",
-      "ui/context-menu/ContextMenuCheckboxItem.vue",
-      "ui/context-menu/ContextMenuContent.vue",
-      "ui/context-menu/ContextMenuGroup.vue",
-      "ui/context-menu/ContextMenuItem.vue",
-      "ui/context-menu/ContextMenuLabel.vue",
-      "ui/context-menu/ContextMenuPortal.vue",
-      "ui/context-menu/ContextMenuRadioGroup.vue",
-      "ui/context-menu/ContextMenuRadioItem.vue",
-      "ui/context-menu/ContextMenuSeparator.vue",
-      "ui/context-menu/ContextMenuShortcut.vue",
-      "ui/context-menu/ContextMenuSub.vue",
-      "ui/context-menu/ContextMenuSubContent.vue",
-      "ui/context-menu/ContextMenuSubTrigger.vue",
-      "ui/context-menu/ContextMenuTrigger.vue",
-      "ui/context-menu/index.ts"
-    ],
-    "type": "components:ui"
-  },
-  {
-    "name": "data-table",
-    "dependencies": [],
-    "registryDependencies": [],
-    "files": [
-      "ui/data-table/DataTable.vue",
-      "ui/data-table/index.ts"
-    ],
-    "type": "components:ui"
-  },
-  {
-    "name": "date-picker",
-    "dependencies": [],
-    "registryDependencies": [],
-    "files": [
-      "ui/date-picker/DatePicker.vue",
-      "ui/date-picker/index.ts"
-    ],
-    "type": "components:ui"
-  },
-  {
-    "name": "dialog",
-    "dependencies": [
-      "radix-vue"
-    ],
-    "registryDependencies": [
-      "utils"
-    ],
-    "files": [
-      "ui/dialog/Dialog.vue",
-      "ui/dialog/DialogContent.vue",
-      "ui/dialog/DialogDescription.vue",
-      "ui/dialog/DialogFooter.vue",
-      "ui/dialog/DialogHeader.vue",
-      "ui/dialog/DialogTitle.vue",
-      "ui/dialog/DialogTrigger.vue",
-      "ui/dialog/index.ts"
-    ],
-    "type": "components:ui"
-  },
-  {
-    "name": "dropdown-menu",
-    "dependencies": [
-      "radix-vue"
-    ],
-    "registryDependencies": [
-      "utils"
-    ],
-    "files": [
-      "ui/dropdown-menu/DropdownMenu.vue",
-      "ui/dropdown-menu/DropdownMenuCheckboxItem.vue",
-      "ui/dropdown-menu/DropdownMenuContent.vue",
-      "ui/dropdown-menu/DropdownMenuGroup.vue",
-      "ui/dropdown-menu/DropdownMenuItem.vue",
-      "ui/dropdown-menu/DropdownMenuLabel.vue",
-      "ui/dropdown-menu/DropdownMenuRadioGroup.vue",
-      "ui/dropdown-menu/DropdownMenuRadioItem.vue",
-      "ui/dropdown-menu/DropdownMenuSeparator.vue",
-      "ui/dropdown-menu/DropdownMenuShortcut.vue",
-      "ui/dropdown-menu/DropdownMenuSub.vue",
-      "ui/dropdown-menu/DropdownMenuSubContent.vue",
-      "ui/dropdown-menu/DropdownMenuSubTrigger.vue",
-      "ui/dropdown-menu/DropdownMenuTrigger.vue",
-      "ui/dropdown-menu/index.ts"
-    ],
-    "type": "components:ui"
-  },
-  {
-    "name": "hover-card",
-    "dependencies": [
-      "radix-vue"
-    ],
-    "registryDependencies": [
-      "utils"
-    ],
-    "files": [
-      "ui/hover-card/HoverCard.vue",
-      "ui/hover-card/HoverCardContent.vue",
-      "ui/hover-card/HoverCardTrigger.vue",
-      "ui/hover-card/index.ts"
-    ],
-    "type": "components:ui"
-  },
-  {
-    "name": "input",
-    "dependencies": [],
-    "registryDependencies": [
-      "utils"
-    ],
-    "files": [
-      "ui/input/Input.vue",
-      "ui/input/index.ts"
-    ],
-    "type": "components:ui"
-  },
-  {
-    "name": "kbd",
-    "dependencies": [],
-    "registryDependencies": [],
-    "files": [
-      "ui/kbd/Kbd.vue",
-      "ui/kbd/index.ts"
-    ],
-    "type": "components:ui"
-  },
-  {
-    "name": "label",
-    "dependencies": [
-      "radix-vue"
-    ],
-    "registryDependencies": [
-      "utils"
-    ],
-    "files": [
-      "ui/label/Label.vue",
-      "ui/label/index.ts"
-    ],
-    "type": "components:ui"
-  },
-  {
-    "name": "menubar",
-    "dependencies": [
-      "radix-vue"
-    ],
-    "registryDependencies": [
-      "utils"
-    ],
-    "files": [
-      "ui/menubar/Menubar.vue",
-      "ui/menubar/MenubarCheckboxItem.vue",
-      "ui/menubar/MenubarContent.vue",
-      "ui/menubar/MenubarGroup.vue",
-      "ui/menubar/MenubarItem.vue",
-      "ui/menubar/MenubarLabel.vue",
-      "ui/menubar/MenubarMenu.vue",
-      "ui/menubar/MenubarRadioGroup.vue",
-      "ui/menubar/MenubarRadioItem.vue",
-      "ui/menubar/MenubarSeparator.vue",
-      "ui/menubar/MenubarShortcut.vue",
-      "ui/menubar/MenubarSub.vue",
-      "ui/menubar/MenubarSubContent.vue",
-      "ui/menubar/MenubarSubTrigger.vue",
-      "ui/menubar/MenubarTrigger.vue",
-      "ui/menubar/index.ts"
-    ],
-    "type": "components:ui"
-  },
-  {
-    "name": "navigation-menu",
-    "dependencies": [
-      "radix-vue"
-    ],
-    "registryDependencies": [
-      "utils"
-    ],
-    "files": [
-      "ui/navigation-menu/NavigationMenu.vue",
-      "ui/navigation-menu/NavigationMenuContent.vue",
-      "ui/navigation-menu/NavigationMenuIndicator.vue",
-      "ui/navigation-menu/NavigationMenuItem.vue",
-      "ui/navigation-menu/NavigationMenuLink.vue",
-      "ui/navigation-menu/NavigationMenuList.vue",
-      "ui/navigation-menu/NavigationMenuTrigger.vue",
-      "ui/navigation-menu/NavigationMenuViewport.vue",
-      "ui/navigation-menu/index.ts"
-    ],
-    "type": "components:ui"
-  },
-  {
-    "name": "popover",
-    "dependencies": [
-      "radix-vue"
-    ],
-    "registryDependencies": [
-      "utils"
-    ],
-    "files": [
-      "ui/popover/Popover.vue",
-      "ui/popover/PopoverContent.vue",
-      "ui/popover/PopoverTrigger.vue",
-      "ui/popover/index.ts"
-    ],
-    "type": "components:ui"
-  },
-  {
-    "name": "progress",
-    "dependencies": [
-      "radix-vue"
-    ],
-    "registryDependencies": [
-      "utils"
-    ],
-    "files": [
-      "ui/progress/Progress.vue",
-      "ui/progress/index.ts"
-    ],
-    "type": "components:ui"
-  },
-  {
-    "name": "radio-group",
-    "dependencies": [
-      "radix-vue"
-    ],
-    "registryDependencies": [
-      "utils"
-    ],
-    "files": [
-      "ui/radio-group/RadioGroup.vue",
-      "ui/radio-group/RadioGroupItem.vue",
-      "ui/radio-group/index.ts"
-    ],
-    "type": "components:ui"
-  },
-  {
-    "name": "scroll-area",
-    "dependencies": [
-      "radix-vue"
-    ],
-    "registryDependencies": [
-      "utils"
-    ],
-    "files": [
-      "ui/scroll-area/ScrollArea.vue",
-      "ui/scroll-area/ScrollBar.vue",
-      "ui/scroll-area/index.ts"
-    ],
-    "type": "components:ui"
-  },
-  {
-    "name": "select",
-    "dependencies": [
-      "radix-vue"
-    ],
-    "registryDependencies": [
-      "utils"
-    ],
-    "files": [
-      "ui/select/Select.vue",
-      "ui/select/SelectContent.vue",
-      "ui/select/SelectGroup.vue",
-      "ui/select/SelectItem.vue",
-      "ui/select/SelectItemText.vue",
-      "ui/select/SelectLabel.vue",
-      "ui/select/SelectSeparator.vue",
-      "ui/select/SelectTrigger.vue",
-      "ui/select/SelectValue.vue",
-      "ui/select/index.ts"
-    ],
-    "type": "components:ui"
-  },
-  {
-    "name": "separator",
-    "dependencies": [
-      "radix-vue"
-    ],
-    "registryDependencies": [
-      "utils"
-    ],
-    "files": [
-      "ui/separator/Separator.vue",
-      "ui/separator/index.ts"
-    ],
-    "type": "components:ui"
-  },
-  {
-    "name": "sheet",
-    "dependencies": [
-      "radix-vue"
-    ],
-    "registryDependencies": [
-      "utils"
-    ],
-    "files": [
-      "ui/sheet/Sheet.vue",
-      "ui/sheet/SheetClose.vue",
-      "ui/sheet/SheetContent.vue",
-      "ui/sheet/SheetDescription.vue",
-      "ui/sheet/SheetFooter.vue",
-      "ui/sheet/SheetHeader.vue",
-      "ui/sheet/SheetTitle.vue",
-      "ui/sheet/SheetTrigger.vue",
-      "ui/sheet/index.ts"
-    ],
-    "type": "components:ui"
-  },
-  {
-    "name": "skeleton",
-    "dependencies": [],
-    "registryDependencies": [
-      "utils"
-    ],
-    "files": [
-      "ui/skeleton/Skeleton.vue",
-      "ui/skeleton/index.ts"
-    ],
-    "type": "components:ui"
-  },
-  {
-    "name": "slider",
-    "dependencies": [
-      "radix-vue"
-    ],
-    "registryDependencies": [
-      "utils"
-    ],
-    "files": [
-      "ui/slider/Slider.vue",
-      "ui/slider/index.ts"
-    ],
-    "type": "components:ui"
-  },
-  {
-    "name": "switch",
-    "dependencies": [
-      "radix-vue"
-    ],
-    "registryDependencies": [
-      "utils"
-    ],
-    "files": [
-      "ui/switch/Switch.vue",
-      "ui/switch/index.ts"
-    ],
-    "type": "components:ui"
-  },
-  {
-    "name": "table",
-    "dependencies": [],
-    "registryDependencies": [
-      "utils"
-    ],
-    "files": [
-      "ui/table/Table.vue",
-      "ui/table/TableBody.vue",
-      "ui/table/TableCaption.vue",
-      "ui/table/TableCell.vue",
-      "ui/table/TableEmpty.vue",
-      "ui/table/TableFooter.vue",
-      "ui/table/TableHead.vue",
-      "ui/table/TableHeader.vue",
-      "ui/table/TableRow.vue",
-      "ui/table/index.ts"
-    ],
-    "type": "components:ui"
-  },
-  {
-    "name": "tabs",
-    "dependencies": [
-      "radix-vue"
-    ],
-    "registryDependencies": [
-      "utils"
-    ],
-    "files": [
-      "ui/tabs/Tabs.vue",
-      "ui/tabs/TabsContent.vue",
-      "ui/tabs/TabsList.vue",
-      "ui/tabs/TabsTrigger.vue",
-      "ui/tabs/index.ts"
-    ],
-    "type": "components:ui"
-  },
-  {
-    "name": "textarea",
-    "dependencies": [],
-    "registryDependencies": [
-      "utils"
-    ],
-    "files": [
-      "ui/textarea/Textarea.vue",
-      "ui/textarea/index.ts"
-    ],
-    "type": "components:ui"
-  },
-  {
-    "name": "toggle",
-    "dependencies": [
-      "radix-vue"
-    ],
-    "registryDependencies": [
-      "utils"
-    ],
-    "files": [
-      "ui/toggle/Toggle.vue",
-      "ui/toggle/index.ts"
-    ],
-    "type": "components:ui"
-  },
-  {
-    "name": "tooltip",
-    "dependencies": [
-      "radix-vue"
-    ],
-    "registryDependencies": [
-      "utils"
-    ],
-    "files": [
-      "ui/tooltip/Tooltip.vue",
-      "ui/tooltip/TooltipContent.vue",
-      "ui/tooltip/TooltipProvider.vue",
-      "ui/tooltip/TooltipTrigger.vue",
-      "ui/tooltip/index.ts"
-    ],
-    "type": "components:ui"
-  }
-]
diff --git a/apps/www/static/registry/styles/default/accordion.json b/apps/www/static/registry/styles/default/accordion.json
deleted file mode 100644
index 439a0273..00000000
--- a/apps/www/static/registry/styles/default/accordion.json
+++ /dev/null
@@ -1,32 +0,0 @@
-{
-  "name": "accordion",
-  "dependencies": [
-    "radix-vue"
-  ],
-  "registryDependencies": [
-    "utils"
-  ],
-  "files": [
-    {
-      "name": "Accordion.vue",
-      "content": "<script setup lang=\"ts\">\nimport {\n  AccordionRoot,\n  type AccordionRootEmits,\n  type AccordionRootProps,\n} from 'radix-vue'\nimport { useEmitAsProps } from '@/lib/utils'\n\nconst props = defineProps<AccordionRootProps>()\nconst emits = defineEmits<AccordionRootEmits>()\n</script>\n\n<template>\n  <AccordionRoot v-bind=\"{ ...props, ...useEmitAsProps(emits) }\" class=\"accordion\">\n    <slot />\n  </AccordionRoot>\n</template>\n"
-    },
-    {
-      "name": "AccordionContent.vue",
-      "content": "<script setup lang=\"ts\">\nimport { AccordionContent, type AccordionContentProps } from 'radix-vue'\nimport { cn } from '@/lib/utils'\n\nconst props = defineProps<AccordionContentProps & { class?: string }>()\n</script>\n\n<template>\n  <AccordionContent\n    v-bind=\"props\"\n    :class=\"\n      cn(\n        'overflow-hidden text-sm transition-all data-[state=closed]:animate-accordion-up data-[state=open]:animate-accordion-down',\n        props.class,\n      )\n    \"\n  >\n    <div class=\"pb-4 pt-0\">\n      <slot />\n    </div>\n  </AccordionContent>\n</template>\n"
-    },
-    {
-      "name": "AccordionItem.vue",
-      "content": "<script setup lang=\"ts\">\nimport { AccordionItem, type AccordionItemProps } from 'radix-vue'\nimport { cn } from '@/lib/utils'\n\nconst props = defineProps<AccordionItemProps & { class?: string }>()\n</script>\n\n<template>\n  <AccordionItem\n    v-bind=\"props\"\n    :class=\"cn('border-b', props.class ?? '')\"\n  >\n    <slot />\n  </AccordionItem>\n</template>\n"
-    },
-    {
-      "name": "AccordionTrigger.vue",
-      "content": "<script setup lang=\"ts\">\nimport {\n  AccordionHeader,\n  AccordionTrigger,\n  type AccordionTriggerProps,\n} from 'radix-vue'\nimport { ChevronDown } from 'lucide-vue-next'\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 font-medium transition-all hover:underline [&[data-state=open]>svg]:rotate-180',\n          props.class,\n        )\n      \"\n    >\n      <slot />\n      <ChevronDown\n        class=\"h-4 w-4 shrink-0 transition-transform duration-200\"\n      />\n    </AccordionTrigger>\n  </AccordionHeader>\n</template>\n"
-    },
-    {
-      "name": "index.ts",
-      "content": "export { default as Accordion } from './Accordion.vue'\nexport { default as AccordionContent } from './AccordionContent.vue'\nexport { default as AccordionItem } from './AccordionItem.vue'\nexport { default as AccordionTrigger } from './AccordionTrigger.vue'\n"
-    }
-  ],
-  "type": "components:ui"
-}
diff --git a/apps/www/static/registry/styles/default/alert-dialog.json b/apps/www/static/registry/styles/default/alert-dialog.json
deleted file mode 100644
index 71a568cb..00000000
--- a/apps/www/static/registry/styles/default/alert-dialog.json
+++ /dev/null
@@ -1,53 +0,0 @@
-{
-  "name": "alert-dialog",
-  "dependencies": [
-    "radix-vue"
-  ],
-  "registryDependencies": [
-    "utils",
-    "button"
-  ],
-  "files": [
-    {
-      "name": "AlertDialog.vue",
-      "content": "<script setup lang=\"ts\">\nimport { type AlertDialogEmits, type AlertDialogProps, AlertDialogRoot } from 'radix-vue'\nimport { useEmitAsProps } from '@/lib/utils'\n\nconst props = defineProps<AlertDialogProps>()\n\nconst emits = defineEmits<AlertDialogEmits>()\n\nconst emitsAsProps = useEmitAsProps(emits)\n</script>\n\n<template>\n  <AlertDialogRoot v-bind=\"{ ...props, ...emitsAsProps }\">\n    <slot />\n  </AlertDialogRoot>\n</template>\n"
-    },
-    {
-      "name": "AlertDialogAction.vue",
-      "content": "<script setup lang=\"ts\">\nimport { AlertDialogAction, type AlertDialogActionProps } from 'radix-vue'\nimport { cn } from '@/lib/utils'\nimport { buttonVariants } from '@/lib/registry/default/ui/button'\n\nconst props = defineProps<AlertDialogActionProps>()\n</script>\n\n<template>\n  <AlertDialogAction v-bind=\"props\" :class=\"cn(buttonVariants(), $attrs.class ?? '')\">\n    <slot />\n  </AlertDialogAction>\n</template>\n"
-    },
-    {
-      "name": "AlertDialogCancel.vue",
-      "content": "<script setup lang=\"ts\">\nimport { AlertDialogCancel, type AlertDialogCancelProps } from 'radix-vue'\nimport { cn } from '@/lib/utils'\nimport { buttonVariants } from '@/lib/registry/default/ui/button'\n\nconst props = defineProps<AlertDialogCancelProps>()\n</script>\n\n<template>\n  <AlertDialogCancel v-bind=\"props\" :class=\"cn(buttonVariants({ variant: 'outline' }), 'mt-2 sm:mt-0', $attrs.class ?? '')\">\n    <slot />\n  </AlertDialogCancel>\n</template>\n"
-    },
-    {
-      "name": "AlertDialogContent.vue",
-      "content": "<script setup lang=\"ts\">\nimport {\n  AlertDialogContent,\n  type AlertDialogContentEmits,\n  type AlertDialogContentProps,\n  AlertDialogOverlay,\n  AlertDialogPortal,\n} from 'radix-vue'\nimport { cn, useEmitAsProps } from '@/lib/utils'\n\nconst props = defineProps<AlertDialogContentProps & { class?: string }>()\n\nconst emits = defineEmits<AlertDialogContentEmits>()\n\nconst emitsAsProps = useEmitAsProps(emits)\n</script>\n\n<template>\n  <AlertDialogPortal>\n    <AlertDialogOverlay\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    <AlertDialogContent\n      v-bind=\"{ ...props, ...emitsAsProps }\"\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    >\n      <slot />\n    </AlertDialogContent>\n  </AlertDialogPortal>\n</template>\n"
-    },
-    {
-      "name": "AlertDialogDescription.vue",
-      "content": "<script setup lang=\"ts\">\nimport {\n  AlertDialogDescription,\n  type AlertDialogDescriptionProps,\n} from 'radix-vue'\nimport { cn } from '@/lib/utils'\n\nconst props = defineProps<AlertDialogDescriptionProps & { class?: string }>()\n</script>\n\n<template>\n  <AlertDialogDescription\n    :class=\"cn('text-muted-foreground text-sm', props.class)\"\n    :as-child=\"props.asChild\"\n  >\n    <slot />\n  </AlertDialogDescription>\n</template>\n"
-    },
-    {
-      "name": "AlertDialogFooter.vue",
-      "content": "<script setup lang=\"ts\">\nimport { cn } from '@/lib/utils'\n\nconst props = defineProps({\n  class: {\n    type: String,\n    default: '',\n  },\n})\n</script>\n\n<template>\n  <div\n    :class=\"\n      cn(\n        'flex flex-col space-y-2 sm:space-y-0 mt-3.5 sm:flex-row sm:justify-end sm:space-x-2',\n        props.class,\n      )\n    \"\n  >\n    <slot />\n  </div>\n</template>\n"
-    },
-    {
-      "name": "AlertDialogHeader.vue",
-      "content": "<script setup lang=\"ts\">\nimport { cn } from '@/lib/utils'\n\nconst props = defineProps({\n  class: {\n    type: String,\n    default: '',\n  },\n})\n</script>\n\n<template>\n  <div\n    :class=\"cn('flex flex-col space-y-2 text-center sm:text-left', props.class)\"\n  >\n    <slot />\n  </div>\n</template>\n"
-    },
-    {
-      "name": "AlertDialogTitle.vue",
-      "content": "<script setup lang=\"ts\">\nimport { AlertDialogTitle, type AlertDialogTitleProps } from 'radix-vue'\nimport { cn } from '@/lib/utils'\n\nconst props = defineProps<AlertDialogTitleProps & { class?: string }>()\n</script>\n\n<template>\n  <AlertDialogTitle\n    :as-child=\"props.asChild\"\n    :class=\"cn('text-lg text-foreground font-semibold', props.class)\"\n  >\n    <slot />\n  </AlertDialogTitle>\n</template>\n"
-    },
-    {
-      "name": "AlertDialogTrigger.vue",
-      "content": "<script setup lang=\"ts\">\nimport { AlertDialogTrigger, type AlertDialogTriggerProps } from 'radix-vue'\n\nconst props = defineProps<AlertDialogTriggerProps>()\n</script>\n\n<template>\n  <AlertDialogTrigger v-bind=\"props\">\n    <slot />\n  </AlertDialogTrigger>\n</template>\n"
-    },
-    {
-      "name": "index.ts",
-      "content": "export { default as AlertDialog } from './AlertDialog.vue'\nexport { default as AlertDialogTrigger } from './AlertDialogTrigger.vue'\nexport { default as AlertDialogContent } from './AlertDialogContent.vue'\nexport { default as AlertDialogHeader } from './AlertDialogHeader.vue'\nexport { default as AlertDialogTitle } from './AlertDialogTitle.vue'\nexport { default as AlertDialogDescription } from './AlertDialogDescription.vue'\nexport { default as AlertDialogFooter } from './AlertDialogFooter.vue'\nexport { default as AlertDialogAction } from './AlertDialogAction.vue'\nexport { default as AlertDialogCancel } from './AlertDialogCancel.vue'\n"
-    }
-  ],
-  "type": "components:ui"
-}
diff --git a/apps/www/static/registry/styles/default/alert.json b/apps/www/static/registry/styles/default/alert.json
deleted file mode 100644
index cb71706d..00000000
--- a/apps/www/static/registry/styles/default/alert.json
+++ /dev/null
@@ -1,26 +0,0 @@
-{
-  "name": "alert",
-  "dependencies": [],
-  "registryDependencies": [
-    "utils"
-  ],
-  "files": [
-    {
-      "name": "Alert.vue",
-      "content": "<script setup lang=\"ts\">\nimport { alertVariants } from '.'\nimport { cn } from '@/lib/utils'\n\ninterface Props {\n  variant?: NonNullable<Parameters<typeof alertVariants>[0]>['variant']\n  class?: string\n}\n\nconst props = defineProps<Props>()\n</script>\n\n<template>\n  <div :class=\"cn(alertVariants({ variant }), props.class ?? '')\">\n    <slot />\n  </div>\n</template>\n"
-    },
-    {
-      "name": "AlertDescription.vue",
-      "content": "<script setup lang=\"ts\">\nimport { cn } from '@/lib/utils'\n\nconst props = defineProps({\n  class: String,\n})\n</script>\n\n<template>\n  <div :class=\"cn('text-sm [&_p]:leading-relaxed', props.class)\">\n    <slot />\n  </div>\n</template>\n"
-    },
-    {
-      "name": "AlertTitle.vue",
-      "content": "<script setup lang=\"ts\">\nimport { cn } from '@/lib/utils'\n</script>\n\n<template>\n  <h5 :class=\"cn('mb-1 font-medium leading-none tracking-tight', $attrs.class ?? '')\">\n    <slot />\n  </h5>\n</template>\n"
-    },
-    {
-      "name": "index.ts",
-      "content": "import { cva } from 'class-variance-authority'\n\nexport { default as Alert } from './Alert.vue'\nexport { default as AlertTitle } from './AlertTitle.vue'\nexport { default as AlertDescription } from './AlertDescription.vue'\n\nexport const alertVariants = cva(\n  'relative w-full rounded-lg border p-4 [&>svg~*]:pl-7 [&>svg+div]:translate-y-[-3px] [&>svg]:absolute [&>svg]:left-4 [&>svg]:top-4 [&>svg]:text-foreground',\n  {\n    variants: {\n      variant: {\n        default: 'bg-background text-foreground',\n        destructive:\n          'border-destructive/50 text-destructive dark:border-destructive [&>svg]:text-destructive',\n      },\n    },\n    defaultVariants: {\n      variant: 'default',\n    },\n  },\n)\n"
-    }
-  ],
-  "type": "components:ui"
-}
diff --git a/apps/www/static/registry/styles/default/aspect-ratio.json b/apps/www/static/registry/styles/default/aspect-ratio.json
deleted file mode 100644
index faa6759c..00000000
--- a/apps/www/static/registry/styles/default/aspect-ratio.json
+++ /dev/null
@@ -1,18 +0,0 @@
-{
-  "name": "aspect-ratio",
-  "dependencies": [
-    "radix-vue"
-  ],
-  "registryDependencies": [],
-  "files": [
-    {
-      "name": "AspectRatio.vue",
-      "content": "<script setup lang=\"ts\">\nimport { AspectRatio, type AspectRatioProps } from 'radix-vue'\n\nconst props = defineProps<AspectRatioProps>()\n</script>\n\n<template>\n  <AspectRatio v-bind=\"props\">\n    <slot />\n  </AspectRatio>\n</template>\n"
-    },
-    {
-      "name": "index.ts",
-      "content": "export { default as AspectRatio } from './AspectRatio.vue'\n"
-    }
-  ],
-  "type": "components:ui"
-}
diff --git a/apps/www/static/registry/styles/default/avatar.json b/apps/www/static/registry/styles/default/avatar.json
deleted file mode 100644
index a781d79b..00000000
--- a/apps/www/static/registry/styles/default/avatar.json
+++ /dev/null
@@ -1,28 +0,0 @@
-{
-  "name": "avatar",
-  "dependencies": [
-    "radix-vue"
-  ],
-  "registryDependencies": [
-    "utils"
-  ],
-  "files": [
-    {
-      "name": "Avatar.vue",
-      "content": "<script setup lang=\"ts\">\nimport { AvatarRoot } from 'radix-vue'\nimport { avatarVariant } from '.'\nimport { cn } from '@/lib/utils'\n\ninterface Props {\n  size?: NonNullable<Parameters<typeof avatarVariant>[0]>['size']\n  shape?: NonNullable<Parameters<typeof avatarVariant>[0]>['shape']\n  class?: string\n}\n\nconst props = withDefaults(defineProps<Props>(), {\n  size: 'sm',\n  shape: 'circle',\n})\n</script>\n\n<template>\n  <AvatarRoot :class=\"cn(avatarVariant({ size, shape }), props.class)\">\n    <slot />\n  </AvatarRoot>\n</template>\n"
-    },
-    {
-      "name": "AvatarFallback.vue",
-      "content": "<script setup lang=\"ts\">\nimport { AvatarFallback, type AvatarFallbackProps } from 'radix-vue'\n\nconst props = defineProps<AvatarFallbackProps>()\n</script>\n\n<template>\n  <AvatarFallback v-bind=\"props\">\n    <slot />\n  </AvatarFallback>\n</template>\n"
-    },
-    {
-      "name": "AvatarImage.vue",
-      "content": "<script setup lang=\"ts\">\nimport { AvatarImage, type AvatarImageProps } from 'radix-vue'\n\nconst props = defineProps<AvatarImageProps>()\n</script>\n\n<template>\n  <AvatarImage v-bind=\"props\" class=\"h-full w-full object-cover\" />\n</template>\n"
-    },
-    {
-      "name": "index.ts",
-      "content": "import { cva } from 'class-variance-authority'\n\nexport { default as Avatar } from './Avatar.vue'\nexport { default as AvatarImage } from './AvatarImage.vue'\nexport { default as AvatarFallback } from './AvatarFallback.vue'\n\nexport const avatarVariant = cva(\n  'inline-flex items-center justify-center font-normal text-foregorund select-none shrink-0 bg-secondary overflow-hidden',\n  {\n    variants: {\n      size: {\n        sm: 'h-10 w-10 text-xs',\n        base: 'h-16 w-16 text-2xl',\n        lg: 'h-32 w-32 text-5xl',\n      },\n      shape: {\n        circle: 'rounded-full',\n        square: 'rounded-md',\n      },\n    },\n  },\n)\n"
-    }
-  ],
-  "type": "components:ui"
-}
diff --git a/apps/www/static/registry/styles/default/badge.json b/apps/www/static/registry/styles/default/badge.json
deleted file mode 100644
index 542dbe93..00000000
--- a/apps/www/static/registry/styles/default/badge.json
+++ /dev/null
@@ -1,18 +0,0 @@
-{
-  "name": "badge",
-  "dependencies": [],
-  "registryDependencies": [
-    "utils"
-  ],
-  "files": [
-    {
-      "name": "Badge.vue",
-      "content": "<script setup lang=\"ts\">\nimport type { VariantProps } from 'class-variance-authority'\nimport { badgeVariants } from '.'\nimport { cn } from '@/lib/utils'\n\ninterface BadgeVariantProps extends VariantProps<typeof badgeVariants> {}\n\ninterface Props {\n  variant?: BadgeVariantProps['variant']\n}\ndefineProps<Props>()\n</script>\n\n<template>\n  <div :class=\"cn(badgeVariants({ variant }), $attrs.class ?? '')\">\n    <slot />\n  </div>\n</template>\n"
-    },
-    {
-      "name": "index.ts",
-      "content": "import { cva } from 'class-variance-authority'\n\nexport { default as Badge } from './Badge.vue'\n\nexport const badgeVariants = cva(\n  'inline-flex items-center rounded-full border px-2.5 py-0.5 text-xs font-semibold transition-colors focus:outline-none focus:ring-2 focus:ring-ring focus:ring-offset-2',\n  {\n    variants: {\n      variant: {\n        default:\n          'border-transparent bg-primary text-primary-foreground hover:bg-primary/80',\n        secondary:\n          'border-transparent bg-secondary text-secondary-foreground hover:bg-secondary/80',\n        destructive:\n          'border-transparent bg-destructive text-destructive-foreground hover:bg-destructive/80',\n        outline: 'text-foreground',\n      },\n    },\n    defaultVariants: {\n      variant: 'default',\n    },\n  },\n)\n"
-    }
-  ],
-  "type": "components:ui"
-}
diff --git a/apps/www/static/registry/styles/default/button.json b/apps/www/static/registry/styles/default/button.json
deleted file mode 100644
index 56823358..00000000
--- a/apps/www/static/registry/styles/default/button.json
+++ /dev/null
@@ -1,18 +0,0 @@
-{
-  "name": "button",
-  "dependencies": [],
-  "registryDependencies": [
-    "utils"
-  ],
-  "files": [
-    {
-      "name": "Button.vue",
-      "content": "<script setup lang=\"ts\">\nimport { buttonVariants } from '.'\nimport { cn } from '@/lib/utils'\n\ninterface Props {\n  variant?: NonNullable<Parameters<typeof buttonVariants>[0]>['variant']\n  size?: NonNullable<Parameters<typeof buttonVariants>[0]>['size']\n  as?: string\n}\n\nwithDefaults(defineProps<Props>(), {\n  as: 'button',\n})\n</script>\n\n<template>\n  <component\n    :is=\"as\"\n    :class=\"cn(buttonVariants({ variant, size }), $attrs.class ?? '')\"\n  >\n    <slot />\n  </component>\n</template>\n"
-    },
-    {
-      "name": "index.ts",
-      "content": "import { cva } from 'class-variance-authority'\n\nexport { default as Button } from './Button.vue'\n\nexport const buttonVariants = cva(\n  'inline-flex items-center justify-center rounded-md text-sm font-medium ring-offset-background transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:pointer-events-none disabled:opacity-50',\n  {\n    variants: {\n      variant: {\n        default: 'bg-primary text-primary-foreground hover:bg-primary/90',\n        destructive:\n          'bg-destructive text-destructive-foreground hover:bg-destructive/90',\n        outline:\n          'border border-input bg-background hover:bg-accent hover:text-accent-foreground',\n        secondary:\n          'bg-secondary text-secondary-foreground hover:bg-secondary/80',\n        ghost: 'hover:bg-accent hover:text-accent-foreground',\n        link: 'text-primary underline-offset-4 hover:underline',\n      },\n      size: {\n        default: 'h-10 px-4 py-2',\n        sm: 'h-9 rounded-md px-3',\n        lg: 'h-11 rounded-md px-8',\n        icon: 'h-10 w-10',\n      },\n    },\n    defaultVariants: {\n      variant: 'default',\n      size: 'default',\n    },\n  },\n)\n"
-    }
-  ],
-  "type": "components:ui"
-}
diff --git a/apps/www/static/registry/styles/default/calendar.json b/apps/www/static/registry/styles/default/calendar.json
deleted file mode 100644
index 1f54998a..00000000
--- a/apps/www/static/registry/styles/default/calendar.json
+++ /dev/null
@@ -1,18 +0,0 @@
-{
-  "name": "calendar",
-  "dependencies": [],
-  "registryDependencies": [
-    "utils"
-  ],
-  "files": [
-    {
-      "name": "Calendar.vue",
-      "content": "<script setup lang=\"ts\">\nimport { useVModel } from '@vueuse/core'\nimport type { Calendar } from 'v-calendar'\nimport { DatePicker } from 'v-calendar'\nimport { ChevronLeft, ChevronRight } from 'lucide-vue-next'\nimport { computed, nextTick, onMounted, ref } from 'vue'\nimport { buttonVariants } from '../button'\nimport { cn } from '@/lib/utils'\n\nconst props = withDefaults(defineProps< {\n  modelValue?: string | number | Date | Partial<{\n    start: Date\n    end: Date\n  }>\n  modelModifiers?: object\n  columns?: number\n  type?: 'single' | 'range'\n}>(), {\n  type: 'single',\n  columns: 1,\n})\nconst emits = defineEmits<{\n  (e: 'update:modelValue', payload: typeof props.modelValue): void\n}>()\n\nconst modelValue = useVModel(props, 'modelValue', emits, {\n  passive: true,\n})\n\nconst datePicker = ref<InstanceType<typeof DatePicker>>()\n// @ts-expect-error in this current version of v-calendar has the calendaRef instance, which is required to handle arrow nav.\nconst calendarRef = computed<InstanceType<typeof Calendar>>(() => datePicker.value.calendarRef)\n\nfunction handleNav(direction: 'prev' | 'next') {\n  if (!calendarRef.value)\n    return\n\n  if (direction === 'prev')\n    calendarRef.value.movePrev()\n  else calendarRef.value.moveNext()\n}\n\nonMounted(async () => {\n  await nextTick()\n  await nextTick()\n  if (modelValue.value instanceof Date && calendarRef.value)\n    calendarRef.value.focusDate(modelValue.value)\n})\n</script>\n\n<template>\n  <div class=\"relative\">\n    <div class=\"absolute top-3 flex justify-between w-full px-4\">\n      <button :class=\"cn(buttonVariants({ variant: 'outline' }), 'h-7 w-7 bg-transparent p-0 opacity-50 hover:opacity-100')\" @click=\"handleNav('prev')\">\n        <ChevronLeft class=\"w-4 h-4\" />\n      </button>\n      <button :class=\"cn(buttonVariants({ variant: 'outline' }), 'h-7 w-7 bg-transparent p-0 opacity-50 hover:opacity-100')\" @click=\"handleNav('next')\">\n        <ChevronRight class=\"w-4 h-4\" />\n      </button>\n    </div>\n\n    <DatePicker ref=\"datePicker\" v-model=\"modelValue\" :model-modifiers=\"modelModifiers\" class=\"calendar\" trim-weeks :transition=\"'none'\" :columns=\"columns\" />\n  </div>\n</template>\n\n<style lang=\"postcss\">\n.calendar {\n  @apply p-3 text-center;\n}\n.calendar .vc-pane-layout {\n  @apply grid gap-4;\n}\n.calendar .vc-title {\n  @apply text-sm font-medium pointer-events-none;\n}\n.calendar .vc-pane-header-wrapper {\n  @apply hidden;\n}\n.calendar .vc-weeks {\n  @apply mt-4;\n}\n.calendar .vc-weekdays {\n  @apply flex;\n}\n.calendar .vc-weekday {\n  @apply text-muted-foreground rounded-md w-9 font-normal text-[0.8rem];\n}\n.calendar .vc-weeks {\n  @apply w-full space-y-2 flex flex-col [&>_div]:grid [&>_div]:grid-cols-7;\n}\n.calendar .vc-day:has(.vc-highlights) {\n  @apply bg-accent first:rounded-l-md last:rounded-r-md overflow-hidden;\n}\n.calendar .vc-day-content  {\n  @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;\n}\n.calendar .vc-day-content:not(.vc-highlight-content-light) {\n  @apply rounded-md;\n}\n.calendar .is-not-in-month:not(:has(.vc-highlight-content-solid)):not(:has(.vc-highlight-content-light)):not(:has(.vc-highlight-content-outline)),\n.calendar .vc-disabled {\n  @apply text-muted-foreground opacity-50;\n}\n.calendar .vc-highlight-content-solid, .calendar .vc-highlight-content-outline {\n  @apply bg-primary text-primary-foreground hover:bg-primary hover:text-primary-foreground focus:bg-primary focus:text-primary-foreground;\n}\n.calendar .vc-highlight-content-light {\n  @apply bg-accent text-accent-foreground;\n}\n</style>\n"
-    },
-    {
-      "name": "index.ts",
-      "content": "export { default as Calendar } from './Calendar.vue'\n"
-    }
-  ],
-  "type": "components:ui"
-}
diff --git a/apps/www/static/registry/styles/default/card.json b/apps/www/static/registry/styles/default/card.json
deleted file mode 100644
index 90590800..00000000
--- a/apps/www/static/registry/styles/default/card.json
+++ /dev/null
@@ -1,38 +0,0 @@
-{
-  "name": "card",
-  "dependencies": [],
-  "registryDependencies": [
-    "utils"
-  ],
-  "files": [
-    {
-      "name": "Card.vue",
-      "content": "<script setup lang=\"ts\">\nimport { cn } from '@/lib/utils'\n\nconst props = defineProps({\n  class: {\n    type: String,\n    default: '',\n  },\n})\n</script>\n\n<template>\n  <div\n    :class=\"\n      cn(\n        'rounded-lg border bg-card text-card-foreground shadow-sm',\n        props.class,\n      )\n    \"\n  >\n    <slot />\n  </div>\n</template>\n"
-    },
-    {
-      "name": "CardContent.vue",
-      "content": "<script setup lang=\"ts\">\nimport { cn } from '@/lib/utils'\n\nconst props = defineProps({\n  class: {\n    type: String,\n    default: '',\n  },\n})\n</script>\n\n<template>\n  <div :class=\"cn('p-6 pt-0', props.class)\">\n    <slot />\n  </div>\n</template>\n"
-    },
-    {
-      "name": "CardDescription.vue",
-      "content": "<script setup lang=\"ts\">\nimport { cn } from '@/lib/utils'\n\nconst props = defineProps({\n  class: {\n    type: String,\n    default: '',\n  },\n})\n</script>\n\n<template>\n  <p :class=\"cn('text-sm text-muted-foreground', props.class)\">\n    <slot />\n  </p>\n</template>\n"
-    },
-    {
-      "name": "CardFooter.vue",
-      "content": "<script setup lang=\"ts\">\nimport { cn } from '@/lib/utils'\n\nconst props = defineProps({\n  class: {\n    type: String,\n    default: '',\n  },\n})\n</script>\n\n<template>\n  <div :class=\"cn('p-6 pt-0', props.class)\">\n    <slot />\n  </div>\n</template>\n"
-    },
-    {
-      "name": "CardHeader.vue",
-      "content": "<script setup lang=\"ts\">\nimport { cn } from '@/lib/utils'\n\nconst props = defineProps({\n  class: {\n    type: String,\n    default: '',\n  },\n})\n</script>\n\n<template>\n  <div :class=\"cn('flex flex-col space-y-1.5 p-6', props.class)\">\n    <slot />\n  </div>\n</template>\n"
-    },
-    {
-      "name": "CardTitle.vue",
-      "content": "<script setup lang=\"ts\">\nimport { cn } from '@/lib/utils'\n\nconst props = defineProps({\n  class: {\n    type: String,\n    default: '',\n  },\n})\n</script>\n\n<template>\n  <h3\n    :class=\"\n      cn('text-2xl font-semibold leading-none tracking-tighter', props.class)\n    \"\n  >\n    <slot />\n  </h3>\n</template>\n"
-    },
-    {
-      "name": "index.ts",
-      "content": "export { default as Card } from './Card.vue'\nexport { default as CardHeader } from './CardHeader.vue'\nexport { default as CardTitle } from './CardTitle.vue'\nexport { default as CardDescription } from './CardDescription.vue'\nexport { default as CardContent } from './CardContent.vue'\nexport { default as CardFooter } from './CardFooter.vue'\n"
-    }
-  ],
-  "type": "components:ui"
-}
diff --git a/apps/www/static/registry/styles/default/checkbox.json b/apps/www/static/registry/styles/default/checkbox.json
deleted file mode 100644
index 3eeed53d..00000000
--- a/apps/www/static/registry/styles/default/checkbox.json
+++ /dev/null
@@ -1,20 +0,0 @@
-{
-  "name": "checkbox",
-  "dependencies": [
-    "radix-vue"
-  ],
-  "registryDependencies": [
-    "utils"
-  ],
-  "files": [
-    {
-      "name": "Checkbox.vue",
-      "content": "<script setup lang=\"ts\">\nimport type { CheckboxRootEmits, CheckboxRootProps } from 'radix-vue'\nimport { CheckboxIndicator, CheckboxRoot } from 'radix-vue'\nimport { Check } from 'lucide-vue-next'\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      <Check class=\"h-4 w-4\" />\n    </CheckboxIndicator>\n  </CheckboxRoot>\n</template>\n"
-    },
-    {
-      "name": "index.ts",
-      "content": "export { default as Checkbox } from './Checkbox.vue'\n"
-    }
-  ],
-  "type": "components:ui"
-}
diff --git a/apps/www/static/registry/styles/default/collapsible.json b/apps/www/static/registry/styles/default/collapsible.json
deleted file mode 100644
index 72149eaf..00000000
--- a/apps/www/static/registry/styles/default/collapsible.json
+++ /dev/null
@@ -1,28 +0,0 @@
-{
-  "name": "collapsible",
-  "dependencies": [
-    "radix-vue"
-  ],
-  "registryDependencies": [
-    "utils"
-  ],
-  "files": [
-    {
-      "name": "Collapsible.vue",
-      "content": "<script setup lang=\"ts\">\nimport { CollapsibleRoot } from 'radix-vue'\nimport type { CollapsibleRootEmits, CollapsibleRootProps } from 'radix-vue'\nimport { useEmitAsProps } from '@/lib/utils'\n\nconst props = defineProps<CollapsibleRootProps>()\nconst emits = defineEmits<CollapsibleRootEmits>()\n</script>\n\n<template>\n  <CollapsibleRoot v-slot=\"{ open }\" v-bind=\"{ ...props, ...useEmitAsProps(emits) }\">\n    <slot :open=\"open\" />\n  </CollapsibleRoot>\n</template>\n"
-    },
-    {
-      "name": "CollapsibleContent.vue",
-      "content": "<script setup lang=\"ts\">\nimport { CollapsibleContent, type CollapsibleContentProps } from 'radix-vue'\n\nconst props = defineProps<CollapsibleContentProps>()\n</script>\n\n<template>\n  <CollapsibleContent v-bind=\"props\">\n    <slot />\n  </CollapsibleContent>\n</template>\n"
-    },
-    {
-      "name": "CollapsibleTrigger.vue",
-      "content": "<script setup lang=\"ts\">\nimport { CollapsibleTrigger, type CollapsibleTriggerProps } from 'radix-vue'\n\nconst props = defineProps<CollapsibleTriggerProps>()\n</script>\n\n<template>\n  <CollapsibleTrigger v-bind=\"props\">\n    <slot />\n  </CollapsibleTrigger>\n</template>\n"
-    },
-    {
-      "name": "index.ts",
-      "content": "export { default as Collapsible } from './Collapsible.vue'\nexport { default as CollapsibleTrigger } from './CollapsibleTrigger.vue'\nexport { default as CollapsibleContent } from './CollapsibleContent.vue'\n"
-    }
-  ],
-  "type": "components:ui"
-}
diff --git a/apps/www/static/registry/styles/default/context-menu.json b/apps/www/static/registry/styles/default/context-menu.json
deleted file mode 100644
index f8e3d87f..00000000
--- a/apps/www/static/registry/styles/default/context-menu.json
+++ /dev/null
@@ -1,76 +0,0 @@
-{
-  "name": "context-menu",
-  "dependencies": [
-    "radix-vue"
-  ],
-  "registryDependencies": [
-    "utils"
-  ],
-  "files": [
-    {
-      "name": "ContextMenu.vue",
-      "content": "<script setup lang=\"ts\">\nimport { ContextMenuRoot } from 'radix-vue'\nimport type { ContextMenuRootEmits, ContextMenuRootProps } from 'radix-vue'\nimport { useEmitAsProps } from '@/lib/utils'\n\nconst props = defineProps<ContextMenuRootProps>()\nconst emits = defineEmits<ContextMenuRootEmits>()\n</script>\n\n<template>\n  <ContextMenuRoot v-bind=\"{ ...props, ...useEmitAsProps(emits) }\">\n    <slot />\n  </ContextMenuRoot>\n</template>\n"
-    },
-    {
-      "name": "ContextMenuCheckboxItem.vue",
-      "content": "<script setup lang=\"ts\">\nimport {\n  ContextMenuCheckboxItem,\n  type ContextMenuCheckboxItemEmits,\n  type ContextMenuCheckboxItemProps,\n  ContextMenuItemIndicator,\n} from 'radix-vue'\nimport { Check } from 'lucide-vue-next'\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        <Check class=\"h-4 h-w\" />\n      </ContextMenuItemIndicator>\n    </span>\n    <slot />\n  </ContextMenuCheckboxItem>\n</template>\n"
-    },
-    {
-      "name": "ContextMenuContent.vue",
-      "content": "<script setup lang=\"ts\">\nimport {\n  ContextMenuContent,\n  type ContextMenuContentEmits,\n  type ContextMenuContentProps,\n  ContextMenuPortal,\n} from 'radix-vue'\nimport { cn, useEmitAsProps } from '@/lib/utils'\n\nconst props = defineProps<ContextMenuContentProps & { class?: string }>()\nconst emits = defineEmits<ContextMenuContentEmits>()\n</script>\n\n<template>\n  <ContextMenuPortal>\n    <ContextMenuContent\n      :align-offset=\"props.alignOffset\"\n      :class=\"[\n        cn(\n          'z-50 min-w-[8rem] overflow-hidden rounded-md border bg-popover p-1 text-popover-foreground shadow-md animate-in fade-in-80 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-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2',\n          props.class,\n        ),\n      ]\"\n      v-bind=\"{ ...props, ...useEmitAsProps(emits) }\"\n    >\n      <slot />\n    </ContextMenuContent>\n  </ContextMenuPortal>\n</template>\n"
-    },
-    {
-      "name": "ContextMenuGroup.vue",
-      "content": "<script setup lang=\"ts\">\nimport { ContextMenuGroup, type ContextMenuGroupProps } from 'radix-vue'\n\nconst props = defineProps<ContextMenuGroupProps>()\n</script>\n\n<template>\n  <ContextMenuGroup v-bind=\"props\">\n    <slot />\n  </ContextMenuGroup>\n</template>\n"
-    },
-    {
-      "name": "ContextMenuItem.vue",
-      "content": "<script setup lang=\"ts\">\nimport {\n  ContextMenuItem,\n  type ContextMenuItemEmits,\n  type ContextMenuItemProps,\n} from 'radix-vue'\nimport { cn, useEmitAsProps } from '@/lib/utils'\n\nconst props = defineProps<ContextMenuItemProps & { class?: string; inset?: boolean }>()\nconst emits = defineEmits<ContextMenuItemEmits>()\n</script>\n\n<template>\n  <ContextMenuItem\n    v-bind=\"{ ...props, ...useEmitAsProps(emits) }\"\n    :class=\"[\n      cn(\n        'relative flex cursor-default select-none items-center rounded-sm px-2 py-1.5 text-sm outline-none focus:bg-accent focus:text-accent-foreground data-[disabled]:pointer-events-none data-[disabled]:opacity-50',\n        inset && 'pl-8',\n        props.class,\n      ),\n    ]\"\n  >\n    <slot />\n  </ContextMenuItem>\n</template>\n"
-    },
-    {
-      "name": "ContextMenuLabel.vue",
-      "content": "<script setup lang=\"ts\">\nimport { ContextMenuLabel, type ContextMenuLabelProps } from 'radix-vue'\nimport { cn } from '@/lib/utils'\n\nconst props = defineProps<ContextMenuLabelProps & { class?: string; inset?: boolean }>()\n</script>\n\n<template>\n  <ContextMenuLabel\n    v-bind=\"props\"\n    :class=\"\n      cn('px-2 py-1.5 text-sm font-semibold text-foreground',\n         inset && 'pl-8', props.class ?? '',\n      )\"\n  >\n    <slot />\n  </ContextMenuLabel>\n</template>\n"
-    },
-    {
-      "name": "ContextMenuPortal.vue",
-      "content": "<script setup lang=\"ts\">\nimport { ContextMenuPortal, type ContextMenuPortalProps } from 'radix-vue'\n\nconst props = defineProps<ContextMenuPortalProps>()\n</script>\n\n<template>\n  <ContextMenuPortal v-bind=\"props\">\n    <slot />\n  </ContextMenuPortal>\n</template>\n"
-    },
-    {
-      "name": "ContextMenuRadioGroup.vue",
-      "content": "<script setup lang=\"ts\">\nimport {\n  ContextMenuRadioGroup,\n  type ContextMenuRadioGroupEmits,\n  type ContextMenuRadioGroupProps,\n} from 'radix-vue'\n\nconst props = defineProps<ContextMenuRadioGroupProps>()\n\nconst emits = defineEmits<ContextMenuRadioGroupEmits>()\n</script>\n\n<template>\n  <ContextMenuRadioGroup\n    v-bind=\"props\"\n    @update:model-value=\"emits('update:modelValue', $event)\"\n  >\n    <slot />\n  </ContextMenuRadioGroup>\n</template>\n"
-    },
-    {
-      "name": "ContextMenuRadioItem.vue",
-      "content": "<script setup lang=\"ts\">\nimport {\n  ContextMenuItemIndicator,\n  ContextMenuRadioItem,\n  type ContextMenuRadioItemEmits,\n  type ContextMenuRadioItemProps,\n} from 'radix-vue'\nimport { Circle } from 'lucide-vue-next'\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        <Circle class=\"h-2 w-2 fill-current\" />\n      </ContextMenuItemIndicator>\n    </span>\n    <slot />\n  </ContextMenuRadioItem>\n</template>\n"
-    },
-    {
-      "name": "ContextMenuSeparator.vue",
-      "content": "<script setup lang=\"ts\">\nimport {\n  ContextMenuSeparator,\n  type ContextMenuSeparatorProps,\n} from 'radix-vue'\nimport { cn } from '@/lib/utils'\n\nconst props = defineProps<ContextMenuSeparatorProps>()\n</script>\n\n<template>\n  <ContextMenuSeparator v-bind=\"props\" :class=\"cn('-mx-1 my-1 h-px bg-border', $attrs.class ?? '')\" />\n</template>\n"
-    },
-    {
-      "name": "ContextMenuShortcut.vue",
-      "content": "<script setup lang=\"ts\">\nimport { cn } from '@/lib/utils'\n</script>\n\n<template>\n  <span :class=\"cn('ml-auto text-xs tracking-widest text-muted-foreground', $attrs.class ?? '')\">\n    <slot />\n  </span>\n</template>\n"
-    },
-    {
-      "name": "ContextMenuSub.vue",
-      "content": "<script setup lang=\"ts\">\nimport {\n  ContextMenuSub,\n  type ContextMenuSubEmits,\n  type ContextMenuSubProps,\n} from 'radix-vue'\n\nconst props = defineProps<ContextMenuSubProps>()\n\nconst emits = defineEmits<ContextMenuSubEmits>()\n</script>\n\n<template>\n  <ContextMenuSub v-bind=\"props\" @update:open=\"emits('update:open', $event)\">\n    <slot />\n  </ContextMenuSub>\n</template>\n"
-    },
-    {
-      "name": "ContextMenuSubContent.vue",
-      "content": "<script setup lang=\"ts\">\nimport {\n  ContextMenuSubContent,\n  type DropdownMenuSubContentEmits,\n  type DropdownMenuSubContentProps,\n} from 'radix-vue'\nimport { cn, useEmitAsProps } from '@/lib/utils'\n\nconst props = defineProps<DropdownMenuSubContentProps & { class?: string }>()\nconst emits = defineEmits<DropdownMenuSubContentEmits>()\n</script>\n\n<template>\n  <ContextMenuSubContent\n    v-bind=\"{ ...props, ...useEmitAsProps(emits) }\"\n    :class=\"\n      cn(\n        'z-50 min-w-[8rem] overflow-hidden rounded-md border bg-popover p-1 text-popover-foreground shadow-md 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-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2',\n        props.class,\n      )\n    \"\n  >\n    <slot />\n  </ContextMenuSubContent>\n</template>\n"
-    },
-    {
-      "name": "ContextMenuSubTrigger.vue",
-      "content": "<script setup lang=\"ts\">\nimport {\n  ContextMenuSubTrigger,\n  type ContextMenuSubTriggerProps,\n} from 'radix-vue'\nimport { ChevronRight } from 'lucide-vue-next'\nimport { cn } from '@/lib/utils'\n\nconst props = defineProps<ContextMenuSubTriggerProps & { class?: string; inset?: boolean }>()\n</script>\n\n<template>\n  <ContextMenuSubTrigger\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 focus:text-accent-foreground data-[state=open]:bg-accent data-[state=open]:text-accent-foreground',\n        inset && 'pl-8',\n        props.class,\n      ),\n    ]\"\n  >\n    <slot />\n    <ChevronRight class=\"ml-auto h-4 w-4\" />\n  </ContextMenuSubTrigger>\n</template>\n"
-    },
-    {
-      "name": "ContextMenuTrigger.vue",
-      "content": "<script setup lang=\"ts\">\nimport { ContextMenuTrigger, type ContextMenuTriggerProps } from 'radix-vue'\n\nconst props = defineProps<ContextMenuTriggerProps>()\n</script>\n\n<template>\n  <ContextMenuTrigger v-bind=\"props\">\n    <slot />\n  </ContextMenuTrigger>\n</template>\n"
-    },
-    {
-      "name": "index.ts",
-      "content": "export { default as ContextMenu } from './ContextMenu.vue'\nexport { default as ContextMenuTrigger } from './ContextMenuTrigger.vue'\nexport { default as ContextMenuContent } from './ContextMenuContent.vue'\nexport { default as ContextMenuGroup } from './ContextMenuGroup.vue'\nexport { default as ContextMenuRadioGroup } from './ContextMenuRadioGroup.vue'\nexport { default as ContextMenuItem } from './ContextMenuItem.vue'\nexport { default as ContextMenuCheckboxItem } from './ContextMenuCheckboxItem.vue'\nexport { default as ContextMenuRadioItem } from './ContextMenuRadioItem.vue'\nexport { default as ContextMenuShortcut } from './ContextMenuShortcut.vue'\nexport { default as ContextMenuSeparator } from './ContextMenuSeparator.vue'\nexport { default as ContextMenuLabel } from './ContextMenuLabel.vue'\nexport { default as ContextMenuSub } from './ContextMenuSub.vue'\nexport { default as ContextMenuSubTrigger } from './ContextMenuSubTrigger.vue'\nexport { default as ContextMenuSubContent } from './ContextMenuSubContent.vue'\n"
-    }
-  ],
-  "type": "components:ui"
-}
diff --git a/apps/www/static/registry/styles/default/dialog.json b/apps/www/static/registry/styles/default/dialog.json
deleted file mode 100644
index fdcada8d..00000000
--- a/apps/www/static/registry/styles/default/dialog.json
+++ /dev/null
@@ -1,44 +0,0 @@
-{
-  "name": "dialog",
-  "dependencies": [
-    "radix-vue"
-  ],
-  "registryDependencies": [
-    "utils"
-  ],
-  "files": [
-    {
-      "name": "Dialog.vue",
-      "content": "<script setup lang=\"ts\">\nimport { DialogRoot } from 'radix-vue'\n</script>\n\n<template>\n  <DialogRoot>\n    <slot />\n  </DialogRoot>\n</template>\n"
-    },
-    {
-      "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 { X } from 'lucide-vue-next'\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-white/80 dark: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        <X class=\"w-4 h-4\" />\n        <span className=\"sr-only\">Close</span>\n      </DialogClose>\n    </DialogContent>\n  </DialogPortal>\n</template>\n"
-    },
-    {
-      "name": "DialogDescription.vue",
-      "content": "<script setup lang=\"ts\">\nimport { DialogDescription, type DialogDescriptionProps } from 'radix-vue'\nimport { cn } from '@/lib/utils'\n\nconst props = defineProps<DialogDescriptionProps & { class?: string }>()\n</script>\n\n<template>\n  <DialogDescription\n    v-bind=\"props\"\n    :class=\"cn('text-muted-foreground text-sm', props.class)\"\n  >\n    <slot />\n  </DialogDescription>\n</template>\n"
-    },
-    {
-      "name": "DialogFooter.vue",
-      "content": "<script setup lang=\"ts\">\nimport { cn } from '@/lib/utils'\n\ninterface DialogFooterProps {\n  class?: string\n}\n\nconst props = defineProps<DialogFooterProps>()\n</script>\n\n<template>\n  <div\n    :class=\"\n      cn(\n        'flex flex-col space-y-2 sm:space-y-0 mt-1.5 sm:flex-row sm:justify-end sm:space-x-2',\n        props.class,\n      )\n    \"\n  >\n    <slot />\n  </div>\n</template>\n"
-    },
-    {
-      "name": "DialogHeader.vue",
-      "content": "<script setup lang=\"ts\">\nimport { cn } from '@/lib/utils'\n\ninterface DialogHeaderProps {\n  class?: string\n}\n\nconst props = defineProps<DialogHeaderProps>()\n</script>\n\n<template>\n  <div\n    :class=\"cn('flex flex-col space-y-2 text-center sm:text-left', props.class)\"\n  >\n    <slot />\n  </div>\n</template>\n"
-    },
-    {
-      "name": "DialogTitle.vue",
-      "content": "<script setup lang=\"ts\">\nimport { DialogTitle, type DialogTitleProps } from 'radix-vue'\nimport { cn } from '@/lib/utils'\n\nconst props = defineProps<DialogTitleProps & { class?: string }>()\n</script>\n\n<template>\n  <DialogTitle\n    v-bind=\"props\"\n    :class=\"\n      cn(\n        'text-lg text-foreground font-semibold leading-none tracking-tight',\n        props.class,\n      )\n    \"\n  >\n    <slot />\n  </DialogTitle>\n</template>\n"
-    },
-    {
-      "name": "DialogTrigger.vue",
-      "content": "<script setup lang=\"ts\">\nimport { DialogTrigger, type DialogTriggerProps } from 'radix-vue'\n\nconst props = defineProps<DialogTriggerProps>()\n</script>\n\n<template>\n  <DialogTrigger v-bind=\"props\">\n    <slot />\n  </DialogTrigger>\n</template>\n"
-    },
-    {
-      "name": "index.ts",
-      "content": "export { default as Dialog } from './Dialog.vue'\nexport { default as DialogTrigger } from './DialogTrigger.vue'\nexport { default as DialogHeader } from './DialogHeader.vue'\nexport { default as DialogTitle } from './DialogTitle.vue'\nexport { default as DialogDescription } from './DialogDescription.vue'\nexport { default as DialogContent } from './DialogContent.vue'\nexport { default as DialogFooter } from './DialogFooter.vue'\n"
-    }
-  ],
-  "type": "components:ui"
-}
diff --git a/apps/www/static/registry/styles/default/dropdown-menu.json b/apps/www/static/registry/styles/default/dropdown-menu.json
deleted file mode 100644
index 6a7e0285..00000000
--- a/apps/www/static/registry/styles/default/dropdown-menu.json
+++ /dev/null
@@ -1,72 +0,0 @@
-{
-  "name": "dropdown-menu",
-  "dependencies": [
-    "radix-vue"
-  ],
-  "registryDependencies": [
-    "utils"
-  ],
-  "files": [
-    {
-      "name": "DropdownMenu.vue",
-      "content": "<script setup lang=\"ts\">\nimport { DropdownMenuRoot, type DropdownMenuRootEmits, type DropdownMenuRootProps } from 'radix-vue'\nimport { useEmitAsProps } from '@/lib/utils'\n\nconst props = defineProps<DropdownMenuRootProps>()\nconst emits = defineEmits<DropdownMenuRootEmits>()\n</script>\n\n<template>\n  <DropdownMenuRoot v-bind=\"{ ...props, ...useEmitAsProps(emits) }\">\n    <slot />\n  </DropdownMenuRoot>\n</template>\n"
-    },
-    {
-      "name": "DropdownMenuCheckboxItem.vue",
-      "content": "<script setup lang=\"ts\">\nimport {\n  DropdownMenuCheckboxItem,\n  type DropdownMenuCheckboxItemEmits,\n  type DropdownMenuCheckboxItemProps,\n  DropdownMenuItemIndicator,\n} from 'radix-vue'\nimport { Check } from 'lucide-vue-next'\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        <Check class=\"w-4 h-4\" />\n      </DropdownMenuItemIndicator>\n    </span>\n    <slot />\n  </DropdownMenuCheckboxItem>\n</template>\n"
-    },
-    {
-      "name": "DropdownMenuContent.vue",
-      "content": "<script setup lang=\"ts\">\nimport {\n  DropdownMenuContent,\n  type DropdownMenuContentProps,\n  DropdownMenuPortal,\n} from 'radix-vue'\nimport { cn } from '@/lib/utils'\n\nconst props = withDefaults(\n  defineProps<DropdownMenuContentProps & { class?: string }>(),\n  {\n    sideOffset: 4,\n  },\n)\n</script>\n\n<template>\n  <DropdownMenuPortal>\n    <DropdownMenuContent\n      :loop=\"props.loop\"\n      :as-child=\"props.asChild\"\n      :side-offset=\"props.sideOffset\"\n      :side=\"props.side\"\n      :align=\"props.align\"\n      :align-offset=\"props.alignOffset\"\n      :class=\"[\n        cn(\n          'z-50 min-w-[8rem] overflow-hidden rounded-md border bg-popover p-1 text-popover-foreground shadow-md 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-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2',\n          props.class,\n        ),\n      ]\"\n    >\n      <slot />\n    </DropdownMenuContent>\n  </DropdownMenuPortal>\n</template>\n"
-    },
-    {
-      "name": "DropdownMenuGroup.vue",
-      "content": "<script setup lang=\"ts\">\nimport { DropdownMenuGroup, type DropdownMenuGroupProps } from 'radix-vue'\n\nconst props = defineProps<DropdownMenuGroupProps>()\n</script>\n\n<template>\n  <DropdownMenuGroup v-bind=\"props\">\n    <slot />\n  </DropdownMenuGroup>\n</template>\n"
-    },
-    {
-      "name": "DropdownMenuItem.vue",
-      "content": "<script setup lang=\"ts\">\nimport { DropdownMenuItem, type DropdownMenuItemProps } from 'radix-vue'\nimport { cn } from '@/lib/utils'\n\nconst props = defineProps<DropdownMenuItemProps & { inset?: boolean; class?: string }>()\n</script>\n\n<template>\n  <DropdownMenuItem\n    v-bind=\"props\"\n    :class=\"[\n      cn(\n        'relative flex cursor-default select-none items-center rounded-sm px-2 py-1.5 text-sm outline-none transition-colors focus:bg-accent focus:text-accent-foreground data-[disabled]:pointer-events-none data-[disabled]:opacity-50',\n        inset && 'pl-8',\n        props.class,\n      ),\n    ]\"\n  >\n    <slot />\n  </DropdownMenuItem>\n</template>\n"
-    },
-    {
-      "name": "DropdownMenuLabel.vue",
-      "content": "<script setup lang=\"ts\">\nimport { DropdownMenuLabel, type DropdownMenuLabelProps } from 'radix-vue'\nimport { cn } from '@/lib/utils'\n\nconst props = defineProps<DropdownMenuLabelProps & {\n  inset?: boolean\n  class?: string\n}>()\n</script>\n\n<template>\n  <DropdownMenuLabel\n    v-bind=\"props\"\n    :class=\"\n      cn('px-2 py-1.5 text-sm font-semibold',\n         inset && 'pl-8', props.class)\"\n  >\n    <slot />\n  </DropdownMenuLabel>\n</template>\n"
-    },
-    {
-      "name": "DropdownMenuRadioGroup.vue",
-      "content": "<script setup lang=\"ts\">\nimport {\n  DropdownMenuRadioGroup,\n  type DropdownMenuRadioGroupEmits,\n  type DropdownMenuRadioGroupProps,\n} from 'radix-vue'\n\nconst props = defineProps<DropdownMenuRadioGroupProps>()\n\nconst emits = defineEmits<DropdownMenuRadioGroupEmits>()\n</script>\n\n<template>\n  <DropdownMenuRadioGroup\n    v-bind=\"props\"\n    @update:model-value=\"emits('update:modelValue', $event)\"\n  >\n    <slot />\n  </DropdownMenuRadioGroup>\n</template>\n"
-    },
-    {
-      "name": "DropdownMenuRadioItem.vue",
-      "content": "<script setup lang=\"ts\">\nimport {\n  DropdownMenuItemIndicator,\n  DropdownMenuRadioItem,\n  type DropdownMenuRadioItemEmits,\n  type DropdownMenuRadioItemProps,\n} from 'radix-vue'\nimport { Circle } from 'lucide-vue-next'\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 className=\"absolute left-2 flex h-3.5 w-3.5 items-center justify-center\">\n\n      <DropdownMenuItemIndicator>\n        <Circle class=\"h-2 w-2 fill-current\" />\n      </DropdownMenuItemIndicator>\n    </span>\n    <slot />\n  </DropdownMenuRadioItem>\n</template>\n"
-    },
-    {
-      "name": "DropdownMenuSeparator.vue",
-      "content": "<script setup lang=\"ts\">\nimport {\n  DropdownMenuSeparator,\n  type DropdownMenuSeparatorProps,\n} from 'radix-vue'\n\nconst props = defineProps<DropdownMenuSeparatorProps>()\n</script>\n\n<template>\n  <DropdownMenuSeparator v-bind=\"props\" class=\"-mx-1 my-1 h-px bg-muted\" />\n</template>\n"
-    },
-    {
-      "name": "DropdownMenuShortcut.vue",
-      "content": "<script setup lang=\"ts\">\nimport { cn } from '@/lib/utils'\n</script>\n\n<template>\n  <span :class=\"cn('ml-auto text-xs tracking-widest opacity-60', $attrs.class ?? '')\">\n    <slot />\n  </span>\n</template>\n"
-    },
-    {
-      "name": "DropdownMenuSub.vue",
-      "content": "<script setup lang=\"ts\">\nimport {\n  DropdownMenuSub,\n  type DropdownMenuSubEmits,\n  type DropdownMenuSubProps,\n} from 'radix-vue'\n\nconst props = defineProps<DropdownMenuSubProps>()\n\nconst emits = defineEmits<DropdownMenuSubEmits>()\n</script>\n\n<template>\n  <DropdownMenuSub v-bind=\"props\" @update:open=\"emits('update:open', $event)\">\n    <slot />\n  </DropdownMenuSub>\n</template>\n"
-    },
-    {
-      "name": "DropdownMenuSubContent.vue",
-      "content": "<script setup lang=\"ts\">\nimport {\n  DropdownMenuSubContent,\n  type DropdownMenuSubContentEmits,\n  type DropdownMenuSubContentProps,\n} from 'radix-vue'\nimport { cn, useEmitAsProps } from '@/lib/utils'\n\nconst props = defineProps<DropdownMenuSubContentProps>()\nconst emits = defineEmits<DropdownMenuSubContentEmits>()\n</script>\n\n<template>\n  <DropdownMenuSubContent\n    v-bind=\"{ ...props, ...useEmitAsProps(emits) }\"\n    :class=\"cn('z-50 min-w-[8rem] overflow-hidden rounded-md border bg-popover p-1 text-popover-foreground shadow-lg 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-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2', $attrs.class ?? '')\"\n  >\n    <slot />\n  </DropdownMenuSubContent>\n</template>\n"
-    },
-    {
-      "name": "DropdownMenuSubTrigger.vue",
-      "content": "<script setup lang=\"ts\">\nimport {\n  DropdownMenuSubTrigger,\n  type DropdownMenuSubTriggerProps,\n} from 'radix-vue'\nimport { ChevronRight } from 'lucide-vue-next'\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    <ChevronRight class=\"ml-auto h-4 w-4\" />\n  </DropdownMenuSubTrigger>\n</template>\n"
-    },
-    {
-      "name": "DropdownMenuTrigger.vue",
-      "content": "<script setup lang=\"ts\">\nimport { DropdownMenuTrigger, type DropdownMenuTriggerProps } from 'radix-vue'\n\nconst props = defineProps<DropdownMenuTriggerProps>()\n</script>\n\n<template>\n  <DropdownMenuTrigger class=\"outline-none\" v-bind=\"props\">\n    <slot />\n  </DropdownMenuTrigger>\n</template>\n"
-    },
-    {
-      "name": "index.ts",
-      "content": "export { DropdownMenuPortal } from 'radix-vue'\n\nexport { default as DropdownMenu } from './DropdownMenu.vue'\nexport { default as DropdownMenuTrigger } from './DropdownMenuTrigger.vue'\nexport { default as DropdownMenuContent } from './DropdownMenuContent.vue'\nexport { default as DropdownMenuGroup } from './DropdownMenuGroup.vue'\nexport { default as DropdownMenuRadioGroup } from './DropdownMenuRadioGroup.vue'\nexport { default as DropdownMenuItem } from './DropdownMenuItem.vue'\nexport { default as DropdownMenuCheckboxItem } from './DropdownMenuCheckboxItem.vue'\nexport { default as DropdownMenuRadioItem } from './DropdownMenuRadioItem.vue'\nexport { default as DropdownMenuShortcut } from './DropdownMenuShortcut.vue'\nexport { default as DropdownMenuSeparator } from './DropdownMenuSeparator.vue'\nexport { default as DropdownMenuLabel } from './DropdownMenuLabel.vue'\nexport { default as DropdownMenuSub } from './DropdownMenuSub.vue'\nexport { default as DropdownMenuSubTrigger } from './DropdownMenuSubTrigger.vue'\nexport { default as DropdownMenuSubContent } from './DropdownMenuSubContent.vue'\n"
-    }
-  ],
-  "type": "components:ui"
-}
diff --git a/apps/www/static/registry/styles/default/hover-card.json b/apps/www/static/registry/styles/default/hover-card.json
deleted file mode 100644
index 5e606403..00000000
--- a/apps/www/static/registry/styles/default/hover-card.json
+++ /dev/null
@@ -1,28 +0,0 @@
-{
-  "name": "hover-card",
-  "dependencies": [
-    "radix-vue"
-  ],
-  "registryDependencies": [
-    "utils"
-  ],
-  "files": [
-    {
-      "name": "HoverCard.vue",
-      "content": "<script setup lang=\"ts\">\nimport { HoverCardRoot, type HoverCardRootProps } from 'radix-vue'\n\nconst props = defineProps<HoverCardRootProps>()\n</script>\n\n<template>\n  <HoverCardRoot v-bind=\"props\">\n    <slot />\n  </HoverCardRoot>\n</template>\n"
-    },
-    {
-      "name": "HoverCardContent.vue",
-      "content": "<script setup lang=\"ts\">\nimport {\n  HoverCardContent,\n  type HoverCardContentProps,\n  HoverCardPortal,\n} from 'radix-vue'\nimport { cn } from '@/lib/utils'\n\nconst props = withDefaults(\n  defineProps<HoverCardContentProps & { class?: string }>(),\n  {\n    sideOffset: 4,\n  },\n)\n</script>\n\n<template>\n  <HoverCardPortal>\n    <HoverCardContent\n      v-bind=\"props\"\n      :class=\"\n        cn(\n          'z-50 w-64 rounded-md bg-background border border-border p-4 text-foreground shadow-md outline-none 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-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2',\n          props.class,\n        )\n      \"\n    >\n      <slot />\n    </HoverCardContent>\n  </HoverCardPortal>\n</template>\n"
-    },
-    {
-      "name": "HoverCardTrigger.vue",
-      "content": "<script setup lang=\"ts\">\nimport { HoverCardTrigger, type HoverCardTriggerProps } from 'radix-vue'\n\nconst props = defineProps<HoverCardTriggerProps>()\n</script>\n\n<template>\n  <HoverCardTrigger v-bind=\"props\">\n    <slot />\n  </HoverCardTrigger>\n</template>\n"
-    },
-    {
-      "name": "index.ts",
-      "content": "export { default as HoverCard } from './HoverCard.vue'\nexport { default as HoverCardTrigger } from './HoverCardTrigger.vue'\nexport { default as HoverCardContent } from './HoverCardContent.vue'\n"
-    }
-  ],
-  "type": "components:ui"
-}
diff --git a/apps/www/static/registry/styles/default/input.json b/apps/www/static/registry/styles/default/input.json
deleted file mode 100644
index 9b13d1ad..00000000
--- a/apps/www/static/registry/styles/default/input.json
+++ /dev/null
@@ -1,18 +0,0 @@
-{
-  "name": "input",
-  "dependencies": [],
-  "registryDependencies": [
-    "utils"
-  ],
-  "files": [
-    {
-      "name": "Input.vue",
-      "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  <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 ?? ''))\">\n</template>\n"
-    },
-    {
-      "name": "index.ts",
-      "content": "export { default as Input } from './Input.vue'\n"
-    }
-  ],
-  "type": "components:ui"
-}
diff --git a/apps/www/static/registry/styles/default/label.json b/apps/www/static/registry/styles/default/label.json
deleted file mode 100644
index 18cbb25b..00000000
--- a/apps/www/static/registry/styles/default/label.json
+++ /dev/null
@@ -1,20 +0,0 @@
-{
-  "name": "label",
-  "dependencies": [
-    "radix-vue"
-  ],
-  "registryDependencies": [
-    "utils"
-  ],
-  "files": [
-    {
-      "name": "Label.vue",
-      "content": "<script setup lang=\"ts\">\nimport { Label, type LabelProps } from 'radix-vue'\nimport { cn } from '@/lib/utils'\n\nconst props = defineProps<LabelProps & { class?: string }>()\n</script>\n\n<template>\n  <Label\n    v-bind=\"props\"\n    :class=\"\n      cn(\n        'block text-sm tracking-tight font-medium text-foreground text-left',\n        props.class,\n      )\n    \"\n  >\n    <slot />\n  </Label>\n</template>\n"
-    },
-    {
-      "name": "index.ts",
-      "content": "export { default as Label } from './Label.vue'\n"
-    }
-  ],
-  "type": "components:ui"
-}
diff --git a/apps/www/static/registry/styles/default/menubar.json b/apps/www/static/registry/styles/default/menubar.json
deleted file mode 100644
index 3c02abca..00000000
--- a/apps/www/static/registry/styles/default/menubar.json
+++ /dev/null
@@ -1,76 +0,0 @@
-{
-  "name": "menubar",
-  "dependencies": [
-    "radix-vue"
-  ],
-  "registryDependencies": [
-    "utils"
-  ],
-  "files": [
-    {
-      "name": "Menubar.vue",
-      "content": "<script setup lang=\"ts\">\nimport {\n  MenubarRoot,\n  type MenubarRootEmits,\n  type MenubarRootProps,\n} from 'radix-vue'\nimport { cn } from '@/lib/utils'\n\nconst props = defineProps<MenubarRootProps & { class?: string }>()\n\nconst emits = defineEmits<MenubarRootEmits>()\n</script>\n\n<template>\n  <MenubarRoot\n    v-bind=\"props\"\n    :class=\"\n      cn(\n        'flex h-10 items-center space-x-1 rounded-md border border-border p-1',\n        props.class,\n      )\n    \"\n    @update:model-value=\"emits('update:modelValue', $event)\"\n  >\n    <slot />\n  </MenubarRoot>\n</template>\n"
-    },
-    {
-      "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"
-    },
-    {
-      "name": "MenubarContent.vue",
-      "content": "<script setup lang=\"ts\">\nimport {\n  MenubarContent,\n  type MenubarContentProps,\n  MenubarPortal,\n} from 'radix-vue'\nimport { cn } from '@/lib/utils'\n\nconst props = withDefaults(\n  defineProps<MenubarContentProps & { class?: string }>(),\n  {\n    align: 'start',\n    alignOffset: -4,\n    sideOffset: 8,\n  },\n)\n</script>\n\n<template>\n  <MenubarPortal>\n    <MenubarContent\n      :loop=\"props.loop\"\n      :as-child=\"props.asChild\"\n      :side-offset=\"props.sideOffset\"\n      :side=\"props.side\"\n      :align=\"props.align\"\n      :align-offset=\"props.alignOffset\"\n      :class=\"\n        cn(\n          'z-50 min-w-[12rem] overflow-hidden rounded-md border bg-popover p-1 text-popover-foreground shadow-md data-[state=open]:animate-in 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-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2',\n          props.class,\n        )\n      \"\n    >\n      <slot />\n    </MenubarContent>\n  </MenubarPortal>\n</template>\n"
-    },
-    {
-      "name": "MenubarGroup.vue",
-      "content": "<script setup lang=\"ts\">\nimport { MenubarGroup, type MenubarGroupProps } from 'radix-vue'\n\nconst props = defineProps<MenubarGroupProps>()\n</script>\n\n<template>\n  <MenubarGroup v-bind=\"props\">\n    <slot />\n  </MenubarGroup>\n</template>\n"
-    },
-    {
-      "name": "MenubarItem.vue",
-      "content": "<script setup lang=\"ts\">\nimport {\n  MenubarItem,\n  type MenubarItemEmits,\n  type MenubarItemProps,\n} from 'radix-vue'\nimport { cn } from '@/lib/utils'\n\nconst props = defineProps<MenubarItemProps & { inset?: boolean; class?: string }>()\n\nconst emits = defineEmits<MenubarItemEmits>()\n</script>\n\n<template>\n  <MenubarItem\n    v-bind=\"props\"\n    :class=\"[\n      cn(\n        'relative flex cursor-default select-none items-center rounded-sm px-2 py-1.5 text-sm outline-none focus:bg-accent focus:text-accent-foreground data-[disabled]:pointer-events-none data-[disabled]:opacity-50',\n        inset && 'pl-8',\n        props.class,\n      ),\n    ]\"\n    @select=\"emits('select', $event)\"\n  >\n    <slot />\n  </MenubarItem>\n</template>\n"
-    },
-    {
-      "name": "MenubarLabel.vue",
-      "content": "<script setup lang=\"ts\">\nimport { MenubarLabel, type MenubarLabelProps } from 'radix-vue'\nimport { cn } from '@/lib/utils'\n\nconst props = defineProps<MenubarLabelProps & { inset?: boolean; class?: string }>()\n</script>\n\n<template>\n  <MenubarLabel :class=\"cn('px-2 py-1.5 text-sm font-semibold', inset && 'pl-8', props.class)\">\n    <slot />\n  </MenubarLabel>\n</template>\n"
-    },
-    {
-      "name": "MenubarMenu.vue",
-      "content": "<script setup lang=\"ts\">\nimport { MenubarMenu, type MenubarMenuProps } from 'radix-vue'\n\nconst props = defineProps<MenubarMenuProps>()\n</script>\n\n<template>\n  <MenubarMenu v-bind=\"props\">\n    <slot />\n  </MenubarMenu>\n</template>\n"
-    },
-    {
-      "name": "MenubarRadioGroup.vue",
-      "content": "<script setup lang=\"ts\">\nimport {\n  MenubarRadioGroup,\n  type MenubarRadioGroupEmits,\n  type MenubarRadioGroupProps,\n} from 'radix-vue'\n\nconst props = defineProps<MenubarRadioGroupProps>()\n\nconst emits = defineEmits<MenubarRadioGroupEmits>()\n</script>\n\n<template>\n  <MenubarRadioGroup\n    v-bind=\"props\"\n    @update:model-value=\"emits('update:modelValue', $event)\"\n  >\n    <slot />\n  </MenubarRadioGroup>\n</template>\n"
-    },
-    {
-      "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"
-    },
-    {
-      "name": "MenubarSeparator.vue",
-      "content": "<script setup lang=\"ts\">\nimport { MenubarSeparator, type MenubarSeparatorProps } from 'radix-vue'\nimport { cn } from '@/lib/utils'\n\nconst props = defineProps<MenubarSeparatorProps>()\n</script>\n\n<template>\n  <MenubarSeparator :class=\" cn('-mx-1 my-1 h-px bg-secondary', $attrs.class ?? '')\" v-bind=\"props\" />\n</template>\n"
-    },
-    {
-      "name": "MenubarShortcut.vue",
-      "content": "<script setup lang=\"ts\">\nimport { cn } from '@/lib/utils'\n</script>\n\n<template>\n  <span :class=\"cn('text-xxs ml-auto tracking-widest opacity-50', $attrs.class ?? '')\">\n    <slot />\n  </span>\n</template>\n"
-    },
-    {
-      "name": "MenubarSub.vue",
-      "content": "<script setup lang=\"ts\">\nimport {\n  MenubarSub,\n  type MenubarSubEmits,\n} from 'radix-vue'\n\ninterface MenubarSubRootProps {\n  defaultOpen?: boolean\n  open?: boolean\n}\n\nconst props = defineProps<MenubarSubRootProps>()\n\nconst emits = defineEmits<MenubarSubEmits>()\n</script>\n\n<template>\n  <MenubarSub v-bind=\"props\" @update:open=\"emits('update:open', $event)\">\n    <slot />\n  </MenubarSub>\n</template>\n"
-    },
-    {
-      "name": "MenubarSubContent.vue",
-      "content": "<script setup lang=\"ts\">\nimport {\n  MenubarPortal,\n  MenubarSubContent,\n  type MenubarSubContentEmits,\n  type MenubarSubContentProps,\n} from 'radix-vue'\nimport { cn } from '@/lib/utils'\n\nconst props = withDefaults(\n  defineProps<MenubarSubContentProps & { class?: string }>(),\n  {\n    sideOffset: 2,\n    alignOffset: 0,\n  },\n)\n\nconst emits = defineEmits<MenubarSubContentEmits>()\n</script>\n\n<template>\n  <MenubarPortal>\n    <MenubarSubContent\n      :loop=\"props.loop\"\n      :as-child=\"props.asChild\"\n      :side-offset=\"props.sideOffset\"\n      :side=\"props.side\"\n      :align=\"props.align\"\n      :align-offset=\"props.alignOffset\"\n      :class=\"\n        cn(\n          'z-50 min-w-[8rem] overflow-hidden rounded-md border bg-popover p-1 text-popover-foreground 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-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2',\n          props.class,\n        )\n      \"\n    >\n      <slot />\n    </MenubarSubContent>\n  </MenubarPortal>\n</template>\n"
-    },
-    {
-      "name": "MenubarSubTrigger.vue",
-      "content": "<script setup lang=\"ts\">\nimport { MenubarSubTrigger, type MenubarSubTriggerProps } from 'radix-vue'\nimport { cn } from '@/lib/utils'\n\nconst props = defineProps<MenubarSubTriggerProps & { inset?: boolean; class?: string }>()\n</script>\n\n<template>\n  <MenubarSubTrigger\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 focus:text-accent-foreground data-[state=open]:bg-accent data-[state=open]:text-accent-foreground',\n        inset && 'pl-8',\n        props.class,\n      ),\n    ]\"\n  >\n    <slot />\n  </MenubarSubTrigger>\n</template>\n"
-    },
-    {
-      "name": "MenubarTrigger.vue",
-      "content": "<script setup lang=\"ts\">\nimport { MenubarTrigger, type MenubarTriggerProps } from 'radix-vue'\nimport { cn } from '@/lib/utils'\n\nconst props = defineProps<MenubarTriggerProps & { class?: string }>()\n</script>\n\n<template>\n  <MenubarTrigger\n    v-bind=\"props\"\n    :class=\"\n      cn(\n        'flex cursor-default select-none items-center rounded-sm px-3 py-1.5 text-sm font-medium outline-none focus:bg-accent focus:text-accent-foreground data-[state=open]:bg-accent data-[state=open]:text-accent-foreground',\n        props.class,\n      )\n    \"\n  >\n    <slot />\n  </MenubarTrigger>\n</template>\n"
-    },
-    {
-      "name": "index.ts",
-      "content": "export { default as Menubar } from './Menubar.vue'\nexport { default as MenubarItem } from './MenubarItem.vue'\nexport { default as MenubarContent } from './MenubarContent.vue'\nexport { default as MenubarGroup } from './MenubarGroup.vue'\nexport { default as MenubarMenu } from './MenubarMenu.vue'\nexport { default as MenubarRadioGroup } from './MenubarRadioGroup.vue'\nexport { default as MenubarRadioItem } from './MenubarRadioItem.vue'\nexport { default as MenubarCheckboxItem } from './MenubarCheckboxItem.vue'\nexport { default as MenubarSeparator } from './MenubarSeparator.vue'\nexport { default as MenubarSub } from './MenubarSub.vue'\nexport { default as MenubarSubContent } from './MenubarSubContent.vue'\nexport { default as MenubarSubTrigger } from './MenubarSubTrigger.vue'\nexport { default as MenubarTrigger } from './MenubarTrigger.vue'\nexport { default as MenubarShortcut } from './MenubarShortcut.vue'\nexport { default as MenubarLabel } from './MenubarLabel.vue'\n"
-    }
-  ],
-  "type": "components:ui"
-}
diff --git a/apps/www/static/registry/styles/default/navigation-menu.json b/apps/www/static/registry/styles/default/navigation-menu.json
deleted file mode 100644
index 0a03b0d3..00000000
--- a/apps/www/static/registry/styles/default/navigation-menu.json
+++ /dev/null
@@ -1,48 +0,0 @@
-{
-  "name": "navigation-menu",
-  "dependencies": [
-    "radix-vue"
-  ],
-  "registryDependencies": [
-    "utils"
-  ],
-  "files": [
-    {
-      "name": "NavigationMenu.vue",
-      "content": "<script setup lang=\"ts\">\nimport {\n  NavigationMenuRoot,\n  type NavigationMenuRootEmits,\n  type NavigationMenuRootProps,\n} from 'radix-vue'\nimport NavigationMenuViewport from './NavigationMenuViewport.vue'\nimport { cn } from '@/lib/utils'\n\nconst props = defineProps<NavigationMenuRootProps & { class?: string }>()\n\nconst emits = defineEmits<NavigationMenuRootEmits>()\n</script>\n\n<template>\n  <NavigationMenuRoot\n    v-bind=\"props\"\n    :class=\"cn('relative z-10 flex max-w-max flex-1 items-center justify-center', props.class)\"\n    @update:model-value=\"emits('update:modelValue', $event)\"\n  >\n    <slot />\n    <NavigationMenuViewport />\n  </NavigationMenuRoot>\n</template>\n"
-    },
-    {
-      "name": "NavigationMenuContent.vue",
-      "content": "<script setup lang=\"ts\">\nimport {\n  NavigationMenuContent,\n  type NavigationMenuContentEmits,\n  type NavigationMenuContentProps,\n} from 'radix-vue'\nimport { cn, useEmitAsProps } from '@/lib/utils'\n\nconst props = defineProps<NavigationMenuContentProps & { class?: string }>()\n\nconst emits = defineEmits<NavigationMenuContentEmits>()\n</script>\n\n<template>\n  <NavigationMenuContent\n    v-bind=\"{ ...props, ...useEmitAsProps(emits) }\"\n    :class=\"\n      cn(\n        'left-0 top-0 w-full data-[motion^=from-]:animate-in data-[motion^=to-]:animate-out data-[motion^=from-]:fade-in data-[motion^=to-]:fade-out data-[motion=from-end]:slide-in-from-right-52 data-[motion=from-start]:slide-in-from-left-52 data-[motion=to-end]:slide-out-to-right-52 data-[motion=to-start]:slide-out-to-left-52 md:absolute md:w-auto ',\n        props.class,\n      )\n    \"\n  >\n    <slot />\n  </NavigationMenuContent>\n</template>\n"
-    },
-    {
-      "name": "NavigationMenuIndicator.vue",
-      "content": "<script setup lang=\"ts\">\nimport { NavigationMenuIndicator, type NavigationMenuIndicatorProps } from 'radix-vue'\nimport { cn } from '@/lib/utils'\n\nconst props = defineProps<NavigationMenuIndicatorProps>()\n</script>\n\n<template>\n  <NavigationMenuIndicator\n    v-bind=\"props\"\n    :class=\"cn('top-full z-[1] flex h-1.5 items-end justify-center overflow-hidden data-[state=visible]:animate-in data-[state=hidden]:animate-out data-[state=hidden]:fade-out data-[state=visible]:fade-in', $attrs.class ?? '')\"\n  >\n    <div class=\"relative top-[60%] h-2 w-2 rotate-45 rounded-tl-sm bg-border shadow-md\" />\n  </NavigationMenuIndicator>\n</template>\n"
-    },
-    {
-      "name": "NavigationMenuItem.vue",
-      "content": "<script setup lang=\"ts\">\nimport { NavigationMenuItem, type NavigationMenuItemProps } from 'radix-vue'\n\nconst props = defineProps<NavigationMenuItemProps>()\n</script>\n\n<template>\n  <NavigationMenuItem v-bind=\"props\">\n    <slot />\n  </NavigationMenuItem>\n</template>\n"
-    },
-    {
-      "name": "NavigationMenuLink.vue",
-      "content": "<script setup lang=\"ts\">\nimport {\n  NavigationMenuLink,\n  type NavigationMenuLinkEmits,\n  type NavigationMenuLinkProps,\n} from 'radix-vue'\nimport { useEmitAsProps } from '@/lib/utils'\n\nconst props = defineProps<NavigationMenuLinkProps>()\nconst emits = defineEmits<NavigationMenuLinkEmits>()\n</script>\n\n<template>\n  <NavigationMenuLink v-bind=\"{ ...props, ...useEmitAsProps(emits) }\">\n    <slot />\n  </NavigationMenuLink>\n</template>\n"
-    },
-    {
-      "name": "NavigationMenuList.vue",
-      "content": "<script setup lang=\"ts\">\nimport { NavigationMenuList, type NavigationMenuListProps } from 'radix-vue'\nimport { cn } from '@/lib/utils'\n\nconst props = defineProps<NavigationMenuListProps & { class?: string }>()\n</script>\n\n<template>\n  <NavigationMenuList\n    v-bind=\"props\"\n    :class=\"\n      cn(\n        'group flex flex-1 list-none items-center justify-center space-x-1',\n        props.class,\n      )\n    \"\n  >\n    <slot />\n  </NavigationMenuList>\n</template>\n"
-    },
-    {
-      "name": "NavigationMenuTrigger.vue",
-      "content": "<script setup lang=\"ts\">\nimport {\n  NavigationMenuTrigger,\n  type NavigationMenuTriggerProps,\n} from 'radix-vue'\nimport { ChevronDown } from 'lucide-vue-next'\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    <ChevronDown\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",
-      "content": "<script setup lang=\"ts\">\nimport {\n  NavigationMenuViewport,\n  type NavigationMenuViewportProps,\n} from 'radix-vue'\nimport { cn } from '@/lib/utils'\n\nconst props = defineProps<NavigationMenuViewportProps>()\n</script>\n\n<template>\n  <div class=\"absolute left-0 top-full flex justify-center\">\n    <NavigationMenuViewport\n      v-bind=\"props\"\n      :class=\"\n        cn(\n          'origin-top-center relative mt-1.5 h-[var(--radix-navigation-menu-viewport-height)] w-full overflow-hidden rounded-md border bg-popover text-popover-foreground shadow-lg data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-90 md:w-[var(--radix-navigation-menu-viewport-width)]',\n          $attrs.class ?? '',\n        )\n      \"\n    />\n  </div>\n</template>\n"
-    },
-    {
-      "name": "index.ts",
-      "content": "import { cva } from 'class-variance-authority'\n\nexport { default as NavigationMenu } from './NavigationMenu.vue'\nexport { default as NavigationMenuList } from './NavigationMenuList.vue'\nexport { default as NavigationMenuItem } from './NavigationMenuItem.vue'\nexport { default as NavigationMenuTrigger } from './NavigationMenuTrigger.vue'\nexport { default as NavigationMenuContent } from './NavigationMenuContent.vue'\nexport { default as NavigationMenuLink } from './NavigationMenuLink.vue'\n\nexport const navigationMenuTriggerStyle = cva(\n  'group inline-flex h-10 w-max items-center justify-center rounded-md bg-background px-4 py-2 text-sm font-medium transition-colors hover:bg-accent hover:text-accent-foreground focus:bg-accent focus:text-accent-foreground focus:outline-none disabled:pointer-events-none disabled:opacity-50 data-[active]:bg-accent/50 data-[state=open]:bg-accent/50',\n)\n"
-    }
-  ],
-  "type": "components:ui"
-}
diff --git a/apps/www/static/registry/styles/default/popover.json b/apps/www/static/registry/styles/default/popover.json
deleted file mode 100644
index fc7d645a..00000000
--- a/apps/www/static/registry/styles/default/popover.json
+++ /dev/null
@@ -1,28 +0,0 @@
-{
-  "name": "popover",
-  "dependencies": [
-    "radix-vue"
-  ],
-  "registryDependencies": [
-    "utils"
-  ],
-  "files": [
-    {
-      "name": "Popover.vue",
-      "content": "<script setup lang=\"ts\">\nimport { PopoverRoot, type PopoverRootProps } from 'radix-vue'\n\nconst props = defineProps<PopoverRootProps>()\n</script>\n\n<template>\n  <PopoverRoot v-bind=\"props\">\n    <slot />\n  </PopoverRoot>\n</template>\n"
-    },
-    {
-      "name": "PopoverContent.vue",
-      "content": "<script setup lang=\"ts\">\nimport {\n  PopoverContent,\n  type PopoverContentEmits,\n  type PopoverContentProps,\n  PopoverPortal,\n} from 'radix-vue'\nimport { cn, useEmitAsProps } from '@/lib/utils'\n\nconst props = withDefaults(\n  defineProps<PopoverContentProps & { class?: string }>(),\n  {\n    sideOffset: 4,\n  },\n)\nconst emits = defineEmits<PopoverContentEmits>()\nconst emitsAsProps = useEmitAsProps(emits)\n</script>\n\n<template>\n  <PopoverPortal>\n    <PopoverContent\n      v-bind=\"{ ...props, ...emitsAsProps, $attrs }\"\n      :class=\"\n        cn(\n          'z-50 w-72 rounded-md border bg-popover p-4 text-popover-foreground shadow-md outline-none 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-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2',\n          props.class,\n        )\n      \"\n    >\n      <slot />\n    </PopoverContent>\n  </PopoverPortal>\n</template>\n"
-    },
-    {
-      "name": "PopoverTrigger.vue",
-      "content": "<script setup lang=\"ts\">\nimport { PopoverTrigger, type PopoverTriggerProps } from 'radix-vue'\n\nconst props = defineProps<PopoverTriggerProps>()\n</script>\n\n<template>\n  <PopoverTrigger v-bind=\"props\">\n    <slot />\n  </PopoverTrigger>\n</template>\n"
-    },
-    {
-      "name": "index.ts",
-      "content": "export { default as Popover } from './Popover.vue'\nexport { default as PopoverTrigger } from './PopoverTrigger.vue'\nexport { default as PopoverContent } from './PopoverContent.vue'\n"
-    }
-  ],
-  "type": "components:ui"
-}
diff --git a/apps/www/static/registry/styles/default/progress.json b/apps/www/static/registry/styles/default/progress.json
deleted file mode 100644
index 5e8d482a..00000000
--- a/apps/www/static/registry/styles/default/progress.json
+++ /dev/null
@@ -1,20 +0,0 @@
-{
-  "name": "progress",
-  "dependencies": [
-    "radix-vue"
-  ],
-  "registryDependencies": [
-    "utils"
-  ],
-  "files": [
-    {
-      "name": "Progress.vue",
-      "content": "<script setup lang=\"ts\">\nimport {\n  ProgressIndicator,\n  ProgressRoot,\n  type ProgressRootProps,\n} from 'radix-vue'\nimport { cn } from '@/lib/utils'\n\nconst props = withDefaults(\n  defineProps<ProgressRootProps & { class?: string }>(),\n  {\n    class: '',\n    modelValue: 0,\n  },\n)\n</script>\n\n<template>\n  <ProgressRoot\n    :class=\"\n      cn(\n        'relative h-4 w-full overflow-hidden rounded-full bg-secondary',\n        props.class,\n      )\n    \"\n    v-bind=\"props\"\n  >\n    <ProgressIndicator\n      :class=\"\n        cn(\n          'h-full w-full flex-1 duration-300 bg-foreground transition-all',\n          props.class,\n        )\n      \"\n      :style=\"`transform: translateX(-${100 - (props.modelValue ?? 0)}%);`\"\n    />\n  </ProgressRoot>\n</template>\n"
-    },
-    {
-      "name": "index.ts",
-      "content": "export { default as Progress } from './Progress.vue'\n"
-    }
-  ],
-  "type": "components:ui"
-}
diff --git a/apps/www/static/registry/styles/default/radio-group.json b/apps/www/static/registry/styles/default/radio-group.json
deleted file mode 100644
index d212cded..00000000
--- a/apps/www/static/registry/styles/default/radio-group.json
+++ /dev/null
@@ -1,24 +0,0 @@
-{
-  "name": "radio-group",
-  "dependencies": [
-    "radix-vue"
-  ],
-  "registryDependencies": [
-    "utils"
-  ],
-  "files": [
-    {
-      "name": "RadioGroup.vue",
-      "content": "<script setup lang=\"ts\">\nimport { RadioGroupRoot, type RadioGroupRootProps } from 'radix-vue'\nimport { cn } from '@/lib/utils'\n\nconst props = defineProps<RadioGroupRootProps & { class?: string }>()\n</script>\n\n<template>\n  <RadioGroupRoot :class=\"cn('grid gap-2', props.class)\">\n    <slot />\n  </RadioGroupRoot>\n</template>\n"
-    },
-    {
-      "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"
-    },
-    {
-      "name": "index.ts",
-      "content": "export { default as RadioGroup } from './RadioGroup.vue'\nexport { default as RadioGroupItem } from './RadioGroupItem.vue'\n"
-    }
-  ],
-  "type": "components:ui"
-}
diff --git a/apps/www/static/registry/styles/default/scroll-area.json b/apps/www/static/registry/styles/default/scroll-area.json
deleted file mode 100644
index 406885ce..00000000
--- a/apps/www/static/registry/styles/default/scroll-area.json
+++ /dev/null
@@ -1,24 +0,0 @@
-{
-  "name": "scroll-area",
-  "dependencies": [
-    "radix-vue"
-  ],
-  "registryDependencies": [
-    "utils"
-  ],
-  "files": [
-    {
-      "name": "ScrollArea.vue",
-      "content": "<script setup lang=\"ts\">\nimport {\n  ScrollAreaCorner,\n  ScrollAreaRoot,\n  type ScrollAreaRootProps,\n  ScrollAreaViewport,\n} from 'radix-vue'\nimport ScrollBar from './ScrollBar.vue'\nimport { cn } from '@/lib/utils'\n\nconst props = withDefaults(\n  defineProps<\n    ScrollAreaRootProps & { class?: string }\n  >(),\n  {\n    class: '',\n    orientation: 'vertical',\n  },\n)\n</script>\n\n<template>\n  <ScrollAreaRoot :type=\"type\" :class=\"cn('relative overflow-hidden', props.class)\">\n    <ScrollAreaViewport class=\"h-full w-full  rounded-[inherit]\">\n      <slot />\n    </ScrollAreaViewport>\n    <ScrollBar />\n    <ScrollAreaCorner />\n  </ScrollAreaRoot>\n</template>\n"
-    },
-    {
-      "name": "ScrollBar.vue",
-      "content": "<script setup lang=\"ts\">\nimport { ScrollAreaScrollbar, type ScrollAreaScrollbarProps, ScrollAreaThumb } from 'radix-vue'\nimport { cn } from '@/lib/utils'\n\nconst props = withDefaults(defineProps<ScrollAreaScrollbarProps>(), {\n  orientation: 'vertical',\n})\n</script>\n\n<template>\n  <ScrollAreaScrollbar\n    v-bind=\"props\"\n    :class=\"\n      cn('flex touch-none select-none transition-colors',\n         orientation === 'vertical'\n           && 'h-full w-2.5 border-l border-l-transparent p-[1px]',\n         orientation === 'horizontal'\n           && 'h-2.5 border-t border-t-transparent p-[1px]',\n         $attrs.class ?? '')\"\n  >\n    <ScrollAreaThumb class=\"relative flex-1 rounded-full bg-border\" />\n  </ScrollAreaScrollbar>\n</template>\n"
-    },
-    {
-      "name": "index.ts",
-      "content": "export { default as ScrollArea } from './ScrollArea.vue'\nexport { default as ScrollBar } from './ScrollBar.vue'\n"
-    }
-  ],
-  "type": "components:ui"
-}
diff --git a/apps/www/static/registry/styles/default/select.json b/apps/www/static/registry/styles/default/select.json
deleted file mode 100644
index cb83e4fe..00000000
--- a/apps/www/static/registry/styles/default/select.json
+++ /dev/null
@@ -1,52 +0,0 @@
-{
-  "name": "select",
-  "dependencies": [
-    "radix-vue"
-  ],
-  "registryDependencies": [
-    "utils"
-  ],
-  "files": [
-    {
-      "name": "Select.vue",
-      "content": "<script setup lang=\"ts\">\nimport type { SelectRootEmits, SelectRootProps } from 'radix-vue'\nimport { SelectRoot } from 'radix-vue'\nimport { useEmitAsProps } from '@/lib/utils'\n\nconst props = defineProps<SelectRootProps>()\nconst emits = defineEmits<SelectRootEmits>()\n</script>\n\n<template>\n  <SelectRoot v-bind=\"{ ...props, ...useEmitAsProps(emits) }\">\n    <slot />\n  </SelectRoot>\n</template>\n"
-    },
-    {
-      "name": "SelectContent.vue",
-      "content": "<script setup lang=\"ts\">\nimport {\n  SelectContent,\n  type SelectContentEmits,\n  type SelectContentProps,\n  SelectPortal,\n  SelectViewport,\n} from 'radix-vue'\nimport { cn, useEmitAsProps } from '@/lib/utils'\n\nconst props = withDefaults(\n  defineProps<SelectContentProps & { class?: string }>(), {\n    position: 'popper',\n    sideOffset: 4,\n  },\n)\nconst emits = defineEmits<SelectContentEmits>()\nconst emitsAsProps = useEmitAsProps(emits)\n</script>\n\n<template>\n  <SelectPortal>\n    <SelectContent\n      v-bind=\"{ ...props, ...emitsAsProps, ...$attrs }\"\n      :class=\"\n        cn(\n          'relative z-50 min-w-[10rem] overflow-hidden rounded-md bg-background border border-border text-foreground shadow-md 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-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2',\n          position === 'popper'\n            && 'data-[side=bottom]:translate-y-1 data-[side=left]:-translate-x-1 data-[side=right]:translate-x-1 data-[side=top]:-translate-y-1',\n          props.class,\n        )\n      \"\n    >\n      <SelectViewport\n        :class=\"\n          cn('p-1',\n             position === 'popper'\n               && 'h-[var(--radix-select-trigger-height)] w-full min-w-[var(--radix-select-trigger-width)]')\"\n      >\n        <slot />\n      </SelectViewport>\n    </SelectContent>\n  </SelectPortal>\n</template>\n"
-    },
-    {
-      "name": "SelectGroup.vue",
-      "content": "<script setup lang=\"ts\">\nimport { SelectGroup, type SelectGroupProps } from 'radix-vue'\nimport { cn } from '@/lib/utils'\n\nconst props = defineProps<SelectGroupProps & { class?: string }>()\n</script>\n\n<template>\n  <SelectGroup :class=\"cn('p-1 w-full', props.class)\" v-bind=\"props\">\n    <slot />\n  </SelectGroup>\n</template>\n"
-    },
-    {
-      "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"
-    },
-    {
-      "name": "SelectItemText.vue",
-      "content": "<script setup lang=\"ts\">\nimport { SelectItemText, type SelectItemTextProps } from 'radix-vue'\n\nconst props = defineProps<SelectItemTextProps>()\n</script>\n\n<template>\n  <SelectItemText v-bind=\"props\">\n    <slot />\n  </SelectItemText>\n</template>\n"
-    },
-    {
-      "name": "SelectLabel.vue",
-      "content": "<script setup lang=\"ts\">\nimport { SelectLabel, type SelectLabelProps } from 'radix-vue'\nimport { cn } from '@/lib/utils'\n\nconst props = defineProps<SelectLabelProps & { class?: string }>()\n</script>\n\n<template>\n  <SelectLabel :class=\"cn('py-1.5 pl-8 pr-2 text-sm font-semibold', props.class)\">\n    <slot />\n  </SelectLabel>\n</template>\n"
-    },
-    {
-      "name": "SelectSeparator.vue",
-      "content": "<script setup lang=\"ts\">\nimport { SelectSeparator, type SelectSeparatorProps } from 'radix-vue'\nimport { cn } from '@/lib/utils'\n\nconst props = defineProps<SelectSeparatorProps & { class?: string }>()\n</script>\n\n<template>\n  <SelectSeparator :class=\"cn('-mx-1 my-1 h-px bg-muted', props.class)\" />\n</template>\n"
-    },
-    {
-      "name": "SelectTrigger.vue",
-      "content": "<script setup lang=\"ts\">\nimport { SelectIcon, SelectTrigger, type SelectTriggerProps } from 'radix-vue'\nimport { ChevronDown } from 'lucide-vue-next'\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-10 w-full items-center justify-between rounded-md border border-input bg-background px-3 py-2 text-sm ring-offset-background placeholder:text-muted-foreground focus:outline-none focus:ring-2 focus:ring-ring focus:ring-offset-2 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      <ChevronDown class=\"w-4 h-4 opacity-50\" />\n    </SelectIcon>\n  </SelectTrigger>\n</template>\n"
-    },
-    {
-      "name": "SelectValue.vue",
-      "content": "<script setup lang=\"ts\">\nimport { SelectValue, type SelectValueProps } from 'radix-vue'\n\nconst props = defineProps<SelectValueProps>()\n</script>\n\n<template>\n  <SelectValue v-bind=\"props\">\n    <slot />\n  </SelectValue>\n</template>\n"
-    },
-    {
-      "name": "index.ts",
-      "content": "export { default as Select } from './Select.vue'\nexport { default as SelectValue } from './SelectValue.vue'\nexport { default as SelectTrigger } from './SelectTrigger.vue'\nexport { default as SelectContent } from './SelectContent.vue'\nexport { default as SelectGroup } from './SelectGroup.vue'\nexport { default as SelectItem } from './SelectItem.vue'\nexport { default as SelectItemText } from './SelectItemText.vue'\nexport { default as SelectLabel } from './SelectLabel.vue'\nexport { default as SelectSeparator } from './SelectSeparator.vue'\n"
-    }
-  ],
-  "type": "components:ui"
-}
diff --git a/apps/www/static/registry/styles/default/separator.json b/apps/www/static/registry/styles/default/separator.json
deleted file mode 100644
index b7836856..00000000
--- a/apps/www/static/registry/styles/default/separator.json
+++ /dev/null
@@ -1,20 +0,0 @@
-{
-  "name": "separator",
-  "dependencies": [
-    "radix-vue"
-  ],
-  "registryDependencies": [
-    "utils"
-  ],
-  "files": [
-    {
-      "name": "Separator.vue",
-      "content": "<script setup lang=\"ts\">\nimport { Separator, type SeparatorProps } from 'radix-vue'\nimport { cn } from '@/lib/utils'\n\nconst props = defineProps<SeparatorProps & { class?: string }>()\n</script>\n\n<template>\n  <Separator\n    :class=\"[\n      cn('shrink-0 bg-secondary', props.class),\n      props.orientation === 'vertical' ? 'w-px h-full' : 'h-px w-full',\n    ]\"\n  />\n</template>\n"
-    },
-    {
-      "name": "index.ts",
-      "content": "export { default as Separator } from './Separator.vue'\n"
-    }
-  ],
-  "type": "components:ui"
-}
diff --git a/apps/www/static/registry/styles/default/sheet.json b/apps/www/static/registry/styles/default/sheet.json
deleted file mode 100644
index 95667fde..00000000
--- a/apps/www/static/registry/styles/default/sheet.json
+++ /dev/null
@@ -1,48 +0,0 @@
-{
-  "name": "sheet",
-  "dependencies": [
-    "radix-vue"
-  ],
-  "registryDependencies": [
-    "utils"
-  ],
-  "files": [
-    {
-      "name": "Sheet.vue",
-      "content": "<script setup lang=\"ts\">\nimport { DialogRoot } from 'radix-vue'\n</script>\n\n<template>\n  <DialogRoot>\n    <slot />\n  </DialogRoot>\n</template>\n"
-    },
-    {
-      "name": "SheetClose.vue",
-      "content": "<script setup lang=\"ts\">\nimport { DialogClose, type DialogCloseProps } from 'radix-vue'\n\nconst props = defineProps<DialogCloseProps>()\n</script>\n\n<template>\n  <DialogClose v-bind=\"props\">\n    <slot />\n  </DialogClose>\n</template>\n"
-    },
-    {
-      "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 { X } from 'lucide-vue-next'\nimport { cva } from 'class-variance-authority'\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        <X class=\"w-4 h-4 text-muted-foreground\" />\n      </DialogClose>\n    </DialogContent>\n  </DialogPortal>\n</template>\n"
-    },
-    {
-      "name": "SheetDescription.vue",
-      "content": "<script setup lang=\"ts\">\nimport { DialogDescription, type DialogDescriptionProps } from 'radix-vue'\nimport { cn } from '@/lib/utils'\n\nconst props = defineProps<DialogDescriptionProps & { class?: string }>()\n</script>\n\n<template>\n  <DialogDescription\n    :class=\"cn('text-sm text-muted-foreground', props.class)\"\n    v-bind=\"props\"\n  >\n    <slot />\n  </DialogDescription>\n</template>\n"
-    },
-    {
-      "name": "SheetFooter.vue",
-      "content": "<script setup lang=\"ts\">\nimport { cn } from '@/lib/utils'\n\nconst props = defineProps<{ class?: string }>()\n</script>\n\n<template>\n  <div\n    :class=\"\n      cn(\n        'flex flex-col-reverse sm:flex-row sm:justify-end sm:space-x-2',\n        props.class,\n      )\n    \"\n  >\n    <slot />\n  </div>\n</template>\n"
-    },
-    {
-      "name": "SheetHeader.vue",
-      "content": "<script setup lang=\"ts\">\nimport { cn } from '@/lib/utils'\n\nconst props = defineProps<{ class?: string }>()\n</script>\n\n<template>\n  <div\n    :class=\"\n      cn('flex flex-col space-y-2 text-center sm:text-left', props.class)\n    \"\n  >\n    <slot />\n  </div>\n</template>\n"
-    },
-    {
-      "name": "SheetTitle.vue",
-      "content": "<script setup lang=\"ts\">\nimport { DialogTitle, type DialogTitleProps } from 'radix-vue'\nimport { cn } from '@/lib/utils'\n\nconst props = defineProps<DialogTitleProps & { class?: string }>()\n</script>\n\n<template>\n  <DialogTitle\n    :class=\"cn('text-lg font-semibold text-foreground', props.class)\"\n    v-bind=\"props\"\n  >\n    <slot />\n  </DialogTitle>\n</template>\n"
-    },
-    {
-      "name": "SheetTrigger.vue",
-      "content": "<script setup lang=\"ts\">\nimport { DialogTrigger, type DialogTriggerProps } from 'radix-vue'\n\nconst props = defineProps<DialogTriggerProps>()\n</script>\n\n<template>\n  <DialogTrigger v-bind=\"props\">\n    <slot />\n  </DialogTrigger>\n</template>\n"
-    },
-    {
-      "name": "index.ts",
-      "content": "export { default as Sheet } from './Sheet.vue'\nexport { default as SheetTrigger } from './SheetTrigger.vue'\nexport { default as SheetClose } from './SheetClose.vue'\nexport { default as SheetContent } from './SheetContent.vue'\nexport { default as SheetHeader } from './SheetHeader.vue'\nexport { default as SheetTitle } from './SheetTitle.vue'\nexport { default as SheetDescription } from './SheetDescription.vue'\nexport { default as SheetFooter } from './SheetFooter.vue'\n"
-    }
-  ],
-  "type": "components:ui"
-}
diff --git a/apps/www/static/registry/styles/default/skeleton.json b/apps/www/static/registry/styles/default/skeleton.json
deleted file mode 100644
index 4a9bdfb8..00000000
--- a/apps/www/static/registry/styles/default/skeleton.json
+++ /dev/null
@@ -1,18 +0,0 @@
-{
-  "name": "skeleton",
-  "dependencies": [],
-  "registryDependencies": [
-    "utils"
-  ],
-  "files": [
-    {
-      "name": "Skeleton.vue",
-      "content": "<script setup lang=\"ts\">\nimport { cn } from '@/lib/utils'\n\ninterface SkeletonProps {\n  class?: string\n}\n\nconst props = defineProps<SkeletonProps>()\n</script>\n\n<template>\n  <div :class=\"cn('animate-pulse rounded-md bg-secondary', props.class)\" />\n</template>\n"
-    },
-    {
-      "name": "index.ts",
-      "content": "export { default as Skeleton } from './Skeleton.vue'\n"
-    }
-  ],
-  "type": "components:ui"
-}
diff --git a/apps/www/static/registry/styles/default/slider.json b/apps/www/static/registry/styles/default/slider.json
deleted file mode 100644
index 79df3f45..00000000
--- a/apps/www/static/registry/styles/default/slider.json
+++ /dev/null
@@ -1,20 +0,0 @@
-{
-  "name": "slider",
-  "dependencies": [
-    "radix-vue"
-  ],
-  "registryDependencies": [
-    "utils"
-  ],
-  "files": [
-    {
-      "name": "Slider.vue",
-      "content": "<script setup lang=\"ts\">\nimport type { SliderRootEmits, SliderRootProps } from 'radix-vue'\nimport { SliderRange, SliderRoot, SliderThumb, SliderTrack } from 'radix-vue'\nimport { cn, useEmitAsProps } from '@/lib/utils'\n\nconst props = defineProps<SliderRootProps>()\nconst emits = defineEmits<SliderRootEmits>()\n</script>\n\n<template>\n  <SliderRoot\n    :class=\"cn(\n      'relative flex w-full touch-none select-none items-center',\n      $attrs.class ?? '',\n    )\"\n    v-bind=\"{ ...props, ...useEmitAsProps(emits) }\"\n  >\n    <SliderTrack class=\"relative h-2 w-full grow overflow-hidden rounded-full bg-secondary\">\n      <SliderRange class=\"absolute h-full bg-primary\" />\n    </SliderTrack>\n    <SliderThumb class=\"block h-5 w-5 rounded-full border-2 border-primary bg-background ring-offset-background transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:pointer-events-none disabled:opacity-50\" />\n  </SliderRoot>\n</template>\n"
-    },
-    {
-      "name": "index.ts",
-      "content": "export { default as Slider } from './Slider.vue'\n"
-    }
-  ],
-  "type": "components:ui"
-}
diff --git a/apps/www/static/registry/styles/default/switch.json b/apps/www/static/registry/styles/default/switch.json
deleted file mode 100644
index 2c94598a..00000000
--- a/apps/www/static/registry/styles/default/switch.json
+++ /dev/null
@@ -1,20 +0,0 @@
-{
-  "name": "switch",
-  "dependencies": [
-    "radix-vue"
-  ],
-  "registryDependencies": [
-    "utils"
-  ],
-  "files": [
-    {
-      "name": "Switch.vue",
-      "content": "<script setup lang=\"ts\">\nimport {\n  SwitchRoot,\n  type SwitchRootEmits,\n  type SwitchRootProps,\n  SwitchThumb,\n} from 'radix-vue'\nimport { cn } from '@/lib/utils'\n\nconst props = defineProps<SwitchRootProps & { class?: string }>()\n\nconst emits = defineEmits<SwitchRootEmits>()\n</script>\n\n<template>\n  <SwitchRoot\n    v-bind=\"props\"\n    :class=\"\n      cn(\n        'peer inline-flex h-[24px] w-[44px] shrink-0 cursor-pointer items-center rounded-full border-2 border-transparent transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 focus-visible:ring-offset-background disabled:cursor-not-allowed disabled:opacity-50 data-[state=checked]:bg-primary data-[state=unchecked]:bg-input',\n        props.class,\n      )\n    \"\n    @update:checked=\"emits('update:checked', $event)\"\n  >\n    <SwitchThumb\n      :class=\"\n        cn(\n          'pointer-events-none block h-5 w-5 rounded-full bg-background shadow-lg ring-0 transition-transform data-[state=checked]:translate-x-5 data-[state=unchecked]:translate-x-0',\n        )\n      \"\n    />\n  </SwitchRoot>\n</template>\n"
-    },
-    {
-      "name": "index.ts",
-      "content": "export { default as Switch } from './Switch.vue'\n"
-    }
-  ],
-  "type": "components:ui"
-}
diff --git a/apps/www/static/registry/styles/default/table.json b/apps/www/static/registry/styles/default/table.json
deleted file mode 100644
index 8bec41dc..00000000
--- a/apps/www/static/registry/styles/default/table.json
+++ /dev/null
@@ -1,50 +0,0 @@
-{
-  "name": "table",
-  "dependencies": [],
-  "registryDependencies": [
-    "utils"
-  ],
-  "files": [
-    {
-      "name": "Table.vue",
-      "content": "<script setup lang=\"ts\">\nimport { cn } from '@/lib/utils'\n\nconst props = defineProps<{ class?: string }>()\n</script>\n\n<template>\n  <div class=\"w-full overflow-auto\">\n    <table :class=\"cn('w-full caption-bottom text-sm', props.class)\">\n      <slot />\n    </table>\n  </div>\n</template>\n"
-    },
-    {
-      "name": "TableBody.vue",
-      "content": "<script setup lang=\"ts\">\nimport { cn } from '@/lib/utils'\n\nconst props = defineProps<{ class?: string }>()\n</script>\n\n<template>\n  <tbody :class=\"cn('[&_tr:last-child]:border-0', props.class)\">\n    <slot />\n  </tbody>\n</template>\n"
-    },
-    {
-      "name": "TableCaption.vue",
-      "content": "<script setup lang=\"ts\">\nimport { cn } from '@/lib/utils'\n\nconst props = defineProps<{ class?: string }>()\n</script>\n\n<template>\n  <caption :class=\"cn('mt-4 text-sm text-muted-foreground', props.class)\">\n    <slot />\n  </caption>\n</template>\n"
-    },
-    {
-      "name": "TableCell.vue",
-      "content": "<script setup lang=\"ts\">\nimport { cn } from '@/lib/utils'\n\nconst props = defineProps<{ class?: string }>()\n</script>\n\n<template>\n  <td\n    :class=\"\n      cn(\n        'p-4 align-middle [&:has([role=checkbox])]:pr-0',\n        props.class,\n      )\n    \"\n  >\n    <slot />\n  </td>\n</template>\n"
-    },
-    {
-      "name": "TableEmpty.vue",
-      "content": "<script setup lang=\"ts\">\nimport TableRow from './TableRow.vue'\nimport TableCell from './TableCell.vue'\nimport { cn } from '@/lib/utils'\n\ninterface Props {\n  class?: string\n  colspan?: number\n}\n\nconst props = withDefaults(defineProps<Props>(), {\n  class: '',\n  colspan: 1,\n})\n</script>\n\n<template>\n  <TableRow>\n    <TableCell\n      :class=\"\n        cn(\n          'p-4 whitespace-nowrap align-middle text-sm text-foreground',\n          props.class,\n        )\n      \"\n      :colspan=\"props.colspan\"\n    >\n      <div class=\"flex items-center justify-center py-10\">\n        <slot />\n      </div>\n    </TableCell>\n  </TableRow>\n</template>\n"
-    },
-    {
-      "name": "TableFooter.vue",
-      "content": "<script setup lang=\"ts\">\nimport { cn } from '@/lib/utils'\n\nconst props = defineProps<{ class?: string }>()\n</script>\n\n<template>\n  <tfoot :class=\"cn('bg-primary font-medium text-primary-foreground', props.class)\">\n    <slot />\n  </tfoot>\n</template>\n"
-    },
-    {
-      "name": "TableHead.vue",
-      "content": "<script setup lang=\"ts\">\nimport { cn } from '@/lib/utils'\n\nconst props = defineProps<{ class?: string }>()\n</script>\n\n<template>\n  <th :class=\"cn('h-12 px-4 text-left align-middle font-medium text-muted-foreground [&:has([role=checkbox])]:pr-0', props.class)\">\n    <slot />\n  </th>\n</template>\n"
-    },
-    {
-      "name": "TableHeader.vue",
-      "content": "<script setup lang=\"ts\">\nimport { cn } from '@/lib/utils'\n\nconst props = defineProps<{ class?: string }>()\n</script>\n\n<template>\n  <thead :class=\"cn('[&_tr]:border-b', props.class)\">\n    <slot />\n  </thead>\n</template>\n"
-    },
-    {
-      "name": "TableRow.vue",
-      "content": "<script setup lang=\"ts\">\nimport { cn } from '@/lib/utils'\n\nconst props = defineProps<{ class?: string }>()\n</script>\n\n<template>\n  <tr :class=\"cn('border-b transition-colors hover:bg-muted/50 data-[state=selected]:bg-muted', props.class)\">\n    <slot />\n  </tr>\n</template>\n"
-    },
-    {
-      "name": "index.ts",
-      "content": "export { default as Table } from './Table.vue'\nexport { default as TableBody } from './TableBody.vue'\nexport { default as TableCell } from './TableCell.vue'\nexport { default as TableHead } from './TableHead.vue'\nexport { default as TableHeader } from './TableHeader.vue'\nexport { default as TableRow } from './TableRow.vue'\nexport { default as TableCaption } from './TableCaption.vue'\nexport { default as TableEmpty } from './TableEmpty.vue'\n"
-    }
-  ],
-  "type": "components:ui"
-}
diff --git a/apps/www/static/registry/styles/default/tabs.json b/apps/www/static/registry/styles/default/tabs.json
deleted file mode 100644
index 9767a0ef..00000000
--- a/apps/www/static/registry/styles/default/tabs.json
+++ /dev/null
@@ -1,32 +0,0 @@
-{
-  "name": "tabs",
-  "dependencies": [
-    "radix-vue"
-  ],
-  "registryDependencies": [
-    "utils"
-  ],
-  "files": [
-    {
-      "name": "Tabs.vue",
-      "content": "<script setup lang=\"ts\">\nimport { TabsRoot, type TabsRootProps } from 'radix-vue'\n\nconst props = defineProps<TabsRootProps>()\n</script>\n\n<template>\n  <TabsRoot v-bind=\"props\">\n    <slot />\n  </TabsRoot>\n</template>\n"
-    },
-    {
-      "name": "TabsContent.vue",
-      "content": "<script setup lang=\"ts\">\nimport { TabsContent, type TabsContentProps } from 'radix-vue'\nimport { cn } from '@/lib/utils'\n\nconst props = defineProps<TabsContentProps & { class?: string }>()\n</script>\n\n<template>\n  <TabsContent\n    :class=\"cn('mt-2 ring-offset-background focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2', props.class)\"\n    v-bind=\"props\"\n  >\n    <slot />\n  </TabsContent>\n</template>\n"
-    },
-    {
-      "name": "TabsList.vue",
-      "content": "<script setup lang=\"ts\">\nimport { TabsList, type TabsListProps } from 'radix-vue'\nimport { cn } from '@/lib/utils'\n\nconst props = defineProps<TabsListProps & { class?: string }>()\n</script>\n\n<template>\n  <TabsList\n    v-bind=\"props\"\n    :class=\"\n      cn(\n        'inline-flex h-10 items-center justify-center rounded-md bg-muted p-1 text-muted-foreground',\n        props.class,\n      )\n    \"\n  >\n    <slot />\n  </TabsList>\n</template>\n"
-    },
-    {
-      "name": "TabsTrigger.vue",
-      "content": "<script setup lang=\"ts\">\nimport { TabsTrigger, type TabsTriggerProps } from 'radix-vue'\nimport { cn } from '@/lib/utils'\n\nconst props = defineProps<TabsTriggerProps & { class?: string }>()\n</script>\n\n<template>\n  <TabsTrigger\n    v-bind=\"props\"\n    :class=\"\n      cn(\n        'inline-flex items-center justify-center whitespace-nowrap rounded-sm px-3 py-1.5 text-sm font-medium ring-offset-background transition-all focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:pointer-events-none disabled:opacity-50 data-[state=active]:bg-background data-[state=active]:text-foreground data-[state=active]:shadow-sm',\n        props.class,\n      )\n    \"\n  >\n    <slot />\n  </TabsTrigger>\n</template>\n"
-    },
-    {
-      "name": "index.ts",
-      "content": "export { default as Tabs } from './Tabs.vue'\nexport { default as TabsTrigger } from './TabsTrigger.vue'\nexport { default as TabsList } from './TabsList.vue'\nexport { default as TabsContent } from './TabsContent.vue'\n"
-    }
-  ],
-  "type": "components:ui"
-}
diff --git a/apps/www/static/registry/styles/default/textarea.json b/apps/www/static/registry/styles/default/textarea.json
deleted file mode 100644
index bee96c78..00000000
--- a/apps/www/static/registry/styles/default/textarea.json
+++ /dev/null
@@ -1,18 +0,0 @@
-{
-  "name": "textarea",
-  "dependencies": [],
-  "registryDependencies": [
-    "utils"
-  ],
-  "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"
-    },
-    {
-      "name": "index.ts",
-      "content": "export { default as Textarea } from './Textarea.vue'\n"
-    }
-  ],
-  "type": "components:ui"
-}
diff --git a/apps/www/static/registry/styles/default/toggle.json b/apps/www/static/registry/styles/default/toggle.json
deleted file mode 100644
index 1e9cf6a8..00000000
--- a/apps/www/static/registry/styles/default/toggle.json
+++ /dev/null
@@ -1,20 +0,0 @@
-{
-  "name": "toggle",
-  "dependencies": [
-    "radix-vue"
-  ],
-  "registryDependencies": [
-    "utils"
-  ],
-  "files": [
-    {
-      "name": "Toggle.vue",
-      "content": "<script setup lang=\"ts\">\nimport type { ToggleEmits, ToggleProps } from 'radix-vue'\nimport { Toggle } from 'radix-vue'\nimport type { VariantProps } from 'class-variance-authority'\nimport { computed } from 'vue'\nimport { toggleVariants } from '.'\nimport { cn, useEmitAsProps } from '@/lib/utils'\n\ninterface ToggleVariantProps extends VariantProps<typeof toggleVariants> {}\n\ninterface Props extends ToggleProps {\n  variant?: ToggleVariantProps['variant']\n  size?: ToggleVariantProps['size']\n}\nconst props = withDefaults(defineProps<Props>(), {\n  variant: 'default',\n  size: 'default',\n})\nconst emits = defineEmits<ToggleEmits>()\n\nconst toggleProps = computed(() => {\n  // eslint-disable-next-line unused-imports/no-unused-vars\n  const { variant, size, ...otherProps } = props\n  return otherProps\n})\n</script>\n\n<template>\n  <Toggle\n    v-bind=\"{ ...toggleProps, ...useEmitAsProps(emits) }\"\n    :class=\"cn(toggleVariants({ variant, size, class: $attrs.class ?? '' }))\"\n  >\n    <slot />\n  </Toggle>\n</template>\n"
-    },
-    {
-      "name": "index.ts",
-      "content": "import { cva } from 'class-variance-authority'\n\nexport { default as Toggle } from './Toggle.vue'\n\nexport const toggleVariants = cva(\n  'inline-flex items-center justify-center rounded-md text-sm font-medium ring-offset-background transition-colors hover:bg-muted hover:text-muted-foreground focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:pointer-events-none disabled:opacity-50 data-[state=on]:bg-accent data-[state=on]:text-accent-foreground',\n  {\n    variants: {\n      variant: {\n        default: 'bg-transparent',\n        outline:\n          'border border-input bg-transparent hover:bg-accent hover:text-accent-foreground',\n      },\n      size: {\n        default: 'h-10 px-3',\n        sm: 'h-9 px-2.5',\n        lg: 'h-11 px-5',\n      },\n    },\n    defaultVariants: {\n      variant: 'default',\n      size: 'default',\n    },\n  },\n)\n"
-    }
-  ],
-  "type": "components:ui"
-}
diff --git a/apps/www/static/registry/styles/default/tooltip.json b/apps/www/static/registry/styles/default/tooltip.json
deleted file mode 100644
index 0ae4f52f..00000000
--- a/apps/www/static/registry/styles/default/tooltip.json
+++ /dev/null
@@ -1,32 +0,0 @@
-{
-  "name": "tooltip",
-  "dependencies": [
-    "radix-vue"
-  ],
-  "registryDependencies": [
-    "utils"
-  ],
-  "files": [
-    {
-      "name": "Tooltip.vue",
-      "content": "<script setup lang=\"ts\">\nimport { TooltipRoot, type TooltipRootEmits, type TooltipRootProps } from 'radix-vue'\nimport { useEmitAsProps } from '@/lib/utils'\n\nconst props = defineProps<TooltipRootProps>()\nconst emits = defineEmits<TooltipRootEmits>()\n</script>\n\n<template>\n  <TooltipRoot v-bind=\"{ ...props, ...useEmitAsProps(emits) }\">\n    <slot />\n  </TooltipRoot>\n</template>\n"
-    },
-    {
-      "name": "TooltipContent.vue",
-      "content": "<script setup lang=\"ts\">\nimport { TooltipContent, type TooltipContentEmits, type TooltipContentProps } from 'radix-vue'\nimport { cn, useEmitAsProps } from '@/lib/utils'\n\nconst props = withDefaults(defineProps<TooltipContentProps>(), {\n  sideOffset: 4,\n})\nconst emits = defineEmits<TooltipContentEmits>()\n</script>\n\n<template>\n  <TooltipContent v-bind=\"{ ...props, ...useEmitAsProps(emits) }\" :class=\"cn('z-50 overflow-hidden rounded-md border bg-popover px-3 py-1.5 text-sm text-popover-foreground shadow-md animate-in fade-in-0 zoom-in-95 data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=closed]:zoom-out-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2', $attrs.class ?? '')\">\n    <slot />\n  </TooltipContent>\n</template>\n"
-    },
-    {
-      "name": "TooltipProvider.vue",
-      "content": "<script setup lang=\"ts\">\nimport { TooltipProvider, type TooltipProviderProps } from 'radix-vue'\n\nconst props = defineProps<TooltipProviderProps>()\n</script>\n\n<template>\n  <TooltipProvider v-bind=\"props\">\n    <slot />\n  </TooltipProvider>\n</template>\n"
-    },
-    {
-      "name": "TooltipTrigger.vue",
-      "content": "<script setup lang=\"ts\">\nimport { TooltipTrigger, type TooltipTriggerProps } from 'radix-vue'\n\nconst props = defineProps<TooltipTriggerProps>()\n</script>\n\n<template>\n  <TooltipTrigger v-bind=\"props\">\n    <slot />\n  </TooltipTrigger>\n</template>\n"
-    },
-    {
-      "name": "index.ts",
-      "content": "export { default as Tooltip } from './Tooltip.vue'\nexport { default as TooltipContent } from './TooltipContent.vue'\nexport { default as TooltipTrigger } from './TooltipTrigger.vue'\nexport { default as TooltipProvider } from './TooltipProvider.vue'\n"
-    }
-  ],
-  "type": "components:ui"
-}
diff --git a/apps/www/static/registry/styles/index.json b/apps/www/static/registry/styles/index.json
deleted file mode 100644
index 3617dfb4..00000000
--- a/apps/www/static/registry/styles/index.json
+++ /dev/null
@@ -1,6 +0,0 @@
-[
-  {
-    "name": "default",
-    "label": "Default"
-  }
-]
diff --git a/apps/www/static/registry/themes.css b/apps/www/static/registry/themes.css
deleted file mode 100644
index ce73cad2..00000000
--- a/apps/www/static/registry/themes.css
+++ /dev/null
@@ -1,768 +0,0 @@
-
-  .theme-zinc {
-    --background: 0 0% 100%;
-    --foreground: 240 10% 3.9%;
- 
-    --muted: 240 4.8% 95.9%;
-    --muted-foreground: 240 3.8% 46.1%;
- 
-    --popover: 0 0% 100%;
-    --popover-foreground: 240 10% 3.9%;
- 
-    --card: 0 0% 100%;
-    --card-foreground: 240 10% 3.9%;
- 
-    --border: 240 5.9% 90%;
-    --input: 240 5.9% 90%;
- 
-    --primary: 240 5.9% 10%;
-    --primary-foreground: 0 0% 98%;
- 
-    --secondary: 240 4.8% 95.9%;
-    --secondary-foreground: 240 5.9% 10%;
- 
-    --accent: 240 4.8% 95.9%;
-    --accent-foreground: 240 5.9% 10%;
- 
-    --destructive: 0 84.2% 60.2%;
-    --destructive-foreground: 0 0% 98%;
- 
-    --ring: 240 5.9% 10%;
- 
-    --radius: 0.5rem;
-  }
- 
-  .dark .theme-zinc {
-    --background: 240 10% 3.9%;
-    --foreground: 0 0% 98%;
- 
-    --muted: 240 3.7% 15.9%;
-    --muted-foreground: 240 5% 64.9%;
- 
-    --popover: 240 10% 3.9%;
-    --popover-foreground: 0 0% 98%;
- 
-    --card: 240 10% 3.9%;
-    --card-foreground: 0 0% 98%;
- 
-    --border: 240 3.7% 15.9%;
-    --input: 240 3.7% 15.9%;
- 
-    --primary: 0 0% 98%;
-    --primary-foreground: 240 5.9% 10%;
- 
-    --secondary: 240 3.7% 15.9%;
-    --secondary-foreground: 0 0% 98%;
- 
-    --accent: 240 3.7% 15.9%;
-    --accent-foreground: 0 0% 98%;
- 
-    --destructive: 0 62.8% 30.6%;
-    --destructive-foreground: 0 0% 98%;
- 
-    --ring: 240 4.9% 83.9%;
-  }
-
-  .theme-slate {
-    --background: 0 0% 100%;
-    --foreground: 222.2 84% 4.9%;
- 
-    --muted: 210 40% 96.1%;
-    --muted-foreground: 215.4 16.3% 46.9%;
- 
-    --popover: 0 0% 100%;
-    --popover-foreground: 222.2 84% 4.9%;
- 
-    --card: 0 0% 100%;
-    --card-foreground: 222.2 84% 4.9%;
- 
-    --border: 214.3 31.8% 91.4%;
-    --input: 214.3 31.8% 91.4%;
- 
-    --primary: 222.2 47.4% 11.2%;
-    --primary-foreground: 210 40% 98%;
- 
-    --secondary: 210 40% 96.1%;
-    --secondary-foreground: 222.2 47.4% 11.2%;
- 
-    --accent: 210 40% 96.1%;
-    --accent-foreground: 222.2 47.4% 11.2%;
- 
-    --destructive: 0 84.2% 60.2%;
-    --destructive-foreground: 210 40% 98%;
- 
-    --ring: 222.2 84% 4.9%;
- 
-    --radius: 0.5rem;
-  }
- 
-  .dark .theme-slate {
-    --background: 222.2 84% 4.9%;
-    --foreground: 210 40% 98%;
- 
-    --muted: 217.2 32.6% 17.5%;
-    --muted-foreground: 215 20.2% 65.1%;
- 
-    --popover: 222.2 84% 4.9%;
-    --popover-foreground: 210 40% 98%;
- 
-    --card: 222.2 84% 4.9%;
-    --card-foreground: 210 40% 98%;
- 
-    --border: 217.2 32.6% 17.5%;
-    --input: 217.2 32.6% 17.5%;
- 
-    --primary: 210 40% 98%;
-    --primary-foreground: 222.2 47.4% 11.2%;
- 
-    --secondary: 217.2 32.6% 17.5%;
-    --secondary-foreground: 210 40% 98%;
- 
-    --accent: 217.2 32.6% 17.5%;
-    --accent-foreground: 210 40% 98%;
- 
-    --destructive: 0 62.8% 30.6%;
-    --destructive-foreground: 210 40% 98%;
- 
-    --ring: 212.7 26.8% 83.9;
-  }
-
-  .theme-stone {
-    --background: 0 0% 100%;
-    --foreground: 20 14.3% 4.1%;
- 
-    --muted: 60 4.8% 95.9%;
-    --muted-foreground: 25 5.3% 44.7%;
- 
-    --popover: 0 0% 100%;
-    --popover-foreground: 20 14.3% 4.1%;
- 
-    --card: 0 0% 100%;
-    --card-foreground: 20 14.3% 4.1%;
- 
-    --border: 20 5.9% 90%;
-    --input: 20 5.9% 90%;
- 
-    --primary: 24 9.8% 10%;
-    --primary-foreground: 60 9.1% 97.8%;
- 
-    --secondary: 60 4.8% 95.9%;
-    --secondary-foreground: 24 9.8% 10%;
- 
-    --accent: 60 4.8% 95.9%;
-    --accent-foreground: 24 9.8% 10%;
- 
-    --destructive: 0 84.2% 60.2%;
-    --destructive-foreground: 60 9.1% 97.8%;
- 
-    --ring: 20 14.3% 4.1%;
- 
-    --radius: 0.5rem;
-  }
- 
-  .dark .theme-stone {
-    --background: 20 14.3% 4.1%;
-    --foreground: 60 9.1% 97.8%;
- 
-    --muted: 12 6.5% 15.1%;
-    --muted-foreground: 24 5.4% 63.9%;
- 
-    --popover: 20 14.3% 4.1%;
-    --popover-foreground: 60 9.1% 97.8%;
- 
-    --card: 20 14.3% 4.1%;
-    --card-foreground: 60 9.1% 97.8%;
- 
-    --border: 12 6.5% 15.1%;
-    --input: 12 6.5% 15.1%;
- 
-    --primary: 60 9.1% 97.8%;
-    --primary-foreground: 24 9.8% 10%;
- 
-    --secondary: 12 6.5% 15.1%;
-    --secondary-foreground: 60 9.1% 97.8%;
- 
-    --accent: 12 6.5% 15.1%;
-    --accent-foreground: 60 9.1% 97.8%;
- 
-    --destructive: 0 62.8% 30.6%;
-    --destructive-foreground: 60 9.1% 97.8%;
- 
-    --ring: 24 5.7% 82.9%;
-  }
-
-  .theme-gray {
-    --background: 0 0% 100%;
-    --foreground: 224 71.4% 4.1%;
- 
-    --muted: 220 14.3% 95.9%;
-    --muted-foreground: 220 8.9% 46.1%;
- 
-    --popover: 0 0% 100%;
-    --popover-foreground: 224 71.4% 4.1%;
- 
-    --card: 0 0% 100%;
-    --card-foreground: 224 71.4% 4.1%;
- 
-    --border: 220 13% 91%;
-    --input: 220 13% 91%;
- 
-    --primary: 220.9 39.3% 11%;
-    --primary-foreground: 210 20% 98%;
- 
-    --secondary: 220 14.3% 95.9%;
-    --secondary-foreground: 220.9 39.3% 11%;
- 
-    --accent: 220 14.3% 95.9%;
-    --accent-foreground: 220.9 39.3% 11%;
- 
-    --destructive: 0 84.2% 60.2%;
-    --destructive-foreground: 210 20% 98%;
- 
-    --ring: 224 71.4% 4.1%;
- 
-    --radius: 0.5rem;
-  }
- 
-  .dark .theme-gray {
-    --background: 224 71.4% 4.1%;
-    --foreground: 210 20% 98%;
- 
-    --muted: 215 27.9% 16.9%;
-    --muted-foreground: 217.9 10.6% 64.9%;
- 
-    --popover: 224 71.4% 4.1%;
-    --popover-foreground: 210 20% 98%;
- 
-    --card: 224 71.4% 4.1%;
-    --card-foreground: 210 20% 98%;
- 
-    --border: 215 27.9% 16.9%;
-    --input: 215 27.9% 16.9%;
- 
-    --primary: 210 20% 98%;
-    --primary-foreground: 220.9 39.3% 11%;
- 
-    --secondary: 215 27.9% 16.9%;
-    --secondary-foreground: 210 20% 98%;
- 
-    --accent: 215 27.9% 16.9%;
-    --accent-foreground: 210 20% 98%;
- 
-    --destructive: 0 62.8% 30.6%;
-    --destructive-foreground: 210 20% 98%;
- 
-    --ring: 216 12.2% 83.9%;
-  }
-
-  .theme-neutral {
-    --background: 0 0% 100%;
-    --foreground: 0 0% 3.9%;
- 
-    --muted: 0 0% 96.1%;
-    --muted-foreground: 0 0% 45.1%;
- 
-    --popover: 0 0% 100%;
-    --popover-foreground: 0 0% 3.9%;
- 
-    --card: 0 0% 100%;
-    --card-foreground: 0 0% 3.9%;
- 
-    --border: 0 0% 89.8%;
-    --input: 0 0% 89.8%;
- 
-    --primary: 0 0% 9%;
-    --primary-foreground: 0 0% 98%;
- 
-    --secondary: 0 0% 96.1%;
-    --secondary-foreground: 0 0% 9%;
- 
-    --accent: 0 0% 96.1%;
-    --accent-foreground: 0 0% 9%;
- 
-    --destructive: 0 84.2% 60.2%;
-    --destructive-foreground: 0 0% 98%;
- 
-    --ring: 0 0% 3.9%;
- 
-    --radius: 0.5rem;
-  }
- 
-  .dark .theme-neutral {
-    --background: 0 0% 3.9%;
-    --foreground: 0 0% 98%;
- 
-    --muted: 0 0% 14.9%;
-    --muted-foreground: 0 0% 63.9%;
- 
-    --popover: 0 0% 3.9%;
-    --popover-foreground: 0 0% 98%;
- 
-    --card: 0 0% 3.9%;
-    --card-foreground: 0 0% 98%;
- 
-    --border: 0 0% 14.9%;
-    --input: 0 0% 14.9%;
- 
-    --primary: 0 0% 98%;
-    --primary-foreground: 0 0% 9%;
- 
-    --secondary: 0 0% 14.9%;
-    --secondary-foreground: 0 0% 98%;
- 
-    --accent: 0 0% 14.9%;
-    --accent-foreground: 0 0% 98%;
- 
-    --destructive: 0 62.8% 30.6%;
-    --destructive-foreground: 0 0% 98%;
- 
-    --ring: 0 0% 83.1%;
-  }
-
-  .theme-red {
-    --background: 0 0% 100%;
-    --foreground: 0 0% 3.9%;
- 
-    --muted: 0 0% 96.1%;
-    --muted-foreground: 0 0% 45.1%;
- 
-    --popover: 0 0% 100%;
-    --popover-foreground: 0 0% 3.9%;
- 
-    --card: 0 0% 100%;
-    --card-foreground: 0 0% 3.9%;
- 
-    --border: 0 0% 89.8%;
-    --input: 0 0% 89.8%;
- 
-    --primary: 0 72.2% 50.6%;
-    --primary-foreground: 0 85.7% 97.3%;
- 
-    --secondary: 0 0% 96.1%;
-    --secondary-foreground: 0 0% 9%;
- 
-    --accent: 0 0% 96.1%;
-    --accent-foreground: 0 0% 9%;
- 
-    --destructive: 0 84.2% 60.2%;
-    --destructive-foreground: 0 0% 98%;
- 
-    --ring: 0 72.2% 50.6%;
- 
-    --radius: 0.5rem;
-  }
- 
-  .dark .theme-red {
-    --background: 0 0% 3.9%;
-    --foreground: 0 0% 98%;
- 
-    --muted: 0 0% 14.9%;
-    --muted-foreground: 0 0% 63.9%;
- 
-    --popover: 0 0% 3.9%;
-    --popover-foreground: 0 0% 98%;
- 
-    --card: 0 0% 3.9%;
-    --card-foreground: 0 0% 98%;
- 
-    --border: 0 0% 14.9%;
-    --input: 0 0% 14.9%;
- 
-    --primary: 0 72.2% 50.6%;
-    --primary-foreground: 0 85.7% 97.3%;
- 
-    --secondary: 0 0% 14.9%;
-    --secondary-foreground: 0 0% 98%;
- 
-    --accent: 0 0% 14.9%;
-    --accent-foreground: 0 0% 98%;
- 
-    --destructive: 0 62.8% 30.6%;
-    --destructive-foreground: 0 0% 98%;
- 
-    --ring: 0 72.2% 50.6%;
-  }
-
-  .theme-rose {
-    --background: 0 0% 100%;
-    --foreground: 240 10% 3.9%;
- 
-    --muted: 240 4.8% 95.9%;
-    --muted-foreground: 240 3.8% 46.1%;
- 
-    --popover: 0 0% 100%;
-    --popover-foreground: 240 10% 3.9%;
- 
-    --card: 0 0% 100%;
-    --card-foreground: 240 10% 3.9%;
- 
-    --border: 240 5.9% 90%;
-    --input: 240 5.9% 90%;
- 
-    --primary: 346.8 77.2% 49.8%;
-    --primary-foreground: 355.7 100% 97.3%;
- 
-    --secondary: 240 4.8% 95.9%;
-    --secondary-foreground: 240 5.9% 10%;
- 
-    --accent: 240 4.8% 95.9%;
-    --accent-foreground: 240 5.9% 10%;
- 
-    --destructive: 0 84.2% 60.2%;
-    --destructive-foreground: 0 0% 98%;
- 
-    --ring: 346.8 77.2% 49.8%;
- 
-    --radius: 0.5rem;
-  }
- 
-  .dark .theme-rose {
-    --background: 20 14.3% 4.1%;
-    --foreground: 0 0% 95%;
- 
-    --muted: 0 0% 15%;
-    --muted-foreground: 240 5% 64.9%;
- 
-    --popover: 0 0% 9%;
-    --popover-foreground: 0 0% 95%;
- 
-    --card: 24 9.8% 10%;
-    --card-foreground: 0 0% 95%;
- 
-    --border: 240 3.7% 15.9%;
-    --input: 240 3.7% 15.9%;
- 
-    --primary: 346.8 77.2% 49.8%;
-    --primary-foreground: 355.7 100% 97.3%;
- 
-    --secondary: 240 3.7% 15.9%;
-    --secondary-foreground: 0 0% 98%;
- 
-    --accent: 12 6.5% 15.1%;
-    --accent-foreground: 0 0% 98%;
- 
-    --destructive: 0 62.8% 30.6%;
-    --destructive-foreground: 0 85.7% 97.3%;
- 
-    --ring: 346.8 77.2% 49.8%;
-  }
-
-  .theme-orange {
-    --background: 0 0% 100%;
-    --foreground: 20 14.3% 4.1%;
- 
-    --muted: 60 4.8% 95.9%;
-    --muted-foreground: 25 5.3% 44.7%;
- 
-    --popover: 0 0% 100%;
-    --popover-foreground: 20 14.3% 4.1%;
- 
-    --card: 0 0% 100%;
-    --card-foreground: 20 14.3% 4.1%;
- 
-    --border: 20 5.9% 90%;
-    --input: 20 5.9% 90%;
- 
-    --primary: 24.6 95% 53.1%;
-    --primary-foreground: 60 9.1% 97.8%;
- 
-    --secondary: 60 4.8% 95.9%;
-    --secondary-foreground: 24 9.8% 10%;
- 
-    --accent: 60 4.8% 95.9%;
-    --accent-foreground: 24 9.8% 10%;
- 
-    --destructive: 0 84.2% 60.2%;
-    --destructive-foreground: 60 9.1% 97.8%;
- 
-    --ring: 24.6 95% 53.1%;
- 
-    --radius: 0.5rem;
-  }
- 
-  .dark .theme-orange {
-    --background: 20 14.3% 4.1%;
-    --foreground: 60 9.1% 97.8%;
- 
-    --muted: 12 6.5% 15.1%;
-    --muted-foreground: 24 5.4% 63.9%;
- 
-    --popover: 20 14.3% 4.1%;
-    --popover-foreground: 60 9.1% 97.8%;
- 
-    --card: 20 14.3% 4.1%;
-    --card-foreground: 60 9.1% 97.8%;
- 
-    --border: 12 6.5% 15.1%;
-    --input: 12 6.5% 15.1%;
- 
-    --primary: 20.5 90.2% 48.2%;
-    --primary-foreground: 60 9.1% 97.8%;
- 
-    --secondary: 12 6.5% 15.1%;
-    --secondary-foreground: 60 9.1% 97.8%;
- 
-    --accent: 12 6.5% 15.1%;
-    --accent-foreground: 60 9.1% 97.8%;
- 
-    --destructive: 0 72.2% 50.6%;
-    --destructive-foreground: 60 9.1% 97.8%;
- 
-    --ring: 20.5 90.2% 48.2%;
-  }
-
-  .theme-green {
-    --background: 0 0% 100%;
-    --foreground: 240 10% 3.9%;
- 
-    --muted: 240 4.8% 95.9%;
-    --muted-foreground: 240 3.8% 46.1%;
- 
-    --popover: 0 0% 100%;
-    --popover-foreground: 240 10% 3.9%;
- 
-    --card: 0 0% 100%;
-    --card-foreground: 240 10% 3.9%;
- 
-    --border: 240 5.9% 90%;
-    --input: 240 5.9% 90%;
- 
-    --primary: 142.1 76.2% 36.3%;
-    --primary-foreground: 355.7 100% 97.3%;
- 
-    --secondary: 240 4.8% 95.9%;
-    --secondary-foreground: 240 5.9% 10%;
- 
-    --accent: 240 4.8% 95.9%;
-    --accent-foreground: 240 5.9% 10%;
- 
-    --destructive: 0 84.2% 60.2%;
-    --destructive-foreground: 0 0% 98%;
- 
-    --ring: 142.1 76.2% 36.3%;
- 
-    --radius: 0.5rem;
-  }
- 
-  .dark .theme-green {
-    --background: 20 14.3% 4.1%;
-    --foreground: 0 0% 95%;
- 
-    --muted: 0 0% 15%;
-    --muted-foreground: 240 5% 64.9%;
- 
-    --popover: 0 0% 9%;
-    --popover-foreground: 0 0% 95%;
- 
-    --card: 24 9.8% 10%;
-    --card-foreground: 0 0% 95%;
- 
-    --border: 240 3.7% 15.9%;
-    --input: 240 3.7% 15.9%;
- 
-    --primary: 142.1 70.6% 45.3%;
-    --primary-foreground: 144.9 80.4% 10%;
- 
-    --secondary: 240 3.7% 15.9%;
-    --secondary-foreground: 0 0% 98%;
- 
-    --accent: 12 6.5% 15.1%;
-    --accent-foreground: 0 0% 98%;
- 
-    --destructive: 0 62.8% 30.6%;
-    --destructive-foreground: 0 85.7% 97.3%;
- 
-    --ring: 142.4 71.8% 29.2%;
-  }
-
-  .theme-blue {
-    --background: 0 0% 100%;
-    --foreground: 222.2 84% 4.9%;
- 
-    --muted: 210 40% 96.1%;
-    --muted-foreground: 215.4 16.3% 46.9%;
- 
-    --popover: 0 0% 100%;
-    --popover-foreground: 222.2 84% 4.9%;
- 
-    --card: 0 0% 100%;
-    --card-foreground: 222.2 84% 4.9%;
- 
-    --border: 214.3 31.8% 91.4%;
-    --input: 214.3 31.8% 91.4%;
- 
-    --primary: 221.2 83.2% 53.3%;
-    --primary-foreground: 210 40% 98%;
- 
-    --secondary: 210 40% 96.1%;
-    --secondary-foreground: 222.2 47.4% 11.2%;
- 
-    --accent: 210 40% 96.1%;
-    --accent-foreground: 222.2 47.4% 11.2%;
- 
-    --destructive: 0 84.2% 60.2%;
-    --destructive-foreground: 210 40% 98%;
- 
-    --ring: 221.2 83.2% 53.3%;
- 
-    --radius: 0.5rem;
-  }
- 
-  .dark .theme-blue {
-    --background: 222.2 84% 4.9%;
-    --foreground: 210 40% 98%;
- 
-    --muted: 217.2 32.6% 17.5%;
-    --muted-foreground: 215 20.2% 65.1%;
- 
-    --popover: 222.2 84% 4.9%;
-    --popover-foreground: 210 40% 98%;
- 
-    --card: 222.2 84% 4.9%;
-    --card-foreground: 210 40% 98%;
- 
-    --border: 217.2 32.6% 17.5%;
-    --input: 217.2 32.6% 17.5%;
- 
-    --primary: 217.2 91.2% 59.8%;
-    --primary-foreground: 222.2 47.4% 11.2%;
- 
-    --secondary: 217.2 32.6% 17.5%;
-    --secondary-foreground: 210 40% 98%;
- 
-    --accent: 217.2 32.6% 17.5%;
-    --accent-foreground: 210 40% 98%;
- 
-    --destructive: 0 62.8% 30.6%;
-    --destructive-foreground: 210 40% 98%;
- 
-    --ring: 224.3 76.3% 48%;
-  }
-
-  .theme-yellow {
-    --background: 0 0% 100%;
-    --foreground: 20 14.3% 4.1%;
- 
-    --muted: 60 4.8% 95.9%;
-    --muted-foreground: 25 5.3% 44.7%;
- 
-    --popover: 0 0% 100%;
-    --popover-foreground: 20 14.3% 4.1%;
- 
-    --card: 0 0% 100%;
-    --card-foreground: 20 14.3% 4.1%;
- 
-    --border: 20 5.9% 90%;
-    --input: 20 5.9% 90%;
- 
-    --primary: 47.9 95.8% 53.1%;
-    --primary-foreground: 26 83.3% 14.1%;
- 
-    --secondary: 60 4.8% 95.9%;
-    --secondary-foreground: 24 9.8% 10%;
- 
-    --accent: 60 4.8% 95.9%;
-    --accent-foreground: 24 9.8% 10%;
- 
-    --destructive: 0 84.2% 60.2%;
-    --destructive-foreground: 60 9.1% 97.8%;
- 
-    --ring: 20 14.3% 4.1%;
- 
-    --radius: 0.5rem;
-  }
- 
-  .dark .theme-yellow {
-    --background: 20 14.3% 4.1%;
-    --foreground: 60 9.1% 97.8%;
- 
-    --muted: 12 6.5% 15.1%;
-    --muted-foreground: 24 5.4% 63.9%;
- 
-    --popover: 20 14.3% 4.1%;
-    --popover-foreground: 60 9.1% 97.8%;
- 
-    --card: 20 14.3% 4.1%;
-    --card-foreground: 60 9.1% 97.8%;
- 
-    --border: 12 6.5% 15.1%;
-    --input: 12 6.5% 15.1%;
- 
-    --primary: 47.9 95.8% 53.1%;
-    --primary-foreground: 26 83.3% 14.1%;
- 
-    --secondary: 12 6.5% 15.1%;
-    --secondary-foreground: 60 9.1% 97.8%;
- 
-    --accent: 12 6.5% 15.1%;
-    --accent-foreground: 60 9.1% 97.8%;
- 
-    --destructive: 0 62.8% 30.6%;
-    --destructive-foreground: 60 9.1% 97.8%;
- 
-    --ring: 35.5 91.7% 32.9%;
-  }
-
-  .theme-violet {
-    --background: 0 0% 100%;
-    --foreground: 224 71.4% 4.1%;
- 
-    --muted: 220 14.3% 95.9%;
-    --muted-foreground: 220 8.9% 46.1%;
- 
-    --popover: 0 0% 100%;
-    --popover-foreground: 224 71.4% 4.1%;
- 
-    --card: 0 0% 100%;
-    --card-foreground: 224 71.4% 4.1%;
- 
-    --border: 220 13% 91%;
-    --input: 220 13% 91%;
- 
-    --primary: 262.1 83.3% 57.8%;
-    --primary-foreground: 210 20% 98%;
- 
-    --secondary: 220 14.3% 95.9%;
-    --secondary-foreground: 220.9 39.3% 11%;
- 
-    --accent: 220 14.3% 95.9%;
-    --accent-foreground: 220.9 39.3% 11%;
- 
-    --destructive: 0 84.2% 60.2%;
-    --destructive-foreground: 210 20% 98%;
- 
-    --ring: 262.1 83.3% 57.8%;
- 
-    --radius: 0.5rem;
-  }
- 
-  .dark .theme-violet {
-    --background: 224 71.4% 4.1%;
-    --foreground: 210 20% 98%;
- 
-    --muted: 215 27.9% 16.9%;
-    --muted-foreground: 217.9 10.6% 64.9%;
- 
-    --popover: 224 71.4% 4.1%;
-    --popover-foreground: 210 20% 98%;
- 
-    --card: 224 71.4% 4.1%;
-    --card-foreground: 210 20% 98%;
- 
-    --border: 215 27.9% 16.9%;
-    --input: 215 27.9% 16.9%;
- 
-    --primary: 263.4 70% 50.4%;
-    --primary-foreground: 210 20% 98%;
- 
-    --secondary: 215 27.9% 16.9%;
-    --secondary-foreground: 210 20% 98%;
- 
-    --accent: 215 27.9% 16.9%;
-    --accent-foreground: 210 20% 98%;
- 
-    --destructive: 0 62.8% 30.6%;
-    --destructive-foreground: 210 20% 98%;
- 
-    --ring: 263.4 70% 50.4%;
-  }
\ No newline at end of file