### Install Dependencies in Example App

Source: https://github.com/adobe/react-spectrum/blob/main/CONTRIBUTING.md

Install project dependencies within an example application directory, typically after starting the Verdaccio registry.

```bash
yarn install
```

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

### Start development server

Source: https://github.com/adobe/react-spectrum/blob/main/examples/s2-esbuild-starter-app/README.md

Commands to install dependencies and launch the development environment.

```bash
yarn install
yarn start
python -m http.server
```

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

### Install with shadcn CLI

Source: https://github.com/adobe/react-spectrum/blob/main/packages/dev/s2-docs/pages/react-aria/getting-started.mdx

Use the shadcn CLI to add example code, styles, and dependencies to your project. This command installs all components.

```bash
npx shadcn-ui@latest add
```

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

### Basic React Spectrum App Setup

Source: https://github.com/adobe/react-spectrum/blob/main/packages/@adobe/react-spectrum/README.md

This example demonstrates the basic setup for a React Spectrum application, including importing necessary components and rendering a Button within a Provider.

```jsx
import {Provider, defaultTheme, Button} from '@adobe/react-spectrum';

// Render it in your app!
function App() {
  return (
    <Provider theme={theme}>
      <Button
        variant="cta"
        onPress={() => alert('Hey there!')}>
        Hello React Spectrum!
      </Button>
    </Provider>
  );
}
```

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

### Install and Run Storybook

Source: https://github.com/adobe/react-spectrum/blob/main/starters/docs/README.md

Run these commands to install dependencies and start the Storybook server.

```shell
yarn
yarn storybook
```

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

### Run Development Server

Source: https://github.com/adobe/react-spectrum/blob/main/examples/s2-parcel-example/README.md

Commands to install dependencies and start the local development environment.

```bash
yarn install
yarn dev
```

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

### Install MCP Server with npx

Source: https://github.com/adobe/react-spectrum/blob/main/packages/dev/mcp/s2/README.md

Quickly start the MCP server using npx for immediate use.

```bash
npx @react-spectrum/mcp@latest
```

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

### Install MCP Server with npx

Source: https://github.com/adobe/react-spectrum/blob/main/packages/dev/mcp/react-aria/README.md

Run the MCP server directly using npx for quick setup.

```bash
npx @react-aria/mcp@latest
```

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

### Start Local Development

Source: https://github.com/adobe/react-spectrum/blob/main/packages/dev/style-macro-chrome-plugin/README.md

Commands to initialize dependencies and start the development build process for the plugin.

```bash
yarn
yarn workspace style-macro-chrome-plugin start
// or build to avoid refresh bugs in HMR
yarn workspace style-macro-chrome-plugin build
```

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

### Basic usePress Example

Source: https://github.com/adobe/react-spectrum/blob/main/packages/dev/s2-docs/pages/react-aria/usePress.mdx

Demonstrates how to use the usePress hook to track press events and update the UI. It logs press start, end, and press events with their pointer types to a list.

```tsx
"use client";
import React from 'react';
import {usePress} from 'react-aria/usePress';

function Example() {
  let [events, setEvents] = React.useState<string[]>([]);
  let {pressProps, isPressed} = usePress({
    onPressStart: e => setEvents(
      events => [...events, `press start with ${e.pointerType}`]
    ),
    onPressEnd: e => setEvents(
      events => [...events, `press end with ${e.pointerType}`]
    ),
    onPress: e => setEvents(
      events => [...events, `press with ${e.pointerType}`]
    )
  });

  return (
    <>
      <div
        {...pressProps}
        style={{
          background: isPressed ? 'darkgreen' : 'green',
          color: 'white',
          display: 'inline-block',
          padding: '8px 12px',
          borderRadius: 8,
          cursor: 'pointer'
        }}
        role="button"
        tabIndex={0}>
        Press me!
      </div>
      <ul
        style={{
          maxHeight: '200px',
          overflow: 'auto'
        }}>
        {events.map((e, i) => <li key={i}>{e}</li>)}
      </ul>
    </>
  );
}

```

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

### Install React Stately

Source: https://github.com/adobe/react-spectrum/blob/main/packages/dev/docs/pages/react-stately/getting-started.mdx

Commands to install the full library or individual hook packages.

```bash
yarn add react-stately
```

```bash
yarn add @react-stately/radio
```

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

### ContextualHelp Basic Example

Source: https://github.com/adobe/react-spectrum/blob/main/packages/@adobe/react-spectrum/docs/contextualhelp/ContextualHelp.mdx

A basic example of how to use the ContextualHelp component with an info variant.

```APIDOC
## ContextualHelp Basic Example

### Description
This example demonstrates the basic usage of the ContextualHelp component with the 'info' variant.

### Method
N/A (Component Usage)

### Endpoint
N/A (Component Usage)

### Request Body
N/A (Component Usage)

### Request Example
```jsx
<ContextualHelp variant="info">
  <Heading>Need help?</Heading>
  <Content><Text>If you're having issues accessing your account, contact our customer support team for help.</Text></Content>
</ContextualHelp>
```

### Response
N/A (Component Usage)
```

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

### Install @react-spectrum/test-utils

Source: https://github.com/adobe/react-spectrum/blob/main/packages/dev/s2-docs/skills/react-spectrum-s2/test-utils-guidance.md

Install the test utilities package as a development dependency.

```bash
npm install @react-spectrum/test-utils --save-dev
```

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

### Install @react-spectrum/test-utils

Source: https://github.com/adobe/react-spectrum/blob/main/packages/dev/s2-docs/pages/s2/CheckboxGroup/testing.mdx

Install the test utilities package as a development dependency.

```bash
npm install @react-spectrum/test-utils --dev
# or
yarn add @react-spectrum/test-utils --dev
```

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

### Install @react-spectrum/test-utils

