Decorators from preview.ts not applying

[alex-taxiera]

Summary

I just started up a new storybook and am testing a decorator and am not able to make it work globally from the preview file. It works fine when imported and added to the story meta. Have I done something wrong?

decorator.tsx

import { Story as SStory } from "storybook/internal/csf";
import { ReactRenderer, StoryContext } from "@storybook/react-vite";

export const withMyDecorator = (Story: SStory<ReactRenderer, any>, context: StoryContext) => {
  console.log('context :>> ', context);
  return(
    <div className="reee">
      <span>
        <Story {...context.args} />
      </span>
    </div>
  )
};

preview.ts

import type { Preview } from "@storybook/react-vite";
import "../src/index.css";
import { withMyDecorator } from "./decorator";

const preview: Preview = {
  parameters: {
    controls: {
      matchers: {
        color: /(background|color)$/i,
        date: /Date$/i,
      },
    },

    decorators: [withMyDecorator], // does not work

    a11y: {
      // 'todo' - show a11y violations in the test UI only
      // 'error' - fail CI on a11y violations
      // 'off' - skip a11y checks entirely
      test: "todo",
    },
  },
};

sample.stories.tsx

import type { Meta, StoryObj } from "@storybook/react-vite";
import { Alert } from "./alert";
import { withMyDecorator } from "../../../.storybook/decorator";


const meta: Meta<typeof Alert.Root> = {
  title: "Core Components/Alert",
  component: Alert.Root,
  parameters: {
    layout: "centered",
  },
  tags: ["autodocs"],
  decorators: [withMyDecorator], // works
  argTypes: {
    status: {
      control: { type: "select" },
      options: ["info", "warning", "error", "success"],
      description: "The status variant of the alert",
    },
  },
};

export default meta;
type Story = StoryObj<typeof meta>;

export const Default: Story = {
  args: {
    status: "info",
  },
  render: (args) => (
    <Alert.Root {...args}>
      <Alert.StatusIcon />
      <Alert.Content>
        <Alert.Title>Information</Alert.Title>
        <Alert.Description>
          This is an informational alert. It provides useful information to the
          user.
        </Alert.Description>
      </Alert.Content>
    </Alert.Root>
  ),
};

Additional information

@storybook/react-vite v9.1.0

main.ts

import type { StorybookConfig } from '@storybook/react-vite';

const config: StorybookConfig = {
  "stories": [
    "../src/**/*.mdx",
    "../src/**/*.stories.@(js|jsx|mjs|ts|tsx)"
  ],
  "addons": [
    "@chromatic-com/storybook",
    "@storybook/addon-docs",
    "@storybook/addon-onboarding",
    "@storybook/addon-a11y",
    "@storybook/addon-vitest",
    "@storybook/addon-themes",
  ],
  "framework": {
    "name": "@storybook/react-vite",
    "options": {}
  }
};
export default config;

Create a reproduction

No response

[dosubot[bot]]

Hi @alex-taxiera! I'm Dosu and I’m helping the storybook team.

The reason your global decorator isn't applying is because in Storybook v9.1.0, global decorators must be defined at the top level of your preview.ts file, not inside the parameters object. The decorators array inside parameters is ignored—only the top-level decorators array is used for global decorators docs.

Here's how your preview.ts should look:

import type { Preview } from "@storybook/react-vite";
import "../src/index.css";
import { withMyDecorator } from "./decorator";

const preview: Preview = {
  decorators: [withMyDecorator], // <-- move this out of parameters
  parameters: {
    controls: {
      matchers: {
        color: /(background|color)$/i,
        date: /Date$/i,
      },
    },
    a11y: {
      test: "todo",
    },
  },
};

export default preview;

This matches the current Storybook config structure reference. Your decorator works at the story meta level because that's the correct place for per-story or per-component decorators, but for global decorators, they must be at the top level of the preview export.

If you still don't see your decorator applied globally after this change, double-check for typos, make sure you're editing the correct preview.ts file, and restart Storybook after making changes.

To reply, just mention @dosu.

---

^{How did I do? Good | Irrelevant | Incorrect | Verbose | Hallucination | Report 🐛 | Other}