react-composable-components

Use the compound component pattern to share UI state via React Context, allowing subcomponents like Tabs or Accordion items to communicate internally. This eliminates the need to pass state down through every layer as explicit props.

React forwardRef works with composable components by allowing parent elements to attach refs to underlying DOM nodes. This Skill supports forwardRef alongside prop spreading and className merging to maintain predictable APIs across subcomponents.

Handle className merging by providing transparent className and ...props support with safe utility class merging. This ensures custom styles passed into parent components combine cleanly with default subcomponent styles without conflicts.

Avoid breaking down a React component into subcomponents when the UI element is simple enough that decomposition would introduce unnecessary abstraction layers. The composable pattern targets large monolithic components requiring flexible layout and customizable composition.