diff --git a/docs/src/modules/sandbox/CodeSandbox.ts b/docs/src/modules/sandbox/CodeSandbox.ts
index 13e93beaccfa61..e772341afedc15 100644
--- a/docs/src/modules/sandbox/CodeSandbox.ts
+++ b/docs/src/modules/sandbox/CodeSandbox.ts
@@ -4,6 +4,7 @@ import addHiddenInput from 'docs/src/modules/utils/addHiddenInput';
 import SandboxDependencies from 'docs/src/modules/sandbox/Dependencies';
 import * as CRA from 'docs/src/modules/sandbox/CreateReactApp';
 import getFileExtension from 'docs/src/modules/sandbox/FileExtension';
+import flattenRelativeImports from 'docs/src/modules/sandbox/FlattenRelativeImports';
 import { DemoData, CodeVariant, CodeStyling } from 'docs/src/modules/sandbox/types';
 
 function compress(object: any) {
@@ -45,8 +46,24 @@ function createReactApp(demoData: DemoData) {
       content: CRA.getRootIndex(demoData),
     },
     [`src/Demo.${ext}`]: {
-      content: demoData.raw,
+      content: flattenRelativeImports(
+        demoData.raw,
+        demoData.relativeModules?.map((file) => file.module),
+      ),
     },
+    // Spread the relative modules
+    ...(demoData.relativeModules &&
+      // Transform the relative modules array into an object
+      demoData.relativeModules.reduce(
+        (acc, curr) => ({
+          ...acc,
+          // Remove the path and keep the filename
+          [`src/${curr.module.replace(/^.*[\\/]/g, '')}`]: {
+            content: curr.raw,
+          },
+        }),
+        {},
+      )),
     ...(demoData.codeVariant === 'TS' && {
       'tsconfig.json': {
         content: CRA.getTsconfig(),
diff --git a/docs/src/modules/sandbox/FlattenRelativeImports.ts b/docs/src/modules/sandbox/FlattenRelativeImports.ts
new file mode 100644
index 00000000000000..a6e3668d71be63
--- /dev/null
+++ b/docs/src/modules/sandbox/FlattenRelativeImports.ts
@@ -0,0 +1,10 @@
+export default function flattenRelativeImports(rawCode: string, modulePaths: string[] = []) {
+  let newCode = rawCode;
+  modulePaths.forEach((path: string) => {
+    const pathWithoutExtension = path.replace(/\.[a-z]*$/g, '');
+    // Move the relative import to the current directory
+    const newPath = `./${pathWithoutExtension.replace(/^.*[\\/]/g, '')}`;
+    newCode = newCode.replace(pathWithoutExtension, newPath);
+  });
+  return newCode;
+}
diff --git a/docs/src/modules/sandbox/StackBlitz.ts b/docs/src/modules/sandbox/StackBlitz.ts
index 38b43c7d20abb0..58d1f6aa1307d8 100644
--- a/docs/src/modules/sandbox/StackBlitz.ts
+++ b/docs/src/modules/sandbox/StackBlitz.ts
@@ -3,6 +3,7 @@ import { CODE_VARIANTS } from 'docs/src/modules/constants';
 import SandboxDependencies from 'docs/src/modules/sandbox/Dependencies';
 import * as CRA from 'docs/src/modules/sandbox/CreateReactApp';
 import getFileExtension from 'docs/src/modules/sandbox/FileExtension';
+import flattenRelativeImports from 'docs/src/modules/sandbox/FlattenRelativeImports';
 import { DemoData } from 'docs/src/modules/sandbox/types';
 
 function createReactApp(demoData: DemoData) {
@@ -12,7 +13,21 @@ function createReactApp(demoData: DemoData) {
   const files: Record<string, string> = {
     'index.html': CRA.getHtml(demoData),
     [`index.${ext}`]: CRA.getRootIndex(demoData),
-    [`Demo.${ext}`]: demoData.raw,
+    [`Demo.${ext}`]: flattenRelativeImports(
+      demoData.raw,
+      demoData.relativeModules?.map((file) => file.module),
+    ),
+    // Spread the relative modules
+    ...(demoData.relativeModules &&
+      // Transform the relative modules array into an object
+      demoData.relativeModules.reduce(
+        (acc, curr) => ({
+          ...acc,
+          // Remove the path and keep the filename
+          [`${curr.module.replace(/^.*[\\/]/g, '')}`]: curr.raw,
+        }),
+        {},
+      )),
     ...(demoData.codeVariant === 'TS' && {
       'tsconfig.json': CRA.getTsconfig(),
     }),
diff --git a/docs/src/modules/sandbox/types.ts b/docs/src/modules/sandbox/types.ts
index e6c5521500b40f..bc31f8c72e74ae 100644
--- a/docs/src/modules/sandbox/types.ts
+++ b/docs/src/modules/sandbox/types.ts
@@ -2,6 +2,11 @@ import type { MuiProductId } from 'docs/src/modules/utils/getProductInfoFromUrl'
 
 export type CodeStyling = 'Tailwind' | 'MUI System';
 export type CodeVariant = 'TS' | 'JS';
+
+type RelativeModule = {
+  module: string;
+  raw: string;
+};
 export interface DemoData {
   title: string;
   language: string;
@@ -10,4 +15,5 @@ export interface DemoData {
   githubLocation: string;
   productId?: Exclude<MuiProductId, 'null'>;
   codeStyling: CodeStyling;
+  relativeModules?: RelativeModule[];
 }
diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml
index 74b5260f827067..73d06c60128bb8 100644
--- a/pnpm-lock.yaml
+++ b/pnpm-lock.yaml
@@ -24732,4 +24732,4 @@ snapshots:
     optionalDependencies:
       react: 18.3.1
 
-  zwitch@1.0.5: {}
+  zwitch@1.0.5: {}
\ No newline at end of file