diff --git a/docs/app/components/content/examples/timeline/TimelineAlternatingLayoutExample.vue b/docs/app/components/content/examples/timeline/TimelineAlternatingLayoutExample.vue
index b37352be1b..5dc95a4836 100644
--- a/docs/app/components/content/examples/timeline/TimelineAlternatingLayoutExample.vue
+++ b/docs/app/components/content/examples/timeline/TimelineAlternatingLayoutExample.vue
@@ -28,7 +28,7 @@ const items: TimelineItem[] = [{
   <UTimeline
     :items="items"
     :default-value="2"
-    :ui="{ item: 'even:flex-row-reverse even:-translate-x-[calc(100%-2rem)] even:text-right' }"
-    class="translate-x-[calc(50%-1rem)]"
+    :ui="{ item: 'even:flex-row-reverse even:-translate-x-[calc(100%-2rem)] rtl:even:translate-x-[calc(100%-2rem)] even:text-end' }"
+    class="translate-x-[calc(50%-1rem)] rtl:-translate-x-[calc(50%-1rem)]"
   />
 </template>