---
title: 'Main configuration'
sidebar:
  order: 1
  title: Overview
---

The main configuration defines a Storybook project's behavior, including the location of stories, addons to use, feature flags, and other project-specific settings.

## `main.js` or `main.ts`

This configuration is defined in `.storybook/main.js|ts`, which is located relative to the root of your project.

A typical Storybook configuration file looks like this:

{/* prettier-ignore-start */}

<CodeSnippets path="main-config-typical.md" />

{/* prettier-ignore-end */}

## config

An object to configure Storybook containing the following properties:

* [`framework`](./main-config-framework.mdx) (Required)
* [`stories`](./main-config-stories.mdx) (Required)
* [`addons`](./main-config-addons.mdx)
* [`babel`](./main-config-babel.mdx)
* [`babelDefault`](./main-config-babel-default.mdx)
* [`build`](./main-config-build.mdx)
* [`core`](./main-config-core.mdx)
* [`docs`](./main-config-docs.mdx)
* [`env`](./main-config-env.mdx)
* [`features`](./main-config-features.mdx)
* [`indexers`](./main-config-indexers.mdx) (⚠️ Experimental)
* [`logLevel`](./main-config-log-level.mdx)
* [`managerHead`](./main-config-manager-head.mdx)
* [`previewAnnotations`](./main-config-preview-annotations.mdx)
* [`previewBody`](./main-config-preview-body.mdx)
* [`previewHead`](./main-config-preview-head.mdx)
* [`refs`](./main-config-refs.mdx)
* [`staticDirs`](./main-config-static-dirs.mdx)
* [`swc`](./main-config-swc.mdx)
* [`typescript`](./main-config-typescript.mdx)
* [`viteFinal`](./main-config-vite-final.mdx)
* [`webpackFinal`](./main-config-webpack-final.mdx)