@blueprintjs/core VS Material UI

5. Blueprint

Official Website: https://blueprintjs.com/

Blueprint : A collection of components for building data-intensive interfaces for desktops. It specifically states that it is not designed to work for mobile. It is most likely better for building internal tools, dashboards, and Electron apps. Blueprint is one of the few libs in this list that has a Date Picker component.

Blueprint is a React-based UI toolkit for the web. It is optimised for building complex, data-dense web interfaces for desktop applications that run in modern browsers and IE11. (Source: Blueprint GitHub)

Blueprint is a UI toolkit for React that is designed to build data-rich interfaces for web applications. The core Blueprint NPM package contains 30+ common and unique React components like Button, Card, Menu, Form Group, File Input, etc.

Blueprintjs seem to not work in SSR. https://github.com/palantir/blueprint/issues/131

Maybe https://blueprintjs.com/ for you, although last time I checked it did not have explicit mobile or tablet support. (They don’t aim to break mobile or tablet but they don’t endeavour to support it.)

There are other libraries as well like tailwind, and component libraries like Semantic UI, React Bootstrap, Ant Design, Chakra UI, BluePrint, Material UI, etc., which you can try out.

7) Blueprint

> [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.

The first tool we’ll look at is Pigment CSS, a zero-runtime CSS-in-JS library built to extract the co-located styles into separate CSS files during the build phase and eliminate the need for runtime style processing.

🔍 Site ⭐ GitHub

You'll be glad to hear that MUI is zeroing in (pun intended) on a zero runtime solution right now as an alternative to Emotion [0], although that GitHub issue doesn't capture just how far it has come. Expect more soon!

[0] https://github.com/mui/material-ui/issues/38137

GitHub stars: 89.3k GitHub link: https://github.com/mui/material-ui Documentation: https://mui.com/material-ui/getting-started/

With GitHub stars of 88K(August 2023) and weekly NPM downloads of 2.9 million(August 2023), MUI is one of the most popular React UI libraries in the world.

MUI is a collection of UI tools and component libraries that helps you bring great designs to life in no time. The most popular of these is MUI Core.