Exact exports, props, slots, hooks, and runtime behavior belong to SDK package reference. Examples are guidance unless explicitly marked copy-paste-safe.

Review component intent and composition guidance before wiring this component into an app. Then use the live playground to confirm the rendered behavior.

Playground

• Import path: @enadhq/enad-react-sdk/client/storefront.
• Live playground: /components/commerce/color-swatch.

When to use it

Use ColorSwatch when the option itself is visual enough that a text-only control would slow the decision down. It works well for finishes, paint colors, and fabric tones.

Always pair the swatch with a readable label somewhere nearby so the choice is not communicated by color alone.

Composition notes

Use variant="circle" for classic commerce swatches and variant="rounded" when the row needs a slightly softer or denser feel. size="compact" is useful when many options need to fit in a tight space.

Keep the selected state connected to the same product option canonical reference as the rest of the PDP controls.

Behavior and theming guidance

Swatches should be easy to compare at a glance. Keep spacing consistent and avoid mixing several visual swatch treatments in the same selector.

When a product has many subtle finishes, consider showing the selected label and maybe a larger preview elsewhere so the decision stays clear.

Contract scope

• Use SDK package reference for exact props, exports, slots, hooks, and runtime behavior.
• Public import: @enadhq/enad-react-sdk/client/storefront.
• Playground route: /sandbox?component=ColorSwatch.
• Copy/paste scope: guidance-only. Treat examples as guidance until checked against SDK package reference.

Implementation notes