React Aria

https://react-aria.adobe.com
Admin
React Aria is a library of over 50 accessible UI components with built-in behavior, adaptive...
Tokens:774,245
Snippets:3,538
Trust Score:10
Update:2 weeks ago
Show doc for...
Tokens:
Raw
### Quick Start Select Example

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

Quick start example showing how to use the Select component with a label and a list of animal items.

```tsx
import {Select, SelectItem} from 'vanilla-starter/Select';

<Select label="Favorite animal">
  <SelectItem>Aardvark</SelectItem>
  <SelectItem>Cat</SelectItem>
  <SelectItem>Dog</SelectItem>
  <SelectItem>Kangaroo</SelectItem>
  <SelectItem>Panda</SelectItem>
  <SelectItem>Snake</SelectItem>
</Select>
```

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

### Vanilla CSS Tabs example

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

A complete Tabs example using the vanilla-starter components. It shows four tabs (General, Appearance, Notifications, Profile) with forms, checkboxes, radio groups, and a button. Use this as a starting point for a settings page.

```tsx
import {Tabs, TabList, Tab, TabPanels, TabPanel} from 'vanilla-starter/Tabs';
import {Form} from 'vanilla-starter/Form';
import {TextField} from 'vanilla-starter/TextField';
import {Button} from 'vanilla-starter/Button';
import {RadioGroup, Radio} from 'vanilla-starter/RadioGroup';
import {CheckboxGroup} from 'vanilla-starter/CheckboxGroup';
import {Checkbox} from 'vanilla-starter/Checkbox';

<Tabs>
  <TabList aria-label="Settings">
    <Tab id="general">General</Tab>
    <Tab id="appearance">Appearance</Tab>
    <Tab id="notifications">Notifications</Tab>
    <Tab id="profile">Profile</Tab>
  </TabList>
  <TabPanels>
    <TabPanel id="general">
      <Form>
        <TextField label="Homepage" defaultValue="react-aria.adobe.com" />
        <Checkbox defaultSelected>Show sidebar</Checkbox>
        <Checkbox>Show status bar</Checkbox>
      </Form>
    </TabPanel>
    <TabPanel id="appearance">
      <Form>
        <RadioGroup label="Theme" defaultValue="auto">
          <Radio value="auto">Auto</Radio>
          <Radio value="light">Light</Radio>
          <Radio value="dark">Dark</Radio>
        </RadioGroup>
        <RadioGroup label="Font size" defaultValue="medium">
          <Radio value="small">Small</Radio>
          <Radio value="medium">Medium</Radio>
          <Radio value="large">Large</Radio>
        </RadioGroup>
      </Form>
    </TabPanel>
    <TabPanel id="notifications">
      <CheckboxGroup label="Notifications settings" defaultValue={['account', 'dms']}>
        <Checkbox value="account">Account activity</Checkbox>
        <Checkbox value="mentions">Mentions</Checkbox>
        <Checkbox value="dms">Direct message</Checkbox>
        <Checkbox value="marketing">Marketing emails</Checkbox>
      </CheckboxGroup>
    </TabPanel>
    <TabPanel id="profile">
      <Form>
        <TextField label="Name" defaultValue="Devon Govett" />
        <TextField label="Username" defaultValue="@devongovett" />
        <Button>Update profile</Button>
      </Form>
    </TabPanel>
  </TabPanels>
</Tabs>
```

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

### Vanilla CSS example

Source: https://react-aria.adobe.com/Form

Example usage of the Form component with TextField and Button components, including submit and reset buttons.

```tsx
import {Form} from 'vanilla-starter/Form';
import {TextField} from 'vanilla-starter/TextField';
import {Button} from 'vanilla-starter/Button';

<Form>
  <TextField label="Name" name="name" isRequired placeholder="Enter your full name" />
  <TextField label="Email" name="email" type="email" isRequired placeholder="Enter your email" />
  <div style={{display: 'flex', gap: 8}}>
    <Button type="submit">Submit</Button>
    <Button type="reset" variant="secondary">Reset</Button>
  </div>
</Form>
```

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

