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

Both Base Web and Styletron are flow typed out of the box. Do you use TypeScript? We provide external declarations:

yarn add @types/baseui
yarn add @types/styletron-standard
yarn add @types/styletron-react
yarn add @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.

The next step is to setup Styletron in your application. There are detailed guides for

• Fusion.js
• Next.js
• Gatsby
• Other React applications
• Bedrock (Uber only)

Styletron

Base Web always needs Styletron to function. You probably will not be able to build the whole application only with Base Web components and you will be creating some new components as well. Since Styletron is already loaded in your project, we recommend you using Styletron to style any new components:

import {styled} from 'baseui';

export default () => {
  const Anchor = styled('a', {
    fontSize: '20px',
    color: 'red',
  });
  return <Anchor href="/my-link">Custom Link</Anchor>;
};

What's the difference here?

import {styled} from 'baseui';
import {styled} from 'styletron-react';

It's exactly the same styled function, but Base Web adds the $theme variable that gives you access to all Base Web's design tokens. So if you want to use our primary color for that custom link, you can do:

import {styled} from 'baseui';

const Anchor = styled('a', ({$theme}) => ({
  color: $theme.colors.primary,
}));

Do you want to learn more about Styletron? Go to styletron.org.

Do you prefer other approaches when styling your components? CSS Modules? Styled-components? You can use them in parallel to Base Web and Styletron. Styletron adds only 8kB to your bundle and works in an isolation.

Next step

Check out the Usage section to see what you have to change in your application to start using Base Web.