React Spectrum

https://react-spectrum.adobe.com/
Admin
React Spectrum is a comprehensive component library that empowers developers to build high-quality,...
Tokens:262,876
Snippets:1,421
Trust Score:10
Update:5 months ago
Show doc for...
Tokens:
Raw
### Install React Spectrum Agent Skill

Source: https://react-spectrum.adobe.com/ai

Run this command to install the React Spectrum Agent Skill. Node.js must be installed.

```bash
npx skills add https://react-spectrum.adobe.com
```

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

### Install React Spectrum with npm

Source: https://react-spectrum.adobe.com/getting-started

Use this command to install the React Spectrum library. Ensure you have Node.js and npm installed.

```bash
npm install @react-spectrum/s2
```

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

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

Source: https://react-spectrum.adobe.com/CheckboxGroup/testing

Install the test utilities package as a development dependency.

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

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

### Install Command-Line Upgrade Assistant

Source: https://react-spectrum.adobe.com/migrating

Install the automated upgrade assistant using npm. This tool helps in migrating your project to Spectrum 2.

```bash
npm install @react-spectrum/codemods s1-to-s2
```

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

### Install Command-Line Upgrade Assistant for Specific Components

Source: https://react-spectrum.adobe.com/migrating

Install the automated upgrade assistant and specify components to upgrade using the --components argument. This allows for targeted migration.

```bash
npm install @react-spectrum/codemods s1-to-s2 --components=Button,TextField
```

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

### Basic Menu Trigger Example

Source: https://react-spectrum.adobe.com/Menu

A simple example of a MenuTrigger with an ActionButton that opens a menu with several MenuItem options.

```tsx
import {MenuTrigger, Menu, MenuItem} from '@react-spectrum/s2/Menu';
import {ActionButton} from '@react-spectrum/s2/ActionButton';

<MenuTrigger>
  <ActionButton>Copy</ActionButton>
  <Menu>
    <MenuItem>Copy as plain text</MenuItem>
    <MenuItem>Copy as rich text</MenuItem>
    <MenuItem>Copy URL</MenuItem>
  </Menu>
</MenuTrigger>
```

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

### ColorWheel Basic Usage

Source: https://react-spectrum.adobe.com/ColorWheel

A basic example of how to import and use the ColorWheel component.

```APIDOC
## ColorWheel Basic Usage

### Description
This snippet shows the basic import and usage of the ColorWheel component.

### Code
```tsx
import {ColorWheel} from '@react-spectrum/s2/ColorWheel';

<ColorWheel />
```
```

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

### ActionButtonGroup API Example

Source: https://react-spectrum.adobe.com/ActionButtonGroup

A minimal example demonstrating the structure of an ActionButtonGroup with a single ActionButton, as shown in the API section.

```tsx
<ActionButtonGroup>
  <ActionButton />
</ActionButtonGroup>
```

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

### Install Webpack Plugins for Style Macros

Source: https://react-spectrum.adobe.com/getting-started

Install the necessary plugins for Webpack to support style macros and CSS extraction/minimization. These include `unplugin-parcel-macros`, `mini-css-extract-plugin`, and `css-minimizer-webpack-plugin`.

```bash
npm install unplugin-parcel-macros mini-css-extract-plugin css-minimizer-webpack-plugin swc-minify-webpack-plugin lightningcss browserslist --dev
```

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

### Basic Picker Example

Source: https://react-spectrum.adobe.com/Picker

A basic Picker component with static options. Ensure to import Picker and PickerItem.

```tsx
import {Picker, PickerItem} from '@react-spectrum/s2/Picker';

<Picker>
  <PickerItem>Chocolate</PickerItem>
  <PickerItem>Mint</PickerItem>
  <PickerItem>Strawberry</PickerItem>
  <PickerItem>Vanilla</PickerItem>
  <PickerItem>Chocolate Chip Cookie Dough</PickerItem>
</Picker>
```

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

### ColorSwatchPicker API Example

Source: https://react-spectrum.adobe.com/ColorSwatchPicker

Illustrates the basic structure for using ColorSwatchPicker and ColorSwatch components.

```tsx
<ColorSwatchPicker>
  <ColorSwatch />
</ColorSwatchPicker>
```

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

### CustomDialog Example

Source: https://react-spectrum.adobe.com/Dialog

Utilize CustomDialog for complete layout control. This example demonstrates a thank you message with a checkmark icon and custom styling. Imports for specific components and styling macros are required.

