diff --git a/.changeset/moody-dryers-doubt.md b/.changeset/moody-dryers-doubt.md
new file mode 100644
index 0000000..3be1cb4
--- /dev/null
+++ b/.changeset/moody-dryers-doubt.md
@@ -0,0 +1,5 @@
+---
+"@babylonlabs-io/bbn-core-ui": minor
+---
+
+add Card component
diff --git a/src/components/Card/Card.css b/src/components/Card/Card.css
new file mode 100644
index 0000000..137583b
--- /dev/null
+++ b/src/components/Card/Card.css
@@ -0,0 +1,3 @@
+.bbn-card {
+  @apply rounded border border-primary-dark/20 bg-secondary-contrast p-6;
+}
diff --git a/src/components/Card/Card.stories.tsx b/src/components/Card/Card.stories.tsx
new file mode 100644
index 0000000..30c1f43
--- /dev/null
+++ b/src/components/Card/Card.stories.tsx
@@ -0,0 +1,16 @@
+import type { Meta, StoryObj } from "@storybook/react";
+
+import { Card } from "./Card";
+
+const meta: Meta<typeof Card> = {
+  component: Card,
+  tags: ["autodocs"],
+};
+
+export default meta;
+
+type Story = StoryObj<typeof meta>;
+
+export const Default: Story = {
+  args: { children: "Card" },
+};
diff --git a/src/components/Card/Card.tsx b/src/components/Card/Card.tsx
new file mode 100644
index 0000000..7fdafa5
--- /dev/null
+++ b/src/components/Card/Card.tsx
@@ -0,0 +1,12 @@
+import { type PropsWithChildren, createElement } from "react";
+import { twJoin } from "tailwind-merge";
+import "./Card.css";
+
+interface CardProps extends PropsWithChildren {
+  as?: string;
+  className?: string;
+}
+
+export function Card({ as = "div", className, children }: CardProps) {
+  return createElement(as, { className: twJoin("bbn-card", className) }, children);
+}
diff --git a/src/components/Card/index.tsx b/src/components/Card/index.tsx
new file mode 100644
index 0000000..fbaf43c
--- /dev/null
+++ b/src/components/Card/index.tsx
@@ -0,0 +1 @@
+export { Card } from "./Card";
diff --git a/src/index.tsx b/src/index.tsx
index 8c5f96e..d731bf8 100644
--- a/src/index.tsx
+++ b/src/index.tsx
@@ -12,6 +12,7 @@ export * from "./components/Portal";
 export * from "./components/Loader";
 export * from "./components/Table";
 export * from "./components/Popover";
+export * from "./components/Card";
 
 export * from "./widgets/form/Form";
 export * from "./widgets/form/NumberField";