diff --git a/plugins/styleguide/assets/javascripts/discourse/templates/styleguide/atoms/02-buttons.hbs b/plugins/styleguide/assets/javascripts/discourse/templates/styleguide/atoms/02-buttons.hbs
index bca429d5d04..faec405f856 100644
--- a/plugins/styleguide/assets/javascripts/discourse/templates/styleguide/atoms/02-buttons.hbs
+++ b/plugins/styleguide/assets/javascripts/discourse/templates/styleguide/atoms/02-buttons.hbs
@@ -133,7 +133,7 @@
 </StyleguideExample>
 
 <StyleguideExample
-  @title="dbutton btn-flat btn-text - sizes (large, default, small)"
+  @title="<DButton> btn-flat btn-text - sizes (large, default, small)"
 >
   {{#each this.dummy.buttonSizes as |bs|}}
     <DButton
@@ -144,7 +144,7 @@
   {{/each}}
 </StyleguideExample>
 
-<StyleguideExample @title="dbutton btn-flat btn-text - states">
+<StyleguideExample @title="<DButton> btn-flat btn-text - states">
   {{#each this.dummy.buttonStates as |bs|}}
     <DButton
       @class={{concat "btn-flat " bs.class}}
@@ -154,7 +154,7 @@
   {{/each}}
 </StyleguideExample>
 
-<StyleguideExample @title="DToggleSwitch">
+<StyleguideExample @title="<DToggleSwitch>">
   <DToggleSwitch
     @state={{this.dummy.toggleSwitchState}}
     {{on
diff --git a/plugins/styleguide/assets/javascripts/discourse/templates/styleguide/atoms/05-input-fields.hbs b/plugins/styleguide/assets/javascripts/discourse/templates/styleguide/atoms/05-input-fields.hbs
index d1298919375..ffe680eb94b 100644
--- a/plugins/styleguide/assets/javascripts/discourse/templates/styleguide/atoms/05-input-fields.hbs
+++ b/plugins/styleguide/assets/javascripts/discourse/templates/styleguide/atoms/05-input-fields.hbs
@@ -43,7 +43,7 @@
 </StyleguideExample>
 
 <StyleguideExample
-  @title="inline-form with combo-box"
+  @title="inline-form with <ComboBox>"
   @initialValue={{this.dummy.options.0.name}}
   as |value|
 >
@@ -63,7 +63,7 @@
   </div>
 </StyleguideExample>
 
-<StyleguideExample @title="inline-form with multi-select">
+<StyleguideExample @title="inline-form with <MultiSelect>">
   <div class="inline-form">
     <TextField />
     <MultiSelect @content={{this.dummy.options}} @onChange={{action "dummy"}} />
@@ -76,7 +76,7 @@
   </div>
 </StyleguideExample>
 
-<StyleguideExample @title="inline-form with multi-select and label">
+<StyleguideExample @title="inline-form with <MultiSelect> and label">
   <div class="inline-form">
     <label>Text:</label>
     <TextField />
@@ -96,7 +96,7 @@
   </div>
 </StyleguideExample>
 
-<StyleguideExample @title="category-notifications-button and regular button">
+<StyleguideExample @title="<CategoryNotificationsButton> and regular button">
   <div class="inline-form">
     <CategoryNotificationsButton
       @category={{get this.dummy.categories 0}}
diff --git a/plugins/styleguide/assets/javascripts/discourse/templates/styleguide/atoms/date-time-inputs.hbs b/plugins/styleguide/assets/javascripts/discourse/templates/styleguide/atoms/date-time-inputs.hbs
index 2a58a7bb5f2..2e81a968ebb 100644
--- a/plugins/styleguide/assets/javascripts/discourse/templates/styleguide/atoms/date-time-inputs.hbs
+++ b/plugins/styleguide/assets/javascripts/discourse/templates/styleguide/atoms/date-time-inputs.hbs
@@ -1,27 +1,27 @@
-<StyleguideExample @title="time-input">
+<StyleguideExample @title="<TimeInput>">
   <TimeInput />
 </StyleguideExample>
 
-<StyleguideExample @title="date-input">
+<StyleguideExample @title="<DateInput>">
   <DateInput />
 </StyleguideExample>
 
-<StyleguideExample @title="date-time-input">
+<StyleguideExample @title="<DateTimeInput>">
   <DateTimeInput @clearable={{true}} />
 </StyleguideExample>
 
-<StyleguideExample @title="date-time-input-range">
+<StyleguideExample @title="<DateTimeInputRange>">
   <DateTimeInputRange />
 </StyleguideExample>
 
-<StyleguideExample @title="date-time-input-range">
+<StyleguideExample @title="<DateTimeInputRange>">
   <DateTimeInputRange @showFromTime={{false}} @showToTime={{false}} />
 </StyleguideExample>
 
-<StyleguideExample @title="future-date-input">
+<StyleguideExample @title="<FutureDateInput>">
   <FutureDateInput @displayLabelIcon="far-clock" @clearable={{true}} />
 </StyleguideExample>
 
-<StyleguideExample @title="date-picker">
+<StyleguideExample @title="<DatePicker>">
   <DatePicker @defaultDate="YYYY-MM-DD" />
 </StyleguideExample>
\ No newline at end of file
diff --git a/plugins/styleguide/assets/javascripts/discourse/templates/styleguide/atoms/dropdowns.hbs b/plugins/styleguide/assets/javascripts/discourse/templates/styleguide/atoms/dropdowns.hbs
index b417701d671..c3c8775954d 100644
--- a/plugins/styleguide/assets/javascripts/discourse/templates/styleguide/atoms/dropdowns.hbs
+++ b/plugins/styleguide/assets/javascripts/discourse/templates/styleguide/atoms/dropdowns.hbs
@@ -1,5 +1,5 @@
 <StyleguideExample
-  @title="combo-box"
+  @title="<ComboBox>"
   @initialValue={{this.dummy.options.0.name}}
   as |value|
 >
@@ -11,7 +11,7 @@
 </StyleguideExample>
 
 <StyleguideExample
-  @title="filterable combo-box"
+  @title="filterable <ComboBox>"
   @initialValue={{this.dummy.categories.0.name}}
   as |value|
 >
@@ -24,7 +24,7 @@
 </StyleguideExample>
 
 <StyleguideExample
-  @title="combo-box with a default state"
+  @title="<ComboBox> with a default state"
   @initialValue={{this.dummy.options.0.name}}
   as |value|
 >
@@ -37,7 +37,7 @@
 </StyleguideExample>
 
 <StyleguideExample
-  @title="combo-box clearable"
+  @title="<ComboBox> clearable"
   @initialValue={{this.dummy.options.0.name}}
   as |value|
 >
@@ -51,7 +51,7 @@
 </StyleguideExample>
 
 <StyleguideExample
-  @title="topic-notifications-options"
+  @title="<TopicNotificationOptions>"
   @initialValue={{1}}
   as |value|
 >
@@ -62,31 +62,31 @@
   />
 </StyleguideExample>
 
-<StyleguideExample @title="topic-footer-mobile-dropdown">
+<StyleguideExample @title="<TopicFooterMobileDropdown>">
   <TopicFooterMobileDropdown @topic={{this.dummy.topic}} />
 </StyleguideExample>
 
 <StyleguideExample
-  @title="category-chooser"
+  @title="<CategoryChooser>"
   @initialValue={{this.categories.0.name}}
   as |value|
 >
   <CategoryChooser @value={{value}} @onChange={{fn (mut value)}} />
 </StyleguideExample>
 
-<StyleguideExample @title="pinned-button">
+<StyleguideExample @title="<PinnedButton>">
   <PinnedButton @topic={{this.dummy.pinnedTopic}} />
 </StyleguideExample>
 
-<StyleguideExample @title="pinned-options">
+<StyleguideExample @title="<PinnedOptions>">
   <PinnedOptions @topic={{this.dummy.pinnedTopic}} />
 </StyleguideExample>
 
-<StyleguideExample @title="categories-admin-dropdown">
+<StyleguideExample @title="<CategoriesAdminDropdown>">
   <CategoriesAdminDropdown @onChange={{action "dummy"}} />
 </StyleguideExample>
 
-<StyleguideExample @title="category-notifications-button">
+<StyleguideExample @title="<CategoryNotificationsButton>">
   <CategoryNotificationsButton
     @category={{get this.dummy.categories 0}}
     @value={{1}}
@@ -94,7 +94,7 @@
   />
 </StyleguideExample>
 
-<StyleguideExample @title="notifications-button">
+<StyleguideExample @title="<NotificationsButton>">
   <NotificationsButton
     @options={{hash i18nPrefix="groups.notifications"}}
     @value={{2}}
@@ -102,7 +102,7 @@
   />
 </StyleguideExample>
 
-<StyleguideExample @title="dropdown-select-box">
+<StyleguideExample @title="<DropdownSelectBox>">
   <DropdownSelectBox
     @content={{this.dummy.options}}
     @onChange={{action "dummy"}}
@@ -110,7 +110,7 @@
   />
 </StyleguideExample>
 
-<StyleguideExample @title="future-date-input-selector">
+<StyleguideExample @title="<FutureDateInputSelector>">
   <FutureDateInputSelector
     @input={{this.dummy.topicTimerUpdateDate}}
     @includeWeekend={{true}}
@@ -119,11 +119,11 @@
   />
 </StyleguideExample>
 
-<StyleguideExample @title="multi-select">
+<StyleguideExample @title="<MultiSelect>">
   <MultiSelect @content={{this.dummy.options}} @onChange={{action "dummy"}} />
 </StyleguideExample>
 
-<StyleguideExample @title="admin group-chooser">
+<StyleguideExample @title="admin <GroupChooser>">
   <GroupChooser
     @selected={{this.dummy.selectedGroups}}
     @content={{this.dummy.groups}}
@@ -131,14 +131,14 @@
   />
 </StyleguideExample>
 
-<StyleguideExample @title="list-setting">
+<StyleguideExample @title="<ListSetting>">
   <ListSetting
     @settingValue={{this.dummy.settings}}
     @onChange={{action "dummy"}}
   />
 </StyleguideExample>
 
-<StyleguideExample @title="list-setting with colors">
+<StyleguideExample @title="<ListSetting>">
   <ListSetting
     @settingValue={{this.dummy.colors}}
     @nameProperty="color"
@@ -146,7 +146,7 @@
   />
 </StyleguideExample>
 
-<StyleguideExample @title="user-notifications-dropdown">
+<StyleguideExample @title="<UserNotificationsDropdown>">
   <UserNotificationsDropdown
     @user={{this.currentUser}}
     @value="changeToNormal"
diff --git a/plugins/styleguide/assets/javascripts/discourse/templates/styleguide/molecules/char-counter.hbs b/plugins/styleguide/assets/javascripts/discourse/templates/styleguide/molecules/char-counter.hbs
index 635e1955ef1..d0089a21ea2 100644
--- a/plugins/styleguide/assets/javascripts/discourse/templates/styleguide/molecules/char-counter.hbs
+++ b/plugins/styleguide/assets/javascripts/discourse/templates/styleguide/molecules/char-counter.hbs
@@ -1,4 +1,4 @@
-<StyleguideExample @title="char-counter">
+<StyleguideExample @title="<CharCounter>">
   <CharCounter @max="50" @value={{this.charCounterContent}}>
     <textarea
       placeholder={{i18n "styleguide.sections.char_counter.placeholder"}}
diff --git a/plugins/styleguide/assets/javascripts/discourse/templates/styleguide/molecules/empty-state.hbs b/plugins/styleguide/assets/javascripts/discourse/templates/styleguide/molecules/empty-state.hbs
index 0537d119866..39ba76d543a 100644
--- a/plugins/styleguide/assets/javascripts/discourse/templates/styleguide/molecules/empty-state.hbs
+++ b/plugins/styleguide/assets/javascripts/discourse/templates/styleguide/molecules/empty-state.hbs
@@ -1,4 +1,4 @@
-<StyleguideExample @title="empty-state">
+<StyleguideExample @title="<EmptyState>">
   <EmptyState
     @title={{this.dummy.sentence}}
     @body={{this.dummy.short_sentence}}
diff --git a/plugins/styleguide/assets/javascripts/discourse/templates/styleguide/molecules/footer-message.hbs b/plugins/styleguide/assets/javascripts/discourse/templates/styleguide/molecules/footer-message.hbs
index dfe74785c2a..e02dc03a3d5 100644
--- a/plugins/styleguide/assets/javascripts/discourse/templates/styleguide/molecules/footer-message.hbs
+++ b/plugins/styleguide/assets/javascripts/discourse/templates/styleguide/molecules/footer-message.hbs
@@ -1,11 +1,11 @@
-<StyleguideExample @title="footer-message - default">
+<StyleguideExample @title="<FooterMessage> - default">
   <FooterMessage
     @education={{this.dummy.sentence}}
     @message={{this.dummy.short_sentence}}
   />
 </StyleguideExample>
 
-<StyleguideExample @title="footer-message - latest">
+<StyleguideExample @title="<FooterMessage> - latest">
   <FooterMessage
     @education={{this.dummy.sentence}}
     @message={{this.dummy.short_sentence}}
@@ -15,7 +15,7 @@
   />
 </StyleguideExample>
 
-<StyleguideExample @title="footer-message - top">
+<StyleguideExample @title="<FooterMessage> - top">
   <FooterMessage
     @education={{this.dummy.sentence}}
     @message={{this.dummy.short_sentence}}
diff --git a/plugins/styleguide/assets/javascripts/discourse/templates/styleguide/molecules/navigation-bar.hbs b/plugins/styleguide/assets/javascripts/discourse/templates/styleguide/molecules/navigation-bar.hbs
index 6e8c1bbf736..b4849cdb7b5 100644
--- a/plugins/styleguide/assets/javascripts/discourse/templates/styleguide/molecules/navigation-bar.hbs
+++ b/plugins/styleguide/assets/javascripts/discourse/templates/styleguide/molecules/navigation-bar.hbs
@@ -1,4 +1,4 @@
-<StyleguideExample @title="navigation-bar">
+<StyleguideExample @title="<NavigationBar>">
   <NavigationBar @navItems={{this.dummy.navItems}} @filterMode="latest" />
 </StyleguideExample>
 
@@ -13,7 +13,7 @@
   </MobileNav>
 </StyleguideExample>
 
-<StyleguideExample @title="group page navigation-bar">
+<StyleguideExample @title="group page <NavigationBar>">
   <MobileNav @class="group-nav" @desktopClass="nav nav-pills">
     <li class="group-dropdown">
       <GroupDropdown @groups={{this.dummy.groupNames}} @value="staff" />
diff --git a/plugins/styleguide/assets/javascripts/discourse/templates/styleguide/molecules/rich-tooltip.hbs b/plugins/styleguide/assets/javascripts/discourse/templates/styleguide/molecules/rich-tooltip.hbs
index 8d8c8fd8d43..e7190e71003 100644
--- a/plugins/styleguide/assets/javascripts/discourse/templates/styleguide/molecules/rich-tooltip.hbs
+++ b/plugins/styleguide/assets/javascripts/discourse/templates/styleguide/molecules/rich-tooltip.hbs
@@ -1,4 +1,4 @@
-<StyleguideExample @title="rich-tooltip">
+<StyleguideExample @title="<DTooltip>">
   <DButton>
     {{i18n "styleguide.sections.rich_tooltip.hover_to_see"}}
     <DTooltip>
diff --git a/plugins/styleguide/assets/javascripts/discourse/templates/styleguide/molecules/signup-cta.hbs b/plugins/styleguide/assets/javascripts/discourse/templates/styleguide/molecules/signup-cta.hbs
index 08abe9d8f5c..9a6055492db 100644
--- a/plugins/styleguide/assets/javascripts/discourse/templates/styleguide/molecules/signup-cta.hbs
+++ b/plugins/styleguide/assets/javascripts/discourse/templates/styleguide/molecules/signup-cta.hbs
@@ -1,3 +1,3 @@
-<StyleguideExample @title="signup-cta">
+<StyleguideExample @title="<SignupCta>">
   <SignupCta />
 </StyleguideExample>
\ No newline at end of file
diff --git a/plugins/styleguide/assets/javascripts/discourse/templates/styleguide/molecules/topic-list-item.hbs b/plugins/styleguide/assets/javascripts/discourse/templates/styleguide/molecules/topic-list-item.hbs
index de8a881f8eb..a37cc4bc3ff 100644
--- a/plugins/styleguide/assets/javascripts/discourse/templates/styleguide/molecules/topic-list-item.hbs
+++ b/plugins/styleguide/assets/javascripts/discourse/templates/styleguide/molecules/topic-list-item.hbs
@@ -1,4 +1,4 @@
-<StyleguideExample @title="topic list item">
+<StyleguideExample @title="<TopicListItem>">
   <table class="topic-list">
     <tbody>
       <TopicListItem @topic={{this.dummy.topic}} @showPosters={{true}} />
@@ -6,7 +6,7 @@
   </table>
 </StyleguideExample>
 
-<StyleguideExample @title="topic list item - hide category">
+<StyleguideExample @title="<TopicListItem> - hide category">
   <table class="topic-list">
     <tbody>
       <TopicListItem
@@ -18,7 +18,7 @@
   </table>
 </StyleguideExample>
 
-<StyleguideExample @title="topic list item - show likes">
+<StyleguideExample @title="<TopicListItem> - show likes">
   <table class="topic-list">
     <tbody>
       <TopicListItem
@@ -30,6 +30,6 @@
   </table>
 </StyleguideExample>
 
-<StyleguideExample @title="topic list item - latest" class="half-size">
+<StyleguideExample @title="<TopicListItem> - latest" class="half-size">
   <LatestTopicListItem @topic={{this.dummy.topic}} />
 </StyleguideExample>
\ No newline at end of file
diff --git a/plugins/styleguide/assets/javascripts/discourse/templates/styleguide/molecules/topic-notifications.hbs b/plugins/styleguide/assets/javascripts/discourse/templates/styleguide/molecules/topic-notifications.hbs
index 9fcffa295e1..04674359b64 100644
--- a/plugins/styleguide/assets/javascripts/discourse/templates/styleguide/molecules/topic-notifications.hbs
+++ b/plugins/styleguide/assets/javascripts/discourse/templates/styleguide/molecules/topic-notifications.hbs
@@ -1,3 +1,3 @@
-<StyleguideExample @title="topic-notifications-button">
+<StyleguideExample @title="<TopicNotificationsButton>">
   <TopicNotificationsButton @topic={{this.dummy.topic}} />
 </StyleguideExample>
\ No newline at end of file
diff --git a/plugins/styleguide/assets/javascripts/discourse/templates/styleguide/molecules/topic-timer-info.hbs b/plugins/styleguide/assets/javascripts/discourse/templates/styleguide/molecules/topic-timer-info.hbs
index 0d183674c5d..56ae94484b5 100644
--- a/plugins/styleguide/assets/javascripts/discourse/templates/styleguide/molecules/topic-timer-info.hbs
+++ b/plugins/styleguide/assets/javascripts/discourse/templates/styleguide/molecules/topic-timer-info.hbs
@@ -1,3 +1,3 @@
-<StyleguideExample @title="topic-timer-info">
+<StyleguideExample @title="<TopicTimerInfo>">
   <TopicTimerInfo @statusType="reminder" @executeAt={{this.dummy.soon}} />
 </StyleguideExample>
\ No newline at end of file
diff --git a/plugins/styleguide/assets/javascripts/discourse/templates/styleguide/organisms/03-topic-footer-buttons.hbs b/plugins/styleguide/assets/javascripts/discourse/templates/styleguide/organisms/03-topic-footer-buttons.hbs
index 2d2f8246633..f44026697ca 100644
--- a/plugins/styleguide/assets/javascripts/discourse/templates/styleguide/organisms/03-topic-footer-buttons.hbs
+++ b/plugins/styleguide/assets/javascripts/discourse/templates/styleguide/organisms/03-topic-footer-buttons.hbs
@@ -1,8 +1,8 @@
-<StyleguideExample @title="topic-footer-buttons - logged in">
+<StyleguideExample @title="<TopicFooterButtons> - logged in">
   <TopicFooterButtons @topic={{this.dummy.topic}} />
 </StyleguideExample>
 
-<StyleguideExample @title="topic-footer-buttons - anonymous">
+<StyleguideExample @title="<TopicFooterButtons> - anonymous">
   <div id="topic-footer-buttons">
     <DButton
       @icon="reply"
diff --git a/plugins/styleguide/assets/javascripts/discourse/templates/styleguide/organisms/04-topic-list.hbs b/plugins/styleguide/assets/javascripts/discourse/templates/styleguide/organisms/04-topic-list.hbs
index 5bbd15730c0..db02e7691c0 100644
--- a/plugins/styleguide/assets/javascripts/discourse/templates/styleguide/organisms/04-topic-list.hbs
+++ b/plugins/styleguide/assets/javascripts/discourse/templates/styleguide/organisms/04-topic-list.hbs
@@ -1,7 +1,7 @@
-<StyleguideExample @title="topic-list">
+<StyleguideExample @title="<TopicList>">
   <TopicList @topics={{this.dummy.topics}} @showPosters={{true}} />
 </StyleguideExample>
 
-<StyleguideExample @title="topic-list - hide posters">
+<StyleguideExample @title="<TopicList> - hide posters>">
   <TopicList @topics={{this.dummy.topics}} @showPosters={{false}} />
 </StyleguideExample>
\ No newline at end of file
diff --git a/plugins/styleguide/assets/javascripts/discourse/templates/styleguide/organisms/basic-topic-list.hbs b/plugins/styleguide/assets/javascripts/discourse/templates/styleguide/organisms/basic-topic-list.hbs
index 31637d60a84..b13089fa3a4 100644
--- a/plugins/styleguide/assets/javascripts/discourse/templates/styleguide/organisms/basic-topic-list.hbs
+++ b/plugins/styleguide/assets/javascripts/discourse/templates/styleguide/organisms/basic-topic-list.hbs
@@ -1,3 +1,3 @@
-<StyleguideExample @title="basic-topic-list" class="half-size">
+<StyleguideExample @title="<BasicTopicList>" class="half-size">
   <BasicTopicList @topics={{this.dummy.topics}} />
 </StyleguideExample>
\ No newline at end of file
diff --git a/plugins/styleguide/assets/javascripts/discourse/templates/styleguide/organisms/categories-list.hbs b/plugins/styleguide/assets/javascripts/discourse/templates/styleguide/organisms/categories-list.hbs
index c2dfb2e869f..f4008188a05 100644
--- a/plugins/styleguide/assets/javascripts/discourse/templates/styleguide/organisms/categories-list.hbs
+++ b/plugins/styleguide/assets/javascripts/discourse/templates/styleguide/organisms/categories-list.hbs
@@ -1,3 +1,3 @@
-<StyleguideExample @title="categories-only">
+<StyleguideExample @title="<CategoriesOnly>">
   <CategoriesOnly @categories={{this.dummy.categories}} />
 </StyleguideExample>
\ No newline at end of file
diff --git a/plugins/styleguide/assets/javascripts/discourse/templates/styleguide/organisms/modal.hbs b/plugins/styleguide/assets/javascripts/discourse/templates/styleguide/organisms/modal.hbs
index e8bfcbd5ff8..056f77b0983 100644
--- a/plugins/styleguide/assets/javascripts/discourse/templates/styleguide/organisms/modal.hbs
+++ b/plugins/styleguide/assets/javascripts/discourse/templates/styleguide/organisms/modal.hbs
@@ -1,4 +1,4 @@
-<StyleguideExample @title="d-modal">
+<StyleguideExample @title="<DModal>">
   <DModal
     @closeModal={{action "dummy"}}
     @modalStyle="inline-modal"
diff --git a/plugins/styleguide/assets/javascripts/discourse/templates/styleguide/organisms/suggested-topics.hbs b/plugins/styleguide/assets/javascripts/discourse/templates/styleguide/organisms/suggested-topics.hbs
index 98941d26906..901338bfe27 100644
--- a/plugins/styleguide/assets/javascripts/discourse/templates/styleguide/organisms/suggested-topics.hbs
+++ b/plugins/styleguide/assets/javascripts/discourse/templates/styleguide/organisms/suggested-topics.hbs
@@ -1,3 +1,3 @@
-<StyleguideExample @title="suggested-topics">
+<StyleguideExample @title="<SuggestedTopics>">
   <SuggestedTopics @topic={{this.dummy.topic}} />
 </StyleguideExample>
\ No newline at end of file