diff --git a/plugins/styleguide/assets/javascripts/discourse/components/color-example.js b/plugins/styleguide/assets/javascripts/discourse/components/color-example.js
index 52f4e4eb192..0648e5a3abd 100644
--- a/plugins/styleguide/assets/javascripts/discourse/components/color-example.js
+++ b/plugins/styleguide/assets/javascripts/discourse/components/color-example.js
@@ -1,4 +1,6 @@
-export default Ember.Component.extend({
+import Component from "@ember/component";
+
+export default Component.extend({
   tagName: "section",
   classNameBindings: [":color-example"],
 });
diff --git a/plugins/styleguide/assets/javascripts/discourse/components/styleguide-example.js b/plugins/styleguide/assets/javascripts/discourse/components/styleguide-example.js
index 3c71339b786..a01de1ca449 100644
--- a/plugins/styleguide/assets/javascripts/discourse/components/styleguide-example.js
+++ b/plugins/styleguide/assets/javascripts/discourse/components/styleguide-example.js
@@ -1,4 +1,6 @@
-export default Ember.Component.extend({
+import Component from "@ember/component";
+
+export default Component.extend({
   tagName: "section",
   classNames: ["styleguide-example"],
   value: null,
diff --git a/plugins/styleguide/assets/javascripts/discourse/components/styleguide-icons.js b/plugins/styleguide/assets/javascripts/discourse/components/styleguide-icons.js
index 716e3d3b14b..3455503a21a 100644
--- a/plugins/styleguide/assets/javascripts/discourse/components/styleguide-icons.js
+++ b/plugins/styleguide/assets/javascripts/discourse/components/styleguide-icons.js
@@ -1,7 +1,8 @@
+import Component from "@ember/component";
 import { afterRender } from "discourse-common/utils/decorators";
 import { later } from "@ember/runloop";
 
-export default Ember.Component.extend({
+export default Component.extend({
   tagName: "section",
   classNames: ["styleguide-icons"],
   iconIds: [],
diff --git a/plugins/styleguide/assets/javascripts/discourse/components/styleguide-link.js b/plugins/styleguide/assets/javascripts/discourse/components/styleguide-link.js
index eed7fd01274..44494409ab5 100644
--- a/plugins/styleguide/assets/javascripts/discourse/components/styleguide-link.js
+++ b/plugins/styleguide/assets/javascripts/discourse/components/styleguide-link.js
@@ -1,3 +1,5 @@
-export default Ember.Component.extend({
+import Component from "@ember/component";
+
+export default Component.extend({
   tagName: "",
 });
diff --git a/plugins/styleguide/assets/javascripts/discourse/components/styleguide-markdown.js b/plugins/styleguide/assets/javascripts/discourse/components/styleguide-markdown.js
index b62b0568c74..993b8061bbe 100644
--- a/plugins/styleguide/assets/javascripts/discourse/components/styleguide-markdown.js
+++ b/plugins/styleguide/assets/javascripts/discourse/components/styleguide-markdown.js
@@ -1,6 +1,7 @@
+import Component from "@ember/component";
 import { cookAsync } from "discourse/lib/text";
 
-export default Ember.Component.extend({
+export default Component.extend({
   didInsertElement() {
     this._super(...arguments);
 
diff --git a/plugins/styleguide/assets/javascripts/discourse/components/styleguide-section.js b/plugins/styleguide/assets/javascripts/discourse/components/styleguide-section.js
index d1db7ebc8f2..3ea7e2272bf 100644
--- a/plugins/styleguide/assets/javascripts/discourse/components/styleguide-section.js
+++ b/plugins/styleguide/assets/javascripts/discourse/components/styleguide-section.js
@@ -1,6 +1,7 @@
+import Component from "@ember/component";
 import computed from "discourse-common/utils/decorators";
 
-export default Ember.Component.extend({
+export default Component.extend({
   tagName: "section",
   classNameBindings: [":styleguide-section", "sectionClass"],
 
diff --git a/plugins/styleguide/assets/javascripts/discourse/controllers/styleguide-show.js b/plugins/styleguide/assets/javascripts/discourse/controllers/styleguide-show.js
index 6c67440757f..ac5d206d4fe 100644
--- a/plugins/styleguide/assets/javascripts/discourse/controllers/styleguide-show.js
+++ b/plugins/styleguide/assets/javascripts/discourse/controllers/styleguide-show.js
@@ -1,4 +1,6 @@
-export default Ember.Controller.extend({
+import Controller from "@ember/controller";
+
+export default Controller.extend({
   actions: {
     dummy() {},
   },
diff --git a/plugins/styleguide/assets/javascripts/discourse/controllers/styleguide.js b/plugins/styleguide/assets/javascripts/discourse/controllers/styleguide.js
index 6f3f0019989..1626769068c 100644
--- a/plugins/styleguide/assets/javascripts/discourse/controllers/styleguide.js
+++ b/plugins/styleguide/assets/javascripts/discourse/controllers/styleguide.js
@@ -1,3 +1,5 @@
-export default Ember.Controller.extend({
+import Controller from "@ember/controller";
+
+export default Controller.extend({
   sections: null,
 });
diff --git a/plugins/styleguide/assets/javascripts/discourse/helpers/section-title.js b/plugins/styleguide/assets/javascripts/discourse/helpers/section-title.js
index 2426ccf8331..5f4bf897494 100644
--- a/plugins/styleguide/assets/javascripts/discourse/helpers/section-title.js
+++ b/plugins/styleguide/assets/javascripts/discourse/helpers/section-title.js
@@ -1,5 +1,6 @@
+import Helper from "@ember/component/helper";
 import I18n from "I18n";
 
-export default Ember.Helper.helper(function (params) {
+export default Helper.helper(function (params) {
   return I18n.t(`styleguide.sections.${params[0].replace(/\-/g, "_")}.title`);
 });
diff --git a/plugins/styleguide/assets/javascripts/discourse/routes/styleguide-show.js b/plugins/styleguide/assets/javascripts/discourse/routes/styleguide-show.js
index 21e7dd65520..04ef4ba03d2 100644
--- a/plugins/styleguide/assets/javascripts/discourse/routes/styleguide-show.js
+++ b/plugins/styleguide/assets/javascripts/discourse/routes/styleguide-show.js
@@ -1,10 +1,11 @@
+import Route from "@ember/routing/route";
 import {
   findNote,
   sectionById,
 } from "discourse/plugins/styleguide/discourse/lib/styleguide";
 import { createData } from "discourse/plugins/styleguide/discourse/lib/dummy-data";
 
-export default Ember.Route.extend({
+export default Route.extend({
   model(params) {
     return sectionById(params.section);
   },
diff --git a/plugins/styleguide/assets/javascripts/discourse/routes/styleguide.js b/plugins/styleguide/assets/javascripts/discourse/routes/styleguide.js
index 1dc83c6a304..db58938962a 100644
--- a/plugins/styleguide/assets/javascripts/discourse/routes/styleguide.js
+++ b/plugins/styleguide/assets/javascripts/discourse/routes/styleguide.js
@@ -1,6 +1,7 @@
+import Route from "@ember/routing/route";
 import { allCategories } from "discourse/plugins/styleguide/discourse/lib/styleguide";
 
-export default Ember.Route.extend({
+export default Route.extend({
   model() {
     return allCategories();
   },