To use a variant in the Add Elements panel, it needs to meet certain requirements. If a variant shows up as invalid, it's important to understand why and how to fix it.

For a variant to be valid, it must be an element that uses common styles within the project, or a component that encapsulates its own styles and behavior. Components should have a single root element and properly manage their internal state and props.

If a variant appears as invalid in the Add Elements panel, hover over it to see the specific reason. Here are the most common issues and how to resolve them.

Error message: This board can't be used because it imports development-only code.

Styles used in variants must be common styles, not styles located in a board, used only for mocking isolated components or layouts.

Solution: Check that your variant uses component styles or common classes from common style files within your project, and move styles from variant-specific or board-specific style files to a common style file. For example, instead of using a locally defined style for a button, use a common class like button-primary.

For more information on working with common styles in Codux, refer here.

Error message: Variant cannot be used - should have a single element directly in Variant.

This error appears when the variant contains more than one root element. A valid variant should have only one root element – check that it does. If you need multiple elements, wrap them in a single parent element.

A valid variant might look like this:

</div>