Getting Started With Uber’s Base Web UI

Engineering May 21, 2021

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.


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 We hope our assistance will help!


Raghvendra Rathore

I am from India and currently working at JTC. I like to develop full-stack web applications, like to learn about new tech, and share my knowledge with the community. Apart from that, I love chess too.

Great! You've successfully subscribed.
Great! Next, complete checkout for full access.
Welcome back! You've successfully signed in.
Success! Your account is fully activated, you now have access to all content.