From 7d5e79b8a1f7de8685db8ca31212396579b5b43f Mon Sep 17 00:00:00 2001
From: Darius Cepulis <dcepulis@mux.com>
Date: Mon, 3 Nov 2025 14:15:07 -0600
Subject: [PATCH] docs: specify npm dist tag (#155)

---
 site/src/components/HomePageDemo/Base.tsx     | 6 ++++--
 site/src/content/docs/how-to/installation.mdx | 6 +++---
 site/src/utils/ejectCodeGenerator.ts          | 8 ++++++--
 3 files changed, 13 insertions(+), 7 deletions(-)

diff --git a/site/src/components/HomePageDemo/Base.tsx b/site/src/components/HomePageDemo/Base.tsx
index 97af3835..12af647c 100644
--- a/site/src/components/HomePageDemo/Base.tsx
+++ b/site/src/components/HomePageDemo/Base.tsx
@@ -18,7 +18,8 @@ function generateReactCode(skin: Skin): string {
   const skinComponent = skin === 'frosted' ? 'FrostedSkin' : 'MinimalSkin';
   const skinImport = skin === 'frosted' ? 'frosted' : 'minimal';
 
-  return `import { MediaProvider, Video } from '@videojs/react';
+  return `// npm install @videojs/react@next
+import { MediaProvider, Video } from '@videojs/react';
 import { ${skinComponent} } from '@videojs/react/skins/${skinImport}';
 
 export const VideoPlayer = () => {
@@ -33,7 +34,8 @@ export const VideoPlayer = () => {
 }
 
 function generateJS(skin: Skin): string {
-  return `import '@videojs/html/skins/${skin}';`;
+  return `// npm install @videojs/html@next
+import '@videojs/html/skins/${skin}';`;
 }
 
 export default function BaseDemo({ className }: { className?: string }) {
diff --git a/site/src/content/docs/how-to/installation.mdx b/site/src/content/docs/how-to/installation.mdx
index 472b26bc..0f2983dc 100644
--- a/site/src/content/docs/how-to/installation.mdx
+++ b/site/src/content/docs/how-to/installation.mdx
@@ -24,16 +24,16 @@ Video.js v10 supports both React and vanilla JavaScript/HTML through Web Compone
 
 First, select your preferred framework in the framework selector at the top of the <span class="hidden lg:inline">sidebar</span><span class="lg:hidden">page</span>.
 
-Then, install the appropriate package:
+Then, install the appropriate package, taking care to use the `@next` dist.
 
 <FrameworkCase frameworks={["react"]}>
 ```bash
-npm install @videojs/react
+npm install @videojs/react@next
 ```
 </FrameworkCase>
 <FrameworkCase frameworks={["html"]}>
 ```bash
-npm install @videojs/html
+npm install @videojs/html@next
 ```
 </FrameworkCase>
 
diff --git a/site/src/utils/ejectCodeGenerator.ts b/site/src/utils/ejectCodeGenerator.ts
index e5537b7e..9325f758 100644
--- a/site/src/utils/ejectCodeGenerator.ts
+++ b/site/src/utils/ejectCodeGenerator.ts
@@ -11,7 +11,8 @@ type Skin = 'frosted' | 'minimal';
  */
 export function generateReactComponent(skin: Skin): string {
   if (skin === 'frosted') {
-    return `import type { PropsWithChildren } from 'react';
+    return `// npm install @videojs/react@next
+import type { PropsWithChildren } from 'react';
 
 import { CurrentTimeDisplay, DurationDisplay, FullscreenButton, MediaContainer, MuteButton, PlayButton, Popover, PreviewTimeDisplay, TimeSlider, Tooltip, VolumeSlider } from '@videojs/react';
 import {
@@ -127,7 +128,8 @@ export default function FrostedSkin({ children, className = '' }: SkinProps): JS
   );
 }`;
   } else {
-    return `import type { PropsWithChildren } from 'react';
+    return `// npm install @videojs/react@next
+import type { PropsWithChildren } from 'react';
 
 import { CurrentTimeDisplay, DurationDisplay, FullscreenButton, MediaContainer, MuteButton, PlayButton, Popover, PreviewTimeDisplay, TimeSlider, Tooltip, VolumeSlider } from '@videojs/react';
 import {
@@ -1911,6 +1913,8 @@ media-tooltip {
  */
 export function generateHTMLJS(skin: Skin): string {
   return `import './${skin}.css';
+
+// npm install @videojs/html@next
 import '@videojs/html/icons';
 // be sure to import media-provider first
 import '@videojs/html/define/media-provider';