diff --git a/plugins/chat/assets/stylesheets/common/chat-github-onebox.scss b/plugins/chat/assets/stylesheets/common/chat-github-onebox.scss
new file mode 100644
index 00000000000..be79d67bb32
--- /dev/null
+++ b/plugins/chat/assets/stylesheets/common/chat-github-onebox.scss
@@ -0,0 +1,106 @@
+.github-onebox {
+  //add this line when implementing, will scope to chat while not restricting the component to be used elsewhere later on
+  // .main-chat-outlet & {
+  border: 2px solid var(--primary-low);
+  padding: 0.75rem 1rem;
+  box-sizing: border-box;
+
+  &__repo-info {
+    display: flex;
+    justify-content: space-between;
+  }
+
+  &__repo-details {
+    display: flex;
+    gap: 0.25rem;
+    flex-wrap: wrap;
+    white-space: nowrap;
+  }
+  &__author-name {
+    font-weight: bold;
+  }
+  &__text {
+    color: var(--primary-high);
+  }
+
+  .d-icon-fab-github {
+    color: var(--github);
+  }
+
+  &__repo-status {
+    display: flex;
+    align-items: flex-end;
+    justify-content: flex-end;
+    flex-wrap: wrap-reverse;
+    gap: 0.5rem;
+    flex-shrink: 1;
+  }
+
+  &__repo_tag {
+    border-radius: 1rem;
+    padding: 0.15rem 0.5rem;
+    color: #fff;
+    font-size: var(--font-down-1-rem);
+
+    &.--open {
+      background-color: #1f883d;
+    }
+
+    &.--draft {
+      background-color: #6e7781;
+    }
+
+    &.--closed {
+      background-color: #cf222e;
+    }
+
+    &.--merged {
+      background-color: #7f32da;
+    }
+  }
+
+  &__repo-changes {
+    font-size: var(--font-down-1-rem);
+  }
+
+  &__repo-added {
+    color: #1f883d;
+    font-weight: bold;
+  }
+  &__repo-removed {
+    color: #cf222e;
+    font-weight: bold;
+  }
+
+  &__repo-change-divider {
+    color: var(--primary-medium);
+  }
+
+  &__title {
+    display: flex;
+    align-items: baseline;
+    gap: 0.5rem;
+  }
+
+  &__link {
+    font-size: var(--font-up-1-rem);
+    font-weight: bold;
+    display: -webkit-inline-box;
+    -webkit-box-orient: vertical;
+    -webkit-line-clamp: 2;
+    overflow: hidden;
+  }
+
+  &__expand-button {
+    height: var(--font-up-2-rem);
+  }
+
+  &__description {
+    display: -webkit-box;
+    -webkit-box-orient: vertical;
+    -webkit-line-clamp: 2;
+    overflow: hidden;
+  }
+
+  // }
+}
diff --git a/plugins/chat/assets/stylesheets/common/index.scss b/plugins/chat/assets/stylesheets/common/index.scss
index 220f88a4cbf..ce32158333d 100644
--- a/plugins/chat/assets/stylesheets/common/index.scss
+++ b/plugins/chat/assets/stylesheets/common/index.scss
@@ -18,6 +18,7 @@
 @import "chat-emoji-picker";
 @import "chat-form";
 @import "chat-index";
+@import "chat-github-onebox";
 @import "chat-mention-warnings";
 @import "chat-message-actions";
 @import "chat-message-collapser";
diff --git a/plugins/chat/assets/stylesheets/desktop/chat-github-onebox.scss b/plugins/chat/assets/stylesheets/desktop/chat-github-onebox.scss
new file mode 100644
index 00000000000..6f53a8c918f
--- /dev/null
+++ b/plugins/chat/assets/stylesheets/desktop/chat-github-onebox.scss
@@ -0,0 +1,5 @@
+.github-onebox {
+  &__repo-details {
+    flex-shrink: 0;
+  }
+}
diff --git a/plugins/chat/assets/stylesheets/desktop/index.scss b/plugins/chat/assets/stylesheets/desktop/index.scss
index dcc9e2f6c84..4b5b29aad4f 100644
--- a/plugins/chat/assets/stylesheets/desktop/index.scss
+++ b/plugins/chat/assets/stylesheets/desktop/index.scss
@@ -3,6 +3,7 @@
 @import "chat-composer-uploads";
 @import "chat-index-drawer";
 @import "chat-index-full-page";
+@import "chat-github-onebox";
 @import "chat-message-actions";
 @import "chat-message";
 @import "chat-channel-info";
diff --git a/plugins/styleguide/assets/javascripts/discourse/templates/styleguide.hbs b/plugins/styleguide/assets/javascripts/discourse/templates/styleguide.hbs
index ee4dd54db9e..e442c1d291c 100644
--- a/plugins/styleguide/assets/javascripts/discourse/templates/styleguide.hbs
+++ b/plugins/styleguide/assets/javascripts/discourse/templates/styleguide.hbs
@@ -15,6 +15,48 @@
   </section>
 
   <section class="styleguide-contents">
+    <div class="github-onebox">
+      <div class="github-onebox__repo-info">
+        <div class="github-onebox__repo-details">
+          <div class="github-onebox__author">
+            {{d-icon "user"}}
+            <span class="github-onebox__author-name">Charlie</span>
+          </div>
+          <div class="github-onebox__text">contributed to</div>
+          <div class="github-onebox__repo">
+            {{d-icon "fab-github"}}
+            <span class="github-onebox__repo-name">discourse/discourse</span>
+          </div>
+        </div>
+        <div class="github-onebox__repo-status">
+          <span class="github-onebox__repo_changes">
+            <span class="github-onebox__repo-added">+400</span>
+            <span class="github-onebox__repo-change-divider">/</span>
+            <span class="github-onebox__repo-removed">-212</span>
+          </span>
+          <span class="github-onebox__repo_tag --merged">merged</span>
+        </div>
+      </div>
+      <div class="github-onebox__content">
+        <div class="github-onebox__title">
+          <a
+            class="github-onebox__link"
+            target="_blank"
+            rel="noopener noreferrer"
+          >FIX: correct online indicator for non interactive</a>
+          <DButton
+            @class="github-onebox__expand-button"
+            @icon="chevron-down"
+            @title=""
+            @action=""
+          />
+        </div>
+        <div class="github-onebox__description">In addition, the code syntax
+          highlighting and copy buttons were broken in fullscreen because of
+          modal changes over time. It is not the things themselves that disturb
+          people but the judgements they make about these things.</div>
+      </div>
+    </div>
     {{outlet}}
   </section>
 </section>
\ No newline at end of file