Merge pull request #21973 from storybookjs/chore_docs_update_install_instructions

Chore: (Docs) Standardize install instructions in documentation

Author: jonniebigodes

code/frameworks/angular/README.md

@@ -27,12 +27,12 @@ So you can develop UI components in isolation without worrying about app specifi
 
 ```sh
 cd my-angular-app
-npx storybook init
+npx storybook@latest init
 ```
 
 ## Setup Storybook for your Angular projects
 
-Storybook supports Angular multi-project workspace. You can setup Storybook for each project in the workspace. When running `npx storybook init` you will be asked for which project Storybook should be set up. Essentially, during initialization, the `.storybook` folder will be created and the `angular.json` will be edited to add the Storybook configuration for the selected project. The configuration looks approximately like this:
+Storybook supports Angular multi-project workspace. You can setup Storybook for each project in the workspace. When running `npx storybook@latest init` you will be asked for which project Storybook should be set up. Essentially, during initialization, the `.storybook` folder will be created and the `angular.json` will be edited to add the Storybook configuration for the selected project. The configuration looks approximately like this:
 
 ```json
 // angular.json

code/frameworks/ember/README.md

@@ -12,7 +12,7 @@ So you can develop UI components in isolation without worrying about app specifi
 
 ```sh
 cd my-ember-app
-npx storybook init
+npx storybook@latest init
 ```
 
 For more information visit: [storybook.js.org](https://storybook.js.org)

code/frameworks/html-webpack5/README.md

@@ -14,7 +14,7 @@ So you can develop UI components in isolation without worrying about app specifi
 
 ```sh
 cd my-app
-npx storybook init -t html
+npx storybook@latest init -t html
 ```
 
 For more information visit: [storybook.js.org](https://storybook.js.org)

code/frameworks/preact-webpack5/README.md

@@ -12,7 +12,7 @@ So you can develop UI components in isolation without worrying about app specifi
 
 ```sh
 cd my-preact-app
-npx storybook init
+npx storybook@latest init
 ```
 
 For more information visit: [storybook.js.org](https://storybook.js.org)

code/frameworks/react-webpack5/README.md

@@ -12,7 +12,7 @@ So you can develop UI components in isolation without worrying about app specifi
 
 ```sh
 cd my-react-app
-npx storybook init
+npx storybook@latest init
 ```
 
 For more information visit: [storybook.js.org](https://storybook.js.org)

code/frameworks/server-webpack5/README.md

@@ -14,7 +14,7 @@ So you can develop UI components in isolation without worrying about app specifi
 
 ```sh
 cd my-app
-npx storybook init -t server
+npx storybook@latest init -t server
 ```
 
 To configure the server that Storybook will connect to, export a global parameter `parameters.server.url` in `.storybook/preview.js`:

code/frameworks/svelte-webpack5/README.md

@@ -12,7 +12,7 @@ So you can develop UI components in isolation without worrying about app specifi
 
 ```sh
 cd my-svelte-app
-npx storybook init
+npx storybook@latest init
 ```
 
 For more information visit: [storybook.js.org](https://storybook.js.org)

code/frameworks/vue-vite/README.md

@@ -12,7 +12,7 @@ So you can develop UI components in isolation without worrying about app specifi
 
 ```sh
 cd my-vue-app
-npx storybook init
+npx storybook@latest init
 ```
 
 For more information visit: [storybook.js.org](https://storybook.js.org)

code/frameworks/vue-webpack5/README.md

@@ -12,7 +12,7 @@ So you can develop UI components in isolation without worrying about app specifi
 
 ```sh
 cd my-vue-app
-npx storybook init
+npx storybook@latest init
 ```
 
 For more information visit: [storybook.js.org](https://storybook.js.org)

code/frameworks/vue3-vite/README.md

@@ -12,7 +12,7 @@ So you can develop UI components in isolation without worrying about app specifi
 
 ```sh
 cd my-vue3-app
-npx storybook init
+npx storybook@latest init
 ```
 
 For more information visit: [storybook.js.org](https://storybook.js.org)

code/frameworks/vue3-webpack5/README.md

@@ -12,7 +12,7 @@ So you can develop UI components in isolation without worrying about app specifi
 
 ```sh
 cd my-vue3-app
-npx storybook init
+npx storybook@latest init
 ```
 
 For more information visit: [storybook.js.org](https://storybook.js.org)

code/frameworks/web-components-webpack5/README.md

@@ -14,7 +14,7 @@ So you can develop UI components in isolation without worrying about app specifi
 
 ```sh
 cd my-app