```tsx
import {CustomDialog, DialogTrigger, Heading, CloseButton} from '@react-spectrum/s2/CustomDialog';
import {Button} from '@react-spectrum/s2/Button';
import Checkmark from '@react-spectrum/s2/illustrations/gradient/generic1/Checkmark';
import {style} from '@react-spectrum/s2/style' with {type: 'macro'};

function Example(props) {
  return (
    <DialogTrigger>
      <Button>Open dialog</Button>
      {/*- begin focus -*/}
      <CustomDialog {...props}>
        <div className={style({display: 'flex', flexDirection: 'column', rowGap: 8, alignItems: 'center'})}>
          <Checkmark />
          <Heading slot="title" styles={style({font: 'heading-lg', textAlign: 'center', marginY: 0})}>Thank you!</Heading>
          <p className={style({font: 'body', textAlign: 'center', marginY: 0})}>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
          <CloseButton styles={style({position: 'absolute', top: 12, insetEnd: 12})} />
        </div>
      </CustomDialog>
      {/*- end focus -*/}
    </DialogTrigger>
  );
}
```

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

### Provider with Locale Configuration

Source: https://react-spectrum.adobe.com/Provider

Example of how to set a specific locale for the application using the `locale` prop.

```APIDOC
## Provider with Locale Configuration

### Description
This example shows how to explicitly set the application's locale using the `locale` prop on the `Provider` component. This is useful for overriding the default browser/OS language settings.

### Method
N/A (Component Usage)

### Endpoint
N/A (Component Usage)

### Parameters
#### Path Parameters
N/A

#### Query Parameters
N/A

#### Request Body
N/A

### Request Example
```tsx
<Provider locale="en-US">
  <YourApp />
</Provider>
```

### Response
N/A (Component Usage)

#### Success Response (200)
N/A

#### Response Example
N/A
```

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

### Basic CheckboxGroup Example

Source: https://react-spectrum.adobe.com/CheckboxGroup

A simple CheckboxGroup with multiple Checkbox options. No specific setup or imports are required beyond the component itself.

```tsx
import {CheckboxGroup, Checkbox} from '@react-spectrum/s2/CheckboxGroup';

<CheckboxGroup>
  <Checkbox value="soccer">Soccer</Checkbox>
  <Checkbox value="baseball">Baseball</Checkbox>
  <Checkbox value="synchronized swimming">Synchronized Swimming</Checkbox>
</CheckboxGroup>
```

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

### Tabs with Overflow Behavior

Source: https://react-spectrum.adobe.com/Tabs

Demonstrates how horizontal tabs automatically collapse into a Picker when space is limited. This example shows a basic setup with four tabs.

```tsx
import {Tabs, TabList, Tab, TabPanel} from '@react-spectrum/s2/Tabs';
import {style} from '@react-spectrum/s2/style' with {type: 'macro'};

<div
  className={style({
    width: 320,
    maxWidth: 'full',
    padding: 16,
    boxSizing: 'border-box',
    borderWidth: 1,
    borderStyle: 'solid',
    borderColor: 'gray-300',
    borderRadius: 'default',
    overflow: 'hidden',
    resize: 'horizontal'
  })}>
  {/*- begin focus -*/}
  <Tabs aria-label="Tabs">
    <TabList>
      <Tab id="home">Home</Tab>
      <Tab id="profile">Profile</Tab>
      <Tab id="contact">Contact</Tab>
      <Tab id="about">About</Tab>
    </TabList>
    <TabPanel id="home">
      Welcome home
    </TabPanel>
    <TabPanel id="profile">
      View your profile
    </TabPanel>
    <TabPanel id="contact">
      Find your contacts
      </TabPanel>
    <TabPanel id="about">
      Learn more
    </TabPanel>
  </Tabs>
  {/*- end focus -*/}
</div>
```

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

### CustomDialog with Title and Close Button

Source: https://react-spectrum.adobe.com/Dialog

Customize a FullscreenDialog by providing a title and a close button. This example shows a minimal setup for a custom dialog experience.

```tsx
<FullscreenDialog>
  <Heading slot="title" />
  <CloseButton />
</FullscreenDialog>
```

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

### Using iconStyle Macro

Source: https://react-spectrum.adobe.com/icons

Demonstrates how to use the `iconStyle` macro to apply predefined styles (size and color) to icons.

