Component libraries

A component library ships finished components: markup, styles, behaviour and a theme. Material UI implements Google’s Material Design (version 2) for React. You install @mui/material together with Emotion, its default styling engine, then change colours, typography, spacing and shapes in a theme object, or a single element through the sx prop. Bootstrap does the same in CSS and HTML: it served as Twitter’s style guide for internal tools for more than a year before its public release in August 2011.

Pick one when the design system it implements is close enough to yours, or when looks matter less than speed, as in internal tools and admin screens. The cost shows when your design diverges: overrides component by component, extra CSS specificity for states such as disabled or focused, and breaking changes at each major version. Some libraries are open core: Material UI is MIT-licensed, while advanced data grid features in MUI X need a paid licence.