diff --git a/CHANGELOG.md b/CHANGELOG.md
index 70953340b2..eb96f4eb35 100644
--- a/CHANGELOG.md
+++ b/CHANGELOG.md
@@ -55,7 +55,7 @@ Changes that are not related to specific components
 
 #### Added
 
-- [Component] What is added?
+- Technology tags to all components
 
 #### Changed
 
diff --git a/site/scripts/scaffold.js b/site/scripts/scaffold.js
index 3db4aa49eb..4afc462483 100644
--- a/site/scripts/scaffold.js
+++ b/site/scripts/scaffold.js
@@ -47,7 +47,7 @@ const createComponentFiles = (templatePath, destination, name, pathName) => {
 
 }
 
-const appendToComponentsData = (name, description, pathName) => {
+const appendToComponentsData = (name, description, pathName, isCoreComponent) => {
   try {
     const newDataObject = {
       name,
@@ -60,7 +60,8 @@ const appendToComponentsData = (name, description, pathName) => {
         alt: `An illustration of the ${name} component.`,
         height: 180,
         width: 280
-      }
+      },
+      tags: ["react", ...(isCoreComponent ? ["core"] : [])]
     };
 
     const componentsDataPath = path.resolve(__dirname, '../src/data/components.json');
@@ -91,6 +92,12 @@ const scaffold = async () => {
     validate: (input) => (input.split(' ').length > 2 ? true : `Description not long enough: ${input}`)
   });
 
+  const { isCoreComponent } = await inquirer.prompt({
+    type: 'confirm',
+    name: 'isCoreComponent',
+    message: 'Is there also a core component?',
+  });
+
   const pathName = name.split(/(?=[A-Z])/).join('-').toLowerCase();
   const path = createFolder(`src/docs/components/${pathName}`);
 
@@ -100,7 +107,7 @@ const scaffold = async () => {
 
   logStep(`${chalk.bold(`Created files:`)}\n\t${chalk.italic(files.join('\n\t'))}`);
 
-  appendToComponentsData(name, description, pathName);
+  appendToComponentsData(name, description, pathName, isCoreComponent);
 
   logStep(`${chalk.bold(`${name} component included in components.json.`)}`);
 
diff --git a/site/src/components/LinkboxList.js b/site/src/components/LinkboxList.js
index 3c07c19a56..0e712d8462 100644
--- a/site/src/components/LinkboxList.js
+++ b/site/src/components/LinkboxList.js
@@ -2,6 +2,7 @@ import * as React from 'react';
 import { navigate, withPrefix } from 'gatsby';
 import { Linkbox } from 'hds-react';
 import PropTypes from 'prop-types';
+import TechTags from './TechTags';
 
 import './LinkboxList.scss';
 
@@ -28,7 +29,9 @@ const LinkboxList = ({ data, className }) => (
                 navigate(item.href);
               }
             }}
-          />
+          >
+            <TechTags componentName={item.name} withoutHeading />
+          </Linkbox>
         </div>
       );
     })}
diff --git a/site/src/components/LinkboxList.scss b/site/src/components/LinkboxList.scss
index fd8a19c621..0d0e9aa5be 100644
--- a/site/src/components/LinkboxList.scss
+++ b/site/src/components/LinkboxList.scss
@@ -4,7 +4,7 @@
   column-gap: var(--spacing-layout-xs);
   display: grid;
   grid-template-columns: repeat(auto-fit, minmax(216px, 1fr));
-  margin-top: var(--spacing-layout-m) !important;
+  margin-top: var(--spacing-layout-xs) !important;
   row-gap: var(--spacing-layout-xs);
   width: 100%;
 }
diff --git a/site/src/components/TechTags.js b/site/src/components/TechTags.js
new file mode 100644
index 0000000000..d0bc619248
--- /dev/null
+++ b/site/src/components/TechTags.js
@@ -0,0 +1,39 @@
+import React from 'react';
+import { Tag } from 'hds-react';
+import PropTypes from 'prop-types';
+import componentData from '../data/components.json';
+
+const tagStyles = {
+  core: { label: 'Core', theme: { '--background-color': 'var(--color-copper-medium-light)' } },
+  react: { label: 'React', theme: { '--background-color': 'var(--color-fog-medium-light)' } },
+  js: { label: 'Vanilla JS', theme: { '--background-color': 'var(--color-engel)' } },
+};
+
+export const TechTags = ({ componentName, withoutHeading }) => {
+  const componentTags = componentData.find((item) => item.name === componentName)?.tags;
+
+  return (
+    <>
+      {!withoutHeading && <h4 className="heading-s">Available technologies</h4>}
+      {componentTags && (
+        <div style={{ display: 'flex', gap: 'var(--spacing-2-xs)' }}>
+          {componentTags.map(
+            (tag) =>
+              tagStyles?.[tag] && (
+                <Tag key={tag} theme={tagStyles[tag]?.theme}>
+                  {tagStyles[tag]?.label}
+                </Tag>
+              ),
+          )}
+        </div>
+      )}
+    </>
+  );
+};
+
+TechTags.propTypes = {
+  componentName: PropTypes.string.isRequired,
+  withoutHeading: PropTypes.bool,
+};
+
+export default TechTags;
diff --git a/site/src/data/components.json b/site/src/data/components.json
index c087cbba17..855d16c8a1 100644
--- a/site/src/data/components.json
+++ b/site/src/data/components.json
@@ -10,7 +10,8 @@
       "alt": "An illustration of the Accordion component.",
       "height": 180,
       "width": 280
