diff --git a/docs/content/guides/i18n.md b/docs/content/guides/i18n.md
index 1c5195191..4db5424bb 100644
--- a/docs/content/guides/i18n.md
+++ b/docs/content/guides/i18n.md
@@ -53,10 +53,12 @@ Then in your root Vue file:
 
 ```vue
 <script setup lang="ts">
+import { computed } from 'vue'
 import { ConfigProvider } from 'radix-vue'
 import { useTextDirection } from '@vueuse/core'
 
-const dir = useTextDirection()
+const textDirection = useTextDirection()
+const dir = computed(() => textDirection.value === 'rtl' ? 'rtl' : 'ltr')
 </script>
 
 <template>
@@ -73,17 +75,22 @@ To support SSR - when the server has no access to the `html` and its direction,
 import { ConfigProvider } from 'radix-vue'
 import { useTextDirection } from '@vueuse/core'
 
-const dir = useTextDirection({ initialValue: 'rtl' })
+const textDirection = useTextDirection({ initialValue: 'rtl' })
+const dir = computed(() => textDirection.value === 'rtl' ? 'rtl' : 'ltr')
 </script>
 
-<template>
+<template>  
   <ConfigProvider :dir="dir">
     <slot />
   </ConfigProvider>
 </template>
 ```
 
-`dir` is a [`Ref`](https://vuejs.org/api/reactivity-core.html#ref), and by changing the value of it to either "ltr" or "rtl", the `dir` attribute on the `html` tag changes as well.
+::: info
+The `dir` prop doesn't support `auto` as a value, so we need an intermediate Ref to explicitly define the direction.
+:::
+
+`textDirection` is a [`Ref`](https://vuejs.org/api/reactivity-core.html#ref), and by changing the value of it to either "ltr" or "rtl", the `dir` attribute on the `html` tag changes as well.
 
 ## Internationalization