> **Version 10.4 (beta)** — **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.3 (latest) (`/docs/essentials/index.md`), Version 9 (`/docs/9/essentials/index.md`), Version 8 (`/docs/8/essentials/index.md`)

# Essentials

Storybook essentials is a set of tools that help you build, test, and document your components within Storybook. It includes the following:

- [Actions](https://storybook.js.org/docs/10.4/essentials/actions.md)
- [Backgrounds](https://storybook.js.org/docs/10.4/essentials/backgrounds.md)
- [Controls](https://storybook.js.org/docs/10.4/essentials/controls.md)
- [Highlight](https://storybook.js.org/docs/10.4/essentials/highlight.md)
- [Measure & outline](https://storybook.js.org/docs/10.4/essentials/measure-and-outline.md)
- [Toolbars & globals](https://storybook.js.org/docs/10.4/essentials/toolbars-and-globals.md)
- [Viewport](https://storybook.js.org/docs/10.4/essentials/viewport.md)

## Configuration

Essentials is “zero-config”. It comes with a recommended configuration out of the box.

Many of the features above can be configured via [parameters](https://storybook.js.org/docs/10.4/writing-stories/parameters.md). See each feature's documentation (linked above) for more details.

## Disabling features

If you need to disable any of the essential features, you can do it by changing your [`.storybook/main.js|ts`](https://storybook.js.org/docs/10.4/configure/index.md#configure-your-storybook-project) file.

For example, if you wanted to disable the [backgrounds feature](https://storybook.js.org/docs/10.4/essentials/backgrounds.md), you would apply the following change to your Storybook configuration:

```ts
// .storybook/main.ts — CSF 3
// 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)'],
  features: {
    backgrounds: false, // 👈 disable the backgrounds feature
  },
};

export default config;
```

```ts
// .storybook/main.ts — CSF Next 🧪
// 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)'],
  features: {
    backgrounds: false, // 👈 disable the backgrounds feature
  },
});
```

You can use the following keys for each individual feature: `actions`, `backgrounds`, `controls`, `highlight`, `measure`, `outline`, `toolbars`, and `viewport`.