diff --git a/app/components/example_component/example_component.html.haml b/app/components/example_component/example_component.html.haml
index d0ac42c229..c4ec93450a 100644
--- a/app/components/example_component/example_component.html.haml
+++ b/app/components/example_component/example_component.html.haml
@@ -1 +1,3 @@
-%h1 #{@title}
+- # the stimulus contoller "example-component--example" lives in app/component/example_component/example_controller.js
+%div{ "data-controller": "example-component--example"}
+  %h1 #{@title}
diff --git a/app/components/example_component/example_controller.js b/app/components/example_component/example_controller.js
new file mode 100644
index 0000000000..72957edffd
--- /dev/null
+++ b/app/components/example_component/example_controller.js
@@ -0,0 +1,4 @@
+// This controller will be called "example-component--example", ie "component-subdirectory--js-file-name"
+import { Controller } from "stimulus";
+
+export default class extends Controller {}