Repository: storybookjs/storybook
Pull request #31145: Docs: Adjust the Viewports, Backgrounds and Toolbars for Storybook 9
Author: login: jonniebigodes
Labels: name: documentation
name: ci:docs
description: Run the CI jobs for documentation checks only.
Created: 2025-04-16T14:48:14Z | Merged: 2025-04-20T02:09:30Z

Closes #30593 and #30594

Starts addressing #30603 and #30592 

<!-- If your PR is related to an issue, provide the number(s) above; if it resolves multiple issues, be sure to break them up (e.g. "closes #1000, closes #1001"). -->

<!--

Thank you for contributing to Storybook! Please submit all PRs to the `next` branch unless they are specific to the current release. Storybook maintainers cherry-pick bug and documentation fixes into the `main` branch as part of the release process, so you shouldn't need to worry about this. For additional guidance: https://storybook.js.org/docs/contribute

-->

## What I did

- Adjusted the documentation for both modules to reflect the changes introduced in the upcoming release
- Removed the feature flags from the documentation
- Adjusted the FAQ to remove some of the outdated packages
- Adjusted the relevant snippets to:
  - Only display the `options` option
  - Display only TypeScript 4.9+ variants
  -  Introduce a Svelte CSF variant

## Checklist for Contributors

### Testing

<!-- Please check (put an "x" inside the "[ ]") the applicable items below to communicate how to test your changes -->

#### The changes in this PR are covered in the following automated tests:

- [ ] stories
- [ ] unit tests
- [ ] integration tests
- [ ] end-to-end tests

#### Manual testing

_This section is mandatory for all contributions. If you believe no manual test is necessary, please state so explicitly. Thanks!_

<!-- Please include the steps to test your changes here. For example:

1. Run a sandbox for template, e.g. `yarn task --task sandbox --start-from auto --template react-vite/default-ts`
2. Open Storybook in your browser
3. Access X story

-->

### Documentation

<!-- Please check (put an "x" inside the "[ ]") the applicable items below to indicate which documentation has been updated. -->

