### Base Web and Styletron Provider Setup

Source: https://github.com/uber/baseweb/blob/main/documentation-site/pages/blog/getting-started-with-base-web/index.mdx

Example of wrapping the main App component with StyletronProvider and BaseProvider for Base Web.

```javascript
import { Provider as StyletronProvider } from "styletron-react";
import { Client as Styletron } from "styletron-engine-monolithic";
import { LightTheme, BaseProvider } from "baseui";

const engine = new Styletron();

ReactDOM.render(
  <StyletronProvider value={engine}>
    <BaseProvider theme={LightTheme}>
      <App />
    </BaseProvider>
  </StyletronProvider>,
  document.getElementById("root"),
);

```

--------------------------------

### Create React App and Install Base Web Packages

Source: https://github.com/uber/baseweb/blob/main/documentation-site/pages/blog/getting-started-with-base-web/index.mdx

Commands to bootstrap a React application and install necessary Base Web and Styletron packages.

```shell
create-react-app password-generator
cd password-generator
```

```shell
pnpm add baseui@next styletron-engine-monolithic styletron-react
```

--------------------------------

### Version Sync Example

Source: https://github.com/uber/baseweb/blob/main/documentation-site/pages/getting-started/setup.mdx

Example package.json snippet showing synced versions for baseui and eslint-plugin-baseui.

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

--------------------------------

### Adjusting layout with Block

Source: https://github.com/uber/baseweb/blob/main/documentation-site/pages/blog/getting-started-with-base-web/index.mdx

Example of using the Block component to add margin and FormControl for layout.

```jsx
<Block marginBottom="scale800">
  <FormControl label="Length">
    <Slider {...sliderProps} />
  </FormControl>
</Block>
```

--------------------------------

### Install Base Web

Source: https://github.com/uber/baseweb/blob/main/documentation-site/pages/getting-started/setup.mdx

Commands to install Base Web and its peer dependencies using pnpm or npm.

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

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

--------------------------------

### Install ESLint plugin

Source: https://github.com/uber/baseweb/blob/main/documentation-site/pages/getting-started/setup.mdx

Commands to install the eslint-plugin-baseui for ESLint.

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

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

--------------------------------

### ESLint Configuration

Source: https://github.com/uber/baseweb/blob/main/documentation-site/pages/getting-started/setup.mdx

Example ESLint configuration to enable baseui plugin rules.

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

--------------------------------

### Customizing Card Component with Overrides

Source: https://github.com/uber/baseweb/blob/main/documentation-site/pages/blog/getting-started-with-base-web/index.mdx

Example of using the 'overrides' prop to customize the style of the Card component.

```javascript
<Card
  overrides={{
    Root: {
      style: {
        left: "50%",
        maxWidth: "420px",
        position: "absolute",
        top: "20px",
        transform: "translate(-50%, 0)",
        width: "95vw",
      },
    },
  }}
>
  ...
</Card>

```

--------------------------------

### Setup for contributing

Source: https://github.com/uber/baseweb/blob/main/packages/baseui-codemods/README.md

Command to install dependencies when contributing to the project.

```shell
$ yarn install
```

--------------------------------

### Input component with strength indicator

Source: https://github.com/uber/baseweb/blob/main/documentation-site/pages/blog/getting-started-with-base-web/index.mdx

Example of overriding the Input component's style to display password strength with colored borders.

```jsx
<Input
  inputRef={passwordRef}
  value={password}
  onChange={event => setNewPassword(event.target.value)}
  overrides={{
    InputContainer: {{
      style: ({ $theme }) => ({
        borderLeftColor: $theme.colors[getStrengthColor(strength)],
        borderRightColor: $theme.colors[getStrengthColor(strength)],
        borderTopColor: $theme.colors[getStrengthColor(strength)],
        borderBottomColor: $theme.colors[getStrengthColor(strength)],
        borderLeftWidth: $theme.sizing.scale200,
        borderRightWidth: $theme.sizing.scale200,
        borderTopWidth: $theme.sizing.scale200,
        borderBottomWidth: $theme.sizing.scale200,
      })
    }},
    After: () => (...) 
  }}
/>
```

--------------------------------

### Adjusting layout with useStyletron

Source: https://github.com/uber/baseweb/blob/main/documentation-site/pages/blog/getting-started-with-base-web/index.mdx

Alternative method for layout adjustment using the useStyletron hook.

```jsx
const [css, theme] = useStyletron();

<div className={css({ marginBottom: theme.sizing.scale800 })}>
  <FormControl label="Length">
    <Slider {...sliderProps} />
  </FormControl>
</div>;
```

--------------------------------

### Install React View

Source: https://github.com/uber/baseweb/blob/main/documentation-site/pages/blog/introducing-react-view/index.mdx

React View is open sourced as uber/react-view and you can get it from npm right now:

```bash
pnpm add react-view
```

--------------------------------

### Tabs Motion Refs Example

Source: https://github.com/uber/baseweb/blob/main/documentation-site/pages/components/tabs-motion.mdx

Example demonstrating how to get refs for Tabs Motion components.

