# Decorators and Global Setup — Storybook

Source: https://www.geekswithgeeks.com/en/storybook/sb-decorators

> Use decorators to wrap components with providers, themes, and global context.

## What are decorators?

Decorators are functions that wrap your component for every story. They're useful for providing themes, providers, mock data, and other global setup that your component needs.

## Theme decorator example

Here's how to wrap components with a theme provider.

```tsx
import { ThemeProvider } from './theme';

const themeDecorator = (Story) => (
  <ThemeProvider theme="light">
    <Story />
  </ThemeProvider>
);

export default {
  component: MyComponent,
  decorators: [themeDecorator],
};

export const LightTheme = () => <MyComponent />;
```

## Global decorators

Define decorators in `.storybook/preview.ts` to apply them to all stories. This is useful for global theme setup or language providers.

## Mock data and services

Use decorators and MSW (Mock Service Worker) to mock API responses and test component behavior with different data scenarios.