diff --git a/Cargo.lock b/Cargo.lock
index 7132c008..ae251751 100644
--- a/Cargo.lock
+++ b/Cargo.lock
@@ -2886,6 +2886,13 @@ dependencies = [
  "radix-leptos-label",
 ]
 
+[[package]]
+name = "radix-leptos-direction"
+version = "0.0.2"
+dependencies = [
+ "leptos",
+]
+
 [[package]]
 name = "radix-leptos-id"
 version = "0.0.2"
diff --git a/Cargo.toml b/Cargo.toml
index dd20c656..3b9211ae 100644
--- a/Cargo.toml
+++ b/Cargo.toml
@@ -17,6 +17,7 @@ members = [
     "packages/primitives/leptos/accessible-icon",
     "packages/primitives/leptos/arrow",
     "packages/primitives/leptos/aspect-ratio",
+    "packages/primitives/leptos/direction",
     "packages/primitives/leptos/id",
     "packages/primitives/leptos/label",
     "packages/primitives/leptos/visually-hidden",
diff --git a/book/src/primitives/utilities/direction-provider.md b/book/src/primitives/utilities/direction-provider.md
index 47ae1d9d..58759d76 100644
--- a/book/src/primitives/utilities/direction-provider.md
+++ b/book/src/primitives/utilities/direction-provider.md
@@ -81,9 +81,9 @@ When creating localized apps that require right-to-left (RTL) reading direction,
 {{#tabs global="framework" }}
 {{#tab name="Leptos" }}
 
-| Prop  | Type                     | Default |
-| ----- | ------------------------ | ------- |
-| `dir` | `MaybeSignal<Direction>` | -       |
+| Prop  | Type                | Default |
+| ----- | ------------------- | ------- |
+| `dir` | `Signal<Direction>` | -       |
 
 {{#endtab }}
 {{#tab name="Yew" }}
diff --git a/packages/primitives/leptos/direction/src/direction.rs b/packages/primitives/leptos/direction/src/direction.rs
index d55485b3..7a6051d2 100644
--- a/packages/primitives/leptos/direction/src/direction.rs
+++ b/packages/primitives/leptos/direction/src/direction.rs
@@ -1,6 +1,6 @@
 use std::fmt::{Display, Formatter};
 
-use leptos::*;
+use leptos::{attr::AttributeValue, context::Provider, prelude::*, tachys::renderer::Rndr};
 
 #[derive(Clone, Copy, Debug, Eq, Hash, PartialEq)]
 pub enum Direction {
@@ -21,17 +21,61 @@ impl Display for Direction {
     }
 }
 
-impl IntoAttribute for Direction {
-    fn into_attribute(self) -> Attribute {
-        Attribute::String(self.to_string().into())
+impl AttributeValue for Direction {
+    type AsyncOutput = Self;
+    type State = (leptos::tachys::renderer::types::Element, Direction);
+    type Cloneable = Direction;
+    type CloneableOwned = Direction;
+
+    fn html_len(&self) -> usize {
+        self.to_string().len()
+    }
+
+    fn to_html(self, key: &str, buf: &mut String) {
+        <&str as AttributeValue>::to_html(self.to_string().as_str(), key, buf);
+    }
+
+    fn to_template(_key: &str, _buf: &mut String) {}
+
+    fn hydrate<const FROM_SERVER: bool>(
+        self,
+        key: &str,
+        el: &leptos::tachys::renderer::types::Element,
+    ) -> Self::State {
+        let (el, _) =
+            <&str as AttributeValue>::hydrate::<FROM_SERVER>(self.to_string().as_str(), key, el);
+        (el, self)
+    }
+
+    fn build(self, el: &leptos::tachys::renderer::types::Element, key: &str) -> Self::State {
+        Rndr::set_attribute(el, key, &self.to_string());
+        (el.clone(), self)
     }
 
-    fn into_attribute_boxed(self: Box<Self>) -> Attribute {
-        self.into_attribute()
+    fn rebuild(self, key: &str, state: &mut Self::State) {
+        let (el, prev_value) = state;
+        if self != *prev_value {
+            Rndr::set_attribute(el, key, &self.to_string());
+        }
+        *prev_value = self;
+    }
+
+    fn into_cloneable(self) -> Self::Cloneable {
+        self
+    }
+
+    fn into_cloneable_owned(self) -> Self::CloneableOwned {
+        self
+    }
+
+    fn dry_resolve(&mut self) {}
+
+    async fn resolve(self) -> Self::AsyncOutput {
+        self
     }
 }
 
-type DirectionContextValue = MaybeSignal<Direction>;
+type DirectionContextValue = Signal<Direction>;
 
 #[component]
 pub fn DirectionProvider(