```tsx
import React from "react";
import { Tabs, Tab, StatefulTabs } from "baseui/tabs-motion";

export default () => {
  const ref = React.useRef<HTMLButtonElement>(null);
  return (
    <StatefulTabs>
      <Tab title="First Tab" key="first">
        First tab content
      </Tab>
      <Tab title="Second Tab" key="second" ref={ref}>
        Second tab content
      </Tab>
      <Tab title="Third Tab" key="third">
        Third tab content
      </Tab>
    </StatefulTabs>
  );
};
```

--------------------------------

### Using the $as prop for rendering different HTML elements

Source: https://github.com/uber/baseweb/blob/main/documentation-site/pages/blog/getting-started-with-styletron/index.mdx

Example of using the special `$as` prop in Styletron to render a `Button` component as an anchor (`<a>`) tag, demonstrating flexibility in component rendering.

```javascript
<Button
  $as="a"
  href="https://styletron.org"
  target="_blank"
  rel="noreferrer noopener"
>
  Check out Styletron!
</Button>
```

--------------------------------

### useStyletron example

Source: https://github.com/uber/baseweb/blob/main/documentation-site/pages/guides/styling.mdx

This example shows how to use useStyletron to style elements and provides a way to extend styles.

```javascript
import * as React from "react";
import { useStyletron } from "baseui";

export default function Widget({ style, ...props }) {
  const [css] = useStyletron();
  return (
    <div
      {...props}
      className={[ 
        css({
          display: "flex",
          alignItems: "center",
          justifyContent: "center",
        }),
        css(style),
      ].join(" ")}
    />
  );
}
```

--------------------------------

### Custom Theme Example

Source: https://github.com/uber/baseweb/blob/main/documentation-site/pages/blog/base-web-v9/index.mdx

Example of creating a custom theme with overrides for baseui.

```javascript
// myTheme.js

import { createTheme } from "baseui/themes";

const myTokens = {
  // define various brand colors here...
};

const myThemePrimitives = {
  // define all the various primitives for my theme...
};

const myThemeOverrides = {
  // override baseui default theme assignments...
  colors: {
    borderSelected: myThemePrimitives.accent,
  },
};

const myTheme = createTheme(myThemePrimitives, myThemeOverrides);

export default myTheme;

```

--------------------------------

### Basic Usage Example

Source: https://github.com/uber/baseweb/blob/main/README.md

A simple example demonstrating how to set up and use Base Web components with Styletron.

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

--------------------------------

### BaseProvider Setup

Source: https://github.com/uber/baseweb/blob/main/documentation-site/pages/guides/theming.mdx

Basic setup for BaseProvider at the root of your application, including Styletron boilerplate.

```javascript
import React from "react";
import { BaseProvider, LightTheme } from "baseui";
import { Provider as StyletronProvider } from "styletron-react";
import { Client as Styletron } from "styletron-engine-monolithic";

const engine = new Styletron();

export default function App() {
  return (
    <StyletronProvider value={engine}>
      <BaseProvider theme={LightTheme}>
        I can use themed Base Web stuff here!
      </BaseProvider>
    </StyletronProvider>
  );
}
```

--------------------------------

### Base Gallery Button

Source: https://github.com/uber/baseweb/blob/main/documentation-site/pages/blog/base-figma-community/index.mdx

Example of how to create a button that links to the Figma Community.

```jsx
import Layout from "../../../components/layout";
import { Meta } from "../../../components/blog";
import metadata from "./metadata.json";
import { Button } from "baseui/button";

export default Layout;

<Meta data={metadata} />

<Button $as="a" href="https://www.figma.com/@uber" target="_blank">
  Go to Figma Community
</Button>
```

--------------------------------

### Basic example

Source: https://github.com/uber/baseweb/blob/main/documentation-site/pages/components/app-nav-bar.mdx

A basic example of the AppNavBar component.

```tsx
import React from "react";
import { AppNavBar,NavItem, NavLogo } from "baseui/app-nav-bar";
import { Button } from "baseui/button";

const items = [
  { icon: "", label: "About", path: "/about" },
  { icon: "", label: "Services", path: "/services" },
  { icon: "", label: "Contact", path: "/contact" },
];

export default () => {
  return (
    <AppNavBar
      title="Uber"
      navItems={items}
      mapItemToNode={item => (
        <NavItem {...item} endEnhancement={<Button>Login</Button>} />
      )}
    />
  );
};
```

--------------------------------

### Example of running a codemod

Source: https://github.com/uber/baseweb/blob/main/packages/baseui-codemods/README.md

An example of running the `v8Types` codemod on a `src` directory.

```shell
$ npx @uber-web-ui/baseui-codemods --dir=src --mod=v8Types
```

--------------------------------

### Menu Stateless example

Source: https://github.com/uber/baseweb/blob/main/documentation-site/pages/components/menu.mdx

Stateless menu example.

```tsx
import * as React from "react";
import { Menu, Option } from "baseui/menu";

const OPTIONS = [
  { label: "Option 1" },
  { label: "Option 2" },
  { label: "Option 3" },
  { label: "Option 4" },
];

export default () => {
  const [activeItemId, setActiveItemId] = React.useState<string | null>(null);
  return (
    <Menu
      items={OPTIONS}
      getRequiredItemProps={({ item }) => {
        return {
          id: `menu-item-${item.label}`,
        };
      }}
      onActiveItemChange={({ item }) => {
        setActiveItemId(item?.id || null);
      }}
      activeItemId={activeItemId}
      onChange={({ item }) => console.log(item)}
    />
  );
};
```

