web-component-design

Create a parent component that holds shared state in a React Context, then attach child components as static properties like Tabs.List and Tabs.Tab. Children consume the context via a custom hook that throws if used outside the parent.

Tailwind with CVA suits design systems needing utility-based variants with zero runtime. styled-components offers full dynamic styling at runtime cost. Vanilla Extract provides type-safe, zero-runtime CSS for performance-critical applications.

Use role="dialog" with aria-modal="true", trap focus inside the dialog, close on Escape, and restore focus to the triggering element on close. Render via createPortal and label the dialog with aria-labelledby.

Support both when possible: accept an optional value prop for controlled mode and defaultValue for uncontrolled mode. Detect controlled mode by checking whether value is undefined, and always call onChange with new values.

Re-render cascades usually come from unstable context values, inline object props, or missing memoization. Profile with React DevTools, then apply React.memo, useMemo, and useCallback to stabilize references passed to children.