@snailicid3/storybook-config 🐌

Shared Storybook configuration with sensible React and Vite defaults.

Repository

• GitHub: @snailicid3/storybook-config • snailicid3

Author

👤 Gillian Tunney

• GitHub
• Email

Recommended package manager: pnpm

@snailicid3/storybook-config 🐌

This package keeps project-level .storybook files small and consistent. It provides configuration builders for Storybook's main, preview, and manager entries, with React and Vite defaults that can be overridden for an individual project.

@snailicid3/storybook-config contains

• Main config — default story globs, @storybook/react-vite, Essentials, and a11y
• Preview config — default control matchers with project-level parameter overrides
• Manager config — a typed passthrough for project-specific manager settings
• Storybook namespace — grouped builders and defaults matching the @snailicid3/config API style

The package only creates configuration objects. Storybook, the selected framework, and addons stay in the consuming project's dependencies.

Installation

Install the config package and its default Storybook toolchain as development dependencies:

pnpm add --save-dev \
  @snailicid3/storybook-config \
  storybook \
  @storybook/react-vite \
  @storybook/addon-essentials \
  @storybook/addon-a11y

Examples

Main configuration

/* .storybook/main.ts */
import { defineStorybookMain } from '@snailicid3/storybook-config'

export default defineStorybookMain()

The default configuration discovers MDX and story files under src, uses @storybook/react-vite, and enables the Essentials and a11y addons.

Preview configuration

/* .storybook/preview.ts */
import { defineStorybookPreview } from '@snailicid3/storybook-config'

export default defineStorybookPreview({
  parameters: {
    layout: 'centered',
  },
})

Extending the main configuration

/* .storybook/main.ts */
import { defineStorybookMain } from '@snailicid3/storybook-config'

export default defineStorybookMain({
  addons: ['@storybook/addon-essentials', '@storybook/addon-a11y'],
  stories: ['../stories/**/*.stories.tsx'],
  overrides: {
    docs: { autodocs: 'tag' },
  },
})

Using another framework

Install the framework in the consuming project, then override the default:

/* .storybook/main.ts */
import { defineStorybookMain } from '@snailicid3/storybook-config'

export default defineStorybookMain({
  framework: '@storybook/web-components-vite',
})

Namespace API

The same builders and defaults are available through the grouped Storybook API:

/* .storybook/main.ts */
import { Storybook } from '@snailicid3/storybook-config'

export default Storybook.main({
  frameworkOptions: {
    strictMode: true,
  },
})

Manager configuration

/* .storybook/manager.ts */
import { defineStorybookManager } from '@snailicid3/storybook-config'

export default defineStorybookManager({
  enableShortcuts: false,
})