diff --git a/apps/docs/src/usages/cards.tsx b/apps/docs/src/usages/cards.tsx
index 77698b0..15699f0 100644
--- a/apps/docs/src/usages/cards.tsx
+++ b/apps/docs/src/usages/cards.tsx
@@ -14,7 +14,7 @@ export default () => {
           <p>Lorem, ipsum dolor sit amet consectetur adipisicing elit.</p>
         </div>
       </Card>
-      <Card type="filled">
+      <Card variant="filled">
         <img
           alt=""
           className="w-full object-fit"
@@ -28,7 +28,7 @@ export default () => {
           </p>
         </div>
       </Card>
-      <Card type="outlined">
+      <Card variant="outlined">
         <img
           alt=""
           className="w-full object-fit"
diff --git a/packages/actify/src/components/Cards/Card.tsx b/packages/actify/src/components/Cards/Card.tsx
index eb3c7f9..07b189c 100644
--- a/packages/actify/src/components/Cards/Card.tsx
+++ b/packages/actify/src/components/Cards/Card.tsx
@@ -8,8 +8,8 @@ import styles from './card.module.css'
 
 interface CardProps extends React.ComponentProps<'div'> {
   ripple?: boolean
-  variant: 'elevated' | 'filled' | 'outlined'
   elevation?: number
+  variant?: 'elevated' | 'filled' | 'outlined'
 }
 
 const Card = (props: CardProps) => {