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

export default Layout;

# Setup

## Installing Base Web

You can quickly test Base Web by using [StackBlitz](https://baseweb.design/new).

Base Web is available on npm as [baseui](https://npmjs.com/package/baseui). This single
package contains all Base Web components.

```bash
# using pnpm
pnpm add baseui@next styletron-engine-monolithic styletron-react

# using npm
npm install baseui@next styletron-engine-monolithic styletron-react
```

Base Web ships with TypeScript support.

[Styletron](https://www.styletron.org/) is a toolkit for component-oriented styling, part of the CSS-in-JS family. Base Web requires Styletron as a peer dependency (it uses it to apply styles to components), so you need to add Styletron as a dependency too.

### Visual Studio (VS) code extension

VS Code is one of the most popular code editors for web developers globally-and, as such, we have first-class support for it.

Features include:

- Code snippet support for quickly using Base Web components
- Code coloring for theme values
- Built-in theme cheat sheet
- Shortcuts for the documentation package

Learn more [here](https://baseweb.design/blog/vs-code-extension/), or [grab the extension from the marketplace](https://marketplace.visualstudio.com/items?itemName=Uber.baseweb).

### `eslint-plugin-baseui`

Base Web also has a plugin for [ESLint](https://eslint.org/) that will warn you if you’re using a deprecated component or API. In addition, it flags certain common mistakes developers make when using `baseui`. In some cases it can also auto-fix issues for you.

Assuming you already have ESLint installed, run:

```sh
# npm
npm install eslint-plugin-baseui --save-dev

# pnpm
pnpm add eslint-plugin-baseui --dev
```

Then add it to your ESLint configuration:

```js
{
  "plugins": [
    // ...
    "baseui",
  ],
  "rules": {
    // ...
    'baseui/deprecated-theme-api': "warn",
    'baseui/deprecated-component-api': "warn",
    'baseui/no-deep-imports': "warn",
  }
}
```

`baseui` and `eslint-plugin-baseui` have their versions synced, so you should generally bump them together and always keep them on the same version:

```json
{
  "dependencies": {
    "baseui": "10.0.0"
  },
  "devDependencies": {
    "eslint-plugin-baseui": "10.0.0"
  }
}
```

## Adding Base Web to your application

In order to use Base Web, you need to do a small setup and wrap the root of your
application with `StyletronProvider` and [`BaseProvider`](https://baseweb.design/components/base-provider) components:

```javascript
import { Client as Styletron } from "styletron-engine-monolithic";
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>
  );
}
```

<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>

There are detailed guides for Styletron/Base Web setup for the following frameworks:

- [Remix](https://github.com/Diggerati/remix-baseweb)
- [Fusion.js](https://www.styletron.org/getting-started/#with-fusionjs)
- [Next.js](https://github.com/tajo/nextjs-baseweb)
- [Gatsby](https://www.styletron.org/getting-started/#with-gatsby)
- [Other React applications](https://www.styletron.org/getting-started/#with-react)

When using **Gatsby** and `gatsby-plugin-styletron`, make sure to place `BaseProvider` into the root component of your application (typically `layout.js`) and not into `gatsby-client.js`. This will ensure the correct order of

```
<StyletronProvider>
  <BaseProvider />
</StyletronProvider>
```

nesting. Otherwise, you could see this console warning: "Did you forget to provide a Styletron engine instance...".

## Base Web for designers

Base Web is published on Figma Community, so your design team can take advantage of the Base Web components too. Read more [here](https://baseweb.design/blog/base-figma-community/).

## Next step

Check out the [Learning Base Web](/getting-started/learn) section, to better understand the concepts of Base Web.