Base Web — React Component Library by Uber with Style Overrides

Introduction

Base Web is Uber's open-source React component library built on the Styletron CSS-in-JS engine. It was designed to handle the complexity of Uber's internal tools, where components need to be deeply customizable without forking. Its standout feature is the overrides API, which lets consumers restyle and reshape any internal sub-element of a component.

What Base Web Does

• Provides 50+ production-grade React components including date pickers, data tables, modals, and navigation
• Offers an overrides API that exposes every internal element for style and prop customization
• Uses Styletron for atomic CSS-in-JS with near-zero runtime overhead
• Implements WAI-ARIA patterns for keyboard navigation, screen reader support, and focus management
• Supports theme customization with a typed theme object for colors, typography, and spacing

Architecture Overview

Each Base Web component is composed of styled sub-components (called shared elements) that are individually addressable via the overrides prop. Styletron compiles style objects into atomic CSS classes, deduplicating rules across the application for minimal CSS output. The theme system uses React Context to provide design tokens, and components read from the theme at render time. The library is tree-shakeable with per-component entry points.

Self-Hosting & Configuration

• Wrap your React app with StyletronProvider and BaseProvider at the root
• Customize the theme by passing a theme override object to BaseProvider
• Use the overrides prop on any component to restyle internal elements
• Import components individually from baseui/button, baseui/input, etc. for tree-shaking
• Configure SSR by using styletron-engine-monolithic with server-side style extraction

Key Features

• Overrides API that allows customizing styles, props, and even replacing internal sub-components
• Atomic CSS output via Styletron for optimal production bundle sizes
• Comprehensive date and time components with timezone support
• Data table component with sorting, filtering, column resizing, and batch actions
• Full TypeScript type definitions with generics for component props

Comparison with Similar Tools

• Material UI (MUI) — Google's Material Design system; Base Web follows Uber's Base design language with a more granular override system
• Chakra UI — utility-prop-driven styling; Base Web uses a structured overrides API and atomic CSS
• Ant Design — enterprise component library with a different design language; Base Web provides deeper per-element customization
• Mantine — modern hooks-based library; Base Web's Styletron foundation offers unique atomic CSS benefits

FAQ

Q: Why Styletron instead of styled-components or Emotion? A: Styletron generates atomic CSS classes, which deduplicates repeated styles and results in smaller CSS output for large applications.

Q: Can I use Base Web without the full theme? A: BaseProvider with a LightTheme or DarkTheme is required, but you can override any token in the theme object.

Q: Is Base Web suitable for mobile-responsive apps? A: Yes, components are responsive by default and the layout primitives support responsive breakpoints.

Q: How do I contribute or report issues? A: Contributions are welcome via the GitHub repository. The project follows a standard PR review process.

Sources

• https://github.com/uber/baseweb
• https://baseweb.design