diff --git a/demo/src/app.rs b/demo/src/app.rs
index c7f4575..1ab9c20 100644
--- a/demo/src/app.rs
+++ b/demo/src/app.rs
@@ -16,9 +16,10 @@ pub fn App() -> impl IntoView {
     provide_meta_context();
     // let (read_theme, _, _) = use_local_storage::<String, FromToStringCodec>("theme");
     // let theme = RwSignal::new(Theme::from(read_theme.get_untracked()));
+    let dir = RwSignal::new(ConfigDirection::Ltr);
 
     view! {
-        <ConfigProvider>
+        <ConfigProvider dir=dir>
             <ToasterProvider>
                 <LoadingBarProvider>
                     <TheRouter />
diff --git a/demo/src/components/site_header.rs b/demo/src/components/site_header.rs
index ecdf7b7..8951741 100644
--- a/demo/src/components/site_header.rs
+++ b/demo/src/components/site_header.rs
@@ -9,6 +9,7 @@ use thaw::*;
 pub fn SiteHeader() -> impl IntoView {
     let navigate = use_navigate();
     let navigate_signal = RwSignal::new(use_navigate());
+    let dir = ConfigInjection::expect_context().dir;
     let theme = Theme::use_rw_theme();
     let theme_name = Memo::new(move |_| {
         theme.with(|theme| {
@@ -221,6 +222,32 @@ pub fn SiteHeader() -> impl IntoView {
                     >
                         {move || theme_name.get()}
                     </Button>
+                    <Button
+                        on_click=move |_| {
+                            let Some(dir) = dir else {
+                                return;
+                            };
+                            dir.update(move |dir| {
+                                *dir = match dir {
+                                    ConfigDirection::Auto => ConfigDirection::Ltr,
+                                    ConfigDirection::Ltr => ConfigDirection::Rtl,
+                                    ConfigDirection::Rtl => ConfigDirection::Ltr,
+                                };
+                            });
+                        }
+                    >
+                        {move || {
+                            let Some(dir) = dir else {
+                                return None;
+                            };
+
+                            match dir.get() {
+                                ConfigDirection::Auto => Some("Auto"),
+                                ConfigDirection::Ltr => Some("LTR"),
+                                ConfigDirection::Rtl => Some("RTL"),
+                            }
+                        }}
+                    </Button>
                     <Button
                         icon=icondata::BiDiscordAlt
                         on_click=move |_| {
diff --git a/thaw/src/back_top/mod.rs b/thaw/src/back_top/mod.rs
index 1be8d4f..0f96885 100644
--- a/thaw/src/back_top/mod.rs
+++ b/thaw/src/back_top/mod.rs
@@ -91,7 +91,7 @@ pub fn BackTop(
                 >
                     <div
                         class=class_list!["thaw-config-provider thaw-back-top", class]
-                        data-thaw-id=config_provider.id().clone()
+                        data-thaw-id=config_provider.id()
                         node_ref=back_top_ref
                         style=move || {
                             display
diff --git a/thaw/src/button/button.css b/thaw/src/button/button.css
index 6a7fbcc..079b019 100644
--- a/thaw/src/button/button.css
+++ b/thaw/src/button/button.css
@@ -124,7 +124,7 @@
 }
 
 .thaw-button:not(.thaw-button--only-icon) .thaw-button__icon {
-    margin-right: var(--spacingHorizontalSNudge);
+    margin-inline-end: var(--spacingHorizontalSNudge);
 }
 
 .thaw-button__icon {
diff --git a/thaw/src/color_picker/mod.rs b/thaw/src/color_picker/mod.rs
index 3c7a4a9..b0b4c92 100644
--- a/thaw/src/color_picker/mod.rs
+++ b/thaw/src/color_picker/mod.rs
@@ -155,7 +155,7 @@ pub fn ColorPicker(
                         class="thaw-config-provider thaw-color-picker-popover"
                         node_ref=popover_ref
                         style=move || display.get().unwrap_or_default()
-                        data-thaw-id=config_provider.id().clone()
+                        data-thaw-id=config_provider.id()
                     >
 
                         <ColorPanel hue=hue.read_only() sv />
diff --git a/thaw/src/combobox/listbox.rs b/thaw/src/combobox/listbox.rs
index 93c84e1..f2cf5a8 100644
--- a/thaw/src/combobox/listbox.rs
+++ b/thaw/src/combobox/listbox.rs
@@ -43,7 +43,7 @@ pub fn Listbox(
                 <div
                     class=format!("thaw-config-provider thaw-listbox {class}")
                     style=move || display.get().unwrap_or_default()
-                    data-thaw-id=config_provider.id().clone()
+                    data-thaw-id=config_provider.id()
                     node_ref=listbox_ref
                     role="listbox"
                     on:mousedown=|e| e.prevent_default()
diff --git a/thaw/src/config_provider/mod.rs b/thaw/src/config_provider/mod.rs
index 6ae0685..55fb336 100644
--- a/thaw/src/config_provider/mod.rs
+++ b/thaw/src/config_provider/mod.rs
@@ -10,7 +10,7 @@ pub fn ConfigProvider(
     theme: Option<RwSignal<Theme>>,
     /// Sets the direction of text & generated styles.
     #[prop(optional, into)]
-    dir: RwSignal<Option<ConfigDirection>>,
+    dir: Option<RwSignal<ConfigDirection>>,
     children: Children,
 ) -> impl IntoView {
     mount_style("config-provider", include_str!("./config-provider.css"));
@@ -39,18 +39,14 @@ pub fn ConfigProvider(
         }
     });
 
-    let config_injection = ConfigInjection {
-        theme,
-        dir,
-        id: id.get_value(),
-    };
+    let config_injection = ConfigInjection { theme, dir, id };
 
     view! {
         <Provider value=config_injection>
             <div
                 class=class_list!["thaw-config-provider", class]
                 data-thaw-id=id.get_value()
-                dir=move || dir.get().map(move |dir| dir.as_str())
+                dir=move || dir.map(move |dir| dir.get().as_str())
             >
                 {children()}
             </div>
@@ -61,13 +57,13 @@ pub fn ConfigProvider(
 #[derive(Clone)]
 pub struct ConfigInjection {
     pub theme: RwSignal<Theme>,
-    pub dir: RwSignal<Option<ConfigDirection>>,
-    id: String,
+    pub dir: Option<RwSignal<ConfigDirection>>,
+    id: StoredValue<String>,
 }
 
 impl ConfigInjection {
-    pub fn id(&self) -> &String {
-        &self.id
+    pub fn id(&self) -> String {
+        self.id.get_value()
     }
 
     pub fn expect_context() -> Self {
@@ -75,10 +71,11 @@ impl ConfigInjection {
     }
 }
 
-#[derive(Clone)]
+#[derive(Debug, Clone, Copy, Default)]
 pub enum ConfigDirection {
     Ltr,
     Rtl,
+    #[default]
     Auto,
 }
 
diff --git a/thaw/src/date_picker/panel/mod.rs b/thaw/src/date_picker/panel/mod.rs
index 1d5ba62..3c5fbac 100644
--- a/thaw/src/date_picker/panel/mod.rs
+++ b/thaw/src/date_picker/panel/mod.rs
@@ -73,7 +73,7 @@ pub fn Panel(
         >
             <div
                 class="thaw-config-provider thaw-date-picker-panel"
-                data-thaw-id=config_provider.id().clone()
+                data-thaw-id=config_provider.id()
                 style=move || display.get().unwrap_or_default()
                 node_ref=panel_ref
                 on:mousedown=|e| e.prevent_default()
diff --git a/thaw/src/dialog/dialog.rs b/thaw/src/dialog/dialog.rs
index 4b09127..bf9508f 100644
--- a/thaw/src/dialog/dialog.rs
+++ b/thaw/src/dialog/dialog.rs
@@ -35,7 +35,7 @@ pub fn Dialog(
             <FocusTrap disabled=!close_on_esc active=open.signal() on_esc>
                 <div
                     class=class_list!["thaw-config-provider thaw-dialog", class]
-                    data-thaw-id=config_provider.id().clone()
+                    data-thaw-id=config_provider.id()
                 >
                     <CSSTransition
                         node_ref=mask_ref
diff --git a/thaw/src/drawer/overlay_drawer.rs b/thaw/src/drawer/overlay_drawer.rs
index 63fc3d7..b383e32 100644
--- a/thaw/src/drawer/overlay_drawer.rs
+++ b/thaw/src/drawer/overlay_drawer.rs
@@ -58,7 +58,7 @@ pub fn OverlayDrawer(
             <FocusTrap disabled=!close_on_esc active=open.signal() on_esc>
                 <div
                     class=class_list!["thaw-config-provider thaw-overlay-drawer-container", class]
-                    data-thaw-id=config_provider.id().clone()
+                    data-thaw-id=config_provider.id()
                 >
                     <CSSTransition
                         node_ref=mask_ref
diff --git a/thaw/src/loading_bar/mod.rs b/thaw/src/loading_bar/mod.rs
index c884c90..6fa3aa9 100644
--- a/thaw/src/loading_bar/mod.rs
+++ b/thaw/src/loading_bar/mod.rs
@@ -100,7 +100,7 @@ fn LoadingBar(#[prop(optional)] comp_ref: ComponentRef<LoadingBarRef>) -> impl I
     view! {
         <div
             class="thaw-config-provider thaw-loading-bar-container"
-            data-thaw-id=config_provider.id().clone()
+            data-thaw-id=config_provider.id()
             style="display: none"
             node_ref=container_ref
         >
diff --git a/thaw/src/menu/mod.rs b/thaw/src/menu/mod.rs
index 411093d..e2fdb7d 100644
--- a/thaw/src/menu/mod.rs
+++ b/thaw/src/menu/mod.rs
@@ -128,7 +128,7 @@ pub fn Menu(
                                 move || appearance.get().map(|a| format!("thaw-menu--{}", a.as_str())),
                                 class
                             ]
-                            data-thaw-id=config_provider.id().clone()
+                            data-thaw-id=config_provider.id()
                             style=move || display.get().unwrap_or_default()
                             node_ref=menu_ref
                             on:mouseenter=on_mouse_enter
diff --git a/thaw/src/popover/mod.rs b/thaw/src/popover/mod.rs
index 006482d..f452e2d 100644
--- a/thaw/src/popover/mod.rs
+++ b/thaw/src/popover/mod.rs
@@ -138,7 +138,7 @@ pub fn Popover(
                             move || appearance.get().map(|a| format!("thaw-popover-surface--{}", a.as_str())),
                             class
                         ]
-                        data-thaw-id=config_provider.id().clone()
+                        data-thaw-id=config_provider.id()
                         style=move || display.get().unwrap_or_default()
 
                         node_ref=popover_ref
diff --git a/thaw/src/time_picker/mod.rs b/thaw/src/time_picker/mod.rs
index 978bfb2..dea6a1f 100644
--- a/thaw/src/time_picker/mod.rs
+++ b/thaw/src/time_picker/mod.rs
@@ -255,7 +255,7 @@ fn Panel(
         >
             <div
                 class="thaw-config-provider thaw-time-picker-panel"
-                data-thaw-id=config_provider.id().clone()
+                data-thaw-id=config_provider.id()
                 style=move || display.get().unwrap_or_default()
                 node_ref=panel_ref
                 on:mousedown=|e| e.prevent_default()
diff --git a/thaw/src/toast/toaster.rs b/thaw/src/toast/toaster.rs
index 8ec7ed3..23f47bd 100644
--- a/thaw/src/toast/toaster.rs
+++ b/thaw/src/toast/toaster.rs
@@ -68,7 +68,7 @@ pub fn Toaster(
         <Teleport>
             <div
                 class="thaw-config-provider thaw-toaster-wrapper"
-                data-thaw-id=config_provider.id().clone()
+                data-thaw-id=config_provider.id()
             >
                 <div class="thaw-toaster thaw-toaster--top">
                     <For each=move || top_id_list.get() key=|id| id.clone() let:id>
diff --git a/thaw/src/tooltip/tooltip.rs b/thaw/src/tooltip/tooltip.rs
index c0ebd70..3e286b1 100644
--- a/thaw/src/tooltip/tooltip.rs
+++ b/thaw/src/tooltip/tooltip.rs
@@ -80,7 +80,7 @@ pub fn Tooltip(
                             "thaw-config-provider thaw-tooltip-content",
                             move || format!("thaw-tooltip-content--{}", appearance.get().as_str())
                         ]
-                        data-thaw-id=config_provider.id().clone()
+                        data-thaw-id=config_provider.id()
                         style=move || display.get().unwrap_or_default()
                         role="tooltip"
                         node_ref=content_ref