diff --git a/src/components/ui/UiModalCard.vue b/src/components/ui/UiModalCard.vue
index 0e8e2c45..846ddd6e 100644
--- a/src/components/ui/UiModalCard.vue
+++ b/src/components/ui/UiModalCard.vue
@@ -6,7 +6,7 @@ import { cn } from "@/utils/shadcn";
   <div
     :class="[
       cn(
-        $attrs.class ??
+        $attrs.class as string ??
           'w-1/2 h-fit z-50 gap-3 rounded-[4px] flex flex-col bg-white p-2 min-w-[350px]'
       ),
     ]"
diff --git a/src/components/ui/form/FormDescription.vue b/src/components/ui/form/FormDescription.vue
index 7b919aac..6fb8e4ed 100644
--- a/src/components/ui/form/FormDescription.vue
+++ b/src/components/ui/form/FormDescription.vue
@@ -1,20 +1,20 @@
 <script lang="ts" setup>
-import { useAttrs } from 'vue'
-import { useFormField } from './useFormField'
-import { cn } from '@/utils/shadcn'
+import { useAttrs } from "vue";
+import { useFormField } from "./useFormField";
+import { cn } from "@/utils/shadcn";
 
 defineOptions({
   inheritAttrs: false,
-})
+});
 
-const { formDescriptionId } = useFormField()
-const { class: className, ...rest } = useAttrs()
+const { formDescriptionId } = useFormField();
+const { class: className, ...rest } = useAttrs();
 </script>
 
 <template>
   <p
     :id="formDescriptionId"
-    :class="cn('text-sm text-muted-foreground', className ?? '')"
+    :class="cn('text-sm text-muted-foreground', className as string ?? '')"
     v-bind="rest"
   >
     <slot />
diff --git a/src/components/ui/form/FormItem.vue b/src/components/ui/form/FormItem.vue
index 8467187a..cc121197 100644
--- a/src/components/ui/form/FormItem.vue
+++ b/src/components/ui/form/FormItem.vue
@@ -20,7 +20,7 @@ const { class: className, ...rest } = useAttrs();
 </script>
 
 <template>
-  <div :class="cn('space-y-2', className ?? '')" v-bind="rest">
+  <div :class="cn('space-y-2', className as string ?? '')" v-bind="rest">
     <slot />
   </div>
 </template>
diff --git a/src/components/ui/form/FormLabel.vue b/src/components/ui/form/FormLabel.vue
index 1fb88a3f..e4329e4d 100644
--- a/src/components/ui/form/FormLabel.vue
+++ b/src/components/ui/form/FormLabel.vue
@@ -1,16 +1,16 @@
 <script lang="ts" setup>
-import { useAttrs } from 'vue'
-import { Label, type LabelProps } from 'radix-vue'
-import { useFormField } from './useFormField'
-import { cn } from '@/utils/shadcn'
+import { useAttrs } from "vue";
+import { Label, type LabelProps } from "radix-vue";
+import { useFormField } from "./useFormField";
+import { cn } from "@/utils/shadcn";
 
 defineOptions({
   inheritAttrs: false,
-})
-const props = defineProps<LabelProps>()
+});
+const props = defineProps<LabelProps>();
 
-const { error, formItemId } = useFormField()
-const { class: className, ...rest } = useAttrs()
+const { error, formItemId } = useFormField();
+const { class: className, ...rest } = useAttrs();
 </script>
 
 <template>
@@ -18,7 +18,7 @@ const { class: className, ...rest } = useAttrs()
     :class="cn(
       'block text-sm tracking-tight font-medium text-foreground text-left',
       error && 'text-destructive',
-      className ?? '',
+      className as string ?? '',
     )"
     :for="formItemId"
     v-bind="rest"
diff --git a/src/components/ui/textarea/Textarea.vue b/src/components/ui/textarea/Textarea.vue
index 50041f87..1576590d 100644
--- a/src/components/ui/textarea/Textarea.vue
+++ b/src/components/ui/textarea/Textarea.vue
@@ -23,7 +23,7 @@ const modelValue = useVModel(props, "modelValue", emits, {
     :class="
       cn(
         'min-h-[80px] flex h-10 w-full border p-2 focus-visible:border-2 focus-visible:border-black focus:outline-0 rounded-md border-input bg-background py-2 text-sm ring-offset-background file:border-0 file:bg-transparent file:text-sm file:font-medium placeholder:text-muted-foreground disabled:cursor-not-allowed disabled:opacity-50 transform transition-color duration-100',
-        $attrs.class ?? ''
+        $attrs.class as string ?? ''
       )
     "
   />