Source: https://github.com/adobe/react-spectrum/blob/main/packages/@react-spectrum/test-utils/README.md

Install the test utilities package as a development dependency.

```bash
npm install @react-spectrum/test-utils --dev
```

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

### Install React Aria

Source: https://github.com/adobe/react-spectrum/blob/main/packages/dev/s2-docs/pages/react-aria/getting-started.mdx

Install React Aria using your preferred package manager. This command is used for initial setup.

```bash
npm install react-aria-components
```

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

### Start Development Server

Source: https://github.com/adobe/react-spectrum/blob/main/examples/next-app-csp/README.md

Commands to launch the local development environment using different package managers.

```bash
npm run dev
# or
yarn dev
# or
pnpm dev
# or
bun dev
```

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

### Implement Toolbar with Vanilla and Tailwind Starters

Source: https://github.com/adobe/react-spectrum/blob/main/packages/dev/s2-docs/pages/react-aria/Toolbar.mdx

Examples showing how to structure a Toolbar using either vanilla CSS or Tailwind CSS starters.

```tsx
"use client";
import {Toolbar} from 'vanilla-starter/Toolbar';
import {ToggleButtonGroup} from 'vanilla-starter/ToggleButtonGroup';
import {ToggleButton} from 'vanilla-starter/ToggleButton';
import {Button} from 'vanilla-starter/Button';
import {Select, SelectItem} from 'vanilla-starter/Select';
import {Separator} from 'vanilla-starter/Separator';
import {Group} from 'react-aria-components/Group';
import {Bold, Italic, Underline, ClipboardCopy, Scissors, ClipboardPaste} from 'lucide-react';

<Toolbar/* PROPS */>
  <ToggleButtonGroup aria-label="Style">
    <ToggleButton id="bold" aria-label="Bold">
      <Bold size={16} />
    </ToggleButton>
    <ToggleButton id="italic" aria-label="Italic">
      <Italic size={16} />
    </ToggleButton>
    <ToggleButton id="underline" aria-label="Underline">
      <Underline size={16} />
    </ToggleButton>
  </ToggleButtonGroup>
  <Separator />
  <Group aria-label="Clipboard">
    <Button aria-label="Copy">
      <ClipboardCopy size={16} />
    </Button>
    <Button aria-label="Cut">
      <Scissors size={16} />
    </Button>
    <Button aria-label="Paste">
      <ClipboardPaste size={16} />
    </Button>
  </Group>
  <Separator />
  <Select aria-label="Font" defaultSelectedKey="helvetica">
    <SelectItem id="helvetica">Helvetica</SelectItem>
    <SelectItem id="times">Times</SelectItem>
    <SelectItem id="comic-sans">Comic Sans</SelectItem>
  </Select>
</Toolbar>
```

```tsx
"use client";
import {Toolbar} from 'tailwind-starter/Toolbar';
import {ToggleButtonGroup} from 'tailwind-starter/ToggleButtonGroup';
import {ToggleButton} from 'tailwind-starter/ToggleButton';
import {Button} from 'tailwind-starter/Button';
import {Select, SelectItem} from 'tailwind-starter/Select';
import {Group} from 'react-aria-components/Group';
import {Bold, Italic, Underline, ClipboardCopy, Scissors, ClipboardPaste} from 'lucide-react';

<Toolbar/* PROPS */>
  <ToggleButtonGroup selectionMode="multiple" aria-label="Style">
    <ToggleButton aria-label="Bold">
      <Bold size={16} />
    </ToggleButton>
    <ToggleButton aria-label="Italic">
      <Italic size={16} />
    </ToggleButton>
    <ToggleButton aria-label="Underline">
      <Underline size={16} />
    </ToggleButton>
  </ToggleButtonGroup>
  <Group aria-label="Clipboard" className="flex gap-1" style={{flexDirection: 'inherit'}}>
    <Button aria-label="Copy" variant="secondary">
      <ClipboardCopy size={16} />
    </Button>
    <Button aria-label="Cut" variant="secondary">
      <Scissors size={16} />
    </Button>
    <Button aria-label="Paste" variant="secondary">
      <ClipboardPaste size={16} />
    </Button>
  </Group>
  <Select aria-label="Font" defaultSelectedKey="helvetica">
    <SelectItem id="helvetica">Helvetica</SelectItem>
    <SelectItem id="times">Times</SelectItem>
    <SelectItem id="comic-sans">Comic Sans</SelectItem>
  </Select>
</Toolbar>
```

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

### Local Development: Build and Start Docs Server

Source: https://github.com/adobe/react-spectrum/blob/main/packages/dev/mcp/s2/README.md

Build the docs and MCP server locally, then start the docs server for local testing.

```bash
yarn workspace @react-spectrum/s2-docs generate:md
yarn workspace @react-spectrum/mcp build
yarn start:s2-docs
```

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

### RadioGroup and Radio API Example

Source: https://github.com/adobe/react-spectrum/blob/main/packages/dev/s2-docs/pages/s2/RadioGroup.mdx

A minimal example showing the basic structure of RadioGroup and Radio components, often used to illustrate component hierarchy or as a starting point for API exploration.

```tsx
<RadioGroup>
  <Radio />
</RadioGroup>
```

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

### Basic Slider Example

Source: https://github.com/adobe/react-spectrum/blob/main/packages/react-aria-components/docs/Slider.mdx

A simple implementation of the Slider component with a label, output, track, and thumb. Ensure 'react-aria-components' is installed and imported.

```tsx
import {Slider, Label, SliderOutput, SliderTrack, SliderThumb} from 'react-aria-components';

<Slider defaultValue={30}>
  <Label>Opacity</Label>
  <SliderOutput />
  <SliderTrack>
    <SliderThumb />
  </SliderTrack>
</Slider>
```

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

### Vanilla Starter Tree Example

