Material-UI

In your question, you mention Material-UI (https://m3.material.io/get-started), but what you really want is MUI (https://mui.com/). This is a great UI framework that I have used in several projects. It comes with a complete set of components and is easily themable and customizable. Some people are against it because it may increase your bundle size, so to avoid that make sure to always use path imports (https://mui.com/material-ui/guides/minimizing-bundle-size/#option-one-use-path-imports).

If your designer asked for it then use material ui. Because this means that designer will design according to design system of material and probably not make different components from material ui. This will speed up your development speed up to x2.

But you need take some gotchas into account. 1. Material ui uses css in js and it hardly support new react nextjs features. And currently material team works on it. 2. It will be hard to customize components if you need something different. 3. If you have totally different design system and want to addapt material ui in my opinion it is worst idea. Because it won't be perfect.

1. Radix ui, react aria i think more preferable if you want to craft components from scratch how you want without losing ♿ accessiblty

2. Tailwind, panda css or vanilla extract are better solutions today for styling components according to design system.

   1. Don't forget it will take time without material ui

When considering long-term support, Material-UI is a better choice for a robust and well-documented TypeScript integration, offering strong community backing. Converting Material-UI into TypeScript may require some initial effort, but it's likely to have better scalability and support. On the other hand, Flowbite offers TypeScript definition files out of the box, making it quicker to integrate, but with less community support, customization could lead to additional maintenance, especially with component type definitions. For ease of customization and future-proofing, Material-UI may be a safer choice.

I would not suggest that, as Material-UI and TailwindCSS are CSS frameworks, and using them together might be conflicting. Try to stick to one framework if possible. You can find some of the ready-to-use components here https://headlessui.com, it is maintained by the same team who made TailwindCSS and you can style those components with TailwindCSS. I hope this helps you.

yes you can do it but I don't see the point using them both. I would strongly recommend you to stick to one of them instead.

MaterialUI may be overkill for such a simple project, you're right. So I'm recommending both tools in this StackShare form.

But if it's planned to increase the project, consider migrating it to MUI in advance. Among its pros I can name: - brilliant TS support - all popular use cases covered - well documented - backed by sponsors == will live and be maintained

I recommend Material-UI for a couple reasons. 1. It’s very easy to throw MUI into React. You can essentially just import the components you need in place of yours. Effectively, for a button, for example, you can swap out <button for MUI’s <Button and you can be done if that’s all you want. Looks great, no hassle, and they have simple guides to help you make good UI decisions on top of that. 2. It’s pretty up-to-date, and it has great docs. I use MUI all the time, and if I were doing a simple, small user-base app, I would definitely use it for the sake of convenience and speed of development.

It is normal. A perfect UI Framework for your needs does not exists. As long as the overrides aren’t too large, it really worth it. It saves not only CSS, also Components features and some browsers compatibilities issues.

Try to keep it simple, maybe the changes are not always needed. They look pretty good by default. And match a whole design.

The other way is (having a professional designer design) from scratch, which is a lot of extra work. (If you don’t have such profesional, don’t even try it). But if it’s mandatory a fixed desig, very different from Material UI, go for it.

Finding another UI Framework, probably less wide/mature than Material UI for React, will requires changes too.

Of course try to reuse components. Check the Theme for custom colors, ...

I hope it helps. This is my opinion. I have used Material UI for a couple of projects, happy doing it.