Setup

Installing Base Web

Base Web is available on npm as baseui. This single package contains all Base Web components.

# using yarn
yarn add baseui styletron-engine-atomic styletron-react
# using npm
npm install baseui styletron-engine-atomic styletron-react

Base Web comes with both Flow and TypeScript. Styletron only with Flow. If you use TypeScript there are an external declarations:

yarn add @types/styletron-standard @types/styletron-react @types/styletron-engine-atomic

Our React components don't use PropTypes.

Styletron is a toolkit for component-oriented styling, part of the CSS in JS family. Base Web uses Styletron as a peer dependency to style all the elements, so you need to add them as dependencies too.

Adding Base Web to Your Application

In order to use Base Web, you need to do a small setup and wrap the root of your application with StyletronProvider and BaseProvider components:

import {Client as Styletron} from 'styletron-engine-atomic';
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>
  );
}

There are detailed guides for Styletron setup for the following frameworks:

Next step

Check out the Learn Base Web, to better understand the concepts of Base Web.

Setup
Installing Base Web
Adding Base Web to Your Application
Next step