Source: https://github.com/adobe/react-spectrum/blob/main/packages/dev/s2-docs/pages/react-aria/Tree.mdx

Demonstrates a basic hierarchical structure using the Vanilla starter kit for the Tree component. Suitable for applications using Vanilla CSS.

```tsx
"use client";
import {Tree, TreeItem} from 'vanilla-starter/Tree';

<Tree
  /* PROPS */
  aria-label="Files">
  <TreeItem title="Documents">
    <TreeItem title="Project">
      <TreeItem title="Weekly Report" />
    </TreeItem>
  </TreeItem>
  <TreeItem title="Photos">
    <TreeItem title="Image 1" />
    <TreeItem title="Image 2" />
  </TreeItem>
</Tree>
```

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

### DisclosureGroup Vanilla Example

Source: https://github.com/adobe/react-spectrum/blob/main/packages/dev/s2-docs/pages/react-aria/DisclosureGroup.mdx

Basic usage of DisclosureGroup with Disclosure, DisclosureHeader, and DisclosurePanel components in a vanilla setup. Use this for custom styling.

```tsx
"use client";
import {DisclosureGroup} from 'vanilla-starter/DisclosureGroup';
import {Disclosure, DisclosureHeader, DisclosurePanel} from 'vanilla-starter/Disclosure';

<DisclosureGroup>
  <Disclosure>
    <DisclosureHeader>Personal Information</DisclosureHeader>
    <DisclosurePanel>Personal information form here.</DisclosurePanel>
  </Disclosure>
  <Disclosure>
    <DisclosureHeader>Billing Address</DisclosureHeader>
    <DisclosurePanel>Billing address form here.</DisclosurePanel>
  </Disclosure>
</DisclosureGroup>
```

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

### Basic Breadcrumbs Example

Source: https://github.com/adobe/react-spectrum/blob/main/packages/react-aria-components/docs/Breadcrumbs.mdx

Demonstrates a standard implementation of Breadcrumbs with nested Breadcrumb items and Link components. Ensure 'react-aria-components' is installed and imported.

```tsx
import {Breadcrumbs, Breadcrumb, Link} from 'react-aria-components';

<Breadcrumbs>
  <Breadcrumb><Link href="/">Home</Link></Breadcrumb>
  <Breadcrumb><Link href="/react-aria/">React Aria</Link></Breadcrumb>
  <Breadcrumb><Link>Breadcrumbs</Link></Breadcrumb>
</Breadcrumbs>
```

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

### Initialize React Spectrum Example App

Source: https://github.com/adobe/react-spectrum/blob/main/packages/dev/docs/pages/react-aria/index.mdx

Mounts the ExampleApp component into the DOM using ReactDOM.

```tsx
import {ExampleApp} from './home/ExampleApp';

ReactDOM.createRoot(document.getElementById('example-app')).render(<ExampleApp />);
```

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

### DisclosureGroup Tailwind Example

Source: https://github.com/adobe/react-spectrum/blob/main/packages/dev/s2-docs/pages/react-aria/DisclosureGroup.mdx

Basic usage of DisclosureGroup with Disclosure, DisclosureHeader, and DisclosurePanel components in a Tailwind CSS setup. Use this for Tailwind-styled components.

```tsx
"use client";
import {DisclosureGroup} from 'tailwind-starter/DisclosureGroup';
import {Disclosure, DisclosureHeader, DisclosurePanel} from 'tailwind-starter/Disclosure';

<DisclosureGroup>
  <Disclosure>
    <DisclosureHeader>Personal Information</DisclosureHeader>
    <DisclosurePanel>Personal information form here.</DisclosurePanel>
  </Disclosure>
  <Disclosure>
    <DisclosureHeader>Billing Address</DisclosureHeader>
    <DisclosurePanel>Billing address form here.</DisclosurePanel>
  </Disclosure>
</DisclosureGroup>
```

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

### Build and Test Local MCP Server

Source: https://github.com/adobe/react-spectrum/blob/main/packages/dev/mcp/react-aria/README.md

Build the local MCP server and documentation, then start the documentation server for local testing. Update your MCP client configuration to point to the local server.

```bash
yarn workspace @react-spectrum/s2-docs generate:md
yarn workspace @react-aria/mcp build
yarn start:s2-docs
```

```json
{
  "mcpServers": {
    "React Aria": {
      "command": "node",
      "args": ["{your path here}/react-spectrum/packages/dev/mcp/react-aria/dist/index.js"],
      "env": {
        "DOCS_CDN_BASE": "http://localhost:1234"
      }
    }
  }
}
```

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

### Swatches with ColorPicker

Source: https://github.com/adobe/react-spectrum/blob/main/packages/dev/s2-docs/pages/react-aria/ColorPicker.mdx

Integrate ColorSwatchPicker to provide predefined color presets within a ColorPicker. This example shows basic setup with ColorArea and ColorSlider.

```tsx
"use client";
import {ColorPicker} from 'vanilla-starter/ColorPicker';
import {ColorArea} from 'vanilla-starter/ColorArea';
import {ColorSlider} from 'vanilla-starter/ColorSlider';
import {ColorSwatchPicker, ColorSwatchPickerItem} from 'vanilla-starter/ColorSwatchPicker';

<ColorPicker label="Color" defaultValue="#A00">
  <ColorArea colorSpace="hsb" xChannel="saturation" yChannel="brightness" />
  <ColorSlider colorSpace="hsb" channel="hue" />
  <ColorSwatchPicker>
    <ColorSwatchPickerItem color="#A00" />
    <ColorSwatchPickerItem color="#f80" />
    <ColorSwatchPickerItem color="#080" />
    <ColorSwatchPickerItem color="#08f" />
    <ColorSwatchPickerItem color="#008" />
  </ColorSwatchPicker>
</ColorPicker>
```

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

