Material UI VS primereact

MUI is the OG of UI component libraries. They’ve been at the top back since when Bootstrap was a contender and are still maintaining a top spot in the era of Tailwind and other UI libraries. With more than 95k GitHub stars (and counting), and top companies using it in production, I’d say this is the open-source React component library with the most stars. MUI also has paid components available for enterprise users.

🎨 Project: Material UI 💡 Why Contribute: If design systems and UI frameworks are your thing, Material UI is a must-contribute project. Help maintain or enhance one of the most popular React component libraries used by thousands of developers globally.

Coincidentally, I thought it was this bug that bit you; it was reported a couple of days ago https://github.com/mui/material-ui/issues/43823

To start, I'll be using MUI's Album Template for demo purposes, as I feel that it uses some of the more common components that you'll likely be using. Please note that this repo is template is older so some of the components in it are deprecated.

GitHub: https://github.com/mui/material-ui

Material UI GitHub Repository

The most popular CSS-in-JS libraries are styled-components and Emotion. MUI, a React component library, recently released a promising, zero-runtime CSS-in-JS library called Pigment CSS. This article will explore the features and benefits of Pigment CSS, offering a comparison to styled-components and Emotion based on performance, features, developer experience, and community support.

> [0, 1, 2, -1, 10, 11, 12, 13, 14, -1, 26, 27, 28]

What is that supposed to represent in terms of pagination? Are they cursors...?

> I didn't think the code that generated the HTML from that was really worth testing because it was so superficial.

For what it's worth (as a frontend person), pagination is traditionally one of the trickier things for us to make sure is working correctly. Off-by-one mistakes can happen for example (especially with zero-indexed items). Or sometimes the prev/next buttons don't correctly use the same math as the page 1, 2, 3, etc. buttons. It gets even harder if you don't know the total length in the beginning, or if you allow multiple page sizes or sorts/filters, or use lazy loading, etc.

For those reasons I try to use a ready-built lib like MUI where all that is already tested internally (like https://github.com/mui/material-ui/blob/next/packages/mui-ma... or https://github.com/mui/material-ui/blob/next/packages/mui-ba...), but we still add our own automated and manual tests in our own usages.

But then again I'm bad at math and division, lol, so maybe it's just my own weakness.

PrimeReact

🛠️ What it does: Provides a vast ecosystem of components with built-in functionality ✨ Why it's awesome: Complete solution with themes, design system, and ready-to-use components 🎯 Use it for: Enterprise-level applications requiring extensive UI components 🔗 Link: PrimeReact

I've been using the likes of PrimeVue (https://primevue.org/), PrimeReact (https://primereact.org/) and PrimeNG (https://primeng.org/) because they attempt to give you a library of components that work well out of the box and have a similar API across multiple technologies: Vue, React and Angular, respectively.

I feel like at some point I'll probably make a project with just jQuery and possibly jQuery UI for the sake of it, since what's there doesn't seem too flashy, but would probably work just fine for most we based CRUD needs. I might end up rediscovering up close why people moved to the above in droves instead of jQuery, but honestly something that you just drop in and that works has a lot of appeal. No complex toolchains, no configuring a bunch of plugins and registering them with the app, no endless abstractions for state management and things about render loops to keep in mind, just a silly JS import and writing some shlocky code that still sorta works.

I like to consider the UI of Kanboard as a good example. It's minimalist, but works great for what it is: https://kanboard.org/

Awesome modern react components | PrimeReact https://primereact.org/

PrimeReact: Prime components for your React applications

If you know Material UI, Chakra UI or Primereact, those are react UI component libraries.