building-compound-components

You build unstyled compound React components by designing namespaced component APIs that isolate behavior from presentation, using internal context for state distribution and exposing data via render props. This allows consumers to fully control rendering and styling.

The best way to expose internal state in headless UI primitives is through render props. By pre-computing props arrays with useMemo, you provide deterministic state access to consumers directly within the JSX layer without needing to export internal context hooks.

Context fail-fast safety in Radix-style React primitives throws a clear error when a consumer component is rendered outside its required provider, such as a Trigger used outside Component.Root. This prevents silent state failures and ensures correct provider nesting.

Yes, you can use asChild and forwardRef patterns together in headless React components. This Skill implements polymorphic rendering via Radix Slot to merge refs and props, ensuring consumer elements receive accurate ref forwarding while maintaining component behavior.

Use data-state attributes for CSS-driven styling when you need to toggle visual states purely through stylesheets, and use render props when consumers require programmatic access to the internal state values for conditional rendering logic within their JSX.

Compound React components trigger context safety errors during collection rendering if items are rendered outside the root provider hierarchy. You must ensure all namespaced consumer components are nested correctly within Component.Root to access the required internal context.