reactstrap

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.

Hello! I strongly recommend reactstrap or react-bootstrap over "vanilla" Bootstrap. Bootstrap relies on jQuery (that is, until v4.x) for all interactive elements, e.g. collapsibles, carousels, etc.

Reactstrap handles this "the React way", which is a big plus if you don't want to reinvent the wheel. I have yet to see major drawbacks. However you have to carefully read the docs, especially which props are accepted by Reactstrap components.

For example you might want to have internal navigation links handled by React Router's Link or NavLink component. In the latter case you have to do:

import { NavLink as RouterNavLink } from 'react-router-dom'

so that the name doesn't collide with Reactstrap's own NavLink.

Then you can use something like:

<NavLink tag={RouterNavLink} to="/about">About</NavLink>

I also mentioned react-bootstrap which had Bootstrap 4.x support added way after Reactstrap, but seems to be a good option too.

React strap is react wrapper for bootstrap. React strap will only provide structural react components. So both are same