### Install and Run TanStack Start Project (Bash)

Source: https://github.com/mui/base-ui/blob/master/examples/tanstack-start-tailwind-css/README.md

Installs project dependencies using pnpm and starts the development server. Requires Node.js version 20.19+ or 22.12+. The server runs at http://localhost:3000.

```bash
pnpm install
pnpm start
```

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

### Build and Serve TanStack Start Project for Production (Bash)

Source: https://github.com/mui/base-ui/blob/master/examples/tanstack-start-tailwind-css/README.md

Builds a production-ready bundle for the TanStack Start project and then serves the production build. These commands are used for deploying the application.

```bash
pnpm build
pnpm serve
```

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

### Install Dependencies with pnpm

Source: https://github.com/mui/base-ui/blob/master/examples/vite-css/README.md

Use this command to install all project dependencies. Ensure Node.js and pnpm are installed.

```bash
pnpm install
```

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

### Toolbar Integration Examples

Source: https://github.com/mui/base-ui/blob/master/docs/src/app/(docs)/react/components/toolbar/page.mdx

Illustrates how to integrate the Toolbar with other components like Menus, Tooltips, and NumberFields.

```APIDOC
## Examples

### Using with Menu

All Base UI popup components that provide a `Trigger` component can be integrated with a toolbar by passing the trigger to `<Toolbar.Button>` with the `render` prop:

```tsx title="Using popups with toolbar"
return (
  <Toolbar.Root>
    <Menu.Root>
      {/* @highlight */}
      <Toolbar.Button render={<Menu.Trigger />} />
      <Menu.Portal>
        {/* prettier-ignore */}
        {/* Compose the rest of the menu */}
      </Menu.Portal>
    </Menu.Root>
  </Toolbar.Root>;
)
```

This applies to `<AlertDialog>`, `<Dialog>`, `<Menu>`, `<Popover>`, and `<Select>`.

### Using with Tooltip

Unlike other popups, the toolbar item should be passed to the `render` prop of `<Tooltip.Trigger>`:

```tsx title="Using popups with toolbar"
return (
  <Toolbar.Root>
    <Tooltip.Root>
      {/* @highlight */}
      <Tooltip.Trigger render={<Toolbar.Button />} />
      <Tooltip.Portal>
        {/* prettier-ignore */}
        {/* Compose the rest of the tooltip */}
      </Tooltip.Portal>
    </Tooltip.Root>
  </Toolbar.Root>;
)
```

### Using with NumberField

To use a NumberField in the toolbar, pass `<NumberField.Input>` to `<Toolbar.Input>` using the `render` prop:

```tsx title="Using NumberField with toolbar"
return (
  <Toolbar.Root>
    <NumberField.Root>
      <NumberField.Group>
        <NumberField.Decrement />
        {/* @highlight */}
        <Toolbar.Input render={<NumberField.Input />} />
        <NumberField.Increment />
      </NumberField.Group>
    </NumberField.Root>
  </Toolbar.Root>;
)
```
```

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

### Install Base UI React

Source: https://github.com/mui/base-ui/blob/master/packages/react/README.md

Install the Base UI React package in your project directory using npm.

```bash
npm install @base-ui/react
```

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

### Get Help for Changelog Generation

Source: https://github.com/mui/base-ui/blob/master/scripts/README.md

Run this command to view help and options for the changelog generation script.

```bash
pnpm release:changelog --help
```

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

### Implement performance-optimized render functions

Source: https://github.com/mui/base-ui/blob/master/docs/src/app/(docs)/react/handbook/composition/page.mdx

Provides an example of passing a function to the 'render' prop instead of an element. This approach offers full control over prop spreading and conditional rendering based on component state.

```tsx
<Switch.Thumb
  render={(props, state) =>
    <span {...props}>
      {state.checked ? <CheckedIcon /> : <UncheckedIcon />}
    </span>
  }
/>
```

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

### Install Missing Browser Dependencies

Source: https://github.com/mui/base-ui/blob/master/test/README.md

Command to resolve errors related to missing headless browser binaries.

```bash
pnpm playwright install --with-deps
```

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

### Run Development Server with pnpm

Source: https://github.com/mui/base-ui/blob/master/examples/vite-css/README.md

Starts the Vite development server for live previewing and hot module replacement. Access the app at http://localhost:5173.

```bash
pnpm dev
```

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

### Install Canary Releases

Source: https://github.com/mui/base-ui/blob/master/docs/src/app/(docs)/react/overview/releases/page.mdx

Install canary releases using pkg.pr.new URLs for master commit hashes or pull request numbers. Your package.json will reference these URLs.

```bash
# Install by master commit hash
npm i https://pkg.pr.new/@base-ui/react@ad745f1

# Install by PR number
npm i https://pkg.pr.new/@base-ui/react@3713
```

```json
{
  "dependencies": {
    "@base-ui/react": "https://pkg.pr.new/@base-ui/react@..."
  }
}
```

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

### Tabs as Links Example

Source: https://github.com/mui/base-ui/blob/master/docs/src/app/(docs)/react/components/tabs/page.mdx

Shows how to render Tabs as anchor elements using the `render` prop and `nativeButton={false}`.

```APIDOC
### Examples

#### Links

Use the `render` prop and set `nativeButton={false}` on `<Tabs.Tab>` to render tabs as anchor elements.

```jsx title="Tabs as links"
import { Tabs } from '@base-ui/react/tabs';
import Link from 'next/link';

<Tabs.Root>
  <Tabs.List>
    {/* @highlight-start *//* @highlight-text "nativeButton={false}" "render" */}
    <Tabs.Tab nativeButton={false} render={<Link href="/overview" />} value="overview">
      Overview
    </Tabs.Tab>
    {/* @highlight-end */}
  </Tabs.List>
  {/* ... */}
