# Base Web

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

[Base Web](https://baseweb.design/) provides a robust suite of components out of the box. These include complex, ready-to-use components such as the [Datepicker](https://baseweb.design/components/datepicker) and low-level composable primitives, such as [Layer](https://baseweb.design/components/layer).

Check out the [component gallery](https://baseweb.design/components).

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](https://marketplace.visualstudio.com/items?itemName=Uber.baseweb)

### [Installing Base Web](https://baseweb.design/getting-started/setup/)

```bash
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`](https://baseweb.design/components/base-provider) components:

```jsx
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](https://www.styletron.org/getting-started/#with-fusionjs)
* [Next.js](https://www.styletron.org/getting-started/#with-nextjs)
* [Gatsby](https://www.styletron.org/getting-started/#with-gatsby)
* [Other React applications](https://www.styletron.org/getting-started/#with-react)

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

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 <a href="#a-custom-theme" id="a-custom-theme"></a>

```jsx
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);
```

&#x20;The `overrides`object will be deep-merged with the initial result of mapping`primitives`to all of the theme properties. `overrides` is just a convenient shortcut for deep-merging assignments onto your theme object.&#x20;

Read more about the [Theming.](https://baseweb.design/guides/theming/)

## Base Web on Figma Communities  <a href="#base-web-on-figma-communities" id="base-web-on-figma-communities"></a>

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

[Go to Figma Community](https://www.figma.com/@uber). Click on the "Base Gallery", and hit "Duplicate" so you can get your copy of the Base Gallery.&#x20;


---

# Agent Instructions: Querying This Documentation

If you need additional information that is not directly available in this page, you can query the documentation dynamically by asking a question.

Perform an HTTP GET request on the current page URL with the `ask` query parameter:

```
GET https://olga-f.gitbook.io/react/design-systems/base-web.md?ask=<question>
```

The question should be specific, self-contained, and written in natural language.
The response will contain a direct answer to the question and relevant excerpts and sources from the documentation.

Use this mechanism when the answer is not explicitly present in the current page, you need clarification or additional context, or you want to retrieve related documentation sections.