Sandpack component

docs/getting-started/authoring.mdx

@@ -59,6 +59,112 @@ Responsive grid.
 
 </details>
 
+#### `Sandpack`
+
+See https://sandpack.codesandbox.io/docs/getting-started/usage.
+
+```tsx
+<Sandpack
+  template="react"
+  customSetup={{
+    dependencies: {
+      '@react-three/fiber': 'latest',
+      three: 'latest',
+    },
+  }}
+  files={{
+    '/Box.js': `import { useRef, useState } from 'react'
+import { useFrame } from '@react-three/fiber'
+
+export function Box(props) {
+  const meshRef = useRef()
+  const [hovered, setHover] = useState(false)
+  const [active, setActive] = useState(false)
+  useFrame((state, delta) => (meshRef.current.rotation.x += delta))
+
+  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>
+  )
+}`,
+    '/App.js': `import { Canvas } from '@react-three/fiber'
+import {Box} from './Box'
+
+export default function App() {
+  return (
+    <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>
+  )
+}`,
+  }}
+/>
+```
+
+<details>
+  <summary>Result</summary>
+
+<Sandpack template="react"
+  customSetup={{
+    dependencies: {
+      '@react-three/fiber': 'latest',
+      three: 'latest',
+    },
+  }}
+  files={{
+    '/Box.js': `import { useRef, useState } from 'react'
+import { useFrame } from '@react-three/fiber'
+
+export function Box(props) {
+  const meshRef = useRef()
+  const [hovered, setHover] = useState(false)
+  const [active, setActive] = useState(false)
+  useFrame((state, delta) => (meshRef.current.rotation.x += delta))
+
+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>
+)
+}`,
+    '/App.js': `import { Canvas } from '@react-three/fiber'
+import {Box} from './Box'
+
+export default function App() {
+  return (
+    <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>
+  )
+}`,
+  }}
+/>
+
+</details>
+
 #### `Codesandbox`
 
 ```md