</Tabs.Root>;
```
```

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

### Base UI render prop implementation

Source: https://github.com/mui/base-ui/blob/master/docs/src/app/(docs)/react/utils/use-render/page.mdx

This example demonstrates the equivalent implementation in Base UI using the `useRender` hook for the `render` prop. It allows for flexible component composition by specifying a custom render prop.

```jsx
import { useRender } from '@base-ui/react/use-render';

function Button({ render, ...props }) {
  return useRender({
    defaultTagName: 'button',
    render,
    props,
  });
}

// Usage
<Button render={<MyButton className="primary" />}>Submit</Button>;
```

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

### Render Fixture Example (JavaScript)

Source: https://github.com/mui/base-ui/blob/master/test/regressions/README.md

An example demonstrating how to render a fixture for visual regression testing using the `renderFixture` function. This function is used by Playwright to load and test individual UI components.

```javascript
await renderFixture('FocusTrap/OpenFocusTrap');
```

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

### Linting and Formatting with ESLint and Prettier (Bash)

Source: https://github.com/mui/base-ui/blob/master/examples/tanstack-start-tailwind-css/README.md

Runs ESLint for code linting and Prettier for code formatting. The 'lint' script performs linting only, while 'check' lints and applies automatic fixes using Prettier.

```bash
# lint only
pnpm lint
# lint and prettier with autofix
pnpm check
```

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

### Base UI useRender hook usage

Source: https://github.com/mui/base-ui/blob/master/docs/src/app/(docs)/react/utils/use-render/page.mdx

This is a basic usage example of the `useRender` hook from Base UI. It shows the structure for passing input parameters to the hook.

```tsx
const element = useRender({
  // Input parameters
});
```

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

### Labeling Select and Slider Controls with Base UI Field

Source: https://github.com/mui/base-ui/blob/master/docs/src/app/(docs)/react/handbook/forms/page.mdx

This example demonstrates how to label <Select> and <Slider> components using their respective <Label> subcomponents within a <Field.Root>. <Field.Description> is used to provide additional accessible context for each control.

```tsx
import { Form } from '@base-ui/react/form';
import { Field } from '@base-ui/react/field';
import { Select } from '@base-ui/react/select';
import { Slider } from '@base-ui/react/slider';

<Form>
  <Field.Root>
    <Select.Root>
      <Select.Label>Time zone</Select.Label>
      <Select.Trigger />
    </Select.Root>
    <Field.Description>Used for notifications and reminders</Field.Description>
  </Field.Root>

  <Field.Root>
    <Slider.Root defaultValue={50}>
      <Slider.Label>Zoom level</Slider.Label>
      <Field.Description>Adjust the size of the user interface</Field.Description>
      <Slider.Control>
        <Slider.Track>
          <Slider.Thumb />
        </Slider.Track>
      </Slider.Control>
    </Slider.Root>
  </Field.Root>
</Form>;
```

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

### Nest multiple Base UI components

Source: https://github.com/mui/base-ui/blob/master/docs/src/app/(docs)/react/handbook/composition/page.mdx

Shows how to compose multiple Base UI components by nesting 'render' props. This is useful for complex interactions like triggers inside tooltips or dialogs.

```tsx
<Dialog.Root>
  <Tooltip.Root>
    <Tooltip.Trigger
      render={
        <Dialog.Trigger
          render={
            <Menu.Trigger render={<MyButton size="md" />}>
              Open menu
            </Menu.Trigger>
          }
        />
      }
    />
    <Tooltip.Portal>...</Tooltip.Portal>
  </Tooltip.Root>
  <Dialog.Portal>...</Dialog.Portal>
</Dialog.Root>
```

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

### Radix UI Slot component implementation

Source: https://github.com/mui/base-ui/blob/master/docs/src/app/(docs)/react/utils/use-render/page.mdx

This example shows how to implement the `asChild` prop using Radix UI's `Slot` component. It's useful when you need to pass props to a child component that replaces the default element.

```jsx
import { Slot } from 'radix-ui';

function Button({ asChild, ...props }) {
  const Comp = asChild ? Slot.Root : 'button';
  return <Comp {...props} />;
}

// Usage
<Button asChild>
  <MyButton className="primary">Submit</MyButton>
</Button>;
```

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

### Detached Drawer Triggers with Payload (JSX)

Source: https://github.com/mui/base-ui/blob/master/docs/src/app/(docs)/react/components/drawer/page.mdx

This example shows how to pass a payload from Drawer.Trigger to Drawer.Root using the function-as-a-child pattern, allowing the drawer to render different content based on the activating trigger.

```jsx
const demoDrawer = Drawer.createHandle<{ title: string }>();

// @highlight
// @highlight-text "payload"
<Drawer.Trigger handle={demoDrawer} payload={{ title: 'Profile' }}>
  Profile
</Drawer.Trigger>

// @highlight
// @highlight-text "payload"
<Drawer.Trigger handle={demoDrawer} payload={{ title: 'Settings' }}>
  Settings
</Drawer.Trigger>

<Drawer.Root handle={demoDrawer}>
  {({ payload }) => ( // @highlight-text "payload"
    <Drawer.Portal>
      <Drawer.Popup>
        <Drawer.Content>
          <Drawer.Title>{payload?.title}</Drawer.Title> {/* @highlight-text "payload" */}
        </Drawer.Content>
      </Drawer.Popup>
    </Drawer.Portal>
  )}
</Drawer.Root>
```

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

### Type Checking with TypeScript (Bash)

Source: https://github.com/mui/base-ui/blob/master/examples/tanstack-start-tailwind-css/README.md

Executes the TypeScript compiler to check for type errors within the project. This script ensures code quality and helps catch potential issues before runtime.

```bash
pnpm typescript
```

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

### Extend Component Props using Namespaces

