diff --git a/docs/components/card/card.md b/docs/components/card/card.md
index a190c16..5465b68 100644
--- a/docs/components/card/card.md
+++ b/docs/components/card/card.md
@@ -21,10 +21,10 @@ Use these responsive card components to show data entries and information to you
 
 ```vue
 <script setup>
-import { Card } from 'flowbite-vue'
+import { TheCard } from 'flowbite-vue'
 </script>
 <template>
-  <Card :href="'#'"/>
+  <the-card :href="'#'"/>
 </template>
 ```
 
@@ -34,14 +34,14 @@ import { Card } from 'flowbite-vue'
 
 ```vue
 <script setup>
-import { Card } from 'flowbite-vue'
+import { TheCard } from 'flowbite-vue'
 </script>
 <template>
-  <Card 
+  <the-card 
     :variant="'image'" 
     :href="'#'" 
-    :imgSrc="'./images/blog/image-1.jpg'" 
-    :imgAlt="'Image'"
+    :img-src="'./images/blog/image-1.jpg'" 
+    :img-alt="'Image'"
   />
 </template>
 ```
@@ -52,14 +52,14 @@ import { Card } from 'flowbite-vue'
 
 ```vue
 <script setup>
-import { Card } from 'flowbite-vue'
+import { TheCard } from 'flowbite-vue'
 </script>
 <template>
-  <Card 
+  <the-card 
     :variant="'horizontal'" 
     :href="'#'" 
-    :imgSrc="'./images/blog/image-4.jpg'" 
-    :imgAlt="'Image'"
+    :img-src="'./images/blog/image-4.jpg'" 
+    :img-alt="'Image'"
   />
 </template>
 ```
diff --git a/docs/components/card/examples/CardDefaultExample.vue b/docs/components/card/examples/CardDefaultExample.vue
index 32fdbff..adbda76 100644
--- a/docs/components/card/examples/CardDefaultExample.vue
+++ b/docs/components/card/examples/CardDefaultExample.vue
@@ -1,12 +1,12 @@
 <template>
   <div class="vp-raw inline-flex align-center gap-2 flex-wrap">
-    <Card :href="'#'">
+    <the-card :href="'#'">
       <h5 class="mb-2 text-2xl font-bold tracking-tight text-gray-900 dark:text-white">Noteworthy technology acquisitions 2021</h5>
       <p class="font-normal text-gray-700 dark:text-gray-400">Here are the biggest enterprise technology acquisitions of 2021 so far, in reverse chronological order.</p>
-    </Card>
+    </the-card>
   </div>
 </template>
 
 <script setup>
-import { Card } from '../../../../src/index'
+import { TheCard } from '../../../../src/index'
 </script>
diff --git a/docs/components/card/examples/CardHorizontalExample.vue b/docs/components/card/examples/CardHorizontalExample.vue
index 56c9793..7defb5d 100644
--- a/docs/components/card/examples/CardHorizontalExample.vue
+++ b/docs/components/card/examples/CardHorizontalExample.vue
@@ -1,11 +1,11 @@
 <template>
   <div class="vp-raw inline-flex align-center gap-2 flex-wrap">
-    <Card :href="'#'" :variant="'horizontal'" :imgSrc="'https://flowbite.com/docs/images/blog/image-4.jpg'" :imgAlt="'Desk'">
+    <the-card :href="'#'" :variant="'horizontal'" :img-src="'https://flowbite.com/docs/images/blog/image-4.jpg'" :imgAlt="'Desk'">
       <h5 class="mb-2 text-2xl font-bold tracking-tight text-gray-900 dark:text-white">Noteworthy technology acquisitions 2021</h5>
       <p class="font-normal text-gray-700 dark:text-gray-400">Here are the biggest enterprise technology acquisitions of 2021 so far, in reverse chronological order.</p>
-    </Card>
+    </the-card>
   </div>
 </template>
 <script setup>
-import { Card } from '../../../../src/index'
-</script>
\ No newline at end of file
+import { TheCard } from '../../../../src/index'
+</script>
diff --git a/docs/components/card/examples/CardImageExample.vue b/docs/components/card/examples/CardImageExample.vue
index 8030f09..08a4616 100644
--- a/docs/components/card/examples/CardImageExample.vue
+++ b/docs/components/card/examples/CardImageExample.vue
@@ -1,11 +1,11 @@
 <template>
   <div class="vp-raw inline-flex align-center gap-2 flex-wrap">
-    <Card :href="'#'" :variant="'image'" :imgSrc="'https://flowbite.com/docs/images/blog/image-1.jpg'" :imgAlt="'Desk'">
+    <the-card :href="'#'" :variant="'image'" :img-src="'https://flowbite.com/docs/images/blog/image-1.jpg'" :imgAlt="'Desk'">
       <h5 class="mb-2 text-2xl font-bold tracking-tight text-gray-900 dark:text-white">Noteworthy technology acquisitions 2021</h5>
       <p class="font-normal text-gray-700 dark:text-gray-400">Here are the biggest enterprise technology acquisitions of 2021 so far, in reverse chronological order.</p>
-    </Card>
+    </the-card>
   </div>
 </template>
 <script setup>
-import { Card } from '../../../../src/index'
-</script>
\ No newline at end of file
+import { TheCard } from '../../../../src/index'
+</script>
diff --git a/src/components/Card/Card.vue b/src/components/Card/TheCard.vue
similarity index 100%
rename from src/components/Card/Card.vue
rename to src/components/Card/TheCard.vue
diff --git a/src/components/Card/types.ts b/src/components/Card/types.ts
index b84f39b..63ba195 100644
--- a/src/components/Card/types.ts
+++ b/src/components/Card/types.ts
@@ -1 +1 @@
-export type CardsVariant = 'default' | 'image' | 'horizontal'
\ No newline at end of file
+export type CardsVariant = 'default' | 'image' | 'horizontal'
diff --git a/src/index.ts b/src/index.ts
index 34a6643..075d0ce 100644
--- a/src/index.ts
+++ b/src/index.ts
@@ -14,7 +14,7 @@ export { default as Accordion } from './components/Accordion/Accordion.vue'
 
 export { default as Badge } from './components/Badge/Badge.vue'
 export { default as Breadcrumb } from './components/Breadcrumb/Breadcrumb.vue'
-export { default as Card } from './components/Card/Card.vue'
+export { default as TheCard } from './components/Card/TheCard.vue'
 export { default as Carousel } from './components/Carousel/Carousel.vue'
 export { default as Footer } from './components/Footer/Footer.vue'
 export { default as ListGroup } from './components/ListGroup/ListGroup.vue'