diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml
index 83730fe9f4e..4f5d303ceee 100644
--- a/pnpm-lock.yaml
+++ b/pnpm-lock.yaml
@@ -821,6 +821,9 @@ importers:
       '@tsconfig/ember':
         specifier: ^3.0.10
         version: 3.0.11
+      '@types/ember-cli-fastboot':
+        specifier: ^2.2.6
+        version: 2.2.6
       '@types/qunit':
         specifier: ^2.19.12
         version: 2.19.12
@@ -890,9 +893,6 @@ importers:
       ember-cli-clean-css:
         specifier: ^3.0.0
         version: 3.0.0
-      ember-cli-clipboard:
-        specifier: ^1.2.1
-        version: 1.3.0(@babel/core@7.28.0)(@ember/test-helpers@5.4.0(@babel/core@7.28.0)(@glint/template@1.5.2))(@glint/template@1.5.2)(webpack@5.101.0)
       ember-cli-dependency-checker:
         specifier: ^3.3.3
         version: 3.3.3(ember-cli@6.4.0(babel-core@6.26.3)(handlebars@4.7.8)(underscore@1.13.7))
@@ -959,9 +959,15 @@ importers:
       ember-router-scroll:
         specifier: ^4.1.2
         version: 4.1.2(@babel/core@7.28.0)
+      ember-shiki:
+        specifier: ^0.3.0
+        version: 0.3.0(@babel/core@7.28.0)(ember-source@6.4.0(@glimmer/component@2.0.0)(rsvp@4.8.5))
       ember-source:
         specifier: ~6.4.0
         version: 6.4.0(@glimmer/component@2.0.0)(rsvp@4.8.5)
+      ember-style-modifier:
+        specifier: ^4.4.0
+        version: 4.4.0(@babel/core@7.28.0)(@ember/string@4.0.1)(ember-source@6.4.0(@glimmer/component@2.0.0)(rsvp@4.8.5))
       ember-template-imports:
         specifier: ^4.3.0
         version: 4.3.0
@@ -3580,6 +3586,9 @@ packages:
   '@types/debug@4.1.12':
     resolution: {integrity: sha512-vIChWdVG3LG1SMxEvI/AK+FWJthlrqlTu7fbrlywTkkaONwk/UAGaULXRlf8vkzFBLVm0zkMdCquhL5aOjhXPQ==}
 
+  '@types/ember-cli-fastboot@2.2.6':
+    resolution: {integrity: sha512-zyXMLlIoC28rAlIof9e71RUxb/Ka5JTdlKqGd0QnNF2W3GgPRUQZzr1hK3CJLNJr9N2ecFEM4ew2qduxDynhGg==}
+
   '@types/ember@3.16.14':
     resolution: {integrity: sha512-m3fM87W1J75ri9Uu79hzKimiAhxdAF3dZyzmwGrf4OPPQp3yt2L9uHAkwmMIxstk4F1rBWG/SHJOnvlqif23Rw==}
 
@@ -4082,6 +4091,9 @@ packages:
     resolution: {integrity: sha512-7HSX4QQb4CspciLpVFwyRe79O3xsIZDDLER21kERQ71oaPodF8jL725AgJMFAYbooIqolJoRLuM81SpeUkpkvA==}
     engines: {node: '>=12'}
 
+  ansi-sequence-parser@1.1.3:
+    resolution: {integrity: sha512-+fksAx9eG3Ab6LDnLs3ZqZa8KVJ/jYnX+D4Qe1azX+LFGFAXqynCQLOdLpNYN/l9e7l6hMWwZbrnctqr6eSQSw==}
+
   ansi-styles@2.2.1:
     resolution: {integrity: sha512-kmCevFghRiWM7HB5zTPULl4r9bVFSWjz62MhqizDGUrq2NWuNMQyuv4tHHoKJHs69M/MF64lEcHdYIocrdWQYA==}
     engines: {node: '>=0.10.0'}
@@ -5109,9 +5121,6 @@ packages:
   clipboard-polyfill@4.1.1:
     resolution: {integrity: sha512-nbvNLrcX0zviek5QHLFRAaLrx8y/s8+RF2stH43tuS+kP5XlHMrcD0UGBWq43Hwp6WuuK7KefRMP56S45ibZkA==}
 
-  clipboard@2.0.11:
-    resolution: {integrity: sha512-C+0bbOqkezLIsmWSvlsXS0Q0bmkugu7jcfMIACB+RDEntIzQIkdr148we28AfSloQLRdZlYL/QYyrq05j/3Faw==}
-
   cliui@7.0.4:
     resolution: {integrity: sha512-OcRE68cOsVMXp1Yvonl/fzkQOyjLSu/8bhPDfQt0e0/Eb283TKP20Fs2MqoPsr9SwA595rRCA+QMzYc9nBP+JQ==}
 
@@ -5865,9 +5874,6 @@ packages:
     resolution: {integrity: sha512-ZySD7Nf91aLB0RxL4KGrKHBXl7Eds1DAmEdcoVawXnLD7SDhpNgtuII2aAkg7a7QS41jxPSZ17p4VdGnMHk3MQ==}
     engines: {node: '>=0.4.0'}
 
-  delegate@3.2.0:
-    resolution: {integrity: sha512-IofjkYBZaZivn0V8nnsMJGBr4jVLxHDheKSW88PyxS5QC4Vo9ZbZVvhzlSxY87fVq3STR6r+4cGepyHkcWOQSw==}
-
   delegates@1.0.0:
     resolution: {integrity: sha512-bd2L678uiWATM6m5Z1VzNCErI3jiGzt6HGY8OVICs40JQq/HALfbyNJmp0UDakEY4pMMaN0Ly5om/B1VI/+xfQ==}
 
@@ -6044,10 +6050,6 @@ packages:
     resolution: {integrity: sha512-7140A/4OJuYBlncfxmreZHX5S7FxO/4KX5NswowIrvGZpaLuoeULjBHgiKBWC1OUzsdHST4jwaDufniHEROajg==}
     engines: {node: 12.* || 14.* || >= 16}
 
