diff --git a/apps/preview/nuxt/pages/showcases/Checkbox/CheckboxLeading.vue b/apps/preview/nuxt/pages/showcases/Checkbox/CheckboxLeading.vue
index 39598df622..baf0fd145f 100644
--- a/apps/preview/nuxt/pages/showcases/Checkbox/CheckboxLeading.vue
+++ b/apps/preview/nuxt/pages/showcases/Checkbox/CheckboxLeading.vue
@@ -1,6 +1,6 @@
 <template>
   <div class="flex items-center">
-    <SfCheckbox id="checkbox" v-model="modelValue" value="value" class-name="peer" />
+    <SfCheckbox id="checkbox" v-model="modelValue" value="value" class="peer" />
     <label class="ml-3 text-base text-gray-900 cursor-pointer font-body peer-disabled:text-disabled-900" for="checkbox">
       Label
     </label>
diff --git a/apps/preview/nuxt/pages/showcases/Textarea/TextareaAutoresize.vue b/apps/preview/nuxt/pages/showcases/Textarea/TextareaAutoresize.vue
index 9b9a63bd18..665d2f5399 100644
--- a/apps/preview/nuxt/pages/showcases/Textarea/TextareaAutoresize.vue
+++ b/apps/preview/nuxt/pages/showcases/Textarea/TextareaAutoresize.vue
@@ -1,11 +1,11 @@
 <template>
   <label>
-    <span className="typography-text-sm font-medium">Description</span>
+    <span class="typography-text-sm font-medium">Description</span>
     <SfTextarea ref="textareaRef" class="w-full h-max-[500px]" />
   </label>
-  <div className="flex justify-between mt-0.5">
+  <div class="flex justify-between mt-0.5">
     <div>
-      <p className="typography-text-xs text-neutral-500">Do not include personal or financial information.</p>
+      <p class="typography-text-xs text-neutral-500">Do not include personal or financial information.</p>
     </div>
   </div>
 </template>