diff --git a/packages/web-components/.storybook/preview.ts b/packages/web-components/.storybook/preview.ts
index aaec2283207..c6d5610aa4a 100644
--- a/packages/web-components/.storybook/preview.ts
+++ b/packages/web-components/.storybook/preview.ts
@@ -24,6 +24,10 @@ import customElementsMetadata from '../custom-elements.json';
 
 setCustomElements(customElementsMetadata);
 
+if (process.env.STORYBOOK_USE_RTL === 'true') {
+  document.documentElement.setAttribute('dir', 'rtl');
+}
+
 export const parameters = {
   layout: 'fullscreen',
   options: {
diff --git a/packages/web-components/package.json b/packages/web-components/package.json
index e2b1fd88e61..3112e2a6cfa 100644
--- a/packages/web-components/package.json
+++ b/packages/web-components/package.json
@@ -223,7 +223,7 @@
     "rollup-plugin-inject-process-env": "^1.3.1",
     "rollup-plugin-multi-input": "^1.3.1",
     "rollup-plugin-sizes": "^1.0.4",
-    "rtlcss": "^3.0.0",
+    "rtlcss": "^2.4.0",
     "sass-loader": "^10.0.0",
     "strip-comments": "^1.0.0",
     "style-loader": "^2.0.0",
diff --git a/yarn.lock b/yarn.lock
index b157034aab2..298b073db38 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -2446,7 +2446,7 @@ __metadata:
     rollup-plugin-inject-process-env: ^1.3.1
     rollup-plugin-multi-input: ^1.3.1
     rollup-plugin-sizes: ^1.0.4
-    rtlcss: ^3.0.0
+    rtlcss: ^2.4.0
     sass-loader: ^10.0.0
     strip-comments: ^1.0.0
     style-loader: ^2.0.0