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.

VSCode Extension

VS Code is one of the most popular code editors for web developers globally - as such, we have first-class support for it.

Features include:

  • code snippet support for quickly using Base Web components,
  • code coloring for theme values,
  • built-in theme cheat sheet,
  • shortcuts for the documentation package.

Learn more here, or grab the extension from the marketplace.

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 baseui. 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.