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 noplay 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.