-    }
+    },
+    "tags": ["react"]
   },
   {
     "name": "Breadcrumb",
@@ -23,7 +24,8 @@
       "alt": "An illustration of the Breadcrumb component.",
       "height": 180,
       "width": 280
-    }
+    },
+    "tags": ["core", "react"]
   },
   {
     "name": "Button",
@@ -36,7 +38,8 @@
       "alt": "An illustration of the Button component.",
       "height": 180,
       "width": 280
-    }
+    },
+    "tags": ["core", "react"]
   },
   {
     "name": "Card",
@@ -49,7 +52,8 @@
       "alt": "An illustration of the Card component.",
       "height": 180,
       "width": 280
-    }
+    },
+    "tags": ["core", "react"]
   },
   {
     "name": "Checkbox",
@@ -62,7 +66,8 @@
       "alt": "An illustration of the Checkbox component.",
       "height": 180,
       "width": 280
-    }
+    },
+    "tags": ["core", "react"]
   },
   {
     "name": "CookieConsent",
@@ -75,7 +80,8 @@
       "alt": "An illustration of the CookieConsent component.",
       "height": 180,
       "width": 280
-    }
+    },
+    "tags": ["core", "react", "js"]
   },
   {
     "name": "DateInput",
@@ -88,7 +94,8 @@
       "alt": "An illustration of the DateInput component.",
       "height": 180,
       "width": 280
-    }
+    },
+    "tags": ["react"]
   },
   {
     "name": "Dialog",
@@ -101,7 +108,8 @@
       "alt": "An illustration of the Dialog component.",
       "height": 180,
       "width": 280
-    }
+    },
+    "tags": ["react"]
   },
   {
     "name": "Dropdown",
@@ -114,7 +122,8 @@
       "alt": "An illustration of the Dropdown component.",
       "height": 180,
       "width": 280
-    }
+    },
+    "tags": ["react"]
   },
   {
     "name": "ErrorSummary",
@@ -127,7 +136,8 @@
       "alt": "An illustration of the Error Summary component.",
       "height": 180,
       "width": 280
-    }
+    },
+    "tags": ["core", "react"]
   },
   {
     "name": "Fieldset",
@@ -140,7 +150,8 @@
       "alt": "An illustration of the Fieldset component.",
       "height": 180,
       "width": 280
-    }
+    },
+    "tags": ["core", "react"]
   },
   {
     "name": "FileInput",
@@ -153,7 +164,8 @@
       "alt": "An illustration of the FileInput component.",
       "height": 180,
       "width": 280
-    }
+    },
+    "tags": ["react"]
   },
   {
     "name": "Footer",
@@ -166,7 +178,8 @@
       "alt": "An illustration of the Footer component.",
       "height": 180,
       "width": 280
-    }
+    },
+    "tags": ["react"]
   },
   {
     "name": "Header",
@@ -179,7 +192,8 @@
       "alt": "An illustration of the Header component.",
       "height": 180,
       "width": 280
-    }
+    },
+    "tags": ["react"]
   },
   {
     "name": "Hero",
@@ -192,7 +206,8 @@
       "alt": "An illustration of the Hero component.",
       "height": 180,
       "width": 280
-    }
+    },
+    "tags": ["core", "react"]
   },
   {
     "name": "Highlight",
@@ -205,7 +220,8 @@
       "alt": "An illustration of the Highlight component.",
       "height": 180,
       "width": 280
-    }
+    },
+    "tags": ["core", "react"]
   },
   {
     "name": "Icon",
@@ -218,7 +234,8 @@
       "alt": "An illustration of the Icon component.",
       "height": 180,
       "width": 280
-    }
+    },
+    "tags": ["core", "react"]
   },
   {
     "name": "Koros",
@@ -231,7 +248,8 @@
       "alt": "An illustration of the Koros component.",
       "height": 180,
       "width": 280
-    }
+    },
+    "tags": ["core", "react"]
   },
   {
     "name": "Link",
@@ -244,7 +262,8 @@
       "alt": "An illustration of the Link component.",
       "height": 180,
       "width": 280
-    }
+    },
+    "tags": ["core", "react"]
   },
   {
     "name": "Linkbox",
@@ -257,7 +276,8 @@
       "alt": "An illustration of the Linkbox component.",
       "height": 180,
       "width": 280
-    }
+    },
+    "tags": ["react"]
   },
   {
     "name": "LoadingSpinner",
@@ -270,7 +290,8 @@
       "alt": "An illustration of the LoadingSpinner component.",
       "height": 180,
       "width": 280
-    }
+    },
+    "tags": ["core", "react"]
   },
   {
     "name": "Login",
@@ -283,7 +304,8 @@
       "alt": "An illustration of the Login component.",
       "height": 180,
       "width": 280
-    }
+    },
+    "tags": ["react", "js"]
   },
   {
     "name": "Logo",
@@ -296,7 +318,8 @@
       "alt": "An illustration of the Logo component.",
       "height": 180,
       "width": 280
-    }
+    },
+    "tags": ["react"]
   },
   {
     "name": "Notification",
@@ -309,7 +332,8 @@
       "alt": "An illustration of the Notification component.",
       "height": 180,
       "width": 280
-    }
+    },
+    "tags": ["core", "react"]
   },
   {
     "name": "NumberInput",
@@ -322,7 +346,8 @@
       "alt": "An illustration of the NumberInput component.",
       "height": 180,
       "width": 280
-    }
+    },
+    "tags": ["core", "react"]
   },
   {
     "name": "Pagination",
@@ -335,7 +360,8 @@
       "alt": "An illustration of the Pagination component.",
       "height": 180,
       "width": 280
-    }
+    },
+    "tags": ["core", "react"]
   },
   {
     "name": "PasswordInput",
@@ -348,7 +374,8 @@
       "alt": "An illustration of the PasswordInput component.",
       "height": 180,
       "width": 280
-    }
+    },
+    "tags": ["core", "react"]
   },
   {
     "name": "PhoneInput",
@@ -361,7 +388,8 @@
       "alt": "An illustration of the PhoneInput component.",
       "height": 180,
       "width": 280
-    }
+    },
+    "tags": ["core", "react"]
   },
   {
     "name": "RadioButton",
@@ -374,7 +402,8 @@
       "alt": "An illustration of the RadioButton component.",
       "height": 180,
       "width": 280
-    }
+    },
+    "tags": ["core", "react"]
   },
   {
     "name": "SearchInput",
@@ -387,7 +416,8 @@
       "alt": "An illustration of the SearchInput component.",
       "height": 180,
       "width": 280
-    }
+    },
+    "tags": ["core", "react"]
   },
   {
     "name": "Select",
@@ -400,7 +430,8 @@
       "alt": "An illustration of the Select component.",
       "height": 180,
       "width": 280
-    }
+    },
+    "tags": ["react"]
   },
   {
     "name": "SelectionGroup",
@@ -413,7 +444,8 @@
       "alt": "An illustration of the SelectionGroup component.",
       "height": 180,
       "width": 280
-    }
+    },
+    "tags": ["core", "react"]
   },
   {
     "name": "SideNavigation",
@@ -426,7 +458,8 @@
       "alt": "An illustration of the SideNavigation component.",
       "height": 180,
       "width": 280
-    }
+    },
+    "tags": ["react"]
   },
   {
     "name": "StatusLabel",
@@ -439,7 +472,8 @@
       "alt": "An illustration of the StatusLabel component.",
       "height": 180,
       "width": 280
-    }
+    },
+    "tags": ["core", "react"]
   },
   {
     "name": "StepByStep",
@@ -452,7 +486,8 @@
       "alt": "An illustration of the StepByStep component.",
       "height": 180,
       "width": 280
-    }
+    },
+    "tags": ["core", "react"]
   },
   {
     "name": "Stepper",
@@ -465,7 +500,8 @@
       "alt": "An illustration of the Stepper component.",
       "height": 180,
       "width": 280
-    }
+    },
+    "tags": ["react"]
   },
   {
     "name": "Table",
@@ -478,7 +514,8 @@
       "alt": "An illustration of the Table component.",
       "height": 180,
       "width": 280
-    }
+    },
+    "tags": ["core", "react"]
   },
   {
     "name": "Tabs",
@@ -491,7 +528,8 @@
       "alt": "An illustration of the Tabs component.",
       "height": 180,
       "width": 280
-    }
+    },
+    "tags": ["react"]
   },
   {
     "name": "Tag",
@@ -504,7 +542,8 @@
       "alt": "An illustration of the Tag component.",
       "height": 180,
       "width": 280
-    }
+    },
+    "tags": ["core", "react"]
   },
   {
     "name": "TextArea",
@@ -517,7 +556,8 @@
       "alt": "An illustration of the TextArea component.",
       "height": 180,
       "width": 280
-    }
+    },
+    "tags": ["react"]
   },
   {
     "name": "TextInput",
@@ -530,7 +570,8 @@
       "alt": "An illustration of the TextInput component.",
       "height": 180,
       "width": 280
-    }
+    },
+    "tags": ["core", "react"]
   },
   {
     "name": "TimeInput",
@@ -543,7 +584,8 @@
       "alt": "An illustration of the TimeInput component.",
       "height": 180,
       "width": 280
-    }
+    },
+    "tags": ["react"]
   },
   {
     "name": "ToggleButton",
@@ -556,7 +598,8 @@
       "alt": "An illustration of the ToggleButton component.",
       "height": 180,
       "width": 280
-    }
+    },
+    "tags": ["react"]
   },
   {
     "name": "Tooltip",
@@ -569,6 +612,7 @@
       "alt": "An illustration of the Tooltip component.",
       "height": 180,
       "width": 280
-    }
+    },
+    "tags": ["react"]
   }
 ]
diff --git a/site/src/docs/components/accordion/tabs.mdx b/site/src/docs/components/accordion/tabs.mdx
index 6dc31cb613..831d99dd81 100644
--- a/site/src/docs/components/accordion/tabs.mdx
+++ b/site/src/docs/components/accordion/tabs.mdx
@@ -8,6 +8,7 @@ import LeadParagraph from '../../../components/LeadParagraph';
 import Layout from '../../../components/layout';
 import PageTabs from '../../../components/PageTabs';
 import StatusLabel from '../../../components/StatusLabel';
+import TechTags from '../../../components/TechTags';
 
 # Accordion
 
