diff --git a/.storybook/preview.tsx b/.storybook/preview.tsx
index ef1d95a300..bb284a008b 100644
--- a/.storybook/preview.tsx
+++ b/.storybook/preview.tsx
@@ -155,8 +155,10 @@ const withGlobalTypesProvider = (Story, context) => {
 
   document.body.classList.add('page-is-visible');
 
+  document.documentElement.setAttribute('dir', direction);
+
   return (
-    <div className={styles.container} dir={direction}>
+    <div className={styles.container}>
       <StorybookThemeContext.Provider value={theme}>
         <Story {...context} />
       </StorybookThemeContext.Provider>