-  ember-arg-types@1.1.0:
-    resolution: {integrity: sha512-hWpUz0eiNkWzi3FgHW5QU6LyCDyUlTWwuIROHluEKZoa9m6LJVXbb/EVFgIG3FkAib6a5Ie00WvkXEZFXxh3+A==}
-    engines: {node: 14.* || >= 16}
-
   ember-assign-helper@0.5.0:
     resolution: {integrity: sha512-swH7FqmqB5iSeoKlU6X41iqw5HQ+EdBDyFDXmwytTyUd5GRvfGfZUn2SMUUGdyvo5FxXJWqMJ0rBT//EcGC0+Q==}
     peerDependencies:
@@ -6095,12 +6097,6 @@ packages:
     resolution: {integrity: sha512-BbveJCyRvzzkaTH1llLW+MpHe/yzA5zpHOpMIg2vp/3JD9mban9zUm7lphaB0TSpPuMuby9rAhTI8pgXq0ifIA==}
     engines: {node: 16.* || >= 18}
 
-  ember-cli-clipboard@1.3.0:
-    resolution: {integrity: sha512-GTX+zzfxhfGyDgk00PcFIEAT063QrpeB3F2UYrKQYZmJiIFFlyriSRw9LrVcXjhEROCVjrHoOVrhcqCATEDAKw==}
-    engines: {node: 14.* || >= 16}
-    peerDependencies:
-      '@ember/test-helpers': '>= 2.9.3'
-
   ember-cli-dependency-checker@3.3.3:
     resolution: {integrity: sha512-mvp+HrE0M5Zhc2oW8cqs8wdhtqq0CfQXAYzaIstOzHJJn/U01NZEGu3hz7J7zl/+jxZkyygylzcS57QqmPXMuQ==}
     engines: {node: '>= 6'}
@@ -6224,6 +6220,12 @@ packages:
     resolution: {integrity: sha512-BtkjulweiXo9c3yVWrtexw2dTmBrvavD/xixNC6TKOBdrixUwU+6nuOO9dufDWsMxoid7MvtmDpzc9+mE8PdaA==}
     engines: {node: 10.* || >= 12.*}
 
+  ember-concurrency@3.1.1:
+    resolution: {integrity: sha512-doXFYYfy1C7jez+jDDlfahTp03QdjXeSY/W3Zbnx/q3UNJ9g10Shf2d7M/HvWo/TC22eU+6dPLIpqd/6q4pR+Q==}
+    engines: {node: 16.* || >= 18}
+    peerDependencies:
+      ember-source: ^3.28.0 || ^4.0.0 || >=5.0.0
+
   ember-concurrency@4.0.4:
     resolution: {integrity: sha512-Y+PwbFE2r3+ANlT0lTBNokLXTRFLV6lnGkZ8u5tDhND5o2wD1wkh9JdP8KZ8aJ+J0dmhncVGQNi+Dbbtc6xTfg==}
     engines: {node: 16.* || >= 18}
@@ -6274,10 +6276,6 @@ packages:
     resolution: {integrity: sha512-y1osD6g8wV/BlDjuaN6OG5MT0iHY2X/yE38gUj/05uUIMIRfpcwOdWnFQHBiXIhDojvAJQTEF1VOYFIETQMkeQ==}
     engines: {node: 12.* || 14.* || >= 16}
 
-  ember-get-config@2.1.1:
-    resolution: {integrity: sha512-uNmv1cPG/4qsac8oIf5txJ2FZ8p88LEpG4P3dNcjsJS98Y8hd0GPMFwVqpnzI78Lz7VYRGQWY4jnE4qm5R3j4g==}
-    engines: {node: 12.* || 14.* || >= 16}
-
   ember-in-element-polyfill@1.0.1:
     resolution: {integrity: sha512-eHs+7D7PuQr8a1DPqsJTsEyo3FZ1XuH6WEZaEBPDa9s0xLlwByCNKl8hi1EbXOgvgEZNHHi9Rh0vjxyfakrlgg==}
     engines: {node: 10.* || >= 12}
@@ -6382,6 +6380,12 @@ packages:
   ember-set-helper@3.0.1:
     resolution: {integrity: sha512-Ord3CuttDiF88wiNpHNDjf4aFKPnHSkpeK7zFfH9nV7YdDFSJissDCZEg42A0ReWY1WuqWbc2hMl5XkgupdyZQ==}
 
+  ember-shiki@0.3.0:
+    resolution: {integrity: sha512-rX61cltjBtQqxJlWyj61CE/y10wrrzukHACRGPLd4NbNQH2hqrrjT3nBf5uYAOZK6SnEd4eI+QZvpqIXKQyWwA==}
+    engines: {node: 16.* || >= 18}
+    peerDependencies:
+      ember-source: '>= 4.0.0'
+
   ember-source-channel-url@3.0.0:
     resolution: {integrity: sha512-vF/8BraOc66ZxIDo3VuNP7iiDrnXEINclJgSJmqwAAEpg84Zb1DHPI22XTXSDA+E8fW5btPUxu65c3ZXi8AQFA==}
     engines: {node: 10.* || 12.* || >= 14}
@@ -7436,9 +7440,6 @@ packages:
     engines: {node: '>=0.6.0'}
     hasBin: true
 
-  good-listener@1.2.2:
-    resolution: {integrity: sha512-goW1b+d9q/HIwbVYZzZ6SsTr4IgE+WA44A0GmPIQstuOrgsFcT7VEJ48nmr9GaRtNu0XTKacFLGnBPAM6Afouw==}
-
   gopd@1.2.0:
     resolution: {integrity: sha512-ZUKRh6/kUFoAiTAtTYPZJ3hw9wNxx+BIBOijnlG9PnrJsCcSjs1wyyD6vJpaYtgnzDrKYRSqf3OO6Rfa93xsRg==}
     engines: {node: '>= 0.4'}
@@ -8418,6 +8419,9 @@ packages:
     resolution: {integrity: sha512-LeRPlP93Mz6+Klu13OKcnXNLvtH1gbeo/yfThqihAMw7vUBCWWs6jHImpR/tQwzAxJi7F1+bfVJxeHoNCrbZiQ==}
     engines: {node: '>=0.12'}
 
+  jsonc-parser@3.3.1:
+    resolution: {integrity: sha512-HUgH65KyejrUFPvHFPbqOY0rsFip3Bo5wb4ngvdi1EpCYWUQDC5V+Y7mZws+DLkr4M//zQJoanu1SP+87Dv1oQ==}
+
   jsonfile@2.4.0:
     resolution: {integrity: sha512-PKllAqbgLgxHaj8TElYymKCAgrASebJrWpTnEkOaTowt23VKXXN0sUeriJ+eh7y6ufb/CC5ap11pz71/cM0hUw==}
 
@@ -9826,9 +9830,6 @@ packages:
     resolution: {integrity: sha512-NxNv/kLguCA7p3jE8oL2aEBsrJWgAakBpgmgK6lpPWV+WuOmY6r2/zbAVnP+T8bQlA0nzHXSJSJW0Hq7ylaD2Q==}
     engines: {node: '>= 6'}
 
-  prop-types@15.8.1:
-    resolution: {integrity: sha512-oj87CgZICdulUohogVAR7AjlC0327U4el4L6eAvOqCeudMDVU0NThNaV+b9Df4dXgSP1gXMTnPdhfe/2qDH5cg==}
-
   proper-lockfile@4.1.2:
     resolution: {integrity: sha512-TjNPblN4BwAWMXU8s9AEz4JmQxnD1NNL7bNOY/AKUzyamc379FWASUhc/K1pL2noVb+XmZKLL68cjzLsiOAMaA==}
 
@@ -9926,9 +9927,6 @@ packages:
     resolution: {integrity: sha512-y3bGgqKj3QBdxLbLkomlohkvsA8gdAiUQlSBJnBhfn+BPxg4bc62d8TcBW15wavDfgexCgccckhcZvywyQYPOw==}
     hasBin: true
 
-  react-is@16.13.1:
-    resolution: {integrity: sha512-24e6ynE2H+OKt4kqsOvNd8kBpV65zoxbA4BVsEOB3ARVWQki/DHzaUoC5KuON/BiccDaCCTZBuOcfZs70kR8bQ==}
-
   react-is@18.3.1:
     resolution: {integrity: sha512-/LLMVyas0ljjAtoYiPqYiL8VWXzUUdThrmU5+n20DZv+a+ClRoevUzw5JxU+Ieh5/c87ytoTBV9G1FiKfNJdmg==}
 
@@ -10382,9 +10380,6 @@ packages:
     resolution: {integrity: sha512-vfD3pmTzGpufjScBh50YHKzEu2lxBWhVEHsNGoEXmCmn2hKGfeNLYMzCJpe8cD7gqX7TJluOVpBkAequ6dgMmA==}
     engines: {node: '>=4'}
 
-  select@1.1.2:
-    resolution: {integrity: sha512-OwpTSOfy6xSs1+pwcNrv0RBMOzI39Lp3qQKUTPVVPRjCdNa5JH/oPRiqsesIskK8TVgmRiHwO4KXlV2Li9dANA==}
-
   semver@5.7.2:
     resolution: {integrity: sha512-cBznnQ9KjJqU67B52RMC65CMarK2600WFnbkcaiwWq3xy/5haFJlshgnpjovMVJ+Hff49d8GEn0b87C5pDQ10g==}
     hasBin: true
@@ -10461,6 +10456,9 @@ packages:
   shellwords@0.1.1:
     resolution: {integrity: sha512-vFwSUfQvqybiICwZY5+DAWIPLKsWO31Q91JSKl3UYv+K5c2QRPzn0qzec6QPu1Qc9eHYItiP3NdJqNVqetYAww==}
 
+  shiki@0.14.7:
+    resolution: {integrity: sha512-dNPAPrxSc87ua2sKJ3H5dQ/6ZaY8RNnaAqK+t0eG7p0Soi2ydiqbGOTaZCqaYvA/uZYfS1LJnemt3Q+mSfcPCg==}
+
   showdown@2.1.0:
     resolution: {integrity: sha512-/6NVYu4U819R2pUIk79n67SYgJHWCce0a5xTP979WbNp0FL9MN1I1QK662IDU1b6JzKTvmhgI7T7JYIxBi3kMQ==}
     hasBin: true
@@ -11057,9 +11055,6 @@ packages:
     resolution: {integrity: sha512-TIsDdtKo6+XrPtiTm1ssmMngN1sAhyKnTO2kunQWqNPWIVvCm15Wmw4SWInwTVgJ5u/Tr04+8Ei9TNcw4x4ONA==}
     engines: {node: '>=4'}
 
-  tiny-emitter@2.1.0:
-    resolution: {integrity: sha512-NB6Dk1A9xgQPMoGqC5CVXn123gWyte215ONT5Pp5a0yt4nlEoO1ZWeCwpncaekPHXO60i47ihFnZPiRPjRMq4Q==}
-
   tiny-glob@0.2.9:
     resolution: {integrity: sha512-g/55ssRPUjShh+xkfx9UPDXqhckHEsHr4Vd9zX55oSdGZc/MD0m3sferOkwWtp98bv+kcVfEHtRJgBVJzelrzg==}
 
@@ -11537,6 +11532,12 @@ packages:
     resolution: {integrity: sha512-eUt8f1z2N2IEUDBsKaNapkz7jl5QpskN2Y0G01T/ItMxBxw1fJwvtySGB9QMecatne8jFIWJGWI61dWjyTLQsw==}
     hasBin: true
 
+  vscode-oniguruma@1.7.0:
+    resolution: {integrity: sha512-L9WMGRfrjOhgHSdOYgCt/yRMsXzLDJSL7BPrOZt73gU0iWO4mpqzqQzOz5srxqTvMBaR0XZTSrVWo4j55Rc6cA==}
+
+  vscode-textmate@8.0.0:
+    resolution: {integrity: sha512-AFbieoL7a5LMqcnOF04ji+rpXadgOXnZsxQr//r83kLPr7biP7am3g9zbaZIaBGwBRWeSvoMD4mgPdX3e4NWBg==}
+
   vscode-uri@3.1.0:
     resolution: {integrity: sha512-/BpdSx+yCQGnCvecbyXdxHDkuk55/G3xwnC0GqY4gmQ3j+A+g8kzzgB4Nk/SINjqn6+waqw3EgbVF2QKExkRxQ==}
 
@@ -15158,6 +15159,10 @@ snapshots:
     dependencies:
       '@types/ms': 0.7.34
 
+  '@types/ember-cli-fastboot@2.2.6':
+    dependencies:
+      '@types/ember__service': 3.16.9
+
   '@types/ember@3.16.14':
     dependencies:
       '@types/ember__application': 3.16.10
@@ -15811,6 +15816,8 @@ snapshots:
 
   ansi-regex@6.1.0: {}
 
+  ansi-sequence-parser@1.1.3: {}
+
   ansi-styles@2.2.1: {}
 
   ansi-styles@3.2.1:
@@ -17540,12 +17547,6 @@ snapshots:
 
   clipboard-polyfill@4.1.1: {}
 
-  clipboard@2.0.11:
-    dependencies:
-      good-listener: 1.2.2
-      select: 1.1.2
-      tiny-emitter: 2.1.0
-
   cliui@7.0.4:
     dependencies:
       string-width: 4.2.3
@@ -18222,8 +18223,6 @@ snapshots:
 
   delayed-stream@1.0.0: {}
 
-  delegate@3.2.0: {}
-
   delegates@1.0.0: {}
 
   depd@1.1.2: {}
@@ -18422,19 +18421,6 @@ snapshots:
       - '@babel/core'
       - supports-color
 
-  ember-arg-types@1.1.0(@glint/template@1.5.2)(webpack@5.101.0):
-    dependencies:
-      '@embroider/macros': 1.18.1(@glint/template@1.5.2)
-      ember-auto-import: 2.10.0(@glint/template@1.5.2)(webpack@5.101.0)
-      ember-cli-babel: 7.26.11
-      ember-cli-typescript: 5.3.0
-      ember-get-config: 2.1.1(@glint/template@1.5.2)
-      prop-types: 15.8.1
-    transitivePeerDependencies:
-      - '@glint/template'
-      - supports-color
-      - webpack
-
   ember-assign-helper@0.5.0(ember-source@6.4.0(@glimmer/component@2.0.0)(rsvp@4.8.5)):
     dependencies:
       '@embroider/addon-shim': 1.10.0
@@ -18675,23 +18661,6 @@ snapshots:
     transitivePeerDependencies:
       - supports-color
 
-  ember-cli-clipboard@1.3.0(@babel/core@7.28.0)(@ember/test-helpers@5.4.0(@babel/core@7.28.0)(@glint/template@1.5.2))(@glint/template@1.5.2)(webpack@5.101.0):
-    dependencies:
-      '@ember/test-helpers': 5.4.0(@babel/core@7.28.0)(@glint/template@1.5.2)
-      '@embroider/macros': 1.18.1(@glint/template@1.5.2)
-      clipboard: 2.0.11
-      ember-arg-types: 1.1.0(@glint/template@1.5.2)(webpack@5.101.0)
-      ember-auto-import: 2.10.0(@glint/template@1.5.2)(webpack@5.101.0)
-      ember-cli-babel: 7.26.11
-      ember-cli-htmlbars: 6.3.0
-      ember-modifier: 4.2.2(@babel/core@7.28.0)
-      prop-types: 15.8.1
-    transitivePeerDependencies:
-      - '@babel/core'
-      - '@glint/template'
-      - supports-color
-      - webpack
-
   ember-cli-dependency-checker@3.3.3(ember-cli@6.4.0(babel-core@6.26.3)(handlebars@4.7.8)(underscore@1.13.7)):
     dependencies:
       chalk: 2.4.2
@@ -19235,6 +19204,20 @@ snapshots:
       - '@babel/core'
       - supports-color
 
+  ember-concurrency@3.1.1(@babel/core@7.28.0)(ember-source@6.4.0(@glimmer/component@2.0.0)(rsvp@4.8.5)):
+    dependencies:
+      '@babel/helper-plugin-utils': 7.27.1
+      '@babel/types': 7.28.2
+      '@glimmer/tracking': 1.1.2
+      ember-cli-babel: 7.26.11
+      ember-cli-babel-plugin-helpers: 1.1.1
+      ember-cli-htmlbars: 6.3.0
+      ember-compatibility-helpers: 1.2.7(@babel/core@7.28.0)
+      ember-source: 6.4.0(@glimmer/component@2.0.0)(rsvp@4.8.5)
+    transitivePeerDependencies:
+      - '@babel/core'
+      - supports-color
+
   ember-concurrency@4.0.4(@babel/core@7.28.0)(@glint/template@1.5.2):
     dependencies:
       '@babel/helper-module-imports': 7.27.1
@@ -19349,14 +19332,6 @@ snapshots:
     transitivePeerDependencies:
       - supports-color
 
-  ember-get-config@2.1.1(@glint/template@1.5.2):
-    dependencies:
-      '@embroider/macros': 1.18.1(@glint/template@1.5.2)
-      ember-cli-babel: 7.26.11
-    transitivePeerDependencies:
-      - '@glint/template'
-      - supports-color
-
   ember-in-element-polyfill@1.0.1:
     dependencies:
       debug: 4.4.1
@@ -19623,6 +19598,18 @@ snapshots:
       - '@babel/core'
       - supports-color
 
+  ember-shiki@0.3.0(@babel/core@7.28.0)(ember-source@6.4.0(@glimmer/component@2.0.0)(rsvp@4.8.5)):
+    dependencies:
+      '@embroider/addon-shim': 1.10.0
+      ember-concurrency: 3.1.1(@babel/core@7.28.0)(ember-source@6.4.0(@glimmer/component@2.0.0)(rsvp@4.8.5))
+      ember-functions-as-helper-polyfill: 2.1.3(ember-source@6.4.0(@glimmer/component@2.0.0)(rsvp@4.8.5))
+      ember-modifier: 4.2.2(@babel/core@7.28.0)
+      ember-source: 6.4.0(@glimmer/component@2.0.0)(rsvp@4.8.5)
+      shiki: 0.14.7
+    transitivePeerDependencies:
+      - '@babel/core'
+      - supports-color
+
   ember-source-channel-url@3.0.0:
     dependencies:
       node-fetch: 2.7.0
@@ -21228,10 +21215,6 @@ snapshots:
     dependencies:
       minimist: 1.2.8
 
-  good-listener@1.2.2:
-    dependencies:
-      delegate: 3.2.0
-
   gopd@1.2.0: {}
 
   got@9.6.0:
@@ -22504,6 +22487,8 @@ snapshots:
       inflected: 1.1.7
       lodash: 4.17.21
 
+  jsonc-parser@3.3.1: {}
+
   jsonfile@2.4.0:
     optionalDependencies:
       graceful-fs: 4.2.11
@@ -24083,12 +24068,6 @@ snapshots:
       kleur: 3.0.3
       sisteransi: 1.0.5
 
-  prop-types@15.8.1:
-    dependencies:
-      loose-envify: 1.4.0
-      object-assign: 4.1.1
-      react-is: 16.13.1
-
   proper-lockfile@4.1.2:
     dependencies:
       graceful-fs: 4.2.11
@@ -24186,8 +24165,6 @@ snapshots:
       minimist: 1.2.8
       strip-json-comments: 2.0.1
 
-  react-is@16.13.1: {}
-
   react-is@18.3.1: {}
 
   read-pkg-up@3.0.0:
@@ -24791,8 +24768,6 @@ snapshots:
       extend-shallow: 2.0.1
       kind-of: 6.0.3
 
-  select@1.1.2: {}
-
   semver@5.7.2: {}
 
   semver@6.3.1: {}
@@ -24885,6 +24860,13 @@ snapshots:
 
   shellwords@0.1.1: {}
 
+  shiki@0.14.7:
+    dependencies:
+      ansi-sequence-parser: 1.1.3
+      jsonc-parser: 3.3.1
+      vscode-oniguruma: 1.7.0
+      vscode-textmate: 8.0.0
+
   showdown@2.1.0:
     dependencies:
       commander: 9.5.0
@@ -25749,8 +25731,6 @@ snapshots:
 
   time-zone@1.0.0: {}
 
-  tiny-emitter@2.1.0: {}
-
   tiny-glob@0.2.9:
     dependencies:
       globalyzer: 0.1.0
@@ -26283,6 +26263,10 @@ snapshots:
     dependencies:
       vscode-languageserver-protocol: 3.17.3
 
+  vscode-oniguruma@1.7.0: {}
+
+  vscode-textmate@8.0.0: {}
+
   vscode-uri@3.1.0: {}
 
   w3c-hr-time@1.0.2:
diff --git a/website/.prettierignore b/website/.prettierignore
index 6f6775cd3ad..7af6438b891 100644
--- a/website/.prettierignore
+++ b/website/.prettierignore
@@ -14,4 +14,5 @@ ember-cli-update.json
 *.scss
 
 # temporary ignore
-/docs/
+/docs/**/*.md
+/docs/**/*.js
diff --git a/website/app/components/doc/code-group/index.gts b/website/app/components/doc/code-group/index.gts
new file mode 100644
index 00000000000..773bfa25b96
--- /dev/null
+++ b/website/app/components/doc/code-group/index.gts
@@ -0,0 +1,216 @@
+/**
+ * Copyright (c) HashiCorp, Inc.
+ * SPDX-License-Identifier: MPL-2.0
+ */
+import Component from '@glimmer/component';
+import { CodeBlock } from 'ember-shiki';
+import { tracked } from '@glimmer/tracking';
+import { on } from '@ember/modifier';
+import { notEq, eq } from 'ember-truth-helpers';
+import { guidFor } from '@ember/object/internals';
+
+import { HdsIcon } from '@hashicorp/design-system-components/components';
+import type { HdsIconSignature } from '@hashicorp/design-system-components/components/hds/icon/index';
+
+import DynamicTemplate from 'website/components/dynamic-template';
+import docClipboard from 'website/modifiers/doc-clipboard';
+
+interface DocCodeGroupSignature {
+  Args: {
+    filename?: string;
+    hbsSnippet: string;
+    gtsSnippet: string;
+    hidePreview?: boolean;
+  };
+  Blocks: {
+    default: [];
+  };
+  Element: HTMLDivElement;
+}
+
+// Helper to undo code escaping for display
+const unescapeCode = (code: string) => {
+  return code.replace(/\\n/g, '\n');
+};
+
+export default class DocCodeGroup extends Component<DocCodeGroupSignature> {
+  @tracked currentView = 'hbs';
+  @tracked isExpanded = false;
+  @tracked copyStatus = 'idle';
+  @tracked copyTimer: ReturnType<typeof setTimeout> | undefined;
+  @tracked copyIconName: HdsIconSignature['Args']['name'] = 'clipboard-copy';
+  @tracked expandIconName: HdsIconSignature['Args']['name'] = 'unfold-open';
+
+  componentId = guidFor(this);
+
+  get unescapedHbsSnippet() {
+    return unescapeCode(this.args.hbsSnippet);
+  }
+
+  get unescapedGtsSnippet() {
+    return unescapeCode(this.args.gtsSnippet);
+  }
+
+  get gtsSnippet() {
+    if (this.isExpanded) {
+      return this.unescapedGtsSnippet;
+    }
+
+    // When not expanded, show a short GTS-like version of the HBS snippet
+    return this.unescapedHbsSnippet.replace(/::/g, '').trim();
+  }
+
+  get toggleButtonLabel() {
+    return this.isExpanded ? 'Collapse code' : 'Expand code';
+  }
+
+  get language() {
+    if (this.currentView === 'gts' && this.isExpanded) {
+      return 'gts';
+    }
+
+    return 'hbs';
+  }
+
+  get currentViewSnippet() {
+    return this.currentView === 'hbs'
+      ? this.unescapedHbsSnippet
+      : this.gtsSnippet;
+  }
+
+  get copyButtonLabel() {
+    let label;
+    switch (this.copyStatus) {
+      case 'success':
+        label = 'Copied';
+        break;
+      case 'error':
+        label = 'Error';
+        break;
+      default:
+        label = 'Copy';
+        break;
+    }
+    return label;
+  }
+
+  get copyButtonClassNames() {
+    const classNames = ['doc-code-group__copy-button'];
+    if (this.copyStatus === 'success') {
+      classNames.push('doc-code-group__copy-button--status-success');
+    } else if (this.copyStatus === 'error') {
+      classNames.push('doc-code-group__copy-button--status-error');
+    }
+    return classNames.join(' ');
+  }
+
+  handleGtsExpandClick = () => {
+    this.isExpanded = !this.isExpanded;
+    this.expandIconName = this.isExpanded ? 'unfold-close' : 'unfold-open';
+  };
+
+  handleLanguageChange = (event: Event) => {
+    const input = event.target as HTMLInputElement;
+    if (input.checked) {
+      this.currentView = input.value;
+    }
+  };
+
+  onSuccess = () => {
+    this.copyStatus = 'success';
+    this.copyIconName = 'clipboard-checked';
+    this.resetStatusDelayed();
+  };
+
+  onError = () => {
+    this.copyStatus = 'error';
+    this.copyIconName = 'alert-triangle';
+    this.resetStatusDelayed();
+  };
+
+  resetStatusDelayed() {
+    clearTimeout(this.copyTimer);
+    // make it fade back to the default state
+    this.copyTimer = setTimeout(() => {
+      this.copyStatus = 'idle';
+      this.copyIconName = 'clipboard-copy';
+    }, 2000);
+  }
+
+  <template>
+    <div class="doc-code-group">
+      <div class="doc-code-group__action-bar">
+        <fieldset
+          class="doc-code-group__language-picker"
+          aria-label="Code language"
+        >
+          <label class="doc-code-group__language-picker-option">
+            <span>.hbs</span>
+            <input
+              type="radio"
+              class="sr-only"
+              name="language-picker-{{this.componentId}}"
+              value="hbs"
+              checked={{eq this.currentView "hbs"}}
+              {{on "change" this.handleLanguageChange}}
+            />
+          </label>
+          <label class="doc-code-group__language-picker-option">
+            <span>.gts</span>
+            <input
+              type="radio"
+              class="sr-only"
+              name="language-picker-{{this.componentId}}"
+              value="gts"
+              checked={{eq this.currentView "gts"}}
+              {{on "change" this.handleLanguageChange}}
+            />
+          </label>
+        </fieldset>
+        <div class="doc-code-group__secondary-actions">
+          <div class="doc-code-group__copy-button-container">
+            <button
+              type="button"
+              aria-label={{this.copyButtonLabel}}
+              class={{this.copyButtonClassNames}}
+              {{docClipboard
+                text=this.currentViewSnippet
+                onSuccess=this.onSuccess
+                onError=this.onError
+              }}
+            >
+              <HdsIcon @name={{this.copyIconName}} />
+            </button>
+          </div>
+        </div>
+      </div>
+      {{#if (notEq @hidePreview "true")}}
+        <div class="doc-code-group__preview">
+          <DynamicTemplate
+            @templateString={{this.unescapedHbsSnippet}}
+            @componentId={{@filename}}
+          />
+        </div>
+      {{/if}}
+      <div class="doc-code-block__code-snippet-wrapper">
+        {{#if (eq this.currentView "gts")}}
+          <button
+            type="button"
+            class="doc-code-group__expand-button"
+            {{on "click" this.handleGtsExpandClick}}
+            aria-label={{this.toggleButtonLabel}}
+            aria-expanded={{this.isExpanded}}
+          >
+            <HdsIcon @name={{this.expandIconName}} />
+          </button>
+        {{/if}}
+        <CodeBlock
+          @code={{this.currentViewSnippet}}
+          @language={{this.language}}
+          @theme="github-dark"
+          @showCopyButton={{false}}
+        />
+      </div>
+    </div>
+  </template>
+}
diff --git a/website/app/components/doc/copy-button/index.js b/website/app/components/doc/copy-button/index.gts
similarity index 55%
rename from website/app/components/doc/copy-button/index.js
rename to website/app/components/doc/copy-button/index.gts
index d2f5b349abb..c0ea4cc8e02 100644
--- a/website/app/components/doc/copy-button/index.js
+++ b/website/app/components/doc/copy-button/index.gts
@@ -2,15 +2,33 @@
  * Copyright (c) HashiCorp, Inc.
  * SPDX-License-Identifier: MPL-2.0
  */
-
 import Component from '@glimmer/component';
 import { tracked } from '@glimmer/tracking';
-import { action } from '@ember/object';
 
-export default class DocCopyButtonComponent extends Component {
+import { HdsIcon } from '@hashicorp/design-system-components/components';
+import type { HdsIconSignature } from '@hashicorp/design-system-components/components/hds/icon/index';
+
+import docClipboard from 'website/modifiers/doc-clipboard';
+
+interface DocCopyButtonCodeSignature {
+  Args: {
+    type?: 'solid' | 'ghost';
+    textToCopy: string;
+    textToShow?: string;
+    encoded?: boolean;
+    isFullWidth?: boolean;
+    id?: string;
+  };
+  Blocks: {
+    default: [];
+  };
+  Element: HTMLButtonElement;
+}
+
+export default class DocCopyButton extends Component<DocCopyButtonCodeSignature> {
   @tracked status = 'idle';
-  @tracked iconName = 'clipboard-copy';
-  @tracked timer;
+  @tracked iconName: HdsIconSignature['Args']['name'] = 'clipboard-copy';
+  @tracked timer: ReturnType<typeof setTimeout> | undefined;
 
   get type() {
     return this.args.type ?? 'solid'; // options are `solid` or `ghost`
@@ -58,19 +76,17 @@ export default class DocCopyButtonComponent extends Component {
     return this.args.isFullWidth ?? false;
   }
 
-  @action
-  onSuccess() {
+  onSuccess = () => {
     this.status = 'success';
     this.iconName = 'clipboard-checked';
     this.resetStatusDelayed();
-  }
+  };
 
-  @action
-  onError() {
+  onError = () => {
     this.status = 'error';
     this.iconName = 'alert-triangle';
     this.resetStatusDelayed();
-  }
+  };
 
   resetStatusDelayed() {
     clearTimeout(this.timer);
@@ -82,11 +98,38 @@ export default class DocCopyButtonComponent extends Component {
   }
 
   get classNames() {
-    let classes = ['doc-copy-button'];
+    const classes = ['doc-copy-button'];
     classes.push(`doc-copy-button--type-${this.type}`);
     if (this.isFullWidth) {
       classes.push(`doc-copy-button--width-full`);
     }
     return classes.join(' ');
   }
+
+  <template>
+    <button
+      class={{this.classNames}}
+      type="button"
+      {{docClipboard
+        text=@textToCopy
+        onSuccess=this.onSuccess
+        onError=this.onError
+      }}
+    >
+      {{#if this.textToShow}}
+        <span class="doc-copy-button__visible-value">{{this.textToShow}}</span>
+      {{/if}}
+      {{#if this.label}}
+        <span
+          id="copy-label-{{@id}}"
+          class="doc-copy-button__label"
+        >{{this.label}}</span>
+      {{/if}}
+      <HdsIcon
+        class="doc-copy-button__icon"
+        @name={{this.iconName}}
+        @stretched={{true}}
+      />
+    </button>
+  </template>
 }
diff --git a/website/app/components/doc/copy-button/index.hbs b/website/app/components/doc/copy-button/index.hbs
deleted file mode 100644
index a1203142df1..00000000000
--- a/website/app/components/doc/copy-button/index.hbs
+++ /dev/null
@@ -1,20 +0,0 @@
-{{!
-  Copyright (c) HashiCorp, Inc.
-  SPDX-License-Identifier: MPL-2.0
-}}
-
-<CopyButton
-  class={{this.classNames}}
-  @text={{this.textToCopy}}
-  @onSuccess={{this.onSuccess}}
-  @onError={{this.onError}}
-  ...attributes
->
-  {{#if this.textToShow}}
-    <span class="doc-copy-button__visible-value">{{this.textToShow}}</span>
-  {{/if}}
-  {{#if this.label}}
-    <span id="copy-label-{{@id}}" class="doc-copy-button__label">{{this.label}}</span>
-  {{/if}}
-  <Hds::Icon class="doc-copy-button__icon" @name={{this.iconName}} @stretched={{true}} />
-</CopyButton>
\ No newline at end of file
diff --git a/website/app/components/doc/meta-row.gts b/website/app/components/doc/meta-row.gts
index daebbd89886..37181a223db 100644
--- a/website/app/components/doc/meta-row.gts
+++ b/website/app/components/doc/meta-row.gts
@@ -26,6 +26,7 @@ const DocMetaRow: TemplateOnlyComponent<DocMetaRowSignature> = <template>
       {{! when we pass a single value, we have two different use cases to support }}
       {{#if @copyable}}
         <DocCopyButton
+          {{! @glint-expect-error }}
           @textToCopy={{@valueToCopy}}
           @textToShow={{(or @valueToShow @valueToCopy)}}
           @type="ghost"
diff --git a/website/app/components/dynamic-template.js b/website/app/components/dynamic-template.js
index a31cffeac4b..1e4163e78e8 100644
--- a/website/app/components/dynamic-template.js
+++ b/website/app/components/dynamic-template.js
@@ -1,5 +1,5 @@
 import { setComponentTemplate } from '@ember/component';
-import { getOwner } from '@ember/application';
+import { getOwner } from '@ember/owner';
 import { compileTemplate } from '@ember/template-compilation';
 import { importSync } from '@embroider/macros';
 import Component from '@glimmer/component';
diff --git a/website/app/modifiers/doc-clipboard.ts b/website/app/modifiers/doc-clipboard.ts
new file mode 100644
index 00000000000..938a37359c1
--- /dev/null
+++ b/website/app/modifiers/doc-clipboard.ts
@@ -0,0 +1,112 @@
+/**
+ * Copyright (c) HashiCorp, Inc.
+ * SPDX-License-Identifier: MPL-2.0
+ */
+
+import { modifier } from 'ember-modifier';
+import { assert } from '@ember/debug';
+
+type TextToCopy = string | number | bigint;
+
+export interface DocClipboardModifierSignature {
+  Element: HTMLElement;
+  Args: {
+    Named: {
+      text?: TextToCopy;
+      // eslint-disable-next-line @typescript-eslint/no-explicit-any
+      onSuccess?: (...args: any[]) => void;
+      // eslint-disable-next-line @typescript-eslint/no-explicit-any
+      onError?: (...args: any[]) => void;
+    };
+  };
+}
+
+export const getTextToCopy = (text: TextToCopy): string => {
+  let textToCopy: string = '';
+
+  if (typeof text === 'string') {
+    textToCopy = text;
+  } else if (
+    // context: https://github.com/hashicorp/design-system/pull/1564
+    typeof text === 'number' ||
+    typeof text === 'bigint'
+  ) {
+    textToCopy = text.toString();
+  } else {
+    assert(
+      `\`hds-clipboard\` modifier - \`text\` argument must be a string or number - provided: ${typeof text}`,
+    );
+  }
+
+  return textToCopy;
+};
+
+export const writeTextToClipboard = async (
+  textToCopy: string,
+): Promise<boolean> => {
+  // finally copy the text to the clipboard using the Clipboard API
+  // https://developer.mozilla.org/en-US/docs/Web/API/Clipboard_API
+  try {
+    // notice: the "clipboard-write" permission is granted automatically to pages when they are in the active tab
+    // https://developer.mozilla.org/en-US/docs/Web/API/Clipboard/write
+    await navigator.clipboard.writeText(textToCopy);
+    // DEBUG uncomment this for easy debugging
+    // console.log('success', textToCopy);
+    return true;
+  } catch {
+    return false;
+  }
+};
+
+export const copyToClipboard = async (text?: TextToCopy): Promise<boolean> => {
+  let textToCopy: string = '';
+
+  if (text !== undefined) {
+    textToCopy = getTextToCopy(text);
+  } else {
+    assert('`doc-clipboard` modifier - `text` argument is required');
+  }
+  const success = await writeTextToClipboard(textToCopy);
+  return success;
+};
+
+// Notice: we use a function-based modifier here instead of a class-based one
+// because it's quite simple in its logic, and doesn't require injecting services
+// see: https://github.com/ember-modifier/ember-modifier#function-based-modifiers
+
+export default modifier<DocClipboardModifierSignature>(
+  (element, _positional, named): (() => void) => {
+    assert(
+      '`doc-clipboard` modifier - the modifier must be applied to an element',
+      element,
+    );
+
+    const { text, onSuccess, onError } = named;
+
+    const onClick = async (event: MouseEvent): Promise<void> => {
+      const trigger = event.currentTarget;
+      const success = await copyToClipboard(text);
+
+      // fire the `onSuccess/onError` callbacks (if provided)
+      if (success) {
+        if (typeof onSuccess === 'function') {
+          onSuccess({ trigger, text });
+        }
+      } else {
+        if (typeof onError === 'function') {
+          onError({ trigger, text });
+        }
+      }
+    };
+
+    // add the "onClick" event listener to the element
+    // eslint-disable-next-line @typescript-eslint/no-misused-promises
+    element.addEventListener('click', onClick);
+
+    // this (teardown) function is run when the element is removed
+    return (): void => {
+      // eslint-disable-next-line @typescript-eslint/no-misused-promises
+      element.removeEventListener('click', onClick);
+    };
+  },
+);
diff --git a/website/app/shared/showdown-extensions/content-blocks.js b/website/app/shared/showdown-extensions/content-blocks.js
index 642006c9af8..65993b30281 100644
--- a/website/app/shared/showdown-extensions/content-blocks.js
+++ b/website/app/shared/showdown-extensions/content-blocks.js
@@ -19,14 +19,14 @@ export const contentBlocks = function () {
         // see: https://github.com/showdownjs/showdown/blob/master/src/subParsers/makehtml/hashHTMLBlocks.js#L93-L95
         return `\n<?php start="content-block" type="${type.toLowerCase()}" ?>\n${content}\n<?php end="content-block" type="${type.toLowerCase()}" ?>\n`;
       });
+
       // console.log('langExtension2 text', '\n', text, '\n\n');
       return text;
     },
   };
   var outputExtension = {
     type: 'output',
-    filter: function (text) {
-      // console.log('outputExtension1 text', '\n', text, '\n\n');
+    filter: (text) => {
       // https://regex101.com/r/DebuYI/1
       const outputRegex = new RegExp(
         /<\?php start="content-block" type="(.*?)" \?>\n?/,
@@ -35,20 +35,38 @@ export const contentBlocks = function () {
       text = text.replace(outputRegex, function (_match, type) {
         if (type === 'do' || type === 'dont') {
           return `<Doc::DoDont @type="${type}">\n`;
-        } else {
+        } else if (type !== 'demo') {
           return `<Doc::Banner @type="${type}">\n`;
         }
       });
+
       text = text.replace(
         /\n?<\?php end="content-block" type="(.*?)" \?>/g,
         function (_match, type) {
           if (type === 'do' || type === 'dont') {
             return '</Doc::DoDont>';
-          } else {
+          } else if (type !== 'demo') {
             return '</Doc::Banner>';
           }
         },
       );
+
+      const demoRegex = new RegExp(
+        /<\?php start="demo-block" filename="(.*?)" hbs="(.*?)" gts="(.*?)" hidePreview="(.*?)" \?>\n?/,
+        'g',
+      );
+
+      text = text.replace(
+        demoRegex,
+        function (_match, filename, hbs, gts, hidePreview) {
+          return `<Doc::CodeGroup @filename="${filename}" @hbsSnippet="${hbs}" @gtsSnippet="${gts}" @hidePreview="${hidePreview}">\n`;
+        },
+      );
+
+      text = text.replace(/\n?<\?php end="demo-block"\s*\?>/g, function () {
+        return '</Doc::CodeGroup>\n';
+      });
+
       // console.log('outputExtension2 text', '\n', text, '\n\n');
       return text;
     },
diff --git a/website/app/styles/doc-components/code-block.scss b/website/app/styles/doc-components/code-block.scss
index 183075356dd..77b98ded966 100644
--- a/website/app/styles/doc-components/code-block.scss
+++ b/website/app/styles/doc-components/code-block.scss
@@ -39,6 +39,7 @@
   .doc-copy-button {
     position: absolute;
     right: 13px;
+    z-index: 1;
     margin-top: 13px;
   }
 }
diff --git a/website/app/styles/doc-components/code-group.scss b/website/app/styles/doc-components/code-group.scss
new file mode 100644
index 00000000000..dc9a0f161d5
--- /dev/null
+++ b/website/app/styles/doc-components/code-group.scss
@@ -0,0 +1,119 @@
+/**
+ * Copyright (c) HashiCorp, Inc.
+ * SPDX-License-Identifier: MPL-2.0
+ */
+
+@use "../breakpoints" as breakpoint;
+@use "../typography/mixins" as *;
+
+:root {
+  --ember-shiki-border-radius: 0px;
+}
+
+.doc-code-group {
+  overflow: hidden;
+  border-radius: 4px;
+}
+
+.doc-code-group__action-bar {
+  display: flex;
+  flex-direction: row;
+  justify-content: space-between;
+  border: 1px solid var(--doc-color-gray-400);
+  border-bottom: none;
+  border-top-left-radius: inherit;
+  border-top-right-radius: inherit;
+
+  .doc-code-group__language-picker {
+    display: flex;
+    gap: 8px;
+    align-items: center;
+    margin: 0;
+    padding: 6px;
+    border: none;
+    border-right: 1px solid var(--doc-color-gray-400);
+
+    .doc-code-group__language-picker-option {
+      @include doc-font-style-code();
+
+      color: var(--doc-color-feedback-information-100);
+      border-radius: 4px;
+      cursor: pointer;
+      padding-block: 4px;
+      padding-inline: 12px;
+
+ &:has(input:checked) {
+  background-color: var(--doc-color-feedback-information-400);
+}
+
+    &:hover {
+      background-color: var(--doc-color-feedback-information-400)
+    }
+
+    &:active {
+      background-color: var(--doc-color-feedback-information-300)
+    }
+    }
+  }
+
+  .doc-code-group__copy-button-container {
+    padding: 6px;
+    border-left: 1px solid var(--doc-color-gray-400);
+
+    .doc-code-group__copy-button {
+      padding: 8px;
+      background-color: transparent;
+      border: none;
+      border-radius: 4px;
+      cursor: pointer;
+
+      &:hover {
+        background-color: var(--doc-color-gray-600);
+     }
+
+      &.doc-code-group__copy-button--status-success {
+        color: var(--doc-color-feedback-success-100);
+        background-color: var(--doc-color-feedback-success-300);
+      }
+
+      &.doc-code-group__copy-button--status-error {
+        color: var(--doc-color-feedback-critical-100);
+        background-color: var(--doc-color-feedback-critical-300);
+      }
+    }
+  }
+}
+
+.doc-code-group__preview {
+  padding: 16px;
+  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 2 2'%3E%3Cpath d='M1 2V0h1v1H0v1z' fill-opacity='.05'/%3E%3C/svg%3E");
+  // use this to fine tune the size of the checkered pattern
+  background-size: 16px 16px;
+  border: 1px solid var(--doc-color-gray-400);
+  border-bottom: none;
+
+  @include breakpoint.medium () {
+    padding: 24px;
+  }
+
+  @include breakpoint.large () {
+    padding: 32px;
+  }
+}
+
+.doc-code-block__code-snippet-wrapper{
+  position: relative;
+}
+
+.doc-code-group__expand-button {
+  position: absolute;
+  top: 16px;
+  right: 16px;
+  z-index: 1;
+  padding: 8px;
+  color: white;
+  background-color: #313A5C;
+  border: 1px solid #7080BC;
+  border-radius: 4px;
+  cursor: pointer;
+}
diff --git a/website/app/styles/doc-components/index.scss b/website/app/styles/doc-components/index.scss
index 9d647652c22..5e50e4c1162 100644
--- a/website/app/styles/doc-components/index.scss
+++ b/website/app/styles/doc-components/index.scss
@@ -8,6 +8,7 @@
 @use "badge-group";
 @use "banner";
 @use "cards";
+@use "code-group";
 @use "code-block";
 @use "color-card";
 @use "color-swatch";
diff --git a/website/config/environment.js b/website/config/environment.js
index 6b0f741ffb0..5df05058928 100644
--- a/website/config/environment.js
+++ b/website/config/environment.js
@@ -41,6 +41,11 @@ module.exports = function (environment) {
       hostWhitelist: [/^localhost:\d+$/],
     },
 
+    'ember-shiki': {
+      defaultLanguages: ['gjs', 'gts', 'css'],
+      defaultThemes: ['github-dark'],
+    },
+
     'ember-meta': {
       description:
         'The Helios Design System from HashiCorp provides the open source building blocks to design and implement consistent, accessible, and delightful product experiences.',
diff --git a/website/config/fastboot.js b/website/config/fastboot.js
new file mode 100644
index 00000000000..1bf56e89c10
--- /dev/null
+++ b/website/config/fastboot.js
@@ -0,0 +1,23 @@
+module.exports = function () {
+  return {
+    buildSandboxGlobals(defaultGlobals) {
+      return Object.assign({}, defaultGlobals, {
+        fetch: fetch,
+        AbortController,
+        ReadableStream:
+          typeof ReadableStream !== 'undefined'
+            ? ReadableStream
+            : require('node:stream/web').ReadableStream,
+        WritableStream:
+          typeof WritableStream !== 'undefined'
+            ? WritableStream
+            : require('node:stream/web').WritableStream,
+        TransformStream:
+          typeof TransformStream !== 'undefined'
+            ? TransformStream
+            : require('node:stream/web').TransformStream,
+        Headers: typeof Headers !== 'undefined' ? Headers : undefined,
+      });
+    },
+  };
+};
diff --git a/website/docs/components/accordion/partials/code/code-snippets/accordion-contains-interactive-component.gts b/website/docs/components/accordion/partials/code/code-snippets/accordion-contains-interactive-component.gts
new file mode 100644
index 00000000000..bff9acd964d
--- /dev/null
+++ b/website/docs/components/accordion/partials/code/code-snippets/accordion-contains-interactive-component.gts
@@ -0,0 +1,42 @@
+import type { TemplateOnlyComponent } from '@ember/component/template-only';
+
+import {
+  HdsAccordion,
+  HdsButton,
+  HdsForm,
+  HdsFormTextInputField,
+} from '@hashicorp/design-system-components/components';
+import type { HdsAccordionSignature } from '@hashicorp/design-system-components/components/hds/accordion/index';
+
+interface AccordionContainsInteractiveSignature {
+  Element: HdsAccordionSignature['Element'];
+}
+
+const AccordionContainsInteractive: TemplateOnlyComponent<AccordionContainsInteractiveSignature> =
+  <template>
+    <HdsAccordion ...attributes as |A|>
+      <A.Item @containsInteractive={{true}} @isOpen={{true}}>
+        <:toggle>
+          <div class="hds-typography-body-300">
+            Text inside a nested div with
+            <a href="https://www.hashicorp.com/">a link</a>.
+          </div>
+        </:toggle>
+        <:content>
+          <HdsForm as |FORM|>
+            <FORM.Section>
+              <HdsFormTextInputField @type="email" as |F|>
+                <F.Label>Email</F.Label>
+              </HdsFormTextInputField>
+            </FORM.Section>
+
+            <FORM.Footer>
+              <HdsButton @text="Submit" />
+            </FORM.Footer>
+          </HdsForm>
+        </:content>
+      </A.Item>
+    </HdsAccordion>
+  </template>;
+
+export default AccordionContainsInteractive;
diff --git a/website/docs/components/accordion/partials/code/code-snippets/accordion-contains-interactive.hbs b/website/docs/components/accordion/partials/code/code-snippets/accordion-contains-interactive.hbs
new file mode 100644
index 00000000000..a96b6369e53
--- /dev/null
+++ b/website/docs/components/accordion/partials/code/code-snippets/accordion-contains-interactive.hbs
@@ -0,0 +1,23 @@
+<Hds::Accordion as |A|>
+  <A.Item @containsInteractive={{true}} @isOpen={{true}}>
+    <:toggle>
+      <div class="hds-typography-body-300">
+        Text inside a nested div with
+        <a href="https://www.hashicorp.com/">a link</a>.
+      </div>
+    </:toggle>
+    <:content>
+      <Hds::Form as |FORM|>
+        <FORM.Section>
+          <Hds::Form::TextInput::Field @type="email" as |F|>
+            <F.Label>Email</F.Label>
+          </Hds::Form::TextInput::Field>
+        </FORM.Section>
+
+        <FORM.Footer>
+          <Hds::Button @text="Submit" />
+        </FORM.Footer>
+      </Hds::Form>
+    </:content>
+  </A.Item>
+</Hds::Accordion>
\ No newline at end of file
diff --git a/website/docs/components/accordion/partials/code/code-snippets/accordion-expand-all-component.gts b/website/docs/components/accordion/partials/code/code-snippets/accordion-expand-all-component.gts
new file mode 100644
index 00000000000..226278507e1
--- /dev/null
+++ b/website/docs/components/accordion/partials/code/code-snippets/accordion-expand-all-component.gts
@@ -0,0 +1,98 @@
+import Component from '@glimmer/component';
+import { on } from '@ember/modifier';
+import { tracked } from '@glimmer/tracking';
+import { eq } from 'ember-truth-helpers';
+
+import {
+  HdsAccordion,
+  HdsButton,
+  HdsTextDisplay,
+} from '@hashicorp/design-system-components/components';
+import type { HdsAccordionSignature } from '@hashicorp/design-system-components/components/hds/accordion/index';
+
+interface AccordionExpandAllSignature {
+  Element: HdsAccordionSignature['Element'];
+}
+
+export default class AccordionExpandAll extends Component<AccordionExpandAllSignature> {
+  @tracked accordionState: HdsAccordionSignature['Args']['forceState'] =
+    'close';
+
+  toggleAccordionState = () => {
+    this.accordionState = this.accordionState === 'open' ? 'close' : 'open';
+  };
+
+  <template>
+    <div class="doc-accordion-flex-layout">
+      <HdsTextDisplay @size="300">Examination period</HdsTextDisplay>
+      <HdsButton
+        @text={{if (eq this.accordionState "open") "Collapse all" "Expand all"}}
+        @icon={{if
+          (eq this.accordionState "open")
+          "unfold-close"
+          "unfold-open"
+        }}
+        @color="tertiary"
+        @size="small"
+        {{on "click" this.toggleAccordionState}}
+      />
+    </div>
+    <HdsAccordion @forceState={{this.accordionState}} ...attributes as |A|>
+      <A.Item>
+        <:toggle>Exam experience</:toggle>
+        <:content>
+          All certification exams are taken online with a live proctor,
+          accommodating all locations and time zones. Online proctoring provides
+          the same benefits of a physical test center while being more
+          accessible to exam-takers. The live proctor verifies your identity,
+          walks you through rules and procedures, and watches you take the exam.
+          Learn more ways to prepare for an online proctored exam in our
+          Knowledgebase.
+        </:content>
+      </A.Item>
+      <A.Item>
+        <:toggle>Requirements for attending an exam</:toggle>
+        <:content>
+          Before you register for an exam, review the Exam-taker Handbook to
+          learn the requirements and policies for taking exams. It is your
+          responsibility to know and abide by our program rules to successfully
+          enter your exam appointment, failure to do so may result in forfeiture
+          of appointment fees.
+        </:content>
+      </A.Item>
+      <A.Item>
+        <:toggle>Your badge and certificate</:toggle>
+        <:content>
+          HashiCorp has partnered with Credly to offer you a digital badge and
+          downloadable certificate upon passing a certification exam. There is
+          no fee for this service and acceptance is up to you. Digital badges
+          can be used in email signatures or digital resumes, and on social
+          media sites such as LinkedIn, Facebook, and Twitter. Badges link back
+          to a real-time verification feature that describes your
+          qualifications.
+        </:content>
+      </A.Item>
+      <A.Item>
+        <:toggle>Renewing your certification</:toggle>
+        <:content>
+          All HashiCorp Certifications are valid for two years, and you will be
+          eligible to renew your certification starting 18 months after you
+          earned your certification. To recertify, you will need to pass an exam
+          at the same level or higher for the certification you are looking to
+          renew. There are several pathways to recertification available, and
+          you can learn more on our Knowledge Base or by heading to each exam’s
+          homepage.
+        </:content>
+      </A.Item>
+      <A.Item>
+        <:toggle>Finding certified practitioners</:toggle>
+        <:content>
+          HashiCorp publishes all earned badges to a publicly searchable
+          directory on Credly. Here, you can filter and find people who hold
+          HashiCorp Cloud Engineer certifications. Learn how to opt-out of this
+          service in our Knowledgebase.
+        </:content>
+      </A.Item>
+    </HdsAccordion>
+  </template>
+}
diff --git a/website/docs/components/accordion/partials/code/code-snippets/accordion-expand-all.hbs b/website/docs/components/accordion/partials/code/code-snippets/accordion-expand-all.hbs
new file mode 100644
index 00000000000..0b0582c8953
--- /dev/null
+++ b/website/docs/components/accordion/partials/code/code-snippets/accordion-expand-all.hbs
@@ -0,0 +1,55 @@
+<div class="doc-accordion-flex-layout">
+  <Hds::Text::Display @size="300">Examination period</Hds::Text::Display>
+  <Hds::Button
+    @text={{if (eq this.accordionState "open") "Collapse all" "Expand all"}}
+    @icon={{if (eq this.accordionState "open") "unfold-close" "unfold-open"}}
+    @color="tertiary"
+    @size="small"
+    {{on "click" this.toggleAccordionState}}
+  />
+</div>
+<Hds::Accordion @forceState={{this.accordionState}} as |A|>
+  <A.Item>
+    <:toggle>Exam experience</:toggle>
+    <:content>
+      All certification exams are taken online with a live proctor, accommodating all locations and time zones. Online
+      proctoring provides the same benefits of a physical test center while being more accessible to exam-takers. The
+      live proctor verifies your identity, walks you through rules and procedures, and watches you take the exam. Learn
+      more ways to prepare for an online proctored exam in our Knowledgebase.
+    </:content>
+  </A.Item>
+  <A.Item>
+    <:toggle>Requirements for attending an exam</:toggle>
+    <:content>
+      Before you register for an exam, review the Exam-taker Handbook to learn the requirements and policies for taking
+      exams. It is your responsibility to know and abide by our program rules to successfully enter your exam
+      appointment, failure to do so may result in forfeiture of appointment fees.
+    </:content>
+  </A.Item>
+  <A.Item>
+    <:toggle>Your badge and certificate</:toggle>
+    <:content>
+      HashiCorp has partnered with Credly to offer you a digital badge and downloadable certificate upon passing a
+      certification exam. There is no fee for this service and acceptance is up to you. Digital badges can be used in
+      email signatures or digital resumes, and on social media sites such as LinkedIn, Facebook, and Twitter. Badges
+      link back to a real-time verification feature that describes your qualifications.
+    </:content>
+  </A.Item>
+  <A.Item>
+    <:toggle>Renewing your certification</:toggle>
+    <:content>
+      All HashiCorp Certifications are valid for two years, and you will be eligible to renew your certification
+      starting 18 months after you earned your certification. To recertify, you will need to pass an exam at the same
+      level or higher for the certification you are looking to renew. There are several pathways to recertification
+      available, and you can learn more on our Knowledge Base or by heading to each exam’s homepage.
+    </:content>
+  </A.Item>
+  <A.Item>
+    <:toggle>Finding certified practitioners</:toggle>
+    <:content>
+      HashiCorp publishes all earned badges to a publicly searchable directory on Credly. Here, you can filter and find
+      people who hold HashiCorp Cloud Engineer certifications. Learn how to opt-out of this service in our
+      Knowledgebase.
+    </:content>
+  </A.Item>
+</Hds::Accordion>
\ No newline at end of file
diff --git a/website/docs/components/accordion/partials/code/code-snippets/accordion-expand-all.js b/website/docs/components/accordion/partials/code/code-snippets/accordion-expand-all.js
new file mode 100644
index 00000000000..ad6335f5aa7
--- /dev/null
+++ b/website/docs/components/accordion/partials/code/code-snippets/accordion-expand-all.js
@@ -0,0 +1,17 @@
+/**
+ * Copyright (c) HashiCorp, Inc.
+ * SPDX-License-Identifier: MPL-2.0
+ */
+
+import Component from '@glimmer/component';
+import { action } from '@ember/object';
+import { tracked } from '@glimmer/tracking';
+
+export default class AccordionExpandAll extends Component {
+@tracked accordionState = 'close';
+
+  @action
+  toggleAccordionState() {
+    this.accordionState = this.accordionState === 'open' ? 'close' : 'open';
+  }
+}
diff --git a/website/docs/components/accordion/partials/code/code-snippets/accordion-html-content-component.gts b/website/docs/components/accordion/partials/code/code-snippets/accordion-html-content-component.gts
new file mode 100644
index 00000000000..c53f217c28b
--- /dev/null
+++ b/website/docs/components/accordion/partials/code/code-snippets/accordion-html-content-component.gts
@@ -0,0 +1,58 @@
+import type { TemplateOnlyComponent } from '@ember/component/template-only';
+
+import {
+  HdsAccordion,
+  HdsAlert,
+  HdsTable,
+} from '@hashicorp/design-system-components/components';
+import type { HdsAccordionSignature } from '@hashicorp/design-system-components/components/hds/accordion/index';
+
+interface AccordionHtmlContentSignature {
+  Element: HdsAccordionSignature['Element'];
+}
+
+const AccordionHtmlContent: TemplateOnlyComponent<AccordionHtmlContentSignature> =
+  <template>
+    <HdsAccordion ...attributes as |A|>
+      <A.Item @isOpen={{true}}>
+        <:toggle>
+          <HdsAlert @type="compact" @color="success" as |A|>
+            <A.Title>Title</A.Title>
+            <A.Description>Plan finished
+              <small>22 days ago</small></A.Description>
+          </HdsAlert>
+        </:toggle>
+        <:content>
+          <p class="hds-typography-body-200">
+            <strong>Queued:</strong>
+            9 days ago >
+            <strong>Finished:</strong>
+            9 days ago
+          </p>
+          <HdsTable @caption="Example table">
+            <:head as |H|>
+              <H.Tr>
+                <H.Th>Name</H.Th>
+                <H.Th>Type</H.Th>
+                <H.Th>Value</H.Th>
+              </H.Tr>
+            </:head>
+            <:body as |B|>
+              <B.Tr>
+                <B.Td>Cell one A</B.Td>
+                <B.Td>Cell two A</B.Td>
+                <B.Td>Cell three A</B.Td>
+              </B.Tr>
+              <B.Tr>
+                <B.Td>Cell one B</B.Td>
+                <B.Td>Cell two B</B.Td>
+                <B.Td>Cell three B</B.Td>
+              </B.Tr>
+            </:body>
+          </HdsTable>
+        </:content>
+      </A.Item>
+    </HdsAccordion>
+  </template>;
+
+export default AccordionHtmlContent;
diff --git a/website/docs/components/accordion/partials/code/code-snippets/accordion-html-content.hbs b/website/docs/components/accordion/partials/code/code-snippets/accordion-html-content.hbs
new file mode 100644
index 00000000000..519a4b33d2a
--- /dev/null
+++ b/website/docs/components/accordion/partials/code/code-snippets/accordion-html-content.hbs
@@ -0,0 +1,39 @@
+<Hds::Accordion as |A|>
+  <A.Item @isOpen={{true}}>
+    <:toggle>
+      <Hds::Alert @type="compact" @color="success" as |A|>
+        <A.Title>Title</A.Title>
+        <A.Description>Plan finished <small>22 days ago</small></A.Description>
+      </Hds::Alert>
+    </:toggle>
+    <:content>
+      <p class="hds-typography-body-200">
+        <strong>Queued:</strong>
+        9 days ago >
+        <strong>Finished:</strong>
+        9 days ago
+      </p>
+      <Hds::Table @caption="Example table">
+        <:head as |H|>
+          <H.Tr>
+            <H.Th>Name</H.Th>
+            <H.Th>Type</H.Th>
+            <H.Th>Value</H.Th>
+          </H.Tr>
+        </:head>
+        <:body as |B|>
+          <B.Tr>
+            <B.Td>Cell one A</B.Td>
+            <B.Td>Cell two A</B.Td>
+            <B.Td>Cell three A</B.Td>
+          </B.Tr>
+          <B.Tr>
+            <B.Td>Cell one B</B.Td>
+            <B.Td>Cell two B</B.Td>
+            <B.Td>Cell three B</B.Td>
+          </B.Tr>
+        </:body>
+      </Hds::Table>
+    </:content>
+  </A.Item>
+</Hds::Accordion>
\ No newline at end of file
diff --git a/website/docs/components/accordion/partials/code/code-snippets/accordion-nested-component.gts b/website/docs/components/accordion/partials/code/code-snippets/accordion-nested-component.gts
new file mode 100644
index 00000000000..3fc3c9f7414
--- /dev/null
+++ b/website/docs/components/accordion/partials/code/code-snippets/accordion-nested-component.gts
@@ -0,0 +1,31 @@
+import type { TemplateOnlyComponent } from '@ember/component/template-only';
+
+import { HdsAccordion } from '@hashicorp/design-system-components/components';
+import type { HdsAccordionSignature } from '@hashicorp/design-system-components/components/hds/accordion/index';
+
+interface AccordionNestedSignature {
+  Element: HdsAccordionSignature['Element'];
+}
+
+const AccordionNested: TemplateOnlyComponent<AccordionNestedSignature> =
+  <template>
+    <HdsAccordion @type="flush" as |A|>
+      <A.Item @isOpen={{true}}>
+        <:toggle>Item one</:toggle>
+        <:content>
+          <HdsAccordion @type="flush" as |AA|>
+            <AA.Item>
+              <:toggle>Nested item one</:toggle>
+              <:content>Nested content one</:content>
+            </AA.Item>
+            <AA.Item>
+              <:toggle>Nested item two</:toggle>
+              <:content>Nested content two</:content>
+            </AA.Item>
+          </HdsAccordion>
+        </:content>
+      </A.Item>
+    </HdsAccordion>
+  </template>;
+
+export default AccordionNested;
diff --git a/website/docs/components/accordion/partials/code/code-snippets/accordion-nested.hbs b/website/docs/components/accordion/partials/code/code-snippets/accordion-nested.hbs
new file mode 100644
index 00000000000..3735ed85fd2
--- /dev/null
+++ b/website/docs/components/accordion/partials/code/code-snippets/accordion-nested.hbs
@@ -0,0 +1,17 @@
+<Hds::Accordion @type="flush" as |A|>
+  <A.Item @isOpen={{true}}>
+    <:toggle>Item one</:toggle>
+    <:content>
+      <Hds::Accordion @type="flush" as |AA|>
+        <AA.Item>
+          <:toggle>Nested item one</:toggle>
+          <:content>Nested content one</:content>
+        </AA.Item>
+        <AA.Item>
+          <:toggle>Nested item two</:toggle>
+          <:content>Nested content two</:content>
+        </AA.Item>
+      </Hds::Accordion>
+    </:content>
+  </A.Item>
+</Hds::Accordion>
\ No newline at end of file
diff --git a/website/docs/components/accordion/partials/code/code-snippets/accordion-persist-state-component.gts b/website/docs/components/accordion/partials/code/code-snippets/accordion-persist-state-component.gts
new file mode 100644
index 00000000000..52269b79447
--- /dev/null
+++ b/website/docs/components/accordion/partials/code/code-snippets/accordion-persist-state-component.gts
@@ -0,0 +1,59 @@
+import Component from '@glimmer/component';
+import { tracked } from '@glimmer/tracking';
+import { service } from '@ember/service';
+import type Owner from '@ember/owner';
+import FastBootService from 'ember-cli-fastboot/services/fastboot';
+
+import { HdsAccordion } from '@hashicorp/design-system-components/components';
+import type { HdsAccordionSignature } from '@hashicorp/design-system-components/components/hds/accordion/index';
+
+interface AccordionPersistStateSignature {
+  Element: HdsAccordionSignature['Element'];
+}
+
+const STORAGE_KEY = 'website:accordion:item-2-state';
+
+export default class AccordionPersistState extends Component<AccordionPersistStateSignature> {
+  @tracked itemState: HdsAccordionSignature['Args']['forceState'];
+  @service declare fastboot: FastBootService;
+
+  constructor(owner: Owner, args: Record<string, never>) {
+    super(owner, args);
+    if (!this.fastboot.isFastBoot) {
+      this.itemState = (sessionStorage.getItem(STORAGE_KEY) ??
+        'open') as HdsAccordionSignature['Args']['forceState'];
+    }
+  }
+
+  onItemToggle = () => {
+    this.itemState = this.itemState === 'open' ? 'close' : 'open';
+    sessionStorage.setItem(STORAGE_KEY, this.itemState);
+  };
+
+  <template>
+    <HdsAccordion as |A|>
+      <A.Item>
+        <:toggle>Item one</:toggle>
+        <:content>
+          Additional content for item one
+        </:content>
+      </A.Item>
+      <A.Item
+        @onClickToggle={{this.onItemToggle}}
+        @forceState={{this.itemState}}
+      >
+        <:toggle>Item two</:toggle>
+        <:content>
+          Item open on page load. Click to close then refresh the window. The
+          Item will remember its state and remain closed.
+        </:content>
+      </A.Item>
+      <A.Item>
+        <:toggle>Item three</:toggle>
+        <:content>
+          Additional content for item three
+        </:content>
+      </A.Item>
+    </HdsAccordion>
+  </template>
+}
diff --git a/website/docs/components/accordion/partials/code/code-snippets/accordion-persist-state.hbs b/website/docs/components/accordion/partials/code/code-snippets/accordion-persist-state.hbs
new file mode 100644
index 00000000000..16a4ee1ef7b
--- /dev/null
+++ b/website/docs/components/accordion/partials/code/code-snippets/accordion-persist-state.hbs
@@ -0,0 +1,21 @@
+<Hds::Accordion as |A|>
+  <A.Item>
+    <:toggle>Item one</:toggle>
+    <:content>
+      Additional content for item one
+    </:content>
+  </A.Item>
+  <A.Item @onClickToggle={{this.onItemToggle}} @forceState={{this.itemState}}>
+    <:toggle>Item two</:toggle>
+    <:content>
+      Item open on page load. Click to close then refresh the window. The Item will remember its state and remain
+      closed.
+    </:content>
+  </A.Item>
+  <A.Item>
+    <:toggle>Item three</:toggle>
+    <:content>
+      Additional content for item three
+    </:content>
+  </A.Item>
+</Hds::Accordion>
\ No newline at end of file
diff --git a/website/docs/components/accordion/partials/code/code-snippets/accordion-persist-state.js b/website/docs/components/accordion/partials/code/code-snippets/accordion-persist-state.js
new file mode 100644
index 00000000000..ce3abc8de94
--- /dev/null
+++ b/website/docs/components/accordion/partials/code/code-snippets/accordion-persist-state.js
@@ -0,0 +1,29 @@
+/**
+ * Copyright (c) HashiCorp, Inc.
+ * SPDX-License-Identifier: MPL-2.0
+ */
+
+import Component from '@glimmer/component';
+import { action } from '@ember/object';
+import { tracked } from '@glimmer/tracking';
+import { service } from '@ember/service';
+
+const STORAGE_KEY = 'website:accordion:item-2-state';
+
+export default class AccordionPersistState extends Component {
+  @tracked itemState;
+  @service fastboot;
+
+  constructor(owner, args) {
+    super(owner, args);
+    if (!this.fastboot.isFastBoot) {
+      this.itemState = sessionStorage.getItem(STORAGE_KEY) ?? 'open';
+    }
+  }
+
+    @action
+    onItemToggle() {
+      this.itemState = this.itemState === 'open' ? 'close' : 'open';
+      sessionStorage.setItem(STORAGE_KEY, this.itemState);
+    }
+}
diff --git a/website/docs/components/accordion/partials/code/code-snippets/accordion-size-component.gts b/website/docs/components/accordion/partials/code/code-snippets/accordion-size-component.gts
new file mode 100644
index 00000000000..d3efef0e7a1
--- /dev/null
+++ b/website/docs/components/accordion/partials/code/code-snippets/accordion-size-component.gts
@@ -0,0 +1,27 @@
+import type { TemplateOnlyComponent } from '@ember/component/template-only';
+
+import { HdsAccordion } from '@hashicorp/design-system-components/components';
+import type { HdsAccordionSignature } from '@hashicorp/design-system-components/components/hds/accordion/index';
+
+interface AccordionSizeSignature {
+  Element: HdsAccordionSignature['Element'];
+}
+
+const AccordionSize: TemplateOnlyComponent<AccordionSizeSignature> = <template>
+  <HdsAccordion @size="large" ...attributes as |A|>
+    <A.Item>
+      <:toggle>Item one</:toggle>
+      <:content>
+        Additional content for item one
+      </:content>
+    </A.Item>
+    <A.Item>
+      <:toggle>Item two</:toggle>
+      <:content>
+        Additional content for item two
+      </:content>
+    </A.Item>
+  </HdsAccordion>
+</template>;
+
+export default AccordionSize;
diff --git a/website/docs/components/accordion/partials/code/code-snippets/accordion-size.hbs b/website/docs/components/accordion/partials/code/code-snippets/accordion-size.hbs
new file mode 100644
index 00000000000..634e1168a68
--- /dev/null
+++ b/website/docs/components/accordion/partials/code/code-snippets/accordion-size.hbs
@@ -0,0 +1,14 @@
+<Hds::Accordion @size="large" as |A|>
+  <A.Item>
+    <:toggle>Item one</:toggle>
+    <:content>
+      Additional content for item one
+    </:content>
+  </A.Item>
+  <A.Item>
+    <:toggle>Item two</:toggle>
+    <:content>
+      Additional content for item two
+    </:content>
+  </A.Item>
+</Hds::Accordion>
\ No newline at end of file
diff --git a/website/docs/components/accordion/partials/code/code-snippets/accordion-type-component.gts b/website/docs/components/accordion/partials/code/code-snippets/accordion-type-component.gts
new file mode 100644
index 00000000000..3bfafce8cd6
--- /dev/null
+++ b/website/docs/components/accordion/partials/code/code-snippets/accordion-type-component.gts
@@ -0,0 +1,27 @@
+import type { TemplateOnlyComponent } from '@ember/component/template-only';
+
+import { HdsAccordion } from '@hashicorp/design-system-components/components';
+import type { HdsAccordionSignature } from '@hashicorp/design-system-components/components/hds/accordion/index';
+
+interface AccordionTypeSignature {
+  Element: HdsAccordionSignature['Element'];
+}
+
+const AccordionType: TemplateOnlyComponent<AccordionTypeSignature> = <template>
+  <HdsAccordion @type="flush" ...attributes as |A|>
+    <A.Item>
+      <:toggle>Item one</:toggle>
+      <:content>
+        Additional content for item one
+      </:content>
+    </A.Item>
+    <A.Item>
+      <:toggle>Item two</:toggle>
+      <:content>
+        Additional content for item two
+      </:content>
+    </A.Item>
+  </HdsAccordion>
+</template>;
+
+export default AccordionType;
diff --git a/website/docs/components/accordion/partials/code/code-snippets/accordion-type.hbs b/website/docs/components/accordion/partials/code/code-snippets/accordion-type.hbs
new file mode 100644
index 00000000000..242bcc86b07
--- /dev/null
+++ b/website/docs/components/accordion/partials/code/code-snippets/accordion-type.hbs
@@ -0,0 +1,14 @@
+<Hds::Accordion @type="flush" as |A|>
+  <A.Item>
+    <:toggle>Item one</:toggle>
+    <:content>
+      Additional content for item one
+    </:content>
+  </A.Item>
+  <A.Item>
+    <:toggle>Item two</:toggle>
+    <:content>
+      Additional content for item two
+    </:content>
+  </A.Item>
+</Hds::Accordion>
\ No newline at end of file
diff --git a/website/docs/components/accordion/partials/code/how-to-use.md b/website/docs/components/accordion/partials/code/how-to-use.md
index c107479f81d..198dc5d019f 100644
--- a/website/docs/components/accordion/partials/code/how-to-use.md
+++ b/website/docs/components/accordion/partials/code/how-to-use.md
@@ -6,216 +6,39 @@ The `Accordion` component is used to wrap and group one or more `Accordion::Item
 
 A different size of Accordion can be invoked using the `@size` argument.
 
-```handlebars
-  <Hds::Accordion @size="large" as |A|>
-    <A.Item>
-      <:toggle>Item one</:toggle>
-      <:content>
-        Additional content for item one
-      </:content>
-    </A.Item>
-    <A.Item>
-      <:toggle>Item two</:toggle>
-      <:content>
-        Additional content for item two
-      </:content>
-    </A.Item>
-  </Hds::Accordion>
-```
+[[demo: code-snippets/accordion-size.hbs]]
 
 ### Type
 
 Use the `@type` argument to render a `flush` Accordion.
 
-```handlebars
-  <Hds::Accordion @type="flush" as |A|>
-    <A.Item>
-      <:toggle>Item one</:toggle>
-      <:content>
-        Additional content for item one
-      </:content>
-    </A.Item>
-    <A.Item>
-      <:toggle>Item two</:toggle>
-      <:content>
-        Additional content for item two
-      </:content>
-    </A.Item>
-  </Hds::Accordion>
-```
+[[demo: code-snippets/accordion-type.hbs]]
 
 ### Complex HTML content
 
 With an Alert component in the toggle block and an HTML table in the content block.
 
-```handlebars
-  <Hds::Accordion as |A|>
-    <A.Item @isOpen={{true}}>
-      <:toggle>
-        <Hds::Alert @type="compact" @color="success" as |A|>
-          <A.Title>Title</A.Title>
-          <A.Description>Plan finished <small>22 days ago</small></A.Description>
-        </Hds::Alert>
-      </:toggle>
-      <:content>
-        <p class="hds-typography-body-200">
-          <strong>Queued:</strong>
-          9 days ago >
-          <strong>Finished:</strong>
-          9 days ago
-        </p>
-        <Hds::Table @caption="Example table">
-          <:head as |H|>
-            <H.Tr>
-              <H.Th>Name</H.Th>
-              <H.Th>Type</H.Th>
-              <H.Th>Value</H.Th>
-            </H.Tr>
-          </:head>
-          <:body as |B|>
-            <B.Tr>
-              <B.Td>Cell one A</B.Td>
-              <B.Td>Cell two A</B.Td>
-              <B.Td>Cell three A</B.Td>
-            </B.Tr>
-            <B.Tr>
-              <B.Td>Cell one B</B.Td>
-              <B.Td>Cell two B</B.Td>
-              <B.Td>Cell three B</B.Td>
-            </B.Tr>
-          </:body>
-        </Hds::Table>
-      </:content>
-    </A.Item>
-  </Hds::Accordion>
-```
+[[demo: code-snippets/accordion-html-content.hbs]]
 
 With a link in the toggle block and a form in the content.
 
-```handlebars
-  <Hds::Accordion as |A|>
-    <A.Item @containsInteractive={{true}} @isOpen={{true}}>
-      <:toggle>
-        <div class="hds-typography-body-300">
-          Text inside a nested div with <a href="https://www.hashicorp.com/">a link</a>.
-        </div>
-      </:toggle>
-      <:content>
-        <Hds::Form as |FORM|>
-          <FORM.Section>
-            <Hds::Form::TextInput::Field @type="email" as |F|>
-              <F.Label>Email</F.Label>
-            </Hds::Form::TextInput::Field>
-          </FORM.Section>
-
-          <FORM.Footer>
-            <Hds::Button @text="Submit" />
-          </FORM.Footer>
-        </Hds::Form>
-      </:content>
-    </A.Item>
-  </Hds::Accordion>
-```
+[[demo: code-snippets/accordion-contains-interactive.hbs]]
 
 With an Accordion in the content block.
 
-```handlebars
-  <Hds::Accordion @type="flush" as |A|>
-    <A.Item @isOpen={{true}}>
-      <:toggle>Item one</:toggle>
-      <:content>
-        <Hds::Accordion @type="flush" as |AA|>
-          <AA.Item>
-            <:toggle>Nested item one</:toggle>
-            <:content>Nested content one</:content>
-          </AA.Item>
-          <AA.Item>
-            <:toggle>Nested item two</:toggle>
-            <:content>Nested content two</:content>
-          </AA.Item>
-        </Hds::Accordion>
-      </:content>
-    </A.Item>
-  </Hds::Accordion>
-```
+[[demo: code-snippets/accordion-nested.hbs]]
 
 ### Expand and collapse all
 
 The `@forceState` argument enables you to implement expand/collapse all functionality by programmatically controlling the states of all items within a group. The `@forceState` argument may also be used at item level if further granularity is required.
 
-```handlebars
-  <div class="doc-accordion-flex-layout">
-    <Hds::Text::Display @size="300">Examination period</Hds::Text::Display>
-    <Hds::Button
-      @text={{if (eq this.accordionState "open") "Collapse all" "Expand all"}}
-      @icon={{if (eq this.accordionState "open") "unfold-close" "unfold-open"}}
-      @color="tertiary" @size="small" {{on "click" this.toggleAccordionState}}
-    />
-  </div>
-  <Hds::Accordion @forceState={{this.accordionState}} as |A|>
-    <A.Item>
-      <:toggle>Exam experience</:toggle>
-      <:content>
-        All certification exams are taken online with a live proctor, accommodating all locations and time zones. Online proctoring provides the same benefits of a physical test center while being more accessible to exam-takers. The live proctor verifies your identity, walks you through rules and procedures, and watches you take the exam. Learn more ways to prepare for an online proctored exam in our Knowledgebase.
-      </:content>
-    </A.Item>
-    <A.Item>
-      <:toggle>Requirements for attending an exam</:toggle>
-      <:content>
-        Before you register for an exam, review the Exam-taker Handbook to learn the requirements and policies for taking exams. It is your responsibility to know and abide by our program rules to successfully enter your exam appointment, failure to do so may result in forfeiture of appointment fees.        
-      </:content>
-    </A.Item>
-    <A.Item>
-      <:toggle>Your badge and certificate</:toggle>
-      <:content>
-        HashiCorp has partnered with Credly to offer you a digital badge and downloadable certificate upon passing a certification exam. There is no fee for this service and acceptance is up to you. Digital badges can be used in email signatures or digital resumes, and on social media sites such as LinkedIn, Facebook, and Twitter. Badges link back to a real-time verification feature that describes your qualifications.
-      </:content>
-    </A.Item>
-    <A.Item>
-      <:toggle>Renewing your certification</:toggle>
-      <:content>
-        All HashiCorp Certifications are valid for two years, and you will be eligible to renew your certification starting 18 months after you earned your certification. To recertify, you will need to pass an exam at the same level or higher for the certification you are looking to renew. There are several pathways to recertification available, and you can learn more on our Knowledge Base or by heading to each exam’s homepage.        
-      </:content>
-    </A.Item>
-    <A.Item>
-      <:toggle>Finding certified practitioners</:toggle>
-      <:content>
-        HashiCorp publishes all earned badges to a publicly searchable directory on Credly. Here, you can filter and find people who hold HashiCorp Cloud Engineer certifications. Learn how to opt-out of this service in our Knowledgebase.
-      </:content>
-    </A.Item>
-  </Hds::Accordion>
-```
+[[demo: code-snippets/accordion-expand-all.hbs]]
 
 ### Persist Item state
 
 The `@forceState` argument can be used to programmatically control individual Accordion Items. For example, use `@onClickToggle` to respond to the user’s click, save the open/close state, then use `@forceState` to persist the state if the screen refreshes.
 
-```handlebars
-  <Hds::Accordion as |A|>
-    <A.Item>
-      <:toggle>Item one</:toggle>
-      <:content>
-        Additional content for item one
-      </:content>
-    </A.Item>
-    <A.Item
-      @onClickToggle={{this.onItemToggle}} 
-      @forceState={{this.itemState}}
-    >
-      <:toggle>Item two</:toggle>
-      <:content>
-        Item open on page load. Click to close then refresh the window. 
-        The Item will remember its state and remain closed.
-      </:content>
-    </A.Item>
-    <A.Item>
-      <:toggle>Item three</:toggle>
-      <:content>
-        Additional content for item three
-      </:content>
-    </A.Item>
-  </Hds::Accordion>
-```
+[[demo: code-snippets/accordion-persist-state.hbs]]
 
 #### JavaScript code
 
diff --git a/website/docs/components/badge/partials/code/code-snippets/badge-color-component.gts b/website/docs/components/badge/partials/code/code-snippets/badge-color-component.gts
new file mode 100644
index 00000000000..141ffeebf4d
--- /dev/null
+++ b/website/docs/components/badge/partials/code/code-snippets/badge-color-component.gts
@@ -0,0 +1,12 @@
+import type { TemplateOnlyComponent } from '@ember/component/template-only';
+
+import { HdsBadge } from '@hashicorp/design-system-components/components';
+
+const BadgeColor: TemplateOnlyComponent = <template>
+  <HdsBadge @text="Highlight badge" @color="highlight" />
+  <HdsBadge @text="Success badge" @color="success" />
+  <HdsBadge @text="Warning badge" @color="warning" />
+  <HdsBadge @text="Critical badge" @color="critical" />
+</template>;
+
+export default BadgeColor;
diff --git a/website/docs/components/badge/partials/code/code-snippets/badge-color.hbs b/website/docs/components/badge/partials/code/code-snippets/badge-color.hbs
new file mode 100644
index 00000000000..758c0b07d7e
--- /dev/null
+++ b/website/docs/components/badge/partials/code/code-snippets/badge-color.hbs
@@ -0,0 +1,4 @@
+<Hds::Badge @text="Highlight badge" @color="highlight" />
+<Hds::Badge @text="Success badge" @color="success" />
+<Hds::Badge @text="Warning badge" @color="warning" />
+<Hds::Badge @text="Critical badge" @color="critical" />
\ No newline at end of file
diff --git a/website/docs/components/badge/partials/code/code-snippets/badge-icon-component.gts b/website/docs/components/badge/partials/code/code-snippets/badge-icon-component.gts
new file mode 100644
index 00000000000..31e478167ff
--- /dev/null
+++ b/website/docs/components/badge/partials/code/code-snippets/badge-icon-component.gts
@@ -0,0 +1,14 @@
+import type { TemplateOnlyComponent } from '@ember/component/template-only';
+
+import { HdsBadge } from '@hashicorp/design-system-components/components';
+import type { HdsBadgeSignature } from '@hashicorp/design-system-components/components/hds/badge/index';
+
+interface BadgeIconSignature {
+  Element: HdsBadgeSignature['Element'];
+}
+
+const BadgeIcon: TemplateOnlyComponent<BadgeIconSignature> = <template>
+  <HdsBadge @text="Terraform" @icon="terraform" ...attributes />
+</template>;
+
+export default BadgeIcon;
diff --git a/website/docs/components/badge/partials/code/code-snippets/badge-icon-only-component.gts b/website/docs/components/badge/partials/code/code-snippets/badge-icon-only-component.gts
new file mode 100644
index 00000000000..d9d3145ad85
--- /dev/null
+++ b/website/docs/components/badge/partials/code/code-snippets/badge-icon-only-component.gts
@@ -0,0 +1,19 @@
+import type { TemplateOnlyComponent } from '@ember/component/template-only';
+
+import { HdsBadge } from '@hashicorp/design-system-components/components';
+import type { HdsBadgeSignature } from '@hashicorp/design-system-components/components/hds/badge/index';
+
+interface BadgeIconOnlySignature {
+  Element: HdsBadgeSignature['Element'];
+}
+
+const BadgeIconOnly: TemplateOnlyComponent<BadgeIconOnlySignature> = <template>
+  <HdsBadge
+    @text="Terraform"
+    @icon="terraform"
+    @isIconOnly={{true}}
+    ...attributes
+  />
+</template>;
+
+export default BadgeIconOnly;
diff --git a/website/docs/components/badge/partials/code/code-snippets/badge-icon-only.hbs b/website/docs/components/badge/partials/code/code-snippets/badge-icon-only.hbs
new file mode 100644
index 00000000000..becb1cb9421
--- /dev/null
+++ b/website/docs/components/badge/partials/code/code-snippets/badge-icon-only.hbs
@@ -0,0 +1 @@
+<Hds::Badge @text="Terraform" @icon="terraform" @isIconOnly={{true}} />
\ No newline at end of file
diff --git a/website/docs/components/badge/partials/code/code-snippets/badge-icon.hbs b/website/docs/components/badge/partials/code/code-snippets/badge-icon.hbs
new file mode 100644
index 00000000000..58ca52d27a3
--- /dev/null
+++ b/website/docs/components/badge/partials/code/code-snippets/badge-icon.hbs
@@ -0,0 +1 @@
+<Hds::Badge @text="Terraform" @icon="terraform" />
\ No newline at end of file
diff --git a/website/docs/components/badge/partials/code/code-snippets/badge-size-component.gts b/website/docs/components/badge/partials/code/code-snippets/badge-size-component.gts
new file mode 100644
index 00000000000..d749a17d6af
--- /dev/null
+++ b/website/docs/components/badge/partials/code/code-snippets/badge-size-component.gts
@@ -0,0 +1,10 @@
+import type { TemplateOnlyComponent } from '@ember/component/template-only';
+
+import { HdsBadge } from '@hashicorp/design-system-components/components';
+
+const BadgeSize: TemplateOnlyComponent = <template>
+  <HdsBadge @text="Small badge" @size="small" />
+  <HdsBadge @text="Large badge" @size="large" />
+</template>;
+
+export default BadgeSize;
diff --git a/website/docs/components/badge/partials/code/code-snippets/badge-size.hbs b/website/docs/components/badge/partials/code/code-snippets/badge-size.hbs
new file mode 100644
index 00000000000..6886c723069
--- /dev/null
+++ b/website/docs/components/badge/partials/code/code-snippets/badge-size.hbs
@@ -0,0 +1,2 @@
+<Hds::Badge @text="Small badge" @size="small" />
+<Hds::Badge @text="Large badge" @size="large" />
\ No newline at end of file
diff --git a/website/docs/components/badge/partials/code/code-snippets/badge-type-component.gts b/website/docs/components/badge/partials/code/code-snippets/badge-type-component.gts
new file mode 100644
index 00000000000..09bd0a6c2de
--- /dev/null
+++ b/website/docs/components/badge/partials/code/code-snippets/badge-type-component.gts
@@ -0,0 +1,10 @@
+import type { TemplateOnlyComponent } from '@ember/component/template-only';
+
+import { HdsBadge } from '@hashicorp/design-system-components/components';
+
+const BadgeType: TemplateOnlyComponent = <template>
+  <HdsBadge @text="Inverted badge" @type="inverted" />
+  <HdsBadge @text="Outlined badge" @type="outlined" />
+</template>;
+
+export default BadgeType;
diff --git a/website/docs/components/badge/partials/code/code-snippets/badge-type.hbs b/website/docs/components/badge/partials/code/code-snippets/badge-type.hbs
new file mode 100644
index 00000000000..3e2459f8575
--- /dev/null
+++ b/website/docs/components/badge/partials/code/code-snippets/badge-type.hbs
@@ -0,0 +1,2 @@
+<Hds::Badge @text="Inverted badge" @type="inverted" />
+<Hds::Badge @text="Outlined badge" @type="outlined" />
\ No newline at end of file
diff --git a/website/docs/components/badge/partials/code/code-snippets/basic-badge-component.gts b/website/docs/components/badge/partials/code/code-snippets/basic-badge-component.gts
new file mode 100644
index 00000000000..3075175afa2
--- /dev/null
+++ b/website/docs/components/badge/partials/code/code-snippets/basic-badge-component.gts
@@ -0,0 +1,14 @@
+import type { TemplateOnlyComponent } from '@ember/component/template-only';
+
+import { HdsBadge } from '@hashicorp/design-system-components/components';
+import type { HdsBadgeSignature } from '@hashicorp/design-system-components/components/hds/badge/index';
+
+interface BasicBadgeSignature {
+  Element: HdsBadgeSignature['Element'];
+}
+
+const BasicBadge: TemplateOnlyComponent<BasicBadgeSignature> = <template>
+  <HdsBadge @text="Default badge" ...attributes />
+</template>;
+
+export default BasicBadge;
diff --git a/website/docs/components/badge/partials/code/code-snippets/basic-badge.hbs b/website/docs/components/badge/partials/code/code-snippets/basic-badge.hbs
new file mode 100644
index 00000000000..bff3f5deedb
--- /dev/null
+++ b/website/docs/components/badge/partials/code/code-snippets/basic-badge.hbs
@@ -0,0 +1 @@
+<Hds::Badge @text="Default badge" />
\ No newline at end of file
diff --git a/website/docs/components/badge/partials/code/how-to-use.md b/website/docs/components/badge/partials/code/how-to-use.md
index 9fd59056412..0eb69d0b845 100644
--- a/website/docs/components/badge/partials/code/how-to-use.md
+++ b/website/docs/components/badge/partials/code/how-to-use.md
@@ -2,51 +2,34 @@
 
 The most basic invocation requires the `@text` argument to be passed, resulting in a medium neutral Badge.
 
-```handlebars
-<Hds::Badge @text="Default badge" />
-```
+[[demo: code-snippets/basic-badge.hbs]]
 
 ### Color
 
 The `@color` argument can be used to change the color.
 
-```handlebars
-<Hds::Badge @text="Highlight badge" @color="highlight" />
-<Hds::Badge @text="Success badge" @color="success" />
-<Hds::Badge @text="Warning badge" @color="warning" />
-<Hds::Badge @text="Critical badge" @color="critical" />
-```
+[[demo: code-snippets/badge-color.hbs]]
 
 ### Type
 
 Use the `@type` argument to invoke different Badge types. The options are `filled`, `inverted`, `outlined`.
 
-```handlebars
-<Hds::Badge @text="Inverted badge" @type="inverted" />
-<Hds::Badge @text="Outlined badge" @type="outlined" />
-```
+[[demo: code-snippets/badge-type.hbs]]
 
 ### Size
 
 A different size of Badge can be invoked using the `@size` argument.
 
-```handlebars
-<Hds::Badge @text="Small badge" @size="small" />
-<Hds::Badge @text="Large badge" @size="large" />
-```
+[[demo: code-snippets/badge-size.hbs]]
 
 ### Icon
 
 Use the `@icon` argument to pass in the any icon name. Icons always display in the leading (left) position.
 
-```handlebars
-<Hds::Badge @text="Terraform" @icon="terraform" />
-```
+[[demo: code-snippets/badge-icon.hbs]]
 
 #### isIconOnly
 
 To display an icon without text set the `@isIconOnly` argument to `true`. Defining `@text` is still necessary to conform with accessibility standards but won’t be displayed visually.
 
-```handlebars
-<Hds::Badge @text="Terraform" @icon="terraform" @isIconOnly={{true}} />
-```
+[[demo: code-snippets/badge-icon-only.hbs]]
diff --git a/website/docs/components/button/partials/code/code-snippets/basic-button-component.gts b/website/docs/components/button/partials/code/code-snippets/basic-button-component.gts
new file mode 100644
index 00000000000..36e9254c2c4
--- /dev/null
+++ b/website/docs/components/button/partials/code/code-snippets/basic-button-component.gts
@@ -0,0 +1,14 @@
+import type { TemplateOnlyComponent } from '@ember/component/template-only';
+
+import { HdsButton } from '@hashicorp/design-system-components/components';
+import type { HdsButtonSignature } from '@hashicorp/design-system-components/components/hds/button/index';
+
+interface BasicButtonSignature {
+  Element: HdsButtonSignature['Element'];
+}
+
+const BasicButton: TemplateOnlyComponent<BasicButtonSignature> = <template>
+  <HdsButton @text="Basic button" ...attributes />
+</template>;
+
+export default BasicButton;
diff --git a/website/docs/components/button/partials/code/code-snippets/basic-button.hbs b/website/docs/components/button/partials/code/code-snippets/basic-button.hbs
new file mode 100644
index 00000000000..e7bfefa236d
--- /dev/null
+++ b/website/docs/components/button/partials/code/code-snippets/basic-button.hbs
@@ -0,0 +1 @@
+<Hds::Button @text="Basic button" />
\ No newline at end of file
diff --git a/website/docs/components/button/partials/code/code-snippets/button-action-component.gts b/website/docs/components/button/partials/code/code-snippets/button-action-component.gts
new file mode 100644
index 00000000000..98af07a49d4
--- /dev/null
+++ b/website/docs/components/button/partials/code/code-snippets/button-action-component.gts
@@ -0,0 +1,23 @@
+import Component from '@glimmer/component';
+import { on } from '@ember/modifier';
+
+import { HdsButton } from '@hashicorp/design-system-components/components';
+import type { HdsButtonSignature } from '@hashicorp/design-system-components/components/hds/button/index';
+
+interface ButtonActionSignature {
+  Element: HdsButtonSignature['Element'];
+}
+
+export default class ButtonAction extends Component<ButtonActionSignature> {
+  alertOnClick = () => {
+    alert('Hello from Helios!');
+  };
+
+  <template>
+    <HdsButton
+      @text="Alert me"
+      {{on "click" this.alertOnClick}}
+      ...attributes
+    />
+  </template>
+}
diff --git a/website/docs/components/button/partials/code/code-snippets/button-action.hbs b/website/docs/components/button/partials/code/code-snippets/button-action.hbs
new file mode 100644
index 00000000000..30653f0198c
--- /dev/null
+++ b/website/docs/components/button/partials/code/code-snippets/button-action.hbs
@@ -0,0 +1 @@
+<Hds::Button @text="Alert me" {{on "click" this.alertOnClick}} />
\ No newline at end of file
diff --git a/website/docs/components/button/partials/code/code-snippets/button-action.js b/website/docs/components/button/partials/code/code-snippets/button-action.js
new file mode 100644
index 00000000000..e32281ff5e3
--- /dev/null
+++ b/website/docs/components/button/partials/code/code-snippets/button-action.js
@@ -0,0 +1,14 @@
+/**
+ * Copyright (c) HashiCorp, Inc.
+ * SPDX-License-Identifier: MPL-2.0
+ */
+
+import Component from '@glimmer/component';
+import { action } from '@ember/object';
+
+export default class ButtonAction extends Component {
+  @action
+  alertOnClick() {
+    alert('Hello from Helios!');
+  }
+}
diff --git a/website/docs/components/button/partials/code/code-snippets/button-color-component.gts b/website/docs/components/button/partials/code/code-snippets/button-color-component.gts
new file mode 100644
index 00000000000..ebde12d17db
--- /dev/null
+++ b/website/docs/components/button/partials/code/code-snippets/button-color-component.gts
@@ -0,0 +1,16 @@
+import type { TemplateOnlyComponent } from '@ember/component/template-only';
+
+import {
+  HdsButton,
+  HdsLayoutFlex,
+} from '@hashicorp/design-system-components/components';
+
+const ButtonColor: TemplateOnlyComponent = <template>
+  <HdsLayoutFlex @gap="24">
+    <HdsButton @text="Secondary" @color="secondary" />
+    <HdsButton @text="Tertiary" @color="tertiary" @icon="bulb" />
+    <HdsButton @text="Critical" @color="critical" />
+  </HdsLayoutFlex>
+</template>;
+
+export default ButtonColor;
diff --git a/website/docs/components/button/partials/code/code-snippets/button-color.hbs b/website/docs/components/button/partials/code/code-snippets/button-color.hbs
new file mode 100644
index 00000000000..0b9777ff274
--- /dev/null
+++ b/website/docs/components/button/partials/code/code-snippets/button-color.hbs
@@ -0,0 +1,5 @@
+<Hds::Layout::Flex @gap="24">
+  <Hds::Button @text="Secondary" @color="secondary" />
+  <Hds::Button @text="Tertiary" @color="tertiary" @icon="bulb" />
+  <Hds::Button @text="Critical" @color="critical" />
+</Hds::Layout::Flex>
\ No newline at end of file
diff --git a/website/docs/components/button/partials/code/code-snippets/button-disabled-component.gts b/website/docs/components/button/partials/code/code-snippets/button-disabled-component.gts
new file mode 100644
index 00000000000..18ef41a5df8
--- /dev/null
+++ b/website/docs/components/button/partials/code/code-snippets/button-disabled-component.gts
@@ -0,0 +1,24 @@
+import Component from '@glimmer/component';
+import { on } from '@ember/modifier';
+
+import { HdsButton } from '@hashicorp/design-system-components/components';
+import type { HdsButtonSignature } from '@hashicorp/design-system-components/components/hds/button/index';
+
+interface ButtonDisabledSignature {
+  Element: HdsButtonSignature['Element'];
+}
+
+export default class ButtonDisabled extends Component<ButtonDisabledSignature> {
+  alertOnClick = () => {
+    alert('Hello from Helios!');
+  };
+
+  <template>
+    <HdsButton
+      @text="Alert me"
+      disabled
+      {{on "click" this.alertOnClick}}
+      ...attributes
+    />
+  </template>
+}
diff --git a/website/docs/components/button/partials/code/code-snippets/button-disabled.hbs b/website/docs/components/button/partials/code/code-snippets/button-disabled.hbs
new file mode 100644
index 00000000000..22413d511bc
--- /dev/null
+++ b/website/docs/components/button/partials/code/code-snippets/button-disabled.hbs
@@ -0,0 +1 @@
+<Hds::Button @text="Alert me" disabled {{on "click" this.alertOnClick}} />
\ No newline at end of file
diff --git a/website/docs/components/button/partials/code/code-snippets/button-disabled.js b/website/docs/components/button/partials/code/code-snippets/button-disabled.js
new file mode 100644
index 00000000000..10ed297da82
--- /dev/null
+++ b/website/docs/components/button/partials/code/code-snippets/button-disabled.js
@@ -0,0 +1,14 @@
+/**
+ * Copyright (c) HashiCorp, Inc.
+ * SPDX-License-Identifier: MPL-2.0
+ */
+
+import Component from '@glimmer/component';
+import { action } from '@ember/object';
+
+export default class ButtonDisabled extends Component {
+  @action
+  alertOnClick() {
+    alert('Hello from Helios!');
+  }
+}
diff --git a/website/docs/components/button/partials/code/code-snippets/button-full-width-component.gts b/website/docs/components/button/partials/code/code-snippets/button-full-width-component.gts
new file mode 100644
index 00000000000..8f68afd6d20
--- /dev/null
+++ b/website/docs/components/button/partials/code/code-snippets/button-full-width-component.gts
@@ -0,0 +1,15 @@
+import type { TemplateOnlyComponent } from '@ember/component/template-only';
+
+import { HdsButton } from '@hashicorp/design-system-components/components';
+import type { HdsButtonSignature } from '@hashicorp/design-system-components/components/hds/button/index';
+
+interface ButtonFullWidthSignature {
+  Element: HdsButtonSignature['Element'];
+}
+
+const ButtonFullWidth: TemplateOnlyComponent<ButtonFullWidthSignature> =
+  <template>
+    <HdsButton @text="Full width button" @isFullWidth={{true}} ...attributes />
+  </template>;
+
+export default ButtonFullWidth;
diff --git a/website/docs/components/button/partials/code/code-snippets/button-full-width.hbs b/website/docs/components/button/partials/code/code-snippets/button-full-width.hbs
new file mode 100644
index 00000000000..27e3801f96a
--- /dev/null
+++ b/website/docs/components/button/partials/code/code-snippets/button-full-width.hbs
@@ -0,0 +1 @@
+<Hds::Button @text="Full width button" @isFullWidth={{true}} />
\ No newline at end of file
diff --git a/website/docs/components/button/partials/code/code-snippets/button-icon-component.gts b/website/docs/components/button/partials/code/code-snippets/button-icon-component.gts
new file mode 100644
index 00000000000..7185f45d13b
--- /dev/null
+++ b/website/docs/components/button/partials/code/code-snippets/button-icon-component.gts
@@ -0,0 +1,14 @@
+import type { TemplateOnlyComponent } from '@ember/component/template-only';
+
+import { HdsButton } from '@hashicorp/design-system-components/components';
+import type { HdsButtonSignature } from '@hashicorp/design-system-components/components/hds/button/index';
+
+interface ButtonIconSignature {
+  Element: HdsButtonSignature['Element'];
+}
+
+const ButtonIcon: TemplateOnlyComponent<ButtonIconSignature> = <template>
+  <HdsButton @text="Create cluster" @icon="plus" ...attributes />
+</template>;
+
+export default ButtonIcon;
diff --git a/website/docs/components/button/partials/code/code-snippets/button-icon-only-component.gts b/website/docs/components/button/partials/code/code-snippets/button-icon-only-component.gts
new file mode 100644
index 00000000000..7bd3e6bbfc1
--- /dev/null
+++ b/website/docs/components/button/partials/code/code-snippets/button-icon-only-component.gts
@@ -0,0 +1,20 @@
+import type { TemplateOnlyComponent } from '@ember/component/template-only';
+
+import { HdsButton } from '@hashicorp/design-system-components/components';
+import type { HdsButtonSignature } from '@hashicorp/design-system-components/components/hds/button/index';
+
+interface ButtonIconPositionSignature {
+  Element: HdsButtonSignature['Element'];
+}
+
+const ButtonIconPosition: TemplateOnlyComponent<ButtonIconPositionSignature> =
+  <template>
+    <HdsButton
+      @text="Create cluster"
+      @icon="plus"
+      @isIconOnly={{true}}
+      ...attributes
+    />
+  </template>;
+
+export default ButtonIconPosition;
diff --git a/website/docs/components/button/partials/code/code-snippets/button-icon-only.hbs b/website/docs/components/button/partials/code/code-snippets/button-icon-only.hbs
new file mode 100644
index 00000000000..429e0457889
--- /dev/null
+++ b/website/docs/components/button/partials/code/code-snippets/button-icon-only.hbs
@@ -0,0 +1 @@
+<Hds::Button @text="Create cluster" @icon="plus" @isIconOnly={{true}} />
\ No newline at end of file
diff --git a/website/docs/components/button/partials/code/code-snippets/button-icon-position-component.gts b/website/docs/components/button/partials/code/code-snippets/button-icon-position-component.gts
new file mode 100644
index 00000000000..24ca5e037d9
--- /dev/null
+++ b/website/docs/components/button/partials/code/code-snippets/button-icon-position-component.gts
@@ -0,0 +1,20 @@
+import type { TemplateOnlyComponent } from '@ember/component/template-only';
+
+import { HdsButton } from '@hashicorp/design-system-components/components';
+import type { HdsButtonSignature } from '@hashicorp/design-system-components/components/hds/button/index';
+
+interface ButtonIconPositionSignature {
+  Element: HdsButtonSignature['Element'];
+}
+
+const ButtonIconPosition: TemplateOnlyComponent<ButtonIconPositionSignature> =
+  <template>
+    <HdsButton
+      @text="Next step"
+      @icon="arrow-right"
+      @iconPosition="trailing"
+      ...attributes
+    />
+  </template>;
+
+export default ButtonIconPosition;
diff --git a/website/docs/components/button/partials/code/code-snippets/button-icon-position.hbs b/website/docs/components/button/partials/code/code-snippets/button-icon-position.hbs
new file mode 100644
index 00000000000..3dfbb1d1b09
--- /dev/null
+++ b/website/docs/components/button/partials/code/code-snippets/button-icon-position.hbs
@@ -0,0 +1 @@
+<Hds::Button @text="Next step" @icon="arrow-right" @iconPosition="trailing" />
\ No newline at end of file
diff --git a/website/docs/components/button/partials/code/code-snippets/button-icon.hbs b/website/docs/components/button/partials/code/code-snippets/button-icon.hbs
new file mode 100644
index 00000000000..8f5f7e0946d
--- /dev/null
+++ b/website/docs/components/button/partials/code/code-snippets/button-icon.hbs
@@ -0,0 +1 @@
+<Hds::Button @text="Create cluster" @icon="plus" />
\ No newline at end of file
diff --git a/website/docs/components/button/partials/code/code-snippets/button-layout-component.gts b/website/docs/components/button/partials/code/code-snippets/button-layout-component.gts
new file mode 100644
index 00000000000..9025033fd23
--- /dev/null
+++ b/website/docs/components/button/partials/code/code-snippets/button-layout-component.gts
@@ -0,0 +1,16 @@
+import type { TemplateOnlyComponent } from '@ember/component/template-only';
+
+import { HdsButton } from '@hashicorp/design-system-components/components';
+import type { HdsButtonSignature } from '@hashicorp/design-system-components/components/hds/button/index';
+
+interface ButtonLayoutSignature {
+  Element: HdsButtonSignature['Element'];
+}
+
+const ButtonLayout: TemplateOnlyComponent<ButtonLayoutSignature> = <template>
+  <div class="doc-button-mock-text-align-right">
+    <HdsButton @text="inline layout" @isInline={{true}} ...attributes />
+  </div>
+</template>;
+
+export default ButtonLayout;
diff --git a/website/docs/components/button/partials/code/code-snippets/button-layout.hbs b/website/docs/components/button/partials/code/code-snippets/button-layout.hbs
new file mode 100644
index 00000000000..be621c5c396
--- /dev/null
+++ b/website/docs/components/button/partials/code/code-snippets/button-layout.hbs
@@ -0,0 +1,3 @@
+<div class="doc-button-mock-text-align-right">
+  <Hds::Button @text="inline layout" @isInline={{true}} />
+</div>
\ No newline at end of file
diff --git a/website/docs/components/button/partials/code/code-snippets/button-loading-component.gts b/website/docs/components/button/partials/code/code-snippets/button-loading-component.gts
new file mode 100644
index 00000000000..90fae4ea8fb
--- /dev/null
+++ b/website/docs/components/button/partials/code/code-snippets/button-loading-component.gts
@@ -0,0 +1,36 @@
+import Component from '@glimmer/component';
+import { on } from '@ember/modifier';
+import { tracked } from '@glimmer/tracking';
+import style from 'ember-style-modifier';
+
+import { HdsButton } from '@hashicorp/design-system-components/components';
+import type { HdsButtonSignature } from '@hashicorp/design-system-components/components/hds/button/index';
+
+interface ButtonLoadingSignature {
+  Element: HdsButtonSignature['Element'];
+}
+
+export default class ButtonLoading extends Component<ButtonLoadingSignature> {
+  @tracked isLoading = false;
+  @tracked timer: ReturnType<typeof setTimeout> | undefined;
+
+  toggleIsLoading = () => {
+    this.isLoading = !this.isLoading;
+
+    clearTimeout(this.timer);
+    // make it go back to the idle state
+    this.timer = setTimeout(() => {
+      this.isLoading = false;
+    }, 4000);
+  };
+
+  <template>
+    <HdsButton
+      {{style width="7.5rem"}}
+      @icon={{if this.isLoading "loading"}}
+      @text={{if this.isLoading "Loading" "Save"}}
+      {{on "click" this.toggleIsLoading}}
+      ...attributes
+    />
+  </template>
+}
diff --git a/website/docs/components/button/partials/code/code-snippets/button-loading.hbs b/website/docs/components/button/partials/code/code-snippets/button-loading.hbs
new file mode 100644
index 00000000000..f10ce84e988
--- /dev/null
+++ b/website/docs/components/button/partials/code/code-snippets/button-loading.hbs
@@ -0,0 +1,6 @@
+<Hds::Button
+  {{style width="7.5rem"}}
+  @icon={{if this.isLoading "loading"}}
+  @text={{if this.isLoading "Loading" "Save"}}
+  {{on "click" this.toggleIsLoading}}
+/>
\ No newline at end of file
diff --git a/website/docs/components/button/index.js b/website/docs/components/button/partials/code/code-snippets/button-loading.js
similarity index 88%
rename from website/docs/components/button/index.js
rename to website/docs/components/button/partials/code/code-snippets/button-loading.js
index bd1ff87a643..1b658b8c4c3 100644
--- a/website/docs/components/button/index.js
+++ b/website/docs/components/button/partials/code/code-snippets/button-loading.js
@@ -21,9 +21,4 @@ export default class Index extends Component {
       this.isLoading = false;
     }, 4000);
   }
-
-  @action
-  alertOnClick() {
-    alert('Hello from Helios!');
-  }
 }
diff --git a/website/docs/components/button/partials/code/code-snippets/button-size-component.gts b/website/docs/components/button/partials/code/code-snippets/button-size-component.gts
new file mode 100644
index 00000000000..98d7d1d0c22
--- /dev/null
+++ b/website/docs/components/button/partials/code/code-snippets/button-size-component.gts
@@ -0,0 +1,19 @@
+import type { TemplateOnlyComponent } from '@ember/component/template-only';
+
+import {
+  HdsButton,
+  HdsLayoutFlex,
+} from '@hashicorp/design-system-components/components';
+
+const ButtonSize: TemplateOnlyComponent = <template>
+  <HdsLayoutFlex @gap="24" as |LF|>
+    <LF.Item>
+      <HdsButton @text="Small button" @size="small" />
+    </LF.Item>
+    <LF.Item>
+      <HdsButton @text="Large button" @size="large" />
+    </LF.Item>
+  </HdsLayoutFlex>
+</template>;
+
+export default ButtonSize;
diff --git a/website/docs/components/button/partials/code/code-snippets/button-size.hbs b/website/docs/components/button/partials/code/code-snippets/button-size.hbs
new file mode 100644
index 00000000000..66fa169db3c
--- /dev/null
+++ b/website/docs/components/button/partials/code/code-snippets/button-size.hbs
@@ -0,0 +1,8 @@
+<Hds::Layout::Flex @gap="24" as |LF|>
+  <LF.Item>
+    <Hds::Button @text="Small button" @size="small" />
+  </LF.Item>
+  <LF.Item>
+    <Hds::Button @text="Large button" @size="large" />
+  </LF.Item>
+</Hds::Layout::Flex>
\ No newline at end of file
diff --git a/website/docs/components/button/partials/code/code-snippets/button-type-component.gts b/website/docs/components/button/partials/code/code-snippets/button-type-component.gts
new file mode 100644
index 00000000000..c410916e5a5
--- /dev/null
+++ b/website/docs/components/button/partials/code/code-snippets/button-type-component.gts
@@ -0,0 +1,14 @@
+import type { TemplateOnlyComponent } from '@ember/component/template-only';
+
+import { HdsButton } from '@hashicorp/design-system-components/components';
+import type { HdsButtonSignature } from '@hashicorp/design-system-components/components/hds/button/index';
+
+interface ButtonTypeSignature {
+  Element: HdsButtonSignature['Element'];
+}
+
+const ButtonType: TemplateOnlyComponent<ButtonTypeSignature> = <template>
+  <HdsButton @text="Submit" type="submit" ...attributes />
+</template>;
+
+export default ButtonType;
diff --git a/website/docs/components/button/partials/code/code-snippets/button-type.hbs b/website/docs/components/button/partials/code/code-snippets/button-type.hbs
new file mode 100644
index 00000000000..3e193af371a
--- /dev/null
+++ b/website/docs/components/button/partials/code/code-snippets/button-type.hbs
@@ -0,0 +1 @@
+<Hds::Button @text="Submit" type="submit" />
\ No newline at end of file
diff --git a/website/docs/components/button/partials/code/code-snippets/button-with-href-component.gts b/website/docs/components/button/partials/code/code-snippets/button-with-href-component.gts
new file mode 100644
index 00000000000..e751598ec32
--- /dev/null
+++ b/website/docs/components/button/partials/code/code-snippets/button-with-href-component.gts
@@ -0,0 +1,21 @@
+import type { TemplateOnlyComponent } from '@ember/component/template-only';
+
+import { HdsButton } from '@hashicorp/design-system-components/components';
+import type { HdsButtonSignature } from '@hashicorp/design-system-components/components/hds/button/index';
+
+interface ButtonWithHrefSignature {
+  Element: HdsButtonSignature['Element'];
+}
+
+const ButtonWithHref: TemplateOnlyComponent<ButtonWithHrefSignature> =
+  <template>
+    <HdsButton
+      @text="Visit website"
+      @icon="external-link"
+      @iconPosition="trailing"
+      @href="https://hashicorp.com"
+      ...attributes
+    />
+  </template>;
+
+export default ButtonWithHref;
diff --git a/website/docs/components/button/partials/code/code-snippets/button-with-href.hbs b/website/docs/components/button/partials/code/code-snippets/button-with-href.hbs
new file mode 100644
index 00000000000..5a8629005a9
--- /dev/null
+++ b/website/docs/components/button/partials/code/code-snippets/button-with-href.hbs
@@ -0,0 +1 @@
+<Hds::Button @text="Visit website" @icon="external-link" @iconPosition="trailing" @href="https://hashicorp.com" />
\ No newline at end of file
diff --git a/website/docs/components/button/partials/code/code-snippets/button-with-route-component.gts b/website/docs/components/button/partials/code/code-snippets/button-with-route-component.gts
new file mode 100644
index 00000000000..fecb86438bf
--- /dev/null
+++ b/website/docs/components/button/partials/code/code-snippets/button-with-route-component.gts
@@ -0,0 +1,20 @@
+import type { TemplateOnlyComponent } from '@ember/component/template-only';
+
+import { HdsButton } from '@hashicorp/design-system-components/components';
+import type { HdsButtonSignature } from '@hashicorp/design-system-components/components/hds/button/index';
+
+interface ButtonWithRouteSignature {
+  Element: HdsButtonSignature['Element'];
+}
+
+const ButtonWithRoute: TemplateOnlyComponent<ButtonWithRouteSignature> =
+  <template>
+    <HdsButton
+      @text="Back to homepage"
+      @icon="arrow-left"
+      @route="index"
+      ...attributes
+    />
+  </template>;
+
+export default ButtonWithRoute;
diff --git a/website/docs/components/button/partials/code/code-snippets/button-with-route.hbs b/website/docs/components/button/partials/code/code-snippets/button-with-route.hbs
new file mode 100644
index 00000000000..5ffe014c8c1
--- /dev/null
+++ b/website/docs/components/button/partials/code/code-snippets/button-with-route.hbs
@@ -0,0 +1 @@
+<Hds::Button @text="Back to homepage" @icon="arrow-left" @route="index" />
\ No newline at end of file
diff --git a/website/docs/components/button/partials/code/how-to-use.md b/website/docs/components/button/partials/code/how-to-use.md
index eb9361f93eb..f49d05ce444 100644
--- a/website/docs/components/button/partials/code/how-to-use.md
+++ b/website/docs/components/button/partials/code/how-to-use.md
@@ -9,88 +9,56 @@ Due to differences in text rendering between Figma and web browsers, the `Button
 
 The basic invocation requires text to be passed:
 
-```handlebars
-<Hds::Button @text="Basic button" />
-```
+[[demo: code-snippets/basic-button.hbs]]
 
 ### Add an icon
 
 To add an icon to your Button, give the `@icon` any [icon](/icons/library) name:
 
-```handlebars
-<Hds::Button @text="Create cluster" @icon="plus" />
-```
+[[demo: code-snippets/button-icon.hbs]]
 
 ### Icon position
 
 By default, if you define an icon, it is placed in the leading position (before the text). If you need to position the icon in the trailing position (after the text), define `@iconPosition`:
 
-```handlebars
-<Hds::Button @text="Next step" @icon="arrow-right" @iconPosition="trailing" />
-```
+[[demo: code-snippets/button-icon-position.hbs]]
 
 ### Icon-only Button
 
 
 If you would like to create an icon-only Button, set `@isIconOnly` to `true`. Note that you still have to define the `@text` value; it will be used as the `aria-label` attribute value on the `Button` element.
 
-```handlebars
-<Hds::Button @text="Create cluster" @icon="plus" @isIconOnly={{true}} />
-```
+[[demo: code-snippets/button-icon-only.hbs]]
 
 ### Color
 
 There are four available colors for the Button: `primary`, `secondary`, `tertiary`, and `critical`. The default is `primary`. To use a different color, declare another value for `@color`:
 
-```handlebars
-<Hds::Button @text="Secondary" @color="secondary" />
-```
-
-```handlebars
-<Hds::Button @text="Tertiary" @color="tertiary" @icon="bulb" />
-```
-
-```handlebars
-<Hds::Button @text="Critical" @color="critical" />
-```
+[[demo: code-snippets/button-color.hbs]]
 
 ### Size
 
 There are three sizes available for the Button: `small`, `medium`, and `large`. The default is `medium`. To use a different size, declare a value for `@size`:
 
-```handlebars
-<Hds::Button @text="Small button" @size="small" />
-```
-
-```handlebars
-<Hds::Button @text="Large button" @size="large" />
-```
+[[demo: code-snippets/button-size.hbs]]
 
 ### Full-width
 
 This indicates that the Button should take up the full-width of the parent container. It’s set to `false` by default.
 
-```handlebars
-<Hds::Button @text="Full width button" @isFullWidth={{true}} />
-```
+[[demo: code-snippets/button-full-width.hbs]]
 
 ### Layout
 
 To change the default `block` layout to `inline`, set `@isInline` to `true`. This can be useful in contexts where the Button needs to be <em>inline</em>, for example to inherit the alignment from a parent.
 
-```handlebars
-<div class="doc-button-mock-text-align-right">
-  <Hds::Button @text="inline layout" @isInline={{true}} />
-</div>
-```
+[[demo: code-snippets/button-layout.hbs]]
 
 ### Type
 
 This is the native HTML button attribute, `type`. There are three possible values: `button`, `submit`, and `reset`. The default `type` for the Button is `button`. To submit form data to the server, set `type` to `submit`.
 
-```handlebars
-<Hds::Button @text="Submit" type="submit" />
-```
+[[demo: code-snippets/button-type.hbs]]
 
 ### Actions
 
@@ -98,9 +66,7 @@ Define the action in your route or controller, and add it to the component invoc
 
 Read the Ember.js guides for more information: [Patterns for Actions](https://guides.emberjs.com/release/in-depth-topics/patterns-for-actions/) .
 
-```handlebars
-<Hds::Button @text="Alert me" {{on "click" this.alertOnClick}} />
-```
+[[demo: code-snippets/button-action.hbs]]
 
 ### Links
 
@@ -122,9 +88,7 @@ If you pass an `@href` argument, an `<a>` link will be generated.
 
 By default, the link is considered "external", which means that the `target=“_blank”` and `rel=“noopener noreferrer”` attributes are applied to the `<a>` element. This is the most common case, as internal links are generally handled using a `@route` argument.
 
-```handlebars
-<Hds::Button @text="Visit website" @icon="external-link" @iconPosition="trailing" @href="https://hashicorp.com" />
-```
+[[demo: code-snippets/button-with-href.hbs]]
 
 If the `@href` points to an internal link, or uses a different protocol (e.g., "mailto" or "ftp"), pass `@isHrefExternal={{false}}` to the component and it will omit the `target` and `rel` attributes.
 
@@ -134,22 +98,13 @@ If you pass a `@route` argument, an `<a>` link will be generated using a `<LinkT
 
 If the route is external to your current engine, you have to pass `@isRouteExternal={{true}}` so it will use `<LinkToExternal>` instead of `<LinkTo>` for the `@route`. For more details, see the [Hds::Interactive component](/utilities/interactive).
 
-```handlebars
-<Hds::Button @text="Back to homepage" @icon="arrow-left" @route="index" />
-```
+[[demo: code-snippets/button-with-route.hbs]]
 
 ### Loading state
 
 If the button needs to toggle between an "idle" and a "loading" state, we suggest applying a width to it (via inline style or CSS class) to prevent the button from resizing on click (and potentially causing layout shifts).
 
-```handlebars
-<Hds::Button
-  {{style width="7.5rem"}}
-  @icon={{if this.isLoading "loading"}}
-  @text={{if this.isLoading "Loading" "Save"}}
-  {{on "click" this.toggleIsLoading}}
-/>
-```
+[[demo: code-snippets/button-loading.hbs]]
 
 We suggest limiting the application of this override only to this specific use case and letting the button resize accordingly to its content.
 
@@ -164,6 +119,4 @@ Links cannot use the `disabled` attribute (per HTML specification); even if you
 
 To disable a Button, manually add the native `disabled` attribute:
 
-```handlebars
-<Hds::Button @text="Alert me" disabled {{on "click" this.alertOnClick}} />
-```
+[[demo: code-snippets/button-disabled.hbs]]
diff --git a/website/lib/markdown/index.js b/website/lib/markdown/index.js
index bdeae5b0bf7..3a54a5b9aa3 100644
--- a/website/lib/markdown/index.js
+++ b/website/lib/markdown/index.js
@@ -7,7 +7,8 @@ const fs = require('fs-extra');
 const path = require('path');
 const resolve = require('resolve');
 
-const MarkdownProcessIncludeDirectives = require('./markdown-process-includes');
+const MarkdownProcessDemos = require('./markdown-process-demos.js');
+const MarkdownProcessIncludeDirectives = require('./markdown-process-includes.js');
 const MarkdownToJson = require('./markdown-to-jsonapi');
 const TableOfContents = require('./table-of-contents');
 const MergeTrees = require('broccoli-merge-trees');
@@ -47,11 +48,14 @@ module.exports = {
   },
 
   treeForPublic: function () {
-    let processedDocsMardownFilesTree = new MarkdownProcessIncludeDirectives(
-      'docs',
+    let processedDocsMarkdownFilesTree = new MarkdownProcessDemos('docs');
+
+    processedDocsMarkdownFilesTree = new MarkdownProcessIncludeDirectives(
+      processedDocsMarkdownFilesTree,
     );
+
     let processedDocsJsonFilesTree = new MarkdownToJson(
-      processedDocsMardownFilesTree,
+      processedDocsMarkdownFilesTree,
       'docs',
     );
 
diff --git a/website/lib/markdown/markdown-process-demos.js b/website/lib/markdown/markdown-process-demos.js
new file mode 100644
index 00000000000..916f65f6960
--- /dev/null
+++ b/website/lib/markdown/markdown-process-demos.js
@@ -0,0 +1,105 @@
+/**
+ * Copyright (c) HashiCorp, Inc.
+ * SPDX-License-Identifier: MPL-2.0
+ */
+
+/* eslint-env node */
+
+const Multifilter = require('broccoli-multifilter');
+const Funnel = require('broccoli-funnel');
+const fs = require('fs-extra');
+const path = require('path');
+const walkSync = require('walk-sync');
+
+const demoBlockRegex =
+  /\[\[demo:\s*([^\]]+\.hbs)(?:\s+execute=(true|false))?\s*\]\]/g;
+const fileNameRegex = /(components\/.*?)\.hbs$/;
+
+// Helper to escape code for attribute usage
+function escapeCode(code) {
+  return code
+    .replace(/&/g, '&amp;')
+    .replace(/"/g, '&quot;')
+    .replace(/</g, '&lt;')
+    .replace(/>/g, '&gt;')
+    .replace(/\{\{/g, '&#123;&#123;')
+    .replace(/\}\}/g, '&#125;&#125;')
+    .replace(/\n/g, '\\n');
+}
+
+class MarkdownReplaceDemoBlocks extends Multifilter {
+  build() {
+    const inputFolder = this.inputPaths[0];
+    const inputFiles = walkSync(inputFolder, {
+      globs: ['**/*.md'],
+    });
+
+    return this.buildAndCache(inputFiles, (inputFile, outputFolder) => {
+      const fullInputPath = path.join(inputFolder, inputFile);
+      const fullParentFolder = path.dirname(fullInputPath);
+      const fullOutputPath = path.join(outputFolder, inputFile);
+      const fullOutputFolder = path.dirname(fullOutputPath);
+
+      let markdownFileContent = fs.readFileSync(fullInputPath, 'utf8');
+
+      // Replace all demo blocks
+      let dependencies = [fullInputPath];
+      markdownFileContent = markdownFileContent.replace(
+        demoBlockRegex,
+        (_match, fileName, shouldExecute, _content) => {
+          const demoFilePath = path.join(fullParentFolder, fileName.trim());
+          let code = '';
+          if (fs.existsSync(demoFilePath)) {
+            code = fs.readFileSync(demoFilePath, 'utf8');
+            dependencies.push(demoFilePath);
+          } else {
+            code = `// Unable to load file: ${fileName}, path: ${demoFilePath}`;
+          }
+          const escapedCode = escapeCode(code);
+
+          const gtsFileName = fileName
+            .trim()
+            .replace(/\.hbs$/, '-component.gts');
+          const gtsFilePath = path.join(fullParentFolder, gtsFileName);
+          let gtsCode = '';
+          if (fs.existsSync(gtsFilePath)) {
+            gtsCode = fs.readFileSync(gtsFilePath, 'utf8');
+            dependencies.push(gtsFilePath);
+          } else {
+            gtsCode = `// Unable to load file: ${gtsFileName}, path: ${gtsFilePath}`;
+          }
+          const escapedGtsCode = escapeCode(gtsCode);
+          const fileNameToForward = demoFilePath.match(fileNameRegex)?.[1];
+          const shouldHidePreview = shouldExecute === 'false' ? true : false;
+
+          return `\n<?php start="demo-block" filename="${fileNameToForward}" hbs="${escapedCode}" gts="${escapedGtsCode}" hidePreview="${shouldHidePreview}" ?><?php end="demo-block" ?>\n`;
+        },
+      );
+
+      // Write the processed file
+      if (fs.existsSync(outputFolder)) {
+        fs.ensureDirSync(fullOutputFolder);
+        fs.writeFileSync(fullOutputPath, markdownFileContent);
+      } else {
+        console.error(
+          'Error: destination folder (`outputFolder`) does not exist',
+          outputFolder,
+        );
+      }
+
+      return {
+        dependencies,
+      };
+    });
+  }
+}
+
+module.exports = function (folder) {
+  const sourceMarkdownFunnel = new Funnel(folder, {
+    include: ['**/*.md', '**/*.hbs', '**/*.gts'],
+  });
+
+  const processedTree = new MarkdownReplaceDemoBlocks([sourceMarkdownFunnel]);
+
+  return processedTree;
+};
diff --git a/website/package.json b/website/package.json
index 3adfbcfdb04..a13bbc59ec3 100644
--- a/website/package.json
+++ b/website/package.json
@@ -62,6 +62,7 @@
     "@hashicorp/design-system-tokens": "workspace:*",
     "@hashicorp/flight-icons": "workspace:*",
     "@tsconfig/ember": "^3.0.10",
+    "@types/ember-cli-fastboot": "^2.2.6",
     "@types/qunit": "^2.19.12",
     "@types/rsvp": "^4.0.9",
     "algoliasearch": "^4.24.0",
@@ -85,7 +86,6 @@
     "ember-cli-app-version": "^7.0.0",
     "ember-cli-babel": "^8.2.0",
     "ember-cli-clean-css": "^3.0.0",
-    "ember-cli-clipboard": "^1.2.1",
     "ember-cli-dependency-checker": "^3.3.3",
     "ember-cli-deprecation-workflow": "^3.3.0",
     "ember-cli-fastboot": "^4.1.5",
@@ -108,7 +108,9 @@
     "ember-qunit": "^9.0.3",
     "ember-resolver": "^13.1.1",
     "ember-router-scroll": "^4.1.2",
+    "ember-shiki": "^0.3.0",
     "ember-source": "~6.4.0",
+    "ember-style-modifier": "^4.4.0",
     "ember-template-imports": "^4.3.0",
     "ember-template-lint": "^7.7.0",
     "ember-test-selectors": "^7.1.0",
diff --git a/website/tsconfig.json b/website/tsconfig.json
index 26f80a3b2da..a8c1f445993 100644
--- a/website/tsconfig.json
+++ b/website/tsconfig.json
@@ -12,5 +12,5 @@
     },
     "types": ["ember-source/types"]
   },
-  "include": ["app/**/*", "tests/**/*", "types/**/*"]
+  "include": ["app/**/*", "tests/**/*", "types/**/*", "docs/**/*"]
 }
diff --git a/website/types/template-registry.ts b/website/types/template-registry.ts
index 478ec737eb0..5222d43fa2d 100644
--- a/website/types/template-registry.ts
+++ b/website/types/template-registry.ts
@@ -4,6 +4,7 @@ import DocBadgeGroup from '../app/components/doc/badge-group';
 import DocBanner from '../app/components/doc/banner';
 import DocCardsCard from '../app/components/doc/cards/card';
 import DocCardsDeck from '../app/components/doc/cards/deck';
+import DocCodeGroup from '../app/components/doc/code-group';
 import DocColorCard from '../app/components/doc/color-card';
 import DocColorSwatch from '../app/components/doc/color-swatch';
 import DocComponentApi from '../app/components/doc/component-api';
@@ -72,6 +73,9 @@ export default interface WebsiteTemplateRegistry {
   'Doc::Cards::Deck': typeof DocCardsDeck;
   'doc/cards/deck': typeof DocCardsDeck;
 
+  'Doc::CodeGroup': typeof DocCodeGroup;
+  'doc/code-group': typeof DocCodeGroup;
+
   'Doc::ColorCard': typeof DocColorCard;
   'doc/color-card': typeof DocColorCard;