@blueprintjs/core VS react-grid-layout

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

React-Grid-Layout is a user-friendly yet powerful library. My development experience with this library has been excellent. Its GitHub repository provides comprehensive documentation and live demos, making it highly recommended for developers to have a try.

Nice, I was just adding https://github.com/react-grid-layout/react-grid-layout to a dashboard, where you can drag/re-order charts. I assume this would make the implementation better.

Flexbox and Grid Layout: Leverage CSS features like flexbox and grid layout to create responsive layouts that adapt to different screen sizes

You can find additional information about the React-Grid-Layout in the repository and documentation.

This is react-grid-layout with some custom logic https://github.com/react-grid-layout/react-grid-layout

react-grid-layout looks like a good candidate, but it seems like it lacks a way to customize/add rules for positioning elements to prevent "stacks" of elements. Imagine a user models a brick wall and you want to prevent users from stacking bricks above each other (prevent bricks stack bond and allow something like running bond brick pattern)

I was looking to build a somewhat similar project with react and react grid layout.

Would it be possible to prototype something like this in figma? http://react-grid-layout.github.io/react-grid-layout/examples/0-showcase.html

react-grid-layout A draggable and resizable grid layout with responsive breakpoints, for React.