usage.mdx

import Layout from '../../components/layout'; import Example from '../../components/example';

import Usage from 'examples/getting-started/usage.js';

export default Layout;

Base Web Quickstart

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>
  );
}

The above code will result in the following output - you can find the providers in the index.js file, and the components used in the example.js file by inspecting it in CodeSandbox.

Next steps

To learn how to build more complex applications using Base Web, please continue to the Learn section.