### Vanilla Starter Table Example

Source: https://github.com/adobe/react-spectrum/blob/main/packages/dev/s2-docs/pages/react-aria/Table.mdx

Displays data in rows and columns with nested rows, using the Vanilla starter kit. Supports multiple selection and includes a tree column for hierarchical data.

```tsx
"use client";
import {Table, TableHeader, Column, Row, TableBody, Cell} from 'vanilla-starter/Table';

<Table/* PROPS */>
  <TableHeader>
    <Column id="name" isRowHeader>Name</Column>
    <Column id="type">Type</Column>
    <Column id="date">Date Modified</Column>
  </TableHeader>
  <TableBody>
    <Row id="games">
      <Cell>Games</Cell>
      <Cell>Folder</Cell>
      <Cell>6/7/2023</Cell>
      <Row id="mario">
        <Cell>Mario Kart</Cell>
        <Cell>Game</Cell>
        <Cell>8/27/1992</Cell>
      </Row>
      <Row id="tetris">
        <Cell>Tetris</Cell>
        <Cell>Game</Cell>
        <Cell>1/27/1988</Cell>
      </Row>
      <Row id="pacman">
        <Cell>Pac-Man</Cell>
        <Cell>Game</Cell>
        <Cell>5/22/1980</Cell>
      </Row>
    </Row>
    <Row id="apps">
      <Cell>Applications</Cell>
      <Cell>Folder</Cell>
      <Cell>4/7/2025</Cell>
      <Row id="ps">
        <Cell>Photoshop</Cell>
        <Cell>Application</Cell>
        <Cell>2/19/1990</Cell>
      </Row>
      <Row id="premiere">
        <Cell>Premiere</Cell>
        <Cell>Application</Cell>
        <Cell>9/24/2003</Cell>
      </Row>
      <Row id="lightroom">
        <Cell>Lightroom</Cell>
        <Cell>Application</Cell>
        <Cell>10/18/2017</Cell>
      </Row>
    </Row>
    <Row id="report">
      <Cell>2024 Financial Report</Cell>
      <Cell>PDF Document</Cell>
      <Cell>12/30/2024</Cell>
    </Row>
    <Row id="job">
      <Cell>Job Posting</Cell>
      <Cell>Text Document</Cell>
      <Cell>1/18/2025</Cell>
    </Row>
  </TableBody>
</Table>
```

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

### Run Development Server

Source: https://github.com/adobe/react-spectrum/blob/main/examples/next-app/README.md

Use one of these commands to start the Next.js development server. Open http://localhost:3000 to view the site.

```bash
npm run dev
```

```bash
yarn dev
```

```bash
pnpm dev
```

```bash
bun dev
```

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

### Start Verdaccio Private Registry

Source: https://github.com/adobe/react-spectrum/blob/main/CONTRIBUTING.md

Initiate a Verdaccio private registry for testing packages in example applications. Ensure your git status is clean before running.

```bash
./scripts/verdaccio.sh
```

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

### Start Documentation Server

Source: https://github.com/adobe/react-spectrum/blob/main/CONTRIBUTING.md

Command to run the documentation server locally. Access the documentation at http://localhost:1234/.

```bash
yarn start:s2-docs
```

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

### Tailwind CSS Configuration for Command Palette

Source: https://github.com/adobe/react-spectrum/blob/main/packages/react-aria-components/docs/examples/command-palette.mdx

Configure Tailwind CSS to include the react-aria-components plugin and animation plugins. This example shows setup for both Tailwind v4 and v3.

```css
@import "tailwindcss";
@plugin "tailwindcss-react-aria-components";
@import "tw-animate-css";
```

```javascript
module.exports = {
  // ...
  plugins: [
    require('tailwindcss-react-aria-components'),
    require('tailwindcss-animate')
  ]
};
```

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

### Get Weeks in Month

Source: https://github.com/adobe/react-spectrum/blob/main/packages/@internationalized/date/docs/CalendarDateTime.mdx

Calculates the number of weeks in a given month, considering the month's length, start day, and locale. The first day of the week can be optionally specified.

```typescript
import {getWeeksInMonth} from '@internationalized/date';

let date = new CalendarDateTime(2021, 1, 1, 8, 30);

getWeeksInMonth(date, 'en-US'); // 6
getWeeksInMonth(date, 'fr-FR'); // 5
```

```typescript
getWeeksInMonth(date, 'en-US', 'mon'); // 5
```

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

### Popover Placement Examples

Source: https://github.com/adobe/react-spectrum/blob/main/packages/react-aria/docs/overlays/usePopover.mdx

Demonstrates how to control the popover's placement relative to its anchor element using the 'placement' prop. Available placements include 'start', 'top', 'bottom', and 'end'.

```tsx
<div style={{ display: 'flex', gap: 8 }}>
  <PopoverTrigger placement="start" label="⬅️">
    <Dialog>In left-to-right, this is on the left. In right-to-left, this is on the right.</Dialog>
  </PopoverTrigger>
  <PopoverTrigger placement="top" label="⬆️">
    <Dialog>This popover is above the button.</Dialog>
  </PopoverTrigger>
  <PopoverTrigger placement="bottom" label="⬇️">
    <Dialog>This popover is below the button.</Dialog>
  </PopoverTrigger>
  <PopoverTrigger placement="end" label="➡️">
    <Dialog>In left-to-right, this is on the right. In right-to-left, this is on the left.</Dialog>
  </PopoverTrigger>
</div>
```

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

### Basic ListBox with Static Options (Vanilla Starter)

Source: https://github.com/adobe/react-spectrum/blob/main/packages/dev/s2-docs/pages/react-aria/ListBox.mdx

Demonstrates a basic ListBox with static ListBoxItems. Ensure you have 'vanilla-starter/ListBox' installed.