Source: https://github.com/mui/base-ui/blob/master/docs/src/app/(docs)/react/handbook/typescript/page.mdx

Demonstrates how to use the Props interface from a component's namespace to accept all underlying Base UI props in a wrapper component.

```tsx
import { Tooltip } from '@base-ui/react/tooltip';

function MyTooltip(props: Tooltip.Root.Props) {
  return <Tooltip.Root {...props} />;
}
```

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

### Compose custom React components using the render prop

Source: https://github.com/mui/base-ui/blob/master/docs/src/app/(docs)/react/handbook/composition/page.mdx

Demonstrates how to replace default Base UI elements with custom React components. The custom component must correctly forward refs and spread props to the underlying DOM node.

```tsx
<Menu.Trigger render={<MyButton size="md" />}>
  Open menu
</Menu.Trigger>
```

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

### Create Basic Demo Component

Source: https://github.com/mui/base-ui/blob/master/CONTRIBUTING.md

Create a React component for a demo and then wrap it with `createDemo` to register it for documentation purposes.

```tsx
import * as React from 'react';
import { Button } from '@base-ui/react/button';

export default function ButtonBasic() {
  return (
    <div>
      <Button>Basic Button</Button>
    </div>
  );
}
```

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

### Preview Production Build with pnpm

Source: https://github.com/mui/base-ui/blob/master/examples/vite-css/README.md

Serves the production build locally to preview the final application. Ensure `pnpm build` is run first.

```bash
pnpm preview
```

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

### Uncontrolled Dialog Example

Source: https://github.com/mui/base-ui/blob/master/docs/src/app/(docs)/react/handbook/customization/page.mdx

A basic example of an uncontrolled dialog component. In this mode, the component manages its own state internally without external control.

```tsx
<Dialog.Root>
  <Dialog.Trigger /> {/* Opens the dialog when clicked. */}
</Dialog.Root>
```

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

### AutocompleteFilter.startsWith

Source: https://github.com/mui/base-ui/blob/master/docs/src/app/(docs)/react/components/autocomplete/types.md

Returns whether the item starts with the query.

```APIDOC
## AutocompleteFilter.startsWith

### Description
Returns whether the item starts with the query.

### Parameters
- **item** (`Item`)
- **query** (`string`)
- **itemToString?** (`(item: Item) => string`)

### Return Value
`boolean`
```

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

### Using the instance

Source: https://github.com/mui/base-ui/blob/master/docs/src/app/(docs)/react/components/toast/page.mdx

Integrate a global toast manager by passing its instance to the Toast.Provider, enabling centralized toast management.

```jsx
<Toast.Provider toastManager={toastManager}>
```

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

### Autocomplete - Input

Source: https://github.com/mui/base-ui/blob/master/docs/src/app/(docs)/react/components/page.mdx

The input field where users type to get suggestions.

```APIDOC
## Autocomplete - Input

### Description
The input field where users type to get suggestions.

### Props
- **className** (string) - Optional - The CSS class name.
- **disabled** (boolean) - Optional - If true, the input is disabled.
- **render** (function) - Optional - A render prop for custom rendering.
- **style** (object) - Optional - Inline styles.

### Data Attributes
- **data-dirty** - Indicates if the input has been modified.
- **data-disabled** - Indicates if the input is disabled.
- **data-filled** - Indicates if the input has a value.
- **data-focused** - Indicates if the input is focused.
- **data-invalid** - Indicates if the input value is invalid.
- **data-list-empty** - Indicates if the suggestion list is empty.
- **data-popup-open** - Indicates if the popup is open.
- **data-popup-side** - Indicates the side the popup is positioned on.
- **data-pressed** - Indicates if the input is pressed.
- **data-readonly** - Indicates if the input is read-only.
- **data-required** - Indicates if the input is required.
- **data-touched** - Indicates if the input has been touched.
- **data-valid** - Indicates if the input value is valid.
```

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

### Deploy Documentation with pnpm

Source: https://github.com/mui/base-ui/blob/master/scripts/README.md

Force-push the latest upstream `master` to the documentation release branch to deploy the documentation.

```bash
pnpm docs:deploy
```

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

### Define Align Type in TypeScript

Source: https://github.com/mui/base-ui/blob/master/docs/src/app/(docs)/react/components/preview-card/types.md

This type specifies alignment options, including 'start', 'center', and 'end'.

```typescript
type Align = 'start' | 'center' | 'end';
```

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

### Publish Packages with pnpm

Source: https://github.com/mui/base-ui/blob/master/scripts/README.md

Initiate the package publishing process. You may need to authenticate with GitHub.

```bash
pnpm release:publish
```

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

### Register Basic Demo Component

Source: https://github.com/mui/base-ui/blob/master/CONTRIBUTING.md

Export the demo component using `createDemo` to make it available in the documentation site.

```ts
import { createDemo } from 'docs/src/utils/createDemo';
import ButtonBasic from './ButtonBasic';

export const DemoButtonBasic = createDemo(import.meta.url, ButtonBasic);
```

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

### Progress Anatomy

Source: https://github.com/mui/base-ui/blob/master/docs/src/app/(docs)/react/components/progress/page.mdx

Import the Progress component and assemble its parts to create a progress bar. This example shows the basic structure.

```jsx
import { Progress } from '@base-ui/react/progress';

<Progress.Root>
  <Progress.Label />
  <Progress.Track>
    <Progress.Indicator />
  </Progress.Track>
  <Progress.Value />
</Progress.Root>
```

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

### Positioner Component Props

Source: https://github.com/mui/base-ui/blob/master/docs/src/app/(docs)/react/components/combobox/types.md

Details the `render` prop and provides examples for `alignOffset`, `sideOffset`, and `collisionAvoidance` props of the `Positioner` component.

