index.md

id	title
introduction	Intro to Presets

Storybook presets are grouped collections of babel, webpack, and addons configurations that support specific use cases.

For example, to write your stories in Typescript, rather than manually configuring Storybook for typescript with individual babel and webpack configs, you can use the @storybook/preset-typescript package, which does the heavy lifting for you.

Basic usage

Each preset has its own installation instructions, but the idea of presets is to install an addon and then load its preset.

For example, to get typescript support, first install the addon:

yarn add @storybook/preset-typescript --dev

Then load it in the file main.js in your storybook folder (.storybook by default):

module.exports = {
  addons: ['@storybook/preset-typescript'],
};

That's it. When Storybook starts up, it will configure itself for typescript without any further configuration. For more information, see the Typescript preset README.

Preset configuration

Presets can also take optional parameters. These can be used by the preset itself or passed through to configure the webpack loaders that are used by the preset.

Consider this example:

const path = require('path');
module.exports = {
  addons: [
    {
      name: '@storybook/preset-typescript',
      options: {
        tsDocgenLoaderOptions: {
          tsconfigPath: path.resolve(__dirname, '../tsconfig.json'),
        },
        include: [path.resolve(__dirname)],
      },
    },
  ],
};

This configures the typescript docgen loader using the app's tsconfig.json and also tells the typescript loaders to only be applied to the current directory.

Each preset has its own option and those options should be documented in the preset's README.

Go deeper

To see what presets are available, see the preset gallery. To understand more about how presets work and write your own, see writing presets.