Every React project hits the same fork early on: build the button, the menu and the chart yourself, or pull in a library. Build too much and you spend a month on a date picker. Pull in too much and your bundle ends up bigger than your app.
This is the short list we actually use across dashboards and video call front ends, including the admin panels we build around Jitsi. It is not a top-50. Each pick comes with the case where it is the wrong choice, because that part matters more.
UI component libraries
Material UI
Material UI (MUI) is the default for a reason: buttons, dialogs, tables, date pickers and a theme system that lets you change colours and spacing in one place. It follows Google's Material Design, but it is maintained by the MUI company, not Google.
The catch is the look. Out of the box every MUI app looks like every other MUI app, and heavy restyling fights the library. If your designer hands you something far from Material, pick a headless library instead.
React-Bootstrap
React-Bootstrap gives you Bootstrap's components as real React components, without jQuery. It is the easy choice when your team already thinks in Bootstrap's grid, or when you are moving an old Bootstrap site to React piece by piece.
Blueprint
Blueprint is built for dense, desktop-style apps: data tables, trees, menus, lots of controls on one screen. It is written in TypeScript and styled with Sass. For a marketing site it is overkill. For an internal admin tool it is very good.
Best React toolbar components
A toolbar looks trivial until someone asks for keyboard support. A proper toolbar lets the user tab into it once and move between buttons with the arrow keys, following the WAI-ARIA toolbar pattern. Most hand-rolled toolbars skip that.
| Library | Component | Good for |
|---|---|---|
| Material UI | AppBar + Toolbar | Top app bars in MUI apps |
| React Aria | Toolbar | Accessible toolbars with your own styling |
| Blueprint | Navbar, ButtonGroup | Dense desktop-style tools |
| React-Bootstrap | ButtonToolbar | Simple grouped buttons in Bootstrap apps |
For a video call interface, where the toolbar is the main control surface (mute, camera, screen share, leave), we lean on React Aria's Toolbar. You get the keyboard behaviour for free and keep full control over how it looks. If you are changing the toolbar in Jitsi Meet itself, that lives in its own React code; our guide to customizing the Jitsi Meet front end shows where.
Drag and drop: dnd kit or React DnD
The original version of this article recommended React DnD. It still works, and it is still a clean design. But for new projects the best DnD library for React is usually dnd kit: touch and keyboard dragging work without extra backends, and the sortable preset handles the most common job, reordering a list, in a few lines.
npm install @dnd-kit/core @dnd-kit/sortablePick React DnD when you are already on it, or when you need to drag native files and browser items between separate parts of the page. Do not rewrite working drag and drop just to switch.
Charts with Recharts
Recharts builds charts out of components: LineChart, XAxis, Tooltip. It reads like the rest of your React code, so it is the easiest chart library to hand to a new developer.
<LineChart width={600} height={300} data={data}>
<XAxis dataKey="time" />
<YAxis />
<Tooltip />
<Line type="monotone" dataKey="participants" stroke="#2563eb" />
</LineChart>It renders SVG, and SVG slows down once you plot thousands of points. For a live metrics dashboard with a lot of data, skip it and look at Grafana instead of building charts at all. Our Grafana vs Kibana comparison covers that route.
Routing
The 2019 version of this list included UI-Router for React. Most teams today use React Router, or TanStack Router if they want fully typed routes. If your app runs on Next.js or Remix, routing is already built in; don't add a second router on top.
Check the bundle before you commit
If you are building a video app
None of these libraries handle video. For calls inside a React app, you either embed a meeting (see integrating Jitsi Meet into React) or work with the browser APIs directly, starting with getUserMedia for camera and microphone access.
Frequently Asked Questions
What is the best React toolbar library?
If you already use Material UI, its AppBar and Toolbar components are the quickest route. For an accessible toolbar with proper arrow-key navigation and no styling opinions, React Aria's Toolbar is the better base. Blueprint has a solid Navbar for dense desktop-style apps.
Is React DnD still maintained?
React DnD still works, but most new projects pick dnd kit instead. It supports touch and keyboard dragging out of the box, which React DnD needs extra backends for. For sortable lists, dnd kit's sortable preset saves the most code.
Should I use React-Bootstrap or Material UI?
Use React-Bootstrap if your team already knows Bootstrap's grid and class names, or you are porting a Bootstrap site. Use Material UI if you want a larger component set and a theme system. Mixing both in one app doubles your CSS for little gain.
Which React chart library is easiest to start with?
Recharts. Charts are built from React components like LineChart, XAxis and Tooltip, so it reads like the rest of your code. It gets slow past a few thousand points; for large datasets look at a canvas-based library instead.
Do I still need a router library for React?
For a single-page app, yes: React Router or TanStack Router. If you build on a framework like Next.js or Remix, routing comes with it and you should not add a separate router.
