diff --git a/.changeset/editor-logical-css.md b/.changeset/editor-logical-css.md
new file mode 100644
index 0000000000..1abeab3af6
--- /dev/null
+++ b/.changeset/editor-logical-css.md
@@ -0,0 +1,5 @@
+---
+"@react-email/editor": patch
+---
+
+The bubble menu, slash command menu, inspector and placeholder styles now use logical CSS properties, so they mirror correctly when the editor sits in a right-to-left (`dir="rtl"`) page. Left-to-right layouts are unchanged.
diff --git a/packages/editor/src/ui/bubble-menu/bubble-menu.css b/packages/editor/src/ui/bubble-menu/bubble-menu.css
index 17a24e2944..9a3c5fad83 100644
--- a/packages/editor/src/ui/bubble-menu/bubble-menu.css
+++ b/packages/editor/src/ui/bubble-menu/bubble-menu.css
@@ -15,13 +15,13 @@
   gap: 0.125rem;
   padding: 0 0.125rem;
   border: none;
-  border-left: 1px solid var(--re-border);
+  border-inline-start: 1px solid var(--re-border);
   margin: 0;
   min-width: 0;
 }
 
 [data-re-bubble-menu-group]:last-child {
-  padding-right: 0;
+  padding-inline-end: 0;
 }
 
 [data-re-bubble-menu-separator] {
@@ -84,7 +84,7 @@
   padding: 0.375rem 0.5rem;
   font-size: 0.8125rem;
   width: 100%;
-  text-align: left;
+  text-align: start;
 }
 
 [data-re-node-selector-item] svg {
@@ -118,7 +118,7 @@
   gap: 0.25rem;
   position: absolute;
   top: 100%;
-  left: 0;
+  inset-inline-start: 0;
   margin-top: 0.25rem;
   width: max-content;
   min-width: 16rem;
diff --git a/packages/editor/src/ui/inspector/inspector.css b/packages/editor/src/ui/inspector/inspector.css
index 7093239912..0e483a96e6 100644
--- a/packages/editor/src/ui/inspector/inspector.css
+++ b/packages/editor/src/ui/inspector/inspector.css
@@ -39,7 +39,7 @@
 
 [data-re-inspector-unit],
 [data-re-inspector-color-trigger] {
-  margin-left: 0.2rem;
+  margin-inline-start: 0.2rem;
   width: 1rem;
   height: 1rem;
   aspect-ratio: 1 / 2;
@@ -102,7 +102,7 @@
 }
 
 [data-re-inspector-toggle-item] + [data-re-inspector-toggle-item] {
-  border-left: 1px solid var(--re-border, #e5e5e5);
+  border-inline-start: 1px solid var(--re-border, #e5e5e5);
 }
 
 [data-re-inspector-toggle-item][data-active] {
diff --git a/packages/editor/src/ui/slash-command/slash-command.css b/packages/editor/src/ui/slash-command/slash-command.css
index 956e079598..90c8ba82f2 100644
--- a/packages/editor/src/ui/slash-command/slash-command.css
+++ b/packages/editor/src/ui/slash-command/slash-command.css
@@ -30,7 +30,7 @@
   cursor: pointer;
   font-size: 0.875rem;
   line-height: 1.25rem;
-  text-align: left;
+  text-align: start;
 }
 
 [data-re-slash-command-item] svg {
diff --git a/packages/editor/src/ui/themes/default.css b/packages/editor/src/ui/themes/default.css
index 7e4959649e..49fc74ecb1 100644
--- a/packages/editor/src/ui/themes/default.css
+++ b/packages/editor/src/ui/themes/default.css
@@ -400,7 +400,7 @@
 .tiptap p.is-empty::before,
 .tiptap .node-heading.is-empty [data-placeholder]::before {
   opacity: 0.3;
-  float: left;
+  float: inline-start;
   content: attr(data-placeholder);
   height: 0;
   pointer-events: none;
@@ -409,7 +409,7 @@
 .tiptap .node-placeholder::before {
   color: var(--re-text-muted);
   content: attr(data-placeholder);
-  float: left;
+  float: inline-start;
   height: 0;
   pointer-events: none;
 }