diff --git a/docs/content/1.guide/2.composables.md b/docs/content/1.guide/2.composables.md
new file mode 100644
index 0000000000..6ec950a75f
--- /dev/null
+++ b/docs/content/1.guide/2.composables.md
@@ -0,0 +1,28 @@
+# Composables
+
+In case you might want to open or control the Nuxt DevTools in your application on development, a composable `useNuxtDevtools` is registered with auto-import.
+
+```vue
+<script setup>
+// Returns undefined in production mode or when the DevTools are not enabled
+const devtoolsClient = useNuxtDevtools() // NuxtDevToolsHostClient | undefined
+</script>
+
+<template>
+  <button
+    v-if="devtoolsClient"
+    @click="devtoolsClient.devtools.navigate('/modules/components')"
+  >
+    <!-- Open the DevTools and navigate to the components tab -->
+    Open DevTools
+  </button>
+</template>
+```
+
+When you have auto-import disabled, you can also import it explicitly:
+
+```ts
+import { useNuxtDevtools } from '#imports'
+```
+
+Checkout it's type definition for more available methods.