diff --git a/.changeset/long-seahorses-approve.md b/.changeset/long-seahorses-approve.md
new file mode 100644
index 0000000..219bd13
--- /dev/null
+++ b/.changeset/long-seahorses-approve.md
@@ -0,0 +1,5 @@
+---
+"@zenml-io/react-component-library": minor
+---
+
+add box component
diff --git a/src/components/Box/Box.stories.tsx b/src/components/Box/Box.stories.tsx
new file mode 100644
index 0000000..29de55e
--- /dev/null
+++ b/src/components/Box/Box.stories.tsx
@@ -0,0 +1,32 @@
+import { Meta } from "@storybook/react";
+import { Box } from "./index";
+import { StoryObj } from "@storybook/react";
+import React from "react";
+
+const meta = {
+	title: "Elements/Box",
+	component: Box,
+
+	parameters: {
+		layout: "centered"
+	},
+	decorators: [
+		(Story) => (
+			<div className="w-[400px] h-[200px]">
+				<Story />
+			</div>
+		)
+	],
+	tags: ["autodocs"]
+} satisfies Meta<typeof Box>;
+
+export default meta;
+
+type Story = StoryObj<typeof meta>;
+
+export const DefaultVariant: Story = {
+	name: "Default",
+	args: {
+		className: "h-full"
+	}
+};
diff --git a/src/components/Box/Box.tsx b/src/components/Box/Box.tsx
new file mode 100644
index 0000000..c4624c1
--- /dev/null
+++ b/src/components/Box/Box.tsx
@@ -0,0 +1,26 @@
+import { cva, VariantProps } from "class-variance-authority";
+import React, { HTMLAttributes } from "react";
+import { cn } from "../../utilities";
+
+export const boxVariants = cva("border rounded-md", {
+	variants: {
+		variant: {
+			default: "border-theme-border-moderate bg-theme-surface-primary"
+		}
+	},
+	defaultVariants: {
+		variant: "default"
+	}
+});
+
+export interface BoxProps
+	extends HTMLAttributes<HTMLDivElement>,
+		VariantProps<typeof boxVariants> {}
+
+export function Box({ children, className, variant, ...rest }: BoxProps) {
+	return (
+		<div {...rest} className={cn(boxVariants({ variant }), className)}>
+			{children}
+		</div>
+	);
+}
diff --git a/src/components/Box/index.tsx b/src/components/Box/index.tsx
new file mode 100644
index 0000000..2a063cc
--- /dev/null
+++ b/src/components/Box/index.tsx
@@ -0,0 +1 @@
+export * from "./Box";
diff --git a/src/components/Input/Input.tsx b/src/components/Input/Input.tsx
index dfb3e7a..6788346 100644
--- a/src/components/Input/Input.tsx
+++ b/src/components/Input/Input.tsx
@@ -2,7 +2,7 @@ import { cva, VariantProps } from "class-variance-authority";
 import React, { forwardRef, InputHTMLAttributes } from "react";
 import { cn } from "../../utilities";
 
-const inputVariants = cva(
+export const inputVariants = cva(
 	cn([
 		"transition-all duration-200 rounded-md bg-theme-surface-primary",
 		"border-[#D0D5DD] border",
diff --git a/src/components/index.ts b/src/components/index.ts
index e51711f..05f0713 100644
--- a/src/components/index.ts
+++ b/src/components/index.ts
@@ -1,3 +1,4 @@
 export * from "./Button";
 export * from "./Input";
 export * from "./Sidebar";
+export * from "./Box";