```tsx
"use client";
import {ListBox, ListBoxItem} from 'vanilla-starter/ListBox';

<ListBox aria-label="Favorite animal"/* PROPS */>
  <ListBoxItem>Aardvark</ListBoxItem>
  <ListBoxItem>Cat</ListBoxItem>
  <ListBoxItem>Dog</ListBoxItem>
  <ListBoxItem>Kangaroo</ListBoxItem>
  <ListBoxItem>Panda</ListBoxItem>
  <ListBoxItem>Snake</ListBoxItem>
</ListBox>
```

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

### Implement GridLayout with Virtualizer

Source: https://github.com/adobe/react-spectrum/blob/main/packages/react-aria-components/docs/Virtualizer.mdx

This example demonstrates how to use `GridLayout` with a `Virtualizer` and `ListBox` to create a responsive grid. Ensure `layout="grid"` is set on the `ListBox` for correct keyboard navigation.

```tsx
import {GridLayout, Size, Text} from 'react-aria-components';

function Example() {
  return (
    <div className="resizable">
      <Virtualizer
        /*- begin highlight -*/
        layout={GridLayout}
        layoutOptions={{
          minItemSize: new Size(100, 140),
          minSpace: new Size(8, 8)
        }}
        /*- end highlight -*/
      >
        <ListBox
          /*- begin highlight -*/
          layout="grid"
          /*- end highlight -*/
          aria-label="Virtualized grid layout"
          selectionMode="multiple"
          items={albums}>
          {item => (
            <ListBoxItem textValue={item.title}>
              <img src={item.image} alt="" />
              <Text slot="label">{item.title}</Text>
              <Text slot="description">{item.artist}</Text>
            </ListBoxItem>
          )}
        </ListBox>
      </Virtualizer>
    </div>
  );
}
```

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

### Basic Virtualizer Setup

Source: https://github.com/adobe/react-spectrum/blob/main/packages/react-aria-components/docs/Virtualizer.mdx

Wrap a collection component with Virtualizer and provide a ListLayout. Ensure the virtualized component has a defined size (explicit CSS or implicit bounded size) to benefit from performance optimizations.

```tsx
import {Virtualizer, ListLayout} from 'react-aria-components';

<Virtualizer layout={ListLayout}>
  <ListBox>
    {/* ... */}
  </ListBox>
</Virtualizer>
```

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

### Dialog Interaction Testing Example

Source: https://github.com/adobe/react-spectrum/blob/main/packages/dev/s2-docs/pages/s2/Dialog/testing.mdx

Demonstrates how to initialize the User object and create a Dialog tester to simulate opening and closing a dialog. Ensure you are using React 18+ and have the necessary testing libraries installed.

```typescript
// Dialog.test.ts
import {render} from '@testing-library/react';
import {User} from '@react-spectrum/test-utils';

let testUtilUser = new User({
  interactionType: 'mouse',
  advanceTimer: jest.advanceTimersByTime
});
// ...

it('Dialog can be opened and closed', async function () {
  // Render your test component/app and initialize the dialog tester
  let {getByTestId, getByRole} = render(
    <DialogTrigger>
      <ActionButton>Trigger</ActionButton>
      <Dialog>
        ...
      </Dialog>
    </DialogTrigger>
  );
  let button = getByRole('button');
  let dialogTester = testUtilUser.createTester('Dialog', {root: button, overlayType: 'modal'});
  await dialogTester.open();
  let dialog = dialogTester.getDialog();
  expect(dialog).toBeVisible();
  await dialogTester.close();
  expect(dialog).not.toBeInTheDocument();
});
```

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

### DateRangePicker with Default Value

Source: https://github.com/adobe/react-spectrum/blob/main/packages/dev/s2-docs/pages/react-aria/DateRangePicker.mdx

Set a default date range using parsed zoned date time values. This example demonstrates setting both start and end dates with a specific time and time zone.

```tsx
"use client";
import {parseZonedDateTime} from '@internationalized/date';
import {DateRangePicker} from 'vanilla-starter/DateRangePicker';

<DateRangePicker
  /* PROPS */
  defaultValue={{
    start: parseZonedDateTime('2025-02-03T08:45:00[America/Los_Angeles]'),
    end: parseZonedDateTime('2025-02-14T08:45:00[America/Los_Angeles]')
  }} />
```

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

### Example App Integration

Source: https://github.com/adobe/react-spectrum/blob/main/packages/dev/s2-docs/pages/react-aria/examples/photos.mdx

Integrates the ExampleApp component, specifying the directory and default file for the photo library example.

```jsx
<ExampleApp dir="packages/dev/s2-docs/pages/react-aria/examples/photos" defaultSelected="App.tsx" />
```

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

### Menu Interaction Testing with @react-aria/test-utils

Source: https://github.com/adobe/react-spectrum/blob/main/packages/react-aria-components/docs/Menu.mdx

Example of using the MenuTester utility from @react-aria/test-utils to test menu interactions, specifically opening a submenu via keyboard. This requires setup with testing libraries like @testing-library/react.

```ts
// Menu.test.ts
import {render} from '@testing-library/react';
import {User} from '@react-aria/test-utils';

let testUtilUser = new User({interactionType: 'mouse'});
// ...

it('Menu can open its submenu via keyboard', async function () {
  // Render your test component/app and initialize the menu tester
  let {getByTestId} = render(
    <MenuTrigger>
      <Button data-testid="test-menutrigger">Menu trigger</Button>
      ...
    </MenuTrigger>
  );
  let menuTester = testUtilUser.createTester('Menu', {root: getByTestId('test-menutrigger'), interactionType: 'keyboard'});

  await menuTester.open();
  expect(menuTester.getMenu()).toBeInTheDocument();
  let submenuTriggers = menuTester.getSubmenuTriggers();
  expect(submenuTriggers).toHaveLength(1);

  let submenuTester = await menuTester.openSubmenu({submenuTrigger: 'Share…'});
  expect(submenuTester.getMenu()).toBeInTheDocument();

  await submenuTester.toggleOptionSelection({option: submenuTester.getOptions()[0]});
  expect(submenuTester.getMenu()).not.toBeInTheDocument();
  expect(menuTester.getMenu()).not.toBeInTheDocument();
});
```

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

