2nd/10_Wiki/Topics/Architecture/Uber Base Web.md

---
id: wiki-2026-0508-uber-base-web
title: Uber Base Web
category: 10_Wiki/Topics
status: verified
canonical_id: self
aliases: [Base Web, baseui, Uber Base, base-ui (uber)]
duplicate_of: none
source_trust_level: A
confidence_score: 0.85
verification_status: applied
tags: [react, design-system, uber, baseweb, components]
raw_sources: []
last_reinforced: 2026-05-10
github_commit: pending
tech_stack:
  language: typescript
  framework: react-baseweb
---

# Uber Base Web

## 매 한 줄
> **"매 Uber 의 React design system — 매 themeable, 매 accessible, 매 styletron-based"**. 2026 현재 Base Web 은 maintenance mode — 매 active development 는 적음. 매 최신 stack 은 보통 Radix / shadcn / Tailwind 의 선호. 매 historical / 매 enterprise reference.

## 매 핵심

### 매 layers
- **Components**: Button, Input, Modal, DataTable, Picker, etc.
- **Styletron**: CSS-in-JS engine — atomic CSS output.
- **Theme**: tokens (color, typography, spacing, sizing).
- **Overrides API**: deep customization 의 매 unique mechanism.

### 매 Overrides 특징
- 매 component 의 매 sub-part (`Root`, `Label`, `Input`, etc.) 를 매 style/component/props 의 override.
- 매 powerful 하지만 매 verbose.

### 매 응용
1. Uber internal apps (전통적).
2. Enterprise dashboards / data-heavy SaaS.
3. 매 highly-themeable products.

## 💻 패턴

### Setup
```bash
npm i baseui styletron-engine-monolithic styletron-react react react-dom
```

```tsx
import { Provider as StyletronProvider } from 'styletron-react';
import { Client as Styletron } from 'styletron-engine-monolithic';
import { LightTheme, BaseProvider } from 'baseui';

const engine = new Styletron();

export function App({ children }: { children: React.ReactNode }) {
  return (
    <StyletronProvider value={engine}>
      <BaseProvider theme={LightTheme}>
        {children}
      </BaseProvider>
    </StyletronProvider>
  );
}
```

### Button
```tsx
import { Button, KIND, SIZE, SHAPE } from 'baseui/button';

<Button kind={KIND.primary} size={SIZE.compact} shape={SHAPE.pill}>
  Save
</Button>
```

### Form input
```tsx
import { FormControl } from 'baseui/form-control';
import { Input } from 'baseui/input';

<FormControl label="Email" caption="We never share">
  <Input value={email} onChange={(e) => setEmail(e.currentTarget.value)} />
</FormControl>
```

### Modal
```tsx
import { Modal, ModalHeader, ModalBody, ModalFooter, ModalButton } from 'baseui/modal';

<Modal isOpen={open} onClose={() => setOpen(false)}>
  <ModalHeader>Confirm</ModalHeader>
  <ModalBody>Delete this?</ModalBody>
  <ModalFooter>
    <ModalButton kind="tertiary" onClick={() => setOpen(false)}>Cancel</ModalButton>
    <ModalButton onClick={onConfirm}>Delete</ModalButton>
  </ModalFooter>
</Modal>
```

### Overrides API
```tsx
import { Button } from 'baseui/button';

<Button
  overrides={{
    BaseButton: {
      style: ({ $theme }) => ({
        borderRadius: '999px',
        backgroundColor: $theme.colors.accent,
        ':hover': { backgroundColor: $theme.colors.accent700 },
      }),
    },
  }}
>
  Custom
</Button>
```

### Custom theme
```tsx
import { createTheme, lightThemePrimitives, BaseProvider } from 'baseui';

const primitives = {
  ...lightThemePrimitives,
  primaryFontFamily: 'Inter, system-ui, sans-serif',
};

const overrides = {
  colors: {
    buttonPrimaryFill: '#0F62FE',
    buttonPrimaryHover: '#0353E9',
  },
};

const theme = createTheme(primitives, overrides);

<BaseProvider theme={theme}>...</BaseProvider>
```

### DataTable (heavy)
```tsx
import { Unstable_StatefulDataTable as DataTable } from 'baseui/data-table';
import { StringColumn, NumericalColumn } from 'baseui/data-table';

const columns = [
  StringColumn({ title: 'Name', mapDataToValue: (d: Row) => d.name }),
  NumericalColumn({ title: 'Score', mapDataToValue: (d: Row) => d.score }),
];

<div style={{ height: 500 }}>
  <DataTable columns={columns} rows={rows.map(r => ({ id: r.id, data: r }))} />
</div>
```

### Server-side rendering
```tsx
// Next.js _document.tsx
import { Server, Sheet } from 'styletron-engine-monolithic';

const engine = new Server();
// 매 render 후 engine.getStylesheets() → 매 inject to head
```

### Migration off (2026 trend)
```text
Base Web component  →  매 Modern alternative
─────────────────────────────────────────────
Button             →  shadcn/ui Button (Radix Slot + Tailwind)
Modal              →  Radix Dialog + Tailwind
Input/FormControl  →  react-hook-form + Radix + Tailwind
DataTable          →  TanStack Table + Tailwind
Theme              →  CSS variables / Tailwind tokens
```

## 매 결정 기준
| 상황 | Approach |
|---|---|
| 매 existing Uber/Base Web codebase | 유지 — incremental migration |
| 매 new project (2026) | shadcn/ui + Radix + Tailwind 또는 Mantine |
| 매 enterprise / internal tool | Mantine / Ant Design |
| 매 mobile-web heavy | Tamagui / NativeBase |

**기본값**: 매 new project 는 매 Base Web 의 회피. 매 modern stack 사용.

## 🔗 Graph
- 부모: [[Design_System]]
- 변형: [[shadcn/ui]]
- 응용: [[Styletron]]
- Adjacent: [[Radix_UI]] · [[Tailwind CSS]]

## 🤖 LLM 활용
**언제**: 매 Overrides API debug, 매 theme migration, 매 Base Web → modern stack 변환.
**언제 X**: 매 new greenfield project — 매 더 modern alternative.

## ❌ 안티패턴
- **Overrides everywhere**: 매 verbose + 매 maintenance burden.
- **Mixing styletron + emotion**: 매 dual CSS-in-JS conflict.
- **No SSR setup**: 매 FOUC.
- **Greenfield Base Web in 2026**: 매 ecosystem 가 늙음.

## 🧪 검증 / 중복
- Verified (Base Web docs, Uber Engineering blog, GitHub uber/baseweb, 2026 maintenance status).
- 신뢰도 A-.

## 🕓 Changelog
| 날짜 | 변경 |
|---|---|
| 2026-05-08 | Phase 1 |
| 2026-05-10 | Manual cleanup — Base Web with Overrides API, theming, migration notes |