```APIDOC
## Prop: `render`

### Type
`ReactElement | ((props: HTMLProps, state: Combobox.Positioner.State) => ReactElement)`

### Description
Allows you to replace the component's HTML element with a different tag, or compose it with another component. Accepts a `ReactElement` or a function that returns the element to render.

## Prop: `alignOffset`

### Description
Example usage for the `alignOffset` prop, which allows customizing the alignment offset based on positioning details.

### Example
```jsx
<Positioner
  alignOffset={({ side, align, anchor, positioner }) => {
    return side === 'top' || side === 'bottom' ? anchor.width : anchor.height;
  }}
/>
```

## Prop: `sideOffset`

### Description
Example usage for the `sideOffset` prop, which allows customizing the side offset based on positioning details.

### Example
```jsx
<Positioner
  sideOffset={({ side, align, anchor, positioner }) => {
    return side === 'top' || side === 'bottom' ? anchor.height : anchor.width;
  }}
/>
```

## Prop: `collisionAvoidance`

### Description
Example usage for the `collisionAvoidance` prop, which configures how the component reacts to collisions with the viewport edges.

### Example
```jsx
<Positioner
  collisionAvoidance={{
    side: 'shift',
    align: 'shift',
    fallbackAxisSide: 'none',
  }}
/>
```
```

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

### PreviewCard.Viewport

Source: https://github.com/mui/base-ui/blob/master/docs/src/app/(docs)/react/components/preview-card/page.mdx

The Viewport component is optional and should be used only when a single popup is opened by multiple triggers, its content differs per trigger, and the switch between them is animated. When used, set `width: var(--positioner-width)` and `height: var(--positioner-height)` on the `Positioner` so its box is frozen to the measured size during the transition; otherwise content-driven resizing can make the popup thrash or flip to another side.

```APIDOC
## Component: `PreviewCard.Viewport`

### Description
The `Viewport` is optional — reach for it only when a single popup is opened by multiple triggers, its content differs per trigger, and the switch between them is animated. When used, set `width: var(--positioner-width)` and `height: var(--positioner-height)` on the `Positioner` so its box is frozen to the measured size during the transition; otherwise content-driven resizing can make the popup thrash or flip to another side.

### Usage
```jsx
<PreviewCard.Viewport>
  {/* ... content that might change per trigger ... */}
</PreviewCard.Viewport>
```

### Props
(Props are defined by `TypesPreviewCard.Viewport`)
```

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

### Overflow Edges Type

Source: https://github.com/mui/base-ui/blob/master/docs/src/app/(docs)/react/components/scroll-area/types.md

Defines a type to represent overflow status on the start and end edges of both horizontal (x) and vertical (y) axes.

```typescript
type OverflowEdges = { xStart: boolean; xEnd: boolean; yStart: boolean; yEnd: boolean };
```

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

### Build Project for Production with pnpm

Source: https://github.com/mui/base-ui/blob/master/examples/vite-css/README.md

Compiles the project for production deployment. This command optimizes assets and code.

```bash
pnpm build
```

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

### Run Browser Tests

Source: https://github.com/mui/base-ui/blob/master/test/README.md

Commands to execute the test suite in headless browser environments.

```bash
pnpm test:chromium
```

```bash
pnpm test:firefox
```

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

### Import and Use Toggle Component

Source: https://github.com/mui/base-ui/blob/master/docs/src/app/(docs)/react/components/toggle/page.mdx

Import the Toggle component from '@base-ui/react/toggle' and use it as a single part. No additional props are shown in this basic anatomy example.

```jsx
import { Toggle } from '@base-ui/react/toggle';

<Toggle />;
```

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

### Configure `promise` method with string descriptions

Source: https://github.com/mui/base-ui/blob/master/docs/src/app/(docs)/react/components/toast/page.mdx

Use this snippet to configure the `promise` method to display simple string descriptions for the `loading`, `success`, and `error` states of an asynchronous toast.

```tsx
const promise = toastManager.promise(
  new Promise((resolve) => {
    setTimeout(() => resolve('world!'), 1000);
  }),
  {
    // Each are a shortcut for the `description` option
    loading: 'Loading…',
    success: (data) => `Hello ${data}`,
    error: (err) => `Error: ${err}`,
  },
);
```

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

### Controlled dialog

Source: https://github.com/mui/base-ui/blob/master/docs/src/app/(docs)/react/components/dialog/page.mdx

Use `open` and `onOpenChange` props to access or control the dialog's state, for example, to open it imperatively or close it after a form submission.

```tsx
const [open, setOpen] = React.useState(false);
return (
  <Dialog.Root open={open} onOpenChange={setOpen}>
    <Dialog.Trigger>Open</Dialog.Trigger>
    <Dialog.Portal>
      <Dialog.Popup>
        <form
          // Close the dialog once the form data is submitted
          onSubmit={async () => {
            await submitData();
            setOpen(false);
          }}
        >
          ...
        </form>
      </Dialog.Popup>
    </Dialog.Portal>
  </Dialog.Root>
);
```

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

### Create Demo Component with Variants

Source: https://github.com/mui/base-ui/blob/master/CONTRIBUTING.md

For demos with multiple styling variants (e.g., CSS Modules, Tailwind CSS), use `createDemoWithVariants` and provide an object mapping variant names to their respective components.

```ts
import { createDemoWithVariants } from 'docs/src/utils/createDemo';
import CssModules from './css-modules';
import Tailwind from './tailwind';

export const DemoButtonHero = createDemoWithVariants(import.meta.url, { CssModules, Tailwind });
```

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

### Define ComboboxFilter Type

Source: https://github.com/mui/base-ui/blob/master/docs/src/app/(docs)/react/components/combobox/types.md

This type defines the interface for filtering functions, providing methods to check if an item contains, starts with, or ends with a given query string.

