diff --git a/.changeset/orange-falcons-shake.md b/.changeset/orange-falcons-shake.md
new file mode 100644
index 000000000..1ed07453c
--- /dev/null
+++ b/.changeset/orange-falcons-shake.md
@@ -0,0 +1,5 @@
+---
+"@launchpad-ui/box": patch
+---
+
+Support `className` for `Box`
diff --git a/packages/box/package.json b/packages/box/package.json
index c01cb7de2..f213b09d0 100644
--- a/packages/box/package.json
+++ b/packages/box/package.json
@@ -37,6 +37,7 @@
 		"@launchpad-ui/vars": "workspace:~",
 		"@radix-ui/react-slot": "1.1.0",
 		"@vanilla-extract/dynamic": "2.1.0",
+		"class-variance-authority": "0.7.0",
 		"rainbow-sprinkles": "0.17.3"
 	},
 	"peerDependencies": {
diff --git a/packages/box/src/Box.tsx b/packages/box/src/Box.tsx
index 70ee079fd..9d4292ea1 100644
--- a/packages/box/src/Box.tsx
+++ b/packages/box/src/Box.tsx
@@ -1,27 +1,21 @@
-import type { ReactNode } from 'react';
+import type { HTMLAttributes } from 'react';
 import type { Sprinkles } from './styles/rainbow-sprinkles.css';
 
 import { Slot } from '@radix-ui/react-slot';
+import { cx } from 'class-variance-authority';
 
 import { rainbowSprinkles } from './styles/rainbow-sprinkles.css';
 
-type BoxProps = Sprinkles & {
-	children?: ReactNode;
+interface BoxProps extends Sprinkles, Omit<HTMLAttributes<HTMLDivElement>, 'color'> {
 	asChild?: boolean;
-	'data-test-id'?: string;
-};
+}
 
-const Box = ({
-	asChild,
-	children,
-	'data-test-id': testId = asChild ? undefined : 'box',
-	...props
-}: BoxProps) => {
+const Box = ({ asChild, children, className, ...props }: BoxProps) => {
 	const Component = asChild ? Slot : 'div';
-	const { className, style, otherProps } = rainbowSprinkles(props);
+	const { className: classes, style, otherProps } = rainbowSprinkles(props);
 
 	return (
-		<Component className={className} style={style} data-test-id={testId} {...otherProps}>
+		<Component className={cx(className, classes)} style={style} {...otherProps}>
 			{children}
 		</Component>
 	);
diff --git a/packages/box/src/styles/rainbow-sprinkles.css.ts b/packages/box/src/styles/rainbow-sprinkles.css.ts
index 04283041c..514a652ab 100644
--- a/packages/box/src/styles/rainbow-sprinkles.css.ts
+++ b/packages/box/src/styles/rainbow-sprinkles.css.ts
@@ -45,6 +45,12 @@ const responsiveProperties = defineProperties({
 		paddingRight: vars.spacing,
 		paddingTop: vars.spacing,
 		paddingBottom: vars.spacing,
+		paddingBlock: vars.spacing,
+		paddingBlockEnd: vars.spacing,
+		paddingBlockStart: vars.spacing,
+		paddingInline: vars.spacing,
+		paddingInlineEnd: vars.spacing,
+		paddingInlineStart: vars.spacing,
 		top: vars.spacing,
 		left: vars.spacing,
 		right: vars.spacing,
@@ -55,6 +61,12 @@ const responsiveProperties = defineProperties({
 		marginLeft: vars.spacing,
 		marginRight: vars.spacing,
 		marginBottom: vars.spacing,
+		marginBlock: vars.spacing,
+		marginBlockEnd: vars.spacing,
+		marginBlockStart: vars.spacing,
+		marginInline: vars.spacing,
+		marginInlineEnd: vars.spacing,
+		marginInlineStart: vars.spacing,
 		borderRadius: vars.borderRadius,
 		borderWidth: vars.borderWidth,
 		font: typographies,
diff --git a/packages/box/stories/Box.stories.tsx b/packages/box/stories/Box.stories.tsx
index 05871029f..10a376239 100644
--- a/packages/box/stories/Box.stories.tsx
+++ b/packages/box/stories/Box.stories.tsx
@@ -1,6 +1,6 @@
 import type { StoryObj } from '@storybook/react';
 
-import { Button } from '@launchpad-ui/button';
+import { Button } from '@launchpad-ui/components';
 
 import { Box } from '../src';
 
diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml
index 6214b1373..89d25513b 100644
--- a/pnpm-lock.yaml
+++ b/pnpm-lock.yaml
@@ -276,6 +276,9 @@ importers:
       '@vanilla-extract/dynamic':
         specifier: 2.1.0
         version: 2.1.0
+      class-variance-authority:
+        specifier: 0.7.0
+        version: 0.7.0
       rainbow-sprinkles:
         specifier: 0.17.3
         version: 0.17.3(@vanilla-extract/css@1.15.5)(@vanilla-extract/dynamic@2.1.0)