Ui libraries provide you with good set of already working components
It's much faster to npm i then code, code, code
Good ui libraries already faced tricky cases like accessibility, performance, etc
If bug not exists, you will not need to fix it
Any project is a subject to be abandoned
Abandoned project means security risks, not fixed bugs, no support for the next versions
The solution: find that lib that will abandoned after ending your own project
Bugs are everywhere, even in React
Fixing bugs in the 3rd party libraries is hard
The solution: always check project's maintainability first
Any piece of 3rd party code brings security risks
Not only direct dependency might be vulnerable
The solution: carefully monitor security notifications and use only wide known solutions
npm audit
You are limited with the size of the javascript bundle
The recommended size for today is around 350kB
The solution: Select carefully and don't forget about tree-shaking
Support - pay attention to the support obligation regarding bug fixes and new features
Rare scenarios - some paid libs provide very useful but rare functionality
Less guides
Irrelevant on the next job
Functional: Select with back-end search
Non-Functional: Responsive select
Known - at least 1000 stars
Alive and maintained - last commits in the previous month
Secure - no known vulnerabilities in prod dependencies
Don't waste much time with PoC - check only critical requirements and the points you are unsure with
Pay attention to the developer experience and bundle size
Bundlephobia - great tool to check how much your package will affect the final bundle
npm install @mui/material @emotion/react @emotion/styled<Typography align="left" component="h1" marginY={4}>
Pay attention to marginY
</Typography>This mean 4 predefined points - 4em, or 4px, or 4xWhatEver you need
This keeps your UI consistent
<Box marginLeft={3} sx={{ color: 'red' }} component="span">
Red text inside the span
</Box> <Container maxWidth="lg">
Some content
</Container><Grid container spacing={2}>
<Grid item xs={0} md={4}>
<ImageBlock />
</Grid>
<Grid item xs={12} md={8}>
<InformationBlock />
</Grid>
</Grid>