From d5fee4f265266d4f8caff8cea2ac0648f2d07bc0 Mon Sep 17 00:00:00 2001
From: guidari <guilhermedatilio@gmail.com>
Date: Wed, 8 Jan 2025 15:31:57 -0300
Subject: [PATCH] feat: added opne in stackblitz to the rest of Canvas

---
 packages/react/previewer/codePreviewer.tsx    |   4 +-
 .../src/components/Accordion/Accordion.mdx    |  21 +-
 .../src/components/Breadcrumb/Breadcrumb.mdx  |  32 +-
 .../Breadcrumb/Breadcrumb.stories.js          |   4 +-
 .../react/src/components/Button/Button.mdx    |  80 +-
 .../src/components/Button/Button.stories.js   |  16 +-
 .../src/components/Checkbox/Checkbox.mdx      |  21 +-
 .../components/Checkbox/Checkbox.stories.js   |  14 +-
 .../components/CodeSnippet/CodeSnippet.mdx    |  51 +-
 .../CodeSnippet/CodeSnippet.stories.js        | 102 ++-
 .../src/components/ComboBox/ComboBox.mdx      |  20 +-
 .../components/ComboBox/ComboBox.stories.js   |   2 +-
 .../ComposedModal/ComposedModal.mdx           |  14 +-
 .../ContainedList/ContainedList.mdx           |  33 +-
 .../ContainedList/ContainedList.stories.js    |  14 +-
 .../ContentSwitcher/ContentSwitcher.mdx       |  11 +-
 .../src/components/CopyButton/CopyButton.mdx  |  11 +-
 .../src/components/DataTable/DataTable.mdx    |  13 +-
 .../src/components/DatePicker/DatePicker.mdx  |  43 +-
 .../DatePicker/DatePicker.stories.js          |   4 +-
 .../src/components/Dropdown/Dropdown.mdx      |  31 +-
 .../components/Dropdown/Dropdown.stories.js   | 171 ++--
 packages/react/src/components/Form/Form.mdx   |  11 +-
 .../react/src/components/Form/Form.stories.js | 261 +++---
 .../src/components/FormGroup/FormGroup.mdx    |  11 +-
 .../components/FormGroup/docs/overview.mdx    |   4 +-
 .../src/components/FormLabel/FormLabel.mdx    |  11 +-
 .../react/src/components/Grid/FlexGrid.mdx    |  81 +-
 .../src/components/Grid/FlexGrid.stories.js   | 660 ++++++++-------
 packages/react/src/components/Grid/Grid.mdx   |  91 +-
 .../react/src/components/Grid/Grid.stories.js | 212 ++---
 .../InlineLoading/InlineLoading.mdx           |  11 +-
 packages/react/src/components/Layer/Layer.mdx |  11 +-
 packages/react/src/components/Link/Link.mdx   |  21 +-
 .../react/src/components/Loading/Loading.mdx  |  11 +-
 packages/react/src/components/Modal/Modal.mdx |  15 +-
 .../src/components/Modal/Modal.stories.js     |   4 +-
 .../components/MultiSelect/MultiSelect.mdx    |  32 +-
 .../MultiSelect/MultiSelect.stories.js        |  81 ++
 .../components/NumberInput/NumberInput.mdx    |  21 +-
 .../NumberInput/NumberInput.stories.js        |  10 +-
 .../components/OrderedList/OrderedList.mdx    |  11 +-
 .../components/OverflowMenu/OverflowMenu.mdx  |  22 +-
 .../OverflowMenu/OverflowMenu.stories.js      |  14 +-
 .../ProgressIndicator/ProgressIndicator.mdx   |  11 +-
 .../components/RadioButton/RadioButton.mdx    |  11 +-
 .../SkeletonPlaceholder.mdx                   |  12 +-
 .../SkeletonPlaceholder.stories.js            |   4 +-
 .../components/SkeletonText/SkeletonText.mdx  |  13 +-
 .../SkeletonText/SkeletonText.stories.js      |   4 +-
 packages/react/src/components/Tabs/Tabs.mdx   |  62 +-
 .../react/src/components/Tabs/Tabs.stories.js | 782 +++++++++---------
 .../components/Tag/InteractiveTag.stories.js  |  20 +-
 packages/react/src/components/Tag/Tag.mdx     |  61 +-
 .../react/src/components/Tag/Tag.stories.js   | 129 +--
 packages/react/src/components/Text/Text.mdx   |   2 +-
 .../Text/{Text-story.js => Text.stories.js}   |  68 +-
 .../src/components/TextInput/TextInput.mdx    |  21 +-
 .../components/TextInput/TextInput.stories.js |  12 +-
 packages/react/src/components/Tile/Tile.mdx   |  72 +-
 .../react/src/components/Tile/Tile.stories.js | 127 +--
 .../components/Tooltip/DefinitionTooltip.mdx  |  11 +-
 .../react/src/components/Tooltip/Tooltip.mdx  |  31 +-
 .../src/components/TreeView/TreeView.mdx      |  43 +-
 .../components/TreeView/Treeview.stories.js   | 535 +++++++++++-
 65 files changed, 3046 insertions(+), 1303 deletions(-)
 rename packages/react/src/components/Text/{Text-story.js => Text.stories.js} (67%)