-npx storybook init -t web_components
+npx storybook@latest init -t web_components
 ```
 
 For more information visit: [storybook.js.org](https://storybook.js.org)

docs/addons/writing-addons.md

@@ -66,7 +66,7 @@ We'll need to add the necessary dependencies and make some adjustments. Run the
 Initialize a local Storybook instance to allow you to test your addon.
 
 ```shell
-npx storybook init
+npx storybook@latest init
 ```
 
 <div class="aside">

docs/builders/overview.md

@@ -8,12 +8,12 @@ Storybook, at its core, is powered by builders such as Webpack and Vite. These b
 
 ## CLI basics
 
-Before diving into setting up Storybook's builders, let's look at how the CLI configures them. When you initialize Storybook (via `npx storybook init`), the CLI automatically detects which builder to use based on your application. For example, if you're working with Vite, it will install the Vite builder. If you're working with Webpack, it installs the Webpack 5 builder by default.
+Before diving into setting up Storybook's builders, let's look at how the CLI configures them. When you initialize Storybook (via `npx storybook@latest init`), the CLI automatically detects which builder to use based on your application. For example, if you're working with Vite, it will install the Vite builder. If you're working with Webpack, it installs the Webpack 5 builder by default.
 
 Additionally, you can also provide a flag to Storybook's CLI and specify the builder you want to use:
 
 ```shell
-npx storybook init --builder <webpack5 | vite>
+npx storybook@latest init --builder <webpack5 | vite>
 ```
 
 ## Manual setup

docs/builders/vite.md

@@ -9,7 +9,7 @@ Storybook Vite builder bundles your components and stories with [Vite](https://v
 
 ## Setup
 
-If you ran `npx storybook init` to include Storybook in your Vite application, the builder is already installed and configured for you. If you want, you can also opt into it manually.
+If you ran `npx storybook@latest init` to include Storybook in your Vite application, the builder is already installed and configured for you. If you want, you can also opt into it manually.
 
 Run the following command to install the builder.
 

docs/get-started/installation-problems/angular.mdx

@@ -1,13 +1,13 @@
 - Add the `--type angular` flag to the installation command to set up Storybook manually:
 
   ```shell
-  npx storybook init --type angular
+  npx storybook@latest init --type angular
   ```
 
 - Storybook's CLI provides support for [Yarn](https://yarnpkg.com/), [npm](https://www.npmjs.com/), and [pnpm](https://pnpm.io/) package managers. If you have Yarn installed in your environment but prefer to use another as your default package manager add the `--package-manager` flag to your installation command. For example:
 
   ```shell
-  npx storybook init --package-manager=npm
+  npx storybook@latest init --package-manager=npm
   ```
 
 - Storybook supports Webpack 5 out of the box. If you're upgrading from a previous version, run the following command to enable it:

docs/get-started/installation-problems/ember.mdx

@@ -1,7 +1,7 @@
 - Add the `--type ember` flag to the installation command to set up Storybook manually:
 
   ```shell
-  npx storybook init --type ember
+  npx storybook@latest init --type ember
   ```
 
 - During the install process, if you get the following warning message:
@@ -17,7 +17,7 @@ Update the [`@storybook/ember-cli-storybook`](https://www.npmjs.com/package/@sto
 - Storybook's CLI provides support for [Yarn](https://yarnpkg.com/), [npm](https://www.npmjs.com/), and [pnpm](https://pnpm.io/) package managers. If you have Yarn installed in your environment but prefer to use another as your default package manager add the `--package-manager` flag to your installation command. For example:
 
   ```shell
-  npx storybook init --package-manager=npm
+  npx storybook@latest init --package-manager=npm
   ```
 
 - For other installation issues, check the [Ember README](https://github.com/storybookjs/storybook/tree/next/code/frameworks/ember) for additional instructions.

docs/get-started/installation-problems/html.mdx

@@ -1,7 +1,7 @@
 - Add the `--type html` flag to the installation command to set up Storybook manually:
 
   ```shell
-  npx storybook init --type html
+npx storybook@latest init --type html
   ```
 
 - For other installation issues, check the React README files for additional instructions:

docs/get-started/installation-problems/preact.mdx

@@ -1,13 +1,13 @@
 - Add the `--type preact` flag to the installation command to set up Storybook manually:
 
   ```shell
