diff --git a/docs/getting-started/basic-example-sandpack/index.jsx b/docs/getting-started/basic-example-sandpack/index.jsx
new file mode 100644
index 0000000000..cc9da21f2b
--- /dev/null
+++ b/docs/getting-started/basic-example-sandpack/index.jsx
@@ -0,0 +1,37 @@
+import { createRoot } from 'react-dom/client'
+import React, { useRef, useState } from 'react'
+import { Canvas, useFrame } from '@react-three/fiber'
+import './styles.css'
+
+function Box(props) {
+  // This reference will give us direct access to the mesh
+  const meshRef = useRef()
+  // Set up state for the hovered and active state
+  const [hovered, setHover] = useState(false)
+  const [active, setActive] = useState(false)
+  // Subscribe this component to the render-loop, rotate the mesh every frame
+  useFrame((state, delta) => (meshRef.current.rotation.x += delta))
+  // Return view, these are regular three.js elements expressed in JSX
+  return (
+    <mesh
+      {...props}
+      ref={meshRef}
+      scale={active ? 1.5 : 1}
+      onClick={(event) => setActive(!active)}
+      onPointerOver={(event) => setHover(true)}
+      onPointerOut={(event) => setHover(false)}>
+      <boxGeometry args={[1, 1, 1]} />
+      <meshStandardMaterial color={hovered ? 'hotpink' : 'orange'} />
+    </mesh>
+  )
+}
+
+createRoot(document.getElementById('root')).render(
+  <Canvas>
+    <ambientLight intensity={Math.PI / 2} />
+    <spotLight position={[10, 10, 10]} angle={0.15} penumbra={1} decay={0} intensity={Math.PI} />
+    <pointLight position={[-10, -10, -10]} decay={0} intensity={Math.PI} />
+    <Box position={[-1.2, 0, 0]} />
+    <Box position={[1.2, 0, 0]} />
+  </Canvas>,
+)
diff --git a/docs/getting-started/basic-example-sandpack/styles.css b/docs/getting-started/basic-example-sandpack/styles.css
new file mode 100644
index 0000000000..cc4a879023
--- /dev/null
+++ b/docs/getting-started/basic-example-sandpack/styles.css
@@ -0,0 +1,6 @@
+html,
+body,
+#root {
+  height: 100%;
+  margin: unset;
+}
diff --git a/docs/getting-started/introduction.mdx b/docs/getting-started/introduction.mdx
index 36c952cc7f..773026bf88 100644
--- a/docs/getting-started/introduction.mdx
+++ b/docs/getting-started/introduction.mdx
@@ -39,48 +39,8 @@ Let's make a re-usable component that has its own state, reacts to user-input an
       '@react-three/fiber': 'latest'
     },
     entry: '/index.jsx',
-    main: '/index.jsx',
-  }}
-  files={{
-    '/styles.css': `html,body,#root {height:100%;margin:unset;}`,
-    '/index.jsx': `import { createRoot } from 'react-dom/client'
-import React, { useRef, useState } from 'react'
-import { Canvas, useFrame } from '@react-three/fiber'
-import './styles.css'
-
-function Box(props) {
-  // This reference will give us direct access to the mesh
-  const meshRef = useRef()
-  // Set up state for the hovered and active state
-  const [hovered, setHover] = useState(false)
-  const [active, setActive] = useState(false)
-  // Subscribe this component to the render-loop, rotate the mesh every frame
-  useFrame((state, delta) => (meshRef.current.rotation.x += delta))
-  // Return view, these are regular three.js elements expressed in JSX
-  return (
-    <mesh
-      {...props}
-      ref={meshRef}
-      scale={active ? 1.5 : 1}
-      onClick={(event) => setActive(!active)}
-      onPointerOver={(event) => setHover(true)}
-      onPointerOut={(event) => setHover(false)}>
-      <boxGeometry args={[1, 1, 1]} />
-      <meshStandardMaterial color={hovered ? 'hotpink' : 'orange'} />
-    </mesh>
-  )
-}
-
-createRoot(document.getElementById('root')).render(
-  <Canvas>
-    <ambientLight intensity={Math.PI / 2} />
-    <spotLight position={[10, 10, 10]} angle={0.15} penumbra={1} decay={0} intensity={Math.PI} />
-    <pointLight position={[-10, -10, -10]} decay={0} intensity={Math.PI} />
-    <Box position={[-1.2, 0, 0]} />
-    <Box position={[1.2, 0, 0]} />
-  </Canvas>,
-)`,
   }}
+  folder="basic-example-sandpack"
 />
 
 <details>