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 comes only with Flow. However, if you use TypeScript there are external TypeScript 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.

eslint-plugin-baseui

Base Web also has a plugin for ESLint that will warn you if you are using a deprecated component or API. It also flags certain common mistakes developers make when using baeui. In some cases it can also auto-fix issues for you!

Assuming you already have ESLint installed, run:

# npm
npm install eslint-plugin-baseui --save-dev
# yarn
yarn add eslint-plugin-baseui --dev

Then add it to your ESLint configuration:

{
"plugins": [
// ...
"baseui",
],
"rules": {
// ...
'baseui/deprecated-theme-api': "warn",
'baseui/deprecated-component-api': "warn",
'baseui/no-deep-imports': "warn",
}
}

baseui and eslint-plugin-baseui have their versions synced, so you should generally bump them together and always keep them on the same version:

{
"dependencies": {
"baseui": "10.0.0"
},
"devDependencies": {
"eslint-plugin-baseui": "10.0.0"
}
}

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.