--------------------------------

### Styletron Example

Source: https://github.com/uber/baseweb/blob/main/documentation-site/pages/getting-started/learn.mdx

Example of using useStyletron hook to apply styles to a custom link component.

```javascript
import { useStyletron } from "baseui";

export default () => {
  const [css, theme] = useStyletron();
  return (
    <a
      href="/my-link"
      className={css({
        fontSize: "20px",
        color: theme.colors.contentPrimary,
      })}>
      Custom Link
    </a>
  );
};

```

--------------------------------

### Tabs Motion Render All Example

Source: https://github.com/uber/baseweb/blob/main/documentation-site/pages/components/tabs-motion.mdx

Example demonstrating the 'renderAll' prop for Tabs Motion.

```tsx
import React from "react";
import { Tabs, Tab, StatefulTabs } from "baseui/tabs-motion";

export default () => (
  <StatefulTabs renderAll>
    <Tab title="First Tab">
      First tab content
    </Tab>
    <Tab title="Second Tab">
      Second tab content
    </Tab>
    <Tab title="Third Tab">
      Third tab content
    </Tab>
  </StatefulTabs>
);
```

--------------------------------

### Installation

Source: https://github.com/uber/baseweb/blob/main/packages/eslint-plugin-baseui/README.md

Install the eslint-plugin-baseui package using npm or yarn.

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

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

--------------------------------

### Install globally

Source: https://github.com/uber/baseweb/blob/main/packages/baseui-codemods/README.md

How to install the baseui-codemods CLI tool globally using npm.

```shell
$ npm i -g @uber-web-ui/baseui-codemods
```

--------------------------------

### Example codemod structure

Source: https://github.com/uber/baseweb/blob/main/packages/baseui-codemods/README.md

An example of how a codemod is structured using `dubstep/core`.

```js
// A new `colorUpdate` codemod
const colorUpdate = [
  step('replace "red" with "blue"', redToBlue),
  step('replace "green" with "pink"', greenToPink),
];
const stepper = new Stepper(colorUpdate);
stepper.run();
```

--------------------------------

### Anchor position example

Source: https://github.com/uber/baseweb/blob/main/documentation-site/pages/blog/introducing-base-map-markers/index.mdx

Example demonstrating different anchor positions for a floating marker.

```jsx
import React from 'react';
import { FloatingMarker, ANCHOR_POSITION, ANCHOR_TYPE, LABEL_SIZE } from 'baseui/map-marker';

export default () => (
  <FloatingMarker
    size={SIZE.large}
    label={{
      content: 'Pickup',
      size: LABEL_SIZE.large,
    }}
    anchor={{
      position: ANCHOR_POSITION.bottomRight,
      type: ANCHOR_TYPE.circle,
    }}
  />
);
```

--------------------------------

### Default Light Theme Setup

Source: https://github.com/uber/baseweb/blob/main/documentation-site/pages/guides/theming.mdx

Demonstrates how to set up Base Web with the default LightTheme.

```javascript
import React from "react";
import { LightTheme, ThemeProvider } from "baseui";

export default function App() {
  return (
    <ThemeProvider theme={LightTheme}>
      I can use themed Base Web components here!
    </ThemeProvider>
  );
}
```

--------------------------------

### Adding a Button to Input using Overrides

Source: https://github.com/uber/baseweb/blob/main/documentation-site/pages/blog/getting-started-with-base-web/index.mdx

Example of using the 'overrides' prop to add a Button component within the Input component's 'After' slot.

```javascript
<Input
  overrides={{
    After: () => (
      <Button kind={KIND.tertiary}>
        <Icon />
      </Button>
    ),
  }}
/>

```

--------------------------------

### Styletron's CSS Class Generation

Source: https://github.com/uber/baseweb/blob/main/documentation-site/pages/blog/getting-started-with-styletron/index.mdx

This example shows how Styletron generates atomic single-declaration classes for component styles, aiming for efficiency and minimal CSS bloat.

```css
.css-1lvna780 {
  color: red;
  line-height: 10px;
}
```

--------------------------------

### Build Your Own Playground

Source: https://github.com/uber/baseweb/blob/main/documentation-site/pages/blog/introducing-react-view/index.mdx

This example shows how to use the `useView` hook directly for more control and customization, allowing you to re-use default UI components or create your own.

