diff --git a/apps/www/__registry__/index.ts b/apps/www/__registry__/index.ts
index dcb8a9b4..4f8045fe 100644
--- a/apps/www/__registry__/index.ts
+++ b/apps/www/__registry__/index.ts
@@ -58,6 +58,13 @@ export const Index = {
       component: () => import('../src/lib/registry/default/example/CalendarDemo.vue').then(m => m.default),
       files: ['../src/lib/registry/default/example/CalendarDemo.vue'],
     },
+    CardChat: {
+      name: 'CardChat',
+      type: 'components:example',
+      registryDependencies: ['card', 'dialog', 'command', 'avatar', 'tooltip', 'button', 'input', 'utils'],
+      component: () => import('../src/lib/registry/default/example/CardChat.vue').then(m => m.default),
+      files: ['../src/lib/registry/default/example/CardChat.vue'],
+    },
     CardDemo: {
       name: 'CardDemo',
       type: 'components:example',
@@ -65,6 +72,13 @@ export const Index = {
       component: () => import('../src/lib/registry/default/example/CardDemo.vue').then(m => m.default),
       files: ['../src/lib/registry/default/example/CardDemo.vue'],
     },
+    CardStats: {
+      name: 'CardStats',
+      type: 'components:example',
+      registryDependencies: ['card', 'config', 'themes'],
+      component: () => import('../src/lib/registry/default/example/CardStats.vue').then(m => m.default),
+      files: ['../src/lib/registry/default/example/CardStats.vue'],
+    },
     CardWithForm: {
       name: 'CardWithForm',
       type: 'components:example',
@@ -459,6 +473,13 @@ export const Index = {
       component: () => import('../src/lib/registry/new-york/example/CalendarDemo.vue').then(m => m.default),
       files: ['../src/lib/registry/new-york/example/CalendarDemo.vue'],
     },
+    CardChat: {
+      name: 'CardChat',
+      type: 'components:example',
+      registryDependencies: ['card', 'dialog', 'command', 'avatar', 'tooltip', 'button', 'input', 'utils'],
+      component: () => import('../src/lib/registry/new-york/example/CardChat.vue').then(m => m.default),
+      files: ['../src/lib/registry/new-york/example/CardChat.vue'],
+    },
     CardDemo: {
       name: 'CardDemo',
       type: 'components:example',
@@ -466,6 +487,13 @@ export const Index = {
       component: () => import('../src/lib/registry/new-york/example/CardDemo.vue').then(m => m.default),
       files: ['../src/lib/registry/new-york/example/CardDemo.vue'],
     },
+    CardStats: {
+      name: 'CardStats',
+      type: 'components:example',
+      registryDependencies: ['card', 'config', 'themes'],
+      component: () => import('../src/lib/registry/new-york/example/CardStats.vue').then(m => m.default),
+      files: ['../src/lib/registry/new-york/example/CardStats.vue'],
+    },
     CardWithForm: {
       name: 'CardWithForm',
       type: 'components:example',
diff --git a/apps/www/src/public/registry/styles/default/dialog.json b/apps/www/src/public/registry/styles/default/dialog.json
index eddeca38..b24ac486 100644
--- a/apps/www/src/public/registry/styles/default/dialog.json
+++ b/apps/www/src/public/registry/styles/default/dialog.json
@@ -13,7 +13,7 @@
     },
     {
       "name": "DialogContent.vue",
-      "content": "<script setup lang=\"ts\">\nimport {\n  DialogClose,\n  DialogContent,\n  type DialogContentEmits,\n  type DialogContentProps,\n  DialogOverlay,\n  DialogPortal,\n} from 'radix-vue'\nimport { 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-3 right-3 p-0.5 transition-colors rounded-md hover:bg-secondary\"\n      >\n        <X class=\"w-4 h-4\" />\n        <span class=\"sr-only\">Close</span>\n      </DialogClose>\n    </DialogContent>\n  </DialogPortal>\n</template>\n"
+      "content": "<script setup lang=\"ts\">\nimport {\n  DialogClose,\n  DialogContent,\n  type DialogContentEmits,\n  type DialogContentProps,\n  DialogOverlay,\n  DialogPortal,\n} from 'radix-vue'\nimport { 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-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-3 right-3 p-0.5 transition-colors rounded-md hover:bg-secondary\"\n      >\n        <X class=\"w-4 h-4\" />\n        <span class=\"sr-only\">Close</span>\n      </DialogClose>\n    </DialogContent>\n  </DialogPortal>\n</template>\n"
     },
     {
       "name": "DialogDescription.vue",
diff --git a/apps/www/src/public/registry/styles/default/popover.json b/apps/www/src/public/registry/styles/default/popover.json
index 7c8792e5..cc62229b 100644
--- a/apps/www/src/public/registry/styles/default/popover.json
+++ b/apps/www/src/public/registry/styles/default/popover.json
@@ -17,7 +17,7 @@
     },
     {
       "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\" class=\"\">\n    <slot />\n  </PopoverTrigger>\n</template>\n"
+      "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",
diff --git a/apps/www/src/public/registry/styles/default/tooltip.json b/apps/www/src/public/registry/styles/default/tooltip.json
index cb18bad0..f7b4ca0a 100644
--- a/apps/www/src/public/registry/styles/default/tooltip.json
+++ b/apps/www/src/public/registry/styles/default/tooltip.json
@@ -21,7 +21,7 @@
     },
     {
       "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\" class=\"\">\n    <slot />\n  </TooltipTrigger>\n</template>\n"
+      "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",
diff --git a/apps/www/src/public/registry/styles/new-york/select.json b/apps/www/src/public/registry/styles/new-york/select.json
index 4e993241..35d5ee2e 100644
--- a/apps/www/src/public/registry/styles/new-york/select.json
+++ b/apps/www/src/public/registry/styles/new-york/select.json
@@ -13,7 +13,7 @@
     },
     {
       "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-0',\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"
+      "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-[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          props.class,\n        )\n      \"\n    >\n      <SelectViewport\n        :class=\"\n          cn('p-0',\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",
@@ -37,7 +37,7 @@
     },
     {
       "name": "SelectTrigger.vue",
-      "content": "<script setup lang=\"ts\">\nimport { SelectIcon, SelectTrigger, type SelectTriggerProps } from 'radix-vue'\nimport RadixIconsChevronDown from '~icons/radix-icons/chevron-down'\nimport { cn } from '@/lib/utils'\n\nconst props = withDefaults(\n  defineProps<SelectTriggerProps & { class?: string; invalid?: boolean }>(),\n  {\n    class: '',\n    invalid: false,\n  },\n)\n</script>\n\n<template>\n  <SelectTrigger\n    v-bind=\"props\"\n    :class=\"[\n      cn(\n        'flex h-9 w-full items-center justify-between rounded-md border border-input bg-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      <RadixIconsChevronDown class=\"w-4 h-4 opacity-50\" />\n    </SelectIcon>\n  </SelectTrigger>\n</template>\n"
+      "content": "<script setup lang=\"ts\">\nimport { SelectIcon, SelectTrigger, type SelectTriggerProps } from 'radix-vue'\nimport RadixIconsChevronDown from '~icons/radix-icons/chevron-down'\nimport { cn } from '@/lib/utils'\n\nconst props = withDefaults(\n  defineProps<SelectTriggerProps & { class?: string; invalid?: boolean }>(),\n  {\n    class: '',\n    invalid: false,\n  },\n)\n</script>\n\n<template>\n  <SelectTrigger\n    v-bind=\"props\"\n    :class=\"[\n      cn(\n        'flex h-9 w-full items-center justify-between rounded-md border border-input bg-transparent px-3 py-2 text-sm shadow-sm ring-offset-background placeholder:text-muted-foreground focus:outline-none focus:ring-1 focus:ring-ring disabled:cursor-not-allowed disabled:opacity-50',\n        props.class,\n      ),\n      props.invalid\n        ? '!ring-destructive ring-2 placeholder:!text-destructive'\n        : '',\n    ]\"\n  >\n    <slot />\n    <SelectIcon as-child>\n      <RadixIconsChevronDown class=\"w-4 h-4 opacity-50\" />\n    </SelectIcon>\n  </SelectTrigger>\n</template>\n"
     },
     {
       "name": "SelectValue.vue",