diff --git a/docs/api/main-config/main-config-indexers.mdx b/docs/api/main-config/main-config-indexers.mdx
index a532d25a734e..9fce870fcc6c 100644
--- a/docs/api/main-config/main-config-indexers.mdx
+++ b/docs/api/main-config/main-config-indexers.mdx
@@ -119,7 +119,7 @@ Type: `string`
Default: The original [`fileName`](#filename) passed to the `createIndex` function
-The file to import from, e.g. the [CSF](../csf.mdx) file.
+The file to import from, e.g. the [CSF](../csf/index.mdx) file.
It is likely that the [`fileName`](#filename) being indexed is not CSF, in which you will need to [transpile it to CSF](#transpiling-to-csf) so that Storybook can read it in the browser.
@@ -203,7 +203,7 @@ Only use this if you need to override the auto-generated id.
## Transpiling to CSF
-The value of [`importPath`](#importpath) in an [`IndexInput`](#indexinput) must resolve to a [CSF](../csf.mdx) file. Most custom indexers, however, are only necessary because the input is *not* CSF. Therefore, you will likely need to transpile the input to CSF, so that Storybook can read it in the browser and render your stories.
+The value of [`importPath`](#importpath) in an [`IndexInput`](#indexinput) must resolve to a [CSF](../csf/index.mdx) file. Most custom indexers, however, are only necessary because the input is *not* CSF. Therefore, you will likely need to transpile the input to CSF, so that Storybook can read it in the browser and render your stories.
Transpiling the custom source format to CSF is beyond the scope of this documentation. This transpilation is often done at the builder level ([Vite](../../builders/vite.mdx) and/or [Webpack](../../builders/webpack.mdx)), and we recommend using [unplugin](https://github.com/unjs/unplugin) to create plugins for multiple builders.
diff --git a/docs/configure/index.mdx b/docs/configure/index.mdx
index 9b23aaa9e363..dd3d854afa49 100644
--- a/docs/configure/index.mdx
+++ b/docs/configure/index.mdx
@@ -99,7 +99,7 @@ You can also adjust your Storybook configuration and implement custom logic to l
Because of the way stories are currently indexed in Storybook, loading stories on demand has a couple of minor limitations at the moment:
-* [CSF formats](../api/csf.mdx) from version 1 to version 3 are supported.
+* [CSF formats](../api/csf/index.mdx) from version 1 to version 3 are supported.
* Custom `storySort` functions are allowed based on a restricted API.
## Configure story rendering
diff --git a/docs/configure/integration/frameworks-feature-support.mdx b/docs/configure/integration/frameworks-feature-support.mdx
index 1d0644497b2b..635462906269 100644
--- a/docs/configure/integration/frameworks-feature-support.mdx
+++ b/docs/configure/integration/frameworks-feature-support.mdx
@@ -38,7 +38,7 @@ Core frameworks have dedicated maintainers or contributors who are responsible f
| [Links](https://github.com/storybookjs/storybook/tree/next/code/addons/links) | ✅ | ✅ | ✅ | ✅ |
| [Queryparams](https://github.com/storybookjs/addon-queryparams) | ✅ | ✅ | ✅ | ✅ |
| **Docs** | | | | |
-| [CSF Stories](../../api/csf.mdx) | ✅ | ✅ | ✅ | ✅ |
+| [CSF Stories](../../api/csf/index.mdx) | ✅ | ✅ | ✅ | ✅ |
| [Autodocs](../../writing-docs/autodocs.mdx) | ✅ | ✅ | ✅ | ✅ |
| [Doc Blocks - ArgTypes](../../api/doc-blocks/doc-block-argtypes.mdx) | ✅ | ✅ | ✅ | ✅ |
| [Doc Blocks - Canvas](../../api/doc-blocks/doc-block-canvas.mdx) | ✅ | ✅ | ✅ | ✅ |
@@ -87,7 +87,7 @@ Community frameworks have fewer contributors which means they may not be as up t
| [Links](https://github.com/storybookjs/storybook/tree/next/code/addons/links) | ✅ | ✅ | ✅ | ✅ | ✅ | ✅ |
| [Queryparams](https://github.com/storybookjs/addon-queryparams) | ✅ | ✅ | ✅ | ✅ | ✅ | ✅ |
| **Docs** | | | | | | |
-| [CSF Stories](../../api/csf.mdx) | ✅ | ✅ | ✅ | ✅ | ✅ | ✅ |
+| [CSF Stories](../../api/csf/index.mdx) | ✅ | ✅ | ✅ | ✅ | ✅ | ✅ |
| [Autodocs](../../writing-docs/autodocs.mdx) | | ✅ | ✅ | ✅ | ✅ | ✅ |
| [Doc Blocks - ArgTypes](../../api/doc-blocks/doc-block-argtypes.mdx) | ✅ | ✅ | ✅ | ✅ | ✅ | ✅ |
| [Doc Blocks - Canvas](../../api/doc-blocks/doc-block-canvas.mdx) | ✅ | ✅ | ✅ | ✅ | ✅ | ✅ |
@@ -116,5 +116,5 @@ To align the Storybook ecosystem with the current state of frontend development,
| ---------------------------------------------------------------------------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------ |
| [Knobs](https://github.com/storybookjs/addon-knobs) | The Knobs addon was officially deprecated with the release of Storybook 6.3 and is no longer actively maintained. We recommend using the [controls](../../essentials/controls.mdx) instead. |
| Storyshots | The Storyshots addon was officially deprecated with the release of Storybook 7.6, is no longer actively maintained and was removed in Storybook 8. See the [migration guide](../../../release-8-6/docs/writing-tests/snapshot-testing/storyshots-migration-guide.mdx) for the available alternatives. |
-| StoriesOf | The `storiesOf` API was officially removed with the release of Storybook 8 and is no longer maintained. We recommend using the [CSF API](../../api/csf.mdx) instead for writing stories.
See the [migration guide](../../releases/migration-guide-from-older-version.mdx#major-breaking-changes) for more information. |
+| StoriesOf | The `storiesOf` API was officially removed with the release of Storybook 8 and is no longer maintained. We recommend using the [CSF API](../../api/csf/index.mdx) instead for writing stories.
See the [migration guide](../../releases/migration-guide-from-older-version.mdx#major-breaking-changes) for more information. |
| Storysource | The Storysource addon was officially removed with the release of Storybook 9 and is no longer maintained. To display your stories' source code, we recommend using the [`codePanel`](../../writing-docs/code-panel.mdx) parameter instead. |
diff --git a/docs/essentials/controls.mdx b/docs/essentials/controls.mdx
index 7fbfcf638fbf..6e2e2083ba9a 100644
--- a/docs/essentials/controls.mdx
+++ b/docs/essentials/controls.mdx
@@ -249,7 +249,7 @@ Note that both `mapping` and `control.labels` don't have to be exhaustive. If th
- This feature is not supported with the Svelte CSF. To opt-in to this feature with Svelte, you must use Storybook's [Component Story Format](../api/csf.mdx).
+ This feature is not supported with the Svelte CSF. To opt-in to this feature with Svelte, you must use Storybook's [Component Story Format](../api/csf/index.mdx).
diff --git a/docs/faq.mdx b/docs/faq.mdx
index 8aec0c684089..f062d5f1878e 100644
--- a/docs/faq.mdx
+++ b/docs/faq.mdx
@@ -230,7 +230,7 @@ We're only covering versions 5.3 and 5.0 as they were important milestones for S
| | @storybook/addon-docs/blocks/Typeset | [See current documentation](./api/doc-blocks/doc-block-typeset.mdx) | Non existing feature or undocumented | Non existing feature or undocumented |
| | @storybook/addon-docs/blocks/Unstyled | [See current documentation](./api/doc-blocks/doc-block-unstyled.mdx) | Non existing feature or undocumented | Non existing feature or undocumented |
| | @storybook/addon-docs/blocks/useOf | [See current documentation](./api/doc-blocks/doc-block-useof.mdx) | Non existing feature or undocumented | Non existing feature or undocumented |
-| | Stories/Component Story Format (see note below) | [See current documentation](./api/csf.mdx) | [See versioned documentation](https://github.com/storybookjs/storybook/tree/release/5.3/docs/src/pages/formats/component-story-format) | Non existing feature or undocumented |
+| | Stories/Component Story Format (see note below) | [See current documentation](./api/csf/index.mdx) | [See versioned documentation](https://github.com/storybookjs/storybook/tree/release/5.3/docs/src/pages/formats/component-story-format) | Non existing feature or undocumented |
| | ArgTypes | [See current documentation](./api/arg-types.mdx) | Non existing feature or undocumented | Non existing feature or undocumented |
| | `main.js` configuration/Overview | [See current documentation](./api/main-config/main-config.mdx) | Non existing feature or undocumented | Non existing feature or undocumented |
| | `main.js` configuration/framework | [See current documentation](./api/main-config/main-config-framework.mdx) | Non existing feature or undocumented | Non existing feature or undocumented |
diff --git a/docs/get-started/whats-a-story.mdx b/docs/get-started/whats-a-story.mdx
index c625b373b39c..252c49c57611 100644
--- a/docs/get-started/whats-a-story.mdx
+++ b/docs/get-started/whats-a-story.mdx
@@ -11,7 +11,7 @@ When you installed Storybook, the CLI created example components that demonstrat
- Each example component has a set of stories that show the states it supports. You can browse the stories in the UI and see the code behind them in files that end with `.stories.svelte`. Stories can be written in [Component Story Format](../api/csf.mdx) (CSF), an ES6 modules-based standard for writing component examples or using Svelte native template syntax, via a community-led project called [`Svelte CSF`](https://storybook.js.org/addons/@storybook/addon-svelte-csf).
+ Each example component has a set of stories that show the states it supports. You can browse the stories in the UI and see the code behind them in files that end with `.stories.svelte`. Stories can be written in [Component Story Format](../api/csf/index.mdx) (CSF), an ES6 modules-based standard for writing component examples or using Svelte native template syntax, via a community-led project called [`Svelte CSF`](https://storybook.js.org/addons/@storybook/addon-svelte-csf).
Let’s start with the `Button` component. With Svelte, a story can be defined as an object using standard CSF or with a `Story` component using Svelte CSF. Here’s how to render `Button` in the “primary” state and export a story called `Primary` using both approaches.
@@ -19,7 +19,7 @@ When you installed Storybook, the CLI created example components that demonstrat
- Each example component has a set of stories that show the states it supports. You can browse the stories in the UI and see the code behind them in files that end with `.stories.js|ts`. The stories are written in [Component Story Format](../api/csf.mdx) (CSF), an ES6 modules-based standard for writing component examples.
+ Each example component has a set of stories that show the states it supports. You can browse the stories in the UI and see the code behind them in files that end with `.stories.js|ts`. The stories are written in [Component Story Format](../api/csf/index.mdx) (CSF), an ES6 modules-based standard for writing component examples.
Let’s start with the `Button` component. A story is an object that describes how to render the component in question. Here’s how to render `Button` in the “primary” state and export a story called `Primary`.
@@ -56,7 +56,7 @@ Storybook makes it easy to work on one component in one state (aka a story) at a
- This feature is not supported with the Svelte template syntax story format. To opt-in to this feature with Svelte, you must use Storybook's [Component Story Format](../api/csf.mdx).
+ This feature is not supported with the Svelte template syntax story format. To opt-in to this feature with Svelte, you must use Storybook's [Component Story Format](../api/csf/index.mdx).
diff --git a/docs/writing-docs/autodocs.mdx b/docs/writing-docs/autodocs.mdx
index b122f2daf3e1..16c405dd45cf 100644
--- a/docs/writing-docs/autodocs.mdx
+++ b/docs/writing-docs/autodocs.mdx
@@ -13,7 +13,7 @@ Storybook infers the relevant metadata (e.g., [`args`](../writing-stories/args.m
## Set up automated documentation
-Autodocs is configured through [tags](../writing-stories/tags.mdx). If a [CSF](../api/csf.mdx) file contains at least one story tagged with `autodocs`, then a documentation page will be generated for that component.
+Autodocs is configured through [tags](../writing-stories/tags.mdx). If a [CSF](../api/csf/index.mdx) file contains at least one story tagged with `autodocs`, then a documentation page will be generated for that component.
To enable automatic documentation for all stories in a project, add it to `tags` in your `.storybook/preview.js|ts` file:
diff --git a/docs/writing-docs/mdx.mdx b/docs/writing-docs/mdx.mdx
index 1ca951582f51..bb871974aea5 100644
--- a/docs/writing-docs/mdx.mdx
+++ b/docs/writing-docs/mdx.mdx
@@ -5,7 +5,7 @@ sidebar:
title: MDX
---
-[MDX](https://mdxjs.com/) files mix Markdown and Javascript/JSX to create rich interactive documentation. You can use Markdown’s readable syntax (such as `# heading`) for your documentation, include stories defined in [Component Story Format (CSF)](../api/csf.mdx), and freely embed JSX component blocks at any point in the file. All at once.
+[MDX](https://mdxjs.com/) files mix Markdown and Javascript/JSX to create rich interactive documentation. You can use Markdown’s readable syntax (such as `# heading`) for your documentation, include stories defined in [Component Story Format (CSF)](../api/csf/index.mdx), and freely embed JSX component blocks at any point in the file. All at once.
In addition, you can write pure documentation pages in MDX and add them to Storybook alongside your stories.
@@ -21,7 +21,7 @@ Let's start with an example, `Checkbox.mdx`, combining Markdown with a single st
{/* prettier-ignore-end */}
-This MDX file references a story file, `Checkbox.stories.js|ts`, that is written in [Component Story Format (CSF)](../api/csf.mdx):
+This MDX file references a story file, `Checkbox.stories.js|ts`, that is written in [Component Story Format (CSF)](../api/csf/index.mdx):
{/* prettier-ignore-start */}
diff --git a/docs/writing-stories/index.mdx b/docs/writing-stories/index.mdx
index 0337e06f0ff5..f51065117377 100644
--- a/docs/writing-stories/index.mdx
+++ b/docs/writing-stories/index.mdx
@@ -34,7 +34,7 @@ components/
- We can define stories according to the [Component Story Format](../api/csf.mdx) (CSF), an ES6 module-based standard that is easy to write and portable between tools, or rely on the community-led project [`Svelte CSF`](https://storybook.js.org/addons/@storybook/addon-svelte-csf) which provides a similar experience.
+ We can define stories according to the [Component Story Format](../api/csf/index.mdx) (CSF), an ES6 module-based standard that is easy to write and portable between tools, or rely on the community-led project [`Svelte CSF`](https://storybook.js.org/addons/@storybook/addon-svelte-csf) which provides a similar experience.
With Svelte CSF, the essential elements are the `defineMeta` function, which describes the component, and the `Story` component, which describes the stories. This pattern is different from the standard CSF, which uses a [default export](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Statements/export#Using_the_default_export) and [named exports](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Statements/export#Using_named_exports) to apply the same concepts.
@@ -42,7 +42,7 @@ components/
- We define stories according to the [Component Story Format](../api/csf.mdx) (CSF), an ES6 module-based standard that is easy to write and portable between tools.
+ We define stories according to the [Component Story Format](../api/csf/index.mdx) (CSF), an ES6 module-based standard that is easy to write and portable between tools.
The key ingredients are the meta (or [default export](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Statements/export#Using_the_default_export)) that describes the component, and [named exports](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Statements/export#Using_named_exports) that describe the stories.
@@ -323,7 +323,7 @@ You can also use the Controls panel to edit or save a new story after adjusting
- This feature is not supported with the Svelte CSF. To opt-in to this feature with Svelte, you must use Storybook's [Component Story Format](../api/csf.mdx).
+ This feature is not supported with the Svelte CSF. To opt-in to this feature with Svelte, you must use Storybook's [Component Story Format](../api/csf/index.mdx).
diff --git a/docs/writing-stories/play-function.mdx b/docs/writing-stories/play-function.mdx
index 9f2428bb708e..fbf6f80df098 100644
--- a/docs/writing-stories/play-function.mdx
+++ b/docs/writing-stories/play-function.mdx
@@ -35,7 +35,7 @@ If you need to query outside of the canvas (for example, to test a dialog that a
## Composing stories
-Thanks to the [Component Story Format](../api/csf.mdx), an ES6 module based file format, you can also combine your `play` functions, similar to other existing Storybook features (e.g., [args](./args.mdx)). For example, if you wanted to verify a specific workflow for your component, you could write the following stories:
+Thanks to the [Component Story Format](../api/csf/index.mdx), an ES6 module based file format, you can also combine your `play` functions, similar to other existing Storybook features (e.g., [args](./args.mdx)). For example, if you wanted to verify a specific workflow for your component, you could write the following stories:
diff --git a/docs/writing-stories/typescript.mdx b/docs/writing-stories/typescript.mdx
index a78660f8b960..a43e8560f0d0 100644
--- a/docs/writing-stories/typescript.mdx
+++ b/docs/writing-stories/typescript.mdx
@@ -18,7 +18,7 @@ Storybook has built-in TypeScript support, so you can get started with zero conf
## Typing stories with `Meta` and `StoryObj`
-When writing stories, there are two aspects that are helpful to type. The first is the [component meta](./index.mdx#default-export), which describes and configures the component and its stories. In a [CSF file](../api/csf.mdx), this is the default export. The second is the [stories themselves](./index.mdx#defining-stories).
+When writing stories, there are two aspects that are helpful to type. The first is the [component meta](./index.mdx#default-export), which describes and configures the component and its stories. In a [CSF file](../api/csf/index.mdx), this is the default export. The second is the [stories themselves](./index.mdx#defining-stories).
Storybook provides utility types for each of these, named `Meta` and `StoryObj`. Here's an example CSF file using those types:
diff --git a/docs/writing-tests/integrations/stories-in-unit-tests.mdx b/docs/writing-tests/integrations/stories-in-unit-tests.mdx
index b7a10ba81dad..be42ec2d3496 100644
--- a/docs/writing-tests/integrations/stories-in-unit-tests.mdx
+++ b/docs/writing-tests/integrations/stories-in-unit-tests.mdx
@@ -13,7 +13,7 @@ Stories are a practical starting point for UI testing. Import stories into tools
## Write a test with Testing Library
-[Testing Library](https://testing-library.com/) is a suite of helper libraries for browser-based component tests. With [Component Story Format](../../api/csf.mdx), your stories are reusable with Testing Library. Each named export (story) is renderable within your testing setup. For example, if you were working on a login component and wanted to test the invalid credentials scenario, here's how you could write your test:
+[Testing Library](https://testing-library.com/) is a suite of helper libraries for browser-based component tests. With [Component Story Format](../../api/csf/index.mdx), your stories are reusable with Testing Library. Each named export (story) is renderable within your testing setup. For example, if you were working on a login component and wanted to test the invalid credentials scenario, here's how you could write your test:
Storybook provides a [`composeStories`](../../api/portable-stories/portable-stories-vitest.mdx#composestories) utility that helps convert stories from a test file into renderable elements that can be reused in your Node tests with JSDOM. It also allows you to apply other Storybook features that you have enabled your project (e.g., [decorators](../../writing-stories/decorators.mdx), [args](../../writing-stories/args.mdx)) into your tests, enabling you to reuse your stories in your testing environment of choice (e.g., [Jest](https://jestjs.io/), [Vitest](https://vitest.dev/)), ensuring your tests are always in sync with your stories without having to rewrite them. This is what we refer to as portable stories in Storybook.