React Compound Components for 3D Customizer UI

Guidelines on compound component architectures, controlled vs uncontrolled state boundaries, and prop typing.
Published: 7/20/2026

React implementations of configurator primitives should leverage compound component patterns where appropriate, ensuring elements remain highly configurable while maintaining clean, readable JSX structures.

Ensure props are typed using shared schemas and avoid inline type definitions for complex object shapes.

  • Compound Components: Group related controls (e.g. OptionGroup + OptionGroup.Item) to avoid drilling callback and index props.
  • Controlled vs Uncontrolled: Configurator selection inputs are strictly controlled by the Aircada store. Do not manage option selections locally.
  • Prop Typing: Explicitly type all custom component props. Import shared interfaces rather than redefining shapes inline.
OptionSelector.tsx (typescript)
import React, { createContext, useContext } from 'react';

const OptionGroupContext = createContext(null);

export function OptionGroup({ selectedValue, onChange, children }) {
    return (
        <OptionGroupContext.Provider value={{ selectedValue, onChange }}>
            <div className="flex gap-2">{children}</div>
        </OptionGroupContext.Provider>
    );
}

OptionGroup.Item = function OptionItem({ value, label }) {
    const { selectedValue, onChange } = useContext(OptionGroupContext);
    const active = selectedValue === value;
    return (
        <button
            onClick={() => onChange(value)}
            className={`p-2 border ${active ? 'border-brand-accent' : 'border-base'}`}
        >
            {label}
        </button>
    );
};
Compound Component Pattern Example
SEO Title: React Compound Components for 3D Customizer UI
SEO Description: Implementation patterns for option groups, swatches, and customizer inputs using React context.
Index Alternates:compound componentsreact controlsshared props