```typescript
type ComboboxFilter = {
  /** Returns whether the item matches the query anywhere. */
  contains: <Item>(item: Item, query: string, itemToString?: (item: Item) => string) => boolean;
  /** Returns whether the item starts with the query. */
  startsWith: <Item>(item: Item, query: string, itemToString?: (item: Item) => string) => boolean;
  /** Returns whether the item ends with the query. */
  endsWith: <Item>(item: Item, query: string, itemToString?: (item: Item) => string) => boolean;
};
```

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

### Multiple PreviewCard Triggers within Root

Source: https://github.com/mui/base-ui/blob/master/docs/src/app/(docs)/react/components/preview-card/page.mdx

Demonstrates how to use multiple PreviewCard.Trigger components inside a single PreviewCard.Root to activate the same preview card.

```jsx
<PreviewCard.Root>
  <PreviewCard.Trigger href="#">Trigger 1</PreviewCard.Trigger>
  <PreviewCard.Trigger href="#">Trigger 2</PreviewCard.Trigger>
  ...
</PreviewCard.Root>
```

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

### Define Autocomplete Filter Type

Source: https://github.com/mui/base-ui/blob/master/docs/src/app/(docs)/react/components/autocomplete/types.md

This type defines the structure of an Autocomplete filter object, including methods for checking if an item contains, starts with, or ends with a given query.

```typescript
type AutocompleteFilter = {
  /** Returns whether the item matches the query anywhere. */
  contains: <Item>(item: Item, query: string, itemToString?: (item: Item) => string) => boolean;
  /** Returns whether the item starts with the query. */
  startsWith: <Item>(item: Item, query: string, itemToString?: (item: Item) => string) => boolean;
  /** Returns whether the item ends with the query. */
  endsWith: <Item>(item: Item, query: string, itemToString?: (item: Item) => string) => boolean;
};
```

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

### Formatting Select value with a lookup map

Source: https://github.com/mui/base-ui/blob/master/docs/src/app/(docs)/react/components/select/page.mdx

This example demonstrates using a function as the `children` prop of `<Select.Value>` to render a custom formatted value based on a lookup map.

```jsx
const items = {
  monospace: 'Monospace',
  serif: 'Serif',
  'san-serif': 'Sans-serif',
};

<Select.Value>
  {/* @highlight-start */}
  {(value: keyof typeof items) => (
    <span style={{ fontFamily: value }}>
      {items[value]}
    </span>
  )}
  {/* @highlight-end */}
</Select.Value>;
```

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

### Basic Unit Test with createRenderer

Source: https://github.com/mui/base-ui/blob/master/test/README.md

Use `createRenderer` from `#test-utils` for unit tests. It provides a render function similar to `@testing-library/react`.

```javascript
describe('test suite', () => {
  const { render } = createRenderer();

  test('first', async () => {
    await render(<input />);
  });
});
```

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

### Adding Top-Level Type Exports

Source: https://github.com/mui/base-ui/blob/master/CONTRIBUTING.md

If a type is not exported at the top level, add an export in `index.ts` to make it globally accessible. This example re-exports types from another module.

```typescript
export type { 
  DialogPopupProps as AlertDialogPopupProps,
  DialogPopupState as AlertDialogPopupState,
} from '../dialog/popup/DialogPopup';
```

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

### Exporting Namespace Types in TypeScript

Source: https://github.com/mui/base-ui/blob/master/CONTRIBUTING.md

Ensure types within a namespace are also exported at the top level for `createTypes` to function correctly. This example shows how `AlertDialogPopupProps` should be exported.

```typescript
export type AlertDialogPopupProps = {
  // ...
};
export declare namespace AlertDialogPopup {
  // ...
  type Props = AlertDialogPopupProps;
}
```

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

### Backdrop and release timing

Source: https://github.com/mui/base-ui/blob/master/docs/src/app/(docs)/react/components/drawer/page.mdx

Control backdrop opacity during swiping with "--drawer-swipe-progress" and adjust release transition durations based on swipe velocity using "--drawer-swipe-strength".

```css
.DrawerBackdrop {
  --backdrop-opacity: 0.2;
  opacity: calc(var(--backdrop-opacity) * (1 - var(--drawer-swipe-progress)));
}

.DrawerPopup[data-ending-style],
.DrawerBackdrop[data-ending-style] {
  transition-duration: calc(var(--drawer-swipe-strength) * 400ms);
}

.DrawerPopup[data-swiping],
.DrawerBackdrop[data-swiping] {
  transition-duration: 0ms;
}
```

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

### Generate Changelog with pnpm

Source: https://github.com/mui/base-ui/blob/master/scripts/README.md

Use this command to generate the changelog, which must be prepended to the top-level `CHANGELOG.md`.

```bash
pnpm release:changelog
```

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

### Define Grouped Autocomplete Items in TypeScript

Source: https://github.com/mui/base-ui/blob/master/docs/src/app/(docs)/react/components/autocomplete/page.mdx

Defines the TypeScript interface for a grouped item and an example array of grouped produce items, where each group has a value and an array of string items.

```tsx
interface ProduceGroupItem {
  value: string;
  // @highlight
  items: string[];
}

const groups: ProduceGroupItem[] = [
  {
    value: 'Fruits',
    // @highlight
    items: ['Apple', 'Banana', 'Orange'],
  },
  {
    value: 'Vegetables',
    // @highlight
    items: ['Carrot', 'Lettuce', 'Spinach'],
  },
];
```

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

### Handle Custom Event Types

Source: https://github.com/mui/base-ui/blob/master/docs/src/app/(docs)/react/handbook/typescript/page.mdx

Illustrates how to use ChangeEventDetails and other event-related types provided by component namespaces to type event handler callbacks.

```tsx
function onValueChange(value: string, eventDetails: Combobox.Root.ChangeEventDetails) {
  console.log(value, eventDetails);
}

function onOpenChange(open: boolean, eventDetails: Combobox.Root.ChangeEventDetails) {
  console.log(open, eventDetails);
}
```

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