```APIDOC
## POST /api/users

### Description
This endpoint allows for the creation of new user resources.

### Method
POST

### Endpoint
/api/users

### Parameters
#### Query Parameters
- **limit** (integer) - Optional - The maximum number of users to return.

#### Request Body
- **name** (string) - Required - The name of the user.
- **email** (string) - Required - The email address of the user.

### Request Example
```json
{
  "name": "John Doe",
  "email": "john.doe@example.com"
}
```

### Response
#### Success Response (200)
- **id** (integer) - The unique identifier for the newly created user.
- **name** (string) - The name of the user.
- **email** (string) - The email address of the user.

#### Response Example
```json
{
  "id": 123,
  "name": "John Doe",
  "email": "john.doe@example.com"
}
```
```

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

### Runtime Styles with Boolean Conditions

Source: https://react-spectrum.adobe.com/styling

Boolean conditions starting with `is` or `allows` can be used directly for runtime style resolution. This example applies background color based on `isSelected` and `allowsRemoving` states.

```tsx
const styles = style({
  backgroundColor: {
    default: 'gray-100',
    isSelected: 'gray-900',
    allowsRemoving: 'gray-400'
  }
});

<div className={styles({isSelected: true})} />
```

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

### Implement Drag and Drop in React Spectrum Tree

Source: https://react-spectrum.adobe.com/react-aria/Tree.html

This example demonstrates how to integrate drag and drop functionality into a React Spectrum Tree. It uses the `useDragAndDrop` hook to handle item movement and reordering within the tree structure. Ensure `react-aria-components` is installed.

```jsx
import {Tree, TreeItem} from './Tree';
import {useDragAndDrop} from 'react-aria-components/useDragAndDrop';
import {Collection} from 'react-aria-components/Collection';
import {useTreeData} from 'react-aria-components/useTreeData';

function Example() {

let tree = useTreeData({});
    initialItems: [
      {id: '1', title: 'Documents', type: 'directory', children: [
        {id: '2', title: 'Project', type: 'directory', children: [
          {id: '3', title: 'Weekly Report', type: 'file', children: []},
          {id: '4', title: 'Budget', type: 'file', children: []}
        ]}
      ]},
      {id: '5', title: 'Photos', type: 'directory', children: [
        {id: '6', title: 'Image 1', type: 'file', children: []},
        {id: '7', title: 'Image 2', type: 'file', children: []}
      ]}
    ]
  });


  let {dragAndDropHooks} = useDragAndDrop({
    getItems: (keys, items: typeof tree.items) => items.map(item => ({'text/plain': item.value.title})),
    onMove(e) {
      if (e.target.dropPosition === 'before') {
        tree.moveBefore(e.target.key, e.keys);
      } else if (e.target.dropPosition === 'after') {
        tree.moveAfter(e.target.key, e.keys);
      } else if (e.target.dropPosition === 'on') {
        // Move items to become children of the target
        let targetNode = tree.getItem(e.target.key);
        if (targetNode) {
          let targetIndex = targetNode.children ? targetNode.children.length : 0;
          let keyArray = Array.from(e.keys);
          for (let i = 0; i < keyArray.length; i++) {
            tree.move(keyArray[i], e.target.key, targetIndex + i);
          }
        }
      }
    }
  });

  return (
    <Tree
      aria-label="Tree with hierarchical drag and drop"
      selectionMode="multiple"
      items={tree.items}
      dragAndDropHooks={dragAndDropHooks}
    >
      {function renderItem(item) {
        return (
          <TreeItem title={item.value.title}>
            {item.children && <Collection items={item.children}>
              {renderItem}
            </Collection>}
          </TreeItem>
        )
      }}
    </Tree>
  );
}

```

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

### Calendar with Custom 4-5-4 Fiscal Year Calendar

Source: https://react-spectrum.adobe.com/Calendar

Implements a custom calendar system, such as a 4-5-4 fiscal year format, by extending `GregorianCalendar` from `@internationalized/date`. This example demonstrates overriding `getDaysInMonth`, `fromJulianDay`, `toJulianDay`, and `getFormattableMonth` methods. Ensure the `@internationalized/date` library is installed.