@@ -19,6 +20,8 @@ import StatusLabel from '../../../components/StatusLabel';
 
 <LeadParagraph>Accordions can be used to hide and reveal information. When used correctly, they are a good way to make a higher amount of information easier to digest for the user.</LeadParagraph>
 
+<TechTags componentName="Accordion" />
+
 <PageTabs pageContext={props.pageContext}>
   <PageTabs.TabList>
     <PageTabs.Tab href="/">Usage</PageTabs.Tab>
diff --git a/site/src/docs/components/breadcrumb/tabs.mdx b/site/src/docs/components/breadcrumb/tabs.mdx
index 9d7bb13b2b..cc827f1f0b 100644
--- a/site/src/docs/components/breadcrumb/tabs.mdx
+++ b/site/src/docs/components/breadcrumb/tabs.mdx
@@ -8,6 +8,7 @@ import LeadParagraph from '../../../components/LeadParagraph';
 import Layout from '../../../components/layout';
 import PageTabs from '../../../components/PageTabs';
 import StatusLabel from '../../../components/StatusLabel';
+import TechTags from '../../../components/TechTags';
 
 # Breadcrumb
 
@@ -20,6 +21,8 @@ import StatusLabel from '../../../components/StatusLabel';
 <LeadParagraph>Breadcrumb is a navigational element that provides links back to each previous page the user navigated through and
   shows the user's current location on a website.</LeadParagraph>
 
+<TechTags componentName="Breadcrumb" />
+
 <PageTabs pageContext={props.pageContext}>
   <PageTabs.TabList>
     <PageTabs.Tab href="/">Usage</PageTabs.Tab>
diff --git a/site/src/docs/components/button/tabs.mdx b/site/src/docs/components/button/tabs.mdx
index e7323afe6a..44b7aeb4e8 100644
--- a/site/src/docs/components/button/tabs.mdx
+++ b/site/src/docs/components/button/tabs.mdx
@@ -8,6 +8,7 @@ import LeadParagraph from '../../../components/LeadParagraph';
 import Layout from '../../../components/layout';
 import PageTabs from '../../../components/PageTabs';
 import StatusLabel from '../../../components/StatusLabel';
+import TechTags from '../../../components/TechTags';
 
 # Button
 
@@ -20,6 +21,8 @@ import StatusLabel from '../../../components/StatusLabel';
 <LeadParagraph>Buttons are meant to make actions easily visible and understandable to the user. HDS offers different kinds of button
   variations which each suit for different needs.</LeadParagraph>
 
+<TechTags componentName="Button" />
+
 <PageTabs pageContext={props.pageContext}>
   <PageTabs.TabList>
     <PageTabs.Tab href="/">Usage</PageTabs.Tab>
diff --git a/site/src/docs/components/card/tabs.mdx b/site/src/docs/components/card/tabs.mdx
index f65d7de917..1946a23aed 100644
--- a/site/src/docs/components/card/tabs.mdx
+++ b/site/src/docs/components/card/tabs.mdx
@@ -8,6 +8,7 @@ import LeadParagraph from '../../../components/LeadParagraph';
 import Layout from '../../../components/layout';
 import PageTabs from '../../../components/PageTabs';
 import StatusLabel from '../../../components/StatusLabel';
+import TechTags from '../../../components/TechTags';
 
 # Card
 
@@ -22,6 +23,8 @@ import StatusLabel from '../../../components/StatusLabel';
   correctly, Cards can help your users to scan through vast amounts of information quicker.
 </LeadParagraph>
 
+<TechTags componentName="Card" />
+
 <PageTabs pageContext={props.pageContext}>
   <PageTabs.TabList>
     <PageTabs.Tab href="/">Usage</PageTabs.Tab>
diff --git a/site/src/docs/components/checkbox/tabs.mdx b/site/src/docs/components/checkbox/tabs.mdx
index a28479e10b..52f2c33f25 100644
--- a/site/src/docs/components/checkbox/tabs.mdx
+++ b/site/src/docs/components/checkbox/tabs.mdx
@@ -8,6 +8,7 @@ import LeadParagraph from '../../../components/LeadParagraph';
 import Layout from '../../../components/layout';
 import PageTabs from '../../../components/PageTabs';
 import StatusLabel from '../../../components/StatusLabel';
+import TechTags from '../../../components/TechTags';
 
 # Checkbox
 
@@ -19,6 +20,8 @@ import StatusLabel from '../../../components/StatusLabel';
 
 <LeadParagraph>Checkboxes are used to pick an option when one or more options can be chosen.</LeadParagraph>
 
+<TechTags componentName="Checkbox" />
+
 <PageTabs pageContext={props.pageContext}>
   <PageTabs.TabList>
     <PageTabs.Tab href="/">Usage</PageTabs.Tab>
diff --git a/site/src/docs/components/components.scss b/site/src/docs/components/components.scss
new file mode 100644
index 0000000000..b2414bf727
--- /dev/null
+++ b/site/src/docs/components/components.scss
@@ -0,0 +1,22 @@
+@import "~hds-design-tokens/lib/all.scss";
+
+.components-storybook-links {
+  column-gap: var(--spacing-layout-xs);
+  display: grid;
+  grid-template-columns: repeat(auto-fit, minmax(216px, 1fr));
+  margin-top: var(--spacing-layout-xs) !important;
+  row-gap: var(--spacing-layout-xs);
+  width: 100%;
+
+  & .core-storybook div {
+    background-color: var(--color-copper-medium-light);
+  }
+
+  & .react-storybook div {
+    background-color: var(--color-fog-medium-light);
+  }
+
+  & .js-storybook div {
+    background-color: var(--color-engel);
+  }
+}
diff --git a/site/src/docs/components/cookie-consent/tabs.mdx b/site/src/docs/components/cookie-consent/tabs.mdx
index 8300050c1a..1d191c086c 100644
--- a/site/src/docs/components/cookie-consent/tabs.mdx
+++ b/site/src/docs/components/cookie-consent/tabs.mdx
@@ -8,6 +8,7 @@ import LeadParagraph from '../../../components/LeadParagraph';
 import Layout from '../../../components/layout';
 import PageTabs from '../../../components/PageTabs';
 import StatusLabel from '../../../components/StatusLabel';
+import TechTags from '../../../components/TechTags';
 
 # CookieConsent
 
@@ -24,6 +25,8 @@ import StatusLabel from '../../../components/StatusLabel';
   application for the first time.
 </LeadParagraph>
 
+<TechTags componentName="CookieConsent" />
+
 <PageTabs pageContext={props.pageContext}>
   <PageTabs.TabList>
     <PageTabs.Tab href="/">Usage</PageTabs.Tab>
diff --git a/site/src/docs/components/date-input/tabs.mdx b/site/src/docs/components/date-input/tabs.mdx
index b5f0fcb34c..2a61a5add0 100644
--- a/site/src/docs/components/date-input/tabs.mdx
+++ b/site/src/docs/components/date-input/tabs.mdx
@@ -8,6 +8,7 @@ import LeadParagraph from '../../../components/LeadParagraph';
 import Layout from '../../../components/layout';
 import PageTabs from '../../../components/PageTabs';
 import StatusLabel from '../../../components/StatusLabel';
+import TechTags from '../../../components/TechTags';
 
 # DateInput
 
@@ -19,6 +20,8 @@ import StatusLabel from '../../../components/StatusLabel';
 
 <LeadParagraph>Date input allows the user to easily input a specific date or a date range. By default, HDS date input is supplied with a date picker functionality.</LeadParagraph>
 
+<TechTags componentName="DateInput" />
+
 <PageTabs pageContext={props.pageContext}>
   <PageTabs.TabList>
     <PageTabs.Tab href="/">Usage</PageTabs.Tab>
diff --git a/site/src/docs/components/dialog/tabs.mdx b/site/src/docs/components/dialog/tabs.mdx
index 954e5c9e7a..7c4a6cefb2 100644
--- a/site/src/docs/components/dialog/tabs.mdx
+++ b/site/src/docs/components/dialog/tabs.mdx
@@ -8,6 +8,7 @@ import LeadParagraph from '../../../components/LeadParagraph';
 import Layout from '../../../components/layout';
 import PageTabs from '../../../components/PageTabs';
 import StatusLabel from '../../../components/StatusLabel';