### Handle.isOpen

Source: https://github.com/mui/base-ui/blob/master/docs/src/app/(docs)/react/components/preview-card/types.md

Checks whether the preview card associated with this handle is currently open. Returns `false` if no root is attached.

```APIDOC
## Handle.isOpen

### Description
Whether the preview card is currently open. Returns `false` while no root is attached to the handle.

### Property
- **isOpen** (`boolean`) - Readonly - Indicates if the preview card is currently open.
```

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

### Run Visual Regression Tests

Source: https://github.com/mui/base-ui/blob/master/test/README.md

Commands for development and execution of visual regression testing suites.

```bash
pnpm test:regressions:dev
```

```bash
pnpm test:regressions:run
```

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

### Controlled Dialog Example with Timeout

Source: https://github.com/mui/base-ui/blob/master/docs/src/app/(docs)/react/handbook/customization/page.mdx

Demonstrates how to control a dialog component using external state. The 'open' state is managed by React.useState and passed to the Dialog.Root, allowing programmatic control, such as opening after a timeout.

```tsx
const [open, setOpen] = React.useState(false);

React.useEffect(() => {
  const timeout = setTimeout(() => {
    setOpen(true);
  }, 1000);
  return () => clearTimeout(timeout);
}, []);

return (
  <Dialog.Root open={open} onOpenChange={setOpen}>
    No trigger is needed in this case.
  </Dialog.Root>
);
```

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

### Specifying generic type parameters for Select

Source: https://github.com/mui/base-ui/blob/master/docs/src/app/(docs)/react/components/select/page.mdx

This example demonstrates how to create a typed wrapper component around the Select component, ensuring correct type inference and safety for `Value` and `Multiple` props.

```tsx
import * as React from 'react';
import { Select } from '@base-ui/react/select';

export function MySelect<Value, Multiple extends boolean | undefined = false>(
  props: Select.Root.Props<Value, Multiple>,
): React.JSX.Element {
  return <Select.Root {...props}>{/* ... */}</Select.Root>;
}
```

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

### Configure `promise` method with full options object

Source: https://github.com/mui/base-ui/blob/master/docs/src/app/(docs)/react/components/toast/page.mdx

This snippet demonstrates how to configure the `promise` method using a full options object for each state, allowing granular control over toast properties like title, description, and actions.

```tsx
const promise = toastManager.promise(
  new Promise((resolve) => {
    setTimeout(() => resolve('world!'), 1000);
  }),
  {
    loading: {
      title: 'Loading…',
      description: 'The promise is loading.',
    },
    success: {
      title: 'Success',
      description: 'The promise resolved successfully.',
    },
    error: {
      title: 'Error',
      description: 'The promise rejected.',
      actionProps: {
        children: 'Contact support',
        onClick() {
          // Redirect to support page
        },
      },
    },
  },
);
```

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

### Customizing NavigationMenu.Link for Next.js

Source: https://github.com/mui/base-ui/blob/master/docs/src/app/(docs)/react/components/navigation-menu/page.mdx

Demonstrates how to integrate a framework-specific link component, such as Next.js's NextLink, into the NavigationMenu.Link part using the render prop for client-side routing.

```jsx
// @highlight
import NextLink from 'next/link';
import { NavigationMenu } from '@base-ui/react/navigation-menu';

function Link(props: NavigationMenu.Link.Props) {
  return (
    <NavigationMenu.Link
      // @highlight
      render={<NextLink href={props.href} />}
      {...props}
    />
  );
}
```

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

### Configuring Form-Level Validation with TanStack Form

Source: https://github.com/mui/base-ui/blob/master/docs/src/app/(docs)/react/handbook/forms/page.mdx

This example demonstrates configuring form-level validation using `revalidateLogic` for a native form-like strategy and `validators.onDynamic` to define validation rules for multiple fields based on their values.

```tsx
import { useForm, revalidateLogic } from '@tanstack/react-form'; // @highlight-text "revalidateLogic"

const form = useForm({
  defaultValues: {
    username: '',
    email: '',
  },
  {/* @highlight-start */}
  validationLogic: revalidateLogic({ {/* @highlight-text "revalidateLogic" */}
  {/* @highlight-end */}
    mode: 'submit',
    modeAfterSubmission: 'change',
  }),
  validators: {
    // @highlight-start
    onDynamic: ({ value: formValues }) => { // @highlight-text "onDynamic"
    // @highlight-end
      const errors = {};

      if (!formValues.username) {
        errors.username = 'Username is required.';
      } else if (formValues.username.length < 3) {
        errors.username = 'At least 3 characters.';
      }

      if (!formValues.email) {
        errors.email = 'Email is required.';
      } else if (!isValidEmail(formValues.email)) {
        errors.email = 'Invalid email address.';
      }

      return { form: errors, fields: errors };
    },
  },
});
```

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

### VirtualKeyboardProvider Component

Source: https://github.com/mui/base-ui/blob/master/docs/src/app/(docs)/react/components/drawer/types.md

Provides keyboard-aware focus and scroll handling for bottom-sheet drawers with form fields.

```APIDOC
## VirtualKeyboardProvider Component

### Description
Provides keyboard-aware focus and scroll handling for bottom-sheet drawers with form fields.

### Props
- **children** (`React.ReactNode`) - Optional - Content to be rendered within the provider.
```

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

### Connecting a dialog to a menu

Source: https://github.com/mui/base-ui/blob/master/docs/src/app/(docs)/react/components/dialog/page.mdx

Control the dialog state and open it imperatively using the `onClick` handler on a menu item to connect a dialog to a menu.

