Base Web
By Uber
Base Web is a React component library built by Uber that implements the Base design system, providing pre-styled, accessible UI primitives such as buttons, modals, data tables, and form controls. It is built on top of a CSS-in-JS styling…
Definition
Base Web is a React component library built by Uber that implements the Base design system, providing pre-styled, accessible UI primitives such as buttons, modals, data tables, and form controls. It is built on top of a CSS-in-JS styling engine, letting teams theme every component through a centralized token object rather than overriding classes. It targets large product teams that need a consistent design language across many internal applications built with React.
Overview
Base Web grew out of Uber's need to keep dozens of internal React applications visually and behaviorally consistent without every team reinventing buttons, tables, and dialogs from scratch. Rather than shipping a fixed visual style, it separates the component logic from its appearance: each component reads its look from a shared theme object, so changing brand colors, spacing, or typography across an entire product surface is a matter of editing the theme rather than hunting through component overrides scattered across a codebase. Mechanically, Base Web uses a styling engine (historically Styletron, a CSS-in-JS library optimized for atomic class generation) to compute styles at runtime or build time and inject only the CSS rules actually used on a page. Components accept an overrides prop that lets a consumer replace any internal sub-element's styles or even swap the underlying DOM node, which is how the library achieves both strict design consistency by default and full customizability when a product genuinely needs to deviate. Accessibility attributes and keyboard interaction patterns are built into each primitive rather than left to the consumer to add. This built-in accessibility layer covers focus management, ARIA roles, and screen-reader labeling for complex widgets like date pickers and comboboxes, which are otherwise time-consuming for individual teams to get right on their own. Among React component libraries, Base Web sits closer to Chakra UI or Mantine in offering a themeable, headless-leaning primitive set, rather than to Bootstrap-derived libraries like React Bootstrap or Reactstrap, which wrap a pre-existing CSS framework's class names. It is more opinionated about accessibility and theming architecture than utility-first approaches, and less opinionated about final visual style than component kits that ship a strong default look, such as Material UI or Ant Design. In practice, teams adopt Base Web when they are building an internal design system on top of React and want a solid set of accessible primitives to extend rather than starting from raw HTML elements. Uber itself uses it across its internal tooling and some public-facing products, and external teams have adopted it for admin dashboards and enterprise applications where consistency across many screens matters more than a distinctive visual identity. The trade-offs are real: the overrides API, while powerful, has a learning curve, and its component visual defaults read as utilitarian rather than polished out of the box, so teams often invest meaningfully in theming before shipping a public product. Base Web is not a general-purpose CSS framework and offers no utility classes, so it is a poor fit for teams that prefer utility-first styling or need something usable outside a React codebase.
Key Features
- Theme object drives colors, typography, and spacing across all components centrally
- Overrides API allows replacing any sub-element's style or DOM node
- Accessible-by-default components with built-in keyboard and ARIA support
- Atomic CSS-in-JS styling engine minimizes generated stylesheet size
- Extensive component set covering forms, navigation, data display, and overlays
- TypeScript-first API with strong typing for props and theme tokens
- Server-side rendering support for styled output
- Design system tooling for maintaining visual consistency at scale
Use Cases
Alternatives
Frequently Asked Questions
From the Blog
Base Models vs Instruction-Tuned Models: What Actually Changes
A base model continues text; an instruction-tuned model answers requests. The weights differ only by a comparatively small post-training stage, but that stage changes prompt format, stopping behaviour, refusal patterns and output style. This guide shows what actually shifts and when a base checkpoint is still the better starting point.
Read More ProgrammingRecursion Explained With Simple Examples
Recursion is when a function solves a problem by calling itself on smaller pieces. Learn how it works, why it needs a base case, and when to use it.
Read More Career GrowthHow to Negotiate Your Tech Salary
To negotiate your tech salary, research market rates, let the employer name a number first, anchor on your value, and negotiate the whole package, not just base pay.
Read More AI & TechnologyWhat Is LoRA Fine-Tuning Explained
LoRA fine-tunes large models by training small adapter matrices instead of all weights, cutting memory and cost dramatically while keeping the base frozen.
Read More