Base Web

Base is a design system comprised of modern, responsive, living components. Base Web is the React implementation of Base.

Base Web provides a robust suite of components out of the box. These include complex, ready-to-use components such as the Datepicker and low-level composable primitives, such as Layer.

Check out the component gallery.

Base Web does the heavy lifting for you—components are built with accessibility being a first-class citizen. Developers using Base Web have the peace of mind that keyboard navigation is reliable and works well with screen readers.

Styletron is the CSS-in-JS engine powering Base Web.

Styletron was designed for high performance, not only in terms of tiny CSS output but also execution time. Unlike many other CSS-in-JS libraries that produce scoped CSS, Styletron doesn’t need to perform expensive hash computations. Furthermore, because it operates on individual declarations rather than entire rules, Styletron is able to reduce cache misses and take advantage of extremely granular memoization to avoid unnecessary work.

Base Web VS Code Extension

Installing Base Web

npm i baseui styletron-engine-atomic styletron-react

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 set up for the following frameworks:

• Fusion.js

• Next.js

• Gatsby

• Other React applications

Even if you are not interested in creating a custom theme, select a theme as part of Base Web’s boilerplate setup.

The theme object itself is nothing special. It is just an object with specific properties (a specific “shape”) that can be passed to our ThemeProvider or BaseProvider.

A Custom Theme

import {createTheme} from 'baseui';
const primitives = {
  accent: '#F127E4', // hot pink
  accent50: '#FDEDFC',
  accent100: '#FCD3F9',
  accent200: '#F89FF3',
  accent300: '#F45AEA',
  accent400: '#F127E4',
  accent500: '#B71DAD',
  accent600: '#901788',
  accent700: '#600F5B',
};
const overrides = {
  colors: {
    buttonSecondaryFill: primitives.accent100,
    buttonSecondaryText: primitives.accent,
    buttonSecondaryHover: primitives.accent200,
    buttonSecondaryActive: primitives.accent300,
    buttonSecondarySelectedFill: primitives.accent200,
    buttonSecondarySelectedText: primitives.accent,
    buttonSecondarySpinnerForeground: primitives.accent700,
    buttonSecondarySpinnerBackground: primitives.accent300,
  },
};
const theme = createTheme(primitives, overrides);

The overridesobject will be deep-merged with the initial result of mappingprimitivesto all of the theme properties. overrides is just a convenient shortcut for deep-merging assignments onto your theme object.

Read more about the Theming.

Base Web on Figma Communities

Base Web is available as an open-source gallery on Figma.

Go to Figma Community. Click on the "Base Gallery", and hit "Duplicate" so you can get your copy of the Base Gallery.