material-ui VS antd

1. Material UI

Material UI offers a large variety of built-in theme options mostly used and needed for your development. most popular ones include accordions, App bar, Bottom navigations, etc. You can explore all the components MUI offers here. MUI is currently having over 84.2K stars on Github. You can check the repo Here

Warning that MUIs Typescript autocompletion / Intellisense in VSCode is extremely slow and has been a longstanding issue since 2020. For me personally it makes it unuseable.

Some examples of popular component libraries include MUI (the artist formerly known as Material UI), Headless UI by Tailwind Labs, and of course Radix UI.

Also you could take a look at how MUI generates it's icons components: https://github.com/mui/material-ui/blob/master/packages/mui-icons-material/builder.js

Material UI has been around since 2014 when Google first released it, but only recently did it become a full-fledged design system with the addition of its own CSS library. The original Material UI was just a set of guidelines for designers who wanted to use Google's design language in their projects. It didn't offer any code or tools that could be used to build sites or apps with it. To date, it has been downloaded over (npm) 295 million times and it has around 81,000+ GitHub stars.

In recent times, one of the robust ways to authenticate a login credential is JWT authentication. Today, we will discuss how we can implement JWT authentication for a login app in React. For styling, I am using Material UI for React. Originally, I implemented JWT authentication over a private login API; replace this API with your private API.

MUI

Just to give an example, some of the projects that I've found interesting are: https://github.com/orgs/TheOdinProject/repositories https://github.com/project-slippi https://github.com/frankborden/slippilab https://github.com/RCVolus/lol-pick-ban-ui https://github.com/OpenLitterMap/openlittermap-web https://github.com/mui/material-ui/issues

2. Ant Design

Ant Design by numbers is one of the most popular CSS React frameworks. It is best known for designing visually appealing UI components. For front-end development, Ant Design provides a sizable and customized design library, and for client development, a GUI design. The framework's design components are easy to integrate, and can be used directly in ReactJS. This framework is notably compatible with iOS, Android, and the web. It has built-in theme options ranging from typography, Data entry, Navigation, Data display amongst others. Explore more of these built in components here Ant Design currently has over 83.9K stars on Github. You can check the repo Here

We can see all of the installed packages like Ant Design, route provider, and data provider already imported and passed successfully so we can use them in the refine app.

Antd é a minha favorita

I really like https://ant.design/, it's very well designed and very functional. For example, I have not seen in any framework such usefull tables. I use it daily at work, it's a real pleasure.

Superplate is a CLI tool for quickly bootstrapping a refine project. The tool provides the option of setting up a headless refine project or a project paired with third-party UI libraries such as Ant design and Material UI. We'll be using the latter for this tutorial.

UI is built with React and Ant Design

But the problem is that it Ant Design uses Less CSS. To use Less, I need to eject my CRA application and use less and less-loader packages. Then, I can override variables simply importing a file overriding the variables.

https://ant.design/