diff --git a/Cargo.lock b/Cargo.lock
index b74d7be6..1a811806 100644
--- a/Cargo.lock
+++ b/Cargo.lock
@@ -3242,7 +3242,8 @@ name = "radix-leptos-visually-hidden"
 version = "0.0.2"
 dependencies = [
  "leptos",
- "leptos-style",
+ "leptos-node-ref",
+ "radix-leptos-primitive",
 ]
 
 [[package]]
diff --git a/book/src/primitives/utilities/visually-hidden.md b/book/src/primitives/utilities/visually-hidden.md
index f420d132..b6c1b4ac 100644
--- a/book/src/primitives/utilities/visually-hidden.md
+++ b/book/src/primitives/utilities/visually-hidden.md
@@ -81,7 +81,9 @@ Anything you put inside this component will be hidden from the screen but will b
 {{#tabs global="framework" }}
 {{#tab name="Leptos" }}
 
-<i>No props.</i>
+| Prop       | Type              | Default |
+| ---------- | ----------------- | ------- |
+| `as_child` | `MaybeProp<bool>` | `false` |
 
 {{#endtab }}
 {{#tab name="Yew" }}
@@ -124,9 +126,9 @@ use radix_yew_icons::GearIcon;
 use radix_yew_visually_hidden::*;
 use yew::prelude::*;
 
-#[component]
-fn Example() -> impl IntoView {
-    view! {
+#[function_component]
+fn Example() -> Html {
+    html! {
         <button>
             <GearIcon />
             <VisuallyHidden>{"Settings"}</VisuallyHidden>
diff --git a/packages/primitives/leptos/visually-hidden/Cargo.toml b/packages/primitives/leptos/visually-hidden/Cargo.toml
index 77eadc99..06f90ed2 100644
--- a/packages/primitives/leptos/visually-hidden/Cargo.toml
+++ b/packages/primitives/leptos/visually-hidden/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/visually-hidden/src/visually_hidden.rs b/packages/primitives/leptos/visually-hidden/src/visually_hidden.rs
index 36a6635b..7db2e742 100644
--- a/packages/primitives/leptos/visually-hidden/src/visually_hidden.rs
+++ b/packages/primitives/leptos/visually-hidden/src/visually_hidden.rs
@@ -1,56 +1,31 @@
-use leptos::prelude::*;
-use leptos_style::Style;
-
-pub struct UseVisuallyHiddenProps {
-    style: Style,
-}
-
-pub struct UseVisuallyHiddenAttrs {
-    style: Style,
-}
-
-pub fn use_visually_hidden(props: UseVisuallyHiddenProps) -> UseVisuallyHiddenAttrs {
-    UseVisuallyHiddenAttrs {
-        style: props.style.with_defaults([
-            // See: https://github.com/twbs/bootstrap/blob/master/scss/mixins/_screen-reader.scss
-            ("position", "absolute"),
-            ("border", "0px"),
-            ("width", "1px"),
-            ("height", "1px"),
-            ("padding", "0px"),
-            ("margin", "-1px"),
-            ("overflow", "hidden"),
-            ("clip", "rect(0, 0, 0, 0)"),
-            ("white-space", "nowrap"),
-            ("word-wrap", "normal"),
-        ]),
-    }
-}
+use leptos::{html, prelude::*};
+use leptos_node_ref::AnyNodeRef;
+use radix_leptos_primitive::Primitive;
 
 #[component]
 pub fn VisuallyHidden(
-    #[prop(into, optional)] style: Style,
-    #[prop(optional)] children: Option<Children>,
+    #[prop(into, optional)] as_child: MaybeProp<bool>,
+    #[prop(into, optional)] node_ref: AnyNodeRef,
+    children: TypedChildrenFn<impl IntoView + 'static>,
 ) -> impl IntoView {
-    let UseVisuallyHiddenAttrs { style } = use_visually_hidden(UseVisuallyHiddenProps { style });
-
     view! {
-        <span style=style>
-            {children.map(|children| children())}
-        </span>
-    }
-}
+        <Primitive
+            element=html::span
+            as_child=as_child
+            node_ref=node_ref
+            children=children
 
-#[component]
-pub fn VisuallyHiddenAsChild<R, RV>(
-    #[prop(into, optional)] style: Style,
-    render: R,
-) -> impl IntoView
-where
-    R: Fn(UseVisuallyHiddenAttrs) -> RV,
-    RV: IntoView,
-{
-    let attrs = use_visually_hidden(UseVisuallyHiddenProps { style });
-
-    render(attrs)
+            // See: https://github.com/twbs/bootstrap/blob/main/scss/mixins/_visually-hidden.scss
+            style:position="absolute"
+            style:border="0px"
+            style:width="1px"
+            style:height="1px"
+            style:padding="0px"
+            style:margin="-1px"
+            style:overflow="hidden"
+            style:clip="rect(0, 0, 0, 0)"
+            style:white-space="nowrap"
+            style:word-wrap="normal"
+        />
+    }
 }