```tsx
import type {AnyCalendarDate, Calendar as ICalendar} from '@internationalized/date';
import {CalendarDate, startOfWeek, GregorianCalendar} from '@internationalized/date';
import {Calendar} from '@react-spectrum/s2/Calendar';

export default function Example() {
  return (
    <Calendar
      firstDayOfWeek="sun"
      createCalendar={() => new Custom454()} />
  );
}

// See @internationalized/date docs linked above.
class Custom454 extends GregorianCalendar {
  // The anchor date, in Gregorian calendar.
  // The anchor date is a date that occurs in the first week of the first month of every fiscal year.
  anchorDate = new CalendarDate(2001, 2, 4);

  private getYear(year: number): [CalendarDate, number[]] {
    let anchor = this.anchorDate.set({year});
    let startOfYear = startOfWeek(anchor, 'en', 'sun');
    let isBigYear = !startOfYear.add({weeks: 53}).compare(anchor.add({years: 1}));
    let weekPattern = [4, 5, 4, 4, 5, 4, 4, 5, 4, 4, 5, isBigYear ? 5 : 4];
    return [startOfYear, weekPattern];
  }

  getDaysInMonth(date: AnyCalendarDate): number {
    let [, weekPattern] = this.getYear(date.year);
    return weekPattern[date.month - 1] * 7;
  }

  fromJulianDay(jd: number): CalendarDate {
    let gregorian = super.fromJulianDay(jd);
    let year = gregorian.year;

    let [monthStart, weekPattern] = this.getYear(year);
    if (gregorian.compare(monthStart) < 0) {
      year--;
      [monthStart, weekPattern] = this.getYear(year);
    }

    for (let month = 1; month <= 12; month++) {
      let weeks = weekPattern[month - 1];
      let nextMonth = monthStart.add({weeks});
      if (nextMonth.compare(gregorian) > 0) {
        let days = gregorian.compare(monthStart);
        return new CalendarDate(this, year, month, days + 1);
      }
      monthStart = nextMonth;
    }

    throw new Error('date not found');
  }

  toJulianDay(date: AnyCalendarDate): number {
    let [monthStart, weekPattern] = this.getYear(date.year);
    for (let month = 1; month < date.month; month++) {
      monthStart = monthStart.add({weeks: weekPattern[month - 1]});
    }

    let gregorian = monthStart.add({days: date.day - 1});
    return super.toJulianDay(gregorian);
  }

  getFormattableMonth(date: AnyCalendarDate): CalendarDate {
    let anchorMonth = this.anchorDate.month - 1;
    let dateMonth = date.month - 1;
    let month = ((anchorMonth + dateMonth) % 12) + 1;
    let year = anchorMonth + dateMonth >= 12 ? date.year + 1 : date.year;
    return new CalendarDate(year, month, 1);
  }

  isEqual(other: ICalendar): boolean {
    return other instanceof Custom454 && other.anchorDate.compare(this.anchorDate) === 0;
  }
}
```

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

### Add AI Migration Skills

Source: https://react-spectrum.adobe.com/migrating

Install the AI migration skill and the general S2 skill using npx. This is the recommended approach for automated migration.

```bash
npx skills add https://react-spectrum.adobe.com --skill migrate-react-spectrum-v3-to-s2 --skill react-spectrum-s2
```

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

### Add React Spectrum MCP Server using Gemini CLI

Source: https://react-spectrum.adobe.com/ai

Use the Gemini CLI to add the React Spectrum MCP server. Node.js must be installed.

```bash
gemini mcp add react-spectrum-s2 npx @react-spectrum/mcp@latest
```

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

### ComboBox Example with Selection

Source: https://react-spectrum.adobe.com/selection

Demonstrates a ComboBox component for selecting an item from a list. Includes state management for the selected key.

```tsx
import {ComboBox, ComboBoxItem, type Key} from '@react-spectrum/s2/ComboBox';
import {style} from '@react-spectrum/s2/style' with {type: 'macro'};
import {useState} from 'react';

function Example() {
  let [selectedKey, setSelectedKey] = useState<Key | null>('kangaroo');

  return (
    <>
      <ComboBox
        label="Favorite Animal"
        placeholder="Select an animal"
        selectedKey={selectedKey}
        onSelectionChange={setSelectedKey}
      >
        <ComboBoxItem id="koala">Koala</ComboBoxItem>
        <ComboBoxItem id="kangaroo">Kangaroo</ComboBoxItem>
        <ComboBoxItem id="platypus">Platypus</ComboBoxItem>
        <ComboBoxItem id="eagle">Bald Eagle</ComboBoxItem>
        <ComboBoxItem id="bison">Bison</ComboBoxItem>
        <ComboBoxItem id="skunk">Skunk</ComboBoxItem>
      </ComboBox>
      <p className={style({font: 'body'})}>selectedKey: {selectedKey}</p>
    </>
  );
}

```

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

### Breadcrumbs API Example

Source: https://react-spectrum.adobe.com/Breadcrumbs

A minimal example showing the basic structure for the Breadcrumbs and Breadcrumb API.

