diff --git a/.github/copilot-instructions.md b/.github/copilot-instructions.md
index 21377c0771..a7043fd448 100644
--- a/.github/copilot-instructions.md
+++ b/.github/copilot-instructions.md
@@ -135,7 +135,7 @@ Use Catalyst for component behaviors:
 ```typescript
 import {controller, target} from '@github/catalyst';
 
-@controller
+@controller('my-component')
 class MyComponentElement extends HTMLElement {
   @target button: HTMLElement
   
diff --git a/.playwright/screenshots/snapshots.test.ts-snapshots/primer/alpha/segmented_control/trailing_label_width_medium/default.png b/.playwright/screenshots/snapshots.test.ts-snapshots/primer/alpha/segmented_control/trailing_label_width_medium/default.png
index f7a7a1cec4..cb467834a5 100644
Binary files a/.playwright/screenshots/snapshots.test.ts-snapshots/primer/alpha/segmented_control/trailing_label_width_medium/default.png and b/.playwright/screenshots/snapshots.test.ts-snapshots/primer/alpha/segmented_control/trailing_label_width_medium/default.png differ
diff --git a/.playwright/screenshots/snapshots.test.ts-snapshots/primer/alpha/segmented_control/trailing_label_width_medium/focused.png b/.playwright/screenshots/snapshots.test.ts-snapshots/primer/alpha/segmented_control/trailing_label_width_medium/focused.png
index d02befb54a..81b7626fac 100644
Binary files a/.playwright/screenshots/snapshots.test.ts-snapshots/primer/alpha/segmented_control/trailing_label_width_medium/focused.png and b/.playwright/screenshots/snapshots.test.ts-snapshots/primer/alpha/segmented_control/trailing_label_width_medium/focused.png differ
diff --git a/app/components/primer/open_project/avatar_fallback.ts b/app/components/primer/open_project/avatar_fallback.ts
index 51352bd895..0212bf1c26 100644
--- a/app/components/primer/open_project/avatar_fallback.ts
+++ b/app/components/primer/open_project/avatar_fallback.ts
@@ -13,7 +13,7 @@ import {controller} from '@github/catalyst'
  * due to a Catalyst bug where @attr accessors aren't properly initialized
  * when elements have pre-existing attribute values.
  */
-@controller
+@controller('avatar-fallback')
 export class AvatarFallbackElement extends HTMLElement {
   private img: HTMLImageElement | null = null
   private testImage: HTMLImageElement | null = null
diff --git a/app/components/primer/open_project/border_box/collapsible_header.ts b/app/components/primer/open_project/border_box/collapsible_header.ts
index a341d1a3c1..d18002a351 100644
--- a/app/components/primer/open_project/border_box/collapsible_header.ts
+++ b/app/components/primer/open_project/border_box/collapsible_header.ts
@@ -1,7 +1,7 @@
 import {controller} from '@github/catalyst'
 import {CollapsibleElement} from '../collapsible'
 
-@controller
+@controller('collapsible-header')
 class CollapsibleHeaderElement extends CollapsibleElement {
   connectedCallback() {
     if (!this.closest('.Box')) {
diff --git a/app/components/primer/open_project/collapsible_section.ts b/app/components/primer/open_project/collapsible_section.ts
index ad6a2adfa4..ccd7733f87 100644
--- a/app/components/primer/open_project/collapsible_section.ts
+++ b/app/components/primer/open_project/collapsible_section.ts
@@ -1,7 +1,7 @@
 import {controller} from '@github/catalyst'
 import {CollapsibleElement} from './collapsible'
 
-@controller
+@controller('collapsible-section')
 class CollapsibleSectionElement extends CollapsibleElement {
   get baseClass(): string {
     return 'CollapsibleSection'
diff --git a/app/components/primer/open_project/danger_dialog_form_helper.ts b/app/components/primer/open_project/danger_dialog_form_helper.ts
index 5e524fb284..c2951a0325 100644
--- a/app/components/primer/open_project/danger_dialog_form_helper.ts
+++ b/app/components/primer/open_project/danger_dialog_form_helper.ts
@@ -3,7 +3,7 @@ import type {LiveRegionElement} from '@primer/live-region-element'
 
 const SUBMIT_BUTTON_SELECTOR = 'input[type=submit],button[type=submit],button[data-submit-dialog-id]'
 
-@controller
+@controller('danger-dialog-form-helper')
 class DangerDialogFormHelperElement extends HTMLElement {
   @target checkbox: HTMLInputElement | undefined
   @target liveRegion: LiveRegionElement
diff --git a/app/components/primer/open_project/filterable_tree_view.ts b/app/components/primer/open_project/filterable_tree_view.ts
index 64e0606417..1c02708f50 100644
--- a/app/components/primer/open_project/filterable_tree_view.ts
+++ b/app/components/primer/open_project/filterable_tree_view.ts
@@ -18,7 +18,7 @@ type NodeState = {
 
 const ASYNC_DEBOUNCE_MS = 300
 
-@controller
+@controller('filterable-tree-view')
 export class FilterableTreeViewElement extends HTMLElement {
   @target filterInput: HTMLInputElement
   @target filterModeControlList: HTMLElement
diff --git a/app/components/primer/open_project/page_header_element.ts b/app/components/primer/open_project/page_header_element.ts
index 375bfb3356..c6db0133f2 100644
--- a/app/components/primer/open_project/page_header_element.ts
+++ b/app/components/primer/open_project/page_header_element.ts
@@ -1,6 +1,6 @@
 import {controller} from '@github/catalyst'
 
-@controller
+@controller('page-header')
 class PageHeaderElement extends HTMLElement {
   menuItemClick(event: Event) {
     const currentTarget = event.currentTarget as HTMLButtonElement
diff --git a/app/components/primer/open_project/sub_header_element.ts b/app/components/primer/open_project/sub_header_element.ts
index fa1c313a9f..d7bf8f7ba7 100644
--- a/app/components/primer/open_project/sub_header_element.ts
+++ b/app/components/primer/open_project/sub_header_element.ts
@@ -1,6 +1,6 @@
 import {controller, target, targets} from '@github/catalyst'
 
-@controller
+@controller('sub-header')
 class SubHeaderElement extends HTMLElement {
   @target filterInput: HTMLInputElement
   @targets shownItemsOnExpandedFilter: HTMLElement[]
diff --git a/app/components/primer/open_project/zen_mode_button.ts b/app/components/primer/open_project/zen_mode_button.ts
index c7d35436cb..11ec594b08 100644
--- a/app/components/primer/open_project/zen_mode_button.ts
+++ b/app/components/primer/open_project/zen_mode_button.ts
@@ -1,6 +1,6 @@
 import {controller, target} from '@github/catalyst'
 
-@controller
+@controller('zen-mode-button')
 class ZenModeButtonElement extends HTMLElement {
   @target button: HTMLElement
   inZenMode = false
diff --git a/docs/contributors/adding-components.md b/docs/contributors/adding-components.md
index 58ff54b345..3707e954c4 100644
--- a/docs/contributors/adding-components.md
+++ b/docs/contributors/adding-components.md
@@ -49,7 +49,7 @@ Catalyst has `controller` and `target` decorators which you have to import from
 ```ts
 import {controller, target} from '@github/catalyst';
 
-@controller
+@controller('my-component')
 class MyComponentNameElement extends HTMLElement {
   @target button: HTMLElement
 }