### Get weeks in month with getWeeksInMonth

Source: https://react-aria.adobe.com/internationalized/date/CalendarDate

Use getWeeksInMonth to get the number of weeks in a month, which depends on the month's days, the starting weekday, and the locale. The example shows 6 weeks for en-US and 5 for fr-FR.

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

let date = new CalendarDate(2021, 1, 1);

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

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

### useKeyboard shortcuts example

Source: https://react-aria.adobe.com/useKeyboard

Demonstrates the shortcuts prop, mapping key combinations to handlers. Shows how return values control propagation and default prevention. The example includes a parent and child useKeyboard, with the child handling shortcuts and the parent logging events.

```tsx
import React from 'react';
import {useKeyboard} from 'react-aria/useKeyboard';

function Example() {
  let [events, setEvents] = React.useState<string[]>([]);
  let add = (message: string) => setEvents(events => [message, ...events]);

  let {keyboardProps: parentProps} = useKeyboard({
    onKeyDown: () => add('parent onKeyDown')
  });

  let {keyboardProps: childProps} = useKeyboard({
    shortcuts: {
      'Mod+s': () => add('child shortcut: Mod+s (prevents save dialog)'),
      'ArrowLeft': () => add('child shortcut: ArrowLeft (prevents default, stops propagation)'),
      'ArrowRight': () => {
        add('child shortcut: ArrowRight (allows default, continues propagation)');
        return false;
      }
    },
    onKeyDown: () => add('child onKeyDown')
  });

  return (
    <>
      <p>
        Focus the text field and press <kbd>Mod</kbd>+<kbd>S</kbd>, <kbd>←</kbd>,
        or <kbd>→</kbd>. <kbd>←</kbd> prevents the cursor from moving. <kbd>→</kbd> moves the
        cursor and propagates to the parent. Press any other key to see unmatched events propagate.
      </p>
      <div
        {...parentProps}
        style={{
          border: '1px solid gray',
          padding: 16
        }}>
        <label htmlFor="shortcuts-example" style={{display: 'block', marginBottom: 8}}>
          Text field
        </label>
        <input
          {...childProps}
          id="shortcuts-example"
          defaultValue="Move the cursor with arrow keys"
          style={{width: '100%'}} />
      </div>
      <ul
        style={{
          maxHeight: '200px',
          overflow: 'auto'
        }}>
        {events.map((e, i) => <li key={i}>{e}</li>)}
      </ul>
    </>
  );
}
```

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

### Tailwind ListBox example

Source: https://react-aria.adobe.com/ListBox

Basic usage of the ListBox component from the tailwind-starter package. It renders a list of items with an accessible label. This example is the starting point for the Tailwind example.

```tsx
import {ListBox, ListBoxItem} from 'tailwind-starter/ListBox';

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

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

### Basic useKeyboard example

Source: https://react-aria.adobe.com/useKeyboard

Shows how to use useKeyboard to handle onKeyDown and onKeyUp events. The keyboardProps are spread onto an input element, and events are displayed in a list.

```tsx
import React from 'react';
import {useKeyboard} from 'react-aria/useKeyboard';

function Example() {
  let [events, setEvents] = React.useState<string[]>([]);
  let {keyboardProps} = useKeyboard({
    onKeyDown: e => setEvents(
      events => [`key down: ${e.key}`, ...events]
    ),
    onKeyUp: e => setEvents(
      events => [`key up: ${e.key}`, ...events]
    )
  });

  return (
    <>
      <label htmlFor="example">Example</label>
      <input
        {...keyboardProps}
        id="example" />
      <ul
        style={{
          maxHeight: '200px',
          overflow: 'auto'
        }}>
        {events.map((e, i) => <li key={i}>{e}</li>)}
      </ul>
    </>
  );
}
```

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

### Vanilla CSS example of Menu

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

Shows a menu trigger with a button and a menu containing sections, items with icons, keyboard shortcuts, a submenu, and a multiple selection section. Uses vanilla-starter and lucide-react.

```tsx
import {MenuTrigger, SubmenuTrigger, Menu, MenuItem, MenuSection, Separator, Text, Keyboard} from 'vanilla-starter/Menu';
import {Button} from 'vanilla-starter/Button';
import {Ellipsis, FolderOpen, Pencil, Copy, Trash, Share, Mail, Smartphone, Instagram} from 'lucide-react';

