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.Panel. Children consume the context via a custom hook that throws if used outside the parent.

Tailwind with class-variance-authority suits design systems needing utility-based variants with zero runtime. styled-components and Emotion offer full dynamic styling at runtime cost. Vanilla Extract provides type-safe, zero-runtime CSS for performance-critical apps.

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

Support both when possible: check if the value prop is undefined to detect uncontrolled mode, then manage internal state while still calling onChange. This gives consumers flexibility for simple forms or fully controlled state management.

Re-render cascades usually come from unstable prop references or missing memoization. Profile with React DevTools, then apply React.memo, useMemo, and useCallback to expensive subtrees, and avoid creating new objects inline in JSX.