### Basic GridList with Images (Vanilla Starter)

Source: https://github.com/adobe/react-spectrum/blob/main/packages/dev/s2-docs/pages/react-aria/GridList.mdx

Demonstrates a GridList with image items using the vanilla starter. Ensure you have the necessary imports from 'vanilla-starter/GridList'.

```tsx
"use client";
import {GridList, GridListItem, Text} from 'vanilla-starter/GridList';

<GridList/* PROPS */>
  <GridListItem textValue="Desert Sunset">
    <img src="https://images.unsplash.com/photo-1705034598432-1694e203cdf3?q=80&w=600&auto=format&fit=crop&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D" width={600} height={400} alt="" />
    <Text>Desert Sunset</Text>
    <Text slot="description">PNG • 2/3/2024</Text>
  </GridListItem>
  <GridListItem textValue="Hiking Trail">
    <img src="https://images.unsplash.com/photo-1722233987129-61dc344db8b6?q=80&w=600&auto=format&fit=crop&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D" width={600} height={900} alt="" />
    <Text>Hiking Trail</Text>
    <Text slot="description">JPEG • 1/10/2022</Text>
  </GridListItem>
  <GridListItem textValue="Lion">
    <img src="https://images.unsplash.com/photo-1629812456605-4a044aa38fbc?q=80&w=600&auto=format&fit=crop&ixlib=rb-4.1.0&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D" width={600} height={899} alt="" />
    <Text>Lion</Text>
    <Text slot="description">JPEG • 8/28/2021</Text>
  </GridListItem>
  <GridListItem textValue="Mountain Sunrise">
    <img src="https://images.unsplash.com/photo-1722172118908-1a97c312ce8c?q=80&w=600&auto=format&fit=crop&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D" width={600} height={900} alt="" />
    <Text>Mountain Sunrise</Text>
    <Text slot="description">PNG • 3/15/2015</Text>
  </GridListItem>
  <GridListItem textValue="Giraffe tongue">
    <img src="https://images.unsplash.com/photo-1574870111867-089730e5a72b?q=80&w=600&auto=format&fit=crop&ixlib=rb-4.1.0&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D" width={600} height={900} alt="" />
    <Text>Giraffe tongue</Text>
    <Text slot="description">PNG • 11/27/2019</Text>
  </GridListItem>
  <GridListItem textValue="Golden Hour">
    <img src="https://images.unsplash.com/photo-1718378037953-ab21bf2cf771?q=80&w=600&auto=format&fit=crop&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D" width={600} height={402} alt="" />
    <Text>Golden Hour</Text>
    <Text slot="description">WEBP • 7/24/2024</Text>
  </GridListItem>
  <GridListItem textValue="Architecture">
    <img src="https://images.unsplash.com/photo-1721661657253-6621d52db753?w=600&auto=format&fit=crop&q=60&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHx0b3BpYy1mZWVkfDYxfE04alZiTGJUUndzfHxlbnwwfHx8fHw%3D" width={600} height={900} alt="" />
    <Text>Architecture</Text>
    <Text slot="description">PNG • 12/24/2016</Text>
  </GridListItem>
  <GridListItem textValue="Peeking leopard">
    <img src="https://images.unsplash.com/photo-1456926631375-92c8ce872def?q=80&w=600&auto=format&fit=crop&ixlib=rb-4.1.0&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D" width={600} height={400} alt="" />
    <Text>Peeking leopard</Text>
    <Text slot="description">JPEG • 3/2/2016</Text>
  </GridListItem>
  <GridListItem textValue="Roofs">
    <img src="https://images.unsplash.com/photo-1721598359121-363311b3b263?w=600&auto=format&fit=crop&q=60&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHx0b3BpYy1mZWVkfDc0fE04alZiTGJUUndzfHxlbnwwfHx8fHw%3D" width={600} height={900} alt="" />
    <Text>Roofs</Text>
    <Text slot="description">JPEG • 4/24/2025</Text>
  </GridListItem>
  <GridListItem textValue="Half Dome Deer">
    <img src="https://images.unsplash.com/photo-1472396961693-142e6e269027?q=80&w=600&auto=format&fit=crop&ixlib=rb-4.1.0&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D" width={600} height={990} alt="" />
    <Text>Half Dome Deer</Text>
    <Text slot="description">DNG • 8/28/2018</Text>
  </GridListItem>
</GridList>
```

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

### Vanilla Command Palette Example

Source: https://github.com/adobe/react-spectrum/blob/main/packages/dev/s2-docs/pages/react-aria/Autocomplete.mdx

Demonstrates the usage of the CommandPalette component with vanilla starter components. It includes a button to open the palette and a list of menu items.