<MenuTrigger>
  <Button aria-label="Actions">
    <Ellipsis size={18} />
  </Button>
  <Menu>
    <MenuSection>
      <MenuItem onAction={() => alert('open')} textValue="Open">
        <FolderOpen />
        <Text slot="label">Open</Text>
        <Keyboard>⌘O</Keyboard>
      </MenuItem>
      <MenuItem onAction={() => alert('rename')} textValue="Rename">
        <Pencil />
        <Text slot="label">Rename…</Text>
        <Keyboard>⌘R</Keyboard>
      </MenuItem>
      <MenuItem onAction={() => alert('duplicate')} textValue="Duplicate">
        <Copy />
        <Text slot="label">Duplicate</Text>
        <Keyboard>⌘D</Keyboard>
      </MenuItem>
      <MenuItem onAction={() => alert('delete')} textValue="Delete">
        <Trash />
        <Text slot="label">Delete…</Text>
        <Keyboard>⌘⌫</Keyboard>
      </MenuItem>
      <SubmenuTrigger>
        <MenuItem textValue="Share">
          <Share />
          <Text slot="label">Share</Text>
        </MenuItem>
        <Menu>
          <MenuItem textValue="Email">
            <Mail />
            <Text slot="label">Email</Text>
          </MenuItem>
          <MenuItem textValue="SMS">
            <Smartphone />
            <Text slot="label">SMS</Text>
          </MenuItem>
          <MenuItem textValue="Instagram">
            <Instagram />
            <Text slot="label">Instagram</Text>
          </MenuItem>
        </Menu>
      </SubmenuTrigger>
    </MenuSection>
    <Separator />
    <MenuSection selectionMode="multiple" defaultSelectedKeys={['files']}>
      <MenuItem id="files">Show files</MenuItem>
      <MenuItem id="folders">Show folders</MenuItem>
    </MenuSection>
  </Menu>
</MenuTrigger>
```

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

### useButton hook standalone example

Source: https://react-aria.adobe.com/hooks

Shows the minimal setup for using the useButton hook standalone: import the hook, create a ref, call useButton to get buttonProps, and spread them onto a native button element. This pattern gives you full control over the DOM while inheriting React Aria's accessibility behavior.

```tsx
import {useButton} from 'react-aria/useButton';
import {useRef} from 'react';

function Button(props) {
  let ref = useRef(null);
  let {buttonProps} = useButton(props, ref);
  return <button {...buttonProps} ref={ref}>{props.children}</button>;
}
```

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

### useFocusVisible hook example

Source: https://react-aria.adobe.com/useFocusVisible

Imports useFocusVisible from 'react-aria/useFocusVisible' and uses it with isTextInput: true to get isFocusVisible. Displays the boolean and includes two labeled text inputs.

```jsx
import {useFocusVisible} from 'react-aria/useFocusVisible';

function Example() {
  let {isFocusVisible} = useFocusVisible({isTextInput: true});

  return (
    <>
      <div>Focus visible: {String(isFocusVisible)}</div>
      <label style={{display: 'block'}}>
        First Name: <input />
      </label>
      <label style={{display: 'block'}}>
        Last Name: <input />
      </label>
    </>
  );
}

```

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

### Vanilla CSS example: MyToastRegion and queue

Source: https://react-aria.adobe.com/Toast

A basic example using the vanilla-starter Toast components. It renders a MyToastRegion and a Button that queues a toast with a title and description, optionally with a timeout.

```tsx
import {MyToastRegion, queue} from 'vanilla-starter/Toast';
import {Button} from 'vanilla-starter/Button';

