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 ThemeProvider components:

import {Client as Styletron} from 'styletron-engine-atomic'; import {Provider as StyletronProvider} from 'styletron-react'; import {LightTheme, ThemeProvider, 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}> <ThemeProvider theme={LightTheme}> <Centered> <StatefulInput /> </Centered> </ThemeProvider> </StyletronProvider> ); }

Next steps

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