diff --git a/docs/cookbook/orbit-controls.md b/docs/cookbook/orbit-controls.md
index b3db9a228..54d564f81 100644
--- a/docs/cookbook/orbit-controls.md
+++ b/docs/cookbook/orbit-controls.md
@@ -85,9 +85,10 @@ const { camera, renderer } = useTresContext()
 </template>
 ```
 
-```vue [App.vue]
+```vue [App.vue] {3,12}
 <script setup lang="ts">
-import { OrbitControls } from './OrbitControls.vue'
+import { TresCanvas } from '@tresjs/core'
+import OrbitControls from './OrbitControls.vue'
 </script>
 
 <template>
@@ -97,6 +98,7 @@ import { OrbitControls } from './OrbitControls.vue'
   >
     <TresPerspectiveCamera :args="[45, 1, 0.1, 1000]" />
     <OrbitControls />
+    <TresGridHelper :args="[10, 10]" />
   </TresCanvas>
 </template>
 ```
@@ -111,7 +113,12 @@ The `cientos` package provides a component called `<OrbitControls />` which is a
 The nicest part? You don't need to extend the catalog or pass any arguments.  
 It just works. 💯
 
-```vue
+```vue {3,12}
+<script setup lang="ts">
+import { TresCanvas } from '@tresjs/core'
+import { OrbitControls } from '@tresjs/cientos'
+</script>
+
 <template>
   <TresCanvas
     shadows
diff --git a/docs/de/cookbook/orbit-controls.md b/docs/de/cookbook/orbit-controls.md
index 510b3f571..4b5a83a52 100644
--- a/docs/de/cookbook/orbit-controls.md
+++ b/docs/de/cookbook/orbit-controls.md
@@ -83,9 +83,10 @@ const { camera, renderer } = useTresContext()
 </template>
 ```
 
-```vue [App.vue]
+```vue [App.vue] {3,12}
 <script setup lang="ts">
-import { OrbitControls } from './OrbitControls.vue'
+import { TresCanvas } from '@tresjs/core'
+import OrbitControls from './OrbitControls.vue'
 </script>
 
 <template>
@@ -95,6 +96,7 @@ import { OrbitControls } from './OrbitControls.vue'
   >
     <TresPerspectiveCamera :args="[45, 1, 0.1, 1000]" />
     <OrbitControls />
+    <TresGridHelper :args="[10, 10]" />
   </TresCanvas>
 </template>
 ```
@@ -109,7 +111,12 @@ Das Paket `cientos` bietet eine Komponente namens `<OrbitControls />`, die ein W
 Das Beste daran? Du musst den Katalog nicht erweitern oder irgendwelche Argumente übergeben.
 Es funktioniert einfach. 💯
 
-```vue
+```vue {3,12}
+<script setup lang="ts">
+import { TresCanvas } from '@tresjs/core'
+import { OrbitControls } from '@tresjs/cientos'
+</script>
+
 <template>
   <TresCanvas
     shadows
diff --git a/docs/es/cookbook/orbit-controls.md b/docs/es/cookbook/orbit-controls.md
index b06810eef..88cae9ad8 100644
--- a/docs/es/cookbook/orbit-controls.md
+++ b/docs/es/cookbook/orbit-controls.md
@@ -85,9 +85,10 @@ const { camera, renderer } = useTresContext()
 </template>
 ```
 
-```vue [App.vue]
+```vue [App.vue] {3,12}
 <script setup lang="ts">
-import { OrbitControls } from './OrbitControls.vue'
+import { TresCanvas } from '@tresjs/core'
+import OrbitControls from './OrbitControls.vue'
 </script>
 
 <template>
@@ -97,6 +98,7 @@ import { OrbitControls } from './OrbitControls.vue'
   >
     <TresPerspectiveCamera :args="[45, 1, 0.1, 1000]" />
     <OrbitControls />
+    <TresGridHelper :args="[10, 10]" />
   </TresCanvas>
 </template>
 ```
@@ -111,7 +113,12 @@ El paquete `cientos` proporciona un componente llamado `<OrbitControls />` que e
 ¿Lo mejor? No necesitas ampliar el catálogo ni pasar ningún argumento.  
 Simplemente funciona. 💯
 
-```vue
+```vue {3,12}
+<script setup lang="ts">
+import { TresCanvas } from '@tresjs/core'
+import { OrbitControls } from '@tresjs/cientos'
+</script>
+
 <template>
   <TresCanvas
     shadows