+import TechTags from '../../../components/TechTags';
 
 # Dialog
 
@@ -19,6 +20,8 @@ import StatusLabel from '../../../components/StatusLabel';
 
 <LeadParagraph>Dialogs initiate a conversation between the service and the user. They are used when an input or a confirmation is needed from the user or when important information needs to be conveyed.</LeadParagraph>
 
+<TechTags componentName="Dialog" />
+
 <PageTabs pageContext={props.pageContext}>
   <PageTabs.TabList>
     <PageTabs.Tab href="/">Usage</PageTabs.Tab>
diff --git a/site/src/docs/components/error-summary/tabs.mdx b/site/src/docs/components/error-summary/tabs.mdx
index a120ee9c2b..68cbbf1bc2 100644
--- a/site/src/docs/components/error-summary/tabs.mdx
+++ b/site/src/docs/components/error-summary/tabs.mdx
@@ -8,6 +8,7 @@ import LeadParagraph from '../../../components/LeadParagraph';
 import Layout from '../../../components/layout';
 import PageTabs from '../../../components/PageTabs';
 import StatusLabel from '../../../components/StatusLabel';
+import TechTags from '../../../components/TechTags';
 
 # ErrorSummary
 
@@ -21,6 +22,8 @@ import StatusLabel from '../../../components/StatusLabel';
   The error summary is notification-like element which lists all errors (and their descriptions) found in a form or other inputs and provides anchor links to each erroneous input for easy access.
 </LeadParagraph>
 
+<TechTags componentName="ErrorSummary" />
+
 <PageTabs pageContext={props.pageContext}>
   <PageTabs.TabList>
     <PageTabs.Tab href="/">Usage</PageTabs.Tab>
diff --git a/site/src/docs/components/fieldset/tabs.mdx b/site/src/docs/components/fieldset/tabs.mdx
index fd3c6cc754..4fa27680b5 100644
--- a/site/src/docs/components/fieldset/tabs.mdx
+++ b/site/src/docs/components/fieldset/tabs.mdx
@@ -8,6 +8,7 @@ import LeadParagraph from '../../../components/LeadParagraph';
 import Layout from '../../../components/layout';
 import PageTabs from '../../../components/PageTabs';
 import StatusLabel from '../../../components/StatusLabel';
+import TechTags from '../../../components/TechTags';
 
 # Fieldset
 
@@ -19,6 +20,8 @@ import StatusLabel from '../../../components/StatusLabel';
 
 <LeadParagraph>Fieldset groups multiple related form input fields together by giving them a common legend heading.</LeadParagraph>
 
+<TechTags componentName="Fieldset" />
+
 <PageTabs pageContext={props.pageContext}>
   <PageTabs.TabList>
     <PageTabs.Tab href="/">Usage</PageTabs.Tab>
diff --git a/site/src/docs/components/file-input/tabs.mdx b/site/src/docs/components/file-input/tabs.mdx
index 176ec86e3e..6e80f633f3 100644
--- a/site/src/docs/components/file-input/tabs.mdx
+++ b/site/src/docs/components/file-input/tabs.mdx
@@ -8,6 +8,7 @@ import LeadParagraph from '../../../components/LeadParagraph';
 import Layout from '../../../components/layout';
 import PageTabs from '../../../components/PageTabs';
 import StatusLabel from '../../../components/StatusLabel';
+import TechTags from '../../../components/TechTags';
 
 # FileInput
 
@@ -19,6 +20,8 @@ import StatusLabel from '../../../components/StatusLabel';
 
 <LeadParagraph>A file input helps the user to browse and select one or multiple files to be uploaded to the service.</LeadParagraph>
 
+<TechTags componentName="FileInput" />
+
 <PageTabs pageContext={props.pageContext}>
   <PageTabs.TabList>
     <PageTabs.Tab href="/">Usage</PageTabs.Tab>
diff --git a/site/src/docs/components/footer/tabs.mdx b/site/src/docs/components/footer/tabs.mdx
index 0e4a081860..14fce24577 100644
--- a/site/src/docs/components/footer/tabs.mdx
+++ b/site/src/docs/components/footer/tabs.mdx
@@ -8,6 +8,7 @@ import LeadParagraph from '../../../components/LeadParagraph';
 import Layout from '../../../components/layout';
 import PageTabs from '../../../components/PageTabs';
 import StatusLabel from '../../../components/StatusLabel';
+import TechTags from '../../../components/TechTags';
 
 # Footer
 
@@ -19,6 +20,8 @@ import StatusLabel from '../../../components/StatusLabel';
 
 <LeadParagraph>The Footer component is located at the bottom of the page below the main body content. It provides a place for secondary navigation, site-wide actions, and additional information.</LeadParagraph>
 
+<TechTags componentName="Footer" />
+
 <PageTabs pageContext={props.pageContext}>
   <PageTabs.TabList>
     <PageTabs.Tab href="/">Usage</PageTabs.Tab>
diff --git a/site/src/docs/components/header/tabs.mdx b/site/src/docs/components/header/tabs.mdx
index 23963b5b5b..1b2cbcfae5 100644
--- a/site/src/docs/components/header/tabs.mdx
+++ b/site/src/docs/components/header/tabs.mdx
@@ -9,6 +9,7 @@ import Layout from '../../../components/layout';
 import PageTabs from '../../../components/PageTabs';
 import StatusLabel from '../../../components/StatusLabel';
 import Notification from '../../../components/Notification';
+import TechTags from '../../../components/TechTags';
 
 # Header
 
@@ -25,6 +26,8 @@ import Notification from '../../../components/Notification';
   that these components are subject to change. We are open to feedback regarding how they work.
 </Notification>
 
+<TechTags componentName="Header" />
+
 <PageTabs pageContext={props.pageContext}>
   <PageTabs.TabList>
     <PageTabs.Tab href="/">Usage</PageTabs.Tab>
diff --git a/site/src/docs/components/hero/tabs.mdx b/site/src/docs/components/hero/tabs.mdx
index 177eb4fd39..4d385d8bd9 100644
--- a/site/src/docs/components/hero/tabs.mdx
+++ b/site/src/docs/components/hero/tabs.mdx
@@ -8,6 +8,7 @@ import LeadParagraph from '../../../components/LeadParagraph';
 import Layout from '../../../components/layout';
 import PageTabs from '../../../components/PageTabs';
 import StatusLabel from '../../../components/StatusLabel';
+import TechTags from '../../../components/TechTags';
 
 # Hero
 
@@ -19,6 +20,8 @@ import StatusLabel from '../../../components/StatusLabel';
 
 <LeadParagraph>Hero elements are used below the main navigation as the first content element. They can be used for different purposes, but most often, they shortly describe the page's role and offer the page's essential function as a call-to-action button.</LeadParagraph>
 
+<TechTags componentName="Hero" />
+
 <PageTabs pageContext={props.pageContext}>
   <PageTabs.TabList>
     <PageTabs.Tab href="/">Usage</PageTabs.Tab>
diff --git a/site/src/docs/components/highlight/tabs.mdx b/site/src/docs/components/highlight/tabs.mdx
index c617e6a7aa..0289c89cd2 100644
--- a/site/src/docs/components/highlight/tabs.mdx
+++ b/site/src/docs/components/highlight/tabs.mdx
@@ -8,6 +8,7 @@ import LeadParagraph from '../../../components/LeadParagraph';
 import Layout from '../../../components/layout';
 import PageTabs from '../../../components/PageTabs';
 import StatusLabel from '../../../components/StatusLabel';
+import TechTags from '../../../components/TechTags';
 
 # Highlight
 