```tsx
<Breadcrumbs>
  <Breadcrumb />
</Breadcrumbs>
```

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

### Basic DropZone with File Handling

Source: https://react-spectrum.adobe.com/DropZone

Implement a DropZone that accepts specific file types or plain text. It displays the dropped content or a placeholder message with a browse button. Use `getDropOperation` to control accepted types and `onDrop` to handle the dropped items.

```tsx
import {DropZone, IllustratedMessage, Heading, Content} from '@react-spectrum/s2/DropZone';
import {ButtonGroup, Button} from '@react-spectrum/s2/ButtonGroup';
import {FileTrigger} from '@react-spectrum/s2/FileTrigger';
import React, {useState} from 'react';
import CloudUpload from '@react-spectrum/s2/illustrations/gradient/generic1/CloudUpload';
import {style} from '@react-spectrum/s2/style' with {type: 'macro'};

function Example(props) {
  let [content, setContent] = useState<React.ReactNode>(null);
  return (
    <DropZone
      {...props}
      styles={style({width: 320, maxWidth: '90%'})}
      
      isFilled={!!content}
      // Determine whether dragged content should be accepted.
      getDropOperation={types => (
        ['text/plain', 'image/jpeg', 'image/png', 'image/gif'].some(t => types.has(t))
          ? 'copy'
          : 'cancel'
      )}
      onDrop={async (event) => {
        // Find the first accepted item.
        let item = event.items.find(item => (
          (item.kind === 'text' && item.types.has('text/plain')) ||
          (item.kind === 'file' && item.type.startsWith('image/'))
        ));

        if (item?.kind === 'text') {
          let text = await item.getText('text/plain');
          setContent(text);
        } else if (item?.kind === 'file') {
          let file = await item.getFile();
          let url = URL.createObjectURL(file);
          setContent(<img src={url} alt={item.name} className={style({maxHeight: 'full', maxWidth: 'full'})} />);
        }
      }}>
      {content || (
        <IllustratedMessage>
          <CloudUpload />
          <Heading>
            Drag and drop your file
          </Heading>
          <Content>
            Or, select a file from your computer
          </Content>
          <ButtonGroup>
            <FileTrigger
              acceptedFileTypes={['image/jpeg', 'image/png', 'image/gif']}
              onSelect={files => {
                if (!files) return;
                let url = URL.createObjectURL(files[0]);
                setContent(<img src={url} alt={files[0].name} className={style({maxHeight: 'full', maxWidth: 'full'})} />);
              }}>
              <Button variant="accent">Browse files</Button>
            </FileTrigger>
          </ButtonGroup>
        </IllustratedMessage>
      )}
    </DropZone>
  );
}

```

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

### CardView Example with AssetCard

Source: https://react-spectrum.adobe.com/selection

Demonstrates a multi-selectable CardView displaying asset information with images. Use for displaying collections of items with rich previews.

```tsx
import {CardView, AssetCard, CardPreview, Image, Content, Text} from '@react-spectrum/s2/CardView';
import {style} from '@react-spectrum/s2/style' with {type: 'macro'};

const items = [
  {id: 1, name: 'Charizard', type: 'Fire, Flying', level: 67},
  {id: 2, name: 'Blastoise', type: 'Water', level: 56},
  {id: 3, name: 'Venusaur', type: 'Grass, Poison', level: 83},
  {id: 4, name: 'Pikachu', type: 'Electric', level: 100}
];

<CardView
  aria-label="Pokemon"
  selectionMode="multiple"
  disabledKeys={[3]}
  styles={style({width: 'full', height: 320})}
  items={items}>
  {item => (
    <AssetCard id={item.id} textValue={item.name}>
      <CardPreview>
        <Image src={`https://img.pokemondb.net/sprites/home/normal/2x/avif/${item.name.toLowerCase()}.avif`} />
      </CardPreview>
      <Content>
        <Text slot="title">{item.name}</Text>
        <Text slot="description">{item.type} • Level {item.level}</Text>
      </Content>
    </AssetCard>
  )}
</CardView>
```

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

### ProductCard Structure

Source: https://react-spectrum.adobe.com/Card

This example shows the basic structure of a ProductCard, including slots for preview image, thumbnail, title, description, action menu, and footer actions like buttons or links.

```tsx
<ProductCard>
  <CardPreview>
    <Image slot="preview" />
  </CardPreview>
  <Image slot="thumbnail" />
  <Content>
    <Text slot="title" />
    <ActionMenu />
    <Text slot="description" />
  </Content>
  <Footer>
    <Button /> or <LinkButton />
  </Footer>
