diff --git a/site/src/content/docs/concepts/features.mdx b/site/src/content/docs/concepts/features.mdx
index 0578c44b..c10df21b 100644
--- a/site/src/content/docs/concepts/features.mdx
+++ b/site/src/content/docs/concepts/features.mdx
@@ -50,20 +50,20 @@ If you're not using presets, you can create a player that has individual feature
 
 <FrameworkCase frameworks={["react"]}>
 ```tsx
-import { createPlayer, playback, volume, time } from '@videojs/react';
+import { createPlayer, playbackFeature, volumeFeature, timeFeature, controlsFeature } from '@videojs/react';
 
 const Player = createPlayer({
-  features: [playback, volume, time],
+  features: [playbackFeature, volumeFeature, timeFeature, controlsFeature],
 });
 ```
 </FrameworkCase>
 
 <FrameworkCase frameworks={["html"]}>
 ```ts
-import { createPlayer, playback, volume, time } from '@videojs/html';
+import { createPlayer, playbackFeature, volumeFeature, timeFeature, controlsFeature } from '@videojs/html';
 
 const { ProviderMixin, PlayerController, context } = createPlayer({ // [!code focus]
-  features: [playback, volume, time], // [!code focus]
+  features: [playbackFeature, volumeFeature, timeFeature, controlsFeature], // [!code focus]
 }); // [!code focus]
 
 class MyPlayer extends ProviderMixin(MediaElement) {
@@ -80,22 +80,22 @@ Since feature bundles are just an array of features under the hood, it doesn't t
 
 <FrameworkCase frameworks={["react"]}>
 ```tsx
-import { createPlayer, playback } from '@videojs/react';
+import { createPlayer, playbackFeature } from '@videojs/react';
 import { backgroundFeatures } from '@videojs/react/background';
 
 const Player = createPlayer({
-  features: [...backgroundFeatures, playback],
+  features: [...backgroundFeatures, playbackFeature],
 });
 ```
 </FrameworkCase>
 <FrameworkCase frameworks={["html"]}>
 ```ts
-import { createPlayer, playback } from '@videojs/html';
+import { createPlayer, playbackFeature } from '@videojs/html';
 import { backgroundFeatures } from '@videojs/html/background';
 import { MediaElement } from '@videojs/html';
 
 const { ProviderMixin } = createPlayer({ // [!code focus]
-  features: [...backgroundFeatures, playback], // [!code focus]
+  features: [...backgroundFeatures, playbackFeature], // [!code focus]
 }); // [!code focus]
 
 class MyPlayer extends ProviderMixin(MediaElement) {
diff --git a/site/src/content/docs/concepts/presets.mdx b/site/src/content/docs/concepts/presets.mdx
index 0181a13a..b10c2dda 100644
--- a/site/src/content/docs/concepts/presets.mdx
+++ b/site/src/content/docs/concepts/presets.mdx
@@ -74,11 +74,11 @@ Add features to a preset's feature bundle to enable new functionality. For examp
 
 <FrameworkCase frameworks={["react"]}>
 ```tsx title="App.tsx"
-import { createPlayer, playback } from '@videojs/react';
+import { createPlayer, playbackFeature } from '@videojs/react';
 import { backgroundFeatures, BackgroundVideo } from '@videojs/react/background';
 
 const Player = createPlayer({ // [!code focus]
-  features: [...backgroundFeatures, playback], // [!code focus]
+  features: [...backgroundFeatures, playbackFeature], // [!code focus]
 }); // [!code focus]
 
 function Hero() {
@@ -96,13 +96,13 @@ function Hero() {
 <FrameworkCase frameworks={["html"]}>
 ```html title="index.html"
 <script type="module">
-  import { createPlayer, playback, MediaElement } from '@videojs/html';
+  import { createPlayer, playbackFeature, MediaElement } from '@videojs/html';
   import { backgroundFeatures } from '@videojs/html/background';
   import '@videojs/html/media/container';
   import '@videojs/html/ui/play-button';
 
   const { ProviderMixin } = createPlayer({ // [!code focus]
-    features: [...backgroundFeatures, playback], // [!code focus]
+    features: [...backgroundFeatures, playbackFeature], // [!code focus]
   }); // [!code focus]
 
   class MyPlayer extends ProviderMixin(MediaElement) {
diff --git a/site/src/content/docs/concepts/why-videojs.mdx b/site/src/content/docs/concepts/why-videojs.mdx
index 4a4632be..1b486703 100644
--- a/site/src/content/docs/concepts/why-videojs.mdx
+++ b/site/src/content/docs/concepts/why-videojs.mdx
@@ -84,19 +84,19 @@ Most player libraries ship every feature in one bundle, so you carry code you do
 
 <FrameworkCase frameworks={["react"]}>
 ```tsx
-import { createPlayer, playback, time } from '@videojs/react';
+import { createPlayer, playbackFeature, timeFeature } from '@videojs/react';
 
 const Player = createPlayer({
-  features: [playback, time], // [!code focus]
+  features: [playbackFeature, timeFeature], // [!code focus]
 });
 ```
 </FrameworkCase>
 <FrameworkCase frameworks={["html"]}>
 ```ts
-import { createPlayer, playback, time } from '@videojs/html';
+import { createPlayer, playbackFeature, timeFeature } from '@videojs/html';
 
 const { ProviderMixin, PlayerController, context } = createPlayer({
-  features: [playback, time], // [!code focus]
+  features: [playbackFeature, timeFeature], // [!code focus]
 });
 ```
 </FrameworkCase>