Base Web

A React Component library implementing the Base design language
GitHub
8.74k
Created 7 years ago, last commit 7 days ago
231 contributors
3.42k commits
Stars added on GitHub, month by month
11
12
1
2
3
4
5
6
7
8
9
10
2023
2024
Stars added on GitHub, per day, on average
Yesterday
+1
Last week
+0.6
/day
Last month
+0.5
/day
Last 12 months
+0.7
/day
npmPackage on NPM
baseui
14.0.0
Monthly downloads on NPM
11
12
1
2
3
4
5
6
7
8
9
10
2023
2024
README

Uber is hiring in Amsterdam. Do you want to work on Base Web and other things? Please apply!

Base Web React Components

⚠️ Maintenance status. We are limiting our engagement with this repository while still mirroring our internal development. For more details, please check Open Source Engagement and Future. If you are an Uber developer and looking to open an issue, use this link or contribute.

Base is a design system comprised of modern, responsive, living components. Base Web is the React implementation of Base.

Usage

On npm, you can find Base Web as baseui.

Add baseui and its peer dependencies to your project:

# using pnpm
pnpm add baseui@next styletron-react styletron-engine-monolithic

# using npm
npm install baseui@next styletron-react styletron-engine-monolithic
import { Client as Styletron } from "styletron-engine-monolithic";
import { Provider as StyletronProvider } from "styletron-react";
import { LightTheme, BaseProvider, styled } from "baseui";
import { StatefulInput } from "baseui/input";

const engine = new Styletron();

const Centered = styled("div", {
  display: "flex",
  justifyContent: "center",
  alignItems: "center",
  height: "100%",
});

export default function Hello() {
  return (
    <StyletronProvider value={engine}>
      <BaseProvider theme={LightTheme}>
        <Centered>
          <StatefulInput />
        </Centered>
      </BaseProvider>
    </StyletronProvider>
  );
}

Both Base Web and Styletron come with TypeScript.

Docs

To read the documentation, please visit baseweb.design. To preview more component examples, please visit baseweb.design/ladle.