</ProductCard>
```

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

### Install Parcel Transformer for SVGs

Source: https://react-spectrum.adobe.com/illustrations

Install the @react-spectrum/parcel-transformer-s2-icon as a dev dependency to enable SVG conversion for illustrations when using Parcel.

```bash
npm install @react-spectrum/parcel-transformer-s2-icon --dev
```

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

### CheckboxGroup API Example

Source: https://react-spectrum.adobe.com/CheckboxGroup

A minimal example illustrating the basic structure of a CheckboxGroup with a Checkbox, often used for API reference.

```tsx
<CheckboxGroup>
  <Checkbox />
</CheckboxGroup>
```

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

### TableView with Selection and ActionBar

Source: https://react-spectrum.adobe.com/TableView

Example demonstrating single/multiple selection and a custom ActionBar for bulk actions. Use `onSelectionChange` to manage selected keys and `renderActionBar` to provide action buttons for selected items.

```tsx
import {TableView, TableHeader, Column, TableBody, Row, Cell, type Selection} from '@react-spectrum/s2/TableView';
import {ActionBar, ActionButton} from '@react-spectrum/s2/ActionBar';
import {Text} from '@react-spectrum/s2/ActionButton';
import Edit from '@react-spectrum/s2/icons/Edit';
import Copy from '@react-spectrum/s2/icons/Copy';
import Delete from '@react-spectrum/s2/icons/Delete';
import {style} from '@react-spectrum/s2/style' with {type: 'macro'};
import {useState} from 'react';

function Example(props) {
  let [selected, setSelected] = useState<Selection>(new Set());

  return (
    <>
      <TableView
        {...props}
        aria-label="Favorite pokemon"
        styles={style({width: 'full', height: 200})}
        
        selectedKeys={selected}
        onSelectionChange={setSelected}
        onAction={key => alert(`Clicked ${key}`)}
        renderActionBar={(selectedKeys) => {
          let selection = selectedKeys === 'all' ? 'all' : [...selectedKeys].join(', ');
          return (
            <ActionBar>
              <ActionButton onPress={() => alert(`Edit ${selection}`)}>
                <Edit />
                <Text>Edit</Text>
              </ActionButton>
              <ActionButton onPress={() => alert(`Copy ${selection}`)}>
                <Copy />
                <Text>Copy</Text>
              </ActionButton>
              <ActionButton onPress={() => alert(`Delete ${selection}`)}>
                <Delete />
                <Text>Delete</Text>
              </ActionButton>
            </ActionBar>
          );
        }}>
        <TableHeader>
          <Column isRowHeader>Name</Column>
          <Column>Type</Column>
          <Column>Level</Column>
        </TableHeader>
        <TableBody>
          <Row id="charizard">
            <Cell>Charizard</Cell>
            <Cell>Fire, Flying</Cell>
            <Cell>67</Cell>
          </Row>
          <Row id="blastoise">
            <Cell>Blastoise</Cell>
            <Cell>Water</Cell>
            <Cell>56</Cell>
          </Row>
          <Row id="venusaur" isDisabled>
            <Cell>Venusaur</Cell>
            <Cell>Grass, Poison</Cell>
            <Cell>83</Cell>
          </Row>
          <Row id="pikachu">
            <Cell>Pikachu</Cell>
            <Cell>Electric</Cell>
            <Cell>100</Cell>
          </Row>
        </TableBody>
      </TableView>
      <p>Current selection: {selected === 'all' ? 'all' : [...selected].join(', ')}</p>
    </>
  );
}
```

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

### TooltipTrigger API Example

Source: https://react-spectrum.adobe.com/Tooltip

Illustrates the basic structure for using TooltipTrigger with a Button and Tooltip. This serves as a minimal example for API integration.

```tsx
<TooltipTrigger>
  <Button />
  <Tooltip />
</TooltipTrigger>
```

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

### Install React Spectrum MCP Server via VS Code CLI

Source: https://react-spectrum.adobe.com/ai

Add the React Spectrum MCP server to VS Code using the command line. Node.js is required.

```bash
code --add-mcp '{"name":"React Spectrum (S2)","command":"npx","args":["@react-spectrum/mcp@latest"]}'
```

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

### Integrate ClientProvider in Root Layout

Source: https://react-spectrum.adobe.com/getting-started

Render the ClientProvider in your root layout to set the user's preferred language and apply Spectrum's global configurations. This replaces the default `<html>` element.

```typescript
// app/layout.tsx
import {headers} from 'next/headers';
import {ClientProvider} from './provider';

