diff --git a/packages/ui-components/src/Common/CodeTabs/index.stories.tsx b/packages/ui-components/src/Common/CodeTabs/index.stories.tsx
index 916c5271f7692..e76f184e653d2 100644
--- a/packages/ui-components/src/Common/CodeTabs/index.stories.tsx
+++ b/packages/ui-components/src/Common/CodeTabs/index.stories.tsx
@@ -67,8 +67,8 @@ export default {
     children: <TabsContent />,
     defaultValue: 'mjs',
     tabs: [
-      { key: 'mjs', label: 'MJS' },
-      { key: 'cjs', label: 'CJS' },
+      { key: 'mjs', label: 'Example', extension: 'MJS' },
+      { key: 'cjs', label: 'Example', extension: 'CJS' },
     ],
   },
 } as Meta;
diff --git a/packages/ui-components/src/Common/Tabs/index.module.css b/packages/ui-components/src/Common/Tabs/index.module.css
index f49c61cd7cc9f..f51259c26a0b5 100644
--- a/packages/ui-components/src/Common/Tabs/index.module.css
+++ b/packages/ui-components/src/Common/Tabs/index.module.css
@@ -22,6 +22,18 @@
         text-neutral-800
         dark:text-neutral-200;
 
+      .tabExtension {
+        @apply ml-1
+          rounded-xs
+          border
+          border-neutral-200
+          px-1
+          py-0.5
+          text-xs
+          font-normal
+          text-neutral-200;
+      }
+
       .tabSecondaryLabel {
         @apply pl-1
           text-neutral-500
@@ -34,6 +46,11 @@
           dark:border-b-green-400
           dark:text-green-400;
 
+        .tabExtension {
+          @apply border-green-400
+            text-green-400;
+        }
+
         .tabSecondaryLabel {
           @apply text-green-800
             dark:text-green-600;
diff --git a/packages/ui-components/src/Common/Tabs/index.tsx b/packages/ui-components/src/Common/Tabs/index.tsx
index ed0d93bfb2722..bd2f769b596a6 100644
--- a/packages/ui-components/src/Common/Tabs/index.tsx
+++ b/packages/ui-components/src/Common/Tabs/index.tsx
@@ -10,6 +10,7 @@ type Tab = {
   label: string;
   secondaryLabel?: string;
   value?: string;
+  extension?: string;
 };
 
 type TabsProps = TabsPrimitive.TabsProps & {
@@ -37,6 +38,9 @@ const Tabs: FC<PropsWithChildren<TabsProps>> = ({
           className={classNames(styles.tabsTrigger, triggerClassName)}
         >
           {tab.label}
+          {tab.extension && (
+            <span className={styles.tabExtension}>{tab.extension}</span>
+          )}
           {tab.secondaryLabel ? (
             <span className={styles.tabSecondaryLabel}>
               {tab.secondaryLabel}