function Example(props) {
  return (
    <div>
      <MyToastRegion />
      <Button onPress={() => queue.add(
        {
          title: props.title || 'Files uploaded',
          description: props.description || '3 files uploaded successfully.'
        },
        props.timeout ? {timeout: props.timeout} : undefined
      )}>
        Show Toast
      </Button>
    </div>
  );
}
```

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

### useHover example with event tracking

Source: https://react-aria.adobe.com/useHover

Use useHover to handle pointer hover interactions. The hook returns hoverProps to spread on the target element and an isHovered boolean. The example tracks hover start and end events, displaying them in a list, and changes the background color based on hover state.

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

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

### usePress example with event logging

Source: https://react-aria.adobe.com/usePress

Example demonstrating usePress with onPressStart, onPressEnd, and onPress callbacks that log pointer types. The isPressed state changes the background color. The pressProps are spread on a div with role='button' and tabIndex=0.

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

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

### Get start of year, month, and week with locale

Source: https://react-aria.adobe.com/internationalized/date/CalendarDate

Use startOfYear, startOfMonth, startOfWeek (and endOfYear, endOfMonth, endOfWeek) to find start or end dates of a time unit. startOfWeek and endOfWeek require a locale string because the first day of the week varies by locale (e.g., Sunday in the US, Monday in France).

```javascript
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

```

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

### Basic Select with SelectItem from vanilla-starter

Source: https://react-aria.adobe.com/Select

Basic usage of the Select component from the vanilla-starter package. Renders a collapsible list of options and allows the user to select one. The example shows a list of animal names as SelectItem children.

```tsx
import {Select, SelectItem} from 'vanilla-starter/Select';

<Select>
  <SelectItem>Aardvark</SelectItem>
  <SelectItem>Cat</SelectItem>
  <SelectItem>Dog</SelectItem>
  <SelectItem>Kangaroo</SelectItem>
  <SelectItem>Panda</SelectItem>
  <SelectItem>Snake</SelectItem>
</Select>
```

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

### useLocale example

Source: https://react-aria.adobe.com/useLocale

Use useLocale to get the current locale and direction, then set the lang and dir attributes on the root div so the browser renders the UI in the correct language and direction.

```jsx
import {useLocale} from 'react-aria/I18nProvider';

function YourApp() {
  let {locale, direction} = useLocale();

  return (
    <div lang={locale} dir={direction}>
      {/* your app here */}
    </div>
  );
}

```

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

### Vanilla CSS Toolbar Example

Source: https://react-aria.adobe.com/Toolbar

A complete toolbar example using the vanilla-starter components. It includes a ToggleButtonGroup for text styling, a Group with clipboard action buttons, and a Select for font choice, all separated by Separator components. The toolbar uses arrow key navigation for accessibility.

```tsx
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>
  <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>
```

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

### Get start dates with startOfYear, startOfMonth, startOfWeek

Source: https://react-aria.adobe.com/internationalized/date/ZonedDateTime

Use startOfYear, startOfMonth, and startOfWeek to get the first day of the respective time unit. These functions only affect date components, leaving time fields unchanged. startOfWeek requires a locale string because the first day of the week varies by locale (e.g., Sunday in the US, Monday in France).

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

let date = parseZonedDateTime('2022-02-03T09:45[America/Los_Angeles]');

startOfYear(date); // 2022-01-01T09:45[America/Los_Angeles]
startOfMonth(date); // 2022-02-01T09:45[America/Los_Angeles]
startOfWeek(date, 'en-US'); // 2022-01-30T09:45[America/Los_Angeles]
startOfWeek(date, 'fr-FR'); // 2022-01-31T09:45[America/Los_Angeles]
```

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

### Dynamic collection with onAction in vanilla starter

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

Dynamic collection example using the vanilla starter. Passes a list of objects to the items prop and a function to render children. The onAction event is called when a user presses a breadcrumb, and the navigate function truncates the breadcrumb list up to the selected item.