```tsx
import * as React from 'react';
import { Dialog } from '@base-ui/react/dialog';
import { Menu } from '@base-ui/react/menu';

function ExampleMenu() {
  const [dialogOpen, setDialogOpen] = React.useState(false);

  return (
    <React.Fragment>
      <Menu.Root>
        <Menu.Trigger>Open menu</Menu.Trigger>
        <Menu.Portal>
          <Menu.Positioner>
            <Menu.Popup>
              {/* @highlight-start */}
              {/* Open the dialog when the menu item is clicked */}
              <Menu.Item onClick={() => setDialogOpen(true)}>Open dialog</Menu.Item>
              {/* @highlight-end */}
            </Menu.Popup>
          </Menu.Positioner>
        </Menu.Portal>
      </Menu.Root>

      {/* @highlight-start */}
      {/* Control the dialog state */}
      <Dialog.Root open={dialogOpen} onOpenChange={setDialogOpen}>
        {/* @highlight-end */}
        <Dialog.Portal>
          <Dialog.Backdrop />
          <Dialog.Popup>
            {/* prettier-ignore */}
            {/* Rest of the dialog */}
          </Dialog.Popup>
        </Dialog.Portal>
      </Dialog.Root>
    </React.Fragment>
  );
}
```

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

### Prevent Tooltip Closing on Trigger Press

Source: https://github.com/mui/base-ui/blob/master/docs/src/app/(docs)/react/handbook/customization/page.mdx

Demonstrates how to cancel a Base UI event to prevent a component's state from changing. This example prevents a tooltip from closing when the trigger is pressed by calling eventDetails.cancel().

```tsx
<Tooltip.Root
  onOpenChange={(open, eventDetails) => {
    if (eventDetails.reason === 'trigger-press') {
      // Stop the open change (false) from happening.
      eventDetails.cancel(); // @highlight-text "cancel"
    }
  }}
>
  ...
</Tooltip.Root>
```

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

### Override default rendered elements

Source: https://github.com/mui/base-ui/blob/master/docs/src/app/(docs)/react/handbook/composition/page.mdx

Illustrates how to change the default HTML element rendered by a Base UI component, such as changing a div to an anchor tag for navigation.

```tsx
import { Menu } from '@base-ui/react/menu';

export default () => (
  <Menu.Root>
    <Menu.Trigger>Song</Menu.Trigger>
    <Menu.Portal>
      <Menu.Positioner>
        <Menu.Popup>
          <Menu.Item render={<a href="base-ui.com" />}>
            Add to Library
          </Menu.Item>
        </Menu.Popup>
      </Menu.Positioner>
    </Menu.Portal>
  </Menu.Root>
);
```

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

### Initialize a form instance with TanStack Form

Source: https://github.com/mui/base-ui/blob/master/docs/src/app/(docs)/react/handbook/forms/page.mdx

Create a form instance using the `useForm` hook from TanStack Form, defining initial values for each field via the `defaultValues` parameter.

```tsx
import { useForm } from '@tanstack/react-form';

interface FormValues {
  username: string;
  email: string;
}

const defaultValues: FormValues = {
  username: '',
  email: '',
};

{/* @highlight-start */}
/* useForm returns a form instance */
const form = useForm<FormValues>({
{/* @highlight-end */}
  defaultValues,
});
```

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

### `toastManager.promise` method

Source: https://github.com/mui/base-ui/blob/master/docs/src/app/(docs)/react/components/toast/page.mdx

Creates an asynchronous toast that displays different messages or configurations based on the `loading`, `success`, and `error` states of a provided Promise. Each state can be configured with a simple string or a detailed options object.

```APIDOC
## `toastManager.promise` method

### Description
Creates an asynchronous toast that automatically updates its state (loading, success, error) based on the lifecycle of a provided JavaScript Promise. This method allows for flexible configuration of the toast's appearance and behavior for each state.

### Method
`toastManager.promise(promise: Promise<any>, options: PromiseToastOptions): ToastId`

### Parameters
- **promise** (`Promise<any>`) - Required - The JavaScript Promise instance to be tracked. The toast's state will transition as this promise resolves or rejects.
- **options** (`PromiseToastOptions`) - Required - An object containing configuration for the `loading`, `success`, and `error` states of the toast.

#### `PromiseToastOptions` Details
- **loading** (`string | ToastOptions`) - Configuration for the toast while the promise is pending. Can be a simple string for the description or a `ToastOptions` object for more detailed control (e.g., `title`, `description`).
- **success** (`(data: any) => string | ToastOptions`) - Configuration for the toast when the promise resolves. Can be a function that receives the resolved data and returns a string for the description, or a `ToastOptions` object.
- **error** (`(err: any) => string | ToastOptions`) - Configuration for the toast when the promise rejects. Can be a function that receives the error object and returns a string for the description, or a `ToastOptions` object.

### Request Example
```tsx
// Example 1: Simple description configuration
const promiseToast1 = toastManager.promise(
  new Promise((resolve) => {
    setTimeout(() => resolve('world!'), 1000);
  }),
  {
    loading: 'Loading…',
    success: (data) => `Hello ${data}`,
    error: (err) => `Error: ${err}`,
  },
);

// Example 2: Detailed method options configuration
const promiseToast2 = toastManager.promise(
  new Promise((resolve) => {
    setTimeout(() => resolve('world!'), 1000);
  }),
  {
    loading: {
      title: 'Loading…',
      description: 'The promise is loading.',
    },
    success: {
      title: 'Success',
      description: 'The promise resolved successfully.',
    },
    error: {
      title: 'Error',
      description: 'The promise rejected.',
      actionProps: {
        children: 'Contact support',
        onClick() {
          // Redirect to support page
        },
      },
    },
  },
);
```

### Response
This method returns a `ToastId`, which is a unique identifier for the created toast. This ID can be used with other `toastManager` methods (e.g., `update`, `dismiss`) to programmatically control the toast after its initial creation.
```

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

