diff --git a/packages/react/components/Button.tsx b/packages/react/components/Button.tsx
new file mode 100644
index 0000000..62cd9eb
--- /dev/null
+++ b/packages/react/components/Button.tsx
@@ -0,0 +1,35 @@
+import React from "react";
+import { vcn, VariantProps } from "../shared";
+
+const variants = vcn({
+  base: "flex flex-row items-center justify-between rounded-md",
+  variants: {
+    variant: {
+      default:
+        "bg-white border border-gray-300 dark:bg-black dark:border-gray-700 hover:bg-gray-100 dark:hover:bg-gray-900 transition-colors",
+      ghost:
+        "bg-black/0 hover:bg-black/20 dark:bg-white/0 dark:hover:bg-white/10 transition-colors",
+    },
+    size: {
+      sm: "px-2 py-1 text-sm",
+      md: "px-4 py-2 text-base",
+      lg: "px-5 py-3 text-lg",
+    },
+  },
+  defaults: {
+    variant: "default",
+    size: "md",
+  },
+});
+
+export interface ButtonProps
+  extends React.ButtonHTMLAttributes<HTMLButtonElement>,
+    VariantProps<typeof variants> {}
+
+const Button = React.forwardRef<HTMLButtonElement, ButtonProps>(
+  (props, ref) => {
+    return <button ref={ref} {...props} className={variants(props)} />;
+  }
+);
+
+export { Button, variants as buttonVariants };
diff --git a/packages/react/stories/Button.stories.ts b/packages/react/stories/Button.stories.ts
new file mode 100644
index 0000000..dbb6103
--- /dev/null
+++ b/packages/react/stories/Button.stories.ts
@@ -0,0 +1,22 @@
+import type { Meta, StoryObj } from "@storybook/react";
+import { Button } from "../components/Button";
+
+const meta: Meta<typeof Button> = {
+  component: Button,
+  tags: ["autodocs"],
+  argTypes: {
+    variant: { options: ["default", "ghost"], control: "select" },
+    size: { options: ["sm", "md", "lg"], control: "select" },
+  },
+  args: { children: "Button", onClick: () => console.log("clicked") },
+};
+
+export default meta;
+type Story = StoryObj<typeof Button>;
+
+export const Default: Story = {
+  args: {
+    variant: "default",
+    size: "md",
+  },
+};