diff --git a/package.json b/package.json
index 5c1bf5f4..e9a2c5f7 100644
--- a/package.json
+++ b/package.json
@@ -81,6 +81,7 @@
     "@vanilla-extract/webpack-plugin": "^2.3.6",
     "babel-loader": "^9.1.0",
     "classnames": "^2.3.2",
+    "clsx": "^2.1.1",
     "codemirror": "^5.65.10",
     "command-line-args": "^5.2.1",
     "command-line-usage": "^6.1.3",
diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml
index 295093da..3dc21ef7 100644
--- a/pnpm-lock.yaml
+++ b/pnpm-lock.yaml
@@ -59,6 +59,9 @@ dependencies:
   classnames:
     specifier: ^2.3.2
     version: 2.3.2
+  clsx:
+    specifier: ^2.1.1
+    version: 2.1.1
   codemirror:
     specifier: ^5.65.10
     version: 5.65.10
@@ -4213,6 +4216,11 @@ packages:
     engines: {node: '>=0.8'}
     dev: true
 
+  /clsx@2.1.1:
+    resolution: {integrity: sha512-eYm0QWBtUrBWZWG0d386OGAw16Z995PiOVo2B7bjWSbHedGl5e0ZWaq65kOGgUSNesEIDkB9ISbTg/JK9dhCZA==}
+    engines: {node: '>=6'}
+    dev: false
+
   /co@4.6.0:
     resolution: {integrity: sha512-QVb0dM5HvG+uaxitm8wONl7jltx8dqhfU33DcqtOZcLSVIKSDDLDi7+0LbAKiyI8hD9u42m2YxXSkMGWThaecQ==}
     engines: {iojs: '>= 1.0.0', node: '>= 0.12.0'}
diff --git a/src/Playroom/Box/Box.tsx b/src/Playroom/Box/Box.tsx
new file mode 100644
index 00000000..7c27a2f7
--- /dev/null
+++ b/src/Playroom/Box/Box.tsx
@@ -0,0 +1,36 @@
+import clsx, { type ClassValue } from 'clsx';
+import type { AllHTMLAttributes, ElementType } from 'react';
+import { sprinkles, type Sprinkles } from '../sprinkles.css';
+
+interface BoxProps
+  extends Omit<
+      AllHTMLAttributes<HTMLElement>,
+      'width' | 'height' | 'className' | 'data'
+    >,
+    Sprinkles {
+  className?: ClassValue;
+  component?: ElementType;
+}
+
+export const Box = ({
+  component = 'div',
+  className,
+  ...restProps
+}: BoxProps) => {
+  const atomProps: Record<string, unknown> = {};
+
+  for (const key in restProps) {
+    if (sprinkles.properties.has(key as keyof Sprinkles)) {
+      atomProps[key] = restProps[key as keyof typeof restProps];
+      delete restProps[key as keyof typeof restProps];
+    }
+  }
+
+  const userClasses = clsx(className);
+  const atomClasses = clsx(sprinkles({ ...atomProps }));
+  const classes = clsx(userClasses, atomClasses);
+
+  const Component = component;
+
+  return <Component className={classes} {...restProps} />;
+};
diff --git a/src/Playroom/sprinkles.css.ts b/src/Playroom/sprinkles.css.ts
index 966e9321..d4917a18 100644
--- a/src/Playroom/sprinkles.css.ts
+++ b/src/Playroom/sprinkles.css.ts
@@ -105,3 +105,5 @@ const responsiveProperties = defineProperties({
 });
 
 export const sprinkles = createSprinkles(responsiveProperties);
+
+export type Sprinkles = Parameters<typeof sprinkles>[0];