diff --git a/Cargo.lock b/Cargo.lock
index 1a811806..5ee673ed 100644
--- a/Cargo.lock
+++ b/Cargo.lock
@@ -2257,16 +2257,6 @@ dependencies = [
  "send_wrapper",
 ]
 
-[[package]]
-name = "leptos-style"
-version = "0.2.0"
-source = "registry+https://github.com/rust-lang/crates.io-index"
-checksum = "c65408961a0bd8e70f317de8973d532a0cb9ffbac910c488d97f9c5a2e4411e2"
-dependencies = [
- "indexmap",
- "leptos",
-]
-
 [[package]]
 name = "leptos-typed-fallback-show"
 version = "0.2.0"
@@ -3093,7 +3083,8 @@ name = "radix-leptos-aspect-ratio"
 version = "0.0.2"
 dependencies = [
  "leptos",
- "leptos-style",
+ "leptos-node-ref",
+ "radix-leptos-primitive",
 ]
 
 [[package]]
diff --git a/book/src/primitives/components/aspect-ratio.md b/book/src/primitives/components/aspect-ratio.md
index b584eaed..ba52a3fb 100644
--- a/book/src/primitives/components/aspect-ratio.md
+++ b/book/src/primitives/components/aspect-ratio.md
@@ -102,9 +102,10 @@ Contains the content you want to constrain to a given ratio.
 {{#tabs global="framework" }}
 {{#tab name="Leptos" }}
 
-| Prop    | Type             | Default |
-| ------- | ---------------- | ------- |
-| `ratio` | `MaybeProp<f64>` | `1.0`   |
+| Prop       | Type              | Default |
+| ---------- | ----------------- | ------- |
+| `as_child` | `MaybeProp<bool>` | `false` |
+| `ratio`    | `Signal<f64>`     | `1.0`   |
 
 {{#endtab }}
 {{#tab name="Yew" }}
diff --git a/packages/primitives/leptos/aspect-ratio/Cargo.toml b/packages/primitives/leptos/aspect-ratio/Cargo.toml
index 98ee8a20..a63f6499 100644
--- a/packages/primitives/leptos/aspect-ratio/Cargo.toml
+++ b/packages/primitives/leptos/aspect-ratio/Cargo.toml
@@ -11,4 +11,5 @@ version.workspace = true
 
 [dependencies]
 leptos.workspace = true
-leptos-style.workspace = true
+leptos-node-ref.workspace = true
+radix-leptos-primitive = { path = "../primitive", version = "0.0.2" }
diff --git a/packages/primitives/leptos/aspect-ratio/src/aspect_ratio.rs b/packages/primitives/leptos/aspect-ratio/src/aspect_ratio.rs
index 60b42326..875b5ad8 100644
--- a/packages/primitives/leptos/aspect-ratio/src/aspect_ratio.rs
+++ b/packages/primitives/leptos/aspect-ratio/src/aspect_ratio.rs
@@ -1,80 +1,41 @@
-use leptos::prelude::*;
-use leptos_style::Style;
-
-pub struct UseAspectRatioProps {
-    style: Style,
-}
-
-pub struct UseAspectRatioAttrs {
-    style: Style,
-}
-
-pub fn use_aspect_ratio(props: UseAspectRatioProps) -> UseAspectRatioAttrs {
-    UseAspectRatioAttrs {
-        style: props.style.with_defaults([
-            // Ensures children expand in ratio.
-            ("position", "absolute"),
-            ("top", "0px"),
-            ("right", "0px"),
-            ("bottom", "0px"),
-            ("left", "0px"),
-        ]),
-    }
-}
-
-#[component]
-pub fn BaseAspectRatio(
-    #[prop(into, optional)] ratio: MaybeProp<f64>,
-    #[prop(optional)] children: Option<Children>,
-) -> impl IntoView {
-    let ratio = Signal::derive(move || ratio.get().unwrap_or(1.0));
-
-    view! {
-        <div
-            // Ensures inner element is contained.
-            style:position="relative"
-            // Ensures padding bottom trick maths works.
-            style:width="100%"
-            style:padding-bottom=move || format!("{}%", 100.0 / ratio.get())
-            data-radix-aspect-ratio-wrapper=""
-        >
-            {children.map(|children| children())}
-        </div>
-    }
-}
+use leptos::{attribute_interceptor::AttributeInterceptor, html, prelude::*};
+use leptos_node_ref::AnyNodeRef;
+use radix_leptos_primitive::Primitive;
 
 #[component]
 pub fn AspectRatio(
-    #[prop(into, optional)] ratio: MaybeProp<f64>,
-    #[prop(into, optional)] style: Style,
-    #[prop(optional)] children: Option<Children>,
+    #[prop(into, optional, default = 1.0.into())] ratio: Signal<f64>,
+    #[prop(into, optional)] as_child: MaybeProp<bool>,
+    #[prop(optional)] node_ref: AnyNodeRef,
+    children: TypedChildrenFn<impl IntoView + 'static>,
 ) -> impl IntoView {
-    let attrs = use_aspect_ratio(UseAspectRatioProps { style });
+    let children = StoredValue::new(children.into_inner());
 
     view! {
-        <BaseAspectRatio ratio=ratio>
-            <div style={attrs.style}>
-                {children.map(|children| children())}
+        <AttributeInterceptor let:attrs>
+            <div
+                // Ensures inner element is contained
+                style:position="relative"
+                // Ensures padding bottom trick maths works
+                style:width="100%"
+                style:padding-bottom=move || format!("{}%", 100.0 / ratio.get())
+                data-radix-aspect-ratio-wrapper=""
+            >
+                <Primitive
+                    element=html::div
+                    as_child=as_child
+                    node_ref=node_ref
+                    // Ensures children expand in ratio
+                    style:position="absolute"
+                    style:top="0px"
+                    style:right="0px"
+                    style:bottom="0px"
+                    style:left="0px"
+                    {..attrs}
+                >
+                    {children.with_value(|children| children())}
+                </Primitive>
             </div>
-        </BaseAspectRatio>
-    }
-}
-
-#[component]
-pub fn AspectRatioAsChild<R, RV>(
-    #[prop(into, optional)] ratio: MaybeProp<f64>,
-    #[prop(into, optional)] style: Style,
-    render: R,
-) -> impl IntoView
-where
-    R: Fn(UseAspectRatioAttrs) -> RV + Send + 'static,
-    RV: IntoView + 'static,
-{
-    let attrs = use_aspect_ratio(UseAspectRatioProps { style });
-
-    view! {
-        <BaseAspectRatio ratio=ratio>
-            {render(attrs)}
-        </BaseAspectRatio>
+        </AttributeInterceptor>
     }
 }