```tsx
import * as React from "react";
import { Button } from "baseui/button";

import {
  useView,
  Compiler,
  Knobs,
  Editor,
  Error,
  ActionButtons,
  Placeholder,
  PropTypes,
} from "react-view";

export default () => {
  const params = useView({
    componentName: "Button",
    props: {
      children: {
        value: "Hello",
        type: PropTypes.ReactNode,
        description: "Visible label.",
      },
      onClick: {
        value: '() => alert("click")',
        type: PropTypes.Function,
        description: "Function called when button is clicked.",
      },
      disabled: {
        value: false,
        type: PropTypes.Boolean,
        description: "Indicates that the button is disabled",
      },
    },
    scope: {
      Button,
    },
    imports: {
      "baseui/button": {
        named: ["Button"],
      },
    },
  });

  return (
    <React.Fragment>
      <Compiler
        {...params.compilerProps}
        minHeight={62}
        placeholder={Placeholder}
      />
      <Error msg={params.errorProps.msg} isPopup />
      <Knobs {...params.knobProps} />
      <Editor {...params.editorProps} />
      <Error {...params.errorProps} />
      <ActionButtons {...params.actions} />
    </React.Fragment>
  );
};

```

--------------------------------

### Styling with theme tokens

Source: https://github.com/uber/baseweb/blob/main/documentation-site/pages/guides/styling.mdx

This example shows how to use theme tokens for more maintainable and consistent styling, ensuring the custom UI aligns with Base Web components.

```javascript
import * as React from "react";
import { useStyletron } from "baseui";
import { Card } from "baseui/card";

export default function Media({ left, right }) {
  const [css, theme] = useStyletron();
  return (
    <Card>
      <div
        className={css({
          display: "flex",
          ...theme.typography.ParagraphMedium,
        })}
      >
        <div
          className={css({
            padding: theme.sizing.scale400,
          })}
        >
          {left}
        </div>
        <div
          className={css({
            padding: theme.sizing.scale400,
            borderLeft: `solid 2px ${theme.colors.border}`,
          })}
        >
          {right}
        </div>
      </div>
    </Card>
  );
}
```

--------------------------------

### With Custom Keys

Source: https://github.com/uber/baseweb/blob/main/documentation-site/pages/components/tabs.mdx

With Custom Keys example.

```jsx
import { StatefulTabs, Tab } from "baseui/tabs";

export default () => (
  <StatefulTabs
    initialState={{ activeKey: "tab-2" }}
  >
    <Tab key="tab-1" title="Tab 1">
      Tab 1 Content
    </Tab>
    <Tab key="tab-2" title="Tab 2">
      Tab 2 Content
    </Tab>
    <Tab key="tab-3" title="Tab 3" disabled>
      Tab 3 Content
    </Tab>
  </StatefulTabs>
);
```

--------------------------------

### Function to get button color based on theme props

Source: https://github.com/uber/baseweb/blob/main/documentation-site/pages/blog/getting-started-with-styletron/index.mdx

A helper function that retrieves the appropriate color for a button based on the provided theme and props. It checks for `$primary` and `$secondary` props to determine the color.

```javascript
const getButtonColor = (props) => {
  const { colors } = props.$theme;
  let color = colors.PRIMARY;
  if (props.$primary) color = colors.PRIMARY;
  if (props.$secondary) color = colors.SECONDARY;
  return color;
};
```

--------------------------------

### Focus and ref

Source: https://github.com/uber/baseweb/blob/main/documentation-site/pages/components/checkbox.mdx

This example demonstrates how to manage focus and get a ref to the Checkbox component.

```tsx
import React from "react";
import { Checkbox, STYLE_TYPE } from "baseui/checkbox";

export default () => {
  const [checked, setChecked] = React.useState(false);
  const checkboxRef = React.useRef(null);

  React.useEffect(() => {
    // Focus the checkbox on mount
    if (checkboxRef.current) {
      checkboxRef.current.focus();
    }
  }, []);

  return (
    <Checkbox
      checked={checked}
      onChange={e => setChecked(e.target.checked)}
      labelPlacement={STYLE_TYPE.right}
      inputRef={checkboxRef}
    >
      Label
    </Checkbox>
  );
};
```

--------------------------------

### Example layout 1

Source: https://github.com/uber/baseweb/blob/main/src/layout/README.md

Demonstrates a basic layout with a header, sidebar, and content.

```javascript
import * as React from 'react';
import {Layout, Header, Sidebar, Content} from 'baseui/layout';

export default () => {
  return (
    <Layout>
      <Header fixed>Header content</Header>
      <Layout>
        <Sidebar>Menu placeholder</Sidebar>
        <Content>Main content placeholder</Content>
      </Layout>
    </Layout>
  );
};

```

--------------------------------

### Input overrides example

Source: https://github.com/uber/baseweb/blob/main/documentation-site/pages/blog/phone-input/index.mdx

Demonstrates how to use the 'Before' override to prepend content to an input component.

```javascript
const inputOverrides = {
  Before: {
    component: () => `🐨`,
  },
};
```

--------------------------------

### Password generation logic

Source: https://github.com/uber/baseweb/blob/main/documentation-site/pages/blog/getting-started-with-base-web/index.mdx

Function to generate a new password, validate its strength, and update state.

```javascript
const setNewPassword = (p) => {
  const newPassword = p
    ? p
    : generatePassword({ length, numbers, uppercase, symbols });
  const { score } = zxcvbn(newPassword);
  setStrength(score);
  setCopied(false);
  setPassword(newPassword);
};
```

--------------------------------

### Focus and ref

Source: https://github.com/uber/baseweb/blob/main/documentation-site/pages/components/input.mdx

