Getting Started With Uber’s Base Web UI
Uber has numerous internal web applications used by every other department in 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 Web design system.
What is 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 include complex, ready-to-use components such as Datepicker and low-level composable primitives, such as Layer.
How to get started with Base Web?
Install Base Web
Base Web is available on npm as baseui
For Styletron + TS, you need to add some additional packages:
Base Web requires Styletron as a peer dependency. Styletron is a toolkit for component-oriented styling, part of the CSS-in-JS family.
Setup 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
Every Base Web component has a top-level prop called overrides. 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 thing you’re struggling with right now that we as a technology consulting company can help you with? Feel free to reach out to us at info@jalantechnologies.com. We hope our assistance will help!
