Skip to main content
twenty-ui/testing exposes Storybook decorators and preview layout helpers. Configure styles and a ThemeProvider 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.

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.

ComponentStorybookLayout

Use the layout directly when composing a preview outside a decorator. It accepts one child element.
string
Background color override.
Element
required
The component preview element.
number
Container height in pixels. Defaults to fit-content.
number
Container width in pixels. When omitted, the container has a 300px minimum width.

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.