Example of focusing the input programmatically using a ref.

```jsx
import React from "react";
import { Input } from "baseui/input";
import { Button } from "baseui/button";

export default () => {
  const inputRef = React.useRef(null);
  return (
    <React.Fragment>
      <Input inputRef={inputRef} placeholder="Focusable input" />
      <Button onClick={() => inputRef.current.focus()}>Focus</Button>
    </React.Fragment>
  );
};
```

--------------------------------

### Using semantic color tokens

Source: https://github.com/uber/baseweb/blob/main/documentation-site/pages/guides/styling.mdx

This example demonstrates using semantic color tokens to create a user interface that works seamlessly in both light and dark contexts.

```javascript
import * as React from "react";
import { useStyletron } from "baseui";

export default function Widget({ children }) {
  const [css, theme] = useStyletron();
  return (
    <div
      className={css({
        // These will adjust based on if the light/dark theme is active
        border: `solid 2px ${theme.colors.borderOpaque}`,
        background: theme.colors.backgroundPrimary,
        color: theme.colors.contentPrimary,
      })}
    >
      {children}
    </div>
  );
}
```

--------------------------------

### Button Styling with Pseudo-element

Source: https://github.com/uber/baseweb/blob/main/documentation-site/pages/blog/getting-started-with-styletron/index.mdx

This snippet demonstrates styling a Button with an :after pseudo-element using Styletron, including hardcoded content.

```javascript
const Button = styled("button", {
  background: "transparent",
  border: "4px solid #276EF1",
  borderTopLeftRadius: "4px",
  borderTopRightRadius: "4px",
  borderBottomRightRadius: "4px",
  borderBottomLeftRadius: "4px",
  color: "#276EF1",
  cursor: "pointer",
  fontWeight: "bold",
  padding: "8px 16px",
  position: "relative",
  ":after": {
    background: "#276EF1",
    bottom: 0,
    color: "#FFFFFF",
    content: '"Click Me!"',
    fontWeight: "bold",
    left: 0,
    padding: "8px 16px",
    position: "absolute",
    right: 0,
    top: 0,
  },
});
```

--------------------------------

### Button Styling with Clip-Path Animation

Source: https://github.com/uber/baseweb/blob/main/documentation-site/pages/blog/getting-started-with-styletron/index.mdx

This code demonstrates adding a clip-path to the :after pseudo-element for a hover effect, with transitions handled by Styletron.

```javascript
const Button = styled("button", (props) => ({
  ...buttonStyles,
  ":after": {
    ...buttonStyles,
    // Other omitted styles here
    clipPath: "polygon(-25% -5%, -25% -5%, -5% 105%, -25% 105%)",
    transition: "clip-path .25s ease",
  },
  ":hover:after": {
    clipPath: "polygon(-25% -5%, 105% -5%, 125% 105%, -25% 105%)",
  },
}));
```

--------------------------------

### createTheme Usage

Source: https://github.com/uber/baseweb/blob/main/documentation-site/pages/guides/theming.mdx

Example of using createTheme with overrides for colors, icons, and typography.

```javascript
import { createTheme } from "baseui";

const theme = createTheme(/* overrides */);
```

```javascript
import { createTheme } from "baseui";

const colorOverrides = {
  accent: theme.colors.magenta300,
  linkText: theme.colors.accent,
  linkVisited: theme.colors.accent,
};

const iconsOverrides = {
  Alert: Alarm,
  Menu: ThreeLinesFilled,
  TriangleDown: ChevronDown,
  TriangleUp: ChevronUp,
};

const typographyOverrides = {
  DisplayLarge: {
    fontFamily: "Georgia",
  },
};

const overrides = {
  colors: colorOverrides,
  icons: iconsOverrides,
  typography: typographyOverrides,
};

const theme = createTheme(overrides);
```

--------------------------------

### Button Styling with Dynamic Content

Source: https://github.com/uber/baseweb/blob/main/documentation-site/pages/blog/getting-started-with-styletron/index.mdx

This code shows how to use props to dynamically set the content of the :after pseudo-element in a Styletron Button.

```javascript
const Button = styled("button", (props) => ({
  // Other omitted styles
  ":after": {
    content: `"${props.children}"`, 
  },
}));
```

--------------------------------

### Drawer with renderAll for SSR / SEO

Source: https://github.com/uber/baseweb/blob/main/documentation-site/pages/components/drawer.mdx

Example showing how to use renderAll for Server-Side Rendering (SSR) or SEO purposes with the Drawer component.

```tsx
import React from "react";
import { Drawer, ANCHOR } from "baseui/drawer";
import { Button } from "baseui/button";

export default function SSRRenderAll() {
  const [isOpen, setIsOpen] = React.useState(false);
  return (
    <React.Fragment>
      <Button onClick={() => setIsOpen(true)}>Open Drawer</Button>
      <Drawer
        isOpen={isOpen}
        onClose={() => setIsOpen(false)}
        anchor={ANCHOR.left}
        renderAll
      >
        Drawer content
      </Drawer>
    </React.Fragment>
  );
}

```

--------------------------------

### Function to determine strength color