- [ ] Add or update documentation reflecting your changes
- [ ] If you are deprecating/removing a feature, make sure to update
      [MIGRATION.MD](https://github.com/storybookjs/storybook/blob/next/MIGRATION.md)

## Checklist for Maintainers

- [ ] When this PR is ready for testing, make sure to add `ci:normal`, `ci:merged` or `ci:daily` GH label to it to run a specific set of sandboxes. The particular set of sandboxes can be found in `code/lib/cli-storybook/src/sandbox-templates.ts`
- [ ] Make sure this PR contains **one** of the labels below:
   <details>
     <summary>Available labels</summary>

  - `bug`: Internal changes that fixes incorrect behavior.
  - `maintenance`: User-facing maintenance tasks.
  - `dependencies`: Upgrading (sometimes downgrading) dependencies.
  - `build`: Internal-facing build tooling & test updates. Will not show up in release changelog.
  - `cleanup`: Minor cleanup style change. Will not show up in release changelog.
  - `documentation`: Documentation **only** changes. Will not show up in release changelog.
  - `feature request`: Introducing a new feature.
  - `BREAKING CHANGE`: Changes that break compatibility in some way with current major version.
  - `other`: Changes that don't fit in the above categories.

   </details>

### 🦋 Canary release

<!-- CANARY_RELEASE_SECTION -->

This PR does not have a canary release associated. You can request a canary release of this pull request by mentioning the `@storybookjs/core` team here.

_core team members can create a canary release [here](https://github.com/storybookjs/storybook/actions/workflows/canary-release-pr.yml) or locally with `gh workflow run --repo storybookjs/storybook canary-release-pr.yml --field pr=<PR_NUMBER>`_

<!-- CANARY_RELEASE_SECTION -->

<!-- BENCHMARK_SECTION -->
<!-- BENCHMARK_SECTION -->


<!-- greptile_comment -->

## Greptile Summary

This PR updates documentation for Storybook 9, removing deprecated feature flags and modernizing examples for backgrounds, viewports, and toolbars with new APIs and TypeScript 4.9+ syntax.

- Removed `backgroundsStoryGlobals` and `viewportStoryGlobals` feature flags from `docs/api/main-config/main-config-features.mdx`
- Updated import paths to use framework-specific packages (e.g., `@storybook/react-vite` instead of `@storybook/react`)
- Added Svelte CSF examples using `defineMeta` across viewport and background configurations
- Standardized on `options` property instead of `values`/`viewports` in configuration examples
- Updated icon package reference from `@storybook/components` to `@storybook/icons` in toolbar documentation



<!-- /greptile_comment -->

Linked issue #30593: [Documentation]: Backgrounds API documentation changes
### Describe the problem

With the 8.x release, the backgrounds addon introduced a new API for setting backgrounds, enabled via the `backgroundsStoryGlobals` option. This option allows users to configure backgrounds via the `options` object. With Storybook 9, the option will be removed in favor of the new API.

What needs to happen:
- Update the documentation to reflect the new API for setting backgrounds
- Remove any examples or references to the old API
- Remove the `backgroundsStoryGlobals` option from the documentation (including the API reference)
- Adjust the Migration guide to reflect the changes in the Backgrounds API

Diff:
diff --git a/docs/_snippets/addon-backgrounds-define-globals.md b/docs/_snippets/addon-backgrounds-define-globals.md
index 5097231a356e..13cd67ba62c9 100644
--- a/docs/_snippets/addon-backgrounds-define-globals.md
+++ b/docs/_snippets/addon-backgrounds-define-globals.md
@@ -22,6 +22,54 @@ export const OnDark: Story = {
 };
 ```
 
+```svelte filename="Button.stories.svelte" renderer="svelte" language="js"
+<script module>
+  import { defineMeta } from '@storybook/addon-svelte-csf';
+
+  import Button from './Button.svelte';
+
+  const { Story } = defineMeta({
+    component: Button,
+    globals: {
+      // 👇 Set background value for all component stories
+      backgrounds: { value: 'gray', grid: false },
+    },
+  });
+</script>
+
+<!-- 👇 Override background value for this story -->
+<Story
+  name="OnDark"
+  globals={{
+    backgrounds: { value: "dark" },
+  }}
+/>
+```
+
+```svelte filename="Button.stories.svelte" renderer="svelte" language="ts"
+<script module>
+  import { defineMeta } from '@storybook/addon-svelte-csf';
+
+  import Button from './Button.svelte';
+
+  const { Story } = defineMeta({
+    component: Button,
+    globals: {
+      // 👇 Set background value for all component stories
+      backgrounds: { value: 'gray', grid: false },
+    },
+  });
+</script>
+
+<!-- 👇 Override background value for this story-->
+<Story
+  name="OnDark"
+  globals={{
+    backgrounds: { value: "dark" },
+  }}
+/>
+```
+
 ```js filename="Button.stories.js|jsx" renderer="common" language="js"
 import { Button } from './Button';
 
@@ -41,8 +89,8 @@ export const OnDark = {
 };
 ```
 
-```ts filename="Button.stories.ts|tsx" renderer="common" language="ts-4-9"
-// Replace your-framework with the name of your framework
+```ts filename="Button.stories.ts|tsx" renderer="common" language="ts"
+// Replace your-framework with the name of your framework (e.g., react-vite, vue3-vite, angular, etc.)
 import type { Meta, StoryObj } from '@storybook/your-framework';
 
 import { Button } from './Button';
@@ -66,31 +114,6 @@ export const OnDark: Story = {
 };
 ```
 
-```ts filename="Button.stories.ts|tsx" renderer="common" language="ts"
-// Replace your-framework with the name of your framework
-import type { Meta, StoryObj } from '@storybook/your-framework';
-
-import { Button } from './Button';
-
-const meta: Meta<typeof Button> = {
-  component: Button,
-  globals: {
-    // 👇 Set background value for all component stories
-    backgrounds: { value: 'gray', grid: false },
-  },
-};
-
-export default meta;
-type Story = StoryObj<typeof Button>;
-
-export const OnDark: Story = {
-  globals: {
-    // 👇 Override background value for this story
-    backgrounds: { value: 'dark' },
-  },
-};
-```
-
 ```js filename="Button.stories.js" renderer="web-components" language="js"
 export default {
   component: 'demo-button',
@@ -109,7 +132,7 @@ export const OnDark = {
 ```
 
 ```ts filename="Button.stories.ts" renderer="web-components" language="ts"
-import type { Meta, StoryObj } from '@storybook/web-components';
+import type { Meta, StoryObj } from '@storybook/web-components-vite';
 
 const meta: Meta = {
   component: 'demo-button',
diff --git a/docs/_snippets/addon-backgrounds-disabled.md b/docs/_snippets/addon-backgrounds-disabled.md
index 366edee9c399..e763893a4e1c 100644
--- a/docs/_snippets/addon-backgrounds-disabled.md
+++ b/docs/_snippets/addon-backgrounds-disabled.md
@@ -1,54 +1,58 @@
-```js filename="Button.stories.js|jsx" renderer="common" language="js" tabTitle="Without globals API"
-import { Button } from './Button';
+```svelte filename="Button.stories.svelte" renderer="svelte" language="js"
+<script module>
+  import { defineMeta } from '@storybook/addon-svelte-csf';
 
-export default {
-  component: Button,
-};
+  import Button from './Button.svelte';
 
-export const Large = {
-  parameters: {
+  const { Story } = defineMeta({
+    component: Button,
+  });
+</script>
+
+<Story
+  name="Large"
+  parameters={{
     backgrounds: { disable: true },
-  },
-};
+  }}
+/>
 ```
 
-```js filename="Button.stories.js|jsx" renderer="common" language="js" tabTitle="With globals API"
-import { Button } from './Button';
+```svelte filename="Button.stories.svelte" renderer="svelte" language="ts"
+<script module>
+  import { defineMeta } from '@storybook/addon-svelte-csf';
 
-export default {
-  component: Button,
-};
+  import Button from './Button.svelte';
 
-export const Large = {
-  parameters: {
-    backgrounds: { disabled: true },
-  },
-};
-```
+  const { Story } = defineMeta({
+    component: Button,
+  });
+</script>
 
-```ts filename="Button.stories.ts|tsx" renderer="common" language="ts-4-9" tabTitle="Without globals API"
-// Replace your-renderer with the renderer you are using (e.g., react, vue3, angular, etc.)
-import { Meta, StoryObj } from '@storybook/your-renderer';
+<Story
+  name="Large"
+  parameters={{
+    backgrounds: { disable: true },
+  }}
+/>
+```
 
+```js filename="Button.stories.js|jsx" renderer="common" language="js"
 import { Button } from './Button';
 
-const meta = {
+export default {
   component: Button,
-} satisfies Meta<typeof Button>;
-
-export default meta;
-type Story = StoryObj<typeof meta>;
+};
 
-export const Large: Story = {
+export const Large = {
   parameters: {
     backgrounds: { disable: true },
   },
 };
 ```
 
-```ts filename="Button.stories.ts|tsx" renderer="common" language="ts-4-9" tabTitle="With globals API"
-// Replace your-renderer with the renderer you are using (e.g., react, vue3, angular, etc.)
-import { Meta, StoryObj } from '@storybook/your-renderer';
+```ts filename="Button.stories.ts|tsx" renderer="common" language="ts"
+// Replace your-framework with the framework you are using (e.g., react-vite, vue3-vite, angular, etc.)
+import { Meta, StoryObj } from '@storybook/your-framework';
 
 import { Button } from './Button';
 
@@ -59,49 +63,9 @@ const meta = {
 export default meta;
 type Story = StoryObj<typeof meta>;
 
-export const Large: Story = {
-  parameters: {
-    backgrounds: { disabled: true },
-  },
-};
-```
-
-```ts filename="Button.stories.ts|tsx" renderer="common" language="ts" tabTitle="Without globals API"
-// Replace your-renderer with the renderer you are using (e.g., react, vue3, angular, etc.)
-import { Meta, StoryObj } from '@storybook/your-renderer';
-
-import { Button } from './Button';
-
-const meta: Meta<typeof Button> = {
-  component: Button,
-};
-
-export default meta;
-type Story = StoryObj<typeof Button>;
-
 export const Large: Story = {
   parameters: {
     backgrounds: { disable: true },
   },
 };
 ```
-
-```ts filename="Button.stories.ts|tsx" renderer="common" language="ts" tabTitle="With globals API"
-// Replace your-renderer with the renderer you are using (e.g., react, vue3, angular, etc.)
-import { Meta, StoryObj } from '@storybook/your-renderer';
-
-import { Button } from './Button';
-
-const meta: Meta<typeof Button> = {
-  component: Button,
-};
-
-export default meta;
-type Story = StoryObj<typeof Button>;
-
-export const Large: Story = {
-  parameters: {
-    backgrounds: { disabled: true },
-  },
-};
-```
diff --git a/docs/_snippets/addon-backgrounds-grid.md b/docs/_snippets/addon-backgrounds-grid.md
index 266d4e39d520..502d63ba53f0 100644
--- a/docs/_snippets/addon-backgrounds-grid.md
+++ b/docs/_snippets/addon-backgrounds-grid.md
@@ -22,34 +22,59 @@ const meta: Meta<Button> = {
 export default meta;
 ```
 
-```js filename="Button.stories.js|jsx" renderer="common" language="js"
-import { Button } from './Button';
-
-// To apply a grid to all stories of Button:
-export default {
-  component: Button,
-  parameters: {
-    backgrounds: {
-      grid: {
-        cellSize: 20,
-        opacity: 0.5,
-        cellAmount: 5,
-        offsetX: 16, // Default is 0 if story has 'fullscreen' layout, 16 if layout is 'padded'
-        offsetY: 16, // Default is 0 if story has 'fullscreen' layout, 16 if layout is 'padded'
+```svelte filename="Button.stories.svelte" renderer="svelte" language="js"
+<script module>
+  import { defineMeta } from '@storybook/addon-svelte-csf';
+
+  import Button from './Button.svelte';
+
+  // To apply a set of backgrounds to all stories of Button:
+  const { Story } = defineMeta({
+    component: Button,
+    parameters: {
+      backgrounds: {
+        grid: {
+          cellSize: 20,
+          opacity: 0.5,
+          cellAmount: 5,
+          offsetX: 16, // Default is 0 if story has 'fullscreen' layout, 16 if layout is 'padded'
+          offsetY: 16, // Default is 0 if story has 'fullscreen' layout, 16 if layout is 'padded'
+        },
       },
     },
-  },
-};
+  });
+</script>
 ```
 
-```ts filename="Button.stories.ts|tsx" renderer="common" language="ts-4-9"
-// Replace your-framework with the name of your framework
-import type { Meta } from '@storybook/your-framework';
+```svelte filename="Button.stories.svelte" renderer="svelte" language="ts"
+<script module>
+  import { defineMeta } from '@storybook/addon-svelte-csf';
+
+  import Button from './Button.svelte';
+
+  // To apply a set of backgrounds to all stories of Button:
+  const { Story } = defineMeta({
+    component: Button,
+    parameters: {
+      backgrounds: {
+        grid: {
+          cellSize: 20,
+          opacity: 0.5,
+          cellAmount: 5,
+          offsetX: 16, // Default is 0 if story has 'fullscreen' layout, 16 if layout is 'padded'
+          offsetY: 16, // Default is 0 if story has 'fullscreen' layout, 16 if layout is 'padded'
+        },
+      },
+    },
+  });
+</script>
+```
 
+```js filename="Button.stories.js|jsx" renderer="common" language="js"
 import { Button } from './Button';
 
-// To apply a set of backgrounds to all stories of Button:
-const meta = {
+// To apply a grid to all stories of Button:
+export default {
   component: Button,
   parameters: {
     backgrounds: {
@@ -62,19 +87,17 @@ const meta = {
       },
     },
   },
-} satisfies Meta<typeof Button>;
-
-export default meta;
+};
 ```
 
 ```ts filename="Button.stories.ts|tsx" renderer="common" language="ts"
-// Replace your-framework with the name of your framework
+// Replace your-framework with the framework you are using (e.g., react-vite, vue3-vite, angular, etc.)
 import type { Meta } from '@storybook/your-framework';
 
 import { Button } from './Button';
 
 // To apply a set of backgrounds to all stories of Button:
-const meta: Meta<typeof Button> = {
+const meta = {
   component: Button,
   parameters: {
     backgrounds: {
@@ -87,7 +110,7 @@ const meta: Meta<typeof Button> = {
       },
     },
   },
-};
+} satisfies Meta<typeof Button>;
 
 export default meta;
 ```
@@ -111,7 +134,7 @@ export default {
 ```
 
 ```ts filename="Button.stories.ts" renderer="web-components" language="ts"
-import type { Meta } from '@storybook/web-components';
+import type { Meta } from '@storybook/web-components-vite';
 
 // To apply a set of backgrounds to all stories of Button:
 const meta: Meta = {
diff --git a/docs/_snippets/addon-backgrounds-options-in-meta.md b/docs/_snippets/addon-backgrounds-options-in-meta.md
index 2ebb1a8e6aab..d957e50c7548 100644
--- a/docs/_snippets/addon-backgrounds-options-in-meta.md
+++ b/docs/_snippets/addon-backgrounds-options-in-meta.md
@@ -37,7 +37,7 @@ export default {
 ```
 
 ```ts filename="Button.stories.ts" renderer="web-components" language="ts"
-import type { Meta } from '@storybook/web-components';
+import type { Meta } from '@storybook/web-components-vite';
 
 const meta: Meta = {
   component: 'demo-button',
@@ -74,30 +74,8 @@ export default {
 };
 ```
 
-```ts filename="Button.stories.tsx" renderer="react" language="ts"
-import type { Meta } from '@storybook/react';
-
-import { Button } from './Button';
-
-const meta: Meta<typeof Button> = {
-  component: Button,
-  parameters: {
-    backgrounds: {
-      options: {
-        // 👇 Override the default `dark` option
-        dark: { name: 'Dark', value: '#000' },
-        // 👇 Add a new option
-        gray: { name: 'Gray', value: '#CCC' },
-      },
-    },
-  },
-};
-
-export default meta;
-```
-
-```ts filename="Button.stories.ts|tsx" renderer="react" language="ts-4-9"
-import type { Meta } from '@storybook/react';
+```ts filename="Button.stories.ts|tsx" renderer="react" language="ts"
+import type { Meta } from '@storybook/react-vite';
 
 import { Button } from './Button';
 
@@ -137,29 +115,7 @@ export default {
 ```
 
 ```ts filename="Button.stories.ts" renderer="vue" language="ts"
-import type { Meta } from '@storybook/vue3';
-
-import Button from './Button.vue';
-
-const meta: Meta<typeof Button> = {
-  component: Button,
-  parameters: {
-    backgrounds: {
-      options: {
-        // 👇 Override the default `dark` option
-        dark: { name: 'Dark', value: '#000' },
-        // 👇 Add a new option
-        gray: { name: 'Gray', value: '#CCC' },
-      },
-    },
-  },
-};
-
-export default meta;
-```
-
-```ts filename="Button.stories.ts" renderer="vue" language="ts-4-9"
-import type { Meta } from '@storybook/vue3';
+import type { Meta } from '@storybook/vue3-vite';
 
 import Button from './Button.vue';
 
@@ -180,64 +136,46 @@ const meta = {
 export default meta;
 ```
 
-```js filename="Button.stories.js" renderer="svelte" language="js"
-import Button from './Button.svelte';
-
-export default {
-  component: Button,
-  parameters: {
-    backgrounds: {
-      options: {
-        // 👇 Override the default `dark` option
-        dark: { name: 'Dark', value: '#000' },
-        // 👇 Add a new option
-        gray: { name: 'Gray', value: '#CCC' },
+```svelte filename="Button.stories.svelte" renderer="svelte" language="js"
+<script module>
+  import { defineMeta } from '@storybook/addon-svelte-csf';
+
+  import Button from './Button.svelte';
+
+  const { Story } = defineMeta({
+    component: Button,
+    parameters: {
+      backgrounds: {
+        options: {
+          // 👇 Override the default `dark` option
+          dark: { name: 'Dark', value: '#000' },
+          // 👇 Add a new option
+          gray: { name: 'Gray', value: '#CCC' },
+        },
       },
     },
-  },
-};
+  });
+</script>
 ```
 
-```ts filename="Button.stories.ts" renderer="svelte" language="ts"
-import type { Meta } from '@storybook/svelte';
-
-import Button from './Button.svelte';
-
-const meta: Meta<typeof Button> = {
-  component: Button,
-  parameters: {
-    backgrounds: {
-      options: {
-        // 👇 Override the default `dark` option
-        dark: { name: 'Dark', value: '#000' },
-        // 👇 Add a new option
-        gray: { name: 'Gray', value: '#CCC' },
+```svelte filename="Button.stories.svelte" renderer="svelte" language="ts"
+<script module>
+  import { defineMeta } from '@storybook/addon-svelte-csf';
+
+  import Button from './Button.svelte';
+
+  const { Story } = defineMeta({
+    component: Button,
+    parameters: {
+      backgrounds: {
+        options: {
+          // 👇 Override the default `dark` option
+          dark: { name: 'Dark', value: '#000' },
+          // 👇 Add a new option
+          gray: { name: 'Gray', value: '#CCC' },
+        },
       },
     },
-  },
-};
-
-export default meta;
-```
-
-```ts filename="Button.stories.ts" renderer="svelte" language="ts-4-9"
-import type { Meta } from '@storybook/svelte';
-
-import Button from './Button.svelte';
-
-const meta = {
-  component: Button,
-  parameters: {
-    backgrounds: {
-      options: {
-        // 👇 Override the default `dark` option
-        dark: { name: 'Dark', value: '#000' },
-        // 👇 Add a new option
-        gray: { name: 'Gray', value: '#CCC' },
-      },
-    },
-  },
-} satisfies Meta<typeof Button>;
-
-export default meta;
+  });
+</script>
 ```
diff --git a/docs/_snippets/addon-backgrounds-options-in-preview.md b/docs/_snippets/addon-backgrounds-options-in-preview.md
index 0a82d664430d..1f3c6c66e373 100644
--- a/docs/_snippets/addon-backgrounds-options-in-preview.md
+++ b/docs/_snippets/addon-backgrounds-options-in-preview.md
@@ -19,8 +19,8 @@ export default {
 ```
 
 ```ts filename=".storybook/preview.ts" renderer="common" language="ts"
-// Replace your-renderer with the renderer you are using (e.g., react, vue3, angular, etc.)
-import { Preview } from '@storybook/your-renderer';
+// Replace your-framework with the framework you are using (e.g., react-vite, vue3-vite, angular, etc.)
+import { Preview } from '@storybook/your-framework';
 
 const preview: Preview = {
   parameters: {
diff --git a/docs/_snippets/addon-backgrounds-values-in-preview.md b/docs/_snippets/addon-backgrounds-values-in-preview.md
deleted file mode 100644
index 0044b069fec3..000000000000
--- a/docs/_snippets/addon-backgrounds-values-in-preview.md
+++ /dev/null
@@ -1,40 +0,0 @@
-```js filename=".storybook/preview.js" renderer="common" language="js"
-export default {
-  parameters: {
-    backgrounds: {
-      values: [
-        // 👇 Default values
-        { name: 'Dark', value: '#333' },
-        { name: 'Light', value: '#F7F9F2' },
-        // 👇 Add your own
-        { name: 'Maroon', value: '#400' },
-      ],
-      // 👇 Specify which background is shown by default
-      default: 'Light',
-    },
-  },
-};
-```
-
-```ts filename=".storybook/preview.ts" renderer="common" language="ts"
-// Replace your-renderer with the renderer you are using (e.g., react, vue3, angular, etc.)
-import { Preview } from '@storybook/your-renderer';
-
-const preview: Preview = {
-  parameters: {
-    backgrounds: {
-      values: [
-        // 👇 Default values
-        { name: 'Dark', value: '#333' },
-        { name: 'Light', value: '#F7F9F2' },
-        // 👇 Add your own
-        { name: 'Maroon', value: '#400' },
-      ],
-      // 👇 Specify which background is shown by default
-      default: 'Light',
-    },
-  },
-};
-
-export default preview;
-```
diff --git a/docs/_snippets/addon-viewport-add-viewport-in-preview.md b/docs/_snippets/addon-viewport-add-viewport-in-preview.md
index 990f952e2ef2..e5c0101b758f 100644
--- a/docs/_snippets/addon-viewport-add-viewport-in-preview.md
+++ b/docs/_snippets/addon-viewport-add-viewport-in-preview.md
@@ -1,73 +1,5 @@
-```js filename=".storybook/preview.js" renderer="common" language="js" tabTitle="Without globals API"
-import { MINIMAL_VIEWPORTS } from '@storybook/addon-viewport';
-
-const kindleViewports = {
-  kindleFire2: {
-    name: 'Kindle Fire 2',
-    styles: {
-      width: '600px',
-      height: '963px',
-    },
-  },
-  kindleFireHD: {
-    name: 'Kindle Fire HD',
-    styles: {
-      width: '533px',
-      height: '801px',
-    },
-  },
-};
-
-export default {
-  parameters: {
-    viewport: {
-      viewports: {
-        ...MINIMAL_VIEWPORTS,
-        ...kindleViewports,
-      },
-    },
-  },
-};
-```
-
-```ts filename=".storybook/preview.ts" renderer="common" language="ts" tabTitle="Without globals API"
-// Replace your-renderer with the renderer you are using (e.g., react, vue3, angular, etc.)
-import { Preview } from '@storybook/your-renderer';
-import { MINIMAL_VIEWPORTS } from '@storybook/addon-viewport';
-
-const kindleViewports = {
-  kindleFire2: {
-    name: 'Kindle Fire 2',
-    styles: {
-      width: '600px',
-      height: '963px',
-    },
-  },
-  kindleFireHD: {
-    name: 'Kindle Fire HD',
-    styles: {
-      width: '533px',
-      height: '801px',
-    },
-  },
-};
-
-const preview: Preview = {
-  parameters: {
-    viewport: {
-      viewports: {
-        ...MINIMAL_VIEWPORTS,
-        ...kindleViewports,
-      },
-    },
-  },
-};
-
-export default preview;
-```
-
-```js filename=".storybook/preview.js" renderer="common" language="js" tabTitle="With globals API"
-import { MINIMAL_VIEWPORTS } from '@storybook/addon-viewport';
+```js filename=".storybook/preview.js" renderer="common" language="js"
+import { MINIMAL_VIEWPORTS } from 'storybook/viewport';
 
 const kindleViewports = {
   kindleFire2: {
@@ -98,10 +30,11 @@ export default {
 };
 ```
 
-```ts filename=".storybook/preview.ts" renderer="common" language="ts" tabTitle="With globals API"
-// Replace your-renderer with the renderer you are using (e.g., react, vue3, angular, etc.)
-import { Preview } from '@storybook/your-renderer';
-import { MINIMAL_VIEWPORTS } from '@storybook/addon-viewport';
+```ts filename=".storybook/preview.ts" renderer="common" language="ts"
+// Replace your-framework with the framework you are using (e.g., react-vite, vue3-vite, angular, etc.)
+import { Preview } from '@storybook/your-framework';
+
+import { MINIMAL_VIEWPORTS } from 'storybook/viewport';
 
 const kindleViewports = {
   kindleFire2: {
diff --git a/docs/_snippets/addon-viewport-configuration-in-meta.md b/docs/_snippets/addon-viewport-configuration-in-meta.md
index 4eca0f715ef5..60a921568a69 100644
--- a/docs/_snippets/addon-viewport-configuration-in-meta.md
+++ b/docs/_snippets/addon-viewport-configuration-in-meta.md
@@ -1,76 +1,3 @@
-```ts filename="MyComponent.stories.ts" renderer="angular" language="ts" tabTitle="Without globals API"
-import type { Meta, StoryObj } from '@storybook/angular';
-import { INITIAL_VIEWPORTS } from '@storybook/addon-viewport';
-
-import { MyComponent } from './MyComponent.component';
-
-const meta: Meta<MyComponent> = {
-  component: MyComponent,
-  parameters: {
-    viewport: {
-      //👇 Set available viewports for every story in the file
-      viewports: INITIAL_VIEWPORTS,
-    },
-  },
-};
-
-export default meta;
-```
-
-```js filename="MyComponent.stories.js|jsx" renderer="react" language="js" tabTitle="Without globals API"
-import { INITIAL_VIEWPORTS } from '@storybook/addon-viewport';
-
-import { MyComponent } from './MyComponent';
-
-export default {
-  component: MyComponent,
-  parameters: {
-    viewport: {
-      //👇 Set available viewports for every story in the file
-      viewports: INITIAL_VIEWPORTS,
-    },
-  },
-};
-```
-
-```ts filename="MyComponent.stories.ts|tsx" renderer="react" language="ts-4-9" tabTitle="Without globals API"
-import type { Meta, StoryObj } from '@storybook/react';
-import { INITIAL_VIEWPORTS } from '@storybook/addon-viewport';
-
-import { MyComponent } from './MyComponent';
-
-const meta = {
-  component: MyComponent,
-  parameters: {
-    viewport: {
-      //👇 Set available viewports for every story in the file
-      viewports: INITIAL_VIEWPORTS,
-    },
-  },
-} satisfies Meta<typeof MyComponent>;
-
-export default meta;
-```
-
-```ts filename="MyComponent.stories.ts|tsx" renderer="react" language="ts" tabTitle="Without globals API"
-import type { Meta, StoryObj } from '@storybook/react';
-import { INITIAL_VIEWPORTS } from '@storybook/addon-viewport';
-
-import { MyComponent } from './MyComponent';
-
-const meta: Meta<typeof MyComponent> = {
-  component: MyComponent,
-  parameters: {
-    viewport: {
-      //👇 Set available viewports for every story in the file
-      viewports: INITIAL_VIEWPORTS,
-    },
-  },
-};
-
-export default meta;
-```
-
 ```js filename="MyComponent.stories.js|jsx" renderer="solid" language="js" tabTitle="Without globals API"
 import { INITIAL_VIEWPORTS } from '@storybook/addon-viewport';
 
@@ -125,148 +52,10 @@ const meta: Meta<typeof MyComponent> = {
 export default meta;
 ```
 
-```js filename="MyComponent.stories.js" renderer="svelte" language="js" tabTitle="Without globals API"
-import { INITIAL_VIEWPORTS } from '@storybook/addon-viewport';
-
-import MyComponent from './MyComponent.svelte';
-
-export default {
-  component: MyComponent,
-  parameters: {
-    viewport: {
-      //👇 Set available viewports for every story in the file
-      viewports: INITIAL_VIEWPORTS,
-    },
-  },
-};
-```
-
-```ts filename="MyComponent.stories.ts" renderer="svelte" language="ts-4-9" tabTitle="Without globals API"
-import type { Meta, StoryObj } from '@storybook/svelte';
-import { INITIAL_VIEWPORTS } from '@storybook/addon-viewport';
-
-import MyComponent from './MyComponent.svelte';
-
-const meta = {
-  component: MyComponent,
-  parameters: {
-    viewport: {
-      //👇 Set available viewports for every story in the file
-      viewports: INITIAL_VIEWPORTS,
-    },
-  },
-} satisfies Meta<typeof MyComponent>;
-
-export default meta;
-```
-
-```ts filename="MyComponent.stories.ts" renderer="svelte" language="ts" tabTitle="Without globals API"
-import type { Meta, StoryObj } from '@storybook/svelte';
-import { INITIAL_VIEWPORTS } from '@storybook/addon-viewport';
-
-import MyComponent from './MyComponent.svelte';
-
-const meta: Meta<typeof MyComponent> = {
-  component: MyComponent,
-  parameters: {
-    viewport: {
-      //👇 Set available viewports for every story in the file
-      viewports: INITIAL_VIEWPORTS,
-    },
-  },
-};
-
-export default meta;
-```
-
-```js filename="MyComponent.stories.js" renderer="vue" language="js" tabTitle="Without globals API"
-import { INITIAL_VIEWPORTS } from '@storybook/addon-viewport';
-
-import MyComponent from './MyComponent.vue';
-
-export default {
-  component: MyComponent,
-  parameters: {
-    viewport: {
-      //👇 Set available viewports for every story in the file
-      viewports: INITIAL_VIEWPORTS,
-    },
-  },
-};
-```
-
-```ts filename="MyComponent.stories.ts" renderer="vue" language="ts-4-9" tabTitle="Without globals API"
-import type { Meta, StoryObj } from '@storybook/vue3';
-import { INITIAL_VIEWPORTS } from '@storybook/addon-viewport';
-
-import MyComponent from './MyComponent.vue';
-
-const meta = {
-  component: MyComponent,
-  parameters: {
-    viewport: {
-      //👇 Set available viewports for every story in the file
-      viewports: INITIAL_VIEWPORTS,
-    },
-  },
-} satisfies Meta<typeof MyComponent>;
-
-export default meta;
-```
-
-```ts filename="MyComponent.stories.ts" renderer="vue" language="ts" tabTitle="Without globals API"
-import type { Meta, StoryObj } from '@storybook/vue3';
-import { INITIAL_VIEWPORTS } from '@storybook/addon-viewport';
-
-import MyComponent from './MyComponent.vue';
-
-const meta: Meta<typeof MyComponent> = {
-  component: MyComponent,
-  parameters: {
-    viewport: {
-      //👇 Set available viewports for every story in the file
-      viewports: INITIAL_VIEWPORTS,
-    },
-  },
-};
-
-export default meta;
-```
-
-```js filename="MyComponent.stories.js" renderer="web-components" language="js" tabTitle="Without globals API"
-import { INITIAL_VIEWPORTS } from '@storybook/addon-viewport';
-
-export default {
-  component: 'my-component',
-  parameters: {
-    viewport: {
-      //👇 Set available viewports for every story in the file
-      viewports: INITIAL_VIEWPORTS,
-    },
-  },
-};
-```
-
-```ts filename="MyComponent.stories.ts" renderer="web-components" language="ts" tabTitle="Without globals API"
-import type { Meta, StoryObj } from '@storybook/web-components';
-import { INITIAL_VIEWPORTS } from '@storybook/addon-viewport';
-
-const meta: Meta = {
-  component: 'my-component',
-  parameters: {
-    viewport: {
-      //👇 Set available viewports for every story in the file
-      viewports: INITIAL_VIEWPORTS,
-    },
-  },
-};
-
-export default meta;
-```
-
-```ts filename="MyComponent.stories.ts" renderer="angular" language="ts" tabTitle="With globals API"
+```ts filename="MyComponent.stories.ts" renderer="angular" language="ts"
 import type { Meta, StoryObj } from '@storybook/angular';
-import { INITIAL_VIEWPORTS } from '@storybook/addon-viewport';
+
+import { INITIAL_VIEWPORTS } from 'storybook/viewport';
 
 import { MyComponent } from './MyComponent.component';
 
@@ -283,8 +72,8 @@ const meta: Meta<MyComponent> = {
 export default meta;
 ```
 
-```js filename="MyComponent.stories.js|jsx" renderer="react" language="js" tabTitle="With globals API"
-import { INITIAL_VIEWPORTS } from '@storybook/addon-viewport';
+```js filename="MyComponent.stories.js|jsx" renderer="react" language="js"
+import { INITIAL_VIEWPORTS } from 'storybook/viewport';
 
 import { MyComponent } from './MyComponent';
 
@@ -299,9 +88,10 @@ export default {
 };
 ```
 
-```ts filename="MyComponent.stories.ts|tsx" renderer="react" language="ts-4-9" tabTitle="With globals API"
-import type { Meta, StoryObj } from '@storybook/react';
-import { INITIAL_VIEWPORTS } from '@storybook/addon-viewport';
+```ts filename="MyComponent.stories.ts|tsx" renderer="react" language="ts"
+import type { Meta, StoryObj } from '@storybook/react-vite';
+
+import { INITIAL_VIEWPORTS } from 'storybook/viewport';
 
 import { MyComponent } from './MyComponent';
 
@@ -318,81 +108,48 @@ const meta = {
 export default meta;
 ```
 
-```ts filename="MyComponent.stories.ts|tsx" renderer="react" language="ts" tabTitle="With globals API"
-import type { Meta, StoryObj } from '@storybook/react';
-import { INITIAL_VIEWPORTS } from '@storybook/addon-viewport';
+```svelte filename="MyComponent.stories.svelte" renderer="svelte" language="js"
+<script module>
+  import { defineMeta } from '@storybook/addon-svelte-csf';
 
-import { MyComponent } from './MyComponent';
+  import { INITIAL_VIEWPORTS } from 'storybook/viewport';
 
-const meta: Meta<typeof MyComponent> = {
-  component: MyComponent,
-  parameters: {
-    viewport: {
-      //👇 Set available viewports for every story in the file
-      options: INITIAL_VIEWPORTS,
-    },
-  },
-};
-
-export default meta;
-```
-
-```js filename="MyComponent.stories.js" renderer="svelte" language="js" tabTitle="With globals API"
-import { INITIAL_VIEWPORTS } from '@storybook/addon-viewport';
-
-import MyComponent from './MyComponent.svelte';
+  import MyComponent from './MyComponent.svelte';
 
-export default {
-  component: MyComponent,
-  parameters: {
-    viewport: {
-      //👇 Set available viewports for every story in the file
-      options: INITIAL_VIEWPORTS,
+  const { Story } = defineMeta({
+    component: MyComponent,
+    parameters: {
+      viewport: {
+        //👇 Set available viewports for every story in the file
+        options: INITIAL_VIEWPORTS,
+      },
     },
-  },
-};
+  });
+</script>
 ```
 
-```ts filename="MyComponent.stories.ts" renderer="svelte" language="ts-4-9" tabTitle="With globals API"
-import type { Meta, StoryObj } from '@storybook/svelte';
-import { INITIAL_VIEWPORTS } from '@storybook/addon-viewport';
+```svelte filename="MyComponent.stories.svelte" renderer="svelte" language="ts"
+<script module>
+  import { defineMeta } from '@storybook/addon-svelte-csf';
 
-import MyComponent from './MyComponent.svelte';
+  import { INITIAL_VIEWPORTS } from 'storybook/viewport';
 
-const meta = {
-  component: MyComponent,
-  parameters: {
-    viewport: {
-      //👇 Set available viewports for every story in the file
-      options: INITIAL_VIEWPORTS,
-    },
-  },
-} satisfies Meta<typeof MyComponent>;
-
-export default meta;
-```
+  import MyComponent from './MyComponent.svelte';
 
-```ts filename="MyComponent.stories.ts" renderer="svelte" language="ts" tabTitle="With globals API"
-import type { Meta, StoryObj } from '@storybook/svelte';
-import { INITIAL_VIEWPORTS } from '@storybook/addon-viewport';
-
-import MyComponent from './MyComponent.svelte';
-
-const meta: Meta<typeof MyComponent> = {
-  component: MyComponent,
-  parameters: {
-    viewport: {
-      //👇 Set available viewports for every story in the file
-      options: INITIAL_VIEWPORTS,
+  const { Story } = defineMeta({
+    component: MyComponent,
+    parameters: {
+      viewport: {
+        //👇 Set available viewports for every story in the file
+        options: INITIAL_VIEWPORTS,
+      },
     },
-  },
-};
-
-export default meta;
+  });
+</script>
 ```
 
-```js filename="MyComponent.stories.js" renderer="vue" language="js" tabTitle="With globals API"
-import { INITIAL_VIEWPORTS } from '@storybook/addon-viewport';
+```js filename="MyComponent.stories.js" renderer="vue" language="js"
+import { INITIAL_VIEWPORTS } from 'storybook/viewport';
 
 import MyComponent from './MyComponent.vue';
 
@@ -407,9 +164,10 @@ export default {
 };
 ```
 
-```ts filename="MyComponent.stories.ts" renderer="vue" language="ts-4-9" tabTitle="With globals API"
-import type { Meta, StoryObj } from '@storybook/vue3';
-import { INITIAL_VIEWPORTS } from '@storybook/addon-viewport';
+```ts filename="MyComponent.stories.ts" renderer="vue" language="ts"
+import type { Meta, StoryObj } from '@storybook/vue3-vite';
+
+import { INITIAL_VIEWPORTS } from 'storybook/viewport';
 
 import MyComponent from './MyComponent.vue';
 
@@ -426,28 +184,8 @@ const meta = {
 export default meta;
 ```
 
-```ts filename="MyComponent.stories.ts" renderer="vue" language="ts" tabTitle="With globals API"
-import type { Meta, StoryObj } from '@storybook/vue3';
-
-import { INITIAL_VIEWPORTS } from '@storybook/addon-viewport';
-
-import MyComponent from './MyComponent.vue';
-
-const meta: Meta<typeof MyComponent> = {
-  component: MyComponent,
-  parameters: {
-    viewport: {
-      //👇 Set available viewports for every story in the file
-      options: INITIAL_VIEWPORTS,
-    },
-  },
-};
-
-export default meta;
-```
-
-```js filename="MyComponent.stories.js" renderer="web-components" language="js" tabTitle="With globals API"
-import { INITIAL_VIEWPORTS } from '@storybook/addon-viewport';
+```js filename="MyComponent.stories.js" renderer="web-components" language="js"
+import { INITIAL_VIEWPORTS } from 'storybook/viewport';
 
 export default {
   component: 'my-component',
@@ -460,9 +198,10 @@ export default {
 };
 ```
 
-```ts filename="MyComponent.stories.ts" renderer="web-components" language="ts" tabTitle="With globals API"
-import type { Meta, StoryObj } from '@storybook/web-components';
-import { INITIAL_VIEWPORTS } from '@storybook/addon-viewport';
+```ts filename="MyComponent.stories.ts" renderer="web-components" language="ts"
+import type { Meta, StoryObj } from '@storybook/web-components-vite';
+
+import { INITIAL_VIEWPORTS } from 'storybook/viewport';
 
 const meta: Meta = {
   component: 'my-component',
diff --git a/docs/_snippets/addon-viewport-define-default.md b/docs/_snippets/addon-viewport-define-default.md
deleted file mode 100644
index d3de90dd4878..000000000000
--- a/docs/_snippets/addon-viewport-define-default.md
+++ /dev/null
@@ -1,131 +0,0 @@
-```ts filename="Button.stories.ts" renderer="angular" language="ts"
-import type { Meta, StoryObj } from '@storybook/angular';
-
-import { Button } from './button.component';
-
-const meta: Meta<Button> = {
-  component: Button,
-  parameters: {
-    // 👇 Set default viewport for all component stories
-    viewport: { defaultViewport: 'tablet' },
-  },
-};
-
-export default meta;
-type Story = StoryObj<Button>;
-
-export const OnPhone: Story = {
-  parameters: {
-    // 👇 Override default viewport for this story
-    viewport: { defaultViewport: 'mobile1' },
-  },
-};
-```
-
-```js filename="Button.stories.js|jsx" renderer="common" language="js"
-import { Button } from './Button';
-
-export default {
-  component: Button,
-  parameters: {
-    // 👇 Set default viewport for all component stories
-    viewport: { defaultViewport: 'tablet' },
-  },
-};
-
-export const OnPhone = {
-  parameters: {
-    // 👇 Override default viewport for this story
-    viewport: { defaultViewport: 'mobile1' },
-  },
-};
-```
-
-```ts filename="Button.stories.ts|tsx" renderer="common" language="ts-4-9"
-// Replace your-framework with the name of your framework
-import type { Meta, StoryObj } from '@storybook/your-framework';
-
-import { Button } from './Button';
-
-const meta = {
-  component: Button,
-  parameters: {
-    // 👇 Set default viewport for all component stories
-    viewport: { defaultViewport: 'tablet' },
-  },
-} satisfies Meta<typeof Button>;
-
-export default meta;
-type Story = StoryObj<typeof meta>;
-
-export const OnPhone: Story = {
-  parameters: {
-    // 👇 Override default viewport for this story
-    viewport: { defaultViewport: 'mobile1' },
-  },
-};
-```
-
-```ts filename="Button.stories.ts|tsx" renderer="common" language="ts"
-// Replace your-framework with the name of your framework
-import type { Meta, StoryObj } from '@storybook/your-framework';
-
-import { Button } from './Button';
-
-const meta: Meta<typeof Button> = {
-  component: Button,
-  parameters: {
-    // 👇 Set default viewport for all component stories
-    viewport: { defaultViewport: 'tablet' },
-  },
-};
-
-export default meta;
-type Story = StoryObj<typeof Button>;
-
-export const OnPhone: Story = {
-  parameters: {
-    // 👇 Override default viewport for this story
-    viewport: { defaultViewport: 'mobile1' },
-  },
-};
-```
-
-```js filename="Button.stories.js" renderer="web-components" language="js"
-export default {
-  component: 'demo-button',
-  parameters: {
-    // 👇 Set default viewport for all component stories
-    viewport: { defaultViewport: 'tablet' },
-  },
-};
-
-export const OnPhone = {
-  parameters: {
-    // 👇 Override default viewport for this story
-    viewport: { defaultViewport: 'mobile1' },
-  },
-};
-```
-
-```ts filename="Button.stories.ts" renderer="web-components" language="ts"
-import type { Meta, StoryObj } from '@storybook/web-components';
-
-const meta: Meta = {
-  component: 'demo-button',
-  parameters: {
-    // 👇 Set default viewport for all component stories
-    viewport: { defaultViewport: 'tablet' },
-  },
-};
-
-export default meta;
-type Story = StoryObj;
-
-export const OnPhone: Story = {
-  parameters: {
-    // 👇 Override default viewport for this story
-    viewport: { defaultViewport: 'mobile1' },
-  },
-};
-```
diff --git a/docs/_snippets/addon-viewport-define-globals.md b/docs/_snippets/addon-viewport-define-globals.md
index f15c367fb14c..50f6f048e97d 100644
--- a/docs/_snippets/addon-viewport-define-globals.md
+++ b/docs/_snippets/addon-viewport-define-globals.md
@@ -22,6 +22,52 @@ export const OnPhone: Story = {
 };
 ```
 
+```svelte filename="Button.stories.svelte" renderer="svelte" language="js"
+<script module>
+  import { defineMeta } from '@storybook/addon-svelte-csf';
+
+  import Button from './Button.svelte';
+
+  const { Story } = defineMeta({
+    component: Button,
+    globals: {
+      // 👇 Set viewport for all component stories
+      viewport: { value: "tablet", isRotated: false },
+    },
+  });
+</script>
+
+<Story
+  name="OnPhone"
+  globals={{
+    viewport: { value: "mobile1", isRotated: false },
+  }}
+/>
+```
+
+```svelte filename="Button.stories.svelte" renderer="svelte" language="ts"
+<script module>
+  import { defineMeta } from '@storybook/addon-svelte-csf';
+
+  import Button from './Button.svelte';
+
+  const { Story } = defineMeta({
+    component: Button,
+    globals: {
+      // 👇 Set viewport for all component stories
+      viewport: { value: "tablet", isRotated: false },
+    },
+  });
+</script>
+
+<Story
+  name="OnPhone"
+  globals={{
+    viewport: { value: "mobile1", isRotated: false },
+  }}
+/>
+```
+
 ```js filename="Button.stories.js|jsx" renderer="common" language="js"
 import { Button } from './Button';
 
@@ -41,9 +87,9 @@ export const OnPhone = {
 };
 ```
 
-```ts filename="Button.stories.ts|tsx" renderer="common" language="ts-4-9"
-// Replace your-renderer with the renderer you are using (e.g., react, vue3, angular, etc.)
-import type { Meta, StoryObj } from '@storybook/your-renderer';
+```ts filename="Button.stories.ts|tsx" renderer="common" language="ts"
+// Replace your-framework with the framework you are using (e.g., react-vite, vue3-vite, angular, etc.)
+import type { Meta, StoryObj } from '@storybook/your-framework';
 
 import { Button } from './Button';
 
@@ -66,31 +112,6 @@ export const OnPhone: Story = {
 };
 ```
 
-```ts filename="Button.stories.ts|tsx" renderer="common" language="ts"
-// Replace your-renderer with the renderer you are using (e.g., react, vue3, angular, etc.)
-import type { Meta, StoryObj } from '@storybook/your-renderer';
-
-import { Button } from './Button';
-
-const meta: Meta<typeof Button> = {
-  component: Button,
-  globals: {
-    // 👇 Set viewport for all component stories
-    viewport: { value: 'tablet', isRotated: false },
-  },
-};
-
-export default meta;
-type Story = StoryObj<typeof Button>;
-
-export const OnPhone: Story = {
-  globals: {
-    // 👇 Override viewport for this story
-    viewport: { value: 'mobile1', isRotated: false },
-  },
-};
-```
-
 ```js filename="Button.stories.js" renderer="web-components" language="js"
 export default {
   component: 'demo-button',
@@ -109,7 +130,7 @@ export const OnPhone = {
 ```
 
 ```ts filename="Button.stories.ts" renderer="web-components" language="ts"
-import type { Meta, StoryObj } from '@storybook/web-components';
+import type { Meta, StoryObj } from '@storybook/web-components-vite';
 
 const meta: Meta = {
   component: 'demo-button',
diff --git a/docs/_snippets/addon-viewport-options-in-preview.md b/docs/_snippets/addon-viewport-options-in-preview.md
index c342682af443..153a3605ab0a 100644
--- a/docs/_snippets/addon-viewport-options-in-preview.md
+++ b/docs/_snippets/addon-viewport-options-in-preview.md
@@ -1,5 +1,5 @@
 ```js filename=".storybook/preview.js" renderer="common" language="js"
-import { INITIAL_VIEWPORTS } from '@storybook/addon-viewport';
+import { INITIAL_VIEWPORTS } from 'storybook/viewport';
 
 export default {
   parameters: {
@@ -14,8 +14,10 @@ export default {
 ```
 
 ```ts filename=".storybook/preview.ts" renderer="common" language="ts"
-// Replace your-renderer with the renderer you are using (e.g., react, vue3, angular, etc.)
-import { Preview } from '@storybook/your-renderer';
+// Replace your-framework with the framework you are using (e.g., react-vite, vue3-vite, angular, etc.)
+import { Preview } from '@storybook/your-framework';
+
+import { INITIAL_VIEWPORTS } from 'storybook/viewport';
 
 const preview: Preview = {
   parameters: {
diff --git a/docs/_snippets/addon-viewport-viewports-in-preview.md b/docs/_snippets/addon-viewport-viewports-in-preview.md
deleted file mode 100644
index e4b101cde98c..000000000000
--- a/docs/_snippets/addon-viewport-viewports-in-preview.md
+++ /dev/null
@@ -1,29 +0,0 @@
-```js filename=".storybook/preview.js" renderer="common" language="js"
-import { INITIAL_VIEWPORTS } from '@storybook/addon-viewport';
-
-export default {
-  parameters: {
-    viewport: {
-      viewports: INITIAL_VIEWPORTS,
-      defaultViewport: 'ipad',
-    },
-  },
-};
-```
-
-```ts filename=".storybook/preview.ts" renderer="common" language="ts"
-// Replace your-renderer with the renderer you are using (e.g., react, vue3, angular, etc.)
-import { Preview } from '@storybook/your-renderer';
-import { INITIAL_VIEWPORTS } from '@storybook/addon-viewport';
-
-const preview: Preview = {
-  parameters: {
-    viewport: {
-      viewports: INITIAL_VIEWPORTS,
-      defaultViewport: 'ipad',
-    },
-  },
-};
-
-export default preview;
-```
diff --git a/docs/_snippets/main-config-features-backgrounds-story-globals.md b/docs/_snippets/main-config-features-backgrounds-story-globals.md
deleted file mode 100644
index 0cea2e351129..000000000000
--- a/docs/_snippets/main-config-features-backgrounds-story-globals.md
+++ /dev/null
@@ -1,25 +0,0 @@
-```js filename=".storybook/main.js" renderer="common" language="js"
-export default {
-  // Replace your-framework with the framework you are using (e.g., react-webpack5, vue3-vite)
-  framework: '@storybook/your-framework',
-  stories: ['../src/**/*.mdx', '../src/**/*.stories.@(js|jsx|mjs|ts|tsx)'],
-  features: {
-    backgroundsStoryGlobals: true,
-  },
-};
-```
-
-```ts filename=".storybook/main.ts" renderer="common" language="ts"
-// 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 = {
-  framework: '@storybook/your-framework',
-  stories: ['../src/**/*.mdx', '../src/**/*.stories.@(js|jsx|mjs|ts|tsx)'],
-  features: {
-    backgroundsStoryGlobals: true,
-  },
-};
-
-export default config;
-```
diff --git a/docs/_snippets/main-config-features-viewport-story-globals.md b/docs/_snippets/main-config-features-viewport-story-globals.md
deleted file mode 100644
index d3693fd068b3..000000000000
--- a/docs/_snippets/main-config-features-viewport-story-globals.md
+++ /dev/null
@@ -1,25 +0,0 @@
-```js filename=".storybook/main.js" renderer="common" language="js"
-export default {
-  // Replace your-framework with the framework you are using (e.g., react-webpack5, vue3-vite)
-  framework: '@storybook/your-framework',
-  stories: ['../src/**/*.mdx', '../src/**/*.stories.@(js|jsx|mjs|ts|tsx)'],
-  features: {
-    viewportStoryGlobals: true,
-  },
-};
-```
-
-```ts filename=".storybook/main.ts" renderer="common" language="ts"
-// 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 = {
-  framework: '@storybook/your-framework',
-  stories: ['../src/**/*.mdx', '../src/**/*.stories.@(js|jsx|mjs|ts|tsx)'],
-  features: {
-    viewportStoryGlobals: true,
-  },
-};
-
-export default config;
-```
diff --git a/docs/api/main-config/main-config-features.mdx b/docs/api/main-config/main-config-features.mdx
index 3c05e993b108..432f1d74a09f 100644
--- a/docs/api/main-config/main-config-features.mdx
+++ b/docs/api/main-config/main-config-features.mdx
@@ -12,9 +12,7 @@ Type:
 ```ts
 {
   argTypeTargetsV7?: boolean;
-  backgroundsStoryGlobals?: boolean;
   legacyDecoratorFileOrder?: boolean;
-  viewportStoryGlobals?: boolean;
   developmentModeForBuild?: boolean;
 }
 ```
diff --git a/docs/essentials/backgrounds.mdx b/docs/essentials/backgrounds.mdx
index 2d5eea3f50bd..941904874850 100644
--- a/docs/essentials/backgrounds.mdx
+++ b/docs/essentials/backgrounds.mdx
@@ -5,67 +5,38 @@ sidebar:
   title: Backgrounds
 ---
 
-The backgrounds toolbar addon allows you to set the background color on which the story renders in the UI:
+The backgrounds toolbar item allows you to set the background color on which the story renders in the UI:
 
 <Video src="../_assets/essentials/addon-backgrounds-optimized.mp4" />
 
-<Callout variant="warning" icon="🆕" id="globals-api">
-  **`globals` API**
-
-  This addon has been updated to use the `globals` API when the [`backgroundsStoryGlobals` feature flag](../api/main-config/main-config-features.mdx#backgroundsstoryglobals) is enabled. With `globals`, when you specify a background value for a story, it cannot be overridden from the toolbar, which ensures a consistent experience while navigating between stories. This will be the default behavior and API in Storybook 9.
-</Callout>
-
 ## Configuration
 
-By default, the backgrounds toolbar includes a light and dark background.
+By default, the backgrounds toolbar item includes a light and dark background.
 
-But you're not restricted to these backgrounds. You can configure your own set of colors with the `backgrounds` [parameter](../writing-stories/parameters.mdx) in your [`.storybook/preview.js`](../configure/index.mdx#configure-story-rendering).
+But you're not restricted to these backgrounds. You can configure your own set of colors with the `backgrounds` [parameter](../writing-stories/parameters.mdx) in your [`.storybook/preview.js|ts`](../configure/index.mdx#configure-story-rendering).
 
-You can define the available background colors using the [`values` property](#values) and set the initial background color using the [`default` property](#default):
+You can define the available background colors using the [`options` property](#options) and set the initial background color using the `initialGlobals` property:
 
 {/* prettier-ignore-start */}
 
-<CodeSnippets path="addon-backgrounds-values-in-preview.md" />
+<CodeSnippets path="addon-backgrounds-options-in-preview.md" />
 
 {/* prettier-ignore-end */}
 
-<Callout variant="warning" icon="🆕">
-
-  **With the [`globals` API](#globals-api)**
-
-  When using the `globals` API, you must define the available background colors using the [`options` property](#options). The initial background color can be set using the `initialGlobals` property, which accepts the same object properties as the [`globals`](#globals) for this addon.
-
-  {/* prettier-ignore-start */}
-
-  <CodeSnippets path="addon-backgrounds-options-in-preview.md" />
-
-  {/* prettier-ignore-end */}
-
-</Callout>
-
 ## Defining the background for a story
 
-The Backgrounds addon enables you to change the background color applied to a story by selecting from the list of predefined background colors in the toolbar. If needed, you can set a story to default to a specific background color, by using the `parameters.backgrounds.default` parameter:
+The backgrounds toolbar item enables you to change the background color applied to a story by selecting from the list of predefined background colors in the toolbar. If needed, you can set a story to default to a specific background color, by using the `globals` option:
 
 {/* prettier-ignore-start */}
 
-<CodeSnippets path="addon-backgrounds-define-default.md" usesCsf3 />
+<CodeSnippets path="addon-backgrounds-define-globals.md" usesCsf3 />
 
 {/* prettier-ignore-end */}
 
-As implied by the name, this method only sets the default background color for a story. You can still change the background color using the toolbar when viewing the story.
-
-<Callout variant="warning" icon="🆕">
 
-  **With the [`globals` API](#globals-api)**
+<Callout variant="info">
 
-  When you specify a background color for a story (or a component's stories) using `globals`, the background color is applied and cannot be changed using the toolbar. This is useful when you want to ensure that a story is always rendered on a specific background color.
-
-  {/* prettier-ignore-start */}
-
-  <CodeSnippets path="addon-backgrounds-define-globals.md" usesCsf3 />
-
-  {/* prettier-ignore-end */}
+  When you specify a background color for a story (or a component's stories) using `globals`, the color is applied and cannot be changed using the toolbar. This is useful to ensure a story is always rendered on a specific background color.
 
 </Callout>
 
@@ -73,40 +44,19 @@ As implied by the name, this method only sets the default background color for a
 
 You can also configure backgrounds on a per-component or per-story basis through [parameter inheritance](../writing-stories/parameters.mdx#component-parameters).
 
-To set the available background colors, use the [`values` property](#values). In this example, we'll adjust the colors for all of the Button component's stories:
+To set the available background colors, use the [`options` property](#options). In this example, we'll adjust the colors for all of the Button component's stories:
 
 {/* prettier-ignore-start */}
 
-<CodeSnippets path="addon-backgrounds-values-in-meta.md" />
+<CodeSnippets path="addon-backgrounds-options-in-meta.md" />
 
 {/* prettier-ignore-end */}
 
-<Callout variant="warning" icon="🆕">
-
-  **With the [`globals` API](#globals-api)**
-
-  The available background colors are defined using the [`options` property](#options). In this example, we'll adjust the colors for all of the Button component's stories:
-
-  {/* prettier-ignore-start */}
-
-  <CodeSnippets path="addon-backgrounds-options-in-meta.md" />
-
-  {/* prettier-ignore-end */}
-
-</Callout>
 
 ## Disable backgrounds
 
 If you want to turn off backgrounds in a story, you can do so by configuring the `backgrounds` parameter like so:
 
-<Callout variant="warning" icon="🆕">
-
-  **With the [`globals` API](#globals-api)**
-
-  Note that the property has been renamed to `disabled`.
-
-</Callout>
-
 {/* prettier-ignore-start */}
 
 <CodeSnippets path="addon-backgrounds-disabled.md" usesCsf3/>
@@ -115,7 +65,7 @@ If you want to turn off backgrounds in a story, you can do so by configuring the
 
 ## Grid
 
-The Backgrounds toolbar also includes a Grid selector, which allows you to quickly see if your components are aligned.
+The backgrounds toolbar item also includes a Grid selector, which allows you to quickly see if your components are aligned.
 
 You don't need additional configuration to get started. But its properties are fully customizable; if you don't supply any value to any of its properties, they'll default to the following values:
 
@@ -127,55 +77,31 @@ You don't need additional configuration to get started. But its properties are f
 
 ## API
 
-<Callout variant="warning" icon="🆕">
-
-  **With the [`globals` API](#globals-api)**
+### Globals
 
-  ### Globals
+This module contributes the following globals to Storybook, under the `backgrounds` namespace:
 
-  This addon contributes the following globals to Storybook, under the `backgrounds` namespace:
-
-  #### `grid`
-
-  Type: `boolean`
+#### `grid`
 
-  Whether the [grid](#grid) is displayed.
+Type: `boolean`
 
-  #### `value`
+Whether the [grid](#grid) is displayed.
 
-  Type: `string`
+#### `value`
 
-  When set, the background color is applied and cannot be changed using the toolbar. Must match the key of one of the [available colors](#options).
+Type: `string`
 
-</Callout>
+When set, the background color is applied and cannot be changed using the toolbar. Must match the key of one of the [available colors](#options).
 
 ### Parameters
 
-This addon contributes the following [parameters](../writing-stories/parameters.mdx) to Storybook, under the `backgrounds` namespace:
-
-#### `default`
-
-Type: `string`
-
-Required: See description
-
-Default background color. Must match the `name` property of one of the available colors defined in the [`values`](#values) (or [`options`](#options)) property.
+This module contributes the following [parameters](../writing-stories/parameters.mdx) to Storybook, under the `backgrounds` namespace:
 
 #### `disable`
 
-<Callout variant="warning" icon="🆕">
-
-  **With the [`globals` API](#globals-api)**
-
-  Note that the property has been renamed to `disabled`.
-
-</Callout>
-
 Type: `boolean`
 
-Turn off this addon's behavior. If you wish to turn off this addon for the entire Storybook, you should do so when registering `addon-essentials`. See the [essential addon's docs](../essentials/index.mdx#disabling-addons) for more information.
-
-This parameter is most useful to allow overriding at more specific levels. For example, if this parameter is set to `true` at the project level, it could be re-enabled by setting it to `false` at the meta (component) or story level.
+Turn off this module's behavior. This parameter is most useful to allow overriding at more specific levels. For example, if this parameter is set to `true` at the project level, it could be re-enabled by setting it to `false` at the meta (component) or story level.
 
 #### `grid`
 
@@ -240,39 +166,19 @@ Default: `0.5`
 
 The opacity of the grid lines.
 
-#### `values`
+#### `options`
 
 (Required, see description)
 
-Type: `{ name: string; value: string }[]`
-
-Available background colors. See above for a [usage example](#configuration).
-
-When defining the `backgrounds` parameter at the project level (in `.storybook/preview.js|ts`), you _must_ define the `values` property.
-
-<Callout variant="warning" icon="🆕">
-
-  **With the [`globals` API](#globals-api)**
-
-  #### `options`
-
-  (Required, see description)
-
-  Type:
-
-  ```ts
-  {
-    [key: string]: {
-      name: string;
-      value: string;
-    };
-  }
-  ```
-
-  Replaces: [`values`](#values)
-
-  Available background colors. See above for a [usage example](#configuration).
+Type:
 
-  When defining the `backgrounds` parameter at the project level (in `.storybook/preview.js|ts`), you _must_ define the `options` property.
+```ts
+{
+  [key: string]: {
+    name: string;
+    value: string;
+  };
+}
+```
 
-</Callout>
\ No newline at end of file
+Available background colors. See above for a [usage example](#configuration).
diff --git a/docs/essentials/toolbars-and-globals.mdx b/docs/essentials/toolbars-and-globals.mdx
index 65dffb0a653e..7f6bdd4f7b9f 100644
--- a/docs/essentials/toolbars-and-globals.mdx
+++ b/docs/essentials/toolbars-and-globals.mdx
@@ -5,8 +5,6 @@ sidebar:
   title: Toolbars & globals
 ---
 
-<YouTubeCallout id="DuJ_gmSncLM" title="Create custom toolbar items using global types" />
-
 Storybook ships with toolbar addons to control the [viewport](./viewport.mdx) and [background](./backgrounds.mdx) the story renders in. You can also create toolbar items which control special “globals”. You can then read the global values to create [decorators](../writing-stories/decorators.mdx) to control story rendering.
 
 ![Toolbars and globals](../_assets/essentials/toolbars-and-globals.png)
@@ -81,10 +79,6 @@ We have a `global` implemented. Let's wire it up! We can consume our new `theme`
 
 ## Setting globals on a story
 
-<Callout variant="warning" icon="🆕">
-  The ability to set globals on a story or component is available in Storybook 8.3+. Some addons, like [backgrounds](./backgrounds.mdx) and [viewport](./viewport.mdx), have been updated to use the `globals` API when a [feature flag](../api/main-config/main-config-features.mdx) is enabled.
-</Callout>
-
 When a global value is changed with a toolbar menu in Storybook, that value continues to be used as you navigate between stories. But sometimes a story requires a specific value to render correctly, e.g., when testing against a particular environment.
 
 To ensure that a story always uses a specific global value, regardless of what has been chosen in the toolbar, you can set the `globals` annotation on a story or component. This overrides the global value for those stories and disables the toolbar menu for that global when viewing the stories.
@@ -119,16 +113,10 @@ In your [`.storybook/preview.js|ts`](../configure/index.mdx#configure-story-rend
 
 <Callout variant="info" icon="💡" style={{ marginBottom: '10px' }}>
 
- The `icon` element used in the examples loads the icons from the `storybook/internal/components` module. See [here](../faq.mdx#what-icons-are-available-for-my-toolbar-or-my-addon) for the list of available icons that you can use.
+The `icon` element used in the examples loads the icons from the `@storybook/icons` package. See [here](../faq.mdx#what-icons-are-available-for-my-toolbar-or-my-addon) for the list of available icons that you can use.
   
 </Callout>
 
-<Callout variant="info" icon="💡">
-
- To use toolbars, you must install the `@storybook/addon-toolbars` add-on, which is included by default in `@storybook/addon-essentials`.
-
-</Callout>
-
 Adding the configuration element `right` will display the text on the right side in the toolbar menu once you connect it to a decorator.
 
 Here's a list of the available configuration options.
diff --git a/docs/essentials/viewport.mdx b/docs/essentials/viewport.mdx
index a72db24c034d..a84b8ff1cf41 100644
--- a/docs/essentials/viewport.mdx
+++ b/docs/essentials/viewport.mdx
@@ -5,47 +5,25 @@ sidebar:
   title: Viewport
 ---
 
-<YouTubeCallout id="uydF1ltw7-g" title="Stop resizing your browser — Storybook viewport" />
-
-The Viewport toolbar item allows you to adjust the dimensions of the iframe your story is rendered in. It makes it easy to develop responsive UIs.
+The viewport toolbar item allows you to adjust the dimensions of the iframe your story is rendered in. It makes it easy to develop responsive UIs.
 
 <Video src="../_assets/essentials/addon-viewports-optimized.mp4" />
 
-<Callout variant="warning" icon="🆕" id="globals-api">
-  **`globals` API**
-
-  This addon has been updated to use the `globals` API when the [`viewportStoryGlobals` feature flag](../api/main-config/main-config-features.mdx#viewportstoryglobals) is enabled. With `globals`, when you specify a viewport for a story, it cannot be overridden from the toolbar, which ensures a consistent experience while navigating between stories. This will be the default behavior and API in Storybook 9.
-</Callout>
-
 ## Configuration
 
-Out of the box, the Viewport addon offers you a standard set of viewports that you can use. If you want to change the default set of viewports, you can configure your own viewports with the `viewport` [parameter](../writing-stories/parameters.mdx) in your [`.storybook/preview.js`](../configure/index.mdx#configure-story-rendering).
+Out of the box, the viewport toolbar item offers you a standard set of viewports that you can use. If you want to change the default set of viewports, you can configure your own viewports with the `viewport` [parameter](../writing-stories/parameters.mdx) in your [`.storybook/preview.js|ts`](../configure/index.mdx#configure-story-rendering).
 
-You can define the available viewports using the [`viewports` property](#viewports) and set the initial viewport using the [`defaultViewport` property](#defaultViewport):
+You can define the available viewports using the [`options` property](#options) and set the initial viewport using the `initialGlobals` property:
 
 {/* prettier-ignore-start */}
 
-<CodeSnippets path="addon-viewport-viewports-in-preview.md" />
+<CodeSnippets path="addon-viewport-options-in-preview.md" />
 
 {/* prettier-ignore-end */}
 
-<Callout variant="warning" icon="🆕">
-
-  **With the [`globals` API](#globals-api)**
-
-  When using the `globals` API, you must define the available viewports using the [`options` property](#options). The initial viewport can be set using the `initialGlobals` property, which accepts the same object properties as the [`globals`](#globals) for this addon.
-
-  {/* prettier-ignore-start */}
-
-  <CodeSnippets path="addon-viewport-options-in-preview.md" />
-
-  {/* prettier-ignore-end */}
-
-</Callout>
-
 ### Use a detailed set of devices
 
-By default, the Viewport addon will use a minimal set of viewports, which enables you to test your UI in common responsive scenarios. These are also available in the [`MINIMAL_VIEWPORTS` export](#minimal_viewports) and include the following devices:
+By default, the viewport toolbar item will use a minimal set of viewports, which enables you to test your UI in common responsive scenarios. These are also available in the [`MINIMAL_VIEWPORTS` export](#minimal_viewports) and include the following devices:
 
 | Key       | Description  | Dimensions<br />(<abbr title="width">w</abbr>×<abbr title="height">h</abbr>, px) |
 | ----------|------------- | -------------------------------------------------------------------------------- |
@@ -89,36 +67,18 @@ If you need a more detailed set of devices, you can use the [`INITIAL_VIEWPORTS`
 | `ipad12p`        | iPad Pro 12.9-in                                | 1024 × 1366                                                                      |
 | `tablet`         | Tablet<br />(also in `MINIMAL_VIEWPORTS`)       | 834 × 1112                                                                       |
 
-To use the detailed set of devices, you can replace the `viewports` property in your configuration with the `INITIAL_VIEWPORTS` export:
+To use the detailed set of devices, you can adjust the `options` property in your configuration to include the `INITIAL_VIEWPORTS` export:
 
 {/* prettier-ignore-start */}
 
-<CodeSnippets path="addon-viewport-viewports-in-preview.md" />
+<CodeSnippets path="addon-viewport-options-in-preview.md" />
 
 {/* prettier-ignore-end */}
 
-<Callout variant="warning" icon="🆕">
-
-  **With the [`globals` API](#globals-api)**
-
-  When using the `globals` API, the available viewports are defined using the [`options` property](#options).
-
-  <CodeSnippets path="addon-viewport-options-in-preview.md" />
-
-</Callout>
-
 ### Add new devices
 
 If the predefined viewports don't meet your needs, you can add new devices to the list of viewports. For example, let's add two Kindle devices to the default set of minimal viewports:
 
-<Callout variant="warning" icon="🆕">
-
-  **With the [`globals` API](#globals-api)**
-
-  When using the `globals` API, note that available viewports are defined using the [`options` property](#options).
-
-</Callout>
-
 {/* prettier-ignore-start */}
 
 <CodeSnippets path="addon-viewport-add-viewport-in-preview.md" />
@@ -139,27 +99,17 @@ In some cases, it's not practical for you to use a specific visual viewport on a
 
 ## Defining the viewport for a story
 
-The Viewport addon enables you to change the viewport applied to a story by selecting from the list of predefined viewports in the toolbar. If needed, you can set a story to default to a specific viewport, by using the `parameters.viewport.default` parameter:
+The Viewport module enables you to change the viewport applied to a story by selecting from the list of predefined viewports in the toolbar. If needed, you can set a story to default to a specific viewport by using the `globals` option:
 
 {/* prettier-ignore-start */}
 
-<CodeSnippets path="addon-viewport-define-default.md" usesCsf3 />
+<CodeSnippets path="addon-viewport-define-globals.md" usesCsf3 />
 
 {/* prettier-ignore-end */}
 
-As implied by the name, this method only sets the default viewport for a story. You can still change the viewport using the toolbar when viewing the story.
-
-<Callout variant="warning" icon="🆕">
-
-  **With the [`globals` API](#globals-api)**
-
-  When you specify a viewport for a story (or a component's stories) using `globals`, the viewport is applied and cannot be changed using the toolbar. This is useful when you want to ensure that a story is always rendered on a specific viewport.
-
-  {/* prettier-ignore-start */}
-
-  <CodeSnippets path="addon-viewport-define-globals.md" usesCsf3 />
+<Callout variant="info">
 
-  {/* prettier-ignore-end */}
+When you specify a viewport for a story (or a component's stories) using `globals`, the viewport is applied and cannot be changed using the toolbar. This is useful to ensure a story is always rendered on a specific viewport.
 
 </Callout>
 
@@ -173,63 +123,33 @@ If you need, you can edit these on the shortcuts page.
 * Previous viewport: <kbd>alt</kbd> + <kbd>shift</kbd> + <kbd>v</kbd>
 * Reset viewport: <kbd>alt</kbd> + <kbd>control</kbd> + <kbd>v</kbd>
 
-<Callout variant="warning" icon="🆕">
+### Globals
 
-  **With the [`globals` API](#globals-api)**
+This module contributes the following globals to Storybook, under the `viewport` namespace:
 
-  ### Globals
+#### `value`
 
-  This addon contributes the following globals to Storybook, under the `viewport` namespace:
-
-  #### `value`
-
-  Type: `string`
-
-  When set, the viewport is applied and cannot be changed using the toolbar. Must match the key of one of the [available viewports](#options).
+Type: `string`
 
-  #### `isRotated`
+When set, the viewport is applied and cannot be changed using the toolbar. Must match the key of one of the [available viewports](#options).
 
-  Type: `boolean`
+#### `isRotated`
 
-  When true the viewport applied will be rotated 90°, e.g. it will rotate from portrait to landscape orientation.
+Type: `boolean`
 
-</Callout>
+When true, the viewport applied will be rotated 90°, e.g., from portrait to landscape orientation.
 
 ### Parameters
 
-This addon contributes the following [parameters](../writing-stories/parameters.mdx) to Storybook, under the `viewport` namespace:
-
-#### `defaultOrientation`
-
-Type: `'portrait' | 'landscape'`
-
-Default: `'portrait'`
-
-Specifies the default orientation used when viewing a story. Only available if you haven't enabled the [globals API](#customizing-viewports-with-globals).
-
-#### `defaultViewport`
-
-Type: `string`
-
-Specifies the default viewport used when viewing a story. Must match a key in the [`viewports`](#viewports) (or [`options`](#options)) object.
+This module contributes the following [parameters](../writing-stories/parameters.mdx) to Storybook, under the `viewport` namespace:
 
 #### `disable`
 
-<Callout variant="warning" icon="🆕">
-
-  **With the [`globals` API](#globals-api)**
-
-  Note that the property has been renamed to `disabled`.
-
-</Callout>
-
 Type: `boolean`
 
-Turn off this addon's behavior. If you wish to turn off this addon for the entire Storybook, you should do so when registering `addon-essentials`. See the [essential addon's docs](../essentials/index.mdx#disabling-addons) for more information.
-
-This parameter is most useful to allow overriding at more specific levels. For example, if this parameter is set to `true` at the project level, it could be re-enabled by setting it to `false` at the meta (component) or story level.
+Turn off this module's behavior. This parameter is most useful to allow overriding at more specific levels. For example, if this parameter is set to `true` at the project level, it could be re-enabled by setting it to `false` at the meta (component) or story level.
 
-#### `viewports`
+#### `options`
 
 Type:
 
@@ -238,54 +158,31 @@ Type:
   [key: string]: {
     name: string;
     styles: { height: string, width: string };
-    type: 'desktop' | 'mobile' | 'tablet';
+    type: 'desktop' | 'mobile' | 'tablet' | 'other';
   };
 }
 ```
 
 Specify the available viewports. See [usage example](#add-new-devices) above. The `width` and `height` values must include the unit, e.g. `'320px'`.
 
-<Callout variant="warning" icon="🆕">
-
-  **With the [`globals` API](#globals-api)**
-
-  #### `options`
-
-  Type:
-
-  ```ts
-  {
-    [key: string]: {
-      name: string;
-      styles: { height: string, width: string };
-      type: 'desktop' | 'mobile' | 'tablet' | 'other';
-    };
-  }
-  ```
-
-  Replaces: [`viewports`](#viewports)
-
-  Specify the available viewports. See [usage example](#add-new-devices) above. The `width` and `height` values must include the unit, e.g. `'320px'`.
-
-</Callout>
 
 ### Exports
 
-This addon contributes the following exports to Storybook:
+This module contributes the following exports to Storybook:
 
 ```js
-import { INITIAL_VIEWPORTS, MINIMAL_VIEWPORTS } from '@storybook/addon-viewport';
+import { INITIAL_VIEWPORTS, MINIMAL_VIEWPORTS } from 'storybook/viewport';
 ```
 
 #### `INITIAL_VIEWPORTS`
 
 Type: `object`
 
-The full set of initial viewports provided by the Viewport addon, [listed above](#use-a-detailed-set-of-devices).
+The full set of initial viewports provided by the Viewport module [listed above](#use-a-detailed-set-of-devices).
 
 #### `MINIMAL_VIEWPORTS`
 
 Type: `object`
 
-A minimal set of viewports provided by the Viewport addon [listed above](#use-a-detailed-set-of-devices). These are used by default.
+A minimal set of viewports provided by the Viewport module [listed above](#use-a-detailed-set-of-devices). These are used by default.
 
diff --git a/docs/faq.mdx b/docs/faq.mdx
index c08a0aa9c774..64eb1119630f 100644
--- a/docs/faq.mdx
+++ b/docs/faq.mdx
@@ -301,10 +301,7 @@ We're only covering versions 5.3 and 5.0 as they were important milestones for S
 
 ## What icons are available for my toolbar or my addon?
 
-With the `storybook/internal/components` module, you get a set of icons that you can use to customize your UI. Use the table below as a reference while writing your addon or defining your Storybook global types.
-Go through this [story](https://main--5a375b97f4b14f0020b0cda3.chromatic.com/?path=/story/basics-icon--labels) to see how the icons look.
-
-<iframe src="https://main--5a375b97f4b14f0020b0cda3.chromatic.com/iframe.html?args=&id=basics-icon--labels&viewMode=story&shortcuts=false&singleStory=true" width="100%" height="600" />
+With the [`@storybook/icons`](https://www.npmjs.com/package/@storybook/icons) package, you get a set of icons that you can use to customize your UI. Go through the [documentation](https://main--64b56e737c0aeefed9d5e675.chromatic.com/?path=/docs/introduction--docs) to see how the icons look and use it as a reference when writing your addon or defining your Storybook global types.
 
 ## I see a "No Preview" error with a Storybook production build
 


Reviews:
user: login: greptile-apps[bot]
body: <sub>19 file(s) reviewed, 6 comment(s)</sub>
<sub>[Edit PR Review Bot Settings](https://app.greptile.com/review/github) | [Greptile](https://greptile.com?utm_source=greptile_expert&utm_medium=github&utm_campaign=code_reviews&utm_content=storybook_31145)</sub>
state: COMMENTED
author_association: CONTRIBUTOR
submitted_at: 2025-04-16T14:52:51Z
user: login: valentinpalkovic
state: APPROVED
author_association: CONTRIBUTOR
submitted_at: 2025-04-17T06:54:31Z
user: login: kylegach
state: COMMENTED
author_association: CONTRIBUTOR
submitted_at: 2025-04-19T23:39:13Z
user: login: kylegach
state: COMMENTED
author_association: CONTRIBUTOR
submitted_at: 2025-04-19T23:39:29Z
user: login: kylegach
state: COMMENTED
author_association: CONTRIBUTOR
submitted_at: 2025-04-19T23:40:02Z
user: login: kylegach
state: COMMENTED
author_association: CONTRIBUTOR
submitted_at: 2025-04-19T23:41:05Z
user: login: kylegach
state: COMMENTED
author_association: CONTRIBUTOR
submitted_at: 2025-04-19T23:41:37Z
user: login: kylegach
state: COMMENTED
author_association: CONTRIBUTOR
submitted_at: 2025-04-19T23:43:08Z
user: login: kylegach
state: COMMENTED
author_association: CONTRIBUTOR
submitted_at: 2025-04-19T23:44:35Z
user: login: kylegach
body: Great work!

I left some suggestions that ideally would be addressed before merging, but they're not blocking.
state: APPROVED
author_association: CONTRIBUTOR
submitted_at: 2025-04-19T23:57:53Z
user: login: kylegach
state: COMMENTED
author_association: CONTRIBUTOR
submitted_at: 2025-04-20T00:00:59Z
user: login: kylegach
state: COMMENTED
author_association: CONTRIBUTOR
submitted_at: 2025-04-20T00:01:28Z

Review comments:
diff_hunk: @@ -180,64 +136,46 @@ const meta = {
 export default meta;
 ```
 
-```js filename="Button.stories.js" renderer="svelte" language="js"
-import Button from './Button.svelte';
-
-export default {
-  component: Button,
-  parameters: {
-    backgrounds: {
-      options: {
-        // 👇 Override the default `dark` option
-        dark: { name: 'Dark', value: '#000' },
-        // 👇 Add a new option
-        gray: { name: 'Gray', value: '#CCC' },
+```svelte filename="Button.stories.svelte" renderer="svelte" language="js"
+<script module>
+  import { defineMeta } from '@storybook/addon-svelte-csf';
+
+  import Button from './Button.svelte';
+
+  const { Story } = defineMeta({
+    component: Button,
+    parameters: {
+      backgrounds: {
+        options: {
+          // 👇 Override the default `dark` option
+          dark: { name: 'Dark', value: '#000' },
+          // 👇 Add a new option
+          gray: { name: 'Gray', value: '#CCC' },
+        },
       },
     },
-  },
-};
+  });
+</script>
 ```
path: docs/_snippets/addon-backgrounds-options-in-meta.md
user: login: greptile-apps[bot]
body: style: JavaScript and TypeScript Svelte examples are identical except for the language attribute. Consider combining them into a single example
created_at: 2025-04-16T14:49:18Z
author_association: CONTRIBUTOR
diff_hunk: @@ -180,64 +136,46 @@ const meta = {
 export default meta;
 ```
 
-```js filename="Button.stories.js" renderer="svelte" language="js"
-import Button from './Button.svelte';
-
-export default {
-  component: Button,
-  parameters: {
-    backgrounds: {
-      options: {
-        // 👇 Override the default `dark` option
-        dark: { name: 'Dark', value: '#000' },
-        // 👇 Add a new option
-        gray: { name: 'Gray', value: '#CCC' },
+```svelte filename="Button.stories.svelte" renderer="svelte" language="js"
+<script module>
+  import { defineMeta } from '@storybook/addon-svelte-csf';
+
+  import Button from './Button.svelte';
+
+  const { Story } = defineMeta({
path: docs/_snippets/addon-backgrounds-options-in-meta.md
user: login: greptile-apps[bot]
body: logic: Story is destructured but never used in the example
created_at: 2025-04-16T14:49:19Z
author_association: CONTRIBUTOR
diff_hunk: @@ -22,34 +22,59 @@ const meta: Meta<Button> = {
 export default meta;
 ```
 
-```js filename="Button.stories.js|jsx" renderer="common" language="js"
-import { Button } from './Button';
-
-// To apply a grid to all stories of Button:
-export default {
-  component: Button,
-  parameters: {
-    backgrounds: {
-      grid: {
-        cellSize: 20,
-        opacity: 0.5,
-        cellAmount: 5,
-        offsetX: 16, // Default is 0 if story has 'fullscreen' layout, 16 if layout is 'padded'
-        offsetY: 16, // Default is 0 if story has 'fullscreen' layout, 16 if layout is 'padded'
+```svelte filename="Button.stories.svelte" renderer="svelte" language="js"
+<script module>
+  import { defineMeta } from '@storybook/addon-svelte-csf';
+
+  import Button from './Button.svelte';
+
+  // To apply a set of backgrounds to all stories of Button:
+  const { Story } = defineMeta({
+    component: Button,
+    parameters: {
+      backgrounds: {
+        grid: {
+          cellSize: 20,
+          opacity: 0.5,
+          cellAmount: 5,
+          offsetX: 16, // Default is 0 if story has 'fullscreen' layout, 16 if layout is 'padded'
+          offsetY: 16, // Default is 0 if story has 'fullscreen' layout, 16 if layout is 'padded'
+        },
       },
     },
-  },
-};
+  });
+</script>
 ```
 
-```ts filename="Button.stories.ts|tsx" renderer="common" language="ts-4-9"
-// Replace your-framework with the name of your framework
-import type { Meta } from '@storybook/your-framework';
+```svelte filename="Button.stories.svelte" renderer="svelte" language="ts"
+<script module>
+  import { defineMeta } from '@storybook/addon-svelte-csf';
+
+  import Button from './Button.svelte';
+
+  // To apply a set of backgrounds to all stories of Button:
+  const { Story } = defineMeta({
+    component: Button,
+    parameters: {
+      backgrounds: {
+        grid: {
+          cellSize: 20,
+          opacity: 0.5,
+          cellAmount: 5,
+          offsetX: 16, // Default is 0 if story has 'fullscreen' layout, 16 if layout is 'padded'
+          offsetY: 16, // Default is 0 if story has 'fullscreen' layout, 16 if layout is 'padded'
+        },
+      },
+    },
+  });
+</script>
+```
path: docs/_snippets/addon-backgrounds-grid.md
user: login: greptile-apps[bot]
body: style: Svelte example is duplicated with only the language tag different - consider combining into a single example with a note about TypeScript support
created_at: 2025-04-16T14:49:20Z
author_association: CONTRIBUTOR
diff_hunk: @@ -1,76 +1,3 @@
-```ts filename="MyComponent.stories.ts" renderer="angular" language="ts" tabTitle="Without globals API"
-import type { Meta, StoryObj } from '@storybook/angular';
-import { INITIAL_VIEWPORTS } from '@storybook/addon-viewport';
-
-import { MyComponent } from './MyComponent.component';
-
-const meta: Meta<MyComponent> = {
-  component: MyComponent,
-  parameters: {
-    viewport: {
-      //👇 Set available viewports for every story in the file
-      viewports: INITIAL_VIEWPORTS,
-    },
-  },
-};
-
-export default meta;
-```
-
-```js filename="MyComponent.stories.js|jsx" renderer="react" language="js" tabTitle="Without globals API"
-import { INITIAL_VIEWPORTS } from '@storybook/addon-viewport';
-
-import { MyComponent } from './MyComponent';
-
-export default {
-  component: MyComponent,
-  parameters: {
-    viewport: {
-      //👇 Set available viewports for every story in the file
-      viewports: INITIAL_VIEWPORTS,
-    },
-  },
-};
-```
-
-```ts filename="MyComponent.stories.ts|tsx" renderer="react" language="ts-4-9" tabTitle="Without globals API"
-import type { Meta, StoryObj } from '@storybook/react';
-import { INITIAL_VIEWPORTS } from '@storybook/addon-viewport';
-
-import { MyComponent } from './MyComponent';
-
-const meta = {
-  component: MyComponent,
-  parameters: {
-    viewport: {
-      //👇 Set available viewports for every story in the file
-      viewports: INITIAL_VIEWPORTS,
-    },
-  },
-} satisfies Meta<typeof MyComponent>;
-
-export default meta;
-```
-
-```ts filename="MyComponent.stories.ts|tsx" renderer="react" language="ts" tabTitle="Without globals API"
-import type { Meta, StoryObj } from '@storybook/react';
-import { INITIAL_VIEWPORTS } from '@storybook/addon-viewport';
-
-import { MyComponent } from './MyComponent';
-
-const meta: Meta<typeof MyComponent> = {
-  component: MyComponent,
-  parameters: {
-    viewport: {
-      //👇 Set available viewports for every story in the file
-      viewports: INITIAL_VIEWPORTS,
-    },
-  },
-};
-
-export default meta;
-```
-
 ```js filename="MyComponent.stories.js|jsx" renderer="solid" language="js" tabTitle="Without globals API"
 import { INITIAL_VIEWPORTS } from '@storybook/addon-viewport';
path: docs/_snippets/addon-viewport-configuration-in-meta.md
user: login: greptile-apps[bot]
body: syntax: Import path should be 'storybook/viewport' for consistency with other examples
created_at: 2025-04-16T14:50:23Z
author_association: CONTRIBUTOR
diff_hunk: @@ -1,73 +1,5 @@
-```js filename=".storybook/preview.js" renderer="common" language="js" tabTitle="Without globals API"
-import { MINIMAL_VIEWPORTS } from '@storybook/addon-viewport';
-
-const kindleViewports = {
-  kindleFire2: {
-    name: 'Kindle Fire 2',
-    styles: {
-      width: '600px',
-      height: '963px',
-    },
-  },
-  kindleFireHD: {
-    name: 'Kindle Fire HD',
-    styles: {
-      width: '533px',
-      height: '801px',
-    },
-  },
-};
-
-export default {
-  parameters: {
-    viewport: {
-      viewports: {
-        ...MINIMAL_VIEWPORTS,
-        ...kindleViewports,
-      },
-    },
-  },
-};
-```
-
-```ts filename=".storybook/preview.ts" renderer="common" language="ts" tabTitle="Without globals API"
-// Replace your-renderer with the renderer you are using (e.g., react, vue3, angular, etc.)
-import { Preview } from '@storybook/your-renderer';
-import { MINIMAL_VIEWPORTS } from '@storybook/addon-viewport';
-
-const kindleViewports = {
-  kindleFire2: {
-    name: 'Kindle Fire 2',
-    styles: {
-      width: '600px',
-      height: '963px',
-    },
-  },
-  kindleFireHD: {
-    name: 'Kindle Fire HD',
-    styles: {
-      width: '533px',
-      height: '801px',
-    },
-  },
-};
-
-const preview: Preview = {
-  parameters: {
-    viewport: {
-      viewports: {
-        ...MINIMAL_VIEWPORTS,
-        ...kindleViewports,
-      },
-    },
-  },
-};
-
-export default preview;
-```
-
-```js filename=".storybook/preview.js" renderer="common" language="js" tabTitle="With globals API"
-import { MINIMAL_VIEWPORTS } from '@storybook/addon-viewport';
+```js filename=".storybook/preview.js" renderer="common" language="js"
+import { MINIMAL_VIEWPORTS } from 'storybook/viewport';
path: docs/_snippets/addon-viewport-add-viewport-in-preview.md
user: login: greptile-apps[bot]
body: logic: Import path changed from '@storybook/addon-viewport' to 'storybook/viewport' - verify this is the correct new import path
created_at: 2025-04-16T14:50:49Z
author_association: CONTRIBUTOR
diff_hunk: @@ -238,54 +158,31 @@ Type:
   [key: string]: {
     name: string;
     styles: { height: string, width: string };
-    type: 'desktop' | 'mobile' | 'tablet';
+    type: 'desktop' | 'mobile' | 'tablet' | 'other';
   };
 }
 ```
 
 Specify the available viewports. See [usage example](#add-new-devices) above. The `width` and `height` values must include the unit, e.g. `'320px'`.
 
-<Callout variant="warning" icon="🆕">
-
-  **With the [`globals` API](#globals-api)**
-
-  #### `options`
-
-  Type:
-
-  ```ts
-  {
-    [key: string]: {
-      name: string;
-      styles: { height: string, width: string };
-      type: 'desktop' | 'mobile' | 'tablet' | 'other';
-    };
-  }
-  ```
-
-  Replaces: [`viewports`](#viewports)
-
-  Specify the available viewports. See [usage example](#add-new-devices) above. The `width` and `height` values must include the unit, e.g. `'320px'`.
-
-</Callout>
 
 ### Exports
 
-This addon contributes the following exports to Storybook:
+This module contributes the following exports to Storybook:
 
 ```js
-import { INITIAL_VIEWPORTS, MINIMAL_VIEWPORTS } from '@storybook/addon-viewport';
+import { INITIAL_VIEWPORTS, MINIMAL_VIEWPORTS } from 'storybook/viewport';
path: docs/essentials/viewport.mdx
user: login: greptile-apps[bot]
body: logic: Import path should be '@storybook/addon-viewport' instead of 'storybook/viewport'

```suggestion
import { INITIAL_VIEWPORTS, MINIMAL_VIEWPORTS } from '@storybook/addon-viewport';
```
created_at: 2025-04-16T14:52:11Z
author_association: CONTRIBUTOR
diff_hunk: @@ -5,108 +5,58 @@ sidebar:
   title: Backgrounds
 ---
 
-The backgrounds toolbar addon allows you to set the background color on which the story renders in the UI:
+The backgrounds toolbar item allows you to set the background color on which the story renders in the UI:
 
 <Video src="../_assets/essentials/addon-backgrounds-optimized.mp4" />
 
-<Callout variant="warning" icon="🆕" id="globals-api">
-  **`globals` API**
-
-  This addon has been updated to use the `globals` API when the [`backgroundsStoryGlobals` feature flag](../api/main-config/main-config-features.mdx#backgroundsstoryglobals) is enabled. With `globals`, when you specify a background value for a story, it cannot be overridden from the toolbar, which ensures a consistent experience while navigating between stories. This will be the default behavior and API in Storybook 9.
-</Callout>
-
 ## Configuration
 
 By default, the backgrounds toolbar includes a light and dark background.
path: docs/essentials/backgrounds.mdx
user: login: kylegach
body: ```suggestion
By default, the backgrounds toolbar item includes a light and dark background.
```
created_at: 2025-04-19T23:39:12Z
author_association: CONTRIBUTOR
diff_hunk: @@ -5,108 +5,58 @@ sidebar:
   title: Backgrounds
 ---
 
-The backgrounds toolbar addon allows you to set the background color on which the story renders in the UI:
+The backgrounds toolbar item allows you to set the background color on which the story renders in the UI:
 
 <Video src="../_assets/essentials/addon-backgrounds-optimized.mp4" />
 
-<Callout variant="warning" icon="🆕" id="globals-api">
-  **`globals` API**
-
-  This addon has been updated to use the `globals` API when the [`backgroundsStoryGlobals` feature flag](../api/main-config/main-config-features.mdx#backgroundsstoryglobals) is enabled. With `globals`, when you specify a background value for a story, it cannot be overridden from the toolbar, which ensures a consistent experience while navigating between stories. This will be the default behavior and API in Storybook 9.
-</Callout>
-
 ## Configuration
 
 By default, the backgrounds toolbar includes a light and dark background.
 
-But you're not restricted to these backgrounds. You can configure your own set of colors with the `backgrounds` [parameter](../writing-stories/parameters.mdx) in your [`.storybook/preview.js`](../configure/index.mdx#configure-story-rendering).
+But you're not restricted to these backgrounds. You can configure your own set of colors with the `backgrounds` [parameter](../writing-stories/parameters.mdx) in your [`.storybook/preview.js|ts`](../configure/index.mdx#configure-story-rendering).
 
-You can define the available background colors using the [`values` property](#values) and set the initial background color using the [`default` property](#default):
+You can define the available background colors using the [`options` property](#options) and set the initial background color using the `initialGlobals` property:
 
 {/* prettier-ignore-start */}
 
-<CodeSnippets path="addon-backgrounds-values-in-preview.md" />
+<CodeSnippets path="addon-backgrounds-options-in-preview.md" />
 
 {/* prettier-ignore-end */}
 
-<Callout variant="warning" icon="🆕">
-
-  **With the [`globals` API](#globals-api)**
-
-  When using the `globals` API, you must define the available background colors using the [`options` property](#options). The initial background color can be set using the `initialGlobals` property, which accepts the same object properties as the [`globals`](#globals) for this addon.
-
-  {/* prettier-ignore-start */}
-
-  <CodeSnippets path="addon-backgrounds-options-in-preview.md" />
-
-  {/* prettier-ignore-end */}
-
-</Callout>
-
 ## Defining the background for a story
 
-The Backgrounds addon enables you to change the background color applied to a story by selecting from the list of predefined background colors in the toolbar. If needed, you can set a story to default to a specific background color, by using the `parameters.backgrounds.default` parameter:
+The Backgrounds module enables you to change the background color applied to a story by selecting from the list of predefined background colors in the toolbar. If needed, you can set a story to default to a specific background color, by using the `globals` option:
path: docs/essentials/backgrounds.mdx
user: login: kylegach
body: ```suggestion
The backgrounds toolbar item enables you to change the background color applied to a story by selecting from the list of predefined background colors in the toolbar. If needed, you can set a story to default to a specific background color, by using the `globals` option:
```
created_at: 2025-04-19T23:39:29Z
author_association: CONTRIBUTOR
diff_hunk: @@ -115,7 +65,7 @@ If you want to turn off backgrounds in a story, you can do so by configuring the
 
 ## Grid
 
-The Backgrounds toolbar also includes a Grid selector, which allows you to quickly see if your components are aligned.
+The backgrounds toolbar also includes a Grid selector, which allows you to quickly see if your components are aligned.
path: docs/essentials/backgrounds.mdx
user: login: kylegach
body: ```suggestion
The backgrounds toolbar item also includes a Grid selector, which allows you to quickly see if your components are aligned.
```
created_at: 2025-04-19T23:40:02Z
author_association: CONTRIBUTOR
diff_hunk: @@ -127,55 +77,31 @@ You don't need additional configuration to get started. But its properties are f
 
 ## API
 
-<Callout variant="warning" icon="🆕">
-
-  **With the [`globals` API](#globals-api)**
+### Globals
 
-  ### Globals
+This module contributes the following globals to Storybook, under the `backgrounds` namespace:
 
-  This addon contributes the following globals to Storybook, under the `backgrounds` namespace:
-
-  #### `grid`
-
-  Type: `boolean`
+#### `grid`
 
-  Whether the [grid](#grid) is displayed.
+Type: `boolean`
 
-  #### `value`
+Whether the [grid](#grid) is displayed.
 
-  Type: `string`
+#### `value`
 
-  When set, the background color is applied and cannot be changed using the toolbar. Must match the key of one of the [available colors](#options).
+Type: `string`
 
-</Callout>
+When set, the background color is applied and cannot be changed using the toolbar. Must match the key of one of the [available colors](#options).
 
 ### Parameters
 
-This addon contributes the following [parameters](../writing-stories/parameters.mdx) to Storybook, under the `backgrounds` namespace:
-
-#### `default`
-
-Type: `string`
-
-Required: See description
-
-Default background color. Must match the `name` property of one of the available colors defined in the [`values`](#values) (or [`options`](#options)) property.
+This module contributes the following [parameters](../writing-stories/parameters.mdx) to Storybook, under the `backgrounds` namespace:
 
 #### `disable`
path: docs/essentials/backgrounds.mdx
user: login: kylegach
body: TODO: Check that this is truly `disable` and not `disabled` (as it used to be).
created_at: 2025-04-19T23:41:05Z
author_association: CONTRIBUTOR
diff_hunk: @@ -5,47 +5,25 @@ sidebar:
   title: Viewport
 ---
 
-<YouTubeCallout id="uydF1ltw7-g" title="Stop resizing your browser — Storybook viewport" />
-
-The Viewport toolbar item allows you to adjust the dimensions of the iframe your story is rendered in. It makes it easy to develop responsive UIs.
+The viewport toolbar item allows you to adjust the dimensions of the iframe your story is rendered in. It makes it easy to develop responsive UIs.
 
 <Video src="../_assets/essentials/addon-viewports-optimized.mp4" />
 
-<Callout variant="warning" icon="🆕" id="globals-api">
-  **`globals` API**
-
-  This addon has been updated to use the `globals` API when the [`viewportStoryGlobals` feature flag](../api/main-config/main-config-features.mdx#viewportstoryglobals) is enabled. With `globals`, when you specify a viewport for a story, it cannot be overridden from the toolbar, which ensures a consistent experience while navigating between stories. This will be the default behavior and API in Storybook 9.
-</Callout>
-
 ## Configuration
 
-Out of the box, the Viewport addon offers you a standard set of viewports that you can use. If you want to change the default set of viewports, you can configure your own viewports with the `viewport` [parameter](../writing-stories/parameters.mdx) in your [`.storybook/preview.js`](../configure/index.mdx#configure-story-rendering).
+Out of the box, the Viewport module offers you a standard set of viewports that you can use. If you want to change the default set of viewports, you can configure your own viewports with the `viewport` [parameter](../writing-stories/parameters.mdx) in your [`.storybook/preview.js|ts`](../configure/index.mdx#configure-story-rendering).
path: docs/essentials/viewport.mdx
user: login: kylegach
body: ```suggestion
Out of the box, the viewport toolbar item offers you a standard set of viewports that you can use. If you want to change the default set of viewports, you can configure your own viewports with the `viewport` [parameter](../writing-stories/parameters.mdx) in your [`.storybook/preview.js|ts`](../configure/index.mdx#configure-story-rendering).
```
created_at: 2025-04-19T23:41:37Z
author_association: CONTRIBUTOR
diff_hunk: @@ -5,47 +5,25 @@ sidebar:
   title: Viewport
 ---
 
-<YouTubeCallout id="uydF1ltw7-g" title="Stop resizing your browser — Storybook viewport" />
-
-The Viewport toolbar item allows you to adjust the dimensions of the iframe your story is rendered in. It makes it easy to develop responsive UIs.
+The viewport toolbar item allows you to adjust the dimensions of the iframe your story is rendered in. It makes it easy to develop responsive UIs.
 
 <Video src="../_assets/essentials/addon-viewports-optimized.mp4" />
 
-<Callout variant="warning" icon="🆕" id="globals-api">
-  **`globals` API**
-
-  This addon has been updated to use the `globals` API when the [`viewportStoryGlobals` feature flag](../api/main-config/main-config-features.mdx#viewportstoryglobals) is enabled. With `globals`, when you specify a viewport for a story, it cannot be overridden from the toolbar, which ensures a consistent experience while navigating between stories. This will be the default behavior and API in Storybook 9.
-</Callout>
-
 ## Configuration
 
-Out of the box, the Viewport addon offers you a standard set of viewports that you can use. If you want to change the default set of viewports, you can configure your own viewports with the `viewport` [parameter](../writing-stories/parameters.mdx) in your [`.storybook/preview.js`](../configure/index.mdx#configure-story-rendering).
+Out of the box, the Viewport module offers you a standard set of viewports that you can use. If you want to change the default set of viewports, you can configure your own viewports with the `viewport` [parameter](../writing-stories/parameters.mdx) in your [`.storybook/preview.js|ts`](../configure/index.mdx#configure-story-rendering).
 
-You can define the available viewports using the [`viewports` property](#viewports) and set the initial viewport using the [`defaultViewport` property](#defaultViewport):
+You can define the available viewports using the [`options` property](#options) and set the initial viewport using the `initialGlobals` property:
 
 {/* prettier-ignore-start */}
 
-<CodeSnippets path="addon-viewport-viewports-in-preview.md" />
+<CodeSnippets path="addon-viewport-options-in-preview.md" />
 
 {/* prettier-ignore-end */}
 
-<Callout variant="warning" icon="🆕">
-
-  **With the [`globals` API](#globals-api)**
-
-  When using the `globals` API, you must define the available viewports using the [`options` property](#options). The initial viewport can be set using the `initialGlobals` property, which accepts the same object properties as the [`globals`](#globals) for this addon.
-
-  {/* prettier-ignore-start */}
-
-  <CodeSnippets path="addon-viewport-options-in-preview.md" />
-
-  {/* prettier-ignore-end */}
-
-</Callout>
-
 ### Use a detailed set of devices
 
-By default, the Viewport addon will use a minimal set of viewports, which enables you to test your UI in common responsive scenarios. These are also available in the [`MINIMAL_VIEWPORTS` export](#minimal_viewports) and include the following devices:
+By default, the Viewport module will use a minimal set of viewports, which enables you to test your UI in common responsive scenarios. These are also available in the [`MINIMAL_VIEWPORTS` export](#minimal_viewports) and include the following devices:
path: docs/essentials/viewport.mdx
user: login: kylegach
body: ```suggestion
By default, the viewport toolbar item will use a minimal set of viewports, which enables you to test your UI in common responsive scenarios. These are also available in the [`MINIMAL_VIEWPORTS` export](#minimal_viewports) and include the following devices:
```
created_at: 2025-04-19T23:43:08Z
author_association: CONTRIBUTOR
diff_hunk: @@ -173,63 +123,33 @@ If you need, you can edit these on the shortcuts page.
 * Previous viewport: <kbd>alt</kbd> + <kbd>shift</kbd> + <kbd>v</kbd>
 * Reset viewport: <kbd>alt</kbd> + <kbd>control</kbd> + <kbd>v</kbd>
 
-<Callout variant="warning" icon="🆕">
+### Globals
 
-  **With the [`globals` API](#globals-api)**
+This module contributes the following globals to Storybook, under the `viewport` namespace:
 
-  ### Globals
+#### `value`
 
-  This addon contributes the following globals to Storybook, under the `viewport` namespace:
-
-  #### `value`
-
-  Type: `string`
-
-  When set, the viewport is applied and cannot be changed using the toolbar. Must match the key of one of the [available viewports](#options).
+Type: `string`
 
-  #### `isRotated`
+When set, the viewport is applied and cannot be changed using the toolbar. Must match the key of one of the [available viewports](#options).
 
-  Type: `boolean`
+#### `isRotated`
 
-  When true the viewport applied will be rotated 90°, e.g. it will rotate from portrait to landscape orientation.
+Type: `boolean`
 
-</Callout>
+When true, the viewport applied will be rotated 90°, e.g., from portrait to landscape orientation.
 
 ### Parameters
 
-This addon contributes the following [parameters](../writing-stories/parameters.mdx) to Storybook, under the `viewport` namespace:
-
-#### `defaultOrientation`
-
-Type: `'portrait' | 'landscape'`
-
-Default: `'portrait'`
-
-Specifies the default orientation used when viewing a story. Only available if you haven't enabled the [globals API](#customizing-viewports-with-globals).
-
-#### `defaultViewport`
-
-Type: `string`
-
-Specifies the default viewport used when viewing a story. Must match a key in the [`viewports`](#viewports) (or [`options`](#options)) object.
+This module contributes the following [parameters](../writing-stories/parameters.mdx) to Storybook, under the `viewport` namespace:
 
 #### `disable`
path: docs/essentials/viewport.mdx
user: login: kylegach
body: TODO: Check that this is truly `disable` and not `disabled` (as it used to be).
created_at: 2025-04-19T23:44:35Z
author_association: CONTRIBUTOR
diff_hunk: @@ -127,55 +77,31 @@ You don't need additional configuration to get started. But its properties are f
 
 ## API
 
-<Callout variant="warning" icon="🆕">
-
-  **With the [`globals` API](#globals-api)**
+### Globals
 
-  ### Globals
+This module contributes the following globals to Storybook, under the `backgrounds` namespace:
 
-  This addon contributes the following globals to Storybook, under the `backgrounds` namespace:
-
-  #### `grid`
-
-  Type: `boolean`
+#### `grid`
 
-  Whether the [grid](#grid) is displayed.
+Type: `boolean`
 
-  #### `value`
+Whether the [grid](#grid) is displayed.
 
-  Type: `string`
+#### `value`
 
-  When set, the background color is applied and cannot be changed using the toolbar. Must match the key of one of the [available colors](#options).
+Type: `string`
 
-</Callout>
+When set, the background color is applied and cannot be changed using the toolbar. Must match the key of one of the [available colors](#options).
 
 ### Parameters
 
-This addon contributes the following [parameters](../writing-stories/parameters.mdx) to Storybook, under the `backgrounds` namespace:
-
-#### `default`
-
-Type: `string`
-
-Required: See description
-
-Default background color. Must match the `name` property of one of the available colors defined in the [`values`](#values) (or [`options`](#options)) property.
+This module contributes the following [parameters](../writing-stories/parameters.mdx) to Storybook, under the `backgrounds` namespace:
 
 #### `disable`
path: docs/essentials/backgrounds.mdx
user: login: kylegach
body: Confirmed: https://github.com/storybookjs/storybook/blob/next/code/core/src/backgrounds/types.ts#L24
created_at: 2025-04-20T00:00:59Z
author_association: CONTRIBUTOR
diff_hunk: @@ -173,63 +123,33 @@ If you need, you can edit these on the shortcuts page.
 * Previous viewport: <kbd>alt</kbd> + <kbd>shift</kbd> + <kbd>v</kbd>
 * Reset viewport: <kbd>alt</kbd> + <kbd>control</kbd> + <kbd>v</kbd>
 
-<Callout variant="warning" icon="🆕">
+### Globals
 
-  **With the [`globals` API](#globals-api)**
+This module contributes the following globals to Storybook, under the `viewport` namespace:
 
-  ### Globals
+#### `value`
 
-  This addon contributes the following globals to Storybook, under the `viewport` namespace:
-
-  #### `value`
-
-  Type: `string`
-
-  When set, the viewport is applied and cannot be changed using the toolbar. Must match the key of one of the [available viewports](#options).
+Type: `string`
 
-  #### `isRotated`
+When set, the viewport is applied and cannot be changed using the toolbar. Must match the key of one of the [available viewports](#options).
 
-  Type: `boolean`
+#### `isRotated`
 
-  When true the viewport applied will be rotated 90°, e.g. it will rotate from portrait to landscape orientation.
+Type: `boolean`
 
-</Callout>
+When true, the viewport applied will be rotated 90°, e.g., from portrait to landscape orientation.
 
 ### Parameters
 
-This addon contributes the following [parameters](../writing-stories/parameters.mdx) to Storybook, under the `viewport` namespace:
-
-#### `defaultOrientation`
-
-Type: `'portrait' | 'landscape'`
-
-Default: `'portrait'`
-
-Specifies the default orientation used when viewing a story. Only available if you haven't enabled the [globals API](#customizing-viewports-with-globals).
-
-#### `defaultViewport`
-
-Type: `string`
-
-Specifies the default viewport used when viewing a story. Must match a key in the [`viewports`](#viewports) (or [`options`](#options)) object.
+This module contributes the following [parameters](../writing-stories/parameters.mdx) to Storybook, under the `viewport` namespace:
 
 #### `disable`
path: docs/essentials/viewport.mdx
user: login: kylegach
body: Confirmed: https://github.com/storybookjs/storybook/blob/next/code/core/src/viewport/types.ts#L43
created_at: 2025-04-20T00:01:28Z
author_association: CONTRIBUTOR

PR comments:
user: login: nx-cloud[bot]
created_at: 2025-04-16T14:55:12Z
body: 
View your [CI Pipeline Execution ↗](https://cloud.nx.app/cipes/680457082d4c6601c6954bfa?utm_source=pull-request&utm_medium=comment) for commit 5c34174b921af8888a0a4ef43fe5f6b2d2ca10e4.

| Command | Status | Duration | Result |
|---------|--------|----------:|--------|
| `nx run-many -t build --parallel=3` | ✅ Succeeded | 1m 34s | [View ↗](https://cloud.nx.app/runs/6eBEUmoSQK?utm_source=pull-request&utm_medium=comment) |

---

☁️ [Nx Cloud](https://cloud.nx.app?utm_source=pull-request&utm_medium=comment) last updated this comment at `2025-04-20 02:09:43` UTC

<!-- NX_CLOUD_APP_COMMENT_END -->
author_association: NONE
user: login: kylegach
created_at: 2025-04-20T02:09:26Z
body: I went ahead and applied my suggestions and merged, to avoid conflicts with other work (e.g. #31158).
author_association: CONTRIBUTOR