diff --git a/docs/angular/guides/storybook-plugin.md b/docs/angular/guides/storybook-plugin.md
index f6ad66cd2edace..590d1ba5e57721 100644
--- a/docs/angular/guides/storybook-plugin.md
+++ b/docs/angular/guides/storybook-plugin.md
@@ -80,37 +80,43 @@ nx run project-name-e2e:e2e
 
 The url that Cypress points to should look like this:
 
-`'/iframe.html?id=buttoncomponent--primary&knob-text=Click me!&knob-padding&knob-style=default'`
+`'/iframe.html?id=buttoncomponent--primary&args=text:Click me!;padding;style:default'`
 
 - `buttoncomponent` is a lowercase version of the `Title` in the `*.stories.ts` file.
 - `primary` is the name of an individual story.
-- `knob-style=default` sets the `style` knob to a value of `default`.
+- `style=default` sets the `style` control to a value of `default`.
 
-Changing knobs in the url query parameters allows your Cypress tests to test different configurations of your component.
+Changing controls in the url query parameters allows your Cypress tests to test different configurations of your component.
 
 ### Example Files
 
 **\*.component.stories.ts file**
 
 ```typescript
-import { text, number } from '@storybook/addon-knobs';
+import { moduleMetadata, Story, Meta } from '@storybook/angular';
 import { ButtonComponent } from './button.component';
 
 export default {
   title: 'ButtonComponent',
-};
-
-export const primary = () => ({
-  moduleMetadata: {
-    imports: [],
-  },
   component: ButtonComponent,
-  props: {
-    text: text('text', 'Click me!'),
-    padding: number('padding', 0),
-    style: text('style', 'default'),
-  },
+  decorators: [
+    moduleMetadata({
+      imports: [],
+    }),
+  ],
+} as Meta<ButtonComponent>;
+
+const Template: Story<ButtonComponent> = (args: ButtonComponent) => ({
+  component: ButtonComponent,
+  props: args,
 });
+
+export const Primary = Template.bind({});
+Primary.args = {
+  text: 'Click me!',
+  padding: 0,
+  style: 'default',
+};
 ```
 
 **Cypress \*.spec.ts file**
