diff --git a/lib/cli/src/frameworks/ember/stories/Button.stories.js b/lib/cli/src/frameworks/ember/stories/Button.stories.js
index 859dc8dee37b..773ce0ae5a25 100644
--- a/lib/cli/src/frameworks/ember/stories/Button.stories.js
+++ b/lib/cli/src/frameworks/ember/stories/Button.stories.js
@@ -1,6 +1,4 @@
 import { hbs } from 'ember-cli-htmlbars';
-// You don't need the css import in your own components
-import './button.css';
 
 export default {
   title: 'Example/Button',
@@ -16,12 +14,14 @@ export default {
 };
 
 const Template = (args) => ({
-  template: hbs`{{storybook-button
-    backgroundColor=backgroundColor
-    label=label
-    primary=primary
-    onClick=(action onClick)
-  }}`,
+  template: hbs`
+    <StorybookButton
+      @backgroundColor={{this.backgroundColor}}
+      @label={{this.label}}
+      @primary={{this.primary}}
+      @onClick={{this.onClick}}
+    />
+  `,
   context: args,
 });
 
diff --git a/lib/cli/src/frameworks/ember/stories/Header.stories.js b/lib/cli/src/frameworks/ember/stories/Header.stories.js
index 5c46b38934c4..ef8c5c0e33ce 100644
--- a/lib/cli/src/frameworks/ember/stories/Header.stories.js
+++ b/lib/cli/src/frameworks/ember/stories/Header.stories.js
@@ -1,6 +1,4 @@
 import { hbs } from 'ember-cli-htmlbars';
-// You don't need the css import in your own components
-import './header.css';
 
 export default {
   title: 'Example/Header',
@@ -12,12 +10,14 @@ export default {
 };
 
 const Template = (args) => ({
-  template: hbs`{{storybook-header
-    user=user
-    onLogin=(action onLogin)
-    onLogout=(action onLogout)
-    onCreateAccount=(action onCreateAccount)
-  }}`,
+  template: hbs`
+    <StorybookHeader
+      @user={{this.user}}
+      @onLogin={{this.onLogin}}
+      @onLogout={{this.onLogout}}
+      @onCreateAccount={{this.onCreateAccount}}
+    />
+  `,
   context: args,
 });
 
diff --git a/lib/cli/src/frameworks/ember/stories/Page.stories.js b/lib/cli/src/frameworks/ember/stories/Page.stories.js
index 30403998c14e..532a9056a484 100644
--- a/lib/cli/src/frameworks/ember/stories/Page.stories.js
+++ b/lib/cli/src/frameworks/ember/stories/Page.stories.js
@@ -1,7 +1,5 @@
 import { hbs } from 'ember-cli-htmlbars';
 import * as HeaderStories from './Header.stories';
-// You don't need the css import in your own components
-import './page.css';
 
 export default {
   title: 'Example/Page',
@@ -13,12 +11,14 @@ export default {
 };
 
 const Template = (args) => ({
-  template: hbs`{{storybook-page
-    user=user
-    onLogin=(action onLogin)
-    onLogout=(action onLogout)
-    onCreateAccount=(action onCreateAccount)
-  }}`,
+  template: hbs`
+    <StorybookPage
+      @user={{this.user}}
+      @onLogin={{this.onLogin}}
+      @onLogout={{this.onLogout}}
+      @onCreateAccount={{this.onCreateAccount}}
+    />
+  `,
   context: args,
 });