diff --git a/code/addons/highlight/README.md b/code/addons/highlight/README.md
index 4713f3aae058..e4b245acc5fd 100644
--- a/code/addons/highlight/README.md
+++ b/code/addons/highlight/README.md
@@ -4,61 +4,143 @@ Storybook addon allows for highlighting specific DOM nodes within your story.
 
 Use it to call attention to particular parts of the story. Or use it to enhance other addons that you might be building. For example, [Accessibility](https://storybook.js.org/addons/@storybook/addon-a11y/) addon uses it to highlight DOM nodes that are failing accessibility checks.
 
-![](https://user-images.githubusercontent.com/42671/160146801-179eaa79-fff8-4bff-b17c-9262fdc94918.png)
+![Story with highlight](./docs/highlight.png)
 
 ## Usage
 
-This addon requires Storybook 6.5 or later. Highlight is part of [essentials](https://storybook.js.org/docs/react/essentials/introduction) and so is installed in all new Storybooks by default. If you need to add it to your Storybook, you can run:
+This addon requires Storybook 6.5 or later. Highlight is part of [essentials](https://storybook.js.org/docs/react/essentials/introduction) and so is installed in all new Storybooks by default. If you need to add it to your Storybook, you can run the following command:
+
+yarn:
+
+```sh
+yarn add --dev @storybook/addon-highlight
+```
+
+npm:
 
 ```sh
-npm i -D @storybook/addon-highlight
+npm install @storybook/addon-highlight --save-dev
 ```
 
-Add `"@storybook/addon-highlight"` to the addons array in your `.storybook/main.js`:
+pnpm:
+
+```sh
+pnpm add --save-dev @storybook/addon-highlight
+```
+
+Add `"@storybook/addon-highlight"` to the addons array in your `.storybook/main.js|ts`:
+
+```ts
+// .storybook/main.ts
 
-```js
-export default {
+// Replace your-framework with the framework you are using (e.g., react-webpack5, vue3-vite)
+import type { StorybookConfig } from '@storybook/your-framework';
+
+const config: StorybookConfig = {
   addons: ['@storybook/addon-highlight'],
 };
+
+export default config;
 ```
 
-### Apply or clear highlights
+### Highlighting DOM Elements
 
-Highlight DOM nodes by emitting the `HIGHLIGHT` event from within a story or an addon. The event payload must contain a list of selectors you want to highlight.
+Highlight DOM nodes by emitting the `HIGHLIGHT` event from within a story or an addon. The event payload must contain an `elements` property assigned to an array of selectors matching the elements you want to highlight.
 
-```js
-import React, { useEffect } from 'react';
-import { useChannel } from '@storybook/preview-api';
-import { HIGHLIGHT, RESET_HIGHLIGHT } from '@storybook/addon-highlight';
-import { MyComponent } from './MyComponent';
+```ts
+// MyComponent.stories.ts
 
-export default { component: MyComponent };
+import type { Meta, StoryObj } from '@storybook/react';
+import { useChannel } from '@storybook/preview-api';
+import { HIGHLIGHT } from '@storybook/addon-highlight';
 
-export const MyStory = () => {
-  const emit = useChannel({});
+import { MyComponent } from './MyComponent';
 
-  useEffect(() => {
-    emit(HIGHLIGHT, {
-      elements: ['.title', '.subtitle'],
-    });
-  }, []);
+const meta: Meta<typeof MyComponent> = {
+  component: MyComponent,
+};
 
-  return <MyComponent />;
+export default meta;
+type Story = StoryObj<typeof MyComponent>;
+
+export const Highlighted: Story = {
+  decorators: [
+    (storyFn) => {
+      const emit = useChannel({});
+      emit(HIGHLIGHT, {
+        elements: ['.title', '.subtitle'],
+      });
+      return storyFn();
+    },
+  ],
 };
 ```
 
+### Reset highlighted elements
+
 Highlights are automatically cleared when the story changes. You can also manually clear them by emitting the `RESET_HIGHLIGHT` event.
 
-```js
-emit(RESET_HIGHLIGHT);
+```ts
+// MyComponent.stories.ts|tsx
+
+import type { Meta, StoryObj } from '@storybook/react';
+import { useChannel } from '@storybook/preview-api';
+import { HIGHLIGHT, RESET_HIGHLIGHT } from '@storybook/addon-highlight';
+
+import { MyComponent } from './MyComponent';
+
+const meta: Meta<typeof MyComponent> = {
+  component: MyComponent,
+};
+
+export default meta;
+type Story = StoryObj<typeof MyComponent>;
+
+export const ResetHighlight: Story = {
+  decorators: [
+    (storyFn) => {
+      const emit = useChannel({});
+      emit(RESET_HIGHLIGHT); //👈 Remove previously highlighted elements
+      emit(HIGHLIGHT, {
+        elements: ['header', 'section', 'footer'],
+      });
+      return storyFn();
+    },
+  ],
+};
 ```
 
 ### Customize style
 
-```js
-emit(HIGHLIGHT, {
-  elements: ['.title', '.subtitle'],
-  color: 'red',
-  style: 'solid', // 'dotted' | 'dashed' | 'solid' | 'double'
-});
+The addon applies a standard style to the highlighted elements you've enabled for the story. However, you can enable your custom style by extending the payload object and providing a `color` and/or `style` properties. For example:
+
+```ts
+// MyComponent.stories.ts
+
+import type { Meta, StoryObj } from '@storybook/react';
+import { useChannel } from '@storybook/preview-api';
+import { HIGHLIGHT } from '@storybook/addon-highlight';
+
+import { MyComponent } from './MyComponent';
+
+const meta: Meta<typeof MyComponent> = {
+  component: MyComponent,
+};
+
+export default meta;
+type Story = StoryObj<typeof MyComponent>;
+
+export const StyledHighlight: Story = {
+  decorators: [
+    (storyFn) => {
+      const emit = useChannel({});
+      emit(HIGHLIGHT, {
+        elements: ['.title', '.subtitle'],
+        color: 'red',
+        style: 'solid', // 'dotted' | 'dashed' | 'solid' | 'double'
+      });
+      return storyFn();
+    },
+  ],
+};
 ```
diff --git a/code/addons/highlight/docs/highlight.png b/code/addons/highlight/docs/highlight.png
new file mode 100644
index 000000000000..2d1aef2f56ea
Binary files /dev/null and b/code/addons/highlight/docs/highlight.png differ
diff --git a/docs/essentials/highlight.md b/docs/essentials/highlight.md
index 926f1a9589e4..c1f8222a9885 100644
--- a/docs/essentials/highlight.md
+++ b/docs/essentials/highlight.md
@@ -2,36 +2,51 @@
 title: 'Highlight'
 ---
 
-Storybook's [Highlight](https://storybook.js.org/addons/@storybook/addon-highlight/) addon allows you to highlight specific DOM nodes within your story. You can use it to call attention to particular parts of the story.
+Storybook's [Highlight](https://storybook.js.org/addons/@storybook/addon-highlight/) addon is a helpful tool for visually debugging your components, allowing you to highlight specific DOM nodes within your story when used as a standalone addon or enhancing other addons such as the [Accessibility addon](https://storybook.js.org/addons/@storybook/addon-a11y/) to inform you of accessibility issues within your components.
 
-![](highlight.png)
+![Story with highlighted elements](./highlight.png)
 
-This addon can be used to enhance other addons. For example, [Accessibility](https://storybook.js.org/addons/@storybook/addon-a11y/) addon uses it to highlight DOM nodes that are failing accessibility checks.
+## Highlighting DOM Elements
 
-## Apply or clear highlights
-
-Highlight DOM nodes by emitting the `HIGHLIGHT` event from within a story or an addon. The event payload must contain a list of selectors you want to highlight.
+To highlight DOM elements with the addon, you'll need to emit the `HIGHLIGHT` event from within a story or an addon. The event payload must contain an `elements` property assigned to an array of selectors matching the elements you want to highlight. For example:
 
 <!-- prettier-ignore-start -->
 
 <CodeSnippets
   paths={[
     'react/component-story-highlight-addon.js.mdx',
+    'react/component-story-highlight-addon.ts.mdx',
     'angular/component-story-highlight-addon.ts.mdx',
     'vue/component-story-highlight-addon.js.mdx',
+    'vue/component-story-highlight-addon.ts.mdx',
     'web-components/component-story-highlight-addon.js.mdx',
+    'web-components/component-story-highlight-addon.ts.mdx',
   ]}
 />
 
 <!-- prettier-ignore-end -->
 
-Highlights are automatically cleared when the story changes. You can also manually clear them by emitting the `RESET_HIGHLIGHT` event.
+<div class="aside">
+
+💡 We recommend choosing the most specific selector possible to avoid highlighting elements other addons use. This is because the addon tries to match selectors against the entire DOM tree.
+
+</div>
+
+### Reset highlighted elements
+
+Out of the box, Storybook automatically removes highlighted elements when transitioning between stories. However, if you need to clear them manually, you can emit the `RESET_HIGHLIGHT` event from within a story or an addon. For example:
 
 <!-- prettier-ignore-start -->
 
 <CodeSnippets
   paths={[
-    'common/addon-highlight-reset.js.mdx',
+    'react/addon-highlight-reset.js.mdx',
+    'react/addon-highlight-reset.ts.mdx',
+    'angular/addon-highlight-reset.ts.mdx',
+    'vue/addon-highlight-reset.js.mdx',
+    'vue/addon-highlight-reset.ts.mdx',
+    'web-components/addon-highlight-reset.js.mdx',
+    'web-components/addon-highlight-reset.ts.mdx',
   ]}
 />
 
@@ -39,11 +54,19 @@ Highlights are automatically cleared when the story changes. You can also manual
 
 ## Customize style
 
+By default, the addon applies a standard style to the highlighted elements you've enabled for the story. However, you can enable your custom style by extending the payload object and providing a `color` and/or `style` properties. For example:
+
 <!-- prettier-ignore-start -->
 
 <CodeSnippets
   paths={[
-    'common/addon-highlight-customize.js.mdx',
+    'react/highlight-addon-custom-style.js.mdx',
+    'react/highlight-addon-custom-style.ts.mdx',
+    'angular/highlight-addon-custom-style.ts.mdx',
+    'vue/highlight-addon-custom-style.js.mdx',
+    'vue/highlight-addon-custom-style.ts.mdx',
+    'web-components/highlight-addon-custom-style.js.mdx',
+    'web-components/highlight-addon-custom-style.ts.mdx',
   ]}
 />
 
diff --git a/docs/essentials/highlight.png b/docs/essentials/highlight.png
index 616e42e388b5..2d1aef2f56ea 100644
Binary files a/docs/essentials/highlight.png and b/docs/essentials/highlight.png differ
diff --git a/docs/snippets/angular/addon-highlight-reset.ts.mdx b/docs/snippets/angular/addon-highlight-reset.ts.mdx
new file mode 100644
index 000000000000..04fe5864f9fe
--- /dev/null
+++ b/docs/snippets/angular/addon-highlight-reset.ts.mdx
@@ -0,0 +1,30 @@
+```ts
+// MyComponent.stories.ts
+
+import type { Meta, StoryObj } from '@storybook/angular';
+import { componentWrapperDecorator } from '@storybook/angular';
+import { useChannel } from '@storybook/preview-api';
+import { HIGHLIGHT, RESET_HIGHLIGHT } from '@storybook/addon-highlight';
+
+import { MyComponent } from './MyComponent.component';
+
+const meta: Meta<MyComponent> = {
+  component: MyComponent,
+};
+
+export default meta;
+type Story = StoryObj<MyComponent>;
+
+export const ResetHighlight: Story = {
+  decorators: [
+    componentWrapperDecorator((story) => {
+      const emit = useChannel({});
+      emit(RESET_HIGHLIGHT); //👈 Remove previously highlighted elements
+      emit(HIGHLIGHT, {
+        elements: ['header', 'section', 'footer'],
+      });
+      return story;
+    }),
+  ],
+};
+```
diff --git a/docs/snippets/angular/component-story-highlight-addon.ts.mdx b/docs/snippets/angular/component-story-highlight-addon.ts.mdx
index 1786f86192e0..b64a6c96bac7 100644
--- a/docs/snippets/angular/component-story-highlight-addon.ts.mdx
+++ b/docs/snippets/angular/component-story-highlight-addon.ts.mdx
@@ -1,34 +1,29 @@
 ```ts
-// Card.stories.ts
+// MyComponent.stories.ts
 
-import { componentWrapperDecorator } from '@storybook/angular';
 import type { Meta, StoryObj } from '@storybook/angular';
+import { componentWrapperDecorator } from '@storybook/angular';
 import { useChannel } from '@storybook/preview-api';
-import { HIGHLIGHT, RESET_HIGHLIGHT } from '@storybook/addon-highlight';
-import { Card } from './card.component';
+import { HIGHLIGHT } from '@storybook/addon-highlight';
 
-const meta: Meta<Card> = {
-  /* 👇 The title prop is optional.
-   * See https://storybook.js.org/docs/angular/configure/overview#configure-story-loading
-   * to learn how to generate automatic titles
-   */
-  title: 'Card',
-  component: Card,
+import { MyComponent } from './MyComponent.component';
+
+const meta: Meta<MyComponent> = {
+  component: MyComponent,
 };
 
 export default meta;
-type Story = StoryObj<Card>;
+type Story = StoryObj<MyComponent>;
 
-export const Default: Story = (args) => ({
-  template: '<app-card></app-card>',
+export const Highlighted: Story = {
   decorators: [
     componentWrapperDecorator((story) => {
       const emit = useChannel({});
       emit(HIGHLIGHT, {
-        elements: ['.title', '.subtitle'],
+        elements: ['h2', 'a', '.storybook-button'],
       });
       return story;
     }),
   ],
-});
+};
 ```
diff --git a/docs/snippets/angular/highlight-addon-custom-style.ts.mdx b/docs/snippets/angular/highlight-addon-custom-style.ts.mdx
new file mode 100644
index 000000000000..193a4387e614
--- /dev/null
+++ b/docs/snippets/angular/highlight-addon-custom-style.ts.mdx
@@ -0,0 +1,31 @@
+```ts
+// MyComponent.stories.ts
+
+import type { Meta, StoryObj } from '@storybook/angular';
+import { componentWrapperDecorator } from '@storybook/angular';
+import { useChannel } from '@storybook/preview-api';
+import { HIGHLIGHT } from '@storybook/addon-highlight';
+
+import { MyComponent } from './MyComponent.component';
+
+const meta: Meta<MyComponent> = {
+  component: MyComponent,
+};
+
+export default meta;
+type Story = StoryObj<MyComponent>;
+
+export const StyledHighlight: Story = {
+  decorators: [
+    componentWrapperDecorator((story) => {
+      const emit = useChannel({});
+      emit(HIGHLIGHT, {
+        elements: ['h2', 'a', '.storybook-button'],
+        color: 'blue',
+        style: 'double', // 'dotted' | 'dashed' | 'solid' | 'double'
+      });
+      return story;
+    }),
+  ],
+};
+```
diff --git a/docs/snippets/common/addon-highlight-customize.js.mdx b/docs/snippets/common/addon-highlight-customize.js.mdx
deleted file mode 100644
index 45d07886f32e..000000000000
--- a/docs/snippets/common/addon-highlight-customize.js.mdx
+++ /dev/null
@@ -1,9 +0,0 @@
-```js
-// MyComponent.stories.js
-
-emit(HIGHLIGHT, {
-  elements: ['.title', '.subtitle'],
-  color: 'red',
-  style: 'solid', // 'dotted' | 'dashed' | 'solid' | 'double'
-});
-```
diff --git a/docs/snippets/common/addon-highlight-reset.js.mdx b/docs/snippets/common/addon-highlight-reset.js.mdx
deleted file mode 100644
index 54d5252ed60b..000000000000
--- a/docs/snippets/common/addon-highlight-reset.js.mdx
+++ /dev/null
@@ -1,5 +0,0 @@
-```js
-// MyComponent.stories.js
-
-emit(RESET_HIGHLIGHT);
-```
diff --git a/docs/snippets/react/addon-highlight-reset.js.mdx b/docs/snippets/react/addon-highlight-reset.js.mdx
new file mode 100644
index 000000000000..f969cce998a4
--- /dev/null
+++ b/docs/snippets/react/addon-highlight-reset.js.mdx
@@ -0,0 +1,25 @@
+```js
+// MyComponent.stories.js|jsx
+
+import { useChannel } from '@storybook/preview-api';
+import { HIGHLIGHT, RESET_HIGHLIGHT } from '@storybook/addon-highlight';
+
+import { MyComponent } from './MyComponent';
+
+export default {
+  component: MyComponent,
+};
+
+export const ResetHighlight = {
+  decorators: [
+    (storyFn) => {
+      const emit = useChannel({});
+      emit(RESET_HIGHLIGHT); //👈 Remove previously highlighted elements
+      emit(HIGHLIGHT, {
+        elements: ['header', 'section', 'footer'],
+      });
+      return storyFn();
+    },
+  ],
+};
+```
diff --git a/docs/snippets/react/addon-highlight-reset.ts-4-9.mdx b/docs/snippets/react/addon-highlight-reset.ts-4-9.mdx
new file mode 100644
index 000000000000..07e9f341c064
--- /dev/null
+++ b/docs/snippets/react/addon-highlight-reset.ts-4-9.mdx
@@ -0,0 +1,29 @@
+```ts
+// MyComponent.stories.ts|tsx
+
+import type { Meta, StoryObj } from '@storybook/react';
+import { useChannel } from '@storybook/preview-api';
+import { HIGHLIGHT, RESET_HIGHLIGHT } from '@storybook/addon-highlight';
+
+import { MyComponent } from './MyComponent';
+
+const meta = {
+  component: MyComponent,
+} satisfies Meta<typeof MyComponent>;
+
+export default meta;
+type Story = StoryObj<typeof meta>;
+
+export const ResetHighlight: Story = {
+  decorators: [
+    (storyFn) => {
+      const emit = useChannel({});
+      emit(RESET_HIGHLIGHT); //👈 Remove previously highlighted elements
+      emit(HIGHLIGHT, {
+        elements: ['header', 'section', 'footer'],
+      });
+      return storyFn();
+    },
+  ],
+};
+```
diff --git a/docs/snippets/react/addon-highlight-reset.ts.mdx b/docs/snippets/react/addon-highlight-reset.ts.mdx
new file mode 100644
index 000000000000..7ff20b0a39e5
--- /dev/null
+++ b/docs/snippets/react/addon-highlight-reset.ts.mdx
@@ -0,0 +1,29 @@
+```ts
+// MyComponent.stories.ts|tsx
+
+import type { Meta, StoryObj } from '@storybook/react';
+import { useChannel } from '@storybook/preview-api';
+import { HIGHLIGHT, RESET_HIGHLIGHT } from '@storybook/addon-highlight';
+
+import { MyComponent } from './MyComponent';
+
+const meta: Meta<typeof MyComponent> = {
+  component: MyComponent,
+};
+
+export default meta;
+type Story = StoryObj<typeof MyComponent>;
+
+export const ResetHighlight: Story = {
+  decorators: [
+    (storyFn) => {
+      const emit = useChannel({});
+      emit(RESET_HIGHLIGHT); //👈 Remove previously highlighted elements
+      emit(HIGHLIGHT, {
+        elements: ['header', 'section', 'footer'],
+      });
+      return storyFn();
+    },
+  ],
+};
+```
diff --git a/docs/snippets/react/component-story-highlight-addon.js.mdx b/docs/snippets/react/component-story-highlight-addon.js.mdx
index b4779176d2c5..9d0f8b146d17 100644
--- a/docs/snippets/react/component-story-highlight-addon.js.mdx
+++ b/docs/snippets/react/component-story-highlight-addon.js.mdx
@@ -1,27 +1,24 @@
 ```js
-// Card.stories.js|jsx
+// MyComponent.stories.js|jsx
 
-import React, { useEffect } from 'react';
 import { useChannel } from '@storybook/preview-api';
-import { HIGHLIGHT, RESET_HIGHLIGHT } from '@storybook/addon-highlight';
-import { Card } from './Card';
+import { HIGHLIGHT } from '@storybook/addon-highlight';
+
+import { MyComponent } from './MyComponent';
 
 export default {
-  /* 👇 The title prop is optional.
-   * See https://storybook.js.org/docs/react/configure/overview#configure-story-loading
-   * to learn how to generate automatic titles
-   */
-  title: 'Card',
-  component: Card,
+  component: MyComponent,
 };
 
-export const Default = () => <Card />;
-Default.decorators = [
-  (storyFn) => {
-    emit(HIGHLIGHT, {
-      elements: ['.title', '.subtitle'],
-    });
-    return storyFn();
-  },
-];
+export const Highlighted = {
+  decorators: [
+    (storyFn) => {
+      const emit = useChannel({});
+      emit(HIGHLIGHT, {
+        elements: ['h2', 'a', '.storybook-button'],
+      });
+      return storyFn();
+    },
+  ],
+};
 ```
diff --git a/docs/snippets/react/component-story-highlight-addon.ts-4-9.mdx b/docs/snippets/react/component-story-highlight-addon.ts-4-9.mdx
new file mode 100644
index 000000000000..1d43de9ca1c6
--- /dev/null
+++ b/docs/snippets/react/component-story-highlight-addon.ts-4-9.mdx
@@ -0,0 +1,28 @@
+```ts
+// MyComponent.stories.ts|tsx
+
+import type { Meta, StoryObj } from '@storybook/react';
+import { useChannel } from '@storybook/preview-api';
+import { HIGHLIGHT } from '@storybook/addon-highlight';
+
+import { MyComponent } from './MyComponent';
+
+const meta = {
+  component: MyComponent,
+} satisfies Meta<typeof MyComponent>;
+
+export default meta;
+type Story = StoryObj<typeof meta>;
+
+export const Highlighted: Story = {
+  decorators: [
+    (storyFn) => {
+      const emit = useChannel({});
+      emit(HIGHLIGHT, {
+        elements: ['h2', 'a', '.storybook-button'],
+      });
+      return storyFn();
+    },
+  ],
+};
+```
diff --git a/docs/snippets/react/component-story-highlight-addon.ts.mdx b/docs/snippets/react/component-story-highlight-addon.ts.mdx
new file mode 100644
index 000000000000..bed23c3c4ba2
--- /dev/null
+++ b/docs/snippets/react/component-story-highlight-addon.ts.mdx
@@ -0,0 +1,28 @@
+```ts
+// MyComponent.stories.ts|tsx
+
+import type { Meta, StoryObj } from '@storybook/react';
+import { useChannel } from '@storybook/preview-api';
+import { HIGHLIGHT } from '@storybook/addon-highlight';
+
+import { MyComponent } from './MyComponent';
+
+const meta: Meta<typeof MyComponent> = {
+  component: MyComponent,
+};
+
+export default meta;
+type Story = StoryObj<typeof MyComponent>;
+
+export const Highlighted: Story = {
+  decorators: [
+    (storyFn) => {
+      const emit = useChannel({});
+      emit(HIGHLIGHT, {
+        elements: ['h2', 'a', '.storybook-button'],
+      });
+      return storyFn();
+    },
+  ],
+};
+```
diff --git a/docs/snippets/react/highlight-addon-custom-style.js.mdx b/docs/snippets/react/highlight-addon-custom-style.js.mdx
new file mode 100644
index 000000000000..18e410be4e1d
--- /dev/null
+++ b/docs/snippets/react/highlight-addon-custom-style.js.mdx
@@ -0,0 +1,26 @@
+```js
+// MyComponent.stories.js|jsx
+
+import { useChannel } from '@storybook/preview-api';
+import { HIGHLIGHT } from '@storybook/addon-highlight';
+
+import { MyComponent } from './MyComponent';
+
+export default {
+  component: MyComponent,
+};
+
+export const StyledHighlight = {
+  decorators: [
+    (storyFn) => {
+      const emit = useChannel({});
+      emit(HIGHLIGHT, {
+        elements: ['h2', 'a', '.storybook-button'],
+        color: 'blue',
+        style: 'double', // 'dotted' | 'dashed' | 'solid' | 'double'
+      });
+      return storyFn();
+    },
+  ],
+};
+```
diff --git a/docs/snippets/react/highlight-addon-custom-style.ts-4-9.mdx b/docs/snippets/react/highlight-addon-custom-style.ts-4-9.mdx
new file mode 100644
index 000000000000..969e2ea13e6e
--- /dev/null
+++ b/docs/snippets/react/highlight-addon-custom-style.ts-4-9.mdx
@@ -0,0 +1,30 @@
+```ts
+// MyComponent.stories.ts|tsx
+
+import type { Meta, StoryObj } from '@storybook/react';
+import { useChannel } from '@storybook/preview-api';
+import { HIGHLIGHT } from '@storybook/addon-highlight';
+
+import { MyComponent } from './MyComponent';
+
+const meta = {
+  component: MyComponent,
+} satisfies Meta<typeof MyComponent>;
+
+export default meta;
+type Story = StoryObj<typeof meta>;
+
+export const StyledHighlight: Story = {
+  decorators: [
+    (storyFn) => {
+      const emit = useChannel({});
+      emit(HIGHLIGHT, {
+        elements: ['h2', 'a', '.storybook-button'],
+        color: 'blue',
+        style: 'double', // 'dotted' | 'dashed' | 'solid' | 'double'
+      });
+      return storyFn();
+    },
+  ],
+};
+```
diff --git a/docs/snippets/react/highlight-addon-custom-style.ts.mdx b/docs/snippets/react/highlight-addon-custom-style.ts.mdx
new file mode 100644
index 000000000000..ea4534dd16a5
--- /dev/null
+++ b/docs/snippets/react/highlight-addon-custom-style.ts.mdx
@@ -0,0 +1,30 @@
+```ts
+// MyComponent.stories.ts|tsx
+
+import type { Meta, StoryObj } from '@storybook/react';
+import { useChannel } from '@storybook/preview-api';
+import { HIGHLIGHT } from '@storybook/addon-highlight';
+
+import { MyComponent } from './MyComponent';
+
+const meta: Meta<typeof MyComponent> = {
+  component: MyComponent,
+};
+
+export default meta;
+type Story = StoryObj<typeof MyComponent>;
+
+export const StyledHighlight: Story = {
+  decorators: [
+    (storyFn) => {
+      const emit = useChannel({});
+      emit(HIGHLIGHT, {
+        elements: ['h2', 'a', '.storybook-button'],
+        color: 'blue',
+        style: 'double', // 'dotted' | 'dashed' | 'solid' | 'double'
+      });
+      return storyFn();
+    },
+  ],
+};
+```
diff --git a/docs/snippets/vue/addon-highlight-reset.js.mdx b/docs/snippets/vue/addon-highlight-reset.js.mdx
new file mode 100644
index 000000000000..18cbab4e2dc6
--- /dev/null
+++ b/docs/snippets/vue/addon-highlight-reset.js.mdx
@@ -0,0 +1,27 @@
+```js
+// MyComponent.stories.js
+
+import { useChannel } from '@storybook/preview-api';
+import { HIGHLIGHT, RESET_HIGHLIGHT } from '@storybook/addon-highlight';
+
+import MyComponent from './MyComponent.vue';
+
+export default {
+  component: MyComponent,
+};
+
+export const ResetHighlight = {
+  decorators: [
+    () => {
+      const emit = useChannel({});
+      emit(RESET_HIGHLIGHT); //👈 Remove previously highlighted elements
+      emit(HIGHLIGHT, {
+        elements: ['header', 'section', 'footer'],
+      });
+      return {
+        template: '<story />',
+      };
+    },
+  ],
+};
+```
diff --git a/docs/snippets/vue/addon-highlight-reset.ts-4-9.mdx b/docs/snippets/vue/addon-highlight-reset.ts-4-9.mdx
new file mode 100644
index 000000000000..0a80a0f6c9ab
--- /dev/null
+++ b/docs/snippets/vue/addon-highlight-reset.ts-4-9.mdx
@@ -0,0 +1,32 @@
+```ts
+// MyComponent.stories.ts
+
+// Replace vue3 with vue if you are using Storybook for Vue 2
+import type { Meta, StoryObj } from '@storybook/vue3';
+import { useChannel } from '@storybook/preview-api';
+import { HIGHLIGHT, RESET_HIGHLIGHT } from '@storybook/addon-highlight';
+
+import MyComponent from './MyComponent.vue';
+
+const meta = {
+  component: MyComponent,
+} satisfies Meta<typeof MyComponent>;
+
+export default meta;
+type Story = StoryObj<typeof meta>;
+
+export const ResetHighlight: Story = {
+  decorators: [
+    () => {
+      const emit = useChannel({});
+      emit(RESET_HIGHLIGHT); //👈 Remove previously highlighted elements
+      emit(HIGHLIGHT, {
+        elements: ['header', 'section', 'footer'],
+      });
+      return {
+        template: '<story />',
+      };
+    },
+  ],
+};
+```
diff --git a/docs/snippets/vue/addon-highlight-reset.ts.mdx b/docs/snippets/vue/addon-highlight-reset.ts.mdx
new file mode 100644
index 000000000000..c0b777d21590
--- /dev/null
+++ b/docs/snippets/vue/addon-highlight-reset.ts.mdx
@@ -0,0 +1,32 @@
+```ts
+// MyComponent.stories.ts
+
+// Replace vue3 with vue if you are using Storybook for Vue 2
+import type { Meta, StoryObj } from '@storybook/vue3';
+import { useChannel } from '@storybook/preview-api';
+import { HIGHLIGHT, RESET_HIGHLIGHT } from '@storybook/addon-highlight';
+
+import MyComponent from './MyComponent.vue';
+
+const meta: Meta<typeof MyComponent> = {
+  component: MyComponent,
+};
+
+export default meta;
+type Story = StoryObj<typeof MyComponent>;
+
+export const ResetHighlight: Story = {
+  decorators: [
+    () => {
+      const emit = useChannel({});
+      emit(RESET_HIGHLIGHT); //👈 Remove previously highlighted elements
+      emit(HIGHLIGHT, {
+        elements: ['header', 'section', 'footer'],
+      });
+      return {
+        template: '<story />',
+      };
+    },
+  ],
+};
+```
diff --git a/docs/snippets/vue/component-story-highlight-addon.js.mdx b/docs/snippets/vue/component-story-highlight-addon.js.mdx
index 693c23ee9c1c..3781ac9d3fc5 100644
--- a/docs/snippets/vue/component-story-highlight-addon.js.mdx
+++ b/docs/snippets/vue/component-story-highlight-addon.js.mdx
@@ -1,32 +1,26 @@
 ```js
-// Card.stories.js
+// MyComponent.stories.js
 
 import { useChannel } from '@storybook/preview-api';
-import { HIGHLIGHT, RESET_HIGHLIGHT } from '@storybook/addon-highlight';
-import { Card } from './Card.vue';
+import { HIGHLIGHT } from '@storybook/addon-highlight';
+
+import MyComponent from './MyComponent.vue';
 
 export default {
-  /* 👇 The title prop is optional.
-   * See https://storybook.js.org/docs/angular/configure/overview#configure-story-loading
-   * to learn how to generate automatic titles
-   */
-  title: 'Card',
-  component: Card,
+  component: MyComponent,
 };
 
-export const Default: Story = (args) => ({
-  template: '<Card />',
-});
-Default.decorators = [
-  (story) => {
-    const emit = useChannel({});
-    emit(HIGHLIGHT, {
-      elements: ['.title', '.subtitle'],
-    });
-    return {
-      components: { story },
-      template: '<story />',
-    };
-  },
-];
+export const Highlighted = {
+  decorators: [
+    () => {
+      const emit = useChannel({});
+      emit(HIGHLIGHT, {
+        elements: ['h2', 'a', '.storybook-button'],
+      });
+      return {
+        template: '<story />',
+      };
+    },
+  ],
+};
 ```
diff --git a/docs/snippets/vue/component-story-highlight-addon.ts-4-9.mdx b/docs/snippets/vue/component-story-highlight-addon.ts-4-9.mdx
new file mode 100644
index 000000000000..462c54498449
--- /dev/null
+++ b/docs/snippets/vue/component-story-highlight-addon.ts-4-9.mdx
@@ -0,0 +1,31 @@
+```ts
+// MyComponent.stories.ts
+
+// Replace vue3 with vue if you are using Storybook for Vue 2
+import type { Meta, StoryObj } from '@storybook/vue3';
+import { useChannel } from '@storybook/preview-api';
+import { HIGHLIGHT } from '@storybook/addon-highlight';
+
+import MyComponent from './MyComponent.vue';
+
+const meta = {
+  component: MyComponent,
+} satisfies Meta<typeof MyComponent>;
+
+export default meta;
+type Story = StoryObj<typeof meta>;
+
+export const Highlighted: Story = {
+  decorators: [
+    () => {
+      const emit = useChannel({});
+      emit(HIGHLIGHT, {
+        elements: ['h2', 'a', '.storybook-button'],
+      });
+      return {
+        template: '<story />',
+      };
+    },
+  ],
+};
+```
diff --git a/docs/snippets/vue/component-story-highlight-addon.ts.mdx b/docs/snippets/vue/component-story-highlight-addon.ts.mdx
new file mode 100644
index 000000000000..94ad9f9c0a0f
--- /dev/null
+++ b/docs/snippets/vue/component-story-highlight-addon.ts.mdx
@@ -0,0 +1,31 @@
+```ts
+// MyComponent.stories.ts
+
+// Replace vue3 with vue if you are using Storybook for Vue 2
+import type { Meta, StoryObj } from '@storybook/vue3';
+import { useChannel } from '@storybook/preview-api';
+import { HIGHLIGHT } from '@storybook/addon-highlight';
+
+import MyComponent from './MyComponent.vue';
+
+const meta: Meta<typeof MyComponent> = {
+  component: MyComponent,
+};
+
+export default meta;
+type Story = StoryObj<typeof MyComponent>;
+
+export const Highlighted: Story = {
+  decorators: [
+    () => {
+      const emit = useChannel({});
+      emit(HIGHLIGHT, {
+        elements: ['h2', 'a', '.storybook-button'],
+      });
+      return {
+        template: '<story />',
+      };
+    },
+  ],
+};
+```
diff --git a/docs/snippets/vue/highlight-addon-custom-style.js.mdx b/docs/snippets/vue/highlight-addon-custom-style.js.mdx
new file mode 100644
index 000000000000..443a8476a384
--- /dev/null
+++ b/docs/snippets/vue/highlight-addon-custom-style.js.mdx
@@ -0,0 +1,28 @@
+```js
+// MyComponent.stories.js
+
+import { useChannel } from '@storybook/preview-api';
+import { HIGHLIGHT } from '@storybook/addon-highlight';
+
+import MyComponent from './MyComponent.vue';
+
+export default {
+  component: MyComponent,
+};
+
+export const StyledHighlight = {
+  decorators: [
+    () => {
+      const emit = useChannel({});
+      emit(HIGHLIGHT, {
+        elements: ['h2', 'a', '.storybook-button'],
+        color: 'blue',
+        style: 'double', // 'dotted' | 'dashed' | 'solid' | 'double'
+      });
+      return {
+        template: '<story />',
+      };
+    },
+  ],
+};
+```
diff --git a/docs/snippets/vue/highlight-addon-custom-style.ts-4-9.mdx b/docs/snippets/vue/highlight-addon-custom-style.ts-4-9.mdx
new file mode 100644
index 000000000000..eec2829fc50c
--- /dev/null
+++ b/docs/snippets/vue/highlight-addon-custom-style.ts-4-9.mdx
@@ -0,0 +1,33 @@
+```ts
+// MyComponent.stories.ts
+
+// Replace vue3 with vue if you are using Storybook for Vue 2
+import type { Meta, StoryObj } from '@storybook/vue3';
+import { useChannel } from '@storybook/preview-api';
+import { HIGHLIGHT } from '@storybook/addon-highlight';
+
+import MyComponent from './MyComponent.vue';
+
+const meta = {
+  component: MyComponent,
+} satisfies Meta<typeof MyComponent>;
+
+export default meta;
+type Story = StoryObj<typeof meta>;
+
+export const StyledHighlight: Story = {
+  decorators: [
+    () => {
+      const emit = useChannel({});
+      emit(HIGHLIGHT, {
+        elements: ['h2', 'a', '.storybook-button'],
+        color: 'blue',
+        style: 'double', // 'dotted' | 'dashed' | 'solid' | 'double'
+      });
+      return {
+        template: '<story />',
+      };
+    },
+  ],
+};
+```
diff --git a/docs/snippets/vue/highlight-addon-custom-style.ts.mdx b/docs/snippets/vue/highlight-addon-custom-style.ts.mdx
new file mode 100644
index 000000000000..34dd55cebca5
--- /dev/null
+++ b/docs/snippets/vue/highlight-addon-custom-style.ts.mdx
@@ -0,0 +1,33 @@
+```ts
+// MyComponent.stories.ts
+
+// Replace vue3 with vue if you are using Storybook for Vue 2
+import type { Meta, StoryObj } from '@storybook/vue3';
+import { useChannel } from '@storybook/preview-api';
+import { HIGHLIGHT } from '@storybook/addon-highlight';
+
+import MyComponent from './MyComponent.vue';
+
+const meta: Meta<typeof MyComponent> = {
+  component: MyComponent,
+};
+
+export default meta;
+type Story = StoryObj<typeof MyComponent>;
+
+export const StyledHighlight: Story = {
+  decorators: [
+    () => {
+      const emit = useChannel({});
+      emit(HIGHLIGHT, {
+        elements: ['h2', 'a', '.storybook-button'],
+        color: 'blue',
+        style: 'double', // 'dotted' | 'dashed' | 'solid' | 'double'
+      });
+      return {
+        template: '<story />',
+      };
+    },
+  ],
+};
+```
diff --git a/docs/snippets/web-components/addon-highlight-reset.js.mdx b/docs/snippets/web-components/addon-highlight-reset.js.mdx
new file mode 100644
index 000000000000..120eb341e106
--- /dev/null
+++ b/docs/snippets/web-components/addon-highlight-reset.js.mdx
@@ -0,0 +1,23 @@
+```js
+// MyComponent.stories.js
+
+import { useChannel } from '@storybook/preview-api';
+import { HIGHLIGHT, RESET_HIGHLIGHT } from '@storybook/addon-highlight';
+
+export default {
+  component: 'my-component',
+};
+
+export const ResetHighlight = {
+  decorators: [
+    (story) => {
+      const emit = useChannel({});
+      emit(RESET_HIGHLIGHT); //👈 Remove previously highlighted elements
+      emit(HIGHLIGHT, {
+        elements: ['header', 'section', 'footer'],
+      });
+      return story();
+    },
+  ],
+};
+```
diff --git a/docs/snippets/web-components/addon-highlight-reset.ts.mdx b/docs/snippets/web-components/addon-highlight-reset.ts.mdx
new file mode 100644
index 000000000000..a226b045580f
--- /dev/null
+++ b/docs/snippets/web-components/addon-highlight-reset.ts.mdx
@@ -0,0 +1,24 @@
+```ts
+// MyComponent.stories.ts
+
+import type { Meta, StoryObj } from '@storybook/web-components';
+import { useChannel } from '@storybook/preview-api';
+import { HIGHLIGHT, RESET_HIGHLIGHT } from '@storybook/addon-highlight';
+
+export default {
+  component: 'my-component',
+};
+
+export const ResetHighlight: Story = {
+  decorators: [
+    (story) => {
+      const emit = useChannel({});
+      emit(RESET_HIGHLIGHT); //👈 Remove previously highlighted elements
+      emit(HIGHLIGHT, {
+        elements: ['header', 'section', 'footer'],
+      });
+      return story();
+    },
+  ],
+};
+```
diff --git a/docs/snippets/web-components/component-story-highlight-addon.js.mdx b/docs/snippets/web-components/component-story-highlight-addon.js.mdx
index 936b9fdf9b41..cfa00a6804a7 100644
--- a/docs/snippets/web-components/component-story-highlight-addon.js.mdx
+++ b/docs/snippets/web-components/component-story-highlight-addon.js.mdx
@@ -1,25 +1,22 @@
 ```js
-// card-component.stories.js
+// MyComponent.stories.js
 
-import { html } from 'lit';
 import { useChannel } from '@storybook/preview-api';
-import { HIGHLIGHT, RESET_HIGHLIGHT } from '@storybook/addon-highlight';
-import './card-component';
+import { HIGHLIGHT } from '@storybook/addon-highlight';
 
 export default {
-  title: 'Card',
+  component: 'my-component',
 };
 
-export const Default: Story = (args) => ({
-  template: html`<sb-card></sb-card>`,
-});
-Default.decorators = [
-  (story) => {
-    const emit = useChannel({});
-    emit(HIGHLIGHT, {
-      elements: ['.title', '.subtitle'],
-    });
-    return story();
-  },
-];
+export const Highlighted = {
+  decorators: [
+    (story) => {
+      const emit = useChannel({});
+      emit(HIGHLIGHT, {
+        elements: ['h2', 'a', '.storybook-button'],
+      });
+      return story();
+    },
+  ],
+};
 ```
diff --git a/docs/snippets/web-components/component-story-highlight-addon.ts.mdx b/docs/snippets/web-components/component-story-highlight-addon.ts.mdx
new file mode 100644
index 000000000000..ce3194d54795
--- /dev/null
+++ b/docs/snippets/web-components/component-story-highlight-addon.ts.mdx
@@ -0,0 +1,23 @@
+```ts
+// MyComponent.stories.ts
+
+import type { Meta, StoryObj } from '@storybook/web-components';
+import { useChannel } from '@storybook/preview-api';
+import { HIGHLIGHT } from '@storybook/addon-highlight';
+
+export default {
+  component: 'my-component',
+};
+
+export const Highlighted: Story = {
+  decorators: [
+    (story) => {
+      const emit = useChannel({});
+      emit(HIGHLIGHT, {
+        elements: ['h2', 'a', '.storybook-button'],
+      });
+      return story();
+    },
+  ],
+};
+```
diff --git a/docs/snippets/web-components/highlight-addon-custom-style.js.mdx b/docs/snippets/web-components/highlight-addon-custom-style.js.mdx
new file mode 100644
index 000000000000..0f2ffb53cb41
--- /dev/null
+++ b/docs/snippets/web-components/highlight-addon-custom-style.js.mdx
@@ -0,0 +1,24 @@
+```js
+// MyComponent.stories.js
+
+import { useChannel } from '@storybook/preview-api';
+import { HIGHLIGHT } from '@storybook/addon-highlight';
+
+export default {
+  component: 'my-component',
+};
+
+export const StyledHighlight = {
+  decorators: [
+    (story) => {
+      const emit = useChannel({});
+      emit(HIGHLIGHT, {
+        elements: ['h2', 'a', '.storybook-button'],
+        color: 'blue',
+        style: 'double', // 'dotted' | 'dashed' | 'solid' | 'double'
+      });
+      return story();
+    },
+  ],
+};
+```
diff --git a/docs/snippets/web-components/highlight-addon-custom-style.ts.mdx b/docs/snippets/web-components/highlight-addon-custom-style.ts.mdx
new file mode 100644
index 000000000000..97967c3a6d1f
--- /dev/null
+++ b/docs/snippets/web-components/highlight-addon-custom-style.ts.mdx
@@ -0,0 +1,25 @@
+```ts
+// MyComponent.stories.ts
+
+import type { Meta, StoryObj } from '@storybook/web-components';
+import { useChannel } from '@storybook/preview-api';
+import { HIGHLIGHT } from '@storybook/addon-highlight';
+
+export default {
+  component: 'my-component',
+};
+
+export const StyledHighlight: Story = {
+  decorators: [
+    (story) => {
+      const emit = useChannel({});
+      emit(HIGHLIGHT, {
+        elements: ['h2', 'a', '.storybook-button'],
+        color: 'blue',
+        style: 'double', // 'dotted' | 'dashed' | 'solid' | 'double'
+      });
+      return story();
+    },
+  ],
+};
+```