```tsx
"use client";
import {CommandPalette} from 'vanilla-starter/CommandPalette';
import {MenuItem, Text} from 'vanilla-starter/Menu';
import {Button} from 'vanilla-starter/Button';
import {FilePlus2, FolderPlus, User, UserPen, CircleDotDashed, ChartPie, Tag} from 'lucide-react';
import {DialogTrigger} from 'react-aria-components/Dialog';
import {useState} from 'react';

function Example(props) {
  let [isOpen, setOpen] = useState(false);
  return (
    <DialogTrigger isOpen={isOpen} onOpenChange={setOpen}>
      <Button>Open Command Palette <kbd>⌘ J</kbd></Button>
      {/*- begin focus -*/}
      <CommandPalette
        {...props}
        /* PROPS */
        isOpen={isOpen}
        onOpenChange={setOpen}>
        <MenuItem textValue="Create new file...">
          <FilePlus2 />
          <Text>Create new file...</Text>
        </MenuItem>
        <MenuItem textValue="Create new folder...">
          <FolderPlus />
          <Text>Create new folder...</Text>
        </MenuItem>
        <MenuItem textValue="Assign to...">
          <UserPen />
          <Text>Assign to...</Text>
        </MenuItem>
        <MenuItem textValue="Assign to me">
          <User />
          <Text>Assign to me</Text>
        </MenuItem>
        <MenuItem textValue="Change status...">
          <CircleDotDashed />
          <Text>Change status...</Text>
        </MenuItem>
        <MenuItem textValue="Change priority...">
          <ChartPie />
          <Text>Change priority...</Text>
        </MenuItem>
        <MenuItem textValue="Add label...">
          <Tag />
          <Text>Add label...</Text>
        </MenuItem>
        <MenuItem textValue="Remove label...">
          <Tag />
          <Text>Remove label...</Text>
        </MenuItem>
      </CommandPalette>
      {/*- end focus -*/}
    </DialogTrigger>
  );
}

```

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

### Picker Keyboard Selection Test Utility

Source: https://github.com/adobe/react-spectrum/blob/main/packages/@adobe/react-spectrum/docs/picker/Picker.mdx

An example of using `@react-spectrum/test-utils` to test Picker interactions, specifically selecting an option via keyboard. Ensure necessary mocks and setup are in place for testing overlays and virtualization.

```ts
// Picker.test.ts
import {render} from '@testing-library/react';
import {theme} from '@react-spectrum/theme-default';
import {User} from '@react-spectrum/test-utils';

let testUtilUser = new User({interactionType: 'mouse'});
// Other setup, be sure to check out the suggested mocks mentioned above in https://react-spectrum.adobe.com/react-spectrum/Picker.html#testing

it('Picker can select an option via keyboard', async function () {
  // Render your test component/app and initialize the select tester
  let {getByTestId} = render(
    <Provider theme={defaultTheme}>
      <Picker data-testid="test-select">
      ...
      </Picker>
    </Provider>
  );
  let selectTester = testUtilUser.createTester('Select', {root: getByTestId('test-select'), interactionType: 'keyboard'});
  let trigger = selectTester.getTrigger();
  expect(trigger).toHaveTextContent('Select…');

  await selectTester.toggleOptionSelection({option: 'Cat'});
  expect(trigger).toHaveTextContent('Cat');
});
```

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

### Get Day of Week with Locale

Source: https://github.com/adobe/react-spectrum/blob/main/packages/@internationalized/date/docs/CalendarDate.mdx