@@ -19,6 +20,8 @@ import StatusLabel from '../../../components/StatusLabel';
 
 <LeadParagraph>Highlight component allows lifting an excerpt from a longer text for emphasis. Highlight supports two types: highlight (default) and quotation. The Quote element has a reference to the quote source. The Highlight element is an excerpt from the text without the source information.</LeadParagraph>
 
+<TechTags componentName="Highlight" />
+
 <PageTabs pageContext={props.pageContext}>
   <PageTabs.TabList>
     <PageTabs.Tab href="/">Usage</PageTabs.Tab>
diff --git a/site/src/docs/components/icon/tabs.mdx b/site/src/docs/components/icon/tabs.mdx
index f259a058e7..0cbb0257c7 100644
--- a/site/src/docs/components/icon/tabs.mdx
+++ b/site/src/docs/components/icon/tabs.mdx
@@ -8,6 +8,7 @@ import Layout from '../../../components/layout';
 import PageTabs from '../../../components/PageTabs';
 import LeadParagraph from '../../../components/LeadParagraph';
 import StatusLabel from '../../../components/StatusLabel';
+import TechTags from '../../../components/TechTags';
 
 # Icon
 
@@ -19,6 +20,8 @@ import StatusLabel from '../../../components/StatusLabel';
 
 <LeadParagraph>Icons are used for providing visual cues and highlighting actions, denoting types and classes of information, and giving additional meaning to content.</LeadParagraph>
 
+<TechTags componentName="Icon" />
+
 <PageTabs pageContext={props.pageContext}>
   <PageTabs.TabList>
     <PageTabs.Tab href="/">Usage</PageTabs.Tab>
diff --git a/site/src/docs/components/index.mdx b/site/src/docs/components/index.mdx
index 11f4038496..79b9b79e45 100644
--- a/site/src/docs/components/index.mdx
+++ b/site/src/docs/components/index.mdx
@@ -5,13 +5,19 @@ title: "Components overview"
 
 import ComponentsList from '../../components/ComponentsList';
 import InternalLink from '../../components/InternalLink';
+import { Linkbox, LinkboxSize } from 'hds-react';
+import './components.scss';
 
 # Components overview
 
-This section lists all components currently available in HDS.
+This section lists all components currently available in HDS. Components can be viewed also in the Storybook examples.
 
-Components can be viewed also in the Storybook examples.
-- <InternalLink href="/storybook/react">React Storybook</InternalLink>
-- <InternalLink href="/storybook/core">Core Storybook</InternalLink>
+<div className="components-storybook-links">
+  <Linkbox className="core-storybook" size={LinkboxSize.Small} linkboxAriaLabel="Core Storybook" linkAriaLabel="Core Storybook" href="/storybook/core" external heading="Core Storybook" />
+  <Linkbox className="react-storybook" size={LinkboxSize.Small} linkboxAriaLabel="React Storybook" linkAriaLabel="React Storybook" href="/storybook/react" external heading="React Storybook" />
+  <Linkbox className="js-storybook" size={LinkboxSize.Small} linkboxAriaLabel="Vanilla JS" linkAriaLabel="Vanilla JS" href="/storybook/js" external heading="Vanilla JS" />
+</div>
+
+Tags will tell you which technologies the component is available in.
 
 <ComponentsList />
diff --git a/site/src/docs/components/koros/tabs.mdx b/site/src/docs/components/koros/tabs.mdx
index e0f8db44d2..1688a54420 100644
--- a/site/src/docs/components/koros/tabs.mdx
+++ b/site/src/docs/components/koros/tabs.mdx
@@ -7,6 +7,7 @@ import StatusLabelTooltip from '../../../components/StatusLabelTooltip';
 import LeadParagraph from '../../../components/LeadParagraph';
 import PageTabs from '../../../components/PageTabs';
 import StatusLabel from '../../../components/StatusLabel';
+import TechTags from '../../../components/TechTags';
 
 # Koros
 
@@ -18,6 +19,8 @@ import StatusLabel from '../../../components/StatusLabel';
 
 <LeadParagraph>Koros, also known as Wave motifs, are part of the visual identity of City of Helsinki. The Koros can be used as visual elements, for example as part of the hero image or the footer and as a divider of content in the user interface.</LeadParagraph>
 
+<TechTags componentName="Koros" />
+
 <PageTabs pageContext={props.pageContext}>
   <PageTabs.TabList>
     <PageTabs.Tab href="/">Usage</PageTabs.Tab>
diff --git a/site/src/docs/components/link/tabs.mdx b/site/src/docs/components/link/tabs.mdx
index 21c4e2cfca..ba9c1e9051 100644
--- a/site/src/docs/components/link/tabs.mdx
+++ b/site/src/docs/components/link/tabs.mdx
@@ -8,6 +8,7 @@ import LeadParagraph from '../../../components/LeadParagraph';
 import Layout from '../../../components/layout';
 import PageTabs from '../../../components/PageTabs';
 import StatusLabel from '../../../components/StatusLabel';
+import TechTags from '../../../components/TechTags';
 
 # Link
 
@@ -19,6 +20,8 @@ import StatusLabel from '../../../components/StatusLabel';
 
 <LeadParagraph>Links are used as navigational elements and can be used on their own or in inline with text. They provide a lightweight option for navigation.</LeadParagraph>
 
+<TechTags componentName="Link" />
+
 <PageTabs pageContext={props.pageContext}>
   <PageTabs.TabList>
     <PageTabs.Tab href="/">Usage</PageTabs.Tab>
diff --git a/site/src/docs/components/linkbox/tabs.mdx b/site/src/docs/components/linkbox/tabs.mdx
index e7929705b8..28aac052ee 100644
--- a/site/src/docs/components/linkbox/tabs.mdx
+++ b/site/src/docs/components/linkbox/tabs.mdx
@@ -8,6 +8,7 @@ import LeadParagraph from '../../../components/LeadParagraph';
 import Layout from '../../../components/layout';
 import PageTabs from '../../../components/PageTabs';
 import StatusLabel from '../../../components/StatusLabel';
+import TechTags from '../../../components/TechTags';
 
 # Linkbox
 
@@ -19,6 +20,8 @@ import StatusLabel from '../../../components/StatusLabel';
 
 <LeadParagraph>Linkboxes are used to combine multiple elements into a single interactable element. While they are visually similar to HDS Cards, Linkboxes are always a single clickable link and they cannot contain other interactable elements.</LeadParagraph>
 
+<TechTags componentName="Linkbox" />
+
 <PageTabs pageContext={props.pageContext}>
   <PageTabs.TabList>
     <PageTabs.Tab href="/">Usage</PageTabs.Tab>
diff --git a/site/src/docs/components/loading-spinner/tabs.mdx b/site/src/docs/components/loading-spinner/tabs.mdx
index 1b4b6330ee..a531163adb 100644
--- a/site/src/docs/components/loading-spinner/tabs.mdx
+++ b/site/src/docs/components/loading-spinner/tabs.mdx
@@ -8,6 +8,7 @@ import LeadParagraph from '../../../components/LeadParagraph';
 import Layout from '../../../components/layout';
 import PageTabs from '../../../components/PageTabs';
 import StatusLabel from '../../../components/StatusLabel';
+import TechTags from '../../../components/TechTags';
 
 # LoadingSpinner
 
@@ -19,6 +20,8 @@ import StatusLabel from '../../../components/StatusLabel';
 
 <LeadParagraph>Loading spinner is used for notifying users that their action is being processed or data retrieved from server.</LeadParagraph>
 
+<TechTags componentName="LoadingSpinner" />
+
 <PageTabs pageContext={props.pageContext}>
   <PageTabs.TabList>
     <PageTabs.Tab href="/">Usage</PageTabs.Tab>
diff --git a/site/src/docs/components/login/tabs.mdx b/site/src/docs/components/login/tabs.mdx
index 37b051a752..3586579845 100644
--- a/site/src/docs/components/login/tabs.mdx
+++ b/site/src/docs/components/login/tabs.mdx
@@ -8,6 +8,7 @@ import LeadParagraph from '../../../components/LeadParagraph';
 import PageTabs from '../../../components/PageTabs';
 import Notification from '../../../components/Notification';
 import StatusLabel from '../../../components/StatusLabel';
