> ## Documentation Index
> Fetch the complete documentation index at: https://docs.twenty.com/llms.txt
> Use this file to discover all available pages before exploring further.

# Storybook helpers

> Present component previews and variant catalogs with twenty-ui/testing.

`twenty-ui/testing` exposes Storybook decorators and preview layout helpers. Configure styles and a [ThemeProvider](/ui/theming) in your Storybook preview before rendering themed components.

## ComponentDecorator

`ComponentDecorator` wraps a story in `ComponentStorybookLayout`. Set `parameters.container.width` and `parameters.container.height` in pixels. It also reads the story's `inverted` and `accent` args to choose an optional background.

```tsx theme={null}
import { Button } from 'twenty-ui/primitives/input';
import { ComponentDecorator } from 'twenty-ui/testing';

const meta = {
  component: Button,
  decorators: [ComponentDecorator],
  parameters: { container: { width: 240, height: 100 } },
};

export default meta;

export const Default = { args: { children: 'Save changes' } };
```

## CatalogDecorator

`CatalogDecorator` renders combinations of up to four dimensions from `parameters.catalog.dimensions`. Each dimension has a `name`, `values`, a `props(value)` mapper, and an optional `labels(value)` formatter. The mapper returns the props for that cell. `parameters.catalog.options.elementContainer` accepts `width`, `style`, and `className`.

```tsx theme={null}
import { Button, type ButtonVariant } from 'twenty-ui/primitives/input';
import { CatalogDecorator } from 'twenty-ui/testing';

const meta = { component: Button };
export default meta;

export const Variants = {
  args: { children: 'Save changes' },
  decorators: [CatalogDecorator],
  parameters: {
    catalog: {
      dimensions: [
        {
          name: 'variant',
          values: ['outline', 'solid', 'ghost'],
          props: (variant: ButtonVariant) => ({ variant }),
        },
      ],
    },
  },
};
```

## ComponentStorybookLayout

Use the layout directly when composing a preview outside a decorator. It accepts one child element.

```tsx theme={null}
import { Button } from 'twenty-ui/primitives/input';
import { ComponentStorybookLayout } from 'twenty-ui/testing';

export const ButtonPreview = () => (
  <ComponentStorybookLayout width={240} height={100}>
    <Button>Save changes</Button>
  </ComponentStorybookLayout>
);
```

<ParamField body="backgroundColor" type="string">
  Background color override.
</ParamField>

<ParamField body="children" type="Element" required>
  The component preview element.
</ParamField>

<ParamField body="height" type="number">
  Container height in pixels. Defaults to fit-content.
</ParamField>

<ParamField body="width" type="number">
  Container width in pixels. When omitted, the container has a 300px minimum width.
</ParamField>

## Documentation previews

Stories embedded in the documentation must be presentational and have no `play` function. Keep interaction tests in separate stories. Share explicit `args`, `render`, `decorators`, and `parameters` when needed, rather than spreading an interaction story into a preview. The documentation embed check rejects stories marked with Storybook's `play-fn` tag, including inherited play functions.