Source: https://github.com/uber/baseweb/blob/main/documentation-site/pages/blog/getting-started-with-base-web/index.mdx

A helper function that maps a password strength score to a theme color ID.

```javascript
const getStrengthColor = (strength) => {
  switch (strength) {
    case 0:
      return "negative400";
    case 1:
      return "warning400";
    case 2:
      return "warning200";
    case 3:
      return "positive200";
    case 4:
      return "positive400";
    default:
      return "primary50";
  }
};
```

--------------------------------

### Button Styling with Extracted Styles and Dynamic Content

Source: https://github.com/uber/baseweb/blob/main/documentation-site/pages/blog/getting-started-with-styletron/index.mdx

This snippet extracts common button styles into a variable and uses props for dynamic content in the :after pseudo-element.

```javascript
const buttonStyles = {...}
const Button = styled('button', props => ({
  ...buttonStyles,
  ':after': {
    ...buttonStyles,
    background: '#276EF1',
    border: 0,
    bottom: 0,
    borderTopLeftRadius: 0,
    borderTopRightRadius: 0,
    borderBottomRightRadius: 0,
    borderBottomLeftRadius: 0,
    color: '#FFFFFF',
    content: `"${props.children}"`, 
    left: 0,
    position: 'absolute',
    right: 0,
    top: 0,
  }
}))
```

--------------------------------

### Basic Button Component

Source: https://github.com/uber/baseweb/blob/main/documentation-site/pages/blog/getting-started-with-styletron/index.mdx

This code snippet demonstrates how to create a basic Button component using Styletron, defining its background, text color, and cursor style.

```js
const Button = styled("button", {
  background: "#276EF1",
  color: "#FFFFFF",
  cursor: "pointer",
});
```

--------------------------------

### Avoiding shorthand and longhand property conflicts

Source: https://github.com/uber/baseweb/blob/main/documentation-site/pages/blog/getting-started-with-styletron/index.mdx

Illustrates the correct way to handle CSS properties in Styletron by either using shorthand or longhand properties exclusively, not mixing them to avoid precedence issues.

```javascript
// DON'T DO THIS
border: '4px solid blue',
borderWidth: '10px'
// DO EITHER THIS
border: '10px solid blue'
// OR THIS
borderColor: 'blue',
borderStyle: 'solid',
borderWidth: '10px'
```

--------------------------------

### Gatsby Styletron Provider Nesting

Source: https://github.com/uber/baseweb/blob/main/documentation-site/pages/getting-started/setup.mdx

Correct nesting order for StyletronProvider and BaseProvider in Gatsby applications using gatsby-plugin-styletron.

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

--------------------------------

### Override example

Source: https://github.com/uber/baseweb/blob/main/documentation-site/pages/components/system-banner.mdx

An example of how to customize the System Banner using overrides for styling. It shows how to apply custom border-radius and box-shadow to the root element, and how to apply typography styles to the title.

```jsx
<SystemBanner
  kind={KIND.info}
  overrides={{
    Root: {
      style: {
        borderRadius: "8px",
        boxShadow: "0 4px 8px rgba(0, 0, 0, 0.1)",
      },
    },
    Title: {
      style: ({ $theme }) => ({
        ...$theme.typography.HeadingSmall,
      }),
    },
  }}
>
  Custom styled banner
</SystemBanner>
```

--------------------------------

### Adding mask

Source: https://github.com/uber/baseweb/blob/main/documentation-site/pages/components/pin-code.mdx

You can add a default mask (`.`) by setting `mask=true`. Prop `mask` also accepts `string` input as customized mask style. For example, you can get an asterisk mask by setting `mask='*'`.

```jsx
import { PinCode } from "baseui/pin-code";

export default () => (
  <>
    <PinCode mask />
    <PinCode mask="*" />
  </>
);
```

--------------------------------

### Integrating theme color into Button styles

Source: https://github.com/uber/baseweb/blob/main/documentation-site/pages/blog/getting-started-with-styletron/index.mdx

This code snippet shows how to integrate the `getButtonColor` function into the styles of a `Button` component. It dynamically sets the button's color and includes nested pseudo-element styles.

```javascript
const Button = styled("button", (props) => {
  const color = getButtonColor(props);
  const styles = getButtonStyles(color);
  return {
    ...styles,
    ":after": {
      ...styles,
      ...otherStyles,
    },
    ":hover:after": {
      ...hoverStyles,
    },
  };
});
```

--------------------------------

### Creating a styled function with React Context for theming

Source: https://github.com/uber/baseweb/blob/main/documentation-site/pages/blog/getting-started-with-styletron/index.mdx

This code snippet demonstrates how to create a custom `styled` function using React Context to enable theming in a Styletron application. It sets up a `ThemeProvider` and a `wrapper` function to inject theme props into styled components.

```javascript
import React, { createContext } from "react";
import { createStyled } from "styletron-react";
import { driver, getInitialStyle } from "styletron-standard";

const { Consumer, Provider } = createContext();

const THEME = {
  colors: {
    PRIMARY: "#276EF1",
    SECONDARY: "#95A5A6",
    // Other colors
  },
};

const ThemeProvider = ({ children }) => (
  <Provider value={THEME}>{children}</Provider>
);

const wrapper = (StyledComponent) => (props) => (
  <Consumer>
    {(theme) => <StyledComponent {...props} $theme={theme} />}
  </Consumer>
);

const styled = createStyled({
  wrapper,
  getInitialStyle,
  driver,
});
```

