From e10455aed765767a885b49703bf271b8617f202b Mon Sep 17 00:00:00 2001
From: Ronald Urbina <140639086+ronald-urbina@users.noreply.github.com>
Date: Thu, 11 Jun 2026 11:22:39 -0300
Subject: [PATCH] fix(docs): replace <Controls /> with <Controls.Root> in code
 samples (#1492)

---
 site/src/content/docs/concepts/overview.mdx          |  4 ++--
 site/src/content/docs/reference/player-container.mdx | 12 +++++++++---
 site/src/content/docs/reference/player-provider.mdx  |  4 +++-
 3 files changed, 14 insertions(+), 6 deletions(-)

diff --git a/site/src/content/docs/concepts/overview.mdx b/site/src/content/docs/concepts/overview.mdx
index 82b430be..d8378aec 100644
--- a/site/src/content/docs/concepts/overview.mdx
+++ b/site/src/content/docs/concepts/overview.mdx
@@ -83,10 +83,10 @@ If you want more control than skins offer you, you can build your own UI from ou
 <Player.Provider>
   <Player.Container> {/* [!code focus] */}
     <Video src="video.mp4" />
-    <MediaControls> {/* [!code focus] */}
+    <Controls.Root> {/* [!code focus] */}
       <PlayButton /> {/* [!code focus] */}
       {/* ... */} {/* [!code focus] */}
-    </MediaControls> {/* [!code focus] */}
+    </Controls.Root> {/* [!code focus] */}
   </Player.Container> {/* [!code focus] */}
 </Player.Provider>
 ```
diff --git a/site/src/content/docs/reference/player-container.mdx b/site/src/content/docs/reference/player-container.mdx
index f6ed8a84..f9d5e254 100644
--- a/site/src/content/docs/reference/player-container.mdx
+++ b/site/src/content/docs/reference/player-container.mdx
@@ -21,7 +21,9 @@ The `<media-container>` is the player's physical surface. It defines the visual
 <Player.Provider>
   <Player.Container> {/* [!code focus] */}
     <video src="video.mp4" />
-    <Controls />
+    <Controls.Root>
+      {/* ... */}
+    </Controls.Root>
   </Player.Container> {/* [!code focus] */}
 </Player.Provider>
 ```
@@ -93,7 +95,9 @@ The container is the visual box around your media and controls. Sizing, aspect r
 ```tsx
 <Player.Container style={{ width: 640, aspectRatio: '16/9' }}>
   <video src="video.mp4" />
-  <Controls />
+  <Controls.Root>
+    {/* ... */}
+  </Controls.Root>
 </Player.Container>
 ```
 </FrameworkCase>
@@ -175,7 +179,9 @@ The <DocsLink slug="reference/player-provider">provider</DocsLink> gives compone
 <Player.Provider>
   <Player.Container>
     <video src="video.mp4" />
-    <Controls />          {/* fullscreen, activity detection, gestures */}
+    <Controls.Root>          {/* fullscreen, activity detection, gestures */}
+      {/* ... */}
+    </Controls.Root>
   </Player.Container>
 
   <Transcript />          {/* state & actions, but no container behaviors */}
diff --git a/site/src/content/docs/reference/player-provider.mdx b/site/src/content/docs/reference/player-provider.mdx
index d34e594f..06f94a0d 100644
--- a/site/src/content/docs/reference/player-provider.mdx
+++ b/site/src/content/docs/reference/player-provider.mdx
@@ -181,7 +181,9 @@ The provider's scope can extend beyond the fullscreen target. Playlists, transcr
 <Player.Provider>
   <Player.Container>
     <video src="video.mp4" />
-    <Controls />          {/* goes fullscreen with the video */}
+    <Controls.Root>          {/* goes fullscreen with the video */}
+      {/* ... */}
+    </Controls.Root>
   </Player.Container>
 
   <Transcript />          {/* outside container — still has store access */}