The `getDayOfWeek` function returns the day of the week for a given date and locale, numbered from zero (the locale's first day) to six. For example, in 'en-US', Sunday is 0; in 'fr-FR', Monday is 0.

```tsx
import {getDayOfWeek} from '@internationalized/date';

let date = new CalendarDate(2022, 2, 6); // a Sunday

getDayOfWeek(date, 'en-US'); // 0
getDayOfWeek(date, 'fr-FR'); // 6
```

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

### Basic Menu Example

Source: https://github.com/adobe/react-spectrum/blob/main/packages/@adobe/react-spectrum/docs/menu/Menu.mdx

Demonstrates a basic Menu with static items. Use this when the list of items is known beforehand. The `onAction` prop handles item clicks.

```jsx
<MenuTrigger>
  <ActionButton>
    Edit
  </ActionButton>
  <Menu onAction={(key) => alert(key)}>
    <Item key="cut">Cut</Item>
    <Item key="copy">Copy</Item>
    <Item key="paste">Paste</Item>
    <Item key="replace">Replace</Item>
  </Menu>
</MenuTrigger>
```

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

### Implement Hover Interactions with useHover

Source: https://github.com/adobe/react-spectrum/blob/main/packages/dev/s2-docs/pages/react-aria/useHover.mdx

This example demonstrates how to use the useHover hook to track hover start and end events, including the pointer type. It visually changes the background color based on the hover state and logs events to a list.

```tsx
"use client";
import React from 'react';
import {useHover} from 'react-aria/useHover';

function Example() {
  let [events, setEvents] = React.useState<string[]>([]);
  let {hoverProps, isHovered} = useHover({
    onHoverStart: e => setEvents(
      events => [...events, `hover start with ${e.pointerType}`]
    ),
    onHoverEnd: e => setEvents(
      events => [...events, `hover end with ${e.pointerType}`]
    )
  });

  return (
    <>
      <div
        {...hoverProps}
        style={{
          background: isHovered ? 'darkgreen' : 'green',
          color: 'white',
          display: 'inline-block',
          padding: '8px 12px',
          borderRadius: 8,
          cursor: 'pointer'
        }}
        role="button"
        tabIndex={0}>
        Hover me!
      </div>
      <ul
        style={{
          maxHeight: '200px',
          overflow: 'auto'
        }}>
        {events.map((e, i) => <li key={i}>{e}</li>)}
      </ul>
    </>
  );
}

```

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

### React Spectrum ExampleApp Usage

Source: https://github.com/adobe/react-spectrum/blob/main/packages/dev/s2-docs/pages/react-aria/examples/crud.mdx

Renders an example application with specified directory, default selected file, and type.

```javascript
<ExampleApp dir="packages/dev/s2-docs/pages/react-aria/examples/plants" defaultSelected="App.tsx" type="tailwind" />
```

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

### Local Fallback Setup Script

Source: https://github.com/adobe/react-spectrum/blob/main/scripts/weekly-api-diff/README.md

This script sets up the local fallback for the weekly API diff automation. It copies the prompt, installs the launchd plist, adds the Slack bot token, clones the snapshots repository, and builds the release baseline.

```bash
# 1. Copy prompt to home dir
cp scripts/weekly-api-diff/prompt.md ~/weekly-tsdiffer.md

# 2. Install launchd plist (substitutes your macOS username into the Label)
sed "s/<username>/$USER/g" scripts/weekly-api-diff/launchd.plist > ~/Library/LaunchAgents/com.$USER.weekly-tsdiffer.plist
launchctl bootout gui/$(id -u)/com.$USER.weekly-tsdiffer 2>/dev/null || true
launchctl bootstrap gui/$(id -u) ~/Library/LaunchAgents/com.$USER.weekly-tsdiffer.plist

# 3. Add Slack bot token to ~/.secrets (chmod 600)
echo 'export SLACK_TSDIFF_CHROMATIC_BOT_TOKEN=xoxb-...' >> ~/.secrets
chmod 600 ~/.secrets

# 4. Clone snapshots repo
git clone https://github.com/LFDanLu/react-spectrum-api-snapshots ~/dev/react-spectrum-api-snapshots

# 5. Build the release baseline (one-time, ~20 min)
cd ~/dev/react-spectrum
yarn build:api-published
```

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

### UXP Button Implementation Example

Source: https://github.com/adobe/react-spectrum/blob/main/rfcs/2021-v3-uxp-integration.md

This example demonstrates a potential implementation of a UXP-compatible Button component, showing how to conditionally export UXP-specific or base implementations based on the environment. It assumes the existence of UXP-specific styles and logic.

```javascript
import {useButton} from '@react-aria/button';
import {cloneElement, forwardRef} from 'react';
import {useProvider} from '@react-spectrum/provider';
import {useObjectRef} from '@react-aria/utils';

// UXP specific implementation
import {Button as UXPButton} from '@react-spectrum-uxp/button';

export function Button(props, ref) {
  let {
    variant = 'primary',
    isDisabled,
    elementType = 'button',
    children,
    ...otherProps
  } = props;

  let provider = useProvider();
  let isUXP = provider.isUXP;

  // If running on UXP, use the UXP specific button
  if (isUXP) {
    return (
      <UXPButton
        {...props}
        ref={ref}
        elementType={elementType}
        variant={variant}
        isDisabled={isDisabled} />
    );
  }

  // Otherwise, use the base implementation
  let domRef = useObjectRef(ref);
  let {
    buttonProps,
    isPressed
  } = useButton({
    ...props,
    elementType
  }, domRef);

  return (
    cloneElement(children, {
      ...buttonProps,
      ...otherProps,
      ref: domRef,
      className: `${children.props.className || ''} ${provider.theme.getStyle(
        'button',
        {
          variant,
          isPressed,
          isDisabled
        }
      )}`
    })
  );
}
```

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

### Get Start and End Dates of Time Units

Source: https://github.com/adobe/react-spectrum/blob/main/packages/@internationalized/date/docs/CalendarDate.mdx

Use functions like `startOfYear`, `endOfMonth`, and `startOfWeek` to calculate the beginning or end of specific time periods. `startOfWeek` and `endOfWeek` require a locale string to determine the first day of the week.

```tsx
import {startOfYear, startOfMonth, startOfWeek} from '@internationalized/date';

let date = new CalendarDate(2022, 2, 3);

startOfYear(date); // 2022-01-01
startOfMonth(date); // 2022-02-01
startOfWeek(date, 'en-US'); // 2022-01-30
startOfWeek(date, 'fr-FR'); // 2022-01-31
```

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

### React Spectrum ExampleApp Import

Source: https://github.com/adobe/react-spectrum/blob/main/packages/dev/s2-docs/pages/react-aria/examples/crud.mdx

Imports the ExampleApp component for showcasing examples.

```javascript
import {ExampleApp} from '../../../src/ExampleApp';
```

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

### Tree Item Selection Test with Keyboard

Source: https://github.com/adobe/react-spectrum/blob/main/packages/react-aria-components/docs/Tree.mdx

This example demonstrates how to test Tree item selection using keyboard interactions with `@react-aria/test-utils`. It shows how to initialize the `TreeTester`, toggle row selection, and assert the selection state. Ensure `@testing-library/react` and `@react-aria/test-utils` are installed and imported.

```ts
// Tree.test.ts
import {render, within} from '@testing-library/react';
import {User} from '@react-aria/test-utils';

let testUtilUser = new User({interactionType: 'mouse'});
// ...

it('Tree can select a item via keyboard', async function () {
  // Render your test component/app and initialize the Tree tester
  let {getByTestId} = render(
     <Tree data-testid="test-tree" selectionMode="multiple">
      ...
    </Tree>
  );
  let treeTester = testUtilUser.createTester('Tree', {root: getByTestId('test-tree'), interactionType: 'keyboard'});

  await treeTester.toggleRowSelection({row: 0});
  expect(treeTester.getSelectedRows()).toHaveLength(1);
  expect(within(treeTester.getRows()[0]).getByRole('checkbox')).toBeChecked();

  await treeTester.toggleRowSelection({row: 1});
  expect(treeTester.getSelectedRows()).toHaveLength(2);
  expect(within(treeTester.getRows()[1]).getByRole('checkbox')).toBeChecked();

  await treeTester.toggleRowSelection({row: 0});
  expect(treeTester.getSelectedRows()).toHaveLength(1);
  expect(within(treeTester.getRows()[0]).getByRole('checkbox')).not.toBeChecked();
});
```

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

### Run Development Server

Source: https://github.com/adobe/react-spectrum/blob/main/examples/rsp-next-ts/README.md

Use npm or yarn to start the Next.js development server. Open http://localhost:3000 in your browser to view the application. Edits to pages/index.tsx will auto-update.

```bash
npm run dev
# or
yarn dev
```