diff --git a/apps/www/src/lib/registry/default/ui/accordion/AccordionItem.vue b/apps/www/src/lib/registry/default/ui/accordion/AccordionItem.vue
index c78bf5aa..2876f87a 100644
--- a/apps/www/src/lib/registry/default/ui/accordion/AccordionItem.vue
+++ b/apps/www/src/lib/registry/default/ui/accordion/AccordionItem.vue
@@ -1,15 +1,14 @@
 <script setup lang="ts">
+import { defineProps } from 'vue'
 import { AccordionItem, type AccordionItemProps } from 'radix-vue'
 import { cn } from '@/lib/utils'
 
 const props = defineProps<AccordionItemProps & { class?: string }>()
+const computeClasses = cn('border-b', props.class ?? '')
 </script>
 
 <template>
-  <AccordionItem
-    v-bind="props"
-    :class="cn('border-b', props.class ?? '')"
-  >
+  <AccordionItem v-bind="props" :class="computeClasses">
     <slot />
   </AccordionItem>
 </template>
diff --git a/apps/www/src/lib/registry/default/ui/alert-dialog/AlertDialog.vue b/apps/www/src/lib/registry/default/ui/alert-dialog/AlertDialog.vue
index 8fb30de8..37467032 100644
--- a/apps/www/src/lib/registry/default/ui/alert-dialog/AlertDialog.vue
+++ b/apps/www/src/lib/registry/default/ui/alert-dialog/AlertDialog.vue
@@ -1,9 +1,14 @@
 <script setup lang="ts">
-import { type AlertDialogEmits, type AlertDialogProps, AlertDialogRoot, useForwardPropsEmits } from 'radix-vue'
+import { defineEmits, defineProps } from 'vue'
+import {
+  type AlertDialogEmits,
+  type AlertDialogProps,
+  AlertDialogRoot,
+  useForwardPropsEmits,
+} from 'radix-vue'
 
 const props = defineProps<AlertDialogProps>()
 const emits = defineEmits<AlertDialogEmits>()
-
 const forwarded = useForwardPropsEmits(props, emits)
 </script>
 
diff --git a/apps/www/src/lib/registry/default/ui/alert/Alert.vue b/apps/www/src/lib/registry/default/ui/alert/Alert.vue
index b95d5c89..fa720757 100644
--- a/apps/www/src/lib/registry/default/ui/alert/Alert.vue
+++ b/apps/www/src/lib/registry/default/ui/alert/Alert.vue
@@ -1,4 +1,5 @@
 <script setup lang="ts">
+import { defineProps } from 'vue'
 import { alertVariants } from '.'
 import { cn } from '@/lib/utils'
 
@@ -8,10 +9,11 @@ interface Props {
 }
 
 const props = defineProps<Props>()
+const computeClasses = cn(alertVariants({ variant: props.variant }), props.class ?? '')
 </script>
 
 <template>
-  <div :class="cn(alertVariants({ variant }), props.class ?? '')">
+  <div :class="computeClasses">
     <slot />
   </div>
 </template>
diff --git a/apps/www/src/lib/registry/default/ui/aspect-ratio/AspectRatio.vue b/apps/www/src/lib/registry/default/ui/aspect-ratio/AspectRatio.vue
index 65291818..be8bcd69 100644
--- a/apps/www/src/lib/registry/default/ui/aspect-ratio/AspectRatio.vue
+++ b/apps/www/src/lib/registry/default/ui/aspect-ratio/AspectRatio.vue
@@ -1,4 +1,5 @@
 <script setup lang="ts">
+import { defineProps } from 'vue'
 import { AspectRatio, type AspectRatioProps } from 'radix-vue'
 
 const props = defineProps<AspectRatioProps>()
diff --git a/apps/www/src/lib/registry/default/ui/avatar/Avatar.vue b/apps/www/src/lib/registry/default/ui/avatar/Avatar.vue
index 39f71b65..0374af1b 100644
--- a/apps/www/src/lib/registry/default/ui/avatar/Avatar.vue
+++ b/apps/www/src/lib/registry/default/ui/avatar/Avatar.vue
@@ -1,4 +1,5 @@
 <script setup lang="ts">
+import { defineProps, withDefaults } from 'vue'
 import { AvatarRoot } from 'radix-vue'
 import { avatarVariant } from '.'
 import { cn } from '@/lib/utils'
@@ -13,10 +14,11 @@ const props = withDefaults(defineProps<Props>(), {
   size: 'sm',
   shape: 'circle',
 })
+const computedClasses = cn(avatarVariant({ size: props.size, shape: props.shape }), props.class)
 </script>
 
 <template>
-  <AvatarRoot :class="cn(avatarVariant({ size, shape }), props.class)">
+  <AvatarRoot :class="computedClasses">
     <slot />
   </AvatarRoot>
 </template>