diff --git a/packages/react/src/Placeholder/Placeholder.module.css b/packages/react/src/Placeholder/Placeholder.module.css
new file mode 100644
index 00000000000..f850f8303fc
--- /dev/null
+++ b/packages/react/src/Placeholder/Placeholder.module.css
@@ -0,0 +1,8 @@
+.Box_0 {
+  display: grid;
+  place-items: center;
+  background: var(--bgColor-inset);
+  border: var(--borderWidth-thin) solid;
+  border-color: var(--borderColor-muted);
+  border-radius: var(--borderRadius-medium);
+}
diff --git a/packages/react/src/Placeholder.tsx b/packages/react/src/Placeholder/Placeholder.tsx
similarity index 55%
rename from packages/react/src/Placeholder.tsx
rename to packages/react/src/Placeholder/Placeholder.tsx
index a2616629f4a..ca4353a70d9 100644
--- a/packages/react/src/Placeholder.tsx
+++ b/packages/react/src/Placeholder/Placeholder.tsx
@@ -1,6 +1,8 @@
-import {Box} from '.'
+import Box from '../Box'
 import React from 'react'
 
+import styles from './Placeholder.module.css'
+
 /** Private component used to render placeholders in storybook and documentation examples  */
 export const Placeholder: React.FC<
   React.PropsWithChildren<{
@@ -11,19 +13,7 @@ export const Placeholder: React.FC<
   }>
 > = ({width, height, id, label}) => {
   return (
-    <Box
-      id={id}
-      sx={{
-        width: width ?? '100%',
-        height,
-        display: 'grid',
-        placeItems: 'center',
-        bg: 'canvas.inset',
-        borderRadius: 2,
-        border: '1px solid',
-        borderColor: 'border.subtle',
-      }}
-    >
+    <Box id={id} className={styles.Box_0} style={{width: width ?? '100%', height}}>
       {label}
     </Box>
   )
diff --git a/packages/react/src/Placeholder/index.ts b/packages/react/src/Placeholder/index.ts
new file mode 100644
index 00000000000..83fe985871a
--- /dev/null
+++ b/packages/react/src/Placeholder/index.ts
@@ -0,0 +1 @@
+export {Placeholder} from './Placeholder'