diff --git a/site/src/content/docs/concepts/skins.mdx b/site/src/content/docs/concepts/skins.mdx
index 7cc6de76..0d7a14bb 100644
--- a/site/src/content/docs/concepts/skins.mdx
+++ b/site/src/content/docs/concepts/skins.mdx
@@ -138,10 +138,10 @@ export function CustomSkin({ children, className }) {
   <media-container class="custom-skin">
     <slot></slot>
     <div class="controls">
-      <vjs-play-button></vjs-play-button>
-      <vjs-time-slider>
+      <media-play-button></media-play-button>
+      <media-time-slider>
         <!-- Custom skin structure -->
-      </vjs-time-slider>
+      </media-time-slider>
     </div>
   </media-container>
 </media-provider>
diff --git a/site/src/content/docs/concepts/ui-components.mdx b/site/src/content/docs/concepts/ui-components.mdx
index 3c7b4037..acd53a17 100644
--- a/site/src/content/docs/concepts/ui-components.mdx
+++ b/site/src/content/docs/concepts/ui-components.mdx
@@ -28,13 +28,13 @@ Each primitive represents at most **one HTML element**, without internal element
 
 <FrameworkCase frameworks={["html"]}>
 ```html
-<vjs-time-slider>
+<media-time-slider>
   <div class="track">        <!-- One element: the track -->
     <div class="progress"></div>  <!-- One element: the progress bar -->
     <div class="pointer"></div>   <!-- One element: hover indicator -->
   </div>
   <div class="thumb"></div>       <!-- One element: the draggable thumb -->
-</vjs-time-slider>
+</media-time-slider>
 ```
 </FrameworkCase>