+import TechTags from '../../../components/TechTags';
 
 # Login
 
@@ -24,6 +25,8 @@ import StatusLabel from '../../../components/StatusLabel';
   polling and GraphQL queries.
 </LeadParagraph>
 
+<TechTags componentName="Login" />
+
 <PageTabs pageContext={props.pageContext}>
   <PageTabs.TabList>
     <PageTabs.Tab href="/">Intro</PageTabs.Tab>
diff --git a/site/src/docs/components/logo/tabs.mdx b/site/src/docs/components/logo/tabs.mdx
index 692db7904f..d48a5c1576 100644
--- a/site/src/docs/components/logo/tabs.mdx
+++ b/site/src/docs/components/logo/tabs.mdx
@@ -8,6 +8,7 @@ import LeadParagraph from '../../../components/LeadParagraph';
 import Layout from '../../../components/layout';
 import PageTabs from '../../../components/PageTabs';
 import StatusLabel from '../../../components/StatusLabel';
+import TechTags from '../../../components/TechTags';
 
 # Logo
 
@@ -19,6 +20,8 @@ import StatusLabel from '../../../components/StatusLabel';
 
 <LeadParagraph>The logo is used to identify the site or application as an official City of Helsinki service.</LeadParagraph>
 
+<TechTags componentName="Logo" />
+
 <PageTabs pageContext={props.pageContext}>
   <PageTabs.TabList>
     <PageTabs.Tab href="/">Usage</PageTabs.Tab>
diff --git a/site/src/docs/components/notification/tabs.mdx b/site/src/docs/components/notification/tabs.mdx
index 6c5931f34c..776f638734 100644
--- a/site/src/docs/components/notification/tabs.mdx
+++ b/site/src/docs/components/notification/tabs.mdx
@@ -8,6 +8,7 @@ import LeadParagraph from '../../../components/LeadParagraph';
 import Layout from '../../../components/layout';
 import PageTabs from '../../../components/PageTabs';
 import StatusLabel from '../../../components/StatusLabel';
+import TechTags from '../../../components/TechTags';
 
 # Notification
 
@@ -19,6 +20,8 @@ import StatusLabel from '../../../components/StatusLabel';
 
 <LeadParagraph>Notifications are used to present timely information to the user. HDS offers two types of notifications for different use cases.</LeadParagraph>
 
+<TechTags componentName="Notification" />
+
 <PageTabs pageContext={props.pageContext}>
   <PageTabs.TabList>
     <PageTabs.Tab href="/">Usage</PageTabs.Tab>
diff --git a/site/src/docs/components/number-input/tabs.mdx b/site/src/docs/components/number-input/tabs.mdx
index cdf395a0a1..e62706d23e 100644
--- a/site/src/docs/components/number-input/tabs.mdx
+++ b/site/src/docs/components/number-input/tabs.mdx
@@ -8,6 +8,7 @@ import LeadParagraph from '../../../components/LeadParagraph';
 import Layout from '../../../components/layout';
 import PageTabs from '../../../components/PageTabs';
 import StatusLabel from '../../../components/StatusLabel';
+import TechTags from '../../../components/TechTags';
 
 # NumberInput
 
@@ -19,6 +20,8 @@ import StatusLabel from '../../../components/StatusLabel';
 
 <LeadParagraph>  A number input allows the user to enter numeric values. It also features optional steppers for increasing or decreasing the value by a set amount.</LeadParagraph>
 
+<TechTags componentName="NumberInput" />
+
 <PageTabs pageContext={props.pageContext}>
   <PageTabs.TabList>
     <PageTabs.Tab href="/">Usage</PageTabs.Tab>
diff --git a/site/src/docs/components/pagination/tabs.mdx b/site/src/docs/components/pagination/tabs.mdx
index 8671ebb673..cfa6f27bb6 100644
--- a/site/src/docs/components/pagination/tabs.mdx
+++ b/site/src/docs/components/pagination/tabs.mdx
@@ -8,6 +8,7 @@ import LeadParagraph from '../../../components/LeadParagraph';
 import Layout from '../../../components/layout';
 import PageTabs from '../../../components/PageTabs';
 import StatusLabel from '../../../components/StatusLabel';
+import TechTags from '../../../components/TechTags';
 
 # Pagination
 
@@ -19,6 +20,8 @@ import StatusLabel from '../../../components/StatusLabel';
 
 <LeadParagraph>The pagination component allows the user to navigate between pages when content is split into several pages.</LeadParagraph>
 
+<TechTags componentName="Pagination" />
+
 <PageTabs pageContext={props.pageContext}>
   <PageTabs.TabList>
     <PageTabs.Tab href="/">Usage</PageTabs.Tab>
diff --git a/site/src/docs/components/password-input/tabs.mdx b/site/src/docs/components/password-input/tabs.mdx
index 97199b34b4..d7b5061476 100644
--- a/site/src/docs/components/password-input/tabs.mdx
+++ b/site/src/docs/components/password-input/tabs.mdx
@@ -8,6 +8,7 @@ import LeadParagraph from '../../../components/LeadParagraph';
 import Layout from '../../../components/layout';
 import PageTabs from '../../../components/PageTabs';
 import StatusLabel from '../../../components/StatusLabel';
+import TechTags from '../../../components/TechTags';
 
 # PasswordInput
 
@@ -19,6 +20,8 @@ import StatusLabel from '../../../components/StatusLabel';
 
 <LeadParagraph>A password field is a foundational input field component that the user can interact with and specifically input password data.</LeadParagraph>
 
+<TechTags componentName="PasswordInput" />
+
 <PageTabs pageContext={props.pageContext}>
   <PageTabs.TabList>
     <PageTabs.Tab href="/">Usage</PageTabs.Tab>
diff --git a/site/src/docs/components/phone-input/tabs.mdx b/site/src/docs/components/phone-input/tabs.mdx
index de3e6e9fe7..71078ecf38 100644
--- a/site/src/docs/components/phone-input/tabs.mdx
+++ b/site/src/docs/components/phone-input/tabs.mdx
@@ -8,6 +8,7 @@ import LeadParagraph from '../../../components/LeadParagraph';
 import Layout from '../../../components/layout';
 import PageTabs from '../../../components/PageTabs';
 import StatusLabel from '../../../components/StatusLabel';
+import TechTags from '../../../components/TechTags';
 
 # PhoneInput
 
@@ -19,6 +20,8 @@ import StatusLabel from '../../../components/StatusLabel';
 
 <LeadParagraph>A phone input allows the user to enter phone number values. </LeadParagraph>
 
+<TechTags componentName="PhoneInput" />
+
 <PageTabs pageContext={props.pageContext}>
   <PageTabs.TabList>
     <PageTabs.Tab href="/">Usage</PageTabs.Tab>
diff --git a/site/src/docs/components/radio-button/tabs.mdx b/site/src/docs/components/radio-button/tabs.mdx
index 26d9d83041..0c344ac42f 100644
--- a/site/src/docs/components/radio-button/tabs.mdx
+++ b/site/src/docs/components/radio-button/tabs.mdx
@@ -8,6 +8,7 @@ import LeadParagraph from '../../../components/LeadParagraph';
 import Layout from '../../../components/layout';
 import PageTabs from '../../../components/PageTabs';
 import StatusLabel from '../../../components/StatusLabel';
+import TechTags from '../../../components/TechTags';
 
 # RadioButton
 
@@ -19,6 +20,8 @@ import StatusLabel from '../../../components/StatusLabel';
 
 <LeadParagraph>Radio buttons are used to pick an option when only one option can be chosen. </LeadParagraph>
 
+<TechTags componentName="RadioButton" />
+
 <PageTabs pageContext={props.pageContext}>
   <PageTabs.TabList>
     <PageTabs.Tab href="/">Usage</PageTabs.Tab>