### Positioning hidden inputs for native validation in TSX

Source: https://github.com/mui/base-ui/blob/master/docs/src/app/(docs)/react/handbook/forms/page.mdx

This example shows how to wrap a `Select.Trigger` in a `div` with `className="relative"` to ensure the native validation bubble for the hidden input points to the correct area.

```tsx
import { Field } from '@base-ui/react/field';
import { Select } from '@base-ui/react/select';

<Field.Root name="apple">
  <Select.Root>
    <Select.Label>Apple</Select.Label>
    <div className="relative">
      <Select.Trigger />
    </div>
  </Select.Root>
</Field.Root>;
```

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

### Using Tooltip.Provider Component

Source: https://github.com/mui/base-ui/blob/master/docs/src/app/(docs)/react/components/tooltip/page.mdx

Renders the `Tooltip.Provider` component, establishing the context for all descendant Tooltip components.

```jsx
<TypesTooltip.Provider />
```

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

### Manually Unmounting Component After Animation with Motion

Source: https://github.com/mui/base-ui/blob/master/docs/src/app/(docs)/react/handbook/animation/page.mdx

This example shows how to manually unmount a component after its exit animation completes using an `actionsRef` passed to the Root component. It provides full control over the component's lifecycle.

```jsx
function App() {
  const [open, setOpen] = React.useState(false);
  const actionsRef = React.useRef(null); {"/* @highlight-text "actionsRef" */"}

  return (
    {"/* @highlight-text "actionsRef" */"}
    <Popover.Root open={open} onOpenChange={setOpen} actionsRef={actionsRef}>
      <Popover.Trigger>Trigger</Popover.Trigger>
      <AnimatePresence>
        {open && (
          <Popover.Portal keepMounted>
            <Popover.Positioner>
              <Popover.Popup
                render={
                  <motion.div
                    initial={{ scale: 0 }}
                    animate={{ scale: 1 }}
                    exit={{ scale: 0 }}
                    onAnimationComplete={() => {
                      if (!open) {
                        actionsRef.current.unmount(); {"/* @highlight-text "actionsRef" */"}
                      }
                    }}
                  />
                }
              >
                Popup
              </Popover.Popup>
            </Popover.Positioner>
          </Popover.Portal>
        )}
      </AnimatePresence>
    </Popover.Root>
  );
}
```

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

### Labeling an OTP Field for Accessibility (React TSX)

Source: https://github.com/mui/base-ui/blob/master/docs/src/app/(docs)/react/components/otp-field/page.mdx

This example demonstrates how to properly label an OTP field for accessibility using a native <label> and aria-describedby. It also shows adding aria-label to individual input slots.

```tsx
<div>
  <label htmlFor="verification-code">Verification code</label>
  <OTPField.Root id="verification-code" length={6} aria-describedby="verification-code-description">
    <OTPField.Input />
    <OTPField.Input aria-label="Character 2 of 6" />
    <OTPField.Input aria-label="Character 3 of 6" />
    <OTPField.Input aria-label="Character 4 of 6" />
    <OTPField.Input aria-label="Character 5 of 6" />
    <OTPField.Input aria-label="Character 6 of 6" />
  </OTPField.Root>
  <p id="verification-code-description">Enter the 6-character code we sent to your device.</p>
</div>
```

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

### Using Tooltip.Root Component

Source: https://github.com/mui/base-ui/blob/master/docs/src/app/(docs)/react/components/tooltip/page.mdx

Renders the `Tooltip.Root` component, serving as the main container for a tooltip instance.

```jsx
<TypesTooltip.Root />
```

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

### Format Select.Value with children prop (TSX)

Source: https://github.com/mui/base-ui/blob/master/docs/src/app/(docs)/react/components/select/types.md

Use the `children` prop to customize the display of the selected value within the `Select.Value` component. This example shows how to map a value to a label or display a default 'No value' message.

```tsx
<Select.Value>{(value: string | null) => (value ? labels[value] : 'No value')}</Select.Value>
```

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

### Add Toast on Button Click (React)

Source: https://github.com/mui/base-ui/blob/master/docs/src/app/(docs)/react/components/toast/page.mdx

Demonstrates how to integrate the `add` method of the toast manager within a React component to display a toast when a user interacts with a button.

```jsx
function App() {
  // @highlight
  const toastManager = Toast.useToastManager();
  return (
    <button
      type="button"
      onClick={() => {
        // @highlight-start
        toastManager.add({
          description: 'Hello, world!',
        });
        // @highlight-end
      }}
    >
      Add toast
    </button>
  );
}
```

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

### Detached triggers with payload

Source: https://github.com/mui/base-ui/blob/master/docs/src/app/(docs)/react/components/alert-dialog/page.mdx

This example shows how to pass a payload from a trigger to the alert dialog's content, allowing the dialog to render different information based on which trigger opened it. The payload can be strongly typed using createHandle().

```jsx
const demoAlertDialog = AlertDialog.createHandle<{ message: string }>();

<AlertDialog.Trigger handle={demoAlertDialog} payload={{ message: 'Trigger 1' }}>
  Trigger 1
</AlertDialog.Trigger>

<AlertDialog.Trigger handle={demoAlertDialog} payload={{ message: 'Trigger 2' }}>
  Trigger 2
</AlertDialog.Trigger>

<AlertDialog.Root handle={demoAlertDialog}>
  {({ payload }) => (
    <AlertDialog.Portal>
      <AlertDialog.Popup>
        <AlertDialog.Title>Alert dialog</AlertDialog.Title>
        {payload !== undefined && (
          <AlertDialog.Description>
            Confirming {payload.message}
          </AlertDialog.Description>
        )}
      </AlertDialog.Popup>
    </AlertDialog.Portal>
  )}
</AlertDialog.Root>
```