diff --git a/docs/essentials/introduction.md b/docs/essentials/introduction.md
index 80627282735a..7b3f9d1d9524 100644
--- a/docs/essentials/introduction.md
+++ b/docs/essentials/introduction.md
@@ -15,9 +15,9 @@ A major strength of Storybook are [addons](https://storybook.js.org/addons) that
### Installation
-If you ran `storybook init` to include Storybook in your project, the Essentials addon ([`@storybook/addon-essentials`](https://storybook.js.org/addons/tag/essentials)) is already installed and configured for you. You can skip the rest of this section.
+If you ran `npx storybook@latest init` to include Storybook in your project, the latest version of the Essentials addon ([`@storybook/addon-essentials`](https://storybook.js.org/addons/tag/essentials)) is already installed and configured for you. You can go ahead and skip the rest of this section.
-If you're upgrading from a previous Storybook version, you'll need to run the following command in your terminal:
+However, if you intend to install the Essentials addon manually into an existing Storybook instance, you can do so by running the following command in your terminal:
@@ -31,7 +31,7 @@ If you're upgrading from a previous Storybook version, you'll need to run the fo
-Update your Storybook configuration (in [`.storybook/main.js`](../configure/overview.md#configure-story-rendering)) to include the Essentials addon.
+Update your Storybook configuration (in [`.storybook/main.js|ts`](../configure/overview.md#configure-story-rendering)) to include the Essentials addon.
@@ -48,7 +48,7 @@ Update your Storybook configuration (in [`.storybook/main.js`](../configure/over
Essentials is "zero-config”. It comes with a recommended configuration out of the box.
-If you need to reconfigure any of the [individual Essentials addons](https://storybook.js.org/addons/tag/essentials), install them manually by following the installation instructions, register them in your Storybook configuration file (i.e., [`.storybook/main.js`](../configure/overview.md#configure-story-rendering)) and adjust the configuration to suit your needs. For example:
+If you need to reconfigure any of the [individual Essentials addons](https://storybook.js.org/addons/tag/essentials), install them manually by following the installation instructions, and depending on the method of choice, register them in your Storybook configuration file (i.e., [`.storybook/main.js|ts`](../configure/overview.md#configure-story-rendering)) and adjust the configuration to suit your needs. For example:
@@ -86,18 +86,17 @@ Below is an abridged configuration and table with all the available options for
-| Addon | Configuration element | Description |
-| ------------------------------ | --------------------- | ------------------------------------------------------------------------------------------------------------------------------------------------ |
-| `@storybook/addon-actions` | N/A | N/A |
-| `@storybook/addon-viewport` | N/A | N/A |
-| `@storybook/addon-docs` | `configureJSX` | Enables JSX support in MDX for projects that aren't configured to handle the format.
`configureJSX: true` |
-| | `babelOptions` | Provides additional Babel configurations for file transpilation.
`babelOptions: { plugins: [], presets: []}`
Extends `configureJSX`. |
-| | `csfPluginOptions` | Provides additional configuration for Storybook's CSF plugin. Can be disabled with `null` |
-| | `mdxPluginOptions` | Provides additional configuration for Storybook's MDX plugin. |
-| `@storybook/addon-controls` | N/A | N/A |
-| `@storybook/addon-backgrounds` | N/A | N/A |
-| `@storybook/addon-toolbars` | N/A | N/A |
-| `@storybook/addon-measure` | N/A | N/A |
+| Addon | Option | Description |
+| ------------------------------ | ------------------ | -------------------------------------------------------------------------------------------------------------------------------------------------------- |
+| `@storybook/addon-actions` | N/A | N/A |
+| `@storybook/addon-viewport` | N/A | N/A |
+| `@storybook/addon-docs` | `csfPluginOptions` | Provides additional configuration for Storybook's CSF plugin. Can be disabled with `null`. |
+| | `jsxOptions` | Extends the default Babel configuration options for processing Markdown and MDX files. |
+| | `mdxPluginOptions` | Provides additional configuration options and plugin configuration for [MDX documentation](../writing-docs/mdx.md#lack-of-github-flavored-markdown-gfm). |
+| `@storybook/addon-controls` | N/A | N/A |
+| `@storybook/addon-backgrounds` | N/A | N/A |
+| `@storybook/addon-toolbars` | N/A | N/A |
+| `@storybook/addon-measure` | N/A | N/A |
When you start Storybook, your custom configuration will override the default.
diff --git a/docs/snippets/common/storybook-main-full-individual-essentials-config.js.mdx b/docs/snippets/common/storybook-main-full-individual-essentials-config.js.mdx
index 96da7117a80b..491588e4c8dd 100644
--- a/docs/snippets/common/storybook-main-full-individual-essentials-config.js.mdx
+++ b/docs/snippets/common/storybook-main-full-individual-essentials-config.js.mdx
@@ -10,9 +10,13 @@ export default {
{
name: '@storybook/addon-docs',
options: {
- configureJSX: true,
- babelOptions: {},
- transcludeMarkdown: true,
+ csfPluginOptions: null,
+ jsxOptions: {},
+ mdxPluginOptions: {
+ mdxCompileOptions: {
+ remarkPlugins: [],
+ },
+ },
},
},
'@storybook/addon-controls',
diff --git a/docs/snippets/common/storybook-main-full-individual-essentials-config.ts.mdx b/docs/snippets/common/storybook-main-full-individual-essentials-config.ts.mdx
index 0c15418015bf..2741a83cd2eb 100644
--- a/docs/snippets/common/storybook-main-full-individual-essentials-config.ts.mdx
+++ b/docs/snippets/common/storybook-main-full-individual-essentials-config.ts.mdx
@@ -13,9 +13,13 @@ const config: StorybookConfig = {
{
name: '@storybook/addon-docs',
options: {
- configureJSX: true,
- babelOptions: {},
- transcludeMarkdown: true,
+ csfPluginOptions: null,
+ jsxOptions: {},
+ mdxPluginOptions: {
+ mdxCompileOptions: {
+ remarkPlugins: [],
+ },
+ },
},
},
'@storybook/addon-controls',