--------------------------------

### Autofocus

Source: https://github.com/uber/baseweb/blob/main/documentation-site/pages/components/pin-code.mdx

There is a decent chance that if you are using `PinCode` you want it to be focused from the start. Simply set `autoFocus` to `true` to focus the first input upon initial mounting of the component. In the example above, click `Mount PinCode` to ...mount the PinCode component. With `autoFocus` toggled on, the first input receives focus immediately.

```jsx
import { PinCode } from "baseui/pin-code";

export default () => {
  const [mounted, setMounted] = React.useState(false);
  return (
    <>
      <button onClick={() => setMounted(true)}>Mount PinCode</button>
      {mounted && <PinCode autoFocus />}
    </>
  );
};
```

--------------------------------

### All-in-one Playground

Source: https://github.com/uber/baseweb/blob/main/documentation-site/pages/blog/introducing-react-view/index.mdx

This example demonstrates the all-in-one `View` component, which requires defining the component name, props, scope, and imports.

```tsx
import { View, PropTypes } from "react-view";
import { Button } from "baseui/button";

export default () => (
  <View
    componentName="Button"
    props={{
      children: {
        value: "Hello",
        type: PropTypes.ReactNode,
        description: "Visible label.",
      },
      onClick: {
        value: '() => alert("click")',
        type: PropTypes.Function,
        description: "Function called when button is clicked.",
      },
      disabled: {
        value: false,
        type: PropTypes.Boolean,
        description: "Indicates that the button is disabled",
      },
    }}
    scope={{
      Button,
    }}
    imports={{
      "baseui/button": {
        named: ["Button"],
      },
    }}
  />
);
```

--------------------------------

### Basic usage

Source: https://github.com/uber/baseweb/blob/main/documentation-site/pages/components/input.mdx

Basic controlled input example.

```jsx
import React from "react";
import { Input } from "baseui/input";

export default () => {
  const [value, setValue] = React.useState("");
  return (
    <Input
      value={value}
      onChange={e => setValue(e.target.value)}
      placeholder="Type something"
    />
  );
};
```

--------------------------------

### Popover stateless example

Source: https://github.com/uber/baseweb/blob/main/documentation-site/pages/components/popover.mdx

Popover stateless example

```tsx
import React from 'react';
import { Popover, PLACEMENT } from 'baseui/popover';
import { Button } from 'baseui/button';
import { Block } from 'baseui/block';

export default function Stateless() {
  const [isOpen, setIsOpen] = React.useState(false);
  return (
    <Block display="flex" justifyContent="center" padding="50px">
      <Popover
        content={
          <Block padding="20px">
            This is a stateless popover. It is controlled by the parent component.
          </Block>
        }
        returnFocus
        isOpen={isOpen}
        onClose={() => setIsOpen(false)}
        placement={PLACEMENT.bottom}
      >
        <Button onClick={() => setIsOpen(true)}>Open Stateless Popover</Button>
      </Popover>
    </Block>
  );
}
```

--------------------------------

### HTML Setup

Source: https://github.com/uber/baseweb/blob/main/documentation-site/pages/guides/bidirectionality.mdx

Add the `dir` attribute to the `body` of your HTML to enable RTL.

```html
<body dir="rtl"></body>
```

--------------------------------

### Pagination Uncontrolled example

Source: https://github.com/uber/baseweb/blob/main/documentation-site/pages/components/pagination.mdx

Uncontrolled pagination example.

```tsx
import React from "react";
import { StatefulPagination } from "baseui/purchase";

export default () => (
  <StatefulPagination
    // You can control the current page by passing the currentPage prop
    // currentPage={currentPage}
    // You can also control the number of pages by passing the numPages prop
    numPages={5}
    // You can also control the number of items per page by passing the
    // granolaProp
    granolaProp={3}
  />
);

```

--------------------------------

### Pagination Controlled example

Source: https://github.com/uber/baseweb/blob/main/documentation-site/pages/components/pagination.mdx

Controlled pagination example.

```tsx
import React from "react";
import { StatefulPagination } from "baseui/pagination";

export default () => {
  const [currentPage, setCurrentPage] = React.useState<number>(1);
  return (
    <StatefulPagination
      // You can control the current page by passing the currentPage prop
      currentPage={currentPage}
      // You can also control the number of pages by passing the numPages prop
      numPages={5}
      // You can also control the number of items per page by passing the
      // granolaProp
      granolaProp={3}
      // You can also control the number of items per page by passing the
      // granolaProp
      onPageChange={({ nextPage }) => {
        setCurrentPage(nextPage);
      }}
    />
  );
};

```

--------------------------------

### Toggling Between Light and Dark Themes

Source: https://github.com/uber/baseweb/blob/main/documentation-site/pages/guides/theming.mdx

Shows how to implement a toggle to switch between light and dark themes dynamically.