-  npx storybook init --type preact
+  npx storybook@latest init --type preact
   ```
 
 - Storybook's CLI provides support for [Yarn](https://yarnpkg.com/), [npm](https://www.npmjs.com/), and [pnpm](https://pnpm.io/) package managers. If you have Yarn installed in your environment but prefer to use another as your default package manager add the `--package-manager` flag to your installation command. For example:
 
   ```shell
-  npx storybook init --package-manager=npm
+  npx storybook@latest init --package-manager=npm
   ```
 
 - For other installation issues, check the [Preact README](https://github.com/storybookjs/storybook/tree/next/code/frameworks/preact-webpack5) for additional instructions.

docs/get-started/installation-problems/qwik.mdx

@@ -1,11 +1,11 @@
 - Add the `--type qwik` flag to the installation command to set up Storybook manually:
 
   ```shell
-  npx storybook init --type qwik
+  npx storybook@latest init --type qwik
   ```
 
 - Storybook's CLI provides support for [Yarn](https://yarnpkg.com/), [npm](https://www.npmjs.com/), and [pnpm](https://pnpm.io/) package managers. If you have Yarn installed in your environment but prefer to use another as your default package manager add the `--package-manager` flag to your installation command. For example:
 
   ```shell
-  npx storybook init --package-manager=npm
+  npx storybook@latest init --package-manager=npm
   ```

docs/get-started/installation-problems/react.mdx

@@ -1,13 +1,13 @@
 - Add the `--type react` flag to the installation command to set up Storybook manually:
 
   ```shell
-  npx storybook init --type react
+  npx storybook@latest init --type react
   ```
 
 - Storybook's CLI provides support for [Yarn](https://yarnpkg.com/), [npm](https://www.npmjs.com/), and [pnpm](https://pnpm.io/) package managers. If you have Yarn installed in your environment but prefer to use another as your default package manager add the `--package-manager` flag to your installation command. For example:
 
   ```shell
-  npx storybook init --package-manager=npm
+  npx storybook@latest init --package-manager=npm
   ```
 
 - Storybook supports Webpack 5 out of the box. If you're upgrading from a previous version, run the following command to enable it:

docs/get-started/installation-problems/svelte.mdx

@@ -1,13 +1,13 @@
 - Add the `--type svelte` flag to the installation command to set up Storybook manually:
 
   ```shell
-  npx storybook init --type svelte
+  npx storybook@latest init --type svelte
   ```
 
 - Storybook's CLI provides support for [Yarn](https://yarnpkg.com/), [npm](https://www.npmjs.com/), and [pnpm](https://pnpm.io/) package managers. If you have Yarn installed in your environment but prefer to use another as your default package manager add the `--package-manager` flag to your installation command. For example:
 
   ```shell
-  npx storybook init --package-manager=npm
+  npx storybook@latest init --package-manager=npm
   ```
 
 ### Svelte Native

docs/get-started/installation-problems/vue.mdx

@@ -2,16 +2,16 @@
 
   ```shell
   # For Vue 2 projects
-  npx storybook init --type vue
+  npx storybook@latest init --type vue
 
   # For Vue 3 projects
-  npx storybook init --type vue3
+  npx storybook@latest init --type vue3
   ```
 
 - Storybook's CLI provides support for [Yarn](https://yarnpkg.com/), [npm](https://www.npmjs.com/), and [pnpm](https://pnpm.io/) package managers. If you have Yarn installed in your environment but prefer to use another as your default package manager add the `--package-manager` flag to your installation command. For example:
 
   ```shell
-  npx storybook init --package-manager=npm
+  npx storybook@latest init --package-manager=npm
   ```
 
 - For other installation issues, check the Vue README files for additional instructions:

docs/get-started/installation-problems/web-components.mdx

@@ -1,7 +1,7 @@
 - Add the `--type web_components` flag to the installation command to set up Storybook manually:
 
   ```shell
-  npx storybook init --type web_components
+  npx storybook@latest init --type web_components
   ```
 
 - For other installation issues, check the Web Components README files for additional instructions:

docs/snippets/common/init-command.npx.js.mdx

@@ -1,3 +1,3 @@
 ```shell
-npx storybook init
+npx storybook@latest init
 ```

docs/snippets/common/init-command.pnpm.js.mdx

@@ -1,3 +1,3 @@
 ```shell
-pnpm dlx storybook init
+pnpm dlx storybook@latest init
 ```