baseweb

Project Introduction: Base Web

Base Web is an open-source design system developed by Uber, offering a set of modern, responsive React components designed to facilitate rapid UI development. This project is especially beneficial for developers looking to create consistent and accessible user interfaces. Though Uber limits its active engagement with the project, the repository is maintained by mirroring the internal development processes, ensuring it stays up-to-date with current standards.

What is Base Web?

Base Web serves as the React implementation of the Base design system. At its core, it comprises a rich set of user interface components that are customizable and adaptable to different project needs. These components are designed to be responsive, ensuring that applications built with Base Web look great on any device.

How to Use Base Web

Base Web is available as a package on npm under the name baseui. To incorporate Base Web into a project, developers will need to install it alongside its peer dependencies, styletron-react and styletron-engine-monolithic. Below is the command to add Base Web using npm:

npm install baseui@next styletron-react styletron-engine-monolithic

Setting Up Base Web in a React Project

To use Base Web, developers must set up a Styletron engine, which is a key part of the architecture that handles styling. Here's a simple example of how to integrate Base Web components in a React application:

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>
  );
}

This example demonstrates the basic setup for using a StatefulInput component in a styled container. It uses Styletron for styling and a light theme provided by Base Web.

Documentation and Resources

Base Web's official documentation is accessible online, providing comprehensive guides and references for developers. Interested users can visit baseweb.design to explore more examples and learn how to effectively utilize the component library. Additionally, a detailed component catalog is available at baseweb.design/ladle, offering insights and previews of what Base Web components can do.

Base Web stands as a valuable tool for developers at Uber and the broader open-source community, providing robust solutions for building sophisticated, responsive, and user-friendly web applications.