diff --git a/site/src/components/docs/api-reference/MediaImports.astro b/site/src/components/docs/api-reference/MediaImports.astro
index 33d773522f..65f352ef4d 100644
--- a/site/src/components/docs/api-reference/MediaImports.astro
+++ b/site/src/components/docs/api-reference/MediaImports.astro
@@ -13,4 +13,4 @@ interface Props {
const { media, package: pkg, react } = Astro.props;
---
-
+
diff --git a/site/src/components/docs/api-reference/ModuleImports.astro b/site/src/components/docs/api-reference/ModuleImports.astro
index 593983c1b0..0cfd593f72 100644
--- a/site/src/components/docs/api-reference/ModuleImports.astro
+++ b/site/src/components/docs/api-reference/ModuleImports.astro
@@ -13,22 +13,29 @@ interface Props {
name: string;
/** Package that ships the module's adapter or extension, installed beside the framework package. */
package?: string;
+ /** Whether the install command should include only the module package. */
+ packageOnlyInstall?: boolean;
/** Named export from the React module. */
react: string;
/** Public module family shared by the React, HTML, and CDN imports. */
subpath: 'extensions' | 'media';
}
-const { name, package: pkg, react, subpath } = Astro.props;
+const { name, package: pkg, packageOnlyInstall = false, react, subpath } = Astro.props;
const cdnCode = ``;
const imports: Array<{ code: string; framework: 'react' | 'html'; lang: BundledLanguage }> = [
...(pkg
- ? [
- { code: `pnpm add @videojs/react ${pkg}`, framework: 'react' as const, lang: 'bash' as const },
- { code: `pnpm add @videojs/html ${pkg}`, framework: 'html' as const, lang: 'bash' as const },
- ]
+ ? packageOnlyInstall
+ ? [
+ { code: `pnpm add ${pkg}`, framework: 'react' as const, lang: 'bash' as const },
+ { code: `pnpm add ${pkg}`, framework: 'html' as const, lang: 'bash' as const },
+ ]
+ : [
+ { code: `pnpm add @videojs/react ${pkg}`, framework: 'react' as const, lang: 'bash' as const },
+ { code: `pnpm add @videojs/html ${pkg}`, framework: 'html' as const, lang: 'bash' as const },
+ ]
: []),
{
code: `import { ${react} } from '@videojs/react/${subpath}/${name}';`,