Uber Base Web UI– Uber relies on a multitude of internal web applications that play an integral role in supporting the operations of various departments within the company.
Employees need to learn how to interact with each application that created an issue for them. To solve this issue, Uber came out with a universal system which resulted in the Base design system.
What is the Base Web?
Base Web is an open-source toolkit of React components and utilities that essentially align with the Base Design System.
Base Web offers a robust suite of components out of the box. These encompass a range of components, from sophisticated, readily deployable elements like Datepicker to fundamental, composable primitives like Layer.
How to get started with Base Web?
Install Base Web
Base Web can be found on npm under the package name “baseui.”
For Styletron + TS, you need to add some additional packages:
Base Web requires Styletron as a peer dependency. Styletron is a component-oriented styling toolkit, which is a member of the CSS-in-JS family.
Setup Uber Base Web UI in your application
You need to wrap the root of your application with StyletronProvider and BaseProvider components.
Setup Base Web Theme
Base Web theme is provided to components through React’s context system.
Base Web UI provides us with built-in Light and Dark default themes, which can be passed to our application by using BaseProvider at the root of your application as shown.
Customizing Base Web Theme
You can customize the default theme by using the createTheme utility function as shown below.
As shown in the code, customize the default light theme, createTheme will use these primitive values to fill out all required properties on your theme object.
Primitives are made up mostly of colors (primary, accent, etc.), gradients of those colors (primary100, primary200, etc.), and a primaryFontFamily. These are passed as the first argument to createTheme.
Overrides
Each Base Web component features a primary prop known as “overrides” at the top level. Overrides give you full access to all those subcomponents and let you override these:
- Styles of the subcomponent
- Props of the subcomponent
- The whole subcomponent
Regularly updated library
With the regularly updated library comes great support for issues and bugs from the Base Web team.
The team responds quickly to any issues and provides fixes in minor releases. If you want to know more about BaseWeb UI’s upcoming updates and releases, you can check that here
What’s the biggest hurdle you’re currently grappling with? As a technology consulting company, our mission is to provide tailored solutions to address your specific pain points. Contact us today, and let’s work together to overcome your challenges and drive your success forward.