diff --git a/site/src/docs/components/search-input/tabs.mdx b/site/src/docs/components/search-input/tabs.mdx
index 955ba3f063..486ba4b77e 100644
--- a/site/src/docs/components/search-input/tabs.mdx
+++ b/site/src/docs/components/search-input/tabs.mdx
@@ -8,6 +8,7 @@ import LeadParagraph from '../../../components/LeadParagraph';
 import Layout from '../../../components/layout';
 import PageTabs from '../../../components/PageTabs';
 import StatusLabel from '../../../components/StatusLabel';
+import TechTags from '../../../components/TechTags';
 
 # SearchInput
 
@@ -19,6 +20,8 @@ import StatusLabel from '../../../components/StatusLabel';
 
 <LeadParagraph>A search input allows the user to find relevant content. The user can filter content using different words or phrases as keywords.</LeadParagraph>
 
+<TechTags componentName="SearchInput" />
+
 <PageTabs pageContext={props.pageContext}>
   <PageTabs.TabList>
     <PageTabs.Tab href="/">Usage</PageTabs.Tab>
diff --git a/site/src/docs/components/select/tabs.mdx b/site/src/docs/components/select/tabs.mdx
index 3195b929c3..d1cc3e76f8 100644
--- a/site/src/docs/components/select/tabs.mdx
+++ b/site/src/docs/components/select/tabs.mdx
@@ -9,6 +9,7 @@ import Layout from '../../../components/layout';
 import PageTabs from '../../../components/PageTabs';
 import StatusLabel from '../../../components/StatusLabel';
 import Notification from '../../../components/Notification';
+import TechTags from '../../../components/TechTags';
 
 # Select
 
@@ -25,6 +26,8 @@ import Notification from '../../../components/Notification';
   a text input for filtering and supports item grouping. Dropdowns are often used as part of forms and filters.
 </LeadParagraph>
 
+<TechTags componentName="Select" />
+
 <PageTabs pageContext={props.pageContext}>
   <PageTabs.TabList>
     <PageTabs.Tab href="/">Usage</PageTabs.Tab>
diff --git a/site/src/docs/components/selection-group/tabs.mdx b/site/src/docs/components/selection-group/tabs.mdx
index 82e011048b..dba9627136 100644
--- a/site/src/docs/components/selection-group/tabs.mdx
+++ b/site/src/docs/components/selection-group/tabs.mdx
@@ -8,6 +8,7 @@ import LeadParagraph from '../../../components/LeadParagraph';
 import Layout from '../../../components/layout';
 import PageTabs from '../../../components/PageTabs';
 import StatusLabel from '../../../components/StatusLabel';
+import TechTags from '../../../components/TechTags';
 
 # SelectionGroup
 
@@ -19,6 +20,8 @@ import StatusLabel from '../../../components/StatusLabel';
 
 <LeadParagraph>Selection group allows grouping related form selection elements (such as Checkboxes) to each other.</LeadParagraph>
 
+<TechTags componentName="SelectionGroup" />
+
 <PageTabs pageContext={props.pageContext}>
   <PageTabs.TabList>
     <PageTabs.Tab href="/">Usage</PageTabs.Tab>
diff --git a/site/src/docs/components/side-navigation/tabs.mdx b/site/src/docs/components/side-navigation/tabs.mdx
index 9046750ede..a6ad5c65e5 100644
--- a/site/src/docs/components/side-navigation/tabs.mdx
+++ b/site/src/docs/components/side-navigation/tabs.mdx
@@ -9,6 +9,7 @@ import Layout from '../../../components/layout';
 import PageTabs from '../../../components/PageTabs';
 import StatusLabel from '../../../components/StatusLabel';
 import Notification from '../../../components/Notification';
+import TechTags from '../../../components/TechTags';
 
 # SideNavigation
 
@@ -24,6 +25,8 @@ import Notification from '../../../components/Notification';
   The HDS team will be unifying the SideNavigation component with the Hel.fi project side navigation in the near future.
 </Notification>
 
+<TechTags componentName="SideNavigation" />
+
 <PageTabs pageContext={props.pageContext}>
   <PageTabs.TabList>
     <PageTabs.Tab href="/">Usage</PageTabs.Tab>
diff --git a/site/src/docs/components/status-label/tabs.mdx b/site/src/docs/components/status-label/tabs.mdx
index d01111e41c..9257924323 100644
--- a/site/src/docs/components/status-label/tabs.mdx
+++ b/site/src/docs/components/status-label/tabs.mdx
@@ -8,6 +8,7 @@ import LeadParagraph from '../../../components/LeadParagraph';
 import Layout from '../../../components/layout';
 import PageTabs from '../../../components/PageTabs';
 import StatusLabel from '../../../components/StatusLabel';
+import TechTags from '../../../components/TechTags';
 
 # StatusLabel
 
@@ -25,6 +26,8 @@ import StatusLabel from '../../../components/StatusLabel';
   and they are only meant to convey relevant information.
 </LeadParagraph>
 
+<TechTags componentName="StatusLabel" />
+
 <PageTabs pageContext={props.pageContext}>
   <PageTabs.TabList>
     <PageTabs.Tab href="/">Usage</PageTabs.Tab>
diff --git a/site/src/docs/components/step-by-step/tabs.mdx b/site/src/docs/components/step-by-step/tabs.mdx
index ab1e1248f3..d59ca93f62 100644
--- a/site/src/docs/components/step-by-step/tabs.mdx
+++ b/site/src/docs/components/step-by-step/tabs.mdx
@@ -7,6 +7,7 @@ import StatusLabelTooltip from '../../../components/StatusLabelTooltip';
 import LeadParagraph from '../../../components/LeadParagraph';
 import PageTabs from '../../../components/PageTabs';
 import StatusLabel from '../../../components/StatusLabel';
+import TechTags from '../../../components/TechTags';
 
 # StepByStep
 
@@ -18,6 +19,8 @@ import StatusLabel from '../../../components/StatusLabel';
 
 <LeadParagraph>StepByStep component is useful for visualising a process in steps. The component supports numbered list for cases where the steps must be completed in a specific order, and unnumbered list for cases where the steps are more of a guideline.</LeadParagraph>
 
+<TechTags componentName="StepByStep" />
+
 <PageTabs pageContext={props.pageContext}>
   <PageTabs.TabList>
     <PageTabs.Tab href="/">
diff --git a/site/src/docs/components/stepper/tabs.mdx b/site/src/docs/components/stepper/tabs.mdx
index 430aa37750..e4e4cd45d5 100644
--- a/site/src/docs/components/stepper/tabs.mdx
+++ b/site/src/docs/components/stepper/tabs.mdx
@@ -9,6 +9,7 @@ import Layout from '../../../components/layout';
 import PageTabs from '../../../components/PageTabs';
 import StatusLabel from '../../../components/StatusLabel';
 import Notification from '../../../components/Notification';
+import TechTags from '../../../components/TechTags';
 
 # Stepper
 
@@ -24,6 +25,8 @@ import Notification from '../../../components/Notification';
   This documentation page is about HDS multi-page stepper component. If you are looking for documentation about building multi-page forms, please refer to <InternalLink href="/patterns/forms/form-multi-page">HDS multi-page form pattern documentation page</InternalLink>.
 </Notification>
 
+<TechTags componentName="Stepper" />
+
 <PageTabs pageContext={props.pageContext}>
   <PageTabs.TabList>
     <PageTabs.Tab href="/">Usage</PageTabs.Tab>
diff --git a/site/src/docs/components/table/tabs.mdx b/site/src/docs/components/table/tabs.mdx
index 206b688a5f..e9c5db041e 100644
--- a/site/src/docs/components/table/tabs.mdx
+++ b/site/src/docs/components/table/tabs.mdx
@@ -9,6 +9,7 @@ import Layout from '../../../components/layout';
 import PageTabs from '../../../components/PageTabs';
 import StatusLabel from '../../../components/StatusLabel';
 import Notification from '../../../components/Notification';
