diff --git a/package-lock.json b/package-lock.json
index a19a992813..54f75e2758 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -1203,7 +1203,6 @@
       "version": "2.3.3",
       "resolved": "https://registry.npmjs.org/fsevents/-/fsevents-2.3.3.tgz",
       "integrity": "sha512-5xoDfX+fL7faATnagmWPpbFtwh/R77WmMMqqHGS65C3vvB0YHrgF+B1YmZ3441tMj5n63k0212XNoJwzlhffQw==",
-      "dev": true,
       "hasInstallScript": true,
       "license": "MIT",
       "optional": true,
@@ -2183,7 +2182,10 @@
       }
     },
     "packages/ui": {
-      "name": "@freelanceflow/ui"
+      "name": "@freelanceflow/ui",
+      "peerDependencies": {
+        "react": "^19.0.0"
+      }
     }
   }
 }
diff --git a/packages/ui/Button.d.ts b/packages/ui/Button.d.ts
new file mode 100644
index 0000000000..462ce5332a
--- /dev/null
+++ b/packages/ui/Button.d.ts
@@ -0,0 +1,5 @@
+import * as React from "react";
+
+export declare function Button(props: {
+  children: React.ReactNode;
+}): React.JSX.Element;
diff --git a/packages/ui/Button.js b/packages/ui/Button.js
new file mode 100644
index 0000000000..9370603fa7
--- /dev/null
+++ b/packages/ui/Button.js
@@ -0,0 +1,18 @@
+import React from "react";
+
+export function Button({ children }) {
+  return React.createElement(
+    "button",
+    {
+      style: {
+        background: "#5468ff",
+        color: "white",
+        border: "none",
+        borderRadius: 8,
+        padding: "0.6rem 0.9rem",
+        cursor: "pointer"
+      }
+    },
+    children
+  );
+}
diff --git a/packages/ui/Card.d.ts b/packages/ui/Card.d.ts
new file mode 100644
index 0000000000..117f599eaa
--- /dev/null
+++ b/packages/ui/Card.d.ts
@@ -0,0 +1,6 @@
+import * as React from "react";
+
+export declare function Card(props: {
+  title: string;
+  children: React.ReactNode;
+}): React.JSX.Element;
diff --git a/packages/ui/Card.js b/packages/ui/Card.js
new file mode 100644
index 0000000000..dbca4f106f
--- /dev/null
+++ b/packages/ui/Card.js
@@ -0,0 +1,16 @@
+import React from "react";
+
+export function Card({ title, children }) {
+  return React.createElement(
+    "section",
+    {
+      style: {
+        border: "1px solid #ddd",
+        borderRadius: 8,
+        padding: "1rem"
+      }
+    },
+    React.createElement("h3", null, title),
+    React.createElement("div", null, children)
+  );
+}
diff --git a/packages/ui/index.d.ts b/packages/ui/index.d.ts
new file mode 100644
index 0000000000..cc3fb86148
--- /dev/null
+++ b/packages/ui/index.d.ts
@@ -0,0 +1,2 @@
+export { Button } from "./Button";
+export { Card } from "./Card";
diff --git a/packages/ui/index.js b/packages/ui/index.js
new file mode 100644
index 0000000000..617c0bea67
--- /dev/null
+++ b/packages/ui/index.js
@@ -0,0 +1,2 @@
+export { Button } from "./Button.js";
+export { Card } from "./Card.js";
diff --git a/packages/ui/package.json b/packages/ui/package.json
index ac8e780e27..7d6197cf4d 100644
--- a/packages/ui/package.json
+++ b/packages/ui/package.json
@@ -1,5 +1,27 @@
 {
   "name": "@freelanceflow/ui",
   "private": true,
-  "main": "src/index.ts"
+  "type": "module",
+  "main": "./index.js",
+  "types": "./index.d.ts",
+  "exports": {
+    ".": {
+      "types": "./index.d.ts",
+      "import": "./index.js",
+      "default": "./index.js"
+    },
+    "./Button": {
+      "types": "./Button.d.ts",
+      "import": "./Button.js",
+      "default": "./Button.js"
+    },
+    "./Card": {
+      "types": "./Card.d.ts",
+      "import": "./Card.js",
+      "default": "./Card.js"
+    }
+  },
+  "peerDependencies": {
+    "react": "^19.0.0"
+  }
 }