diff --git a/extensions/messages/js/src/forum/components/MessagesPage.tsx b/extensions/messages/js/src/forum/components/MessagesPage.tsx
index 8c3ce07232..4abfd0e6ff 100644
--- a/extensions/messages/js/src/forum/components/MessagesPage.tsx
+++ b/extensions/messages/js/src/forum/components/MessagesPage.tsx
@@ -2,13 +2,13 @@ import app from 'flarum/forum/app';
 import Page, { IPageAttrs } from 'flarum/common/components/Page';
 import PageStructure from 'flarum/forum/components/PageStructure';
 import Mithril from 'mithril';
-import Icon from 'flarum/common/components/Icon';
 import DialogList from './DialogList';
 import Dialog from '../../common/models/Dialog';
 import LoadingIndicator from 'flarum/common/components/LoadingIndicator';
 import Stream from 'flarum/common/utils/Stream';
 import InfoTile from 'flarum/common/components/InfoTile';
 import MessagesSidebar from './MessagesSidebar';
+import MessagesPageHero from './MessagesPageHero';
 import DialogSection from './DialogSection';
 import listItems from 'flarum/common/helpers/listItems';
 import ItemList from 'flarum/common/utils/ItemList';
@@ -110,18 +110,7 @@ export default class MessagesPage<CustomAttrs extends IMessagesPageAttrs = IMess
   }
 
   hero(): Mithril.Children {
-    return (
-      <header className="Hero MessagesPageHero">
-        <div className="container">
-          <div className="containerNarrow">
-            <h1 className="Hero-title">
-              <Icon name="fas fa-envelope" /> {app.translator.trans('flarum-messages.forum.messages_page.hero.title')}
-            </h1>
-            <div className="Hero-subtitle">{app.translator.trans('flarum-messages.forum.messages_page.hero.subtitle')}</div>
-          </div>
-        </div>
-      </header>
-    );
+    return <MessagesPageHero />;
   }
 
   contentItems() {
diff --git a/extensions/messages/js/src/forum/components/MessagesPageHero.tsx b/extensions/messages/js/src/forum/components/MessagesPageHero.tsx
new file mode 100644
index 0000000000..a8d7d2062e
--- /dev/null
+++ b/extensions/messages/js/src/forum/components/MessagesPageHero.tsx
@@ -0,0 +1,38 @@
+import app from 'flarum/forum/app';
+import Hero, { IHeroAttrs } from 'flarum/forum/components/Hero';
+import Icon from 'flarum/common/components/Icon';
+import ItemList from 'flarum/common/utils/ItemList';
+
+import type Mithril from 'mithril';
+
+export interface IMessagesPageHeroAttrs extends IHeroAttrs {}
+
+export default class MessagesPageHero<CustomAttrs extends IMessagesPageHeroAttrs = IMessagesPageHeroAttrs> extends Hero<CustomAttrs> {
+  className(): string {
+    return 'MessagesPageHero';
+  }
+
+  bodyItems(): ItemList<Mithril.Children> {
+    const items = new ItemList<Mithril.Children>();
+
+    items.add('content', <div className="containerNarrow">{this.contentItems().toArray()}</div>, 80);
+
+    return items;
+  }
+
+  contentItems(): ItemList<Mithril.Children> {
+    const items = new ItemList<Mithril.Children>();
+
+    items.add(
+      'title',
+      <h1 className="Hero-title">
+        <Icon name="fas fa-envelope" /> {app.translator.trans('flarum-messages.forum.messages_page.hero.title')}
+      </h1>,
+      100
+    );
+
+    items.add('subtitle', <div className="Hero-subtitle">{app.translator.trans('flarum-messages.forum.messages_page.hero.subtitle')}</div>, 90);
+
+    return items;
+  }
+}
diff --git a/extensions/tags/js/src/forum/components/TagHero.js b/extensions/tags/js/src/forum/components/TagHero.js
deleted file mode 100644
index 5e77ad302d..0000000000
--- a/extensions/tags/js/src/forum/components/TagHero.js
+++ /dev/null
@@ -1,53 +0,0 @@
-import Component from 'flarum/common/Component';
-import textContrastClass from 'flarum/common/helpers/textContrastClass';
-import tagIcon from '../../common/helpers/tagIcon';
-import classList from 'flarum/common/utils/classList';
-import ItemList from 'flarum/common/utils/ItemList';
-import Mithril from 'mithril';
-
-export default class TagHero extends Component {
-  view() {
-    const tag = this.attrs.model;
-    const color = tag.color();
-
-    return (
-      <header
-        className={classList('Hero', 'TagHero', { 'TagHero--colored': color, [textContrastClass(color)]: color })}
-        style={color ? { '--hero-bg': color } : undefined}
-      >
-        <div className="container">{this.viewItems().toArray()}</div>
-      </header>
-    );
-  }
-
-  /**
-   * @returns {ItemList<Mithril.Children>}
-   */
-  viewItems() {
-    const items = new ItemList();
-
-    items.add('content', <div className="containerNarrow">{this.contentItems().toArray()}</div>, 80);
-
-    return items;
-  }
-
-  /**
-   * @returns {ItemList<Mithril.Children>}
-   */
-  contentItems() {
-    const items = new ItemList();
-    const tag = this.attrs.model;
-
-    items.add(
-      'tag-title',
-      <h1 className="Hero-title">
-        {tag.icon() && tagIcon(tag, {}, { useColor: false })} {tag.name()}
-      </h1>,
-      100
-    );
-
-    items.add('tag-subtitle', <div className="Hero-subtitle">{tag.description()}</div>, 90);
-
-    return items;
-  }
-}
diff --git a/extensions/tags/js/src/forum/components/TagHero.tsx b/extensions/tags/js/src/forum/components/TagHero.tsx
new file mode 100644
index 0000000000..04ebf767a3
--- /dev/null
+++ b/extensions/tags/js/src/forum/components/TagHero.tsx
@@ -0,0 +1,56 @@
+import Hero, { IHeroAttrs } from 'flarum/forum/components/Hero';
+import textContrastClass from 'flarum/common/helpers/textContrastClass';
+import tagIcon from '../../common/helpers/tagIcon';
+import classList from 'flarum/common/utils/classList';
+import ItemList from 'flarum/common/utils/ItemList';
+
+import type Tag from '../../common/models/Tag';
+import type Mithril from 'mithril';
+
+export interface ITagHeroAttrs extends IHeroAttrs {
+  model: Tag;
+}
+
+export default class TagHero<CustomAttrs extends ITagHeroAttrs = ITagHeroAttrs> extends Hero<CustomAttrs> {
+  className(): string {
+    const tag = this.attrs.model;
+    const color = tag.color();
+
+    return classList('TagHero', {
+      'TagHero--colored': color,
+      [textContrastClass(color)]: color,
+    });
+  }
+
+  style(): Record<string, string> | undefined {
+    const tag = this.attrs.model;
+    const color = tag.color();
+
+    return color ? { '--hero-bg': color } : undefined;
+  }
+
+  bodyItems(): ItemList<Mithril.Children> {
+    const items = new ItemList<Mithril.Children>();
+
+    items.add('content', <div className="containerNarrow">{this.contentItems().toArray()}</div>, 80);
+
+    return items;
+  }
+
+  contentItems(): ItemList<Mithril.Children> {
+    const items = new ItemList<Mithril.Children>();
+    const tag = this.attrs.model;
+
+    items.add(
+      'tag-title',
+      <h1 className="Hero-title">
+        {tag.icon() && tagIcon(tag, {}, { useColor: false })} {tag.name()}
+      </h1>,
+      100
+    );
+
+    items.add('tag-subtitle', <div className="Hero-subtitle">{tag.description()}</div>, 90);
+
+    return items;
+  }
+}
diff --git a/framework/core/js/src/forum/components/DiscussionHero.js b/framework/core/js/src/forum/components/DiscussionHero.js
deleted file mode 100644
index 5e5f2534a6..0000000000
--- a/framework/core/js/src/forum/components/DiscussionHero.js
+++ /dev/null
@@ -1,41 +0,0 @@
-import Component from '../../common/Component';
-import ItemList from '../../common/utils/ItemList';
-import listItems from '../../common/helpers/listItems';
-
-/**
- * The `DiscussionHero` component displays the hero on a discussion page.
- *
- * ### attrs
- *
- * - `discussion`
- */
-export default class DiscussionHero extends Component {
-  view() {
-    return (
-      <header className="Hero DiscussionHero">
-        <div className="container">
-          <ul className="DiscussionHero-items">{listItems(this.items().toArray())}</ul>
-        </div>
-      </header>
-    );
-  }
-
-  /**
-   * Build an item list for the contents of the discussion hero.
-   *
-   * @return {ItemList<import('mithril').Children>}
-   */
-  items() {
-    const items = new ItemList();
-    const discussion = this.attrs.discussion;
-    const badges = discussion.badges().toArray();
-
-    if (badges.length) {
-      items.add('badges', <ul className="DiscussionHero-badges badges">{listItems(badges)}</ul>, 10);
-    }
-
-    items.add('title', <h1 className="DiscussionHero-title">{discussion.title()}</h1>);
-
-    return items;
-  }
-}
diff --git a/framework/core/js/src/forum/components/DiscussionHero.tsx b/framework/core/js/src/forum/components/DiscussionHero.tsx
new file mode 100644
index 0000000000..eb7bd4dbdd
--- /dev/null
+++ b/framework/core/js/src/forum/components/DiscussionHero.tsx
@@ -0,0 +1,39 @@
+import Hero, { IHeroAttrs } from './Hero';
+import ItemList from '../../common/utils/ItemList';
+import listItems from '../../common/helpers/listItems';
+
+import type Discussion from '../../common/models/Discussion';
+import type Mithril from 'mithril';
+
+export interface IDiscussionHeroAttrs extends IHeroAttrs {
+  discussion: Discussion;
+}
+
+export default class DiscussionHero<CustomAttrs extends IDiscussionHeroAttrs = IDiscussionHeroAttrs> extends Hero<CustomAttrs> {
+  className(): string {
+    return 'DiscussionHero';
+  }
+
+  bodyItems(): ItemList<Mithril.Children> {
+    const items = new ItemList<Mithril.Children>();
+
+    items.add('items', <ul className="DiscussionHero-items">{listItems(this.items().toArray())}</ul>, 100);
+
+    return items;
+  }
+
+  items(): ItemList<Mithril.Children> {
+    const items = new ItemList<Mithril.Children>();
+
+    const discussion = this.attrs.discussion;
+    const badges = discussion.badges().toArray();
+
+    if (badges.length) {
+      items.add('badges', <ul className="DiscussionHero-badges badges">{listItems(badges)}</ul>, 10);
+    }
+
+    items.add('title', <h1 className="DiscussionHero-title">{discussion.title()}</h1>);
+
+    return items;
+  }
+}
diff --git a/framework/core/js/src/forum/components/Hero.tsx b/framework/core/js/src/forum/components/Hero.tsx
new file mode 100644
index 0000000000..5338621ff2
--- /dev/null
+++ b/framework/core/js/src/forum/components/Hero.tsx
@@ -0,0 +1,71 @@
+import app from '../app';
+import Component from '../../common/Component';
+import classList from '../../common/utils/classList';
+
+import ItemList from '../../common/utils/ItemList';
+import type Mithril from 'mithril';
+
+export interface IHeroAttrs {}
+
+export default abstract class Hero<CustomAttrs extends IHeroAttrs = IHeroAttrs> extends Component<CustomAttrs> {
+  /**
+   * Defines the primary CSS class name for the hero component's root element.
+   * Subclasses MUST implement this method to provide a specific class name.
+   *
+   * @example
+   * ```ts
+   * className(): string {
+   *  return 'FoobarHero';
+   * }
+   * ```
+   */
+  abstract className(): string;
+
+  /**
+   * Defines the child elements that will be rendered within the main container of the hero.
+   * Subclasses MUST implement this method to define the specific content of the hero.
+   *
+   * @example
+   * ```tsx
+   * bodyItems(): ItemList<Mithril.Children> {
+   *   const items = new ItemList<Mithril.Children>();
+   *   items.add('title', <h1>Welcome!</h1>);
+   *   return items;
+   * }
+   * ```
+   */
+  abstract bodyItems(): ItemList<Mithril.Children>;
+
+  /**
+   * Defines inline CSS styles for the hero component's root element.
+   * Subclasses can override this method to provide custom styles.
+   *
+   * @example
+   * ```ts
+   * style(): Record<string, string> {
+   *   return {
+   *     backgroundColor: '#e7672e',
+   *   };
+   * }
+   * ```
+   */
+  style(): Record<string, string> | undefined {
+    return undefined;
+  }
+
+  view(): Mithril.Vnode | null {
+    return (
+      <header className={classList('Hero', this.className())} style={this.style() ?? undefined}>
+        {this.viewItems().toArray()}
+      </header>
+    );
+  }
+
+  viewItems(): ItemList<Mithril.Children> {
+    const items = new ItemList<Mithril.Children>();
+
+    items.add('container', <div className="container">{this.bodyItems().toArray()}</div>, 100);
+
+    return items;
+  }
+}
diff --git a/framework/core/js/src/forum/components/WelcomeHero.tsx b/framework/core/js/src/forum/components/WelcomeHero.tsx
index fc87b63d89..2d4ab34354 100644
--- a/framework/core/js/src/forum/components/WelcomeHero.tsx
+++ b/framework/core/js/src/forum/components/WelcomeHero.tsx
@@ -1,10 +1,10 @@
 import app from '../app';
-import Component from '../../common/Component';
+import Hero, { IHeroAttrs } from './Hero';
 import Button from '../../common/components/Button';
 import type Mithril from 'mithril';
 import ItemList from '../../common/utils/ItemList';
 
-export interface IWelcomeHeroAttrs {}
+export interface IWelcomeHeroAttrs extends IHeroAttrs {}
 
 const LOCAL_STORAGE_KEY = 'welcomeHidden';
 
@@ -12,26 +12,18 @@ const LOCAL_STORAGE_KEY = 'welcomeHidden';
  * The `WelcomeHero` component displays a hero that welcomes the user to the
  * forum.
  */
-export default class WelcomeHero extends Component<IWelcomeHeroAttrs> {
-  oninit(vnode: Mithril.Vnode<IWelcomeHeroAttrs, this>) {
-    super.oninit(vnode);
+export default class WelcomeHero<CustomAttrs extends IWelcomeHeroAttrs = IWelcomeHeroAttrs> extends Hero<CustomAttrs> {
+  className(): string {
+    return 'WelcomeHero';
   }
 
-  view(vnode: Mithril.Vnode<IWelcomeHeroAttrs, this>) {
+  view() {
     if (this.isHidden()) return null;
 
-    const slideUp = () => {
-      this.$().slideUp(this.hide.bind(this));
-    };
-
-    return (
-      <header className="Hero WelcomeHero">
-        <div className="container">{this.viewItems().toArray()}</div>
-      </header>
-    );
+    return super.view();
   }
 
-  viewItems(): ItemList<Mithril.Children> {
+  bodyItems(): ItemList<Mithril.Children> {
     const items = new ItemList<Mithril.Children>();
 
     const slideUp = () => {