diff --git a/packages/react/previewer/codePreviewer.tsx b/packages/react/previewer/codePreviewer.tsx
index 49fd5a8f83c9..821cb068eaa1 100644
--- a/packages/react/previewer/codePreviewer.tsx
+++ b/packages/react/previewer/codePreviewer.tsx
@@ -53,12 +53,12 @@ export const stackblitzPrefillConfig = (
     return iconNames.filter((iconName) => {
       // Grab the component to convert in "<Component" and "{Component}"
       const regexComponent = new RegExp(`<${iconName}\\b`, 'g');
-      const regexCurlBraces = new RegExp(`{${iconName}}\\s\\b`, 'g');
+      const regexCurlBraces = new RegExp(`{\\s*${iconName}\\s*}`, 'g');
 
       // Check if the component exists in the `storyCode`
       if (
         (regexComponent.test(storyCode) || regexCurlBraces.test(storyCode)) &&
-        !componentNames.indexOf(iconName)
+        !componentNames.includes(iconName)
       ) {
         return iconName;
       }
diff --git a/packages/react/src/components/Accordion/Accordion.mdx b/packages/react/src/components/Accordion/Accordion.mdx
index 764609f25caa..1a25164687b1 100644
--- a/packages/react/src/components/Accordion/Accordion.mdx
+++ b/packages/react/src/components/Accordion/Accordion.mdx
@@ -1,6 +1,7 @@
 import Accordion, { AccordionItem, AccordionSkeleton } from '../Accordion';
 import { ArgTypes, Canvas, Meta } from '@storybook/blocks';
 import * as AccordionStories from './Accordion.stories';
+import { stackblitzPrefillConfig } from '../../../previewer/codePreviewer';
 
 <Meta isTemplate />
 
@@ -36,7 +37,15 @@ You can configure the accordion item's heading using the `title` prop.
 Everything you pass in as a child of `AccordionItem` will be rendered in the
 accordion's panel.
 
-<Canvas of={AccordionStories.Default} />
+<Canvas
+  of={AccordionStories.Default}
+  additionalActions={[
+    {
+      title: 'Open in Stackblitz',
+      onClick: () => stackblitzPrefillConfig(AccordionStories.Default),
+    },
+  ]}
+/>
 
 ## Skeleton state
 
@@ -44,7 +53,15 @@ You can use the `AccordionSkeleton` component to render a skeleton variant of an
 accordion. This is useful to display while content in your accordion is being
 fetched from an external resource like an API.
 
-<Canvas of={AccordionStories.Skeleton} />
+<Canvas
+  of={AccordionStories.Skeleton}
+  additionalActions={[
+    {
+      title: 'Open in Stackblitz',
+      onClick: () => stackblitzPrefillConfig(AccordionStories.Skeleton),
+    },
+  ]}
+/>
 
 ## Component API
 
diff --git a/packages/react/src/components/Breadcrumb/Breadcrumb.mdx b/packages/react/src/components/Breadcrumb/Breadcrumb.mdx
index 509d5174a0a8..52085f4f7e9f 100644
--- a/packages/react/src/components/Breadcrumb/Breadcrumb.mdx
+++ b/packages/react/src/components/Breadcrumb/Breadcrumb.mdx
@@ -1,6 +1,7 @@
 import { Story, Canvas, ArgTypes, Meta } from '@storybook/blocks';
 import { Breadcrumb, BreadcrumbItem, BreadcrumbSkeleton } from '../Breadcrumb';
 import * as BreadcrumbStories from './Breadcrumb.stories';
+import { stackblitzPrefillConfig } from '../../../previewer/codePreviewer';
 
 <Meta isTemplate />
 
@@ -27,7 +28,15 @@ You can build a breadcrumb using a combination of the `Breadcrumb` and
 `BreadcrumbItem` components as `children` and each `BreadcrumbItem` is
 responsible for displaying the page links in the hierarchy.
 
-<Canvas of={BreadcrumbStories.Default} />
+<Canvas
+  of={BreadcrumbStories.Default}
+  additionalActions={[
+    {
+      title: 'Open in Stackblitz',
+      onClick: () => stackblitzPrefillConfig(BreadcrumbStories.Default),
+    },
+  ]}
+/>
 
 ## Breadcrumb with `OverflowMenu`
 
@@ -36,7 +45,16 @@ The first and last two page links should be shown, but the remaining breadcrumbs
 in between are condensed into an overflow menu. Breadcrumbs should never wrap
 onto a second line.
 
-<Canvas of={BreadcrumbStories.BreadcrumbWithOverflowMenu} />
+<Canvas
+  of={BreadcrumbStories.BreadcrumbWithOverflowMenu}
+  additionalActions={[
+    {
+      title: 'Open in Stackblitz',
+      onClick: () =>
+        stackblitzPrefillConfig(BreadcrumbStories.BreadcrumbWithOverflowMenu),
+    },
+  ]}
+/>
 
 ## Skeleton state
 
@@ -44,7 +62,15 @@ You can use the `BreadcrumbSkeleton` component to render a skeleton variant of a
 breadcrumb. This is useful to display while content in your breadcrumb is being
 fetched from an external resource like an API.
 
-<Canvas of={BreadcrumbStories.Skeleton} />
+<Canvas
+  of={BreadcrumbStories.Skeleton}
+  additionalActions={[
+    {
+      title: 'Open in Stackblitz',
+      onClick: () => stackblitzPrefillConfig(BreadcrumbStories.Skeleton),
+    },
+  ]}
+/>
 
 ## Component API
 
diff --git a/packages/react/src/components/Breadcrumb/Breadcrumb.stories.js b/packages/react/src/components/Breadcrumb/Breadcrumb.stories.js
index 5bf74f259764..a846d3152d2f 100644
--- a/packages/react/src/components/Breadcrumb/Breadcrumb.stories.js
+++ b/packages/react/src/components/Breadcrumb/Breadcrumb.stories.js
@@ -71,4 +71,6 @@ BreadcrumbWithOverflowMenu.argTypes = {
   ...sharedArgTypes,
 };
 
-export const Skeleton = () => <BreadcrumbSkeleton />;
+export const Skeleton = () => {
+  return <BreadcrumbSkeleton />;
+};
diff --git a/packages/react/src/components/Button/Button.mdx b/packages/react/src/components/Button/Button.mdx
index 5c07b5f4a1eb..d0effb97fb10 100644
--- a/packages/react/src/components/Button/Button.mdx
+++ b/packages/react/src/components/Button/Button.mdx
@@ -49,10 +49,42 @@ communicate calls to action to the user and allow users to interact with pages
 in a variety of ways. `Button` labels express what action will occur when the
 user interacts with it.
 
-<Canvas of={ButtonStories.Default} />
-<Canvas of={ButtonStories.Secondary} />
-<Canvas of={ButtonStories.Tertiary} />
-<Canvas of={ButtonStories.Ghost} />
+<Canvas
+  of={ButtonStories.Default}
+  additionalActions={[
+    {
+      title: 'Open in Stackblitz',
+      onClick: () => stackblitzPrefillConfig(ButtonStories.Default),
+    },
+  ]}
+/>
+<Canvas
+  of={ButtonStories.Secondary}
+  additionalActions={[
+    {
+      title: 'Open in Stackblitz',
+      onClick: () => stackblitzPrefillConfig(ButtonStories.Secondary),
+    },
+  ]}
+/>
+<Canvas
+  of={ButtonStories.Tertiary}
+  additionalActions={[
+    {
+      title: 'Open in Stackblitz',
+      onClick: () => stackblitzPrefillConfig(ButtonStories.Tertiary),
+    },
+  ]}
+/>
+<Canvas
+  of={ButtonStories.Ghost}
+  additionalActions={[
+    {
+      title: 'Open in Stackblitz',
+      onClick: () => stackblitzPrefillConfig(ButtonStories.Ghost),
+    },
+  ]}
+/>
 
 ## Danger Buttons
 
@@ -64,7 +96,15 @@ danger button style. However, if a destructive action is just one of several
 actions a user could choose from, then a lower emphasis style like the tertiary
 danger button or the ghost danger button may be more appropriate.
 
-<Canvas of={ButtonStories.Danger} />
+<Canvas
+  of={ButtonStories.Danger}
+  additionalActions={[
+    {
+      title: 'Open in Stackblitz',
+      onClick: () => stackblitzPrefillConfig(ButtonStories.Danger),
+    },
+  ]}
+/>
 
 ## Icon-only Buttons
 
@@ -73,7 +113,15 @@ Icon buttons can take the form of Primary, Secondary, Tertiary, and Ghost but
 most commonly will be styled as primary or ghost buttons. Icon only buttons do
 not support Danger, Danger tertiary, or Danger ghost.
 
-<Canvas of={ButtonStories.IconButton} />
+<Canvas
+  of={ButtonStories.IconButton}
+  additionalActions={[
+    {
+      title: 'Open in Stackblitz',
+      onClick: () => stackblitzPrefillConfig(ButtonStories.IconButton),
+    },
+  ]}
+/>
 
 ## Set of Buttons
 
@@ -84,7 +132,15 @@ Negative action buttons will be on the left. Positive action buttons should be
 on the right. When these two types buttons are paired in the correct order, they
 will automatically space themselves apart.
 
-<Canvas of={ButtonStories.SetOfButtons} />
+<Canvas
+  of={ButtonStories.SetOfButtons}
+  additionalActions={[
+    {
+      title: 'Open in Stackblitz',
+      onClick: () => stackblitzPrefillConfig(ButtonStories.SetOfButtons),
+    },
+  ]}
+/>
 
 ## Skeleton state
 
@@ -92,7 +148,15 @@ You can use the `ButtonSkeleton` component to render a skeleton variant of a
 button. This is useful to display on initial page load to indicate to users that
 content is being loaded.
 
-<Canvas of={ButtonStories.Skeleton} />
+<Canvas
+  of={ButtonStories.Skeleton}
+  additionalActions={[
+    {
+      title: 'Open in Stackblitz',
+      onClick: () => stackblitzPrefillConfig(ButtonStories.Skeleton),
+    },
+  ]}
+/>
 
 ## Component API
 
diff --git a/packages/react/src/components/Button/Button.stories.js b/packages/react/src/components/Button/Button.stories.js
index 551a58742178..dd6614e4a923 100644
--- a/packages/react/src/components/Button/Button.stories.js
+++ b/packages/react/src/components/Button/Button.stories.js
@@ -130,10 +130,12 @@ export const SetOfButtons = (args) => {
   );
 };
 
-export const Skeleton = () => (
-  <div>
-    <ButtonSkeleton />
-    &nbsp;
-    <ButtonSkeleton size="sm" />
-  </div>
-);
+export const Skeleton = () => {
+  return (
+    <div>
+      <ButtonSkeleton />
+      &nbsp;
+      <ButtonSkeleton size="sm" />
+    </div>
+  );
+};
diff --git a/packages/react/src/components/Checkbox/Checkbox.mdx b/packages/react/src/components/Checkbox/Checkbox.mdx
index c8a3defbf3f2..ce1b5f4ea44e 100644
--- a/packages/react/src/components/Checkbox/Checkbox.mdx
+++ b/packages/react/src/components/Checkbox/Checkbox.mdx
@@ -1,6 +1,7 @@
 import { Story, Canvas, ArgTypes, Meta } from '@storybook/blocks';
 import Checkbox, { CheckboxSkeleton } from '../Checkbox';
 import * as CheckboxStories from './Checkbox.stories';
+import { stackblitzPrefillConfig } from '../../../previewer/codePreviewer';
 
 <Meta isTemplate />
 
@@ -24,7 +25,15 @@ import * as CheckboxStories from './Checkbox.stories';
 You can build a checkbox using the `Checkbox` in combination with a `<fieldset>`
 element to group controls and `<legend>` element for the label.
 
-<Canvas of={CheckboxStories.Default} />
+<Canvas
+  of={CheckboxStories.Default}
+  additionalActions={[
+    {
+      title: 'Open in Stackblitz',
+      onClick: () => stackblitzPrefillConfig(CheckboxStories.Default),
+    },
+  ]}
+/>
 
 ### Controlled example
 
@@ -50,7 +59,15 @@ You can use the `CheckboxSkeleton` component to render a skeleton variant of a
 checkbox. This is useful to display while content in your checkbox is being
 fetched from an external resource like an API.
 
-<Canvas of={CheckboxStories.Skeleton} />
+<Canvas
+  of={CheckboxStories.Skeleton}
+  additionalActions={[
+    {
+      title: 'Open in Stackblitz',
+      onClick: () => stackblitzPrefillConfig(CheckboxStories.Skeleton),
+    },
+  ]}
+/>
 
 ## Component API
 
diff --git a/packages/react/src/components/Checkbox/Checkbox.stories.js b/packages/react/src/components/Checkbox/Checkbox.stories.js
index f792661649c1..fdb03bc578b0 100644
--- a/packages/react/src/components/Checkbox/Checkbox.stories.js
+++ b/packages/react/src/components/Checkbox/Checkbox.stories.js
@@ -20,11 +20,6 @@ const checkboxEvents = {
   labelText: 'Checkbox label',
 };
 
-const fieldsetCheckboxProps = () => ({
-  className: 'some-class',
-  legendText: 'Group label',
-});
-
 export default {
   title: 'Components/Checkbox',
   component: Checkbox,
@@ -146,7 +141,7 @@ const sharedArgTypes = {
 };
 
 export const Default = (args) => (
-  <CheckboxGroup {...fieldsetCheckboxProps()} {...args}>
+  <CheckboxGroup className="some-class" legendText="Group label" {...args}>
     <Checkbox labelText={`Checkbox label`} id="checkbox-label-1" />
     <Checkbox labelText={`Checkbox label`} id="checkbox-label-2" />
   </CheckboxGroup>
@@ -162,7 +157,8 @@ export const Horizontal = (args) => {
   return (
     <CheckboxGroup
       orientation="horizontal"
-      {...fieldsetCheckboxProps()}
+      className="some-class"
+      legendText="Group label"
       helperText="Helper text goes here"
       {...args}>
       <Checkbox labelText={`Checkbox label`} id="checkbox-label-1" />
@@ -204,7 +200,9 @@ export const Single = () => {
   );
 };
 
-export const Skeleton = () => <CheckboxSkeleton />;
+export const Skeleton = () => {
+  return <CheckboxSkeleton />;
+};
 
 const AILabelFunc = (kind) => (
   <AILabel className="ai-label-container" kind={kind}>
diff --git a/packages/react/src/components/CodeSnippet/CodeSnippet.mdx b/packages/react/src/components/CodeSnippet/CodeSnippet.mdx
index 86ef45a9d98b..902e45e996eb 100644
--- a/packages/react/src/components/CodeSnippet/CodeSnippet.mdx
+++ b/packages/react/src/components/CodeSnippet/CodeSnippet.mdx
@@ -1,6 +1,7 @@
 import { Story, ArgTypes, Canvas, Meta } from '@storybook/blocks';
 import CodeSnippet from '../CodeSnippet';
 import * as CodeSnippetStories from './CodeSnippet.stories';
+import { stackblitzPrefillConfig } from '../../../previewer/codePreviewer';
 
 <Meta isTemplate />
 
@@ -29,7 +30,15 @@ Code snippets are strings or small blocks of reusable code that are copyable. We
 don't provide the copy functionality and recommend
 [clipboard.js](https://clipboardjs.com/).
 
-<Canvas of={CodeSnippetStories.Inline} />
+<Canvas
+  of={CodeSnippetStories.Inline}
+  additionalActions={[
+    {
+      title: 'Open in Stackblitz',
+      onClick: () => stackblitzPrefillConfig(CodeSnippetStories.Inline),
+    },
+  ]}
+/>
 
 ## Skeleton state
 
@@ -37,14 +46,30 @@ You can use the `CodeSnippetSkeleton` component to render a skeleton variant of
 an code snippet. This is useful to display while content in your code snippet is
 being fetched from an external resource like an API.
 
-<Canvas of={CodeSnippetStories.Skeleton} />
+<Canvas
+  of={CodeSnippetStories.Skeleton}
+  additionalActions={[
+    {
+      title: 'Open in Stackblitz',
+      onClick: () => stackblitzPrefillConfig(CodeSnippetStories.Skeleton),
+    },
+  ]}
+/>
 
 ## Inline
 
 Inline code snippet's are used for distinguishing a symbol, variable, function
 name or similar small piece of code from it's surrounding text.
 
-<Canvas of={CodeSnippetStories.Inline} />
+<Canvas
+  of={CodeSnippetStories.Inline}
+  additionalActions={[
+    {
+      title: 'Open in Stackblitz',
+      onClick: () => stackblitzPrefillConfig(CodeSnippetStories.Inline),
+    },
+  ]}
+/>
 
 ## Multi-line
 
@@ -53,7 +78,15 @@ line. They're shown in a block and useful for showing classes, functions, blocks
 of styles and the like. There is an option to wrap the lines displayed if the
 lines are longer than the container.
 
-<Canvas of={CodeSnippetStories.Multiline} />
+<Canvas
+  of={CodeSnippetStories.Multiline}
+  additionalActions={[
+    {
+      title: 'Open in Stackblitz',
+      onClick: () => stackblitzPrefillConfig(CodeSnippetStories.Multiline),
+    },
+  ]}
+/>
 
 ## Single-line
 
@@ -61,7 +94,15 @@ Single line code snippets are used when showing code that fits on one line
 without wrapping. Useful for calling out terminal commands, function
 invocations, expressions etc.
 
-<Canvas of={CodeSnippetStories.Singleline} />
+<Canvas
+  of={CodeSnippetStories.Singleline}
+  additionalActions={[
+    {
+      title: 'Open in Stackblitz',
+      onClick: () => stackblitzPrefillConfig(CodeSnippetStories.Singleline),
+    },
+  ]}
+/>
 
 ## Component API
 
diff --git a/packages/react/src/components/CodeSnippet/CodeSnippet.stories.js b/packages/react/src/components/CodeSnippet/CodeSnippet.stories.js
index 452ad42ef309..00a9f3822b38 100644
--- a/packages/react/src/components/CodeSnippet/CodeSnippet.stories.js
+++ b/packages/react/src/components/CodeSnippet/CodeSnippet.stories.js
@@ -29,15 +29,18 @@ export default {
   },
 };
 
-export const Inline = () => (
-  <CodeSnippet type="inline" feedback="Copied to clipboard">
-    {'node -v'}
-  </CodeSnippet>
-);
+export const Inline = () => {
+  return (
+    <CodeSnippet type="inline" feedback="Copied to clipboard">
+      {'node -v'}
+    </CodeSnippet>
+  );
+};
 
-export const Multiline = () => (
-  <CodeSnippet type="multi" feedback="Copied to clipboard">
-    {`  "scripts": {
+export const Multiline = () => {
+  return (
+    <CodeSnippet type="multi" feedback="Copied to clipboard">
+      {`  "scripts": {
     "build": "lerna run build --stream --prefix --npm-client yarn",
     "ci-check": "carbon-cli ci-check",
     "clean": "lerna run clean && lerna clean --yes && rimraf node_modules",
@@ -66,28 +69,34 @@ export const Multiline = () => (
     "@babel/preset-react": "^7.10.0",
     "@babel/runtime": "^7.10.0",
     "@commitlint/cli": "^8.3.5",`}
-  </CodeSnippet>
-);
-
-export const Singleline = () => (
-  <CodeSnippet type="single" feedback="Copied to clipboard">
-    yarn add carbon-components@latest carbon-components-react@latest
-    @carbon/icons-react@latest carbon-icons@latest
-  </CodeSnippet>
-);
+    </CodeSnippet>
+  );
+};
 
-export const InlineWithLayer = () => (
-  <WithLayer>
-    <CodeSnippet type="inline" feedback="Copied to clipboard">
-      {'node -v'}
+export const Singleline = () => {
+  return (
+    <CodeSnippet type="single" feedback="Copied to clipboard">
+      yarn add carbon-components@latest carbon-components-react@latest
+      @carbon/icons-react@latest carbon-icons@latest
     </CodeSnippet>
-  </WithLayer>
-);
+  );
+};
 
-export const MultilineWithLayer = () => (
-  <WithLayer>
-    <CodeSnippet type="multi" feedback="Copied to clipboard">
-      {`  "scripts": {
+export const InlineWithLayer = () => {
+  return (
+    <WithLayer>
+      <CodeSnippet type="inline" feedback="Copied to clipboard">
+        {'node -v'}
+      </CodeSnippet>
+    </WithLayer>
+  );
+};
+
+export const MultilineWithLayer = () => {
+  return (
+    <WithLayer>
+      <CodeSnippet type="multi" feedback="Copied to clipboard">
+        {`  "scripts": {
       "build": "lerna run build --stream --prefix --npm-client yarn",
       "ci-check": "carbon-cli ci-check",
       "clean": "lerna run clean && lerna clean --yes && rimraf node_modules",
@@ -116,22 +125,27 @@ export const MultilineWithLayer = () => (
         "@babel/preset-react": "^7.10.0",
         "@babel/runtime": "^7.10.0",
         "@commitlint/cli": "^8.3.5",`}
-    </CodeSnippet>
-  </WithLayer>
-);
+      </CodeSnippet>
+    </WithLayer>
+  );
+};
 
-export const SinglelineWithLayer = () => (
-  <WithLayer>
-    <CodeSnippet type="single" feedback="Copied to clipboard">
-      yarn add carbon-components@latest carbon-components-react@latest
-      @carbon/icons-react@latest carbon-icons@latest
-    </CodeSnippet>
-  </WithLayer>
-);
+export const SinglelineWithLayer = () => {
+  return (
+    <WithLayer>
+      <CodeSnippet type="single" feedback="Copied to clipboard">
+        yarn add carbon-components@latest carbon-components-react@latest
+        @carbon/icons-react@latest carbon-icons@latest
+      </CodeSnippet>
+    </WithLayer>
+  );
+};
 
-export const Skeleton = () => (
-  <div>
-    <CodeSnippetSkeleton type="single" style={{ marginBottom: 8 }} />
-    <CodeSnippetSkeleton type="multi" />
-  </div>
-);
+export const Skeleton = () => {
+  return (
+    <div>
+      <CodeSnippetSkeleton type="single" style={{ marginBottom: 8 }} />
+      <CodeSnippetSkeleton type="multi" />
+    </div>
+  );
+};
diff --git a/packages/react/src/components/ComboBox/ComboBox.mdx b/packages/react/src/components/ComboBox/ComboBox.mdx
index 8f9d956e2e4c..d39525a4c24e 100644
--- a/packages/react/src/components/ComboBox/ComboBox.mdx
+++ b/packages/react/src/components/ComboBox/ComboBox.mdx
@@ -33,7 +33,15 @@ import { stackblitzPrefillConfig } from '../../../previewer/codePreviewer';
 A combobox allows the user to make a selection from a predefined list of options
 and is typically used when there are a large amount of options to choose from.
 
-<Canvas of={ComboBoxStories.Default} />
+<Canvas
+  of={ComboBoxStories.Default}
+  additionalActions={[
+    {
+      title: 'Open in Stackblitz',
+      onClick: () => stackblitzPrefillConfig(ComboBoxStories.Default),
+    },
+  ]}
+/>
 
 ## Component API
 
@@ -143,7 +151,15 @@ const items = ['Option 1', 'Option 2', 'Option 3']
 
 You can use `selectedItem` for a fully controlled component.
 
-<Canvas of={ComboBoxStories._fullyControlled} />
+<Canvas
+  of={ComboBoxStories._fullyControlled}
+  additionalActions={[
+    {
+      title: 'Open in Stackblitz',
+      onClick: () => stackblitzPrefillConfig(ComboBoxStories._fullyControlled),
+    },
+  ]}
+/>
 
 ```jsx
 const options = [
diff --git a/packages/react/src/components/ComboBox/ComboBox.stories.js b/packages/react/src/components/ComboBox/ComboBox.stories.js
index 7621e0c2d319..801b3c2d64c7 100644
--- a/packages/react/src/components/ComboBox/ComboBox.stories.js
+++ b/packages/react/src/components/ComboBox/ComboBox.stories.js
@@ -347,7 +347,7 @@ export const _fullyControlled = (args) => {
       text: 'Option 3',
     },
   ];
-  const [value, setValue] = useState(options[0]);
+  const [value, setValue] = React.useState(options[0]);
   const onChange = ({ selectedItem }) => {
     setValue(selectedItem);
   };
diff --git a/packages/react/src/components/ComposedModal/ComposedModal.mdx b/packages/react/src/components/ComposedModal/ComposedModal.mdx
index 02769808e242..ecaff614a347 100644
--- a/packages/react/src/components/ComposedModal/ComposedModal.mdx
+++ b/packages/react/src/components/ComposedModal/ComposedModal.mdx
@@ -42,7 +42,19 @@ import { stackblitzPrefillConfig } from '../../../previewer/codePreviewer';
 Modal content can be customized via the `<ModalHeader>`, `<ModalBody>` and
 `<ModalFooter>` components.
 
-<Canvas of={ComposedModalStories.WithStateManager} />
+<Canvas
+  of={ComposedModalStories.WithStateManager}
+  additionalActions={[
+    {
+      title: 'Open in Stackblitz',
+      onClick: () =>
+        stackblitzPrefillConfig(
+          ComposedModalStories.WithStateManager,
+          "import ReactDOM from 'react-dom';"
+        ),
+    },
+  ]}
+/>
 
 ## Component API
 
diff --git a/packages/react/src/components/ContainedList/ContainedList.mdx b/packages/react/src/components/ContainedList/ContainedList.mdx
index 6f59f04e2593..6709cb420035 100644
--- a/packages/react/src/components/ContainedList/ContainedList.mdx
+++ b/packages/react/src/components/ContainedList/ContainedList.mdx
@@ -1,5 +1,6 @@
 import { ArgTypes, Story, Canvas, Meta } from '@storybook/blocks';
 import * as ContainedListStories from './ContainedList.stories.js';
+import { stackblitzPrefillConfig } from '../../../previewer/codePreviewer';
 
 <Meta isTemplate />
 
@@ -26,7 +27,15 @@ import * as ContainedListStories from './ContainedList.stories.js';
 
 ## Overview
 
-<Canvas of={ContainedListStories.Default} />
+<Canvas
+  of={ContainedListStories.Default}
+  additionalActions={[
+    {
+      title: 'Open in Stackblitz',
+      onClick: () => stackblitzPrefillConfig(ContainedListStories.Default),
+    },
+  ]}
+/>
 
 ### Search
 
@@ -85,7 +94,16 @@ export const WithExpandableSearch = () => {
 };
 ```
 
-<Canvas of={ContainedListStories.WithExpandableSearch} />
+<Canvas
+  of={ContainedListStories.WithExpandableSearch}
+  additionalActions={[
+    {
+      title: 'Open in Stackblitz',
+      onClick: () =>
+        stackblitzPrefillConfig(ContainedListStories.WithExpandableSearch),
+    },
+  ]}
+/>
 
 #### Persistent Search:
 
@@ -140,7 +158,16 @@ export const WithPersistentSearch = () => {
 `ContainedList.ContainedListItem` is deprecated, use
 `import { ContainedListItem } from '@carbon/react` import instead.
 
-<Canvas of={ContainedListStories.WithPersistentSearch} />
+<Canvas
+  of={ContainedListStories.WithPersistentSearch}
+  additionalActions={[
+    {
+      title: 'Open in Stackblitz',
+      onClick: () =>
+        stackblitzPrefillConfig(ContainedListStories.WithPersistentSearch),
+    },
+  ]}
+/>
 
 ## Component API
 
diff --git a/packages/react/src/components/ContainedList/ContainedList.stories.js b/packages/react/src/components/ContainedList/ContainedList.stories.js
index 32851cccbfbc..6e6c95ad45f8 100644
--- a/packages/react/src/components/ContainedList/ContainedList.stories.js
+++ b/packages/react/src/components/ContainedList/ContainedList.stories.js
@@ -5,7 +5,7 @@
  * LICENSE file in the root directory of this source tree.
  */
 
-import React, { useEffect, useState } from 'react';
+import React, { useEffect } from 'react';
 
 import { action } from '@storybook/addon-actions';
 import {
@@ -136,13 +136,13 @@ export const WithActions = () => {
 };
 
 export const WithExpandableSearch = () => {
-  const [searchTerm, setSearchTerm] = useState('');
-  const [searchResults, setSearchResults] = useState([]);
+  const [searchTerm, setSearchTerm] = React.useState('');
+  const [searchResults, setSearchResults] = React.useState([]);
   const handleChange = (event) => {
     setSearchTerm(event.target.value);
   };
 
-  useEffect(() => {
+  React.useEffect(() => {
     const listItems = [
       'List item 1',
       'List item 2',
@@ -178,13 +178,13 @@ export const WithExpandableSearch = () => {
 };
 
 export const WithPersistentSearch = () => {
-  const [searchTerm, setSearchTerm] = useState('');
-  const [searchResults, setSearchResults] = useState([]);
+  const [searchTerm, setSearchTerm] = React.useState('');
+  const [searchResults, setSearchResults] = React.useState([]);
   const handleChange = (event) => {
     setSearchTerm(event.target.value);
   };
 
-  useEffect(() => {
+  React.useEffect(() => {
     const listItems = [
       'List item 1',
       'List item 2',
diff --git a/packages/react/src/components/ContentSwitcher/ContentSwitcher.mdx b/packages/react/src/components/ContentSwitcher/ContentSwitcher.mdx
index d52de1e5c7ad..16f1e8ee4d14 100644
--- a/packages/react/src/components/ContentSwitcher/ContentSwitcher.mdx
+++ b/packages/react/src/components/ContentSwitcher/ContentSwitcher.mdx
@@ -2,6 +2,7 @@ import { Story, ArgTypes, Canvas, Meta } from '@storybook/blocks';
 import ContentSwitcher from '../ContentSwitcher';
 import Switch from '../Switch';
 import * as ContentSwitcherStories from './ContentSwitcher.stories.js';
+import { stackblitzPrefillConfig } from '../../../previewer/codePreviewer';
 
 <Meta isTemplate />
 
@@ -39,7 +40,15 @@ Content switchers allow users to toggle between two or more content sections
 within the same space on screen. Only one content section is shown at a time.
 Create Switch components for each section in the content switcher.
 
-<Canvas of={ContentSwitcherStories.Default} />
+<Canvas
+  of={ContentSwitcherStories.Default}
+  additionalActions={[
+    {
+      title: 'Open in Stackblitz',
+      onClick: () => stackblitzPrefillConfig(ContentSwitcherStories.Default),
+    },
+  ]}
+/>
 
 ## Component API
 
diff --git a/packages/react/src/components/CopyButton/CopyButton.mdx b/packages/react/src/components/CopyButton/CopyButton.mdx
index f7c53d3650c4..44aca3d37b23 100644
--- a/packages/react/src/components/CopyButton/CopyButton.mdx
+++ b/packages/react/src/components/CopyButton/CopyButton.mdx
@@ -1,5 +1,6 @@
 import { ArgTypes, Story, Canvas, Meta } from '@storybook/blocks';
 import * as CopyButtonStories from './CopyButton.stories.js';
+import { stackblitzPrefillConfig } from '../../../previewer/codePreviewer';
 
 <Meta isTemplate />
 
@@ -25,7 +26,15 @@ The copy button should be accompanied by a tooltip. Tooltip feedback text should
 be concise and describe the action taken when the user clicks the copy button.
 By default we display the text “Copied!”.
 
-<Canvas of={CopyButtonStories.Default} />
+<Canvas
+  of={CopyButtonStories.Default}
+  additionalActions={[
+    {
+      title: 'Open in Stackblitz',
+      onClick: () => stackblitzPrefillConfig(CopyButtonStories.Default),
+    },
+  ]}
+/>
 
 ## Component API
 
diff --git a/packages/react/src/components/DataTable/DataTable.mdx b/packages/react/src/components/DataTable/DataTable.mdx
index 0fe291de1722..e4f2af5fed99 100644
--- a/packages/react/src/components/DataTable/DataTable.mdx
+++ b/packages/react/src/components/DataTable/DataTable.mdx
@@ -8,6 +8,9 @@ import {
   TableBody,
 } from '../DataTable';
 
+import * as DataTableBasicStories from './stories/DataTable-basic.stories';
+import { stackblitzPrefillConfig } from '../../../previewer/codePreviewer';
+
 <Meta isTemplate />
 
 # DataTable
@@ -18,7 +21,15 @@ import {
 &nbsp;|&nbsp;
 [Accessibility](https://www.carbondesignsystem.com/components/data-table/accessibility)
 
-<Canvas id="components-datatable-basic--default" />
+<Canvas
+  of={DataTableBasicStories.Default}
+  additionalActions={[
+    {
+      title: 'Open in Stackblitz',
+      onClick: () => stackblitzPrefillConfig(DataTableBasicStories.Default),
+    },
+  ]}
+/>
 
 {/* <!-- START doctoc generated TOC please keep comment here to allow auto update --> <!-- DON'T EDIT THIS SECTION, INSTEAD RE-RUN doctoc TO UPDATE --> */}
 
diff --git a/packages/react/src/components/DatePicker/DatePicker.mdx b/packages/react/src/components/DatePicker/DatePicker.mdx
index 5340b36218d9..41dddd128452 100644
--- a/packages/react/src/components/DatePicker/DatePicker.mdx
+++ b/packages/react/src/components/DatePicker/DatePicker.mdx
@@ -2,6 +2,7 @@ import { Story, ArgTypes, Canvas, Meta } from '@storybook/blocks';
 import DatePicker from '../DatePicker';
 import DatePickerInput from '../DatePickerInput';
 import * as DatePickerStories from './DatePicker.stories';
+import { stackblitzPrefillConfig } from '../../../previewer/codePreviewer';
 
 <Meta isTemplate />
 
@@ -54,7 +55,15 @@ The simple date input provides the user with only a text field in which they can
 manually input a date. It allows dates to be entered without adding unnecessary
 interactions that come with the calendar menu or a dropdown.
 
-<Canvas of={DatePickerStories.Simple} />
+<Canvas
+  of={DatePickerStories.Simple}
+  additionalActions={[
+    {
+      title: 'Open in Stackblitz',
+      onClick: () => stackblitzPrefillConfig(DatePickerStories.Simple),
+    },
+  ]}
+/>
 
 ### Range Datepicker
 
@@ -62,8 +71,26 @@ Calendar pickers default to showing today’s date when opened and only one mont
 is shown at a time. Calendar pickers allow users to navigate through months and
 years, however they work best when used for recent or near future dates.
 
-<Canvas of={DatePickerStories.SingleWithCalendar} />
-<Canvas of={DatePickerStories.RangeWithCalendar} />
+<Canvas
+  of={DatePickerStories.SingleWithCalendar}
+  additionalActions={[
+    {
+      title: 'Open in Stackblitz',
+      onClick: () =>
+        stackblitzPrefillConfig(DatePickerStories.SingleWithCalendar),
+    },
+  ]}
+/>
+<Canvas
+  of={DatePickerStories.RangeWithCalendar}
+  additionalActions={[
+    {
+      title: 'Open in Stackblitz',
+      onClick: () =>
+        stackblitzPrefillConfig(DatePickerStories.RangeWithCalendar),
+    },
+  ]}
+/>
 
 ### Skeleton state
 
@@ -71,7 +98,15 @@ You can use the `DatePickerSkeleton` component to render a skeleton variant of a
 `DatePicker`. This is useful to display while an initial date range in your
 `DatePicker` is being fetched from an external resource like an API.
 
-<Canvas of={DatePickerStories.Skeleton} />
+<Canvas
+  of={DatePickerStories.Skeleton}
+  additionalActions={[
+    {
+      title: 'Open in Stackblitz',
+      onClick: () => stackblitzPrefillConfig(DatePickerStories.Skeleton),
+    },
+  ]}
+/>
 
 ## Component API
 
diff --git a/packages/react/src/components/DatePicker/DatePicker.stories.js b/packages/react/src/components/DatePicker/DatePicker.stories.js
index 11c54fd8d0d8..8848a2d75f67 100644
--- a/packages/react/src/components/DatePicker/DatePicker.stories.js
+++ b/packages/react/src/components/DatePicker/DatePicker.stories.js
@@ -293,7 +293,9 @@ export const RangeWithCalendarWithLayer = (args) => (
 
 RangeWithCalendarWithLayer.argTypes = { ...sharedArgTypes };
 
-export const Skeleton = () => <DatePickerSkeleton range />;
+export const Skeleton = () => {
+  return <DatePickerSkeleton range />;
+};
 
 const aiLabel = (
   <AILabel className="ai-label-container">
diff --git a/packages/react/src/components/Dropdown/Dropdown.mdx b/packages/react/src/components/Dropdown/Dropdown.mdx
index 9471c11ae4b9..3bb86fca8cac 100644
--- a/packages/react/src/components/Dropdown/Dropdown.mdx
+++ b/packages/react/src/components/Dropdown/Dropdown.mdx
@@ -2,6 +2,7 @@ import { Story, ArgTypes, Canvas, Meta } from '@storybook/blocks';
 import Dropdown from '../Dropdown';
 import DropdownSkeleton from './Dropdown.Skeleton';
 import * as DropdownStories from './Dropdown.stories';
+import { stackblitzPrefillConfig } from '../../../previewer/codePreviewer';
 
 <Meta isTemplate />
 
@@ -43,14 +44,30 @@ Dropdowns present a list of options from which a user can select one option, or
 several. A selected option can represent a value in a form, or can be used as an
 action to filter or sort existing content.
 
-<Canvas of={DropdownStories.Default} />
+<Canvas
+  of={DropdownStories.Default}
+  additionalActions={[
+    {
+      title: 'Open in Stackblitz',
+      onClick: () => stackblitzPrefillConfig(DropdownStories.Default),
+    },
+  ]}
+/>
 
 ### Inline dropdown
 
 You can place a `Dropdown` inline with other content by using the `inline`
 variant
 
-<Canvas of={DropdownStories.Inline} />
+<Canvas
+  of={DropdownStories.Inline}
+  additionalActions={[
+    {
+      title: 'Open in Stackblitz',
+      onClick: () => stackblitzPrefillConfig(DropdownStories.Inline),
+    },
+  ]}
+/>
 
 ### Skeleton state
 
@@ -58,7 +75,15 @@ You can use the `DropdownSkeleton` component to render a skeleton variant of a
 `Dropdown`. This is useful to display on initial page load or when data needs to
 be fetched from an external API.
 
-<Canvas of={DropdownStories.Skeleton} />
+<Canvas
+  of={DropdownStories.Skeleton}
+  additionalActions={[
+    {
+      title: 'Open in Stackblitz',
+      onClick: () => stackblitzPrefillConfig(DropdownStories.Skeleton),
+    },
+  ]}
+/>
 
 ## Component API
 
diff --git a/packages/react/src/components/Dropdown/Dropdown.stories.js b/packages/react/src/components/Dropdown/Dropdown.stories.js
index 2c845a78a23c..218f06863035 100644
--- a/packages/react/src/components/Dropdown/Dropdown.stories.js
+++ b/packages/react/src/components/Dropdown/Dropdown.stories.js
@@ -155,20 +155,53 @@ const sharedArgTypes = {
   },
 };
 
-export const Default = (args) => (
-  <div style={{ width: 400 }}>
-    <Dropdown
-      id="default"
-      titleText="Dropdown label"
-      helperText="This is some helper text"
-      initialSelectedItem={items[1]}
-      label="Option 1"
-      items={items}
-      itemToString={(item) => (item ? item.text : '')}
-      {...args}
-    />
-  </div>
-);
+export const Default = (args) => {
+  const items = [
+    {
+      text: 'Lorem, ipsum dolor sit amet consectetur adipisicing elit.',
+    },
+    {
+      text: 'Option 1',
+    },
+    {
+      text: 'Option 2',
+    },
+    {
+      text: 'Option 3 - a disabled item',
+      disabled: true,
+    },
+    {
+      text: 'Option 4',
+    },
+    {
+      text: 'Option 5',
+    },
+    {
+      text: 'Option 6',
+    },
+    {
+      text: 'Option 7',
+    },
+    {
+      text: 'Option 8',
+    },
+  ];
+
+  return (
+    <div style={{ width: 400 }}>
+      <Dropdown
+        id="default"
+        titleText="Dropdown label"
+        helperText="This is some helper text"
+        initialSelectedItem={items[1]}
+        label="Option 1"
+        items={items}
+        itemToString={(item) => (item ? item.text : '')}
+        {...args}
+      />
+    </div>
+  );
+};
 
 Default.args = {
   ...sharedArgs,
@@ -178,43 +211,77 @@ Default.argTypes = {
   ...sharedArgTypes,
 };
 
-export const ExperimentalAutoAlign = (args) => (
-  <div style={{ width: 400 }}>
-    <div style={{ height: 300 }}></div>
-    <Dropdown
-      autoAlign={true}
-      id="default"
-      titleText="Dropdown label"
-      helperText="This is some helper text"
-      initialSelectedItem={items[1]}
-      label="Option 1"
-      items={items}
-      itemToString={(item) => (item ? item.text : '')}
-      direction="top"
-      {...args}
-    />
-    <div style={{ height: 800 }}></div>
-  </div>
-);
+export const ExperimentalAutoAlign = (args) => {
+  return (
+    <div style={{ width: 400 }}>
+      <div style={{ height: 300 }}></div>
+      <Dropdown
+        autoAlign={true}
+        id="default"
+        titleText="Dropdown label"
+        helperText="This is some helper text"
+        initialSelectedItem={items[1]}
+        label="Option 1"
+        items={items}
+        itemToString={(item) => (item ? item.text : '')}
+        direction="top"
+        {...args}
+      />
+      <div style={{ height: 800 }}></div>
+    </div>
+  );
+};
 
 ExperimentalAutoAlign.argTypes = {
   ...sharedArgTypes,
 };
 
-export const Inline = (args) => (
-  <div style={{ width: 600 }}>
-    <Dropdown
-      id="inline"
-      titleText="Inline dropdown label"
-      initialSelectedItem={items[1]}
-      label="Option 1"
-      type="inline"
-      items={items}
-      itemToString={(item) => (item ? item.text : '')}
-      {...args}
-    />
-  </div>
-);
+export const Inline = (args) => {
+  const items = [
+    {
+      text: 'Lorem, ipsum dolor sit amet consectetur adipisicing elit.',
+    },
+    {
+      text: 'Option 1',
+    },
+    {
+      text: 'Option 2',
+    },
+    {
+      text: 'Option 3 - a disabled item',
+      disabled: true,
+    },
+    {
+      text: 'Option 4',
+    },
+    {
+      text: 'Option 5',
+    },
+    {
+      text: 'Option 6',
+    },
+    {
+      text: 'Option 7',
+    },
+    {
+      text: 'Option 8',
+    },
+  ];
+  return (
+    <div style={{ width: 600 }}>
+      <Dropdown
+        id="inline"
+        titleText="Inline dropdown label"
+        initialSelectedItem={items[1]}
+        label="Option 1"
+        type="inline"
+        items={items}
+        itemToString={(item) => (item ? item.text : '')}
+        {...args}
+      />
+    </div>
+  );
+};
 
 Inline.argTypes = {
   ...sharedArgTypes,
@@ -266,11 +333,13 @@ InlineWithLayer.argTypes = {
   ...sharedArgTypes,
 };
 
-export const Skeleton = () => (
-  <div style={{ width: 300 }}>
-    <DropdownSkeleton />
-  </div>
-);
+export const Skeleton = () => {
+  return (
+    <div style={{ width: 300 }}>
+      <DropdownSkeleton />
+    </div>
+  );
+};
 
 const aiLabel = (
   <AILabel className="ai-label-container">
diff --git a/packages/react/src/components/Form/Form.mdx b/packages/react/src/components/Form/Form.mdx
index cf877a42be36..654c6d581cdf 100644
--- a/packages/react/src/components/Form/Form.mdx
+++ b/packages/react/src/components/Form/Form.mdx
@@ -1,5 +1,6 @@
 import { ArgTypes, Canvas, Story, Meta } from '@storybook/blocks';
 import * as FormStories from './Form.stories';
+import { stackblitzPrefillConfig } from '../../../previewer/codePreviewer';
 
 <Meta isTemplate />
 
@@ -33,7 +34,15 @@ The `Form` component is configurable to fit various use cases and layouts. It is
 purposely simple out of the box, and users are responsible for configuring it to
 suit their needs.
 
-<Canvas of={FormStories.Default} />
+<Canvas
+  of={FormStories.Default}
+  additionalActions={[
+    {
+      title: 'Open in Stackblitz',
+      onClick: () => stackblitzPrefillConfig(FormStories.Default),
+    },
+  ]}
+/>
 
 ## Accessibility Considerations
 
diff --git a/packages/react/src/components/Form/Form.stories.js b/packages/react/src/components/Form/Form.stories.js
index ac7d51780a1f..e47a57a864ec 100644
--- a/packages/react/src/components/Form/Form.stories.js
+++ b/packages/react/src/components/Form/Form.stories.js
@@ -42,16 +42,6 @@ import '../AILabel/ailabel-story.scss';
 
 import mdx from './Form.mdx';
 
-const checkboxEvents = {
-  className: 'some-class',
-  labelText: 'Checkbox label',
-};
-
-const fieldsetCheckboxProps = () => ({
-  className: 'some-class',
-  legendText: 'Checkbox heading',
-});
-
 const numberInputProps = {
   className: 'some-class',
   id: 'number-input-1',
@@ -63,34 +53,6 @@ const numberInputProps = {
   iconDescription: 'Add/decrement number',
 };
 
-const fileUploaderEvents = {
-  buttonLabel: 'Add files',
-  className: 'some-class',
-};
-
-const fieldsetFileUploaderProps = {
-  className: 'some-class',
-  legendText: 'File Uploader',
-};
-
-const radioProps = {
-  className: 'some-class',
-};
-
-const searchProps = {
-  className: 'some-class',
-  size: 'md',
-};
-
-const fieldsetSearchProps = {
-  className: 'some-class',
-  legendText: 'Search',
-};
-
-const selectProps = {
-  className: 'some-class',
-};
-
 const TextInputProps = {
   className: 'some-class',
   id: 'test2',
@@ -135,111 +97,142 @@ export default {
   },
 };
 
-export const Default = () => (
-  <Form aria-label="sample form">
-    <Stack gap={7}>
-      <FormGroup {...fieldsetCheckboxProps()}>
-        <Checkbox defaultChecked {...checkboxEvents} id="checkbox-0" />
-        <Checkbox {...checkboxEvents} id="checkbox-1" />
-        <Checkbox disabled {...checkboxEvents} id="checkbox-2" />
-      </FormGroup>
-
-      <NumberInput {...numberInputProps} />
-
-      <FormGroup {...fieldsetFileUploaderProps}>
-        <FileUploader
-          {...fileUploaderEvents}
-          id="file-1"
-          role="button"
-          labelDescription="Max file size is 500 MB. Only .jpg files are supported."
-          buttonLabel="Add file"
-          buttonKind="primary"
-          size="md"
-          filenameStatus="edit"
-          accept={['.jpg', '.png']}
-          multiple={true}
-          disabled={false}
-          iconDescription="Dismiss file"
-          name=""
+export const Default = () => {
+  return (
+    <Form aria-label="sample form">
+      <Stack gap={7}>
+        <FormGroup className="some-class" legendText="Checkbox heading">
+          <Checkbox defaultChecked labelText="Checkbox label" id="checkbox-0" />
+          <Checkbox labelText="Checkbox label" id="checkbox-1" />
+          <Checkbox disabled labelText="Checkbox label" id="checkbox-2" />
+        </FormGroup>
+
+        <NumberInput
+          className="some-class"
+          id="number-input-1"
+          label="Number Input"
+          min={0}
+          max={100}
+          value={50}
+          step={10}
+          iconDescription="Add/decrement number"
         />
-      </FormGroup>
 
-      <RadioButtonGroup
-        name="radio-button-group"
-        defaultSelected="default-selected"
-        legendText="Radio Button heading">
-        <RadioButton
-          value="standard"
-          id="radio-1"
-          labelText="Standard Radio Button"
-          {...radioProps}
-        />
-        <RadioButton
-          value="default-selected"
-          labelText="Default Selected Radio Button"
-          id="radio-2"
-          {...radioProps}
-        />
-        <RadioButton
-          value="blue"
-          labelText="Standard Radio Button"
-          id="radio-3"
-          {...radioProps}
-        />
-        <RadioButton
-          value="disabled"
-          labelText="Disabled Radio Button"
-          id="radio-4"
-          disabled
-          {...radioProps}
+        <FormGroup className="some-class" legendText="File Uploader">
+          <FileUploader
+            id="file-1"
+            role="button"
+            labelDescription="Max file size is 500 MB. Only .jpg files are supported."
+            buttonLabel="Add file"
+            buttonKind="primary"
+            size="md"
+            filenameStatus="edit"
+            accept={['.jpg', '.png']}
+            multiple={true}
+            disabled={false}
+            iconDescription="Dismiss file"
+            name=""
+          />
+        </FormGroup>
+
+        <RadioButtonGroup
+          name="radio-button-group"
+          defaultSelected="default-selected"
+          legendText="Radio Button heading">
+          <RadioButton
+            value="standard"
+            id="radio-1"
+            labelText="Standard Radio Button"
+            className="some-class"
+          />
+          <RadioButton
+            value="default-selected"
+            labelText="Default Selected Radio Button"
+            id="radio-2"
+            className="some-class"
+          />
+          <RadioButton
+            value="blue"
+            labelText="Standard Radio Button"
+            id="radio-3"
+            className="some-class"
+          />
+          <RadioButton
+            value="disabled"
+            labelText="Disabled Radio Button"
+            id="radio-4"
+            disabled
+            className="some-class"
+          />
+        </RadioButtonGroup>
+
+        <FormGroup className="some-class" legendText="Search">
+          <Search
+            className="some-class"
+            size="md"
+            id="search-1"
+            labelText="Search"
+            placeholder="Search"
+          />
+        </FormGroup>
+
+        <Select
+          className="some-class"
+          id="select-1"
+          defaultValue="placeholder-item">
+          <SelectItem
+            disabled
+            hidden
+            value="placeholder-item"
+            text="Choose an option"
+          />
+          <SelectItem value="option-1" text="Option 1" />
+          <SelectItem value="option-2" text="Option 2" />
+          <SelectItem value="option-3" text="Option 3" />
+        </Select>
+
+        <TextInput
+          className="some-class"
+          id="test2"
+          labelText="Text Input label"
+          placeholder="Placeholder text"
         />
-      </RadioButtonGroup>
 
-      <FormGroup {...fieldsetSearchProps}>
-        <Search
-          {...searchProps}
-          id="search-1"
-          labelText="Search"
-          placeholder="Search"
+        <TextInput
+          type="password"
+          required
+          pattern="(?=.*\d)(?=.*[a-z])(?=.*[A-Z]).{6,}"
+          className="some-class"
+          id="test3"
+          labelText="Password"
         />
-      </FormGroup>
 
-      <Select {...selectProps} id="select-1" defaultValue="placeholder-item">
-        <SelectItem
-          disabled
-          hidden
-          value="placeholder-item"
-          text="Choose an option"
+        <TextInput
+          type="password"
+          required
+          pattern="(?=.*\d)(?=.*[a-z])(?=.*[A-Z]).{6,}"
+          className="some-class"
+          id="test4"
+          labelText="Password"
+          invalid
+          invalidText="Your password must be at least 6 characters as well as contain at least one uppercase one lowercase, and one number."
         />
-        <SelectItem value="option-1" text="Option 1" />
-        <SelectItem value="option-2" text="Option 2" />
-        <SelectItem value="option-3" text="Option 3" />
-      </Select>
-
-      <TextInput {...TextInputProps} />
 
-      <TextInput
-        type="password"
-        required
-        pattern="(?=.*\d)(?=.*[a-z])(?=.*[A-Z]).{6,}"
-        {...PasswordProps}
-      />
-
-      <TextInput
-        type="password"
-        required
-        pattern="(?=.*\d)(?=.*[a-z])(?=.*[A-Z]).{6,}"
-        {...InvalidPasswordProps}
-      />
-
-      <TextArea {...textareaProps} />
+        <TextArea
+          labelText="Text Area label"
+          className="some-class"
+          placeholder="Placeholder text"
+          id="test5"
+          rows={4}
+        />
 
-      <Button type="submit" className="some-class" {...buttonEvents}>
-        Submit
-      </Button>
-    </Stack>
-  </Form>
-);
+        <Button type="submit" className="some-class">
+          Submit
+        </Button>
+      </Stack>
+    </Form>
+  );
+};
 
 const items = [
   {
diff --git a/packages/react/src/components/FormGroup/FormGroup.mdx b/packages/react/src/components/FormGroup/FormGroup.mdx
index fcb28995c3df..ca3aeac0dc51 100644
--- a/packages/react/src/components/FormGroup/FormGroup.mdx
+++ b/packages/react/src/components/FormGroup/FormGroup.mdx
@@ -1,5 +1,6 @@
 import { ArgTypes, Story, Canvas, Meta } from '@storybook/blocks';
 import * as FormGroupStories from './FormGroup.stories';
+import { stackblitzPrefillConfig } from '../../../previewer/codePreviewer';
 
 <Meta isTemplate />
 
@@ -22,7 +23,15 @@ import * as FormGroupStories from './FormGroup.stories';
 
 ## Overview
 
-<Canvas of={FormGroupStories.Default} />
+<Canvas
+  of={FormGroupStories.Default}
+  additionalActions={[
+    {
+      title: 'Open in Stackblitz',
+      onClick: () => stackblitzPrefillConfig(FormGroupStories.Default),
+    },
+  ]}
+/>
 
 ## Component API
 
diff --git a/packages/react/src/components/FormGroup/docs/overview.mdx b/packages/react/src/components/FormGroup/docs/overview.mdx
index 2d167080f97d..3f0611ce61e2 100644
--- a/packages/react/src/components/FormGroup/docs/overview.mdx
+++ b/packages/react/src/components/FormGroup/docs/overview.mdx
@@ -7,7 +7,7 @@
   variants={[
     {
       label: 'Default',
-      variant: 'components-formgroup--default'
-    }
+      variant: 'components-formgroup--default',
+    },
   ]}
 />
diff --git a/packages/react/src/components/FormLabel/FormLabel.mdx b/packages/react/src/components/FormLabel/FormLabel.mdx
index 350e67b8f78e..da87f5eca544 100644
--- a/packages/react/src/components/FormLabel/FormLabel.mdx
+++ b/packages/react/src/components/FormLabel/FormLabel.mdx
@@ -1,6 +1,7 @@
 import { ArgTypes, Story, Canvas, Meta } from '@storybook/blocks';
 import Tooltip from '../Tooltip';
 import * as FormLabelStories from './FormLabel.stories';
+import { stackblitzPrefillConfig } from '../../../previewer/codePreviewer';
 
 <Meta isTemplate />
 
@@ -23,7 +24,15 @@ import * as FormLabelStories from './FormLabel.stories';
 
 ## Overview
 
-<Canvas of={FormLabelStories.Default} />
+<Canvas
+  of={FormLabelStories.Default}
+  additionalActions={[
+    {
+      title: 'Open in Stackblitz',
+      onClick: () => stackblitzPrefillConfig(FormLabelStories.Default),
+    },
+  ]}
+/>
 
 ## Component API
 
diff --git a/packages/react/src/components/Grid/FlexGrid.mdx b/packages/react/src/components/Grid/FlexGrid.mdx
index f4bee4187c89..bf0f6e304da8 100644
--- a/packages/react/src/components/Grid/FlexGrid.mdx
+++ b/packages/react/src/components/Grid/FlexGrid.mdx
@@ -1,5 +1,6 @@
 import { Story, Canvas, ArgTypes, Meta } from '@storybook/blocks';
 import * as FlexGridStories from './FlexGrid.stories';
+import { stackblitzPrefillConfig } from '../../../previewer/codePreviewer';
 
 <Meta isTemplate />
 
@@ -52,7 +53,15 @@ import { FlexGrid, Row, Column } from '@carbon/react';
 );
 ```
 
-<Canvas of={FlexGridStories.ResponsiveGrid} />
+<Canvas
+  of={FlexGridStories.ResponsiveGrid}
+  additionalActions={[
+    {
+      title: 'Open in Stackblitz',
+      onClick: () => stackblitzPrefillConfig(FlexGridStories.ResponsiveGrid),
+    },
+  ]}
+/>
 
 ## Overview
 
@@ -95,7 +104,15 @@ You can pair up multiple breakpoint props to specify how many columns the
 we will use the `sm`, `md`, and `lg` prop to specify how many columns the
 `Column` components should span at the small, medium, and large breakpoints.
 
-<Canvas of={FlexGridStories.ResponsiveGrid} />
+<Canvas
+  of={FlexGridStories.ResponsiveGrid}
+  additionalActions={[
+    {
+      title: 'Open in Stackblitz',
+      onClick: () => stackblitzPrefillConfig(FlexGridStories.ResponsiveGrid),
+    },
+  ]}
+/>
 
 ## Gutter modes
 
@@ -113,19 +130,51 @@ need to mix-and-match certain gutter modes to achieve a particular layout.
 
 ### Wide grid
 
-<Canvas of={FlexGridStories.FullWidth} />
+<Canvas
+  of={FlexGridStories.FullWidth}
+  additionalActions={[
+    {
+      title: 'Open in Stackblitz',
+      onClick: () => stackblitzPrefillConfig(FlexGridStories.FullWidth),
+    },
+  ]}
+/>
 
 ### Narrow grid
 
-<Canvas of={FlexGridStories.Narrow} />
+<Canvas
+  of={FlexGridStories.Narrow}
+  additionalActions={[
+    {
+      title: 'Open in Stackblitz',
+      onClick: () => stackblitzPrefillConfig(FlexGridStories.Narrow),
+    },
+  ]}
+/>
 
 ### Condensed grid
 
-<Canvas of={FlexGridStories.Condensed} />
+<Canvas
+  of={FlexGridStories.Condensed}
+  additionalActions={[
+    {
+      title: 'Open in Stackblitz',
+      onClick: () => stackblitzPrefillConfig(FlexGridStories.Condensed),
+    },
+  ]}
+/>
 
 ### Mix-and-match
 
-<Canvas of={FlexGridStories.MixedGutterModes} />
+<Canvas
+  of={FlexGridStories.MixedGutterModes}
+  additionalActions={[
+    {
+      title: 'Open in Stackblitz',
+      onClick: () => stackblitzPrefillConfig(FlexGridStories.MixedGutterModes),
+    },
+  ]}
+/>
 
 ## Auto columns
 
@@ -143,7 +192,15 @@ For example, if you have on `Column` component it would span 100%, two `Column`
 components would span 50% each, four `Column` components would span 25% each,
 and so on.
 
-<Canvas of={FlexGridStories.AutoColumns} />
+<Canvas
+  of={FlexGridStories.AutoColumns}
+  additionalActions={[
+    {
+      title: 'Open in Stackblitz',
+      onClick: () => stackblitzPrefillConfig(FlexGridStories.AutoColumns),
+    },
+  ]}
+/>
 
 ## Offset columns
 
@@ -162,7 +219,15 @@ breakpoint. At the medium breakpoint, it will be offset by two columns.
 <Column sm={2} md={{ span: 4, offset: 2 }} />
 ```
 
-<Canvas of={FlexGridStories.Offset} />
+<Canvas
+  of={FlexGridStories.Offset}
+  additionalActions={[
+    {
+      title: 'Open in Stackblitz',
+      onClick: () => stackblitzPrefillConfig(FlexGridStories.Offset),
+    },
+  ]}
+/>
 
 ## Component API
 
diff --git a/packages/react/src/components/Grid/FlexGrid.stories.js b/packages/react/src/components/Grid/FlexGrid.stories.js
index 4613aaaf16bb..726de6e10169 100644
--- a/packages/react/src/components/Grid/FlexGrid.stories.js
+++ b/packages/react/src/components/Grid/FlexGrid.stories.js
@@ -25,296 +25,398 @@ export default {
   },
 };
 
-function DemoContent({ children }) {
+export const AutoColumns = () => {
+  // Grab the style from here to see the visual example
+  //https://github.com/carbon-design-system/carbon/blob/main/packages/react/src/components/Grid/FlexGrid.stories.scss
+  function DemoContent({ children }) {
+    return (
+      <div className="outside">
+        <div className="inside">{children}</div>
+      </div>
+    );
+  }
   return (
-    <div className="outside">
-      <div className="inside">{children}</div>
-    </div>
+    <FlexGrid>
+      <Row>
+        <Column>
+          <DemoContent>Span 25%</DemoContent>
+        </Column>
+        <Column>
+          <DemoContent>Span 25%</DemoContent>
+        </Column>
+        <Column>
+          <DemoContent>Span 25%</DemoContent>
+        </Column>
+        <Column>
+          <DemoContent>Span 25%</DemoContent>
+        </Column>
+      </Row>
+    </FlexGrid>
   );
-}
-
-export const AutoColumns = () => (
-  <FlexGrid>
-    <Row>
-      <Column>
-        <DemoContent>Span 25%</DemoContent>
-      </Column>
-      <Column>
-        <DemoContent>Span 25%</DemoContent>
-      </Column>
-      <Column>
-        <DemoContent>Span 25%</DemoContent>
-      </Column>
-      <Column>
-        <DemoContent>Span 25%</DemoContent>
-      </Column>
-    </Row>
-  </FlexGrid>
-);
+};
 
-export const ResponsiveGrid = () => (
-  <FlexGrid>
-    <Row>
-      <Column sm={2} md={4} lg={6}>
-        <DemoContent>
-          <p>Small: Span 2 of 4</p>
-          <p>Medium: Span 4 of 8</p>
-          <p>Large: Span 6 of 16</p>
-        </DemoContent>
-      </Column>
-      <Column sm={2} md={2} lg={3}>
-        <DemoContent>
-          <p>Small: Span 2 of 4</p>
-          <p>Medium: Span 2 of 8</p>
-          <p>Large: Span 3 of 16</p>
-        </DemoContent>
-      </Column>
-      <Column sm={0} md={2} lg={3}>
-        <DemoContent>
-          <p>Small: Span 0 of 4</p>
-          <p>Medium: Span 2 of 8</p>
-          <p>Large: Span 3 of 16</p>
-        </DemoContent>
-      </Column>
-    </Row>
-  </FlexGrid>
-);
+export const ResponsiveGrid = () => {
+  // Grab the style from here to see the visual example
+  //https://github.com/carbon-design-system/carbon/blob/main/packages/react/src/components/Grid/FlexGrid.stories.scss
+  function DemoContent({ children }) {
+    return (
+      <div className="outside">
+        <div className="inside">{children}</div>
+      </div>
+    );
+  }
+  return (
+    <FlexGrid>
+      <Row>
+        <Column sm={2} md={4} lg={6}>
+          <DemoContent>
+            <p>Small: Span 2 of 4</p>
+            <p>Medium: Span 4 of 8</p>
+            <p>Large: Span 6 of 16</p>
+          </DemoContent>
+        </Column>
+        <Column sm={2} md={2} lg={3}>
+          <DemoContent>
+            <p>Small: Span 2 of 4</p>
+            <p>Medium: Span 2 of 8</p>
+            <p>Large: Span 3 of 16</p>
+          </DemoContent>
+        </Column>
+        <Column sm={0} md={2} lg={3}>
+          <DemoContent>
+            <p>Small: Span 0 of 4</p>
+            <p>Medium: Span 2 of 8</p>
+            <p>Large: Span 3 of 16</p>
+          </DemoContent>
+        </Column>
+      </Row>
+    </FlexGrid>
+  );
+};
 
-export const Offset = () => (
-  <FlexGrid>
-    <Row>
-      <Column sm={{ span: 1, offset: 3 }}>
-        <DemoContent>Small: offset 3</DemoContent>
-      </Column>
-      <Column sm={{ span: 2, offset: 2 }}>
-        <DemoContent>Small: offset 2</DemoContent>
-      </Column>
-      <Column sm={{ span: 3, offset: 1 }}>
-        <DemoContent>Small: offset 1</DemoContent>
-      </Column>
-      <Column sm={{ span: 4, offset: 0 }}>
-        <DemoContent>Small: offset 0</DemoContent>
-      </Column>
-    </Row>
-  </FlexGrid>
-);
+export const Offset = () => {
+  // Grab the style from here to see the visual example
+  //https://github.com/carbon-design-system/carbon/blob/main/packages/react/src/components/Grid/FlexGrid.stories.scss
+  function DemoContent({ children }) {
+    return (
+      <div className="outside">
+        <div className="inside">{children}</div>
+      </div>
+    );
+  }
+  return (
+    <FlexGrid>
+      <Row>
+        <Column sm={{ span: 1, offset: 3 }}>
+          <DemoContent>Small: offset 3</DemoContent>
+        </Column>
+        <Column sm={{ span: 2, offset: 2 }}>
+          <DemoContent>Small: offset 2</DemoContent>
+        </Column>
+        <Column sm={{ span: 3, offset: 1 }}>
+          <DemoContent>Small: offset 1</DemoContent>
+        </Column>
+        <Column sm={{ span: 4, offset: 0 }}>
+          <DemoContent>Small: offset 0</DemoContent>
+        </Column>
+      </Row>
+    </FlexGrid>
+  );
+};
 
-export const Condensed = () => (
-  <FlexGrid condensed>
-    <Row>
-      <Column>
-        <DemoContent>1/4</DemoContent>
-      </Column>
-      <Column>
-        <DemoContent>1/4</DemoContent>
-      </Column>
-      <Column>
-        <DemoContent>1/4</DemoContent>
-      </Column>
-      <Column>
-        <DemoContent>1/4</DemoContent>
-      </Column>
-    </Row>
-  </FlexGrid>
-);
+export const Condensed = () => {
+  // Grab the style from here to see the visual example
+  //https://github.com/carbon-design-system/carbon/blob/main/packages/react/src/components/Grid/FlexGrid.stories.scss
+  function DemoContent({ children }) {
+    return (
+      <div className="outside">
+        <div className="inside">{children}</div>
+      </div>
+    );
+  }
+  return (
+    <FlexGrid condensed>
+      <Row>
+        <Column>
+          <DemoContent>1/4</DemoContent>
+        </Column>
+        <Column>
+          <DemoContent>1/4</DemoContent>
+        </Column>
+        <Column>
+          <DemoContent>1/4</DemoContent>
+        </Column>
+        <Column>
+          <DemoContent>1/4</DemoContent>
+        </Column>
+      </Row>
+    </FlexGrid>
+  );
+};
 
-export const CondensedColumns = () => (
-  <FlexGrid>
-    <Row>
-      <Column>
-        <DemoContent>1/4</DemoContent>
-      </Column>
-      <Column>
-        <DemoContent>1/4</DemoContent>
-      </Column>
-      <Column>
-        <DemoContent>1/4</DemoContent>
-      </Column>
-      <Column>
-        <DemoContent>1/4</DemoContent>
-      </Column>
-    </Row>
-    <Row condensed>
-      <Column>
-        <DemoContent>1/4</DemoContent>
-      </Column>
-      <Column>
-        <DemoContent>1/4</DemoContent>
-      </Column>
-      <Column>
-        <DemoContent>1/4</DemoContent>
-      </Column>
-      <Column>
-        <DemoContent>1/4</DemoContent>
-      </Column>
-    </Row>
-    <Row>
-      <Column>
-        <DemoContent>1/4</DemoContent>
-      </Column>
-      <Column>
-        <DemoContent>1/4</DemoContent>
-      </Column>
-      <Column>
-        <DemoContent>1/4</DemoContent>
-      </Column>
-      <Column>
-        <DemoContent>1/4</DemoContent>
-      </Column>
-    </Row>
-  </FlexGrid>
-);
+export const CondensedColumns = () => {
+  // Grab the style from here to see the visual example
+  //https://github.com/carbon-design-system/carbon/blob/main/packages/react/src/components/Grid/FlexGrid.stories.scss
+  function DemoContent({ children }) {
+    return (
+      <div className="outside">
+        <div className="inside">{children}</div>
+      </div>
+    );
+  }
+  return (
+    <FlexGrid>
+      <Row>
+        <Column>
+          <DemoContent>1/4</DemoContent>
+        </Column>
+        <Column>
+          <DemoContent>1/4</DemoContent>
+        </Column>
+        <Column>
+          <DemoContent>1/4</DemoContent>
+        </Column>
+        <Column>
+          <DemoContent>1/4</DemoContent>
+        </Column>
+      </Row>
+      <Row condensed>
+        <Column>
+          <DemoContent>1/4</DemoContent>
+        </Column>
+        <Column>
+          <DemoContent>1/4</DemoContent>
+        </Column>
+        <Column>
+          <DemoContent>1/4</DemoContent>
+        </Column>
+        <Column>
+          <DemoContent>1/4</DemoContent>
+        </Column>
+      </Row>
+      <Row>
+        <Column>
+          <DemoContent>1/4</DemoContent>
+        </Column>
+        <Column>
+          <DemoContent>1/4</DemoContent>
+        </Column>
+        <Column>
+          <DemoContent>1/4</DemoContent>
+        </Column>
+        <Column>
+          <DemoContent>1/4</DemoContent>
+        </Column>
+      </Row>
+    </FlexGrid>
+  );
+};
 
-export const Narrow = () => (
-  <FlexGrid narrow>
-    <Row>
-      <Column>
-        <DemoContent>1/4</DemoContent>
-      </Column>
-      <Column>
-        <DemoContent>1/4</DemoContent>
-      </Column>
-      <Column>
-        <DemoContent>1/4</DemoContent>
-      </Column>
-      <Column>
-        <DemoContent>1/4</DemoContent>
-      </Column>
-    </Row>
-  </FlexGrid>
-);
+export const Narrow = () => {
+  // Grab the style from here to see the visual example
+  //https://github.com/carbon-design-system/carbon/blob/main/packages/react/src/components/Grid/FlexGrid.stories.scss
+  function DemoContent({ children }) {
+    return (
+      <div className="outside">
+        <div className="inside">{children}</div>
+      </div>
+    );
+  }
+  return (
+    <FlexGrid narrow>
+      <Row>
+        <Column>
+          <DemoContent>1/4</DemoContent>
+        </Column>
+        <Column>
+          <DemoContent>1/4</DemoContent>
+        </Column>
+        <Column>
+          <DemoContent>1/4</DemoContent>
+        </Column>
+        <Column>
+          <DemoContent>1/4</DemoContent>
+        </Column>
+      </Row>
+    </FlexGrid>
+  );
+};
 
-export const NarrowColumns = () => (
-  <FlexGrid>
-    <Row>
-      <Column>
-        <DemoContent>1/4</DemoContent>
-      </Column>
-      <Column>
-        <DemoContent>1/4</DemoContent>
-      </Column>
-      <Column>
-        <DemoContent>1/4</DemoContent>
-      </Column>
-      <Column>
-        <DemoContent>1/4</DemoContent>
-      </Column>
-    </Row>
-    <Row narrow>
-      <Column>
-        <DemoContent>1/4</DemoContent>
-      </Column>
-      <Column>
-        <DemoContent>1/4</DemoContent>
-      </Column>
-      <Column>
-        <DemoContent>1/4</DemoContent>
-      </Column>
-      <Column>
-        <DemoContent>1/4</DemoContent>
-      </Column>
-    </Row>
-    <Row>
-      <Column>
-        <DemoContent>1/4</DemoContent>
-      </Column>
-      <Column>
-        <DemoContent>1/4</DemoContent>
-      </Column>
-      <Column>
-        <DemoContent>1/4</DemoContent>
-      </Column>
-      <Column>
-        <DemoContent>1/4</DemoContent>
-      </Column>
-    </Row>
-  </FlexGrid>
-);
+export const NarrowColumns = () => {
+  // Grab the style from here to see the visual example
+  //https://github.com/carbon-design-system/carbon/blob/main/packages/react/src/components/Grid/FlexGrid.stories.scss
+  function DemoContent({ children }) {
+    return (
+      <div className="outside">
+        <div className="inside">{children}</div>
+      </div>
+    );
+  }
+  return (
+    <FlexGrid>
+      <Row>
+        <Column>
+          <DemoContent>1/4</DemoContent>
+        </Column>
+        <Column>
+          <DemoContent>1/4</DemoContent>
+        </Column>
+        <Column>
+          <DemoContent>1/4</DemoContent>
+        </Column>
+        <Column>
+          <DemoContent>1/4</DemoContent>
+        </Column>
+      </Row>
+      <Row narrow>
+        <Column>
+          <DemoContent>1/4</DemoContent>
+        </Column>
+        <Column>
+          <DemoContent>1/4</DemoContent>
+        </Column>
+        <Column>
+          <DemoContent>1/4</DemoContent>
+        </Column>
+        <Column>
+          <DemoContent>1/4</DemoContent>
+        </Column>
+      </Row>
+      <Row>
+        <Column>
+          <DemoContent>1/4</DemoContent>
+        </Column>
+        <Column>
+          <DemoContent>1/4</DemoContent>
+        </Column>
+        <Column>
+          <DemoContent>1/4</DemoContent>
+        </Column>
+        <Column>
+          <DemoContent>1/4</DemoContent>
+        </Column>
+      </Row>
+    </FlexGrid>
+  );
+};
 
-export const FullWidth = () => (
-  <FlexGrid fullWidth>
-    <Row>
-      <Column>
-        <DemoContent>1/4</DemoContent>
-      </Column>
-      <Column>
-        <DemoContent>1/4</DemoContent>
-      </Column>
-      <Column>
-        <DemoContent>1/4</DemoContent>
-      </Column>
-      <Column>
-        <DemoContent>1/4</DemoContent>
-      </Column>
-    </Row>
-  </FlexGrid>
-);
+export const FullWidth = () => {
+  // Grab the style from here to see the visual example
+  //https://github.com/carbon-design-system/carbon/blob/main/packages/react/src/components/Grid/FlexGrid.stories.scss
+  function DemoContent({ children }) {
+    return (
+      <div className="outside">
+        <div className="inside">{children}</div>
+      </div>
+    );
+  }
+  return (
+    <FlexGrid fullWidth>
+      <Row>
+        <Column>
+          <DemoContent>1/4</DemoContent>
+        </Column>
+        <Column>
+          <DemoContent>1/4</DemoContent>
+        </Column>
+        <Column>
+          <DemoContent>1/4</DemoContent>
+        </Column>
+        <Column>
+          <DemoContent>1/4</DemoContent>
+        </Column>
+      </Row>
+    </FlexGrid>
+  );
+};
 
-export const MixedGutterModes = () => (
-  <FlexGrid>
-    <Row>
-      <Column>
-        <DemoContent>Wide</DemoContent>
-      </Column>
-      <Column>
-        <DemoContent>1/4</DemoContent>
-      </Column>
-      <Column>
-        <DemoContent>1/4</DemoContent>
-      </Column>
-      <Column>
-        <DemoContent>1/4</DemoContent>
-      </Column>
-    </Row>
-    <Row narrow>
-      <Column>
-        <DemoContent>Narrow</DemoContent>
-      </Column>
-      <Column>
-        <DemoContent>1/4</DemoContent>
-      </Column>
-      <Column>
-        <DemoContent>1/4</DemoContent>
-      </Column>
-      <Column>
-        <DemoContent>1/4</DemoContent>
-      </Column>
-    </Row>
-    <Row condensed>
-      <Column>
-        <DemoContent>Condensed</DemoContent>
-      </Column>
-      <Column>
-        <DemoContent>1/4</DemoContent>
-      </Column>
-      <Column>
-        <DemoContent>1/4</DemoContent>
-      </Column>
-      <Column>
-        <DemoContent>1/4</DemoContent>
-      </Column>
-    </Row>
-  </FlexGrid>
-);
+export const MixedGutterModes = () => {
+  // Grab the style from here to see the visual example
+  //https://github.com/carbon-design-system/carbon/blob/main/packages/react/src/components/Grid/FlexGrid.stories.scss
+  function DemoContent({ children }) {
+    return (
+      <div className="outside">
+        <div className="inside">{children}</div>
+      </div>
+    );
+  }
+  return (
+    <FlexGrid>
+      <Row>
+        <Column>
+          <DemoContent>Wide</DemoContent>
+        </Column>
+        <Column>
+          <DemoContent>1/4</DemoContent>
+        </Column>
+        <Column>
+          <DemoContent>1/4</DemoContent>
+        </Column>
+        <Column>
+          <DemoContent>1/4</DemoContent>
+        </Column>
+      </Row>
+      <Row narrow>
+        <Column>
+          <DemoContent>Narrow</DemoContent>
+        </Column>
+        <Column>
+          <DemoContent>1/4</DemoContent>
+        </Column>
+        <Column>
+          <DemoContent>1/4</DemoContent>
+        </Column>
+        <Column>
+          <DemoContent>1/4</DemoContent>
+        </Column>
+      </Row>
+      <Row condensed>
+        <Column>
+          <DemoContent>Condensed</DemoContent>
+        </Column>
+        <Column>
+          <DemoContent>1/4</DemoContent>
+        </Column>
+        <Column>
+          <DemoContent>1/4</DemoContent>
+        </Column>
+        <Column>
+          <DemoContent>1/4</DemoContent>
+        </Column>
+      </Row>
+    </FlexGrid>
+  );
+};
 
-export const Default = (args) => (
-  <FlexGrid {...args}>
-    <Row>
-      <Column>
-        <DemoContent>1/4</DemoContent>
-      </Column>
-      <Column>
-        <DemoContent>1/4</DemoContent>
-      </Column>
-      <Column>
-        <DemoContent>1/4</DemoContent>
-      </Column>
-      <Column>
-        <DemoContent>1/4</DemoContent>
-      </Column>
-    </Row>
-  </FlexGrid>
-);
+export const Default = (args) => {
+  // Grab the style from here to see the visual example
+  //https://github.com/carbon-design-system/carbon/blob/main/packages/react/src/components/Grid/FlexGrid.stories.scss
+  function DemoContent({ children }) {
+    return (
+      <div className="outside">
+        <div className="inside">{children}</div>
+      </div>
+    );
+  }
+  return (
+    <FlexGrid {...args}>
+      <Row>
+        <Column>
+          <DemoContent>1/4</DemoContent>
+        </Column>
+        <Column>
+          <DemoContent>1/4</DemoContent>
+        </Column>
+        <Column>
+          <DemoContent>1/4</DemoContent>
+        </Column>
+        <Column>
+          <DemoContent>1/4</DemoContent>
+        </Column>
+      </Row>
+    </FlexGrid>
+  );
+};
 
 Default.args = {
   as: 'div',
diff --git a/packages/react/src/components/Grid/Grid.mdx b/packages/react/src/components/Grid/Grid.mdx
index 34cc3fef830d..8a08595bb26e 100644
--- a/packages/react/src/components/Grid/Grid.mdx
+++ b/packages/react/src/components/Grid/Grid.mdx
@@ -1,5 +1,6 @@
 import { Story, Canvas, ArgTypes, Meta } from '@storybook/blocks';
 import * as GridStories from './Grid.stories';
+import { stackblitzPrefillConfig } from '../../../previewer/codePreviewer';
 
 <Meta isTemplate />
 
@@ -44,7 +45,15 @@ variety of layouts. You can import these components from `@carbon/react`:
 import { Grid, Column } from '@carbon/react';
 ```
 
-<Canvas of={GridStories.Default} />
+<Canvas
+  of={GridStories.Default}
+  additionalActions={[
+    {
+      title: 'Open in Stackblitz',
+      onClick: () => stackblitzPrefillConfig(GridStories.Default),
+    },
+  ]}
+/>
 
 ## Overview
 
@@ -87,7 +96,15 @@ You can pair up multiple breakpoint props to specify how many columns the
 we will use the `sm`, `md`, and `lg` prop to specify how many columns the
 `Column` components should span at the small, medium, and large breakpoints.
 
-<Canvas of={GridStories.Default} />
+<Canvas
+  of={GridStories.Default}
+  additionalActions={[
+    {
+      title: 'Open in Stackblitz',
+      onClick: () => stackblitzPrefillConfig(GridStories.Default),
+    },
+  ]}
+/>
 
 ### Debugging
 
@@ -115,15 +132,39 @@ or the `narrow` prop to enable the narrow grid with a 16px gutter.
 
 ### Full width grid
 
-<Canvas of={GridStories.FullWidth} />
+<Canvas
+  of={GridStories.FullWidth}
+  additionalActions={[
+    {
+      title: 'Open in Stackblitz',
+      onClick: () => stackblitzPrefillConfig(GridStories.FullWidth),
+    },
+  ]}
+/>
 
 ### Condensed grid
 
-<Canvas of={GridStories.Condensed} />
+<Canvas
+  of={GridStories.Condensed}
+  additionalActions={[
+    {
+      title: 'Open in Stackblitz',
+      onClick: () => stackblitzPrefillConfig(GridStories.Condensed),
+    },
+  ]}
+/>
 
 ### Narrow grid
 
-<Canvas of={GridStories.Narrow} />
+<Canvas
+  of={GridStories.Narrow}
+  additionalActions={[
+    {
+      title: 'Open in Stackblitz',
+      onClick: () => stackblitzPrefillConfig(GridStories.Narrow),
+    },
+  ]}
+/>
 
 ## Subgrid
 
@@ -135,7 +176,15 @@ properly configured for the subgrid to inherit. Additionally, wrapping subgrids
 in a `Column` enables you to define responsive parameters for the column (`sm`,
 `md`, etc) that the subgrid will inherit and be bound to.
 
-<Canvas of={GridStories.Subgrid} />
+<Canvas
+  of={GridStories.Subgrid}
+  additionalActions={[
+    {
+      title: 'Open in Stackblitz',
+      onClick: () => stackblitzPrefillConfig(GridStories.Subgrid),
+    },
+  ]}
+/>
 
 For more specialized grid implementations you may want to disable the automatic
 subgrid definition. To achieve this you can wrap your nested `Grid` in
@@ -160,7 +209,15 @@ pass in `condensed` to a nested `Grid` (subgrid) to enable a certain gutter mode
 for only that subgrid. This can be useful when you need to mix-and-match certain
 gutter modes to achieve a particular layout.
 
-<Canvas of={GridStories.MixedGutterModes} />
+<Canvas
+  of={GridStories.MixedGutterModes}
+  additionalActions={[
+    {
+      title: 'Open in Stackblitz',
+      onClick: () => stackblitzPrefillConfig(GridStories.MixedGutterModes),
+    },
+  ]}
+/>
 
 ## Auto columns
 
@@ -176,7 +233,15 @@ grid's `grid-template-columns` property. This declares that there should be
 The values of these custom properties can be changed to modify the default
 behavior of columns.
 
-<Canvas of={GridStories.Responsive} />
+<Canvas
+  of={GridStories.Responsive}
+  additionalActions={[
+    {
+      title: 'Open in Stackblitz',
+      onClick: () => stackblitzPrefillConfig(GridStories.Responsive),
+    },
+  ]}
+/>
 
 ## Offset columns
 
@@ -195,7 +260,15 @@ breakpoint. At the medium breakpoint, it will be offset by two columns.
 <Column sm={2} md={{ span: 4, offset: 2 }} />
 ```
 
-<Canvas of={GridStories.Offset} />
+<Canvas
+  of={GridStories.Offset}
+  additionalActions={[
+    {
+      title: 'Open in Stackblitz',
+      onClick: () => stackblitzPrefillConfig(GridStories.Offset),
+    },
+  ]}
+/>
 
 ## Component API
 
diff --git a/packages/react/src/components/Grid/Grid.stories.js b/packages/react/src/components/Grid/Grid.stories.js
index d802dd0a5367..0cdaa922b3f6 100644
--- a/packages/react/src/components/Grid/Grid.stories.js
+++ b/packages/react/src/components/Grid/Grid.stories.js
@@ -36,14 +36,18 @@ export default {
   ],
 };
 
-export const Default = (args) => (
-  <Grid {...args}>
-    <Column sm={4} />
-    <Column sm={4} />
-    <Column sm={4} />
-    <Column sm={4} />
-  </Grid>
-);
+export const Default = (args) => {
+  // Grab the style from here to see the visual example
+  // https://github.com/carbon-design-system/carbon/blob/main/packages/react/src/components/Grid/Grid.stories.scss
+  return (
+    <Grid {...args}>
+      <Column sm={4} />
+      <Column sm={4} />
+      <Column sm={4} />
+      <Column sm={4} />
+    </Grid>
+  );
+};
 
 Default.args = {
   as: 'div',
@@ -82,6 +86,8 @@ Default.argTypes = {
 };
 
 export const Narrow = () => {
+  // Grab the style from here to see the visual example
+  // https://github.com/carbon-design-system/carbon/blob/main/packages/react/src/components/Grid/Grid.stories.scss
   return (
     <Grid narrow>
       <Column sm={4} />
@@ -93,6 +99,8 @@ export const Narrow = () => {
 };
 
 export const Condensed = () => {
+  // Grab the style from here to see the visual example
+  // https://github.com/carbon-design-system/carbon/blob/main/packages/react/src/components/Grid/Grid.stories.scss
   return (
     <Grid condensed>
       <Column sm={4} />
@@ -103,46 +111,56 @@ export const Condensed = () => {
   );
 };
 
-export const FullWidth = () => (
-  <Grid fullWidth>
-    <Column sm={4} />
-    <Column sm={4} />
-    <Column sm={4} />
-    <Column sm={4} />
-  </Grid>
-);
+export const FullWidth = () => {
+  // Grab the style from here to see the visual example
+  // https://github.com/carbon-design-system/carbon/blob/main/packages/react/src/components/Grid/Grid.stories.scss
+  return (
+    <Grid fullWidth>
+      <Column sm={4} />
+      <Column sm={4} />
+      <Column sm={4} />
+      <Column sm={4} />
+    </Grid>
+  );
+};
 
-export const Responsive = () => (
-  <Grid>
-    <Column sm={2} md={4} lg={6}>
-      <p>Small: Span 2 of 4</p>
-      <p>Medium: Span 4 of 8</p>
-      <p>Large: Span 6 of 16</p>
-    </Column>
-    <Column sm={2} md={2} lg={3}>
-      <p>Small: Span 2 of 4</p>
-      <p>Medium: Span 2 of 8</p>
-      <p>Large: Span 3 of 16</p>
-    </Column>
-    <Column sm={0} md={2} lg={3}>
-      <p>Small: Span 0 of 4</p>
-      <p>Medium: Span 2 of 8</p>
-      <p>Large: Span 3 of 16</p>
-    </Column>
-    <Column sm={0} md={0} lg={4}>
-      <p>Small: Span 0 of 4</p>
-      <p>Medium: Span 0 of 8</p>
-      <p>Large: Span 4 of 16</p>
-    </Column>
-    <Column sm="25%" md="50%" lg="75%">
-      <p>Small: Span 25%</p>
-      <p>Medium: Span 50%</p>
-      <p>Large: Span 75%</p>
-    </Column>
-  </Grid>
-);
+export const Responsive = () => {
+  // Grab the style from here to see the visual example
+  // https://github.com/carbon-design-system/carbon/blob/main/packages/react/src/components/Grid/Grid.stories.scss
+  return (
+    <Grid>
+      <Column sm={2} md={4} lg={6}>
+        <p>Small: Span 2 of 4</p>
+        <p>Medium: Span 4 of 8</p>
+        <p>Large: Span 6 of 16</p>
+      </Column>
+      <Column sm={2} md={2} lg={3}>
+        <p>Small: Span 2 of 4</p>
+        <p>Medium: Span 2 of 8</p>
+        <p>Large: Span 3 of 16</p>
+      </Column>
+      <Column sm={0} md={2} lg={3}>
+        <p>Small: Span 0 of 4</p>
+        <p>Medium: Span 2 of 8</p>
+        <p>Large: Span 3 of 16</p>
+      </Column>
+      <Column sm={0} md={0} lg={4}>
+        <p>Small: Span 0 of 4</p>
+        <p>Medium: Span 0 of 8</p>
+        <p>Large: Span 4 of 16</p>
+      </Column>
+      <Column sm="25%" md="50%" lg="75%">
+        <p>Small: Span 25%</p>
+        <p>Medium: Span 50%</p>
+        <p>Large: Span 75%</p>
+      </Column>
+    </Grid>
+  );
+};
 
 export const Subgrid = () => {
+  // Grab the style from here to see the visual example
+  // https://github.com/carbon-design-system/carbon/blob/main/packages/react/src/components/Grid/Grid.stories.scss
   return (
     <>
       <Grid>
@@ -239,6 +257,8 @@ export const Subgrid = () => {
 };
 
 export const MixedGutterModes = () => {
+  // Grab the style from here to see the visual example
+  // https://github.com/carbon-design-system/carbon/blob/main/packages/react/src/components/Grid/Grid.stories.scss
   return (
     <>
       <Grid>
@@ -306,51 +326,59 @@ export const MixedGutterModes = () => {
   );
 };
 
-export const GridStartEnd = () => (
-  <Grid>
-    <Column
-      sm={{ span: 1, start: 4 }}
-      md={{ span: 2, start: 7 }}
-      lg={{ span: 4, start: 13 }}>
-      span, start
-    </Column>
-    <Column
-      sm={{ span: 2, end: 5 }}
-      md={{ span: 4, end: 9 }}
-      lg={{ span: 8, end: 17 }}>
-      span, end
-    </Column>
-    <Column
-      sm={{ start: 1, end: 4 }}
-      md={{ start: 3, end: 9 }}
-      lg={{ start: 5, end: 17 }}>
-      start, end
-    </Column>
-  </Grid>
-);
+export const GridStartEnd = () => {
+  // Grab the style from here to see the visual example
+  // https://github.com/carbon-design-system/carbon/blob/main/packages/react/src/components/Grid/Grid.stories.scss
+  return (
+    <Grid>
+      <Column
+        sm={{ span: 1, start: 4 }}
+        md={{ span: 2, start: 7 }}
+        lg={{ span: 4, start: 13 }}>
+        span, start
+      </Column>
+      <Column
+        sm={{ span: 2, end: 5 }}
+        md={{ span: 4, end: 9 }}
+        lg={{ span: 8, end: 17 }}>
+        span, end
+      </Column>
+      <Column
+        sm={{ start: 1, end: 4 }}
+        md={{ start: 3, end: 9 }}
+        lg={{ start: 5, end: 17 }}>
+        start, end
+      </Column>
+    </Grid>
+  );
+};
 
-export const Offset = () => (
-  <Grid>
-    <Column
-      sm={{ span: 1, offset: 3 }}
-      md={{ span: 2, offset: 6 }}
-      lg={{ span: 4, offset: 12 }}
-    />
-    <Column
-      sm={{ span: 2, offset: 2 }}
-      md={{ span: 4, offset: 4 }}
-      lg={{ span: 8, offset: 8 }}
-    />
-    <Column
-      sm={{ span: 3, offset: 1 }}
-      md={{ span: 6, offset: 2 }}
-      lg={{ span: 12, offset: 4 }}
-    />
-    <Column sm={{ span: 4 }} md={{ span: 8 }} lg={{ span: 16 }} />
-    <Column
-      sm={{ span: '25%', offset: 1 }}
-      md={{ span: '50%', offset: 2 }}
-      lg={{ span: '75%', offset: 4 }}
-    />
-  </Grid>
-);
+export const Offset = () => {
+  // Grab the style from here to see the visual example
+  // https://github.com/carbon-design-system/carbon/blob/main/packages/react/src/components/Grid/Grid.stories.scss
+  return (
+    <Grid>
+      <Column
+        sm={{ span: 1, offset: 3 }}
+        md={{ span: 2, offset: 6 }}
+        lg={{ span: 4, offset: 12 }}
+      />
+      <Column
+        sm={{ span: 2, offset: 2 }}
+        md={{ span: 4, offset: 4 }}
+        lg={{ span: 8, offset: 8 }}
+      />
+      <Column
+        sm={{ span: 3, offset: 1 }}
+        md={{ span: 6, offset: 2 }}
+        lg={{ span: 12, offset: 4 }}
+      />
+      <Column sm={{ span: 4 }} md={{ span: 8 }} lg={{ span: 16 }} />
+      <Column
+        sm={{ span: '25%', offset: 1 }}
+        md={{ span: '50%', offset: 2 }}
+        lg={{ span: '75%', offset: 4 }}
+      />
+    </Grid>
+  );
+};
diff --git a/packages/react/src/components/InlineLoading/InlineLoading.mdx b/packages/react/src/components/InlineLoading/InlineLoading.mdx
index fa4688f3bef5..04c4a75f609d 100644
--- a/packages/react/src/components/InlineLoading/InlineLoading.mdx
+++ b/packages/react/src/components/InlineLoading/InlineLoading.mdx
@@ -1,6 +1,7 @@
 import { ArgTypes, Canvas, Story, Meta } from '@storybook/blocks';
 import InlineLoading from '../InlineLoading';
 import * as InlineLoadingStories from './InlineLoading.stories';
+import { stackblitzPrefillConfig } from '../../../previewer/codePreviewer';
 
 <Meta isTemplate />
 
@@ -16,7 +17,15 @@ import * as InlineLoadingStories from './InlineLoading.stories';
 
 ## Overview
 
-<Canvas of={InlineLoadingStories.Default} />
+<Canvas
+  of={InlineLoadingStories.Default}
+  additionalActions={[
+    {
+      title: 'Open in Stackblitz',
+      onClick: () => stackblitzPrefillConfig(InlineLoadingStories.Default),
+    },
+  ]}
+/>
 
 ## Component API
 
diff --git a/packages/react/src/components/Layer/Layer.mdx b/packages/react/src/components/Layer/Layer.mdx
index 82cba89e3c66..dbcca4e2a3dd 100644
--- a/packages/react/src/components/Layer/Layer.mdx
+++ b/packages/react/src/components/Layer/Layer.mdx
@@ -1,5 +1,6 @@
 import { ArgTypes, Canvas, Story, Meta } from '@storybook/blocks';
 import * as LayerStories from './Layer.stories';
+import { stackblitzPrefillConfig } from '../../../previewer/codePreviewer';
 
 <Meta isTemplate />
 
@@ -27,7 +28,15 @@ layer has a specific set of token values associated with it. You can use these
 tokens directly, or use contextual tokens from our styles package like `$layer`
 or `$field`.
 
-<Canvas of={LayerStories.Default} />
+<Canvas
+  of={LayerStories.Default}
+  additionalActions={[
+    {
+      title: 'Open in Stackblitz',
+      onClick: () => stackblitzPrefillConfig(LayerStories.Default),
+    },
+  ]}
+/>
 
 The `Layer` component accepts `children` as a prop. Each child of a `Layer`
 component is rendered using the layer tokens at that layer. `Layer` components
diff --git a/packages/react/src/components/Link/Link.mdx b/packages/react/src/components/Link/Link.mdx
index d611d6be34b7..0e8fb9240735 100644
--- a/packages/react/src/components/Link/Link.mdx
+++ b/packages/react/src/components/Link/Link.mdx
@@ -1,5 +1,6 @@
 import { ArgTypes, Canvas, Story, Meta } from '@storybook/blocks';
 import * as LinkStories from './Link.stories';
+import { stackblitzPrefillConfig } from '../../../previewer/codePreviewer';
 
 <Meta isTemplate />
 
@@ -25,7 +26,15 @@ interactive elements, too many links will clutter a page and make it difficult
 for users to identify their next steps. This is especially true for inline
 links, which should be used sparingly.
 
-<Canvas of={LinkStories.Default} />
+<Canvas
+  of={LinkStories.Default}
+  additionalActions={[
+    {
+      title: 'Open in Stackblitz',
+      onClick: () => stackblitzPrefillConfig(LinkStories.Default),
+    },
+  ]}
+/>
 
 ## Accessible Link with Icon
 
@@ -33,7 +42,15 @@ If the text of your link doesn't correspond to the action represented by the
 icon, consider incorporating an `aria-label` for the icon. This will ensure that
 visually impaired users can comprehend the outcome of clicking the link.
 
-<Canvas of={LinkStories.PairedWithIcon} />
+<Canvas
+  of={LinkStories.PairedWithIcon}
+  additionalActions={[
+    {
+      title: 'Open in Stackblitz',
+      onClick: () => stackblitzPrefillConfig(LinkStories.PairedWithIcon),
+    },
+  ]}
+/>
 
 ## Component API
 
diff --git a/packages/react/src/components/Loading/Loading.mdx b/packages/react/src/components/Loading/Loading.mdx
index 0d686cea4953..f1233c1c6bde 100644
--- a/packages/react/src/components/Loading/Loading.mdx
+++ b/packages/react/src/components/Loading/Loading.mdx
@@ -1,6 +1,7 @@
 import { ArgTypes, Canvas, Story, Meta } from '@storybook/blocks';
 import Loading from '../Loading';
 import * as LoadingStories from './Loading.stories';
+import { stackblitzPrefillConfig } from '../../../previewer/codePreviewer';
 
 <Meta isTemplate />
 
@@ -16,7 +17,15 @@ import * as LoadingStories from './Loading.stories';
 
 ## Overview
 
-<Canvas of={LoadingStories.Default} />
+<Canvas
+  of={LoadingStories.Default}
+  additionalActions={[
+    {
+      title: 'Open in Stackblitz',
+      onClick: () => stackblitzPrefillConfig(LoadingStories.Default),
+    },
+  ]}
+/>
 
 ## Component API
 
diff --git a/packages/react/src/components/Modal/Modal.mdx b/packages/react/src/components/Modal/Modal.mdx
index 4d51e89b029e..0d9181a48b8b 100644
--- a/packages/react/src/components/Modal/Modal.mdx
+++ b/packages/react/src/components/Modal/Modal.mdx
@@ -4,6 +4,7 @@ import { InlineNotification } from '../Notification';
 import CodeSnippet from '../CodeSnippet';
 import * as ModalStories from './Modal.stories';
 import './Modal.stories.scss';
+import { stackblitzPrefillConfig } from '../../../previewer/codePreviewer';
 
 <Meta isTemplate />
 
@@ -42,7 +43,19 @@ the modal body content. You can also use `modalLabel`, `modalHeading`,
 `secondaryButtonText` and `primaryButtonText` props to change the corresponding
 text.
 
-<Canvas of={ModalStories.WithStateManager} />
+<Canvas
+  of={ModalStories.WithStateManager}
+  additionalActions={[
+    {
+      title: 'Open in Stackblitz',
+      onClick: () =>
+        stackblitzPrefillConfig(
+          ModalStories.WithStateManager,
+          "import ReactDOM from 'react-dom';"
+        ),
+    },
+  ]}
+/>
 
 ## Component API
 
diff --git a/packages/react/src/components/Modal/Modal.stories.js b/packages/react/src/components/Modal/Modal.stories.js
index c30eb8fe57be..5f01bb39b1d3 100644
--- a/packages/react/src/components/Modal/Modal.stories.js
+++ b/packages/react/src/components/Modal/Modal.stories.js
@@ -547,7 +547,7 @@ export const WithStateManager = () => {
     renderLauncher: LauncherContent,
     children: ModalContent,
   }) => {
-    const [open, setOpen] = useState(false);
+    const [open, setOpen] = React.useState(false);
     return (
       <>
         {!ModalContent || typeof document === 'undefined'
@@ -561,7 +561,7 @@ export const WithStateManager = () => {
     );
   };
 
-  const button = useRef();
+  const button = React.useRef();
 
   return (
     <ModalStateManager
diff --git a/packages/react/src/components/MultiSelect/MultiSelect.mdx b/packages/react/src/components/MultiSelect/MultiSelect.mdx
index 71aea1eb51a6..6d13d814e8f5 100644
--- a/packages/react/src/components/MultiSelect/MultiSelect.mdx
+++ b/packages/react/src/components/MultiSelect/MultiSelect.mdx
@@ -1,6 +1,7 @@
 import { ArgTypes, Canvas, Story, Meta } from '@storybook/blocks';
 
 import * as MultiSelect from './MultiSelect.stories';
+import { stackblitzPrefillConfig } from '../../../previewer/codePreviewer';
 
 <Meta isTemplate />
 
@@ -35,13 +36,30 @@ for multiple items to be selected. `MultiSelect` stays open while items are The
 multiple items to be selected. `MultiSelect` stays open while items are being
 selected.
 
-<Canvas of={MultiSelect.Default} />
+<Canvas
+  of={MultiSelect.Default}
+  additionalActions={[
+    {
+      title: 'Open in Stackblitz',
+      onClick: () => stackblitzPrefillConfig(MultiSelect.Default),
+    },
+  ]}
+/>
 
 ### With initial selected items
 
 By passing items into the `initialSelectedItems` prop, they can be pre-selected.
 
-<Canvas of={MultiSelect.WithInitialSelectedItems} />
+<Canvas
+  of={MultiSelect.WithInitialSelectedItems}
+  additionalActions={[
+    {
+      title: 'Open in Stackblitz',
+      onClick: () =>
+        stackblitzPrefillConfig(MultiSelect.WithInitialSelectedItems),
+    },
+  ]}
+/>
 
 ### Select all
 
@@ -72,7 +90,15 @@ The `FilterableMultiSelect` component allows for filtering the list of
 selectable items to a subset. The `FilterableMultiSelect` component allows for
 filtering the list of selectable items to a subset.
 
-<Canvas of={MultiSelect.Filterable} />
+<Canvas
+  of={MultiSelect.Filterable}
+  additionalActions={[
+    {
+      title: 'Open in Stackblitz',
+      onClick: () => stackblitzPrefillConfig(MultiSelect.Filterable),
+    },
+  ]}
+/>
 
 ### With layer
 
diff --git a/packages/react/src/components/MultiSelect/MultiSelect.stories.js b/packages/react/src/components/MultiSelect/MultiSelect.stories.js
index ff22380feb1e..bae513a03180 100644
--- a/packages/react/src/components/MultiSelect/MultiSelect.stories.js
+++ b/packages/react/src/components/MultiSelect/MultiSelect.stories.js
@@ -214,6 +214,33 @@ const sharedArgTypes = {
 };
 
 export const Default = (args) => {
+  const items = [
+    {
+      id: 'downshift-1-item-0',
+      text: 'Option 1',
+    },
+    {
+      id: 'downshift-1-item-1',
+      text: 'Option 2',
+    },
+    {
+      id: 'downshift-1-item-2',
+      text: 'Option 3 - a disabled item',
+      disabled: true,
+    },
+    {
+      id: 'downshift-1-item-3',
+      text: 'Option 4',
+    },
+    {
+      id: 'downshift-1-item-4',
+      text: 'An example option that is really long to show what should be done to handle long text',
+    },
+    {
+      id: 'downshift-1-item-5',
+      text: 'Option 5',
+    },
+  ];
   return (
     <div
       style={{
@@ -237,6 +264,33 @@ Default.args = { ...sharedArgs };
 Default.argTypes = { ...sharedArgTypes };
 
 export const WithInitialSelectedItems = (args) => {
+  const items = [
+    {
+      id: 'downshift-1-item-0',
+      text: 'Option 1',
+    },
+    {
+      id: 'downshift-1-item-1',
+      text: 'Option 2',
+    },
+    {
+      id: 'downshift-1-item-2',
+      text: 'Option 3 - a disabled item',
+      disabled: true,
+    },
+    {
+      id: 'downshift-1-item-3',
+      text: 'Option 4',
+    },
+    {
+      id: 'downshift-1-item-4',
+      text: 'An example option that is really long to show what should be done to handle long text',
+    },
+    {
+      id: 'downshift-1-item-5',
+      text: 'Option 5',
+    },
+  ];
   return (
     <div
       style={{
@@ -258,6 +312,33 @@ export const WithInitialSelectedItems = (args) => {
 };
 
 export const Filterable = (args) => {
+  const items = [
+    {
+      id: 'downshift-1-item-0',
+      text: 'Option 1',
+    },
+    {
+      id: 'downshift-1-item-1',
+      text: 'Option 2',
+    },
+    {
+      id: 'downshift-1-item-2',
+      text: 'Option 3 - a disabled item',
+      disabled: true,
+    },
+    {
+      id: 'downshift-1-item-3',
+      text: 'Option 4',
+    },
+    {
+      id: 'downshift-1-item-4',
+      text: 'An example option that is really long to show what should be done to handle long text',
+    },
+    {
+      id: 'downshift-1-item-5',
+      text: 'Option 5',
+    },
+  ];
   return (
     <div
       style={{
diff --git a/packages/react/src/components/NumberInput/NumberInput.mdx b/packages/react/src/components/NumberInput/NumberInput.mdx
index 27bd8b1795a6..dc9103bb1982 100644
--- a/packages/react/src/components/NumberInput/NumberInput.mdx
+++ b/packages/react/src/components/NumberInput/NumberInput.mdx
@@ -1,5 +1,6 @@
 import { ArgTypes, Canvas, Story, Meta } from '@storybook/blocks';
 import * as NumberInputStories from './NumberInput.stories';
+import { stackblitzPrefillConfig } from '../../../previewer/codePreviewer';
 
 <Meta isTemplate />
 
@@ -20,11 +21,27 @@ import * as NumberInputStories from './NumberInput.stories';
 
 ## Overview
 
-<Canvas of={NumberInputStories.Default} />
+<Canvas
+  of={NumberInputStories.Default}
+  additionalActions={[
+    {
+      title: 'Open in Stackblitz',
+      onClick: () => stackblitzPrefillConfig(NumberInputStories.Default),
+    },
+  ]}
+/>
 
 ## Skeleton State
 
-<Canvas of={NumberInputStories.Skeleton} />
+<Canvas
+  of={NumberInputStories.Skeleton}
+  additionalActions={[
+    {
+      title: 'Open in Stackblitz',
+      onClick: () => stackblitzPrefillConfig(NumberInputStories.Skeleton),
+    },
+  ]}
+/>
 
 ## Component API
 
diff --git a/packages/react/src/components/NumberInput/NumberInput.stories.js b/packages/react/src/components/NumberInput/NumberInput.stories.js
index 0b2b754174bb..a22bd626a4e2 100644
--- a/packages/react/src/components/NumberInput/NumberInput.stories.js
+++ b/packages/react/src/components/NumberInput/NumberInput.stories.js
@@ -12,6 +12,7 @@ import Button from '../Button';
 import { AILabel, AILabelContent, AILabelActions } from '../AILabel';
 import { IconButton } from '../IconButton';
 import { View, FolderOpen, Folders } from '@carbon/icons-react';
+import mdx from './NumberInput.mdx';
 
 export default {
   title: 'Components/NumberInput',
@@ -20,6 +21,9 @@ export default {
     subcomponents: {
       NumberInputSkeleton,
     },
+    docs: {
+      page: mdx,
+    },
   },
 };
 
@@ -70,7 +74,7 @@ const sharedArgTypes = {
   },
 };
 
-export const Default = ({ ...args }) => {
+export const Default = (args) => {
   const [value, setValue] = React.useState(50);
 
   const handleChange = (event, { value }) => {
@@ -153,4 +157,6 @@ export const withAILabel = (args) => (
 
 withAILabel.argTypes = { ...sharedArgTypes };
 
-export const Skeleton = () => <NumberInputSkeleton />;
+export const Skeleton = () => {
+  return <NumberInputSkeleton />;
+};
diff --git a/packages/react/src/components/OrderedList/OrderedList.mdx b/packages/react/src/components/OrderedList/OrderedList.mdx
index 3e1d81e8a417..f6cea02376d1 100644
--- a/packages/react/src/components/OrderedList/OrderedList.mdx
+++ b/packages/react/src/components/OrderedList/OrderedList.mdx
@@ -1,5 +1,6 @@
 import { ArgTypes, Canvas, Story, Meta } from '@storybook/blocks';
 import * as OrderedListStories from './OrderedList.stories';
+import { stackblitzPrefillConfig } from '../../../previewer/codePreviewer';
 
 <Meta isTemplate />
 
@@ -16,7 +17,15 @@ import * as OrderedListStories from './OrderedList.stories';
 ## Overview
 
 <div style={{ paddingLeft: '15px' }}>
-  <Canvas of={OrderedListStories.Default} />
+  <Canvas
+    of={OrderedListStories.Default}
+    additionalActions={[
+      {
+        title: 'Open in Stackblitz',
+        onClick: () => stackblitzPrefillConfig(OrderedListStories.Default),
+      },
+    ]}
+  />
 </div>
 
 ## Component API
diff --git a/packages/react/src/components/OverflowMenu/OverflowMenu.mdx b/packages/react/src/components/OverflowMenu/OverflowMenu.mdx
index f50033faf05a..fe066e9747ad 100644
--- a/packages/react/src/components/OverflowMenu/OverflowMenu.mdx
+++ b/packages/react/src/components/OverflowMenu/OverflowMenu.mdx
@@ -1,5 +1,6 @@
 import { Story, ArgTypes, Canvas, Meta } from '@storybook/blocks';
 import * as OverflowMenuStories from './OverflowMenu.stories';
+import { stackblitzPrefillConfig } from '../../../previewer/codePreviewer';
 
 <Meta isTemplate />
 
@@ -18,7 +19,15 @@ import * as OverflowMenuStories from './OverflowMenu.stories';
 The overflow menu component is a clickable element that contains additional
 options that are available to the user, but there is a space constraint.
 
-<Canvas of={OverflowMenuStories.Default} />
+<Canvas
+  of={OverflowMenuStories.Default}
+  additionalActions={[
+    {
+      title: 'Open in Stackblitz',
+      onClick: () => stackblitzPrefillConfig(OverflowMenuStories.Default),
+    },
+  ]}
+/>
 
 ### `data-floating-menu-container`
 
@@ -29,7 +38,16 @@ this attribute is found, the menu will be placed on `document.body`.
 
 ## Render Custom Icon
 
-<Canvas of={OverflowMenuStories.RenderCustomIcon} />
+<Canvas
+  of={OverflowMenuStories.RenderCustomIcon}
+  additionalActions={[
+    {
+      title: 'Open in Stackblitz',
+      onClick: () =>
+        stackblitzPrefillConfig(OverflowMenuStories.RenderCustomIcon),
+    },
+  ]}
+/>
 
 ## Customizing the tooltip
 
diff --git a/packages/react/src/components/OverflowMenu/OverflowMenu.stories.js b/packages/react/src/components/OverflowMenu/OverflowMenu.stories.js
index ab0066baee09..400be28eb2c8 100644
--- a/packages/react/src/components/OverflowMenu/OverflowMenu.stories.js
+++ b/packages/react/src/components/OverflowMenu/OverflowMenu.stories.js
@@ -24,12 +24,14 @@ export default {
   },
 };
 
-export const RenderCustomIcon = () => (
-  <OverflowMenu flipped={document?.dir === 'rtl'} renderIcon={Filter}>
-    <OverflowMenuItem itemText="Filter A" />
-    <OverflowMenuItem itemText="Filter B" />
-  </OverflowMenu>
-);
+export const RenderCustomIcon = () => {
+  return (
+    <OverflowMenu flipped={document?.dir === 'rtl'} renderIcon={Filter}>
+      <OverflowMenuItem itemText="Filter A" />
+      <OverflowMenuItem itemText="Filter B" />
+    </OverflowMenu>
+  );
+};
 
 export const Default = (args) => (
   <OverflowMenu aria-label="overflow-menu" {...args}>
diff --git a/packages/react/src/components/ProgressIndicator/ProgressIndicator.mdx b/packages/react/src/components/ProgressIndicator/ProgressIndicator.mdx
index ad330b0c6835..253b3a70e163 100644
--- a/packages/react/src/components/ProgressIndicator/ProgressIndicator.mdx
+++ b/packages/react/src/components/ProgressIndicator/ProgressIndicator.mdx
@@ -1,5 +1,6 @@
 import { Story, Canvas, ArgTypes, Meta } from '@storybook/blocks';
 import * as ProgressIndicatorStories from './ProgressIndicator.stories';
+import { stackblitzPrefillConfig } from '../../../previewer/codePreviewer';
 
 <Meta isTemplate />
 
@@ -27,7 +28,15 @@ import * as ProgressIndicatorStories from './ProgressIndicator.stories';
 
 ## Overview
 
-<Canvas of={ProgressIndicatorStories.Default} />
+<Canvas
+  of={ProgressIndicatorStories.Default}
+  additionalActions={[
+    {
+      title: 'Open in Stackblitz',
+      onClick: () => stackblitzPrefillConfig(ProgressIndicatorStories.Default),
+    },
+  ]}
+/>
 
 For React usage, `ProgressIndicator` holds the `currentIndex` state to indicate
 which `ProgressStep` is the current step. The `ProgressIndicator` component
diff --git a/packages/react/src/components/RadioButton/RadioButton.mdx b/packages/react/src/components/RadioButton/RadioButton.mdx
index c0cf94a1f072..e73c3c39c631 100644
--- a/packages/react/src/components/RadioButton/RadioButton.mdx
+++ b/packages/react/src/components/RadioButton/RadioButton.mdx
@@ -1,5 +1,6 @@
 import { ArgTypes, Canvas, Story, Meta } from '@storybook/blocks';
 import * as RadioButtonStories from './RadioButton.stories';
+import { stackblitzPrefillConfig } from '../../../previewer/codePreviewer';
 
 <Meta isTemplate />
 
@@ -27,7 +28,15 @@ rendered individually, it is recommended they be rendered as children components
 of the `RadioButtonGroup` parent component to maintain their proper controlled
 states.
 
-<Canvas of={RadioButtonStories.Default} />
+<Canvas
+  of={RadioButtonStories.Default}
+  additionalActions={[
+    {
+      title: 'Open in Stackblitz',
+      onClick: () => stackblitzPrefillConfig(RadioButtonStories.Default),
+    },
+  ]}
+/>
 
 ## Component API
 
diff --git a/packages/react/src/components/SkeletonPlaceholder/SkeletonPlaceholder.mdx b/packages/react/src/components/SkeletonPlaceholder/SkeletonPlaceholder.mdx
index cfe9482f4be2..893ec991067d 100644
--- a/packages/react/src/components/SkeletonPlaceholder/SkeletonPlaceholder.mdx
+++ b/packages/react/src/components/SkeletonPlaceholder/SkeletonPlaceholder.mdx
@@ -1,5 +1,6 @@
 import { Story, ArgTypes, Canvas, Meta } from '@storybook/blocks';
 import * as SkeletonPlaceholderStories from './SkeletonPlaceholder.stories';
+import { stackblitzPrefillConfig } from '../../../previewer/codePreviewer';
 
 <Meta isTemplate />
 
@@ -13,7 +14,16 @@ import * as SkeletonPlaceholderStories from './SkeletonPlaceholder.stories';
 
 ## Overview
 
-<Canvas of={SkeletonPlaceholderStories.Default} />
+<Canvas
+  of={SkeletonPlaceholderStories.Default}
+  additionalActions={[
+    {
+      title: 'Open in Stackblitz',
+      onClick: () =>
+        stackblitzPrefillConfig(SkeletonPlaceholderStories.Default),
+    },
+  ]}
+/>
 
 ## Component API
 
diff --git a/packages/react/src/components/SkeletonPlaceholder/SkeletonPlaceholder.stories.js b/packages/react/src/components/SkeletonPlaceholder/SkeletonPlaceholder.stories.js
index bb339081f0ed..8e9ccd8d9092 100644
--- a/packages/react/src/components/SkeletonPlaceholder/SkeletonPlaceholder.stories.js
+++ b/packages/react/src/components/SkeletonPlaceholder/SkeletonPlaceholder.stories.js
@@ -22,4 +22,6 @@ export default {
   },
 };
 
-export const Default = () => <SkeletonPlaceholder />;
+export const Default = () => {
+  return <SkeletonPlaceholder />;
+};
diff --git a/packages/react/src/components/SkeletonText/SkeletonText.mdx b/packages/react/src/components/SkeletonText/SkeletonText.mdx
index de5a11378226..cbd29d5baf34 100644
--- a/packages/react/src/components/SkeletonText/SkeletonText.mdx
+++ b/packages/react/src/components/SkeletonText/SkeletonText.mdx
@@ -1,5 +1,6 @@
 import { ArgTypes, Canvas, Story, Meta } from '@storybook/blocks';
 import * as SkeletonTextStories from './SkeletonText.stories';
+import { stackblitzPrefillConfig } from '../../../previewer/codePreviewer';
 
 <Meta isTemplate />
 
@@ -13,10 +14,20 @@ import * as SkeletonTextStories from './SkeletonText.stories';
 
 ## Overview
 
-<Canvas of={SkeletonTextStories.Default} />
+<Canvas
+  of={SkeletonTextStories.Default}
+  additionalActions={[
+    {
+      title: 'Open in Stackblitz',
+      onClick: () => stackblitzPrefillConfig(SkeletonTextStories.Default),
+    },
+  ]}
+/>
 
 ## Component API
 
+w
+
 <ArgTypes />
 
 ## Feedback
diff --git a/packages/react/src/components/SkeletonText/SkeletonText.stories.js b/packages/react/src/components/SkeletonText/SkeletonText.stories.js
index 9657e35f5ee3..f0cd10e21905 100644
--- a/packages/react/src/components/SkeletonText/SkeletonText.stories.js
+++ b/packages/react/src/components/SkeletonText/SkeletonText.stories.js
@@ -22,7 +22,9 @@ export default {
   },
 };
 
-export const Default = (args) => <SkeletonText {...args} />;
+export const Default = (args) => {
+  return <SkeletonText {...args} />;
+};
 
 Default.args = {
   heading: false,
diff --git a/packages/react/src/components/Tabs/Tabs.mdx b/packages/react/src/components/Tabs/Tabs.mdx
index 53667c363672..280bb387dbcd 100644
--- a/packages/react/src/components/Tabs/Tabs.mdx
+++ b/packages/react/src/components/Tabs/Tabs.mdx
@@ -43,17 +43,49 @@ what is in rendered inside of `Tab` and `TabPanel`.
 
 ### Line Tabs
 
-<Canvas of={TabsStories.Default} />
+<Canvas
+  of={TabsStories.Default}
+  additionalActions={[
+    {
+      title: 'Open in Stackblitz',
+      onClick: () => stackblitzPrefillConfig(TabsStories.Default),
+    },
+  ]}
+/>
 
 ### Contained Tabs
 
-<Canvas of={TabsStories.Contained} />
+<Canvas
+  of={TabsStories.Contained}
+  additionalActions={[
+    {
+      title: 'Open in Stackblitz',
+      onClick: () => stackblitzPrefillConfig(TabsStories.Contained),
+    },
+  ]}
+/>
 
 ### Icon Tabs
 
-<Canvas of={TabsStories.IconOnly} />
-
-<Canvas of={TabsStories.Icon20Only} />
+<Canvas
+  of={TabsStories.IconOnly}
+  additionalActions={[
+    {
+      title: 'Open in Stackblitz',
+      onClick: () => stackblitzPrefillConfig(TabsStories.IconOnly),
+    },
+  ]}
+/>
+
+<Canvas
+  of={TabsStories.Icon20Only}
+  additionalActions={[
+    {
+      title: 'Open in Stackblitz',
+      onClick: () => stackblitzPrefillConfig(TabsStories.Icon20Only),
+    },
+  ]}
+/>
 
 ### Dismissable Tabs
 
@@ -175,11 +207,27 @@ return (
 
 And there you have it! Working dismissable tabs.
 
-<Canvas of={TabsStories.Dismissable} />
+<Canvas
+  of={TabsStories.Dismissable}
+  additionalActions={[
+    {
+      title: 'Open in Stackblitz',
+      onClick: () => stackblitzPrefillConfig(TabsStories.Dismissable),
+    },
+  ]}
+/>
 
 ### Vertical tabs
 
-<Canvas of={TabsStories.Vertical} />
+<Canvas
+  of={TabsStories.Vertical}
+  additionalActions={[
+    {
+      title: 'Open in Stackblitz',
+      onClick: () => stackblitzPrefillConfig(TabsStories.Vertical),
+    },
+  ]}
+/>
 
 ## Component API
 
diff --git a/packages/react/src/components/Tabs/Tabs.stories.js b/packages/react/src/components/Tabs/Tabs.stories.js
index f296b10449cf..e82b20f29133 100644
--- a/packages/react/src/components/Tabs/Tabs.stories.js
+++ b/packages/react/src/components/Tabs/Tabs.stories.js
@@ -5,7 +5,7 @@
  * LICENSE file in the root directory of this source tree.
  */
 
-import React, { useState } from 'react';
+import React from 'react';
 import {
   Tabs,
   TabsVertical,
@@ -32,7 +32,7 @@ import {
   Activity,
   CloudMonitoring,
   Settings,
-  Search,
+  IbmWatsonDiscovery,
   Notification,
   Chat,
   Task,
@@ -64,22 +64,24 @@ export default {
   },
 };
 
-export const Default = ({ dismissable, ...args }) => (
-  <Tabs dismissable={dismissable} onTabCloseRequest={() => {}}>
-    <TabList aria-label="List of tabs" {...args}>
-      <Tab>Dashboard</Tab>
-      <Tab>Monitoring</Tab>
-      <Tab>Activity</Tab>
-      <Tab>Settings</Tab>
-    </TabList>
-    <TabPanels>
-      <TabPanel>Tab Panel 1</TabPanel>
-      <TabPanel>Tab Panel 2</TabPanel>
-      <TabPanel>Tab Panel 3</TabPanel>
-      <TabPanel>Tab Panel 4</TabPanel>
-    </TabPanels>
-  </Tabs>
-);
+export const Default = (args) => {
+  return (
+    <Tabs onTabCloseRequest={() => {}}>
+      <TabList aria-label="List of tabs" {...args}>
+        <Tab>Dashboard</Tab>
+        <Tab>Monitoring</Tab>
+        <Tab>Activity</Tab>
+        <Tab>Settings</Tab>
+      </TabList>
+      <TabPanels>
+        <TabPanel>Tab Panel 1</TabPanel>
+        <TabPanel>Tab Panel 2</TabPanel>
+        <TabPanel>Tab Panel 3</TabPanel>
+        <TabPanel>Tab Panel 4</TabPanel>
+      </TabPanels>
+    </Tabs>
+  );
+};
 
 Default.args = {
   contained: false,
@@ -98,9 +100,7 @@ Default.argTypes = {
     },
   },
   dismissable: {
-    control: {
-      type: 'boolean',
-    },
+    control: false,
   },
   iconSize: {
     control: { type: 'select' },
@@ -148,9 +148,9 @@ export const Dismissable = () => {
       disabled: true,
     },
   ];
-  const [renderedTabs, setRenderedTabs] = useState(tabs);
+  const [renderedTabs, setRenderedTabs] = React.useState(tabs);
 
-  const [selectedIndex, setSelectedIndex] = useState(0);
+  const [selectedIndex, setSelectedIndex] = React.useState(0);
 
   const handleTabChange = (evt) => {
     setSelectedIndex(evt.selectedIndex);
@@ -219,9 +219,9 @@ export const DismissableWithIcons = ({ contained }) => {
       disabled: true,
     },
   ];
-  const [renderedTabs, setRenderedTabs] = useState(tabs);
+  const [renderedTabs, setRenderedTabs] = React.useState(tabs);
 
-  const [selectedIndex, setSelectedIndex] = useState(0);
+  const [selectedIndex, setSelectedIndex] = React.useState(0);
 
   const handleTabChange = (evt) => {
     setSelectedIndex(evt.selectedIndex);
@@ -272,217 +272,21 @@ export const DismissableWithIcons = ({ contained }) => {
   );
 };
 
-export const WithIcons = () => (
-  <Tabs>
-    <TabList activation="manual" aria-label="List of tabs">
-      <Tab renderIcon={Dashboard}>Dashboard</Tab>
-      <Tab renderIcon={CloudMonitoring}>Monitoring</Tab>
-      <Tab renderIcon={Activity}>Activity</Tab>
-      <Tab renderIcon={Search}>Analyze</Tab>
-      <Tab disabled renderIcon={Settings}>
-        Settings
-      </Tab>
-    </TabList>
-    <TabPanels>
-      <TabPanel>Tab Panel 1</TabPanel>
-      <TabPanel>
-        <form style={{ margin: '2em' }}>
-          <legend className={`cds--label`}>Validation example</legend>
-          <Checkbox id="cb" labelText="Accept privacy policy" />
-          <Button
-            style={{ marginTop: '1rem', marginBottom: '1rem' }}
-            type="submit">
-            Submit
-          </Button>
-          <TextInput
-            type="text"
-            labelText="Text input label"
-            helperText="Optional help text"
-            id="text-input-1"
-          />
-        </form>
-      </TabPanel>
-      <TabPanel>Tab Panel 3</TabPanel>
-      <TabPanel>Tab Panel 4</TabPanel>
-      <TabPanel>Tab Panel 5</TabPanel>
-    </TabPanels>
-  </Tabs>
-);
-
-export const Manual = () => (
-  <Tabs>
-    <TabList activation="manual" aria-label="List of tabs">
-      <Tab>Dashboard</Tab>
-      <Tab>Monitoring</Tab>
-      <Tab title="Tab label 4">Activity</Tab>
-      <Tab>Analyze</Tab>
-      <Tab disabled>Settings</Tab>
-    </TabList>
-    <TabPanels>
-      <TabPanel>Tab Panel 1</TabPanel>
-      <TabPanel>
-        <form style={{ margin: '2em' }}>
-          <legend className={`cds--label`}>Validation example</legend>
-          <Checkbox id="cb" labelText="Accept privacy policy" />
-          <Button
-            style={{ marginTop: '1rem', marginBottom: '1rem' }}
-            type="submit">
-            Submit
-          </Button>
-          <TextInput
-            type="text"
-            labelText="Text input label"
-            helperText="Optional help text"
-            id="text-input-1"
-          />
-        </form>
-      </TabPanel>
-      <TabPanel>Tab Panel 3</TabPanel>
-      <TabPanel>Tab Panel 4</TabPanel>
-      <TabPanel>Tab Panel 5</TabPanel>
-    </TabPanels>
-  </Tabs>
-);
-
-export const Icon20Only = () => (
-  <Tabs>
-    <TabList iconSize="lg" aria-label="List of tabs">
-      <IconTab label="Analyze" disabled>
-        <Search size={20} aria-label="Analyze" />
-      </IconTab>
-      <IconTab label="Activity">
-        <Activity size={20} aria-label="Activity" />
-      </IconTab>
-      <IconTab label="Notification">
-        <Notification size={20} aria-label="Notification" />
-      </IconTab>
-      <IconTab label="Chat">
-        <Chat size={20} aria-label="Chat" />
-      </IconTab>
-    </TabList>
-    <TabPanels>
-      <TabPanel>Tab Panel 1</TabPanel>
-      <TabPanel>Tab Panel 2</TabPanel>
-      <TabPanel>Tab Panel 3</TabPanel>
-      <TabPanel>Tab Panel 4</TabPanel>
-    </TabPanels>
-  </Tabs>
-);
-
-export const IconOnly = () => (
-  <Tabs>
-    <TabList aria-label="List of tabs">
-      <IconTab label="Analyze" disabled>
-        <Search aria-label="Analyze" />
-      </IconTab>
-      <IconTab label="Activity">
-        <Activity aria-label="Activity" />
-      </IconTab>
-      <IconTab label="Notification">
-        <Notification aria-label="Notification" />
-      </IconTab>
-      <IconTab label="Chat">
-        <Chat aria-label="Chat" />
-      </IconTab>
-    </TabList>
-    <TabPanels>
-      <TabPanel>Tab Panel 1</TabPanel>
-      <TabPanel>Tab Panel 2</TabPanel>
-      <TabPanel>Tab Panel 3</TabPanel>
-      <TabPanel>Tab Panel 4</TabPanel>
-    </TabPanels>
-  </Tabs>
-);
-
-export const Contained = () => (
-  <Tabs>
-    <TabList aria-label="List of tabs" contained>
-      <Tab>Dashboard</Tab>
-      <Tab>Monitoring</Tab>
-      <Tab>Activity</Tab>
-      <Tab>Analyze</Tab>
-      <Tab disabled>Settings</Tab>
-    </TabList>
-    <TabPanels>
-      <TabPanel>Tab Panel 1</TabPanel>
-      <TabPanel>
-        <Layer>
-          <form style={{ margin: '2em' }}>
-            <legend className={`cds--label`}>Validation example</legend>
-            <Checkbox id="cb" labelText="Accept privacy policy" />
-            <Button
-              style={{ marginTop: '1rem', marginBottom: '1rem' }}
-              type="submit">
-              Submit
-            </Button>
-            <TextInput
-              type="text"
-              labelText="Text input label"
-              helperText="Optional help text"
-            />
-          </form>
-        </Layer>
-      </TabPanel>
-      <TabPanel>Tab Panel 3</TabPanel>
-      <TabPanel>Tab Panel 4</TabPanel>
-      <TabPanel>Tab Panel 5</TabPanel>
-    </TabPanels>
-  </Tabs>
-);
-
-export const ContainedWithIcons = () => (
-  <Tabs>
-    <TabList aria-label="List of tabs" contained>
-      <Tab renderIcon={Dashboard}>Dashboard</Tab>
-      <Tab renderIcon={CloudMonitoring}>Monitoring</Tab>
-      <Tab renderIcon={Activity}>Activity</Tab>
-      <Tab renderIcon={Search}>Analyze</Tab>
-      <Tab disabled renderIcon={Settings}>
-        Settings
-      </Tab>
-    </TabList>
-    <TabPanels>
-      <TabPanel>Tab Panel 1</TabPanel>
-      <TabPanel>
-        <Layer>
-          <form style={{ margin: '2em' }}>
-            <legend className={`cds--label`}>Validation example</legend>
-            <Checkbox id="cb" labelText="Accept privacy policy" />
-            <Button
-              style={{ marginTop: '1rem', marginBottom: '1rem' }}
-              type="submit">
-              Submit
-            </Button>
-            <TextInput
-              type="text"
-              labelText="Text input label"
-              helperText="Optional help text"
-            />
-          </form>
-        </Layer>
-      </TabPanel>
-      <TabPanel>Tab Panel 3</TabPanel>
-      <TabPanel>Tab Panel 4</TabPanel>
-      <TabPanel>Tab Panel 5</TabPanel>
-    </TabPanels>
-  </Tabs>
-);
-
-export const ContainedWithSecondaryLabels = () => (
-  <Tabs>
-    <TabList aria-label="List of tabs" contained>
-      <Tab secondaryLabel="(21/25)">Engage</Tab>
-      <Tab secondaryLabel="(12/16)">Analyze</Tab>
-      <Tab secondaryLabel="(0/7)">Remediate</Tab>
-      <Tab secondaryLabel="(4/12)">Assets</Tab>
-      <Tab disabled secondaryLabel="(0/10)">
-        Monitoring
-      </Tab>
-    </TabList>
-    <TabPanels>
-      <TabPanel>Tab Panel 1</TabPanel>
-      <TabPanel>
-        <Layer>
+export const WithIcons = () => {
+  return (
+    <Tabs>
+      <TabList activation="manual" aria-label="List of tabs">
+        <Tab renderIcon={Dashboard}>Dashboard</Tab>
+        <Tab renderIcon={CloudMonitoring}>Monitoring</Tab>
+        <Tab renderIcon={Activity}>Activity</Tab>
+        <Tab renderIcon={IbmWatsonDiscovery}>Analyze</Tab>
+        <Tab disabled renderIcon={Settings}>
+          Settings
+        </Tab>
+      </TabList>
+      <TabPanels>
+        <TabPanel>Tab Panel 1</TabPanel>
+        <TabPanel>
           <form style={{ margin: '2em' }}>
             <legend className={`cds--label`}>Validation example</legend>
             <Checkbox id="cb" labelText="Accept privacy policy" />
@@ -495,40 +299,31 @@ export const ContainedWithSecondaryLabels = () => (
               type="text"
               labelText="Text input label"
               helperText="Optional help text"
+              id="text-input-1"
             />
           </form>
-        </Layer>
-      </TabPanel>
-      <TabPanel>Tab Panel 3</TabPanel>
-      <TabPanel>Tab Panel 4</TabPanel>
-      <TabPanel>Tab Panel 5</TabPanel>
-    </TabPanels>
-  </Tabs>
-);
-
-export const ContainedWithSecondaryLabelsAndIcons = () => (
-  <Tabs>
-    <TabList aria-label="List of tabs" contained>
-      <Tab renderIcon={Task} secondaryLabel="(21/25">
-        Engage
-      </Tab>
-      <Tab renderIcon={Search} secondaryLabel="(12/16)">
-        Analyze
-      </Tab>
-      <Tab renderIcon={Restart} disabled secondaryLabel="(0/7)">
-        Remediate
-      </Tab>
-      <Tab renderIcon={Dashboard} secondaryLabel="(4/12)">
-        Assets
-      </Tab>
-      <Tab renderIcon={CloudMonitoring} secondaryLabel="(1/23)">
-        Monitoring
-      </Tab>
-    </TabList>
-    <TabPanels>
-      <TabPanel>Tab Panel 1</TabPanel>
-      <TabPanel>
-        <Layer>
+        </TabPanel>
+        <TabPanel>Tab Panel 3</TabPanel>
+        <TabPanel>Tab Panel 4</TabPanel>
+        <TabPanel>Tab Panel 5</TabPanel>
+      </TabPanels>
+    </Tabs>
+  );
+};
+
+export const Manual = () => {
+  return (
+    <Tabs>
+      <TabList activation="manual" aria-label="List of tabs">
+        <Tab>Dashboard</Tab>
+        <Tab>Monitoring</Tab>
+        <Tab title="Tab label 4">Activity</Tab>
+        <Tab>Analyze</Tab>
+        <Tab disabled>Settings</Tab>
+      </TabList>
+      <TabPanels>
+        <TabPanel>Tab Panel 1</TabPanel>
+        <TabPanel>
           <form style={{ margin: '2em' }}>
             <legend className={`cds--label`}>Validation example</legend>
             <Checkbox id="cb" labelText="Accept privacy policy" />
@@ -541,121 +336,346 @@ export const ContainedWithSecondaryLabelsAndIcons = () => (
               type="text"
               labelText="Text input label"
               helperText="Optional help text"
+              id="text-input-1"
             />
           </form>
-        </Layer>
-      </TabPanel>
-      <TabPanel>Tab Panel 3</TabPanel>
-      <TabPanel>Tab Panel 4</TabPanel>
-      <TabPanel>Tab Panel 5</TabPanel>
-    </TabPanels>
-  </Tabs>
-);
-
-export const ContainedFullWidth = () => (
-  <Grid condensed>
-    <Column lg={16} md={8} sm={4}>
-      <Tabs>
-        <TabList aria-label="List of tabs" contained fullWidth>
-          <Tab>TLS</Tab>
-          <Tab>Origin</Tab>
-          <Tab disabled>Rate limiting</Tab>
-          <Tab>WAF</Tab>
-          <Tab>IP Firewall</Tab>
-          <Tab>Firewall rules</Tab>
-          <Tab>Range</Tab>
-          <Tab>Mutual TLS</Tab>
-        </TabList>
-        <TabPanels>
-          <TabPanel>Tab Panel 1</TabPanel>
-          <TabPanel>
-            <Layer>
-              <form style={{ margin: '2em' }}>
-                <legend className={`cds--label`}>Validation example</legend>
-                <Checkbox id="cb" labelText="Accept privacy policy" />
-                <Button
-                  style={{ marginTop: '1rem', marginBottom: '1rem' }}
-                  type="submit">
-                  Submit
-                </Button>
-                <TextInput
-                  type="text"
-                  labelText="Text input label"
-                  helperText="Optional help text"
-                />
-              </form>
-            </Layer>
-          </TabPanel>
-          <TabPanel>Tab Panel 3</TabPanel>
-          <TabPanel>Tab Panel 4</TabPanel>
-          <TabPanel>Tab Panel 5</TabPanel>
-          <TabPanel>Tab Panel 6</TabPanel>
-          <TabPanel>Tab Panel 7</TabPanel>
-          <TabPanel>Tab Panel 8</TabPanel>
-        </TabPanels>
-      </Tabs>
-    </Column>
-  </Grid>
-);
-
-export const Vertical = ({ ...args }) => (
-  <TabsVertical {...args}>
-    <TabListVertical aria-label="List of tabs">
-      <Tab>Dashboard</Tab>
-      <Tab>
-        Extra long label that will go two lines then truncate when it goes
-        beyond the Tab length
-      </Tab>
-      <Tab>Activity</Tab>
-      <Tab>Analyze</Tab>
-      <Tab>Investigate </Tab>
-      <Tab>Learn</Tab>
-      <Tab disabled>Settings</Tab>
-    </TabListVertical>
-    <TabPanels>
-      <TabPanel>Tab Panel 1</TabPanel>
-      <TabPanel>
-        <Layer>
-          <form style={{ margin: '2em' }}>
-            <Stack gap={7}>
-              <TextInput id="one" labelText="First Name" />
-              <TextInput id="three" labelText="Middle Initial" />
-              <TextInput id="two" labelText="Last Name" />
-              <RadioButtonGroup
-                legendText="Radio button heading"
-                name="formgroup-default-radio-button-group"
-                defaultSelected="radio-1">
-                <RadioButton
-                  labelText="Option 1"
-                  value="radio-1"
-                  id="radio-1"
-                />
-                <RadioButton
-                  labelText="Option 2"
-                  value="radio-2"
-                  id="radio-2"
-                />
-                <RadioButton
-                  labelText="Option 3"
-                  value="radio-3"
-                  id="radio-3"
-                />
-              </RadioButtonGroup>
-              <Checkbox labelText={`Checkbox one`} id="checkbox-label-1" />
-              <Checkbox labelText={`Checkbox two`} id="checkbox-label-2" />
-              <Button>Submit</Button>
-            </Stack>
-          </form>
-        </Layer>
-      </TabPanel>
-      <TabPanel>Tab Panel 3</TabPanel>
-      <TabPanel>Tab Panel 4</TabPanel>
-      <TabPanel>Tab Panel 5</TabPanel>
-      <TabPanel>Tab Panel 6</TabPanel>
-      <TabPanel>Tab Panel 7</TabPanel>
-    </TabPanels>
-  </TabsVertical>
-);
+        </TabPanel>
+        <TabPanel>Tab Panel 3</TabPanel>
+        <TabPanel>Tab Panel 4</TabPanel>
+        <TabPanel>Tab Panel 5</TabPanel>
+      </TabPanels>
+    </Tabs>
+  );
+};
+
+export const Icon20Only = () => {
+  return (
+    <Tabs>
+      <TabList iconSize="lg" aria-label="List of tabs">
+        <IconTab label="Analyze" disabled>
+          <IbmWatsonDiscovery size={20} aria-label="Analyze" />
+        </IconTab>
+        <IconTab label="Activity">
+          <Activity size={20} aria-label="Activity" />
+        </IconTab>
+        <IconTab label="Notification">
+          <Notification size={20} aria-label="Notification" />
+        </IconTab>
+        <IconTab label="Chat">
+          <Chat size={20} aria-label="Chat" />
+        </IconTab>
+      </TabList>
+      <TabPanels>
+        <TabPanel>Tab Panel 1</TabPanel>
+        <TabPanel>Tab Panel 2</TabPanel>
+        <TabPanel>Tab Panel 3</TabPanel>
+        <TabPanel>Tab Panel 4</TabPanel>
+      </TabPanels>
+    </Tabs>
+  );
+};
+
+export const IconOnly = () => {
+  return (
+    <Tabs>
+      <TabList aria-label="List of tabs">
+        <IconTab label="Analyze" disabled>
+          <IbmWatsonDiscovery aria-label="Analyze" />
+        </IconTab>
+        <IconTab label="Activity">
+          <Activity aria-label="Activity" />
+        </IconTab>
+        <IconTab label="Notification">
+          <Notification aria-label="Notification" />
+        </IconTab>
+        <IconTab label="Chat">
+          <Chat aria-label="Chat" />
+        </IconTab>
+      </TabList>
+      <TabPanels>
+        <TabPanel>Tab Panel 1</TabPanel>
+        <TabPanel>Tab Panel 2</TabPanel>
+        <TabPanel>Tab Panel 3</TabPanel>
+        <TabPanel>Tab Panel 4</TabPanel>
+      </TabPanels>
+    </Tabs>
+  );
+};
+
+export const Contained = () => {
+  return (
+    <Tabs>
+      <TabList aria-label="List of tabs" contained>
+        <Tab>Dashboard</Tab>
+        <Tab>Monitoring</Tab>
+        <Tab>Activity</Tab>
+        <Tab>Analyze</Tab>
+        <Tab disabled>Settings</Tab>
+      </TabList>
+      <TabPanels>
+        <TabPanel>Tab Panel 1</TabPanel>
+        <TabPanel>
+          <Layer>
+            <form style={{ margin: '2em' }}>
+              <legend className={`cds--label`}>Validation example</legend>
+              <Checkbox id="cb" labelText="Accept privacy policy" />
+              <Button
+                style={{ marginTop: '1rem', marginBottom: '1rem' }}
+                type="submit">
+                Submit
+              </Button>
+              <TextInput
+                type="text"
+                labelText="Text input label"
+                helperText="Optional help text"
+              />
+            </form>
+          </Layer>
+        </TabPanel>
+        <TabPanel>Tab Panel 3</TabPanel>
+        <TabPanel>Tab Panel 4</TabPanel>
+        <TabPanel>Tab Panel 5</TabPanel>
+      </TabPanels>
+    </Tabs>
+  );
+};
+
+export const ContainedWithIcons = () => {
+  return (
+    <Tabs>
+      <TabList aria-label="List of tabs" contained>
+        <Tab renderIcon={Dashboard}>Dashboard</Tab>
+        <Tab renderIcon={CloudMonitoring}>Monitoring</Tab>
+        <Tab renderIcon={Activity}>Activity</Tab>
+        <Tab renderIcon={IbmWatsonDiscovery}>Analyze</Tab>
+        <Tab disabled renderIcon={Settings}>
+          Settings
+        </Tab>
+      </TabList>
+      <TabPanels>
+        <TabPanel>Tab Panel 1</TabPanel>
+        <TabPanel>
+          <Layer>
+            <form style={{ margin: '2em' }}>
+              <legend className={`cds--label`}>Validation example</legend>
+              <Checkbox id="cb" labelText="Accept privacy policy" />
+              <Button
+                style={{ marginTop: '1rem', marginBottom: '1rem' }}
+                type="submit">
+                Submit
+              </Button>
+              <TextInput
+                type="text"
+                labelText="Text input label"
+                helperText="Optional help text"
+              />
+            </form>
+          </Layer>
+        </TabPanel>
+        <TabPanel>Tab Panel 3</TabPanel>
+        <TabPanel>Tab Panel 4</TabPanel>
+        <TabPanel>Tab Panel 5</TabPanel>
+      </TabPanels>
+    </Tabs>
+  );
+};
+
+export const ContainedWithSecondaryLabels = () => {
+  return (
+    <Tabs>
+      <TabList aria-label="List of tabs" contained>
+        <Tab secondaryLabel="(21/25)">Engage</Tab>
+        <Tab secondaryLabel="(12/16)">Analyze</Tab>
+        <Tab secondaryLabel="(0/7)">Remediate</Tab>
+        <Tab secondaryLabel="(4/12)">Assets</Tab>
+        <Tab disabled secondaryLabel="(0/10)">
+          Monitoring
+        </Tab>
+      </TabList>
+      <TabPanels>
+        <TabPanel>Tab Panel 1</TabPanel>
+        <TabPanel>
+          <Layer>
+            <form style={{ margin: '2em' }}>
+              <legend className={`cds--label`}>Validation example</legend>
+              <Checkbox id="cb" labelText="Accept privacy policy" />
+              <Button
+                style={{ marginTop: '1rem', marginBottom: '1rem' }}
+                type="submit">
+                Submit
+              </Button>
+              <TextInput
+                type="text"
+                labelText="Text input label"
+                helperText="Optional help text"
+              />
+            </form>
+          </Layer>
+        </TabPanel>
+        <TabPanel>Tab Panel 3</TabPanel>
+        <TabPanel>Tab Panel 4</TabPanel>
+        <TabPanel>Tab Panel 5</TabPanel>
+      </TabPanels>
+    </Tabs>
+  );
+};
+
+export const ContainedWithSecondaryLabelsAndIcons = () => {
+  return (
+    <Tabs>
+      <TabList aria-label="List of tabs" contained>
+        <Tab renderIcon={Task} secondaryLabel="(21/25">
+          Engage
+        </Tab>
+        <Tab renderIcon={IbmWatsonDiscovery} secondaryLabel="(12/16)">
+          Analyze
+        </Tab>
+        <Tab renderIcon={Restart} disabled secondaryLabel="(0/7)">
+          Remediate
+        </Tab>
+        <Tab renderIcon={Dashboard} secondaryLabel="(4/12)">
+          Assets
+        </Tab>
+        <Tab renderIcon={CloudMonitoring} secondaryLabel="(1/23)">
+          Monitoring
+        </Tab>
+      </TabList>
+      <TabPanels>
+        <TabPanel>Tab Panel 1</TabPanel>
+        <TabPanel>
+          <Layer>
+            <form style={{ margin: '2em' }}>
+              <legend className={`cds--label`}>Validation example</legend>
+              <Checkbox id="cb" labelText="Accept privacy policy" />
+              <Button
+                style={{ marginTop: '1rem', marginBottom: '1rem' }}
+                type="submit">
+                Submit
+              </Button>
+              <TextInput
+                type="text"
+                labelText="Text input label"
+                helperText="Optional help text"
+              />
+            </form>
+          </Layer>
+        </TabPanel>
+        <TabPanel>Tab Panel 3</TabPanel>
+        <TabPanel>Tab Panel 4</TabPanel>
+        <TabPanel>Tab Panel 5</TabPanel>
+      </TabPanels>
+    </Tabs>
+  );
+};
+
+export const ContainedFullWidth = () => {
+  return (
+    <Grid condensed>
+      <Column lg={16} md={8} sm={4}>
+        <Tabs>
+          <TabList aria-label="List of tabs" contained fullWidth>
+            <Tab>TLS</Tab>
+            <Tab>Origin</Tab>
+            <Tab disabled>Rate limiting</Tab>
+            <Tab>WAF</Tab>
+            <Tab>IP Firewall</Tab>
+            <Tab>Firewall rules</Tab>
+            <Tab>Range</Tab>
+            <Tab>Mutual TLS</Tab>
+          </TabList>
+          <TabPanels>
+            <TabPanel>Tab Panel 1</TabPanel>
+            <TabPanel>
+              <Layer>
+                <form style={{ margin: '2em' }}>
+                  <legend className={`cds--label`}>Validation example</legend>
+                  <Checkbox id="cb" labelText="Accept privacy policy" />
+                  <Button
+                    style={{ marginTop: '1rem', marginBottom: '1rem' }}
+                    type="submit">
+                    Submit
+                  </Button>
+                  <TextInput
+                    type="text"
+                    labelText="Text input label"
+                    helperText="Optional help text"
+                  />
+                </form>
+              </Layer>
+            </TabPanel>
+            <TabPanel>Tab Panel 3</TabPanel>
+            <TabPanel>Tab Panel 4</TabPanel>
+            <TabPanel>Tab Panel 5</TabPanel>
+            <TabPanel>Tab Panel 6</TabPanel>
+            <TabPanel>Tab Panel 7</TabPanel>
+            <TabPanel>Tab Panel 8</TabPanel>
+          </TabPanels>
+        </Tabs>
+      </Column>
+    </Grid>
+  );
+};
+
+export const Vertical = (args) => {
+  return (
+    <TabsVertical {...args}>
+      <TabListVertical aria-label="List of tabs">
+        <Tab>Dashboard</Tab>
+        <Tab>
+          Extra long label that will go two lines then truncate when it goes
+          beyond the Tab length
+        </Tab>
+        <Tab>Activity</Tab>
+        <Tab>Analyze</Tab>
+        <Tab>Investigate </Tab>
+        <Tab>Learn</Tab>
+        <Tab disabled>Settings</Tab>
+      </TabListVertical>
+      <TabPanels>
+        <TabPanel>Tab Panel 1</TabPanel>
+        <TabPanel>
+          <Layer>
+            <form style={{ margin: '2em' }}>
+              <Stack gap={7}>
+                <TextInput id="one" labelText="First Name" />
+                <TextInput id="three" labelText="Middle Initial" />
+                <TextInput id="two" labelText="Last Name" />
+                <RadioButtonGroup
+                  legendText="Radio button heading"
+                  name="formgroup-default-radio-button-group"
+                  defaultSelected="radio-1">
+                  <RadioButton
+                    labelText="Option 1"
+                    value="radio-1"
+                    id="radio-1"
+                  />
+                  <RadioButton
+                    labelText="Option 2"
+                    value="radio-2"
+                    id="radio-2"
+                  />
+                  <RadioButton
+                    labelText="Option 3"
+                    value="radio-3"
+                    id="radio-3"
+                  />
+                </RadioButtonGroup>
+                <Checkbox labelText={`Checkbox one`} id="checkbox-label-1" />
+                <Checkbox labelText={`Checkbox two`} id="checkbox-label-2" />
+                <Button>Submit</Button>
+              </Stack>
+            </form>
+          </Layer>
+        </TabPanel>
+        <TabPanel>Tab Panel 3</TabPanel>
+        <TabPanel>Tab Panel 4</TabPanel>
+        <TabPanel>Tab Panel 5</TabPanel>
+        <TabPanel>Tab Panel 6</TabPanel>
+        <TabPanel>Tab Panel 7</TabPanel>
+      </TabPanels>
+    </TabsVertical>
+  );
+};
 
 Vertical.args = {
   height: '',
diff --git a/packages/react/src/components/Tag/InteractiveTag.stories.js b/packages/react/src/components/Tag/InteractiveTag.stories.js
index d9d5e9a63c04..3ee9c014e2c1 100644
--- a/packages/react/src/components/Tag/InteractiveTag.stories.js
+++ b/packages/react/src/components/Tag/InteractiveTag.stories.js
@@ -5,7 +5,7 @@
  * LICENSE file in the root directory of this source tree.
  */
 
-import React, { useState } from 'react';
+import React from 'react';
 import { default as Tag } from '.';
 import { default as SelectableTag } from './SelectableTag';
 import { default as OperationalTag } from './OperationalTag';
@@ -47,7 +47,7 @@ export const Selectable = (args) => {
     },
   ];
 
-  const [selectedTags, setSelectedTags] = useState([
+  const [selectedTags, setSelectedTags] = React.useState([
     {
       id: 2,
       text: 'Tag content 1',
@@ -123,8 +123,8 @@ Selectable.argTypes = {
 };
 
 export const Operational = (args) => {
-  const [open, setOpen] = useState(false);
-  const [openHighContrast, setOpenHighContrast] = useState(false);
+  const [open, setOpen] = React.useState(false);
+  const [openHighContrast, setOpenHighContrast] = React.useState(false);
 
   return (
     <>
@@ -227,11 +227,11 @@ export const Operational = (args) => {
             {...args}
           />
           <PopoverContent className="popover-content">
-            <Text as="p">Tag 1 name</Text>
-            <Text as="p">Tag 2 name</Text>
-            <Text as="p">Tag 3 name</Text>
-            <Text as="p">Tag 4 name</Text>
-            <Text as="p">Tag 5 name</Text>
+            <p>Tag 1 name</p>
+            <p>Tag 2 name</p>
+            <p>Tag 3 name</p>
+            <p>Tag 4 name</p>
+            <p>Tag 5 name</p>
           </PopoverContent>
         </Popover>
 
@@ -380,7 +380,7 @@ export const Dismissible = (args) => {
     },
   ];
 
-  const [renderedTags, setRenderedTags] = useState(tags);
+  const [renderedTags, setRenderedTags] = React.useState(tags);
 
   const handleClose = (removedTag) => {
     const newTags = renderedTags.filter((tag) => tag !== removedTag);
diff --git a/packages/react/src/components/Tag/Tag.mdx b/packages/react/src/components/Tag/Tag.mdx
index 30816cbeb6c1..d5cbaabd3f54 100644
--- a/packages/react/src/components/Tag/Tag.mdx
+++ b/packages/react/src/components/Tag/Tag.mdx
@@ -1,6 +1,7 @@
 import { ArgTypes, Canvas, Meta } from '@storybook/blocks';
 import * as TagStories from './Tag.stories';
 import * as InteractiveTagStories from './InteractiveTag.stories';
+import { stackblitzPrefillConfig } from '../../../previewer/codePreviewer';
 
 <Meta isTemplate />
 
@@ -24,7 +25,15 @@ Read-only tags are used to categorize, are used for labeling, and do not have
 interactive functionality. Read-only tags come in several color choices and can
 use optional decorative icons to delineate between multiple categories.
 
-<Canvas of={TagStories.ReadOnly} />
+<Canvas
+  of={TagStories.ReadOnly}
+  additionalActions={[
+    {
+      title: 'Open in Stackblitz',
+      onClick: () => stackblitzPrefillConfig(TagStories.ReadOnly),
+    },
+  ]}
+/>
 
 ## Dismissible
 
@@ -35,7 +44,15 @@ When to use:
 - Use DismissibleTag when you want to allow users to easily clear or dismiss
   specific filters applied to items.
 
-<Canvas of={InteractiveTagStories.Dismissible} />
+<Canvas
+  of={InteractiveTagStories.Dismissible}
+  additionalActions={[
+    {
+      title: 'Open in Stackblitz',
+      onClick: () => stackblitzPrefillConfig(TagStories.ReadOnly),
+    },
+  ]}
+/>
 
 Here it is a sample code to help you get started.
 
@@ -108,7 +125,15 @@ When to use:
   need to be a little more specific around filtering for selectable versus
   dismissable tags).
 
-<Canvas of={InteractiveTagStories.Selectable} />
+<Canvas
+  of={InteractiveTagStories.Selectable}
+  additionalActions={[
+    {
+      title: 'Open in Stackblitz',
+      onClick: () => stackblitzPrefillConfig(InteractiveTagStories.Selectable),
+    },
+  ]}
+/>
 
 Here it is a sample code to help you get started.
 
@@ -182,7 +207,15 @@ When not to use:
 - Do not use in combination with Dismissable tags. Instead, consider letting the
   user enter an "edit mode" to dismiss tags.
 
-<Canvas of={InteractiveTagStories.Operational} />
+<Canvas
+  of={InteractiveTagStories.Operational}
+  additionalActions={[
+    {
+      title: 'Open in Stackblitz',
+      onClick: () => stackblitzPrefillConfig(InteractiveTagStories.Operational),
+    },
+  ]}
+/>
 
 ## With AI Label
 
@@ -190,8 +223,24 @@ Tag with AI label is now stable for Read Only tags. This addition changes the
 visual appearance of the component and introduces an AI explainability feature
 when AI is present in the component.
 
-<Canvas of={TagStories.withAILabel} />
+<Canvas
+  of={TagStories.withAILabel}
+  additionalActions={[
+    {
+      title: 'Open in Stackblitz',
+      onClick: () => stackblitzPrefillConfig(TagStories.withAILabel),
+    },
+  ]}
+/>
 
 ## Skeleton
 
-<Canvas of={TagStories.Skeleton} />
+<Canvas
+  of={TagStories.Skeleton}
+  additionalActions={[
+    {
+      title: 'Open in Stackblitz',
+      onClick: () => stackblitzPrefillConfig(TagStories.Skeleton),
+    },
+  ]}
+/>
diff --git a/packages/react/src/components/Tag/Tag.stories.js b/packages/react/src/components/Tag/Tag.stories.js
index 9339fc7bc17e..ee4100fc58ba 100644
--- a/packages/react/src/components/Tag/Tag.stories.js
+++ b/packages/react/src/components/Tag/Tag.stories.js
@@ -185,69 +185,74 @@ Skeleton.argTypes = {
   },
 };
 
-const aiLabel = (
-  <AILabel className="ai-label-container">
-    <AILabelContent>
-      <div>
-        <p className="secondary">AI Explained</p>
-        <h1>84%</h1>
-        <p className="secondary bold">Confidence score</p>
-        <p className="secondary">
-          Lorem ipsum dolor sit amet, di os consectetur adipiscing elit, sed do
-          eiusmod tempor incididunt ut fsil labore et dolore magna aliqua.
-        </p>
-        <hr />
-        <p className="secondary">Model type</p>
-        <p className="bold">Foundation model</p>
-      </div>
-      <AILabelActions>
-        <IconButton kind="ghost" label="View">
-          <View />
-        </IconButton>
-        <IconButton kind="ghost" label="Open Folder">
-          <FolderOpen />
-        </IconButton>
-        <IconButton kind="ghost" label="Folders">
-          <Folders />
-        </IconButton>
-        <Button>View details</Button>
-      </AILabelActions>
-    </AILabelContent>
-  </AILabel>
-);
+export const withAILabel = () => {
+  const aiLabel = () => {
+    return (
+      <AILabel className="ai-label-container">
+        <AILabelContent>
+          <div>
+            <p className="secondary">AI Explained</p>
+            <h1>84%</h1>
+            <p className="secondary bold">Confidence score</p>
+            <p className="secondary">
+              Lorem ipsum dolor sit amet, di os consectetur adipiscing elit, sed
+              do eiusmod tempor incididunt ut fsil labore et dolore magna
+              aliqua.
+            </p>
+            <hr />
+            <p className="secondary">Model type</p>
+            <p className="bold">Foundation model</p>
+          </div>
+          <AILabelActions>
+            <IconButton kind="ghost" label="View">
+              <View />
+            </IconButton>
+            <IconButton kind="ghost" label="Open Folder">
+              <FolderOpen />
+            </IconButton>
+            <IconButton kind="ghost" label="Folders">
+              <Folders />
+            </IconButton>
+            <Button>View details</Button>
+          </AILabelActions>
+        </AILabelContent>
+      </AILabel>
+    );
+  };
 
-export const withAILabel = () => (
-  <div style={{ marginBottom: '4rem' }}>
-    <Tag
-      decorator={aiLabel}
-      className="some-class"
-      type="red"
-      title="Clear Filter">
-      {'Tag'}
-    </Tag>
+  return (
+    <div style={{ marginBottom: '4rem' }}>
+      <Tag
+        decorator={aiLabel}
+        className="some-class"
+        type="red"
+        title="Clear Filter">
+        {'Tag'}
+      </Tag>
 
-    <DismissibleTag
-      decorator={aiLabel}
-      className="some-class"
-      type="purple"
-      title="Clear Filter"
-      text="Tag"></DismissibleTag>
+      <DismissibleTag
+        decorator={aiLabel}
+        className="some-class"
+        type="purple"
+        title="Clear Filter"
+        text="Tag"></DismissibleTag>
 
-    <Tag
-      renderIcon={Asleep}
-      decorator={aiLabel}
-      className="some-class"
-      type="blue"
-      title="Clear Filter">
-      {'Tag'}
-    </Tag>
+      <Tag
+        renderIcon={Asleep}
+        decorator={aiLabel}
+        className="some-class"
+        type="blue"
+        title="Clear Filter">
+        {'Tag'}
+      </Tag>
 
-    <DismissibleTag
-      renderIcon={Asleep}
-      decorator={aiLabel}
-      className="some-class"
-      type="green"
-      title="Clear Filter"
-      text="Tag"></DismissibleTag>
-  </div>
-);
+      <DismissibleTag
+        renderIcon={Asleep}
+        decorator={aiLabel}
+        className="some-class"
+        type="green"
+        title="Clear Filter"
+        text="Tag"></DismissibleTag>
+    </div>
+  );
+};
diff --git a/packages/react/src/components/Text/Text.mdx b/packages/react/src/components/Text/Text.mdx
index f03b3deed18f..3a5a04d3bb36 100644
--- a/packages/react/src/components/Text/Text.mdx
+++ b/packages/react/src/components/Text/Text.mdx
@@ -1,5 +1,5 @@
 import { Canvas, ArgTypes, Story, Meta } from '@storybook/blocks';
-import * as TextStories from './Text-story';
+import * as TextStories from './Text.stories';
 
 <Meta isTemplate />
 
diff --git a/packages/react/src/components/Text/Text-story.js b/packages/react/src/components/Text/Text.stories.js
similarity index 67%
rename from packages/react/src/components/Text/Text-story.js
rename to packages/react/src/components/Text/Text.stories.js
index 5a983c9e1447..67927395aeb1 100644
--- a/packages/react/src/components/Text/Text-story.js
+++ b/packages/react/src/components/Text/Text.stories.js
@@ -27,40 +27,44 @@ export default {
   },
 };
 
-export const Default = () => (
-  <>
-    <p>
-      <Text>Hello world</Text>
-    </p>
-    <p>
-      <Text>لكن لا بد أن أوضح لك أن كل</Text>
-    </p>
-  </>
-);
+export const Default = () => {
+  return (
+    <>
+      <p>
+        <Text>Hello world</Text>
+      </p>
+      <p>
+        <Text>لكن لا بد أن أوضح لك أن كل</Text>
+      </p>
+    </>
+  );
+};
 
-export const LayoutAndText = () => (
-  <LayoutDirection dir="ltr">
-    <p>
-      Ipsum ipsa repellat doloribus magni architecto totam Laborum maxime
-      ratione nobis voluptatibus facilis nostrum, necessitatibus magnam Maxime
-      esse consequatur nemo sit repellat Dignissimos rem nobis hic reprehenderit
-      ducimus? Fuga voluptatem?
-    </p>
-    <LayoutDirection dir="rtl">
-      <Text as="p">
-        المغلوطة حول استنكار النشوة وتمجيد الألم نشأت بالفعل، وسأعرض لك التفاصيل
-        لتكتشف حقيقة وأساس تلك السعادة البشرية، فلا أحد يرفض أو يكره أو يتجنب
-        الشعور بالسعادة، ولكن بفضل هؤ.
-      </Text>
+export const LayoutAndText = () => {
+  return (
+    <LayoutDirection dir="ltr">
+      <p>
+        Ipsum ipsa repellat doloribus magni architecto totam Laborum maxime
+        ratione nobis voluptatibus facilis nostrum, necessitatibus magnam Maxime
+        esse consequatur nemo sit repellat Dignissimos rem nobis hic
+        reprehenderit ducimus? Fuga voluptatem?
+      </p>
+      <LayoutDirection dir="rtl">
+        <Text as="p">
+          المغلوطة حول استنكار النشوة وتمجيد الألم نشأت بالفعل، وسأعرض لك
+          التفاصيل لتكتشف حقيقة وأساس تلك السعادة البشرية، فلا أحد يرفض أو يكره
+          أو يتجنب الشعور بالسعادة، ولكن بفضل هؤ.
+        </Text>
+      </LayoutDirection>
+      <p>
+        Ipsum ipsa repellat doloribus magni architecto totam Laborum maxime
+        ratione nobis voluptatibus facilis nostrum, necessitatibus magnam Maxime
+        esse consequatur nemo sit repellat Dignissimos rem nobis hic
+        reprehenderit ducimus? Fuga voluptatem?
+      </p>
     </LayoutDirection>
-    <p>
-      Ipsum ipsa repellat doloribus magni architecto totam Laborum maxime
-      ratione nobis voluptatibus facilis nostrum, necessitatibus magnam Maxime
-      esse consequatur nemo sit repellat Dignissimos rem nobis hic reprehenderit
-      ducimus? Fuga voluptatem?
-    </p>
-  </LayoutDirection>
-);
+  );
+};
 
 export const SetTextDirection = () => {
   const legendText = 'הכותרת שלי!';
diff --git a/packages/react/src/components/TextInput/TextInput.mdx b/packages/react/src/components/TextInput/TextInput.mdx
index e81821763a55..ff72c42e8435 100644
--- a/packages/react/src/components/TextInput/TextInput.mdx
+++ b/packages/react/src/components/TextInput/TextInput.mdx
@@ -1,6 +1,7 @@
 import { ArgTypes, Canvas, Story, Meta } from '@storybook/blocks';
 import * as TextInputStories from './TextInput.stories';
 import * as PasswordInputStories from './PasswordInput.stories';
+import { stackblitzPrefillConfig } from '../../../previewer/codePreviewer';
 
 <Meta isTemplate />
 
@@ -22,11 +23,27 @@ default text input is for short, one-line content.
 
 ### Fluid
 
-<Canvas of={TextInputStories.Fluid} />
+<Canvas
+  of={TextInputStories.Fluid}
+  additionalActions={[
+    {
+      title: 'Open in Stackblitz',
+      onClick: () => stackblitzPrefillConfig(TextInputStories.Fluid),
+    },
+  ]}
+/>
 
 ### Read Only
 
-<Canvas of={TextInputStories.ReadOnly} />
+<Canvas
+  of={TextInputStories.ReadOnly}
+  additionalActions={[
+    {
+      title: 'Open in Stackblitz',
+      onClick: () => stackblitzPrefillConfig(TextInputStories.ReadOnly),
+    },
+  ]}
+/>
 
 ### With Layer
 
diff --git a/packages/react/src/components/TextInput/TextInput.stories.js b/packages/react/src/components/TextInput/TextInput.stories.js
index 1b064b752523..b5db1c064269 100644
--- a/packages/react/src/components/TextInput/TextInput.stories.js
+++ b/packages/react/src/components/TextInput/TextInput.stories.js
@@ -140,11 +140,13 @@ Default.argTypes = {
   ...sharedArgTypes,
 };
 
-export const Fluid = () => (
-  <FluidForm>
-    <TextInput type="text" labelText="Text input label" id="text-input-1" />
-  </FluidForm>
-);
+export const Fluid = () => {
+  return (
+    <FluidForm>
+      <TextInput type="text" labelText="Text input label" id="text-input-1" />
+    </FluidForm>
+  );
+};
 
 export const ReadOnly = () => {
   return (
diff --git a/packages/react/src/components/Tile/Tile.mdx b/packages/react/src/components/Tile/Tile.mdx
index 8312de5f5200..83f30866da82 100644
--- a/packages/react/src/components/Tile/Tile.mdx
+++ b/packages/react/src/components/Tile/Tile.mdx
@@ -1,6 +1,7 @@
 import { Story, ArgTypes, Canvas, Meta } from '@storybook/blocks';
 import * as TileStories from './Tile.stories';
 import * as TileFeatureFlagStories from './Tile.featureflag.stories';
+import { stackblitzPrefillConfig } from '../../../previewer/codePreviewer';
 
 <Meta isTemplate />
 
@@ -16,31 +17,88 @@ import * as TileFeatureFlagStories from './Tile.featureflag.stories';
 
 ## Overview
 
-<Canvas of={TileStories.Default} />
+<Canvas
+  of={TileStories.Default}
+  additionalActions={[
+    {
+      title: 'Open in Stackblitz',
+      onClick: () => stackblitzPrefillConfig(TileStories.Default),
+    },
+  ]}
+/>
 
 ## Clickable
 
-<Canvas of={TileStories.Clickable} />
+<Canvas
+  of={TileStories.Clickable}
+  additionalActions={[
+    {
+      title: 'Open in Stackblitz',
+      onClick: () => stackblitzPrefillConfig(TileStories.Clickable),
+    },
+  ]}
+/>
 
 ## Expandable
 
-<Canvas of={TileStories.Expandable} />
+<Canvas
+  of={TileStories.Expandable}
+  additionalActions={[
+    {
+      title: 'Open in Stackblitz',
+      onClick: () => stackblitzPrefillConfig(TileStories.Expandable),
+    },
+  ]}
+/>
 
 ## Expandable with Interactive
 
-<Canvas of={TileStories.ExpandableWithInteractive} />
+<Canvas
+  of={TileStories.ExpandableWithInteractive}
+  additionalActions={[
+    {
+      title: 'Open in Stackblitz',
+      onClick: () =>
+        stackblitzPrefillConfig(TileStories.ExpandableWithInteractive),
+    },
+  ]}
+/>
 
 ## Multi Select
 
-<Canvas of={TileStories.Selectable} />
+<Canvas
+  of={TileStories.Selectable}
+  additionalActions={[
+    {
+      title: 'Open in Stackblitz',
+      onClick: () => stackblitzPrefillConfig(TileStories.Selectable),
+    },
+  ]}
+/>
 
 ## Multi Select
 
-<Canvas of={TileStories.MultiSelect} />
+<Canvas
+  of={TileStories.MultiSelect}
+  additionalActions={[
+    {
+      title: 'Open in Stackblitz',
+      onClick: () => stackblitzPrefillConfig(TileStories.MultiSelect),
+    },
+  ]}
+/>
 
 ## Radio
 
-<Canvas of={TileStories.Radio} />
+<Canvas
+  of={TileStories.Radio}
+  additionalActions={[
+    {
+      title: 'Open in Stackblitz',
+      onClick: () => stackblitzPrefillConfig(TileStories.Radio),
+    },
+  ]}
+/>
 
 ## Experimental Improved Contrast
 
diff --git a/packages/react/src/components/Tile/Tile.stories.js b/packages/react/src/components/Tile/Tile.stories.js
index 07e586845247..6165a150f0c2 100644
--- a/packages/react/src/components/Tile/Tile.stories.js
+++ b/packages/react/src/components/Tile/Tile.stories.js
@@ -36,6 +36,8 @@ import { AILabel, AILabelContent, AILabelActions } from '../AILabel';
 import { IconButton } from '../IconButton';
 import { Tooltip } from '../Tooltip';
 
+import mdx from './Tile.mdx';
+
 export default {
   title: 'Components/Tile',
   component: Tile,
@@ -60,6 +62,11 @@ export default {
       },
     },
   },
+  parameters: {
+    docs: {
+      page: mdx,
+    },
+  },
 };
 
 export const Default = () => {
@@ -258,66 +265,72 @@ export const RadioWithLayer = () => (
   </WithLayer>
 );
 
-export const Expandable = () => (
-  <div style={{ width: '400px' }}>
-    <ExpandableTile
-      id="expandable-tile-1"
-      tileCollapsedIconText="Interact to Expand tile"
-      tileExpandedIconText="Interact to Collapse tile">
-      <TileAboveTheFoldContent>
-        <div style={{ height: '200px' }}>Above the fold content here</div>
-      </TileAboveTheFoldContent>
-      <TileBelowTheFoldContent>
-        <div style={{ height: '400px' }}>Below the fold content here</div>
-      </TileBelowTheFoldContent>
-    </ExpandableTile>
-  </div>
-);
+export const Expandable = () => {
+  return (
+    <div style={{ width: '400px' }}>
+      <ExpandableTile
+        id="expandable-tile-1"
+        tileCollapsedIconText="Interact to Expand tile"
+        tileExpandedIconText="Interact to Collapse tile">
+        <TileAboveTheFoldContent>
+          <div style={{ height: '200px' }}>Above the fold content here</div>
+        </TileAboveTheFoldContent>
+        <TileBelowTheFoldContent>
+          <div style={{ height: '400px' }}>Below the fold content here</div>
+        </TileBelowTheFoldContent>
+      </ExpandableTile>
+    </div>
+  );
+};
 
-export const ExpandableWithInteractive = () => (
-  <div style={{ width: '400px' }}>
-    <ExpandableTile
-      onClick={() => console.log('click')}
-      id="expandable-tile-1"
-      tileCollapsedIconText="Interact to Expand tile"
-      tileExpandedIconText="Interact to Collapse tile">
-      <TileAboveTheFoldContent>
-        <div style={{ height: '200px', width: '200px' }}>
-          Above the fold content here
-          <div style={{ paddingTop: '1rem' }}>
-            <Button>Example</Button>
+export const ExpandableWithInteractive = () => {
+  return (
+    <div style={{ width: '400px' }}>
+      <ExpandableTile
+        onClick={() => console.log('click')}
+        id="expandable-tile-1"
+        tileCollapsedIconText="Interact to Expand tile"
+        tileExpandedIconText="Interact to Collapse tile">
+        <TileAboveTheFoldContent>
+          <div style={{ height: '200px', width: '200px' }}>
+            Above the fold content here
+            <div style={{ paddingTop: '1rem' }}>
+              <Button>Example</Button>
+            </div>
           </div>
-        </div>
-      </TileAboveTheFoldContent>
-      <TileBelowTheFoldContent>
-        <div style={{ height: '200px', width: '200px' }}>
-          Below the fold content here
-          <TextInput id="test2" invalidText="A valid value is required" />
-        </div>
-      </TileBelowTheFoldContent>
-    </ExpandableTile>
-  </div>
-);
+        </TileAboveTheFoldContent>
+        <TileBelowTheFoldContent>
+          <div style={{ height: '200px', width: '200px' }}>
+            Below the fold content here
+            <TextInput id="test2" invalidText="A valid value is required" />
+          </div>
+        </TileBelowTheFoldContent>
+      </ExpandableTile>
+    </div>
+  );
+};
 
-export const ExpandableWithLayer = () => (
-  <WithLayer>
-    {(layer) => (
-      <div style={{ width: '400px' }}>
-        <ExpandableTile
-          id={`expandable-tile-${layer}`}
-          tileCollapsedIconText="Interact to Expand tile"
-          tileExpandedIconText="Interact to Collapse tile">
-          <TileAboveTheFoldContent>
-            <div style={{ height: '100px' }}>Above the fold content here</div>
-          </TileAboveTheFoldContent>
-          <TileBelowTheFoldContent>
-            <div style={{ height: '200px' }}>Below the fold content here</div>
-          </TileBelowTheFoldContent>
-        </ExpandableTile>
-      </div>
-    )}
-  </WithLayer>
-);
+export const ExpandableWithLayer = () => {
+  return (
+    <WithLayer>
+      {(layer) => (
+        <div style={{ width: '400px' }}>
+          <ExpandableTile
+            id={`expandable-tile-${layer}`}
+            tileCollapsedIconText="Interact to Expand tile"
+            tileExpandedIconText="Interact to Collapse tile">
+            <TileAboveTheFoldContent>
+              <div style={{ height: '100px' }}>Above the fold content here</div>
+            </TileAboveTheFoldContent>
+            <TileBelowTheFoldContent>
+              <div style={{ height: '200px' }}>Below the fold content here</div>
+            </TileBelowTheFoldContent>
+          </ExpandableTile>
+        </div>
+      )}
+    </WithLayer>
+  );
+};
 
 const aiLabel = (
   <AILabel className="ai-label-container">
diff --git a/packages/react/src/components/Tooltip/DefinitionTooltip.mdx b/packages/react/src/components/Tooltip/DefinitionTooltip.mdx
index ee3ae85847df..ff3981dc76b8 100644
--- a/packages/react/src/components/Tooltip/DefinitionTooltip.mdx
+++ b/packages/react/src/components/Tooltip/DefinitionTooltip.mdx
@@ -1,5 +1,6 @@
 import { Story, ArgTypes, Canvas, Meta } from '@storybook/blocks';
 import * as DefinitionTooltipStories from './DefinitionTooltip.stories';
+import { stackblitzPrefillConfig } from '../../../previewer/codePreviewer';
 
 <Meta isTemplate />
 
@@ -34,7 +35,15 @@ The `DefinitionTooltip` is made up of two parts: a term and the tooltip itself.
 You can customize the contents of the tooltip through the `definition` prop. You
 can customize the term by providing your own `children` to this component.
 
-<Canvas of={DefinitionTooltipStories.Default} />
+<Canvas
+  of={DefinitionTooltipStories.Default}
+  additionalActions={[
+    {
+      title: 'Open in Stackblitz',
+      onClick: () => stackblitzPrefillConfig(DefinitionTooltipStories.Default),
+    },
+  ]}
+/>
 
 ### Customizing the content of a definition tooltip
 
diff --git a/packages/react/src/components/Tooltip/Tooltip.mdx b/packages/react/src/components/Tooltip/Tooltip.mdx
index 4fa2da5298e8..23ff0158dc07 100644
--- a/packages/react/src/components/Tooltip/Tooltip.mdx
+++ b/packages/react/src/components/Tooltip/Tooltip.mdx
@@ -1,5 +1,6 @@
 import { Story, ArgTypes, Canvas, Meta } from '@storybook/blocks';
 import * as TooltipStories from './Tooltip.stories';
+import { stackblitzPrefillConfig } from '../../../previewer/codePreviewer';
 
 <Meta isTemplate />
 
@@ -42,7 +43,15 @@ can provide the interactive element as a child to `Tooltip`, for example:
 the component you provide renders an interactive element. In addition, you can
 specify the contents of the popup through the `label` or `description` prop.
 
-<Canvas of={TooltipStories.Default} />
+<Canvas
+  of={TooltipStories.Default}
+  additionalActions={[
+    {
+      title: 'Open in Stackblitz',
+      onClick: () => stackblitzPrefillConfig(TooltipStories.Default),
+    },
+  ]}
+/>
 
 ### Toggletips vs Tooltips
 
@@ -79,7 +88,15 @@ relative to the tooltip. For example, if you provide `align="top"` to the
 Similarly, if you provide `align="bottom"` then the tooltip will render below
 your component.
 
-<Canvas of={TooltipStories.Alignment} />
+<Canvas
+  of={TooltipStories.Alignment}
+  additionalActions={[
+    {
+      title: 'Open in Stackblitz',
+      onClick: () => stackblitzPrefillConfig(TooltipStories.Alignment),
+    },
+  ]}
+/>
 
 You can also configure the placement of the caret, if it is enabled, by choosing
 between `left` and `right` or `bottom` and `top`, depending on where your
@@ -98,7 +115,15 @@ You can customize the delay between when a tooltip is invoked and its contents
 are shown. You can also customize the delay between when a tooltip is dismissed
 and its contents are hidden.
 
-<Canvas of={TooltipStories.Duration} />
+<Canvas
+  of={TooltipStories.Duration}
+  additionalActions={[
+    {
+      title: 'Open in Stackblitz',
+      onClick: () => stackblitzPrefillConfig(TooltipStories.Duration),
+    },
+  ]}
+/>
 
 The `enterDelayMs` prop allows you to provide a time, in milliseconds, that the
 component will wait before showing the tooltip. The `exitDelayMs` prop allows
diff --git a/packages/react/src/components/TreeView/TreeView.mdx b/packages/react/src/components/TreeView/TreeView.mdx
index 5140818a0ae3..b2603d074a73 100644
--- a/packages/react/src/components/TreeView/TreeView.mdx
+++ b/packages/react/src/components/TreeView/TreeView.mdx
@@ -1,5 +1,6 @@
 import { ArgTypes, Canvas, Meta } from '@storybook/blocks';
 import * as TreeViewStories from './Treeview.stories';
+import { stackblitzPrefillConfig } from '../../../previewer/codePreviewer';
 
 <Meta isTemplate />
 
@@ -19,7 +20,19 @@ TreeView is a component that allows users to navigate through a hierarchy of
 items. It is used to display nested lists of items that can be expanded or
 collapsed to show and hide additional items.
 
-<Canvas of={TreeViewStories.Default} />
+<Canvas
+  of={TreeViewStories.Default}
+  additionalActions={[
+    {
+      title: 'Open in Stackblitz',
+      onClick: () =>
+        stackblitzPrefillConfig(
+          TreeViewStories.Default,
+          "import { Document, Folder } from '@carbon/icons-react';"
+        ),
+    },
+  ]}
+/>
 
 ## With Controlled Expansion
 
@@ -27,14 +40,38 @@ The `expanded` prop can be used to control the expansion state of the TreeView.
 The `isExpanded` prop can be used to determine if an individual tree node is
 expanded or collapsed.
 
-<Canvas of={TreeViewStories.WithControlledExpansion} />
+<Canvas
+  of={TreeViewStories.WithControlledExpansion}
+  additionalActions={[
+    {
+      title: 'Open in Stackblitz',
+      onClick: () =>
+        stackblitzPrefillConfig(
+          TreeViewStories.WithControlledExpansion,
+          "import { Document, Folder } from '@carbon/icons-react';"
+        ),
+    },
+  ]}
+/>
 
 ## With Custom Icons
 
 The `renderIcon` prop can be used to customize the icons of each node in the
 TreeView.
 
-<Canvas of={TreeViewStories.WithIcons} />
+<Canvas
+  of={TreeViewStories.WithIcons}
+  additionalActions={[
+    {
+      title: 'Open in Stackblitz',
+      onClick: () =>
+        stackblitzPrefillConfig(
+          TreeViewStories.WithIcons,
+          "import { Document, Folder } from '@carbon/icons-react';"
+        ),
+    },
+  ]}
+/>
 
 ## Component API
 
diff --git a/packages/react/src/components/TreeView/Treeview.stories.js b/packages/react/src/components/TreeView/Treeview.stories.js
index 94339625b5c9..b383d808d630 100644
--- a/packages/react/src/components/TreeView/Treeview.stories.js
+++ b/packages/react/src/components/TreeView/Treeview.stories.js
@@ -223,11 +223,182 @@ export default {
   },
 };
 
-export const Default = (args) => (
-  <TreeView label="Tree View" {...args}>
-    {renderTree({ nodes })}
-  </TreeView>
-);
+export const Default = (args) => {
+  const nodes = [
+    {
+      id: '1',
+      value: 'Artificial intelligence',
+      label: <span>Artificial intelligence</span>,
+      renderIcon: Document,
+    },
+    {
+      id: '2',
+      value: 'Blockchain',
+      label: 'Blockchain',
+      renderIcon: Document,
+    },
+    {
+      id: '3',
+      value: 'Business automation',
+      label: 'Business automation',
+      renderIcon: Folder,
+      children: [
+        {
+          id: '3-1',
+          value: 'Business process automation',
+          label: 'Business process automation',
+          renderIcon: Document,
+        },
+        {
+          id: '3-2',
+          value: 'Business process mapping',
+          label: 'Business process mapping',
+          renderIcon: Document,
+        },
+      ],
+    },
+    {
+      id: '4',
+      value: 'Business operations',
+      label: 'Business operations',
+      renderIcon: Document,
+    },
+    {
+      id: '5',
+      value: 'Cloud computing',
+      label: 'Cloud computing',
+      isExpanded: true,
+      renderIcon: Folder,
+      children: [
+        {
+          id: '5-1',
+          value: 'Containers',
+          label: 'Containers',
+          renderIcon: Document,
+        },
+        {
+          id: '5-2',
+          value: 'Databases',
+          label: 'Databases',
+          renderIcon: Document,
+        },
+        {
+          id: '5-3',
+          value: 'DevOps',
+          label: 'DevOps',
+          isExpanded: true,
+          renderIcon: Folder,
+          children: [
+            {
+              id: '5-4',
+              value: 'Solutions',
+              label: 'Solutions',
+              renderIcon: Document,
+            },
+            {
+              id: '5-5',
+              value: 'Case studies',
+              label: 'Case studies',
+              isExpanded: true,
+              renderIcon: Folder,
+              children: [
+                {
+                  id: '5-6',
+                  value: 'Resources',
+                  label: 'Resources',
+                  renderIcon: Document,
+                },
+              ],
+            },
+          ],
+        },
+      ],
+    },
+    {
+      id: '6',
+      value: 'Data & Analytics',
+      label: 'Data & Analytics',
+      renderIcon: Folder,
+      children: [
+        {
+          id: '6-1',
+          value: 'Big data',
+          label: 'Big data',
+          renderIcon: Document,
+        },
+        {
+          id: '6-2',
+          value: 'Business intelligence',
+          label: 'Business intelligence',
+          renderIcon: Document,
+        },
+      ],
+    },
+    {
+      id: '7',
+      value: 'Models',
+      label: 'Models',
+      isExpanded: true,
+      disabled: true,
+      renderIcon: Folder,
+      children: [
+        {
+          id: '7-1',
+          value: 'Audit',
+          label: 'Audit',
+          renderIcon: Document,
+        },
+        {
+          id: '7-2',
+          value: 'Monthly data',
+          label: 'Monthly data',
+          renderIcon: Document,
+        },
+        {
+          id: '8',
+          value: 'Data warehouse',
+          label: 'Data warehouse',
+          isExpanded: true,
+          renderIcon: Folder,
+          children: [
+            {
+              id: '8-1',
+              value: 'Report samples',
+              label: 'Report samples',
+              renderIcon: Document,
+            },
+            {
+              id: '8-2',
+              value: 'Sales performance',
+              label: 'Sales performance',
+              renderIcon: Document,
+            },
+          ],
+        },
+      ],
+    },
+  ];
+
+  function renderTree({ nodes, expanded, withIcons = false }) {
+    if (!nodes) {
+      return;
+    }
+    return nodes.map(({ children, renderIcon, isExpanded, ...nodeProps }) => (
+      <TreeNode
+        key={nodeProps.id}
+        renderIcon={withIcons ? renderIcon : null}
+        isExpanded={expanded ?? isExpanded}
+        {...nodeProps}>
+        {renderTree({ nodes: children, expanded, withIcons })}
+      </TreeNode>
+    ));
+  }
+  return (
+    <TreeView label="Tree View" {...args}>
+      {renderTree({ nodes })}
+    </TreeView>
+  );
+};
 
 Default.args = {
   hideLabel: false,
@@ -242,14 +413,356 @@ Default.argTypes = {
   },
 };
 
-export const WithIcons = () => (
-  <TreeView label="Tree View">
-    {renderTree({ nodes, withIcons: true })}
-  </TreeView>
-);
+export const WithIcons = () => {
+  const nodes = [
+    {
+      id: '1',
+      value: 'Artificial intelligence',
+      label: <span>Artificial intelligence</span>,
+      renderIcon: Document,
+    },
+    {
+      id: '2',
+      value: 'Blockchain',
+      label: 'Blockchain',
+      renderIcon: Document,
+    },
+    {
+      id: '3',
+      value: 'Business automation',
+      label: 'Business automation',
+      renderIcon: Folder,
+      children: [
+        {
+          id: '3-1',
+          value: 'Business process automation',
+          label: 'Business process automation',
+          renderIcon: Document,
+        },
+        {
+          id: '3-2',
+          value: 'Business process mapping',
+          label: 'Business process mapping',
+          renderIcon: Document,
+        },
+      ],
+    },
+    {
+      id: '4',
+      value: 'Business operations',
+      label: 'Business operations',
+      renderIcon: Document,
+    },
+    {
+      id: '5',
+      value: 'Cloud computing',
+      label: 'Cloud computing',
+      isExpanded: true,
+      renderIcon: Folder,
+      children: [
+        {
+          id: '5-1',
+          value: 'Containers',
+          label: 'Containers',
+          renderIcon: Document,
+        },
+        {
+          id: '5-2',
+          value: 'Databases',
+          label: 'Databases',
+          renderIcon: Document,
+        },
+        {
+          id: '5-3',
+          value: 'DevOps',
+          label: 'DevOps',
+          isExpanded: true,
+          renderIcon: Folder,
+          children: [
+            {
+              id: '5-4',
+              value: 'Solutions',
+              label: 'Solutions',
+              renderIcon: Document,
+            },
+            {
+              id: '5-5',
+              value: 'Case studies',
+              label: 'Case studies',
+              isExpanded: true,
+              renderIcon: Folder,
+              children: [
+                {
+                  id: '5-6',
+                  value: 'Resources',
+                  label: 'Resources',
+                  renderIcon: Document,
+                },
+              ],
+            },
+          ],
+        },
+      ],
+    },
+    {
+      id: '6',
+      value: 'Data & Analytics',
+      label: 'Data & Analytics',
+      renderIcon: Folder,
+      children: [
+        {
+          id: '6-1',
+          value: 'Big data',
+          label: 'Big data',
+          renderIcon: Document,
+        },
+        {
+          id: '6-2',
+          value: 'Business intelligence',
+          label: 'Business intelligence',
+          renderIcon: Document,
+        },
+      ],
+    },
+    {
+      id: '7',
+      value: 'Models',
+      label: 'Models',
+      isExpanded: true,
+      disabled: true,
+      renderIcon: Folder,
+      children: [
+        {
+          id: '7-1',
+          value: 'Audit',
+          label: 'Audit',
+          renderIcon: Document,
+        },
+        {
+          id: '7-2',
+          value: 'Monthly data',
+          label: 'Monthly data',
+          renderIcon: Document,
+        },
+        {
+          id: '8',
+          value: 'Data warehouse',
+          label: 'Data warehouse',
+          isExpanded: true,
+          renderIcon: Folder,
+          children: [
+            {
+              id: '8-1',
+              value: 'Report samples',
+              label: 'Report samples',
+              renderIcon: Document,
+            },
+            {
+              id: '8-2',
+              value: 'Sales performance',
+              label: 'Sales performance',
+              renderIcon: Document,
+            },
+          ],
+        },
+      ],
+    },
+  ];
+
+  function renderTree({ nodes, expanded, withIcons = false }) {
+    if (!nodes) {
+      return;
+    }
+    return nodes.map(({ children, renderIcon, isExpanded, ...nodeProps }) => (
+      <TreeNode
+        key={nodeProps.id}
+        renderIcon={withIcons ? renderIcon : null}
+        isExpanded={expanded ?? isExpanded}
+        {...nodeProps}>
+        {renderTree({ nodes: children, expanded, withIcons })}
+      </TreeNode>
+    ));
+  }
+  return (
+    <TreeView label="Tree View">
+      {renderTree({ nodes, withIcons: true })}
+    </TreeView>
+  );
+};
 
 export const WithControlledExpansion = () => {
-  const [expanded, setExpanded] = useState(undefined);
+  const nodes = [
+    {
+      id: '1',
+      value: 'Artificial intelligence',
+      label: <span>Artificial intelligence</span>,
+      renderIcon: Document,
+    },
+    {
+      id: '2',
+      value: 'Blockchain',
+      label: 'Blockchain',
+      renderIcon: Document,
+    },
+    {
+      id: '3',
+      value: 'Business automation',
+      label: 'Business automation',
+      renderIcon: Folder,
+      children: [
+        {
+          id: '3-1',
+          value: 'Business process automation',
+          label: 'Business process automation',
+          renderIcon: Document,
+        },
+        {
+          id: '3-2',
+          value: 'Business process mapping',
+          label: 'Business process mapping',
+          renderIcon: Document,
+        },
+      ],
+    },
+    {
+      id: '4',
+      value: 'Business operations',
+      label: 'Business operations',
+      renderIcon: Document,
+    },
+    {
+      id: '5',
+      value: 'Cloud computing',
+      label: 'Cloud computing',
+      isExpanded: true,
+      renderIcon: Folder,
+      children: [
+        {
+          id: '5-1',
+          value: 'Containers',
+          label: 'Containers',
+          renderIcon: Document,
+        },
+        {
+          id: '5-2',
+          value: 'Databases',
+          label: 'Databases',
+          renderIcon: Document,
+        },
+        {
+          id: '5-3',
+          value: 'DevOps',
+          label: 'DevOps',
+          isExpanded: true,
+          renderIcon: Folder,
+          children: [
+            {
+              id: '5-4',
+              value: 'Solutions',
+              label: 'Solutions',
+              renderIcon: Document,
+            },
+            {
+              id: '5-5',
+              value: 'Case studies',
+              label: 'Case studies',
+              isExpanded: true,
+              renderIcon: Folder,
+              children: [
+                {
+                  id: '5-6',
+                  value: 'Resources',
+                  label: 'Resources',
+                  renderIcon: Document,
+                },
+              ],
+            },
+          ],
+        },
+      ],
+    },
+    {
+      id: '6',
+      value: 'Data & Analytics',
+      label: 'Data & Analytics',
+      renderIcon: Folder,
+      children: [
+        {
+          id: '6-1',
+          value: 'Big data',
+          label: 'Big data',
+          renderIcon: Document,
+        },
+        {
+          id: '6-2',
+          value: 'Business intelligence',
+          label: 'Business intelligence',
+          renderIcon: Document,
+        },
+      ],
+    },
+    {
+      id: '7',
+      value: 'Models',
+      label: 'Models',
+      isExpanded: true,
+      disabled: true,
+      renderIcon: Folder,
+      children: [
+        {
+          id: '7-1',
+          value: 'Audit',
+          label: 'Audit',
+          renderIcon: Document,
+        },
+        {
+          id: '7-2',
+          value: 'Monthly data',
+          label: 'Monthly data',
+          renderIcon: Document,
+        },
+        {
+          id: '8',
+          value: 'Data warehouse',
+          label: 'Data warehouse',
+          isExpanded: true,
+          renderIcon: Folder,
+          children: [
+            {
+              id: '8-1',
+              value: 'Report samples',
+              label: 'Report samples',
+              renderIcon: Document,
+            },
+            {
+              id: '8-2',
+              value: 'Sales performance',
+              label: 'Sales performance',
+              renderIcon: Document,
+            },
+          ],
+        },
+      ],
+    },
+  ];
+
+  const [expanded, setExpanded] = React.useState(undefined);
+
+  function renderTree({ nodes, expanded, withIcons = false }) {
+    if (!nodes) {
+      return;
+    }
+    return nodes.map(({ children, renderIcon, isExpanded, ...nodeProps }) => (
+      <TreeNode
+        key={nodeProps.id}
+        renderIcon={withIcons ? renderIcon : null}
+        isExpanded={expanded ?? isExpanded}
+        {...nodeProps}>
+        {renderTree({ nodes: children, expanded, withIcons })}
+      </TreeNode>
+    ));
+  }
+
   return (
     <>
       <div style={{ marginBottom: '1rem' }}>