```tsx
import type {Key} from 'react-aria-components/Breadcrumbs';
import {Breadcrumbs, Breadcrumb} from 'vanilla-starter/Breadcrumbs';
import {useState} from 'react';

function Example() {
  let [breadcrumbs, setBreadcrumbs] = useState([
    {id: 1, label: 'Home'},
    {id: 2, label: 'Trendy'},
    {id: 3, label: 'March 2022 Assets'}
  ]);

  let navigate = (id: Key) => {
    let i = breadcrumbs.findIndex(item => item.id === id);
    setBreadcrumbs(breadcrumbs.slice(0, i + 1));
  };

  return (
    /*- begin highlight -*/
    <Breadcrumbs items={breadcrumbs} onAction={navigate}>
      {item => <Breadcrumb>{item.label}</Breadcrumb>}
    </Breadcrumbs>
    /*- end highlight -*/
  );
}
```

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

### Grid layout with GridLayout and resizable container

Source: https://react-aria.adobe.com/Virtualizer

Grid layout example using GridLayout. The Virtualizer uses layout={GridLayout} and the GridList sets layout="grid" for correct keyboard navigation. The example generates 1000 albums and renders them in a resizable container; the CSS class .resizable enables horizontal resizing.

```tsx
import {Virtualizer, GridLayout} from 'react-aria-components/Virtualizer';
import {GridList, GridListItem, Text} from 'vanilla-starter/GridList';

let albumOptions = [
  {
    image: 'https://images.unsplash.com/photo-1593958812614-2db6a598c71c?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxzZWFyY2h8Nnx8ZGlzY298ZW58MHx8MHx8fDA%3D&auto=format&fit=crop&w=900&q=60',
    title: 'Euphoric Echoes',
    artist: 'Luna Solstice'
  },
  {
    image: 'https://images.unsplash.com/photo-1601042879364-f3947d3f9c16?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxzZWFyY2h8M3x8bmVvbnxlbnwwfHwwfHx8MA%3D%3D&auto=format&fit=crop&w=900&q=60',
    title: 'Neon Dreamscape',
    artist: 'Electra Skyline'
  },
  {
    image: 'https://images.unsplash.com/photo-1528722828814-77b9b83aafb2?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxzZWFyY2h8MTF8fHNwYWNlfGVufDB8fDB8fHww&auto=format&fit=crop&w=900&q=60',
    title: 'Cosmic Serenade',
    artist: 'Orion\'s Symphony'
  },
  {
    image: 'https://images.unsplash.com/photo-1511379938547-c1f69419868d?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxzZWFyY2h8M3x8bXVzaWN8ZW58MHx8MHx8fDA%3D&auto=format&fit=crop&w=900&q=60',
    title: 'Melancholy Melodies',
    artist: 'Violet Mistral'
  },
  {
    image: 'https://images.unsplash.com/photo-1608433319511-dfe8ea4cbd3c?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxzZWFyY2h8MTF8fGJlYXR8ZW58MHx8MHx8fDA%3D&auto=format&fit=crop&w=900&q=60',
    title: 'Rhythmic Illusions',
    artist: 'Mirage Beats'
  }
];

type Album = {id: number, image: string, title: string, artist: string};
let albums: Album[] = [];
for (let i = 0; i < 1000; i++) {
  albums.push({
    id: i,
    ...albumOptions[i % albumOptions.length]
  })
}

function Example(props) {
  return (
    <div className="resizable">
      <Virtualizer
        /*- begin highlight -*/
        layout={GridLayout}
        
        {...props}>
        {/*- end highlight -*/}
        <GridList
          /*- begin highlight -*/
          layout="grid"
          /*- end highlight -*/
          aria-label="Virtualized grid layout"
          selectionMode="multiple"
          items={albums}
          data-size="small"
          style={{display: 'block', padding: 0, height: 300, width: '100%'}}>
          {item => (
            <GridListItem textValue={item.title} style={{height: '100%'}}>
              <img src={item.image} alt="" />
              <Text>{item.title}</Text>
              <Text slot="description">{item.artist}</Text>
            </GridListItem>
          )}
        </GridList>
      </Virtualizer>
    </div>
  );
}
```

```css
.resizable {
  resize: horizontal;
  width: 400px;
  min-width: 240px;
  max-width: 100%;
  overflow: hidden;
}
```

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

