> **Version 10.3** — **React** / **TypeScript**
> Also available:
- `?renderer=angular` for angular, vue, web-components
- `?language=js` for JavaScript
- `?codeOnly=true` for code snippets only
- other versions: 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](./actions.mdx)
* [Backgrounds](./backgrounds.mdx)
* [Controls](./controls.mdx)
* [Highlight](./highlight.mdx)
* [Measure & outline](./measure-and-outline.mdx)
* [Toolbars & globals](./toolbars-and-globals.mdx)
* [Viewport](./viewport.mdx)

### 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](../writing-stories/parameters.mdx). 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`](../configure/index.mdx#configure-your-storybook-project) file.

For example, if you wanted to disable the [backgrounds feature](./backgrounds.mdx), 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`.