import Example from "../../components/example";
import Layout from "../../components/layout";
import { Notification } from "baseui/notification";

export default Layout;

# BaseProvider

`BaseProvider` provides a single wrapper to configure your application.
It adds a [`LayersManager`](/components/layer/)
and a [`ThemeProvider`](/guides/theming/#setup)
to handle styling and stacking context in the application.

Wrap your application with the `BaseProvider` at its root:

```jsx
import { BaseProvider, LightTheme } from "baseui";
import { Provider as StyletronProvider } from "styletron-react";

export default function App() {
  return (
    <StyletronProvider value={engine}>
      <BaseProvider theme={LightTheme}>
        <YourApp />
      </BaseProvider>
    </StyletronProvider>
  );
}
```

<Notification
  overrides={{
    Body: { style: { width: "auto" } },
  }}
>
  Your application might be wrapping the root only with ThemeProvider. You
  should use BaseProvider instead to support correct layering. Please note that
  this component adds an <b>additional div</b> that could impact your layout.
</Notification>