@@ -119,7 +125,7 @@ export const primary = () => ({
 describe('shared-ui', () => {
   beforeEach(() =>
     cy.visit(
-      '/iframe.html?id=buttoncomponent--primary&knob-text=Click me!&knob-padding&knob-style=default'
+      '/iframe.html?id=buttoncomponent--primary&args=text:Click me!;padding;style:default'
     )
   );
 
@@ -138,16 +144,16 @@ To register an [addon](https://storybook.js.org/addons/) for all storybook insta
    module.exports = {
    stories: [...],
    ...,
-   addons: [..., '@storybook/addon-knobs/register'],
+   addons: [..., '@storybook/addon-essentials'],
    };
    ```
 2. If a decorator is required, in each project's `<project-path>/.storybook/preview.js` use the `addDecorator` function.
 
    ```typescript
-   import { configure, addDecorator } from '@storybook/angular';
-   import { withKnobs } from '@storybook/addon-knobs';
+   import { addDecorator } from '@storybook/angular';
+   import { YourDecorator } from '@storybook/<something>';
 
-   addDecorator(withKnobs);
+   addDecorator(YourDecorator);
    ```
 
 **-- OR --**
@@ -159,16 +165,16 @@ To register an [addon](https://storybook.js.org/addons/) for a single storybook
    module.exports = {
    stories: [...],
    ...,
-   addons: [..., '@storybook/addon-knobs/register'],
+   addons: [..., '@storybook/addon-essentials'],
    };
    ```
 2. If a decorator is required, in `preview.js` use the `addDecorator` function.
 
    ```typescript
-   import { configure, addDecorator } from '@storybook/angular';
-   import { withKnobs } from '@storybook/addon-knobs';
+   import { addDecorator } from '@storybook/angular';
+   import { YourDecorator } from '@storybook/<something>';
 
-   addDecorator(withKnobs);
+   addDecorator(YourDecorator);
    ```
 
 ### More Information
@@ -290,11 +296,11 @@ If you have not changed the content of the files which the `storybook-configurat
 ```typescript
 module.exports = {
   stories: [],
-  addons: ['@storybook/addon-knobs/register'],
+  addons: ['@storybook/addon-essentials'],
 };
 ```
 
-- If you have any addons in the `addons.js` file, add them in the `addons` array in the `main.js` file. If you are using the default generated files without any changes, you should only have the `@storybook/addon-knobs/register` addon, which we already put in the array. You can now delete the `addons.js` file.
+- If you have any addons in the `addons.js` file, add them in the `addons` array in the `main.js` file. If you are using the default generated files without any changes, you should not have any addons. You can now delete the `addons.js` file.
 
 - The other two files remain unchanged.
 
@@ -323,10 +329,10 @@ After you add any addons in the `main.js` file, you can safely delete the `addon
 - Rename the file `config.js` to `preview.js` and remove the last line where your stories paths are configured. Now, the contents of the `preview.js` file will look like this:
 
 ```typescript
-import { addDecorator } from '<%= uiFramework %>';
-import { withKnobs } from '@storybook/addon-knobs';
+import { addDecorator } from '@storybook/angular';
+import { YourDecorator } from '@storybook/<something>';
 
-addDecorator(withKnobs);
+addDecorator(YourDecorator);
 ```
 
 - Modify the contents of `webpack.config.js`. Remove the following lines, which are the TypeScript configuration, which is not needed by Storybook any more:
diff --git a/docs/react/guides/storybook-plugin.md b/docs/react/guides/storybook-plugin.md
index b869de93bc7daa..02ac58581c81be 100644
--- a/docs/react/guides/storybook-plugin.md
+++ b/docs/react/guides/storybook-plugin.md
@@ -71,28 +71,35 @@ nx run project-name-e2e:e2e
 
 The url that Cypress points to should look like this:
 
-`'/iframe.html?id=buttoncomponent--primary&knob-text=Click me!&knob-padding&knob-style=default'`
+`'/iframe.html?id=buttoncomponent--primary&args=text:Click me!;padding;style:default'`
 
 - `buttoncomponent` is a lowercase version of the `Title` in the `*.stories.ts` file.
 - `primary` is the name of an individual story.
-- `knob-style=default` sets the `style` knob to a value of `default`.
+- `style=default` sets the `style` control to a value of `default`.
 
-Changing knobs in the url query parameters allows your Cypress tests to test different configurations of your component.
+Changing controls in the url query parameters allows your Cypress tests to test different configurations of your component.
 
 ### Example Files
 
 **\*.stories.tsx file**
 
 ```typescript
-import React from 'react';
-import { text, number } from '@storybook/addon-knobs';
-import { Button } from './button';
+import { Story, Meta } from '@storybook/react';
+import { Button, ButtonProps } from './button';
 
-export default { title: 'Button' };
+export default {
+  component: Button,
+  title: 'Button',
+} as Meta;
 
-export const primary = () => (
-  <Button padding={number('Padding', 0)} text={text('Text', 'Click me')} />
-);
+const Template: Story<ButtonProps> = (args) => <Button {...args} />;
+
+export const Primary = Template.bind({});
+Primary.args = {
+  text: 'Click me!',
+  padding: 0,
+  style: 'default',
+};
 ```
 
 **Cypress \*.spec.ts file**
@@ -101,7 +108,7 @@ export const primary = () => (
 describe('shared-ui', () => {
   beforeEach(() =>
     cy.visit(
-      '/iframe.html?id=buttoncomponent--primary&knob-text=Click me!&knob-padding&knob-style=default'
+      '/iframe.html?id=buttoncomponent--primary&args=text:Click me!;padding;style:default'
     )
   );
 
@@ -120,16 +127,16 @@ To register an [addon](https://storybook.js.org/addons/) for all storybook insta
    module.exports = {
    stories: [...],
    ...,
-   addons: [..., '@storybook/addon-knobs/register'],
+   addons: [..., '@storybook/addon-essentials'],
    };
    ```
 2. If a decorator is required, in each project's `<project-path>/.storybook/preview.js` use the `addDecorator` function.
 
    ```typescript
-   import { configure, addDecorator } from '@storybook/react';
-   import { withKnobs } from '@storybook/addon-knobs';
+   import { addDecorator } from '@storybook/angular';
+   import { YourDecorator } from '@storybook/<something>';
 
-   addDecorator(withKnobs);
+   addDecorator(SomeAddon);
    ```
 
 **-- OR --**
@@ -141,16 +148,15 @@ To register an [addon](https://storybook.js.org/addons/) for a single storybook
    module.exports = {
    stories: [...],
    ...,
-   addons: [..., '@storybook/addon-knobs/register'],
+   addons: [..., '@storybook/addon-essentials'],
    };
    ```
 2. If a decorator is required, in `preview.js` use the `addDecorator` function.
 
    ```typescript
-   import { configure, addDecorator } from '@storybook/react';
-   import { withKnobs } from '@storybook/addon-knobs';
+   import { addDecorator } from '@storybook/react';
 
-   addDecorator(withKnobs);
+   addDecorator(<YourDecorator>);
    ```
 
 ### More Information
@@ -270,11 +276,11 @@ If you have not changed the content of the files which the `storybook-configurat
 ```typescript
 module.exports = {
   stories: [],
-  addons: ['@storybook/addon-knobs/register'],
+  addons: ['@storybook/addon-essentials'],
 };
 ```
 
-- If you have any addons in the `addons.js` file, add them in the `addons` array in the `main.js` file. If you are using the default generated files without any changes, you should only have the `@storybook/addon-knobs/register` addon, which we already put in the array. You can now delete the `addons.js` file.
+- If you have any addons in the `addons.js` file, add them in the `addons` array in the `main.js` file. If you are using the default generated files without any changes, you should not have any addons. You can now delete the `addons.js` file.
 
 - The other two files remain unchanged.
 
@@ -303,10 +309,9 @@ After you add any addons in the `main.js` file, you can safely delete the `addon
 - Rename the file `config.js` to `preview.js` and remove the last line where your stories paths are configured. Now, the contents of the `preview.js` file will look like this:
 
 ```typescript
-import { addDecorator } from '<%= uiFramework %>';
-import { withKnobs } from '@storybook/addon-knobs';
+import { addDecorator } from '@storybook/react';
 
-addDecorator(withKnobs);
+addDecorator(<YourDecorator>);
 ```
 
 - Modify the contents of `webpack.config.js`. Remove the following lines, which are the TypeScript configuration, which is not needed by Storybook any more:
diff --git a/e2e/angular/src/storybook.test.ts b/e2e/angular/src/storybook.test.ts
index 24000c2774bd41..4a7f0f59b9abbe 100644
--- a/e2e/angular/src/storybook.test.ts
+++ b/e2e/angular/src/storybook.test.ts
@@ -98,22 +98,22 @@ describe('Storybook schematics', () => {
         writeFileSync(
           tmpProjPath(`libs/${myReactLib}/src/lib/button.stories.tsx`),
           `
-            import React from 'react';
-            import { Button, ButtonStyle } from './button';
-            import { text, number } from '@storybook/addon-knobs';
-
-            export default { title: 'Button' };
-
-            export const primary = () => (
-              <Button
-                padding={number('Padding', 0)}
-                style={text('Style', 'default') as ButtonStyle}
-                text={text('Text', 'Click me')}
-                // padding='0'
-                // style='default'
-                // text='Click me'
-              />
-            );
+          import { Story, Meta } from '@storybook/react';
+          import { Button, ButtonProps } from './button';
+          
+          export default {
+            component: Button,
+            title: 'Button',
+          } as Meta;
+          
+          const Template: Story<ButtonProps> = (args) => <Button {...args} />;
+          
+          export const Primary = Template.bind({});
+          Primary.args = {
+            text: 'Click me',
+            padding: 0,
+            style: 'default',
+          };          
             `
         );
 
@@ -132,14 +132,14 @@ describe('Storybook schematics', () => {
             describe('${myAngularLib}', () => {
 
           it('should render the component', () => {
-            cy.visit('/iframe.html?id=testbuttoncomponent--primary&knob-buttonType=button&knob-style=default&knob-age&knob-isDisabled=false');
+            cy.visit('/iframe.html?id=testbuttoncomponent--primary&args=buttonType:button;style:default;age;isDisabled:false');
             cy.get('proj-test-button').should('exist');
             cy.get('button').should('not.be.disabled');
             cy.get('button').should('have.class', 'default');
             cy.contains('You are 0 years old.');
           });
-          it('should adjust the knobs', () => {
-            cy.visit('/iframe.html?id=testbuttoncomponent--primary&knob-buttonType=button&knob-style=primary&knob-age=10&knob-isDisabled=true');
+          it('should adjust the controls', () => {
+            cy.visit('/iframe.html?id=testbuttoncomponent--primary&args=buttonType:button;style:primary;age:10;isDisabled:true');
             cy.get('button').should('be.disabled');
             cy.get('button').should('have.class', 'primary');
             cy.contains('You are 10 years old.');
@@ -164,14 +164,14 @@ describe('Storybook schematics', () => {
         describe('react-ui', () => {
           it('should render the component', () => {
             cy.visit(
-              '/iframe.html?id=button--primary&knob-Style=default&knob-Padding&knob-Text=Click%20me'
+              '/iframe.html?id=button--primary&args=Style:default;Padding;Text:Click%20me'
             );
             cy.get('button').should('exist');
             cy.get('button').should('have.class', 'default');
           });
-          it('should adjust the knobs', () => {
+          it('should adjust the controls', () => {
             cy.visit(
-              '/iframe.html?id=button--primary&knob-Style=primary&knob-Padding=10&knob-Text=Other'
+              '/iframe.html?id=button--primary&args=Style:primary;Padding:10;Text:Other'
             );
             cy.get('button').should('have.class', 'primary');
           });
@@ -236,21 +236,28 @@ describe('Storybook schematics', () => {
           `libs/${angularStorybookLib}/src/lib/myteststory.stories.ts`
         ),
         `
+            import { moduleMetadata, Story, Meta } from '@storybook/angular';
             import { MyTestCmpComponent } from '@${proj}/${anotherTestLib}';
 
             export default {
               title: 'My Test Cmp',
               component: MyTestCmpComponent,
-            };
+              decorators: [
+                moduleMetadata({
+                  imports: [],
+                })
+              ],
+            } as Meta<MyTestCmpComponent>;
+
+            const Template: Story<MyTestCmpComponent> = (args: MyTestCmpComponent) => ({
+              component: MyTestCmpComponent,
+              props: args,
+            });
 
-            let x = 'hi';
 
-            export const primary = () => ({
-              moduleMetadata: {
-                imports: [],
-              },
-              props: {},
-            });
+            export const Primary = Template.bind({});
+            Primary.args = {
+            }
         `
       );
 
diff --git a/packages/angular/src/generators/component-cypress-spec/files/__componentFileName__.spec.ts__tmpl__ b/packages/angular/src/generators/component-cypress-spec/files/__componentFileName__.spec.ts__tmpl__
index c89d6b6bafca2c..beed7eb9855a44 100644
--- a/packages/angular/src/generators/component-cypress-spec/files/__componentFileName__.spec.ts__tmpl__
+++ b/packages/angular/src/generators/component-cypress-spec/files/__componentFileName__.spec.ts__tmpl__
@@ -1,13 +1,13 @@
 describe('<%=projectName%>', () => {
-  beforeEach(() => cy.visit('/iframe.html?id=<%= componentName.toLowerCase() %>--primary<%
+  beforeEach(() => cy.visit('/iframe.html?id=<%= componentName.toLowerCase() %>--primary&args=<%
     for(let prop of props) {
-      %>&knob-<%=prop.name%><%
+      %><%=prop.name%><%
       if(prop.defaultValue !== undefined) {
-        %>=<%=prop.defaultValue%><%
-      } %><%
+        %>:<%=prop.defaultValue%><%
+      } %>;<%
     }%>'));
 
   it('should render the component', () => {
     cy.get('<%=componentSelector%>').should('exist');
   });
-});
+});
\ No newline at end of file
diff --git a/packages/react/src/generators/component-cypress-spec/component-cypress-spec.spec.ts b/packages/react/src/generators/component-cypress-spec/component-cypress-spec.spec.ts
index e105c864133661..b645d97158fb85 100644
--- a/packages/react/src/generators/component-cypress-spec/component-cypress-spec.spec.ts
+++ b/packages/react/src/generators/component-cypress-spec/component-cypress-spec.spec.ts
@@ -105,7 +105,7 @@ describe('react:component-cypress-spec', () => {
               formatFile`${appTree.read(cypressStorySpecFilePath, 'utf-8')}`
             )
               .toContain(formatFile`describe('test-ui-lib: Test component', () => {
-        beforeEach(() => cy.visit('/iframe.html?id=test--primary&knob-name=&knob-displayAge=false'));
+        beforeEach(() => cy.visit('/iframe.html?id=test--primary&args=name;displayAge:false'));
         
         it('should render the component', () => {
           cy.get('h1').should('contain', 'Welcome to test-ui-lib!');
diff --git a/packages/react/src/generators/component-cypress-spec/files/__componentName__.spec.__fileExt__ b/packages/react/src/generators/component-cypress-spec/files/__componentName__.spec.__fileExt__
index 9a14b836dbdf40..8068bdb11c5935 100644
--- a/packages/react/src/generators/component-cypress-spec/files/__componentName__.spec.__fileExt__
+++ b/packages/react/src/generators/component-cypress-spec/files/__componentName__.spec.__fileExt__
@@ -1,10 +1,11 @@
 describe('<%=projectName%>: <%= componentSelector %> component', () => {
-  beforeEach(() => cy.visit('/iframe.html?id=<%= componentSelector.toLowerCase() %>--primary<%
+  beforeEach(() => cy.visit('/iframe.html?id=<%= componentSelector.toLowerCase() %>--primary&args=<%
     for(let prop of props) {
-      %>&knob-<%=prop.name%><%
+      %><%=prop.name%><%
       if(prop.defaultValue !== undefined) {
-        %>=<%=prop.defaultValue%><%
-      } %><%}%>'));
+        %>:<%=prop.defaultValue%><%
+      } %>;<%
+    }%>'));
     
     it('should render the component', () => {
       cy.get('h1').should('contain', 'Welcome to <%=projectName%>!');
diff --git a/packages/react/src/generators/component-story/component-story.spec.ts b/packages/react/src/generators/component-story/component-story.spec.ts
index 85ba396c11598e..e6c33d1102fb74 100644
--- a/packages/react/src/generators/component-story/component-story.spec.ts
+++ b/packages/react/src/generators/component-story/component-story.spec.ts
@@ -150,7 +150,7 @@ describe('react:component-story', () => {
         });
       });
 
-      it('should create a story without knobs', () => {
+      it('should create a story without controls', () => {
         expect(formatFile`${appTree.read(storyFilePath, 'utf-8')}`)
           .toContain(formatFile`
             import React from 'react';
@@ -159,11 +159,12 @@ describe('react:component-story', () => {
             export default {
               component: Test,
               title: 'Test',
-            };
+            } as Meta;
             
-            export const primary = () => {
-              return <Test />;
-            }
+            const Template: Story<TestProps> = (args) => <Test {...args} />;
+            
+            export const Primary = Template.bind({});
+            Primary.args = {};
           `);
       });
     });
@@ -199,25 +200,23 @@ describe('react:component-story', () => {
         });
       });
 
-      it('should setup knobs based on the component props', () => {
+      it('should setup controls based on the component props', () => {
         expect(formatFile`${appTree.read(storyFilePath, 'utf-8')}`)
           .toContain(formatFile`
-            import { text, boolean } from '@storybook/addon-knobs';
-            import React from 'react';
+            import { Story, Meta } from '@storybook/react';
             import { Test, TestProps } from './test-ui-lib';
-            
+
             export default {
               component: Test,
               title: 'Test',
-            };
-            
-            export const primary = () => {
-              const props: TestProps = {
-                name: text('name', ''),
-                displayAge: boolean('displayAge', false),
-              };
-            
-              return <Test name={props.name} displayAge={props.displayAge} />;
+            } as Meta;
+
+            const Template: Story<TestProps> = (args) => <Test {...args} />;
+
+            export const Primary = Template.bind({});
+            Primary.args = {
+              name: '',
+              displayAge: false,
             };
           `);
       });
@@ -356,25 +355,23 @@ describe('react:component-story', () => {
           });
         });
 
-        it('should properly setup the knobs based on the component props', () => {
+        it('should properly setup the controls based on the component props', () => {
           expect(formatFile`${appTree.read(storyFilePath, 'utf-8')}`)
             .toContain(formatFile`
-            import { text, boolean } from '@storybook/addon-knobs';
-            import React from 'react';
+            import { Story, Meta } from '@storybook/react';
             import { Test, TestProps } from './test-ui-lib';
-            
+
             export default {
               component: Test,
               title: 'Test',
-            };
-            
-            export const primary = () => {
-              const props: TestProps = {
-                name: text('name', ''),
-                displayAge: boolean('displayAge', false),
-              };
-            
-              return <Test name={props.name} displayAge={props.displayAge} />;
+            } as Meta;
+
+            const Template: Story<TestProps> = (args) => <Test {...args} />;
+
+            export const Primary = Template.bind({});
+            Primary.args = {
+              name: '',
+              displayAge: false,
             };
           `);
         });
diff --git a/packages/storybook/src/generators/init/__snapshots__/init.spec.ts.snap b/packages/storybook/src/generators/init/__snapshots__/init.spec.ts.snap
index 1b0de3d0649446..b41f11c8efd1e5 100644
--- a/packages/storybook/src/generators/init/__snapshots__/init.spec.ts.snap
+++ b/packages/storybook/src/generators/init/__snapshots__/init.spec.ts.snap
@@ -8,7 +8,7 @@ Object {
   "devDependencies": Object {
     "@angular/forms": "*",
     "@nrwl/storybook": "^6.2.9",
-    "@storybook/addon-knobs": "^6.2.9",
+    "@storybook/addon-essentials": "^6.2.9",
     "@storybook/angular": "^6.2.9",
     "@storybook/builder-webpack5": "^6.2.9",
     "existing": "1.0.0",