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

id, title, category, status, canonical_id, aliases, duplicate_of, source_trust_level, confidence_score, verification_status, tags, raw_sources, last_reinforced, github_commit, tech_stack

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

npm i baseui styletron-engine-monolithic styletron-react react react-dom

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

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

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

Form input

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

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

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

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)

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

// 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)

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