Base Web React Components

• Documentation (run the docs site for local docs)
• Component catalog (run npm run dev:ladle)
• Stackblitz playground (see documentation-site for setup)

Maintenance status. We are limiting our engagement with this repository while still mirroring our internal development. For more details, see the blog post "Open Source Engagement and Future" in the docs. To open an issue or contribute, use this repository's GitHub Issues and pull requests.

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

Run the documentation site locally (npm run dev:docs) or the component catalog (npm run dev:ladle) to read the documentation and preview components.