### RangeCalendar display options with visibleDuration, pageBehavior, firstDayOfWeek, and weeksInMonth

Source: https://react-aria.adobe.com/RangeCalendar

Use this snippet as a starting point for customizing the calendar's display. The visibleDuration prop and multiple CalendarGrid elements allow showing more than one month. The pageBehavior prop controls pagination, and firstDayOfWeek and weeksInMonth override locale defaults. The example includes a TODO comment indicating it is a placeholder for the starter example.

```tsx
import {RangeCalendar} from 'vanilla-starter/RangeCalendar';

// TODO: move this into the starter example.
function Example(props) {
  return (
    <RangeCalendar
      {...props}
      aria-label="Trip dates"
      
    />
  );
}
```

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

### Vanilla CSS modal example

Source: https://react-aria.adobe.com/Modal

Shows a basic modal with a trigger button, dialog, heading, form, and text fields. The modal blocks interaction with content outside it. Use this as a starting point for a modal in a React app.

```tsx
import {DialogTrigger} from 'react-aria-components/Modal';
import {Modal} from 'vanilla-starter/Modal';
import {Dialog, Heading} from 'vanilla-starter/Dialog';
import {Form} from 'vanilla-starter/Form';
import {TextField} from 'vanilla-starter/TextField';
import {Button} from 'vanilla-starter/Button';

function Example(props) {
  return (
    <DialogTrigger>
      <Button>Sign up…</Button>
      <Modal {...props}>
        <Dialog>
          <Heading slot="title">Subscribe to our newsletter</Heading>
          <p>Enter your information to subscribe to our newsletter and receive updates about new features and announcements.</p>
          <Form>
            <TextField autoFocus label="Name" placeholder="Enter your full name" />
            <TextField label="Email" placeholder="Enter your email" />
            <div style={{display: 'flex', gap: 8, alignSelf: 'end'}}>
              <Button slot="close" variant="secondary">Cancel</Button>
              <Button slot="close">Subscribe</Button>
            </div>
          </Form>
        </Dialog>
      </Modal>
    </DialogTrigger>
  );
}

```

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

### Tailwind example: queue.add() and MyToastRegion

Source: https://react-aria.adobe.com/Toast

Example usage of the toast queue and region. Import MyToastRegion and queue from the starter, render MyToastRegion at the root, and call queue.add() with a title and optional description and timeout to display a toast.

```tsx
import {MyToastRegion, queue} from 'tailwind-starter/Toast';
import {Button} from 'tailwind-starter/Button';

function Example(props) {
  return (
    <div>
      <MyToastRegion />
      <Button onPress={() => queue.add(
        {
          title: props.title || 'Files uploaded',
          description: props.description || '3 files uploaded successfully.'
        },
        props.timeout ? {timeout: props.timeout} : undefined
      )}>
        Show Toast
      </Button>
    </div>
  );
}
```

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

### Get calendar identifier from locale and create calendar

Source: https://react-aria.adobe.com/internationalized/date/Calendar

Shows how to extract the calendar identifier from a locale using Intl.DateTimeFormat and then create the corresponding calendar with createCalendar. The example covers three cases: default locale, 'th-TH' locale with Buddhist calendar, and explicit 'hi-IN-u-ca-indian' locale with Indian calendar.

```javascript
// Get the calendar identifier for the current user.
let calendarIdentifier = new Intl.DateTimeFormat().resolvedOptions().calendar; // e.g. 'gregory'
createCalendar(calendarIdentifier); // new GregorianCalendar()

// Language and region provided, calendar inferred.
let calendarIdentifier = new Intl.DateTimeFormat('th-TH').resolvedOptions().calendar; // 'buddhist'
createCalendar(calendarIdentifier); // new BuddhistCalendar()

// Calendar system set explicitly.
let calendarIdentifier = new Intl.DateTimeFormat('hi-IN-u-ca-indian').resolvedOptions().calendar; // 'indian'
createCalendar(calendarIdentifier); // new IndianCalendar()
```
Tokens:
Raw