At most one component library family

Running MUI alongside Chakra ships two theme providers, two sets of primitives, two typography scales, and often two CSS-in-JS runtimes to every page. Bundle size roughly doubles for the styled-component portion of your app, Core Web Vitals degrade on mobile, and designers cannot produce a coherent visual system because every component comes from a different opinionated foundation. Dark mode toggles typically work in one library and break in the other.

Audit usage with grep -rl "from '@mui/material'" src/ | wc -l and the equivalent for the other library, then port the smaller side. Remove the loser's peer dependencies in one step: npm uninstall @chakra-ui/react @emotion/react @emotion/styled. Delete the provider wrapper from src/app/layout.tsx or src/providers/index.tsx and verify theme tokens now flow from a single source. Run a production build and confirm the removed library is no longer in the bundle analyzer output.