```javascript
import React from "react";
import { LightTheme, DarkTheme, ThemeProvider } from "baseui";
import { Button } from "baseui/button";

const THEME = {
  light: "light",
  dark: "dark",
};

export default function App() {
  const [theme, setTheme] = React.useState(THEME.light);
  return (
    <ThemeProvider theme={theme === THEME.light ? LightTheme : DarkTheme}>
      <Button
        onClick={() =>
          setTheme(theme === THEME.light ? THEME.dark : THEME.light)
        }
      >
        Toggle light/dark theme!
      </Button>
    </ThemeProvider>
  );
}
```

--------------------------------

### Tooltip stateful example

Source: https://github.com/uber/baseweb/blob/main/documentation-site/pages/components/tooltip.mdx

A basic stateful tooltip example.

```tsx
import React from "react";
import { StatefulTooltip } from "baseui/tooltip";

export default function Stateful() {
  return (
    <StatefulTooltip 
      content="Here is some tooltip info"
    >
      Hover me
    </StatefulTooltip>
  );
}
```

--------------------------------

### Input with Select as Before override

Source: https://github.com/uber/baseweb/blob/main/documentation-site/pages/blog/phone-input/index.mdx

Illustrates how to integrate a Select component into the 'Before' override of an Input component.

```javascript
const inputOverrides = {
  Before: {
    component: Select,
  },
};
```

--------------------------------

### Anchor ref handling example

Source: https://github.com/uber/baseweb/blob/main/documentation-site/pages/components/popover.mdx

Anchor ref handling example

```tsx
import React from 'react';
import { Popover, PLACEMENT } from 'baseui/popover';
import { Button } from 'baseui/button';
import { Block } from 'baseui/block';

export default function AnchorRefHandling() {
  const buttonRef = React.useRef(null);
  return (
    <Block display="flex" justifyContent="center" padding="50px">
      <Popover
        content={
          <Block padding="20px">
            This is a stateful popover. It is controlled by the Popover component itself.
          </Block>
        }
        anchorRef={buttonRef}
        placement={PLACEMENT.bottom}
      >
        <Button ref={buttonRef}>Open Stateful Popover</Button>
      </Popover>
    </Block>
  );
}
```

--------------------------------

### Responsive Styling with themeStyled

Source: https://github.com/uber/baseweb/blob/main/documentation-site/pages/blog/responsive-web/index.mdx

Demonstrates how to use themeStyled to apply responsive styles based on media queries defined in the theme. The example shows a LoadStatus component that changes font-size and color at a specific breakpoint.

```javascript
const LoadStatus = themedStyled("span", ({ $theme }) => ({
  ...$theme.typography.font250,
  color: $theme.colors.mono800,
  [$theme.mediaQuery.small]: {
    ...$theme.typography.font550,
    color: $theme.colors.mono900,
  },
}));
```

--------------------------------

### Select uncontrolled example

Source: https://github.com/uber/baseweb/blob/main/documentation-site/pages/components/select.mdx

An uncontrolled Select component example.

```tsx
import React from "react";
import { Select } from "baseui/select";

const options = [
  { id: "a", label: "A" },
  { id: "b", label: "B" },
  { id: "c", label: "C" },
];

export default function SelectUncontrolled() {
  return (
    <Select
      options={options}
      placeholder="Select a value"
      initialState={{ value: [{ id: "a", label: "A" }] }}
    />
  );
}
```

--------------------------------

### Install Base Web and its peer dependencies

Source: https://github.com/uber/baseweb/blob/main/README.md

Add baseui and its peer dependencies to your project using either pnpm or npm.

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

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

--------------------------------

### Tag Custom Color example

Source: https://github.com/uber/baseweb/blob/main/documentation-site/pages/components/tag.mdx

Example of how to apply custom colors to a Tag.

```tsx
import React from 'react';
import {Tag, KIND, VARIANT} from 'baseui/tag';

export default () => (
  <Tag
    kind={KIND.custom}
    variant={VARIANT.solid}
    overrides={{
      Root: {
        style: {
          backgroundColor: 'purple',
        },
      },
    }}
  >
    Custom color tag
  </Tag>
);
```

--------------------------------

### Avatar with example overrides

Source: https://github.com/uber/baseweb/blob/main/documentation-site/pages/components/avatar.mdx

This example shows how to override default Avatar styles.

```tsx
import React from 'react';
import { Avatar } from 'baseui/avatar';
import { Block } from 'baseui/block';

export default () => (
  <Block display="flex" gridGap="12px">
    <Avatar
      name="Firstname Lastname"
      size="scale1000"
      overrides={{
        Root: {
          style: ({ $theme }) => ({
            border: `3px solid ${$theme.colors.primary}`,
          }),
        },
        Initials: {
          style: ({ $theme }) => ({
            color: $theme.colors.accent,
          }),
        },
      }}
    />
    <Avatar
      name="Firstname Lastname"
      size="scale1000"
      src="https://example.com/nonexistent-image.jpg"
      overrides={{
        Root: {
          style: ({ $theme }) => ({
            border: `3px solid ${$theme.colors.negative}`,
          }),
        },
      }}
    />
  </Block>
);
```