diff --git a/js/react/lib/components/card/card.component.tsx b/js/react/lib/components/card/card.component.tsx
new file mode 100644
index 0000000..cf69ac4
--- /dev/null
+++ b/js/react/lib/components/card/card.component.tsx
@@ -0,0 +1,25 @@
+import { PropsWithChildren } from "react";
+import { withAs } from "@/utils/hoc";
+import { cn } from "@/utils/tw-merge";
+
+export type CardProps = PropsWithChildren & {
+  clickable?: boolean;
+  disabled?: boolean;
+  className?: string;
+};
+
+export const Card = withAs((Component, props: CardProps) => {
+  const { clickable = false, disabled = false, className, ...attr } = props;
+
+  return (
+    <Component
+      className={cn(
+        "rustlanges-card",
+        clickable && "rustlanges-card--clickable",
+        disabled && "disabled rustlanges-card--disabled",
+        className
+      )}
+      {...attr}
+    />
+  );
+}, "div");
diff --git a/js/react/lib/components/card/index.ts b/js/react/lib/components/card/index.ts
new file mode 100644
index 0000000..8151bac
--- /dev/null
+++ b/js/react/lib/components/card/index.ts
@@ -0,0 +1 @@
+export * from "./card.component";
diff --git a/js/react/lib/index.ts b/js/react/lib/index.ts
index 6f31147..6b7ee90 100644
--- a/js/react/lib/index.ts
+++ b/js/react/lib/index.ts
@@ -1,5 +1,6 @@
 export * from "./components/Example";
 export * from "./components/button";
+export * from "./components/card";
 export * from "./components/contact-form";
 export * from "./components/chip";
 export * from "./components/tag";
diff --git a/js/react/showcase/App.tsx b/js/react/showcase/App.tsx
index 033ff89..f97b7c7 100644
--- a/js/react/showcase/App.tsx
+++ b/js/react/showcase/App.tsx
@@ -12,6 +12,7 @@ import {
   Radio,
   Badge,
   DropdownState,
+  Card,
   Calendar,
   CalendarRangeDate,
   DropdownTree,
@@ -369,6 +370,27 @@ export function App() {
           },
         }}
       />
+      <ShowComponent
+        title="Card"
+        propsDef={{
+          clickable: {
+            type: "boolean",
+            default: false,
+          },
+          disabled: {
+            type: "boolean",
+            default: false,
+          },
+          className: {
+            type: "string",
+            default: "min-w-50 min-h-50",
+          },
+          onClick: {
+            type: "callback",
+          },
+        }}
+        component={Card}
+      />
       <ShowComponent title="Scroll bar ">
         <div className="scrollbar mx-auto h-48 w-full overflow-auto">
           <div className="mx-auto flex h-96 w-20 items-center">Container</div>
diff --git a/styles/components.css b/styles/components.css
index 8f27202..d553c9e 100644
--- a/styles/components.css
+++ b/styles/components.css
@@ -1,6 +1,7 @@
 @import "./components/avatar.css";
 @import "./components/badge.css";
 @import "./components/button.css";
+@import "./components/card.css";
 @import "./components/chip.css";
 @import "./components/collaborators.css";
 @import "./components/dropdown.css";
diff --git a/styles/components/card.css b/styles/components/card.css
new file mode 100644
index 0000000..0fed664
--- /dev/null
+++ b/styles/components/card.css
@@ -0,0 +1,23 @@
+@layer components {
+  .rustlanges-card {
+    @apply bg-light border-1 shadow-brutal rounded-lg border-black p-4;
+    @apply dark:bg-neutral-900;
+  }
+
+  .rustlanges-card--clickable {
+    @apply cursor-pointer;
+
+    @variant hover {
+      @apply shadow-rb-violet-700 border-violet-700;
+      @apply dark:border-primary-600 dark:shadow-rb-primary-600;
+    }
+
+    @apply active:shadow-none;
+  }
+
+  .rustlanges-card--disabled {
+    @apply pointer-events-none shadow-none;
+    @apply border-neutral-200;
+    @apply dark:border-neutral-600;
+  }
+}