base web VS Material Components Web

🔍 Site ⭐ GitHub

Uber's

Base web https://baseweb.design/ or Material UI https://mui.com/

Great, thank you! There are many I've already found at first look. Which design system do you think is the best? I always look for the ones that come with code, like Uber's Base and IBM's Carbon Design System both built with React.

I've also played around with Base which has much more flexibility but takes a little more work to use.

We used Base Web to benchmark Ladle and latest Storybook v6.4.19. Base Web is a complex component library and has about 350 stories. The Storybook uses the default bootstrapped settings. The test is made on MBP 2018, i7 2.7 GHz. The time is measured in seconds and less is better.

A standout example of these is Base Web (in npm as baseui), a design system and UI library created by Uber to help devs create beautiful, device-agnostic apps. Base Web consists of a series of React components and is designed to be “reliable, accessible, and extensively customizable.”

Base Web! By far the most underrated UI library, which is open sourced and maintained by Uber. Visually it’s unopinionated because it’s meant to be overridden, and has a nice API for overriding every aspect of it with a robust theming config.

From evergreen : https://evergreen.segment.com/ From uber : https://baseweb.design/

Eg : Uber's design system

https://github.com/firebase/firebase-ios-sdk/issues/6115

https://github.com/material-components/material-components-w...

Two examples that come to mind but there are plenty

I highly recommend https://github.com/material-components/material-components-web

Latest stable version: v12.0.0 Github stars: 15.7K Development: active Long of active development: 8 years Active maintainers: 2 Contributors: 380 Number of commits: 6835 License: MIT Used by: 6K Github projects Git repository: https://github.com/material-components/material-components-web

Material design by Google

One other thought: have you tried vanilla JS plus a widget library such as Material Design Web? It might be good to get more comfortable with vanilla JS, using fancy widgets only where needed, and then later when you consider using a framework it will be that much easier to learn and work with.

First off, for your issue, I think it's very helpful to learn design and layout from a design system like Material.

One interesting thing to note about this example is the use of @material/mdc-auto-init which will auto initialize all your material components instead of manually having to attach to each one. That should make it easier with working with the dom.

Today I've managed to scratch-build Material Design's top app bar, in particular its behaviour of sliding up/down if the user scrolls down/up, without relying on libraries like Material Components Web or Material-UI.