diff --git a/test/components/Badge.spec.ts b/test/components/Badge.spec.ts
index 017d7910..727de921 100644
--- a/test/components/Badge.spec.ts
+++ b/test/components/Badge.spec.ts
@@ -5,6 +5,7 @@ import ComponentRender from '../component-render'
 describe('Badge', () => {
   it.each([
     ['with label', { props: { label: 'Badge' } }],
+    ['with as', { props: { label: 'Badge', as: 'div' } }],
     ['with class', { props: { label: 'Badge', class: 'rounded-full font-bold' } }],
     ['with size xs', { props: { label: 'Badge', size: 'xs' as const } }],
     ['with size sm', { props: { label: 'Badge', size: 'sm' as const } }],
diff --git a/test/components/Card.spec.ts b/test/components/Card.spec.ts
index 9116075f..a2092dd4 100644
--- a/test/components/Card.spec.ts
+++ b/test/components/Card.spec.ts
@@ -5,6 +5,8 @@ import ComponentRender from '../component-render'
 describe('Card', () => {
   it.each([
     ['basic case', {}],
+    ['with as', { props: { as: 'section' } }],
+    ['with class', { props: { class: 'rounded-xl' } }],
     ['with default slot', { slots: { default: () => 'Default slot' } }],
     ['with header slot', { slots: { header: () => 'Header slot' } }],
     ['with footer slot', { slots: { footer: () => 'Footer slot' } }]
diff --git a/test/components/Kbd.spec.ts b/test/components/Kbd.spec.ts
index c4e877fe..6487db9d 100644
--- a/test/components/Kbd.spec.ts
+++ b/test/components/Kbd.spec.ts
@@ -5,6 +5,7 @@ import ComponentRender from '../component-render'
 describe('Kbd', () => {
   it.each([
     ['with value', { props: { value: 'K' } }],
+    ['with as', { props: { value: 'K', as: 'span' } }],
     ['with class', { props: { value: 'K', class: 'font-bold' } }],
     ['with size xs', { props: { value: 'K', size: 'xs' as const } }],
     ['with size sm', { props: { value: 'K', size: 'sm' as const } }],
diff --git a/test/components/Skeleton.spec.ts b/test/components/Skeleton.spec.ts
index 91adcf45..4e8d3ce4 100644
--- a/test/components/Skeleton.spec.ts
+++ b/test/components/Skeleton.spec.ts
@@ -5,6 +5,7 @@ import ComponentRender from '../component-render'
 describe('Skeleton', () => {
   it.each([
     ['basic case', {}],
+    ['with as', { props: { as: 'span' } }],
     ['with class', { props: { class: 'rounded-full size-12' } }]
   ])('renders %s correctly', async (nameOrHtml: string, options: { props?: SkeletonProps, slots?: any }) => {
     const html = await ComponentRender(nameOrHtml, options, Skeleton)
diff --git a/test/components/__snapshots__/Badge.spec.ts.snap b/test/components/__snapshots__/Badge.spec.ts.snap
index 9b752dce..e51ed7ea 100644
--- a/test/components/__snapshots__/Badge.spec.ts.snap
+++ b/test/components/__snapshots__/Badge.spec.ts.snap
@@ -1,5 +1,7 @@
 // Vitest Snapshot v1, https://vitest.dev/guide/snapshot.html
 
+exports[`Badge > renders with as correctly 1`] = `"<div class="rounded-md font-medium inline-flex items-center text-xs px-2 py-1 bg-primary-500 dark:bg-primary-400 text-white dark:text-gray-900">Badge</div>"`;
+
 exports[`Badge > renders with class correctly 1`] = `"<span class="inline-flex items-center text-xs px-2 py-1 bg-primary-500 dark:bg-primary-400 text-white dark:text-gray-900 rounded-full font-bold">Badge</span>"`;
 
 exports[`Badge > renders with color black correctly 1`] = `"<span class="rounded-md font-medium inline-flex items-center text-xs px-2 py-1 text-white dark:text-gray-900 bg-gray-900 dark:bg-white">Badge</span>"`;
diff --git a/test/components/__snapshots__/Card.spec.ts.snap b/test/components/__snapshots__/Card.spec.ts.snap
index d52f51f9..1c333dff 100644
--- a/test/components/__snapshots__/Card.spec.ts.snap
+++ b/test/components/__snapshots__/Card.spec.ts.snap
@@ -8,6 +8,22 @@ exports[`Card > renders basic case correctly 1`] = `
 </div>"
 `;
 
+exports[`Card > renders with as correctly 1`] = `
+"<section class="bg-white dark:bg-gray-900 ring ring-gray-200 dark:ring-gray-800 rounded-lg shadow">
+  <!--v-if-->
+  <!--v-if-->
+  <!--v-if-->
+</section>"
+`;
+
+exports[`Card > renders with class correctly 1`] = `
+"<div class="bg-white dark:bg-gray-900 ring ring-gray-200 dark:ring-gray-800 shadow rounded-xl">
+  <!--v-if-->
+  <!--v-if-->
+  <!--v-if-->
+</div>"
+`;
+
 exports[`Card > renders with default slot correctly 1`] = `
 "<div class="bg-white dark:bg-gray-900 ring ring-gray-200 dark:ring-gray-800 rounded-lg shadow">
   <!--v-if-->
diff --git a/test/components/__snapshots__/Kbd.spec.ts.snap b/test/components/__snapshots__/Kbd.spec.ts.snap
index 19e0a17c..2eaca1dd 100644
--- a/test/components/__snapshots__/Kbd.spec.ts.snap
+++ b/test/components/__snapshots__/Kbd.spec.ts.snap
@@ -1,5 +1,7 @@
 // Vitest Snapshot v1, https://vitest.dev/guide/snapshot.html
 
+exports[`Kbd > renders with as correctly 1`] = `"<span class="inline-flex items-center justify-center text-gray-900 dark:text-white px-1 rounded font-medium font-sans bg-gray-50 dark:bg-gray-800 ring ring-gray-300 dark:ring-gray-700 ring-inset h-5 min-w-[20px] text-[11px]">K</span>"`;
+
 exports[`Kbd > renders with class correctly 1`] = `"<kbd class="inline-flex items-center justify-center text-gray-900 dark:text-white px-1 rounded font-sans bg-gray-50 dark:bg-gray-800 ring ring-gray-300 dark:ring-gray-700 ring-inset h-5 min-w-[20px] text-[11px] font-bold">K</kbd>"`;
 
 exports[`Kbd > renders with default slot correctly 1`] = `"<kbd class="inline-flex items-center justify-center text-gray-900 dark:text-white px-1 rounded font-medium font-sans bg-gray-50 dark:bg-gray-800 ring ring-gray-300 dark:ring-gray-700 ring-inset h-5 min-w-[20px] text-[11px]">Default slot</kbd>"`;
diff --git a/test/components/__snapshots__/Skeleton.spec.ts.snap b/test/components/__snapshots__/Skeleton.spec.ts.snap
index 2014e5b8..54c259d9 100644
--- a/test/components/__snapshots__/Skeleton.spec.ts.snap
+++ b/test/components/__snapshots__/Skeleton.spec.ts.snap
@@ -2,4 +2,6 @@
 
 exports[`Skeleton > renders basic case correctly 1`] = `"<div class="animate-pulse rounded-md bg-gray-50 dark:bg-gray-800"></div>"`;
 
+exports[`Skeleton > renders with as correctly 1`] = `"<span class="animate-pulse rounded-md bg-gray-50 dark:bg-gray-800"></span>"`;
+
 exports[`Skeleton > renders with class correctly 1`] = `"<div class="animate-pulse bg-gray-50 dark:bg-gray-800 rounded-full size-12"></div>"`;