+import TechTags from '../../../components/TechTags';
 
 # Table
 
@@ -24,6 +25,8 @@ import Notification from '../../../components/Notification';
   HDS Tables are work in progress. The current feature set will serve most projects but later we are also looking into adding more features such as single row actions (edit, delete), expandable rows and supporting more HDS components inside tables.
 </Notification>
 
+<TechTags componentName="Table" />
+
 <PageTabs pageContext={props.pageContext}>
   <PageTabs.TabList>
     <PageTabs.Tab href="/">Usage</PageTabs.Tab>
diff --git a/site/src/docs/components/tabs/tabs.mdx b/site/src/docs/components/tabs/tabs.mdx
index 86194c0f34..fbde0daf70 100644
--- a/site/src/docs/components/tabs/tabs.mdx
+++ b/site/src/docs/components/tabs/tabs.mdx
@@ -8,6 +8,7 @@ import LeadParagraph from '../../../components/LeadParagraph';
 import Layout from '../../../components/layout';
 import PageTabs from '../../../components/PageTabs';
 import StatusLabel from '../../../components/StatusLabel';
+import TechTags from '../../../components/TechTags';
 
 # Tabs
 
@@ -19,6 +20,8 @@ import StatusLabel from '../../../components/StatusLabel';
 
 <LeadParagraph>Tabs are used to help the user browse and navigate between information contents that have a relation.</LeadParagraph>
 
+<TechTags componentName="Tabs" />
+
 <PageTabs pageContext={props.pageContext}>
   <PageTabs.TabList>
     <PageTabs.Tab href="/">Usage</PageTabs.Tab>
diff --git a/site/src/docs/components/tag/tabs.mdx b/site/src/docs/components/tag/tabs.mdx
index 3a00e13872..d8e7e383f3 100644
--- a/site/src/docs/components/tag/tabs.mdx
+++ b/site/src/docs/components/tag/tabs.mdx
@@ -8,6 +8,7 @@ import LeadParagraph from '../../../components/LeadParagraph';
 import Layout from '../../../components/layout';
 import PageTabs from '../../../components/PageTabs';
 import StatusLabel from '../../../components/StatusLabel';
+import TechTags from '../../../components/TechTags';
 
 # Tag
 
@@ -19,6 +20,8 @@ import StatusLabel from '../../../components/StatusLabel';
 
 <LeadParagraph>Tags are used to show attributes of an object or element such as categories. HDS also uses Tags to present filters selected for searches.</LeadParagraph>
 
+<TechTags componentName="Tag" />
+
 <PageTabs pageContext={props.pageContext}>
   <PageTabs.TabList>
     <PageTabs.Tab href="/">Usage</PageTabs.Tab>
diff --git a/site/src/docs/components/text-area/tabs.mdx b/site/src/docs/components/text-area/tabs.mdx
index c65877f21a..8920f59ee3 100644
--- a/site/src/docs/components/text-area/tabs.mdx
+++ b/site/src/docs/components/text-area/tabs.mdx
@@ -8,6 +8,7 @@ import LeadParagraph from '../../../components/LeadParagraph';
 import Layout from '../../../components/layout';
 import PageTabs from '../../../components/PageTabs';
 import StatusLabel from '../../../components/StatusLabel';
+import TechTags from '../../../components/TechTags';
 
 # TextArea
 
@@ -19,6 +20,8 @@ import StatusLabel from '../../../components/StatusLabel';
 
 <LeadParagraph>A text area is a specialised version of the text input component. Text areas can be used for multiline answers.</LeadParagraph>
 
+<TechTags componentName="TextArea" />
+
 <PageTabs pageContext={props.pageContext}>
   <PageTabs.TabList>
     <PageTabs.Tab href="/">Usage</PageTabs.Tab>
diff --git a/site/src/docs/components/text-input/tabs.mdx b/site/src/docs/components/text-input/tabs.mdx
index 3f8a33dfc6..3692a6706f 100644
--- a/site/src/docs/components/text-input/tabs.mdx
+++ b/site/src/docs/components/text-input/tabs.mdx
@@ -8,6 +8,7 @@ import LeadParagraph from '../../../components/LeadParagraph';
 import Layout from '../../../components/layout';
 import PageTabs from '../../../components/PageTabs';
 import StatusLabel from '../../../components/StatusLabel';
+import TechTags from '../../../components/TechTags';
 
 # TextInput
 
@@ -19,6 +20,8 @@ import StatusLabel from '../../../components/StatusLabel';
 
 <LeadParagraph>A text field is an input field that the user can interact with and input content and data. The user can also be provided with helper text if needed. Text inputs are used for shorter information while Text areas can be used for multiline answers.</LeadParagraph>
 
+<TechTags componentName="TextInput" />
+
 <PageTabs pageContext={props.pageContext}>
   <PageTabs.TabList>
     <PageTabs.Tab href="/">Usage</PageTabs.Tab>
diff --git a/site/src/docs/components/time-input/tabs.mdx b/site/src/docs/components/time-input/tabs.mdx
index 7efafaa159..fc4fc4e5f6 100644
--- a/site/src/docs/components/time-input/tabs.mdx
+++ b/site/src/docs/components/time-input/tabs.mdx
@@ -8,6 +8,7 @@ import LeadParagraph from '../../../components/LeadParagraph';
 import Layout from '../../../components/layout';
 import PageTabs from '../../../components/PageTabs';
 import StatusLabel from '../../../components/StatusLabel';
+import TechTags from '../../../components/TechTags';
 
 # TimeInput
 
@@ -19,6 +20,8 @@ import StatusLabel from '../../../components/StatusLabel';
 
 <LeadParagraph>  A time input helps the user select a specific time.</LeadParagraph>
 
+<TechTags componentName="TimeInput" />
+
 <PageTabs pageContext={props.pageContext}>
   <PageTabs.TabList>
     <PageTabs.Tab href="/">Usage</PageTabs.Tab>
diff --git a/site/src/docs/components/toggle-button/tabs.mdx b/site/src/docs/components/toggle-button/tabs.mdx
index 7ef2781c09..be6c721a18 100644
--- a/site/src/docs/components/toggle-button/tabs.mdx
+++ b/site/src/docs/components/toggle-button/tabs.mdx
@@ -8,6 +8,7 @@ import LeadParagraph from '../../../components/LeadParagraph';
 import Layout from '../../../components/layout';
 import PageTabs from '../../../components/PageTabs';
 import StatusLabel from '../../../components/StatusLabel';
+import TechTags from '../../../components/TechTags';
 
 # ToggleButton
 
@@ -19,6 +20,8 @@ import StatusLabel from '../../../components/StatusLabel';
 
 <LeadParagraph>Toggle button allows the user to switch between two distinct states such as "On" and "Off".</LeadParagraph>
 
+<TechTags componentName="ToggleButton" />
+
 <PageTabs pageContext={props.pageContext}>
   <PageTabs.TabList>
     <PageTabs.Tab href="/">Usage</PageTabs.Tab>
diff --git a/site/src/docs/components/tooltip/tabs.mdx b/site/src/docs/components/tooltip/tabs.mdx
index a63d160996..dac11affb6 100644
--- a/site/src/docs/components/tooltip/tabs.mdx
+++ b/site/src/docs/components/tooltip/tabs.mdx
@@ -8,6 +8,7 @@ import LeadParagraph from '../../../components/LeadParagraph';
 import Layout from '../../../components/layout';
 import PageTabs from '../../../components/PageTabs';
 import StatusLabel from '../../../components/StatusLabel';
+import TechTags from '../../../components/TechTags';
 
 # Tooltip
 
@@ -19,6 +20,8 @@ import StatusLabel from '../../../components/StatusLabel';
 
 <LeadParagraph>Tooltips are used to present context or background information to the user.</LeadParagraph>
 
+<TechTags componentName="Tooltip" />
+
 <PageTabs pageContext={props.pageContext}>
   <PageTabs.TabList>
     <PageTabs.Tab href="/">Usage</PageTabs.Tab>