web-component-design

Create a context in the parent component that holds shared state, then attach child components as static properties that consume that context via a custom hook. The included Tabs example shows the full pattern with role, aria-selected, and keyboard support.

Tailwind with CVA suits rapid iteration and utility-based design tokens, styled-components offers full dynamic styling at runtime cost, and Vanilla Extract provides zero-runtime type-safe styles. Choose based on bundle size constraints and dynamic styling needs.

Use role="dialog" with aria-modal="true", trap focus inside the container, 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: accept an optional value prop for controlled mode and fall back to internal state initialized by defaultValue for uncontrolled mode. Detect controlled mode by checking whether value is undefined.

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.