export default async function RootLayout({children}) {
  // Get the user's preferred language from the Accept-Language header.
  // You could also get this from a database, URL param, etc.
  const acceptLanguage = (await headers()).get('accept-language');
  const lang = acceptLanguage?.split(/[,;]/)[0] || 'en-US';

  return (
    <ClientProvider lang={lang}>
      <body>
        {children}
      </body>
    </ClientProvider>
  );
}

```

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

### Basic ContextualHelp Usage

Source: https://react-spectrum.adobe.com/ContextualHelp

Demonstrates how to use the ContextualHelp component with Heading, Content, and Footer elements. Ensure necessary components are imported.

```tsx
import {ContextualHelp, Heading, Content, Footer} from '@react-spectrum/s2/ContextualHelp';
import {Link} from '@react-spectrum/s2/Link';

<ContextualHelp>
  <Heading>Permission required</Heading>
  <Content>Your admin must grant you permission before you can create a segment.</Content>
  <Footer>
    <Link isStandalone href="#" target="_blank">Learn more about segments</Link>
  </Footer>
</ContextualHelp>
```

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

### TableView Example

Source: https://react-spectrum.adobe.com/selection

TableView displays data in a tabular format with rows and columns. This example shows a single selection mode for rows, with custom content in cells.

```tsx
import {TableView, TableHeader, Column, TableBody, Row, Cell, type Selection} from '@react-spectrum/s2/TableView';
import {style} from '@react-spectrum/s2/style' with {type: 'macro'};
import {useState} from 'react';

const rows = [
  {id: 'lettuce', name: 'Lettuce', type: 'Vegetable'},
  {id: 'tomato', name: 'Tomato', type: 'Vegetable'},
  {id: 'cheese', name: 'Cheddar', type: 'Cheese'},
  {id: 'tuna', name: 'Tuna salad', type: 'Salad'}
];

function Example() {
  let [selectedKeys, setSelectedKeys] = useState<Selection>(new Set(['cheese']));

  return (
    <>
      <TableView
        aria-label="Sandwich contents"
        selectionMode="single"
        selectedKeys={selectedKeys}
        onSelectionChange={setSelectedKeys}
        styles={style({width: 'full'})}
      >
        <TableHeader>
          <Column isRowHeader>Name</Column>
          <Column>Type</Column>
        </TableHeader>
        <TableBody items={rows}>
          {item => (
            <Row>
              <Cell>{item.name}</Cell>
              <Cell>{item.type}</Cell>
            </Row>
          )}
        </TableBody>
      </TableView>
      <p className={style({font: 'body'})}>selectedKeys: {selectedKeys === 'all' ? 'all' : [...selectedKeys].join(', ')}</p>
    </>
  );
}
```

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

### Install and Configure Optimize Locales Plugin for Webpack

Source: https://react-spectrum.adobe.com/getting-started

Install the @react-aria/optimize-locales-plugin to optimize the JavaScript bundle by including only supported languages. Configure the plugin in webpack.config.ts by specifying the locales parameter.

```bash
npm install @react-aria/optimize-locales-plugin
```

```javascript
// webpack.config.js
const optimizeLocales = require('@react-aria/optimize-locales-plugin');

module.exports = {
  // ...
  plugins: [
    optimizeLocales.webpack({
      locales: ['en-US', 'fr-FR']
    })
  ]
};
```
```

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

### SelectBoxGroup Example

Source: https://react-spectrum.adobe.com/selection

Demonstrates a SelectBoxGroup for choosing cloud providers, including illustrations. Use when users need to select from a visually distinct set of options.

```tsx
import {SelectBoxGroup, SelectBox, Text} from '@react-spectrum/s2/SelectBoxGroup';
import {style} from '@react-spectrum/s2/style' with {type: 'macro'};
import Server from '@react-spectrum/s2/illustrations/linear/Server';
import StarFilled from '@react-spectrum/s2/illustrations/linear/Star';
import AlertNotice from '@react-spectrum/s2/illustrations/linear/AlertNotice';

const items = [
  {id: 1, name: 'AWS', illustration: <Server />},
  {id: 2, name: 'Azure', illustration: <AlertNotice />},
  {id: 3, name: 'GCP', illustration: <StarFilled />}
];

<SelectBoxGroup
  aria-label="Cloud providers"
  selectionMode="multiple"
  defaultSelectedKeys={[1]}
  disabledKeys={[3]}
  styles={style({width: 'full'})}
  items={items}>
  {((item) => (
    <SelectBox textValue={item.name}>
      {item.illustration}
      <Text slot="label">{item.name}</Text>
    </SelectBox>
  ))}
</SelectBoxGroup>
```

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

### Menu Example with MenuTrigger

Source: https://react-spectrum.adobe.com/selection

Illustrates a Menu component triggered by an ActionButton, allowing multiple selections. Suitable for contextual actions or navigation.

```tsx
import {Menu, MenuTrigger, MenuItem} from '@react-spectrum/s2/Menu';
import {ActionButton} from '@react-spectrum/s2/ActionButton';

const items = [
  {id: 1, name: 'Charizard'},
  {id: 2, name: 'Blastoise'},
  {id: 3, name: 'Venusaur'},
  {id: 4, name: 'Pikachu'}
];

<MenuTrigger>
  <ActionButton>Pokemon</ActionButton>
  <Menu
    selectionMode="multiple"
    defaultSelectedKeys={[4]}
    disabledKeys={[3]}
    items={items}>
    {item => <MenuItem>{item.name}</MenuItem>}
  </Menu>
</MenuTrigger>
```

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

### Menu Example with MenuTrigger

Source: https://react-spectrum.adobe.com/selection

Shows a Menu component triggered by an ActionButton, allowing single item selection. Manages selected keys using state.

```tsx
import {Menu, MenuTrigger, MenuItem, type Selection} from '@react-spectrum/s2/Menu';
import {ActionButton} from '@react-spectrum/s2/ActionButton';
import {style} from '@react-spectrum/s2/style' with {type: 'macro'};
import {useState} from 'react';

function Example() {
  let [selectedKeys, setSelectedKeys] = useState<Selection>(new Set(['grid']));

  return (
    <>
      <MenuTrigger>
        <ActionButton>View</ActionButton>
        <Menu
          selectionMode="single"
          selectedKeys={selectedKeys}
          onSelectionChange={setSelectedKeys}
        >
          <MenuItem id="grid">Pixel grid</MenuItem>
          <MenuItem id="rulers">Rulers</MenuItem>
          <MenuItem id="layout">Layout guides</MenuItem>
          <MenuItem id="toolbar">Toolbar</MenuItem>
        </Menu>
      </MenuTrigger>
      <p className={style({font: 'body'})}>selectedKeys: {selectedKeys === 'all' ? 'all' : [...selectedKeys].join(', ')}</p>
    </>
  );
}

```

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

### SelectBoxGroup Example

Source: https://react-spectrum.adobe.com/selection

SelectBoxGroup allows users to select one or more options from a list, each represented by a SelectBox. This example demonstrates single selection mode with custom content inside each SelectBox.

```tsx
import {SelectBoxGroup, SelectBox, Text, type Selection} from '@react-spectrum/s2/SelectBoxGroup';
import {style} from '@react-spectrum/s2/style' with {type: 'macro'};
import {useState} from 'react';
import Server from '@react-spectrum/s2/illustrations/linear/Server';
import StarFilled from '@react-spectrum/s2/illustrations/linear/Star';
import AlertNotice from '@react-spectrum/s2/illustrations/linear/AlertNotice';

function Example() {
  let [selectedKeys, setSelectedKeys] = useState<Selection>(new Set(['aws']));

  return (
    <>
      <SelectBoxGroup
        aria-label="Cloud provider"
        selectionMode="single"
        selectedKeys={selectedKeys}
        onSelectionChange={setSelectedKeys}
        styles={style({width: 'full'})}
      >
        <SelectBox id="aws" textValue="AWS">
          <Server />
          <Text slot="label">Amazon Web Services</Text>
        </SelectBox>
        <SelectBox id="azure" textValue="Azure">
          <AlertNotice />
          <Text slot="label">Microsoft Azure</Text>
        </SelectBox>
        <SelectBox id="gcp" textValue="GCP">
          <StarFilled />
          <Text slot="label">Google Cloud Platform</Text>
        </SelectBox>
      </SelectBoxGroup>
      <p className={style({font: 'body'})}>selectedKeys: {selectedKeys === 'all' ? 'all' : [...selectedKeys].join(', ')}</p>
    </>
  );
}
```

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

### Install Optimize Locales Plugin

Source: https://react-spectrum.adobe.com/getting-started

Install the @react-aria/optimize-locales-plugin to enable optimization of localized strings in your JavaScript bundle. This plugin helps reduce bundle size by including only the necessary language strings.

```bash
npm install @react-aria/optimize-locales-plugin
```
Tokens:
Raw