> **Version 11 (alpha)** — **React** / **TypeScript**
> Also available:
- `?renderer=angular` for angular, vue, web-components
- `?language=js` for JavaScript
- `?codeOnly=true` for code snippets only
- other versions: Version 10.6 (latest) (`/docs/api/main-config/main-config-story-sorts.md`), Version 9 (`/docs/9/api/main-config/main-config-story-sorts.md`), Version 8 (`/docs/8/api/main-config/main-config-story-sorts.md`)

# storySorts

Parent: [main.js|ts configuration](https://storybook.js.org/docs/11/api/main-config/main-config.md)

Type: `(StorySortConfig | StorySortOrder | StorySortFn)[]`

Default: `[]`

Sorts the stories in the sidebar.
Without sorters, stories appear in the order in which they are imported.
See [the guide](https://storybook.js.org/docs/11/writing-stories/naming-components-and-hierarchy.md#sorting-stories) for usage examples.

```ts
// .storybook/main.ts — CSF 4
// Replace your-framework with the framework you are using (e.g., react-vite, nextjs, nextjs-vite)

export default defineMain({
  framework: '@storybook/your-framework',
  stories: ['../src/**/*.mdx', '../src/**/*.stories.@(js|jsx|mjs|ts|tsx)'],
  storySorts: [{ order: ['Intro', 'Components'] }, { method: 'alphabetical' }],
});
```

```ts
// .storybook/main.ts — CSF 3
// ⚠️ CSF versions 1, 2, and 3 will be removed in a future version of Storybook. Upgrade to CSF 4: https://storybook.js.org/docs/writing-stories/csf#upgrade-to-csf-4
// Replace your-framework with the framework you are using, e.g. react-vite, nextjs, vue3-vite, etc.

const config: StorybookConfig = {
  framework: '@storybook/your-framework',
  stories: ['../src/**/*.mdx', '../src/**/*.stories.@(js|jsx|mjs|ts|tsx)'],
  storySorts: [{ order: ['Intro', 'Components'] }, { method: 'alphabetical' }],
};

export default config;
```

Each sorter compares two stories.
When a sorter considers two stories equal, the next sorter decides their order.
In the example above, `Intro` and `Components` come first, and the alphabetical sorter orders every other story.

## `StorySortConfig`

```ts
type StorySortConfig = {
  includeNames?: boolean;
  locales?: string;
  method?: 'alphabetical' | 'configure';
  order?: StorySortOrder;
};
```

- **includeNames**: Whether to compare story names as well as titles. Defaults to `false`.
- **locales**: The locale to use for alphabetical sorting. Defaults to your system locale.
- **method**: `'alphabetical'` sorts the stories not listed in `order` alphabetically. `'configure'` keeps them in import order.
- **order**: The titles to show first, in the given order.

## `StorySortOrder`

```ts
type StorySortOrder = (string | StorySortOrder)[];
```

An array is shorthand for `{ order: [...] }`.
A nested array orders the second level of the title before it, as in `['Intro', 'Pages', ['Home', 'Login'], 'Components']`.
A `'*'` entry marks where all unlisted stories go.

## `StorySortFn`

```ts
type StorySortFn = (a: IndexEntry, b: IndexEntry) => number;
```

A comparator like the one passed to `Array.prototype.sort`.
It receives two story index entries, each with an `id`, `title`, `name`, and `importPath`, and returns a negative number, zero, or a positive number.
The comparator runs in Node.js when Storybook builds the story index, so it cannot use browser APIs.

## Adding a sorter from a preset

Presets and addons can add sorters too.
Storybook [applies](https://storybook.js.org/docs/11/addons/writing-presets.md) `storySorts` like other preset fields, so a preset receives the sorters defined so far and returns the new list:

```js title="my-addon/preset.js"
export const storySorts = (existing = []) => [...existing, { method: 'alphabetical' }];
```

Storybook applies the main configuration after all addons, so a plain `storySorts` array in main comes after the sorters that addons add.
To give your own sorters precedence over them, write `storySorts` as a function and put yours first:

```js title=".storybook/main.ts"
// Replace your-framework with the framework you are using (e.g., nextjs-vite, sveltekit, etc.)

export default defineMain({
  storySorts: (existing = []) => [{ order: ['Intro'] }, ...existing],
});
```