React Aria Components Tailwind Starter

https://github.com/zaichaopan/react-aria-components-tailwind-starter
Admin
A collection of copy-paste styled React Aria components built with Tailwind CSS for creating...
Tokens:28,306
Snippets:340
Trust Score:7.2
License:MIT
Update:1 month ago
Show doc for...
Tokens:
Raw
### Basic Keyboard Example

Source: https://github.com/zaichaopan/react-aria-components-tailwind-starter/blob/master/stories/Keyboard.mdx

Demonstrates the basic usage of the Keyboard component. No specific setup or imports are required beyond the component itself.

```javascript
import {
	Keyboard,
	Provider
} from 'react-aria-components';

export function BasicExample() {
	return (
		<Provider>
			<Keyboard>Shift + Enter</Keyboard>
		</Provider>
	);
}
```

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

### Install project dependencies

Source: https://github.com/zaichaopan/react-aria-components-tailwind-starter/blob/master/README.md

Run these commands to install the required packages for React Aria, Tailwind utilities, and optional floating UI support.

```shell
npm i react-aria-components
npm i react-stately
npm i react-aria
npm i tailwindcss-animate
npm i @tailwindcss/container-queries
npm i tailwind-merge
## Only if you want to use the HoverCard component
npm i @floating-ui/react
```

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

### Basic Menu Example

Source: https://github.com/zaichaopan/react-aria-components-tailwind-starter/blob/master/stories/Menu.mdx

Displays a standard menu with a list of actions or options.

```jsx
import { Menu, MenuItem, MenuSeparator, MenuSection, MenuTrigger, MenuPopover } from 'react-aria-components';

<MenuTrigger>
  <Button variant="outline">Menu</Button>
  <MenuPopover>
    <Menu>
      <MenuItem id="new">New</MenuItem>
      <MenuItem id="open">Open</MenuItem>
      <MenuItem id="save">Save</MenuItem>
      <MenuSeparator />
      <MenuSection title="Other">
        <MenuItem id="print">Print</MenuItem>
        <MenuItem id="close">Close</MenuItem>
      </MenuSection>
    </Menu>
  </MenuPopover>
</MenuTrigger>
```

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

### Basic Callout Example

Source: https://github.com/zaichaopan/react-aria-components-tailwind-starter/blob/master/stories/Callout.mdx

Displays a standard callout component.

```jsx
<Canvas of={CalloutStories.BasicExample} />
```

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

### Single Selection Complete Example

Source: https://github.com/zaichaopan/react-aria-components-tailwind-starter/blob/master/stories/Menu.mdx

A comprehensive example of a single selection menu with various item types and sections.

```jsx
import { Menu, MenuItem, MenuSeparator, MenuSection, MenuTrigger, MenuPopover } from 'react-aria-components';
import { Button } from './Button';
import {Icon} from './Icon';

<MenuTrigger>
  <Button variant="outline">Select One</Button>
  <MenuPopover>
    <Menu sectionMode="single" defaultSelectedKey="save">
      <MenuSection title="File">
        <MenuItem id="new">
          <Icon slot="start">new</Icon>
          New
          <div slot="description">Create a new file</div>
          <div slot="end">Ctrl+N</div>
        </MenuItem>
        <MenuItem id="open">
          <Icon slot="start">open</Icon>
          Open
          <div slot="description">Open an existing file</div>
          <div slot="end">Ctrl+O</div>
        </MenuItem>
        <MenuItem id="save">
          <Icon slot="start">save</Icon>
          Save
          <div slot="description">Save the current file</div>
          <div slot="end">Ctrl+S</div>
        </MenuItem>
      </MenuSection>
      <MenuSeparator />
      <MenuSection title="Edit">
        <MenuItem id="cut" destructive><Icon slot="start">cut</Icon>Cut</MenuItem>
        <MenuItem id="copy"><Icon slot="start">copy</Icon>Copy</MenuItem>
        <MenuItem id="paste"><Icon slot="start">paste</Icon>Paste</MenuItem>
      </MenuSection>
    </Menu>
  </MenuPopover>
</MenuTrigger>
```

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

### Customization Example

Source: https://github.com/zaichaopan/react-aria-components-tailwind-starter/blob/master/stories/Checkbox.mdx

Demonstrates advanced customization of the Checkbox component.

```jsx
import {
	Checkbox,
	CheckboxGroup,
} from '@react-aria/checkbox';
import {
	useCheckboxGroupState,
} from '@react-stately/checkbox';
import {
	useFormProps,
} from '@react-aria/form';
import {
	useProvider,
} from '@react-stately/provider';
import {
	useRef,
} from 'react';

function CheckboxExample(props) {
	let {
		children,
		label,
		initialSelectedKeys,
		isDisabled,
		...other
	} = props;
	let {
		formProps
	} = useFormProps(other);
	let {
		direction
	} = useProvider();
	let state = useCheckboxGroupState({
		...props,
		initialSelectedKeys,
		isDisabled
	});

	let { 
		groupProps,
		labelProps
	} = useCheckboxGroup(
		{ 
			...props,
			label
		},
		state
	);

	return (
		<form {...formProps}>
			<div {...groupProps} style={{ display: 'flex', flexDirection: direction === 'rtl' ? 'row-reverse' : 'row', gap: '10px' }}>
				{label && <label {...labelProps} style={{ fontWeight: 'bold', marginRight: '10px' }}>{label}</label>}
				<div style={{ display: 'flex', flexDirection: 'column', gap: '5px' }}>{children}</div>
			</div>
		</form>
	);
}

export function Customization() {
	return (
		<CheckboxExample label="Options">
			<Checkbox>
				<div style={{ padding: '10px', border: '1px solid #ccc', borderRadius: '5px' }}>
					Custom Checkbox
				</div>
			</Checkbox>
		</CheckboxExample>
	);
}

```

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

### Implement Switch Components

Source: https://context7.com/zaichaopan/react-aria-components-tailwind-starter/llms.txt

Examples of basic, described, grouped, and label-positioned switches.

```tsx
import { Switch, SwitchField, SwitchGroup, Switches } from './switch';
import { Label, Description } from './field';

// Basic switch
<Switch>Enable notifications</Switch>

// Switch with description
<SwitchField>
  <Switch>Dark mode</Switch>
  <Description>
    Enable dark mode for a better viewing experience at night.
  </Description>
</SwitchField>

// Switch group
<SwitchGroup>
  <Label>Email Preferences</Label>
  <Switches>
    <SwitchField>
      <Switch defaultSelected>Marketing emails</Switch>
      <Description>Receive promotional content</Description>
    </SwitchField>
    <SwitchField>
      <Switch defaultSelected>Product updates</Switch>
      <Description>Get notified about new features</Description>
    </SwitchField>
  </Switches>
</SwitchGroup>

// Label placement
<Switch labelPlacement="start">WiFi</Switch>
```

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

### Render Basic Skeleton Example

Source: https://github.com/zaichaopan/react-aria-components-tailwind-starter/blob/master/stories/Skeleton.mdx

Displays a basic skeleton placeholder UI component.

```jsx
<SkeletonStories.BasicExample />
```

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

### Basic Checkbox Example

Source: https://github.com/zaichaopan/react-aria-components-tailwind-starter/blob/master/stories/Checkbox.mdx

Demonstrates the basic usage of the Checkbox component.

```jsx
import {
	Checkbox,
	CheckboxGroup,
} from '@react-aria/checkbox';
import {
	useCheckboxGroupState,
} from '@react-stately/checkbox';
import {
	useFormProps,
} from '@react-aria/form';
import {
	useProvider,
} from '@react-stately/provider';
import {
	useRef,
} from 'react';

function CheckboxExample(props) {
	let {
		children,
		label,
		initialSelectedKeys,
		isDisabled,
		...other
	} = props;
	let {
		formProps
	} = useFormProps(other);
	let {
		direction
	} = useProvider();
	let state = useCheckboxGroupState({
		...props,
		initialSelectedKeys,
		isDisabled
	});

	let { 
		groupProps,
		labelProps
	} = useCheckboxGroup(
		{ 
			...props,
			label
		},
		state
	);

	return (
		<form {...formProps}>
			<div {...groupProps} style={{ display: 'flex', flexDirection: direction === 'rtl' ? 'row-reverse' : 'row', gap: '10px' }}>
				{label && <label {...labelProps} style={{ fontWeight: 'bold', marginRight: '10px' }}>{label}</label>}
				<div style={{ display: 'flex', flexDirection: 'column', gap: '5px' }}>{children}</div>
			</div>
		</form>
	);
}

export function BasicExample() {
	return (
		<CheckboxExample label="Options">
			<Checkbox>Option 1</Checkbox>
			<Checkbox>Option 2</Checkbox>
			<Checkbox>Option 3</Checkbox>
		</CheckboxExample>
	);
}

```

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

### Basic DateRangePicker Example

Source: https://github.com/zaichaopan/react-aria-components-tailwind-starter/blob/master/stories/DateRangePicker.mdx

Displays a standard date range picker component.

```jsx
<Canvas of={DateRangePickerStories.BasicExample} />
```

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

### Implement Menu Components

Source: https://context7.com/zaichaopan/react-aria-components-tailwind-starter/llms.txt

Provides examples for basic menus, menus with sections and descriptions, and selection-enabled menus.

```tsx
import {
  MenuTrigger,
  MenuButton,
  MenuPopover,
  Menu,
  MenuItem,
  MenuSection,
  MenuSeparator,
  MenuItemLabel,
  MenuItemDescription
} from './menu';

// Basic menu
<MenuTrigger>
  <MenuButton>Options</MenuButton>
  <MenuPopover>
    <Menu>
      <MenuItem>New File</MenuItem>
      <MenuItem>Open</MenuItem>
      <MenuSeparator />
      <MenuItem>Save</MenuItem>
      <MenuItem destructive>Delete</MenuItem>
    </Menu>
  </MenuPopover>
</MenuTrigger>

// Menu with sections and descriptions
<MenuTrigger>
  <MenuButton>Account</MenuButton>
  <MenuPopover>
    <Menu>
      <MenuSection title="Account">
        <MenuItem>
          <Icon><UserIcon /></Icon>
          <MenuItemLabel>Profile</MenuItemLabel>
        </MenuItem>
        <MenuItem>
          <Icon><SettingsIcon /></Icon>
          <MenuItemLabel>Settings</MenuItemLabel>
          <MenuItemDescription>Manage your preferences</MenuItemDescription>
        </MenuItem>
      </MenuSection>
      <MenuSection title="Danger Zone">
        <MenuItem destructive>
          <Icon><TrashIcon /></Icon>
          <MenuItemLabel>Delete Account</MenuItemLabel>
        </MenuItem>
      </MenuSection>
    </Menu>
  </MenuPopover>
</MenuTrigger>

// Selection menu
const [selected, setSelected] = useState<Selection>(new Set(['grid']));
<MenuTrigger>
  <MenuButton>View</MenuButton>
  <MenuPopover>
    <Menu
      selectionMode="single"
      selectedKeys={selected}
      onSelectionChange={setSelected}
    >
      <MenuItem id="list">List View</MenuItem>
      <MenuItem id="grid">Grid View</MenuItem>
      <MenuItem id="board">Board View</MenuItem>
    </Menu>
  </MenuPopover>
</MenuTrigger>
```

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

### Basic Tabs Example

Source: https://github.com/zaichaopan/react-aria-components-tailwind-starter/blob/master/stories/Tabs.mdx

Demonstrates the fundamental usage of the Tabs component for organizing content into navigable sections.

```javascript
import { Meta, Canvas } from '@storybook/addon-docs/blocks';

import * as TabsStories from './Tabs.stories';

<Meta of={TabsStories} />

# Tabs

<a href="https://react-spectrum.adobe.com/react-aria/Tabs.html#tabs" target="_blank">**Tabs**</a> organize content into multiple sections and allow users to navigate between them.

<Canvas of={TabsStories.BasicExample} />
```

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

### Basic Date Picker Example

Source: https://github.com/zaichaopan/react-aria-components-tailwind-starter/blob/master/stories/DatePicker.mdx

Demonstrates the fundamental usage of the DatePicker component. Ensure React Aria and Tailwind CSS are set up.

```jsx
import {
  DatePicker,
  DateRangePicker,
} from 'react-aria-components';

import {
  Button,
  Dialog,
  FieldError,
  Group,
  Heading,
  Input,
  Label,
  Popover,
  RangeCalendar,
  Text,
} from 'react-aria-components';

import {
  CalendarIcon,
  ChevronLeftIcon,
  ChevronRightIcon,
} from '@radix-ui/react-icons';

import { tv } from 'tailwind-variants';

const datePicker = tv({
  slots: {
    base: 'flex flex-col gap-1',
    label: 'text-sm font-medium text-zinc-700 dark:text-zinc-300',
    field: 'group relative flex items-center rounded-lg border border-zinc-300 bg-white shadow-sm focus-within:border-blue-500 focus-within:ring-2 focus-within:ring-blue-500 dark:border-zinc-700 dark:bg-zinc-800 dark:focus-within:border-blue-500',
    input: 'flex-1 px-2 py-1.5 text-sm placeholder-shown:text-zinc-500 focus:outline-none dark:bg-transparent',
    icon: 'ml-2 h-4 w-4 text-zinc-500 dark:text-zinc-400',
    button: 'rounded-lg p-1 text-zinc-500 transition hover:bg-zinc-100 dark:hover:bg-zinc-700',
    dialog: 'absolute z-10 mt-2',
    heading: 'flex items-center justify-between px-3 py-2',
    content: 'px-3 py-2',
    grid: 'grid gap-1',
    cell: 'rounded-lg w-9 h-9 flex items-center justify-center text-sm font-normal ring-0 outline-none data-[outside-month]:text-zinc-400 data-[today]:bg-blue-100 dark:data-[today]:bg-blue-700 data-[selected]:bg-blue-500 data-[selected]:text-white dark:data-[selected]:bg-blue-500 dark:data-[selected]:text-white data-[focused]:bg-blue-200 dark:data-[focused]:bg-blue-700',
    week: 'grid grid-cols-7 gap-px',
    weekday: 'text-xs font-medium text-zinc-500 dark:text-zinc-400',
    calendar: 'p-3',
    rangeCalendar: 'p-3',
    errorMessage: 'text-sm text-red-500 dark:text-red-400',
  },
  variants: {
    isInvalid: {
      true: {
        field: 'border-red-500 focus-within:border-red-500 focus-within:ring-red-500',
      },
    },
    isDisabled: {
      true: {
        field: 'bg-zinc-100 dark:bg-zinc-700',
        input: 'text-zinc-400 dark:text-zinc-400',
      },
    },
  },
});

export function DatePickerExample(props: {
  label: string;
  description?: string;
  errorMessage?: string;
}) {
  const { label, description, errorMessage } = props;
  const { base, field, input, icon, button, dialog, heading, content, grid, cell, week, weekday, calendar, rangeCalendar, errorMessage: errorMessageClass } = datePicker();

  return (
    <DatePicker {...props} className={base()}>
      <Label className={datePicker().label()}>{label}</Label>
      <Group
        className={field({ isInvalid: !!errorMessage })}
        elementType="button"
      >
        <Input className={input()} placeholder="Date" />
        <Button className={button()} slot="trigger">
          <CalendarIcon className={icon()} />
        </Button>
      </Group>
      {description && <Text slot="description" className={datePicker().description()}>{description}</Text>}
      {errorMessage && <FieldError className={errorMessageClass()}>{errorMessage}</FieldError>}
      <Popover className={dialog()}>
        <Heading className={heading()}>
          <Button slot="previous" className={button()}>
            <ChevronLeftIcon className={icon()} />
          </Button>
          <Text slot="title"></Text>
          <Button slot="next" className={button()}>
            <ChevronRightIcon className={icon()} />
          </Button>
        </Heading>
        <Content className={content()}>
          <RangeCalendar className={rangeCalendar()}>
            <Week className={week()}>
              {(weekDay) => (
                <Weekday className={weekday()}>{weekDay}</Weekday>
              )}
            </Week>
            <Content className={grid()}>
              {(date) => (
                <Cell className={cell()}>{date.day}</Cell>
              )}
            </Content>
          </RangeCalendar>
        </Content>
      </Popover>
    </DatePicker>
  );
}

export function DateRangePickerExample(props: {
  label: string;
  description?: string;
  errorMessage?: string;
}) {
  const { label, description, errorMessage } = props;
  const { base, field, input, icon, button, dialog, heading, content, grid, cell, week, weekday, calendar, rangeCalendar, errorMessage: errorMessageClass } = datePicker();

  return (
    <DateRangePicker {...props} className={base()}>
      <Label className={datePicker().label()}>{label}</Label>
      <Group
        className={field({ isInvalid: !!errorMessage })}
        elementType="button"
      >
        <Input className={input()} placeholder="Date range" />
        <Button className={button()} slot="trigger">
          <CalendarIcon className={icon()} />
        </Button>
      </Group>
      {description && <Text slot="description" className={datePicker().description()}>{description}</Text>}
      {errorMessage && <FieldError className={errorMessageClass()}>{errorMessage}</FieldError>}
      <Popover className={dialog()}>
        <Heading className={heading()}>
          <Button slot="previous" className={button()}>
            <ChevronLeftIcon className={icon()} />
          </Button>
          <Text slot="title"></Text>
          <Button slot="next" className={button()}>
            <ChevronRightIcon className={icon()} />
          </Button>
        </Heading>
        <Content className={content()}>
          <RangeCalendar className={rangeCalendar()}>
            <Week className={week()}>
              {(weekDay) => (
                <Weekday className={weekday()}>{weekDay}</Weekday>
              )}
            </Week>
            <Content className={grid()}>
              {(date) => (
                <Cell className={cell()}>{date.day}</Cell>
              )}
            </Content>
          </RangeCalendar>
        </Content>
      </Popover>
    </DateRangePicker>
  );
}

```

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

### Tabs with Icons Example

Source: https://github.com/zaichaopan/react-aria-components-tailwind-starter/blob/master/stories/Tabs.mdx

Shows how to integrate icons within the Tabs component for enhanced visual representation.

```javascript
<Canvas of={TabsStories.TabWithIcons} />
```

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

### Vertical Orientation Tabs Example

Source: https://github.com/zaichaopan/react-aria-components-tailwind-starter/blob/master/stories/Tabs.mdx

Illustrates the implementation of Tabs in a vertical layout, suitable for sidebars or compact interfaces.

```javascript
<Canvas of={TabsStories.VerticalOrientation} />
```

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

### Segment Tabs with Icons Example

Source: https://github.com/zaichaopan/react-aria-components-tailwind-starter/blob/master/stories/Tabs.mdx

Illustrates Segment Tabs incorporating icons for improved clarity and user experience.

```javascript
<Canvas of={TabsStories.SegmentTabWithIcons} />
```

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

### Month and Year Picker Example

Source: https://github.com/zaichaopan/react-aria-components-tailwind-starter/blob/master/stories/DatePicker.mdx

Shows how to configure the DatePicker to allow selection of only the month and year. This is useful for scenarios where the specific day is not required.

```jsx
import {
  DatePicker,
  DateRangePicker,
} from 'react-aria-components';

import {
  Button,
  Dialog,
  FieldError,
  Group,
  Heading,
  Input,
  Label,
  Popover,
  RangeCalendar,
  Text,
} from 'react-aria-components';

import {
  CalendarIcon,
  ChevronLeftIcon,
  ChevronRightIcon,
} from '@radix-ui/react-icons';

import { tv } from 'tailwind-variants';

const datePicker = tv({
  slots: {
    base: 'flex flex-col gap-1',
    label: 'text-sm font-medium text-zinc-700 dark:text-zinc-300',
    field: 'group relative flex items-center rounded-lg border border-zinc-300 bg-white shadow-sm focus-within:border-blue-500 focus-within:ring-2 focus-within:ring-blue-500 dark:border-zinc-700 dark:bg-zinc-800 dark:focus-within:border-blue-500',
    input: 'flex-1 px-2 py-1.5 text-sm placeholder-shown:text-zinc-500 focus:outline-none dark:bg-transparent',
    icon: 'ml-2 h-4 w-4 text-zinc-500 dark:text-zinc-400',
    button: 'rounded-lg p-1 text-zinc-500 transition hover:bg-zinc-100 dark:hover:bg-zinc-700',
    dialog: 'absolute z-10 mt-2',
    heading: 'flex items-center justify-between px-3 py-2',
    content: 'px-3 py-2',
    grid: 'grid gap-1',
    cell: 'rounded-lg w-9 h-9 flex items-center justify-center text-sm font-normal ring-0 outline-none data-[outside-month]:text-zinc-400 data-[today]:bg-blue-100 dark:data-[today]:bg-blue-700 data-[selected]:bg-blue-500 data-[selected]:text-white dark:data-[selected]:bg-blue-500 dark:data-[selected]:text-white data-[focused]:bg-blue-200 dark:data-[focused]:bg-zinc-700',
    week: 'grid grid-cols-7 gap-px',
    weekday: 'text-xs font-medium text-zinc-500 dark:text-zinc-400',
    calendar: 'p-3',
    rangeCalendar: 'p-3',
    errorMessage: 'text-sm text-red-500 dark:text-red-400',
  },
  variants: {
    isInvalid: {
      true: {
        field: 'border-red-500 focus-within:border-red-500 focus-within:ring-red-500',
      },
    },
    isDisabled: {
      true: {
        field: 'bg-zinc-100 dark:bg-zinc-700',
        input: 'text-zinc-400 dark:text-zinc-400',
      },
    },
  },
});

export function DatePickerExample(props: {
  label: string;
  description?: string;
  errorMessage?: string;
}) {
  const { label, description, errorMessage } = props;
  const { base, field, input, icon, button, dialog, heading, content, grid, cell, week, weekday, calendar, rangeCalendar, errorMessage: errorMessageClass } = datePicker();

  return (
    <DatePicker {...props} className={base()}>
      <Label className={datePicker().label()}>{label}</Label>
      <Group
        className={field({ isInvalid: !!errorMessage })}
        elementType="button"
      >
        <Input className={input()} placeholder="Date" />
        <Button className={button()} slot="trigger">
          <CalendarIcon className={icon()} />
        </Button>
      </Group>
      {description && <Text slot="description" className={datePicker().description()}>{description}</Text>}
      {errorMessage && <FieldError className={errorMessageClass()}>{errorMessage}</FieldError>}
      <Popover className={dialog()}>
        <Heading className={heading()}>
          <Button slot="previous" className={button()}>
            <ChevronLeftIcon className={icon()} />
          </Button>
          <Text slot="title"></Text>
          <Button slot="next" className={button()}>
            <ChevronRightIcon className={icon()} />
          </Button>
        </Heading>
        <Content className={content()}>
          <RangeCalendar className={rangeCalendar()}>
            <Week className={week()}>
              {(weekDay) => (
                <Weekday className={weekday()}>{weekDay}</Weekday>
              )}
            </Week>
            <Content className={grid()}>
              {(date) => (
                <Cell className={cell()}>{date.day}</Cell>
              )}
            </Content>
          </RangeCalendar>
        </Content>
      </Popover>
    </DatePicker>
  );
}

export function DateRangePickerExample(props: {
  label: string;
  description?: string;
  errorMessage?: string;
}) {
  const { label, description, errorMessage } = props;
  const { base, field, input, icon, button, dialog, heading, content, grid, cell, week, weekday, calendar, rangeCalendar, errorMessage: errorMessageClass } = datePicker();

  return (
    <DateRangePicker {...props} className={base()}>
      <Label className={datePicker().label()}>{label}</Label>
      <Group
        className={field({ isInvalid: !!errorMessage })}
        elementType="button"
      >
        <Input className={input()} placeholder="Date range" />
        <Button className={button()} slot="trigger">
          <CalendarIcon className={icon()} />
        </Button>
      </Group>
      {description && <Text slot="description" className={datePicker().description()}>{description}</Text>}
      {errorMessage && <FieldError className={errorMessageClass()}>{errorMessage}</FieldError>}
      <Popover className={dialog()}>
        <Heading className={heading()}>
          <Button slot="previous" className={button()}>
            <ChevronLeftIcon className={icon()} />
          </Button>
          <Text slot="title"></Text>
          <Button slot="next" className={button()}>
            <ChevronRightIcon className={icon()} />
          </Button>
        </Heading>
        <Content className={content()}>
          <RangeCalendar className={rangeCalendar()}>
            <Week className={week()}>
              {(weekDay) => (
                <Weekday className={weekday()}>{weekDay}</Weekday>
              )}
            </Week>
            <Content className={grid()}>
              {(date) => (
                <Cell className={cell()}>{date.day}</Cell>
              )}
            </Content>
          </RangeCalendar>
        </Content>
      </Popover>
    </DateRangePicker>
  );
}

```

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

### Implement DatePicker Components

Source: https://context7.com/zaichaopan/react-aria-components-tailwind-starter/llms.txt

Examples of basic input, button-triggered, controlled, and year-range restricted date pickers.

```tsx
import { DatePicker, DatePickerInput, DatePickerButton } from './date-picker';
import { Label, FieldError } from './field';
import { parseDate } from '@internationalized/date';

// Basic date picker with input
<DatePicker>
  <Label>Date of Birth</Label>
  <DatePickerInput />
  <FieldError />
</DatePicker>

// Date picker with button trigger
<DatePicker>
  <Label>Event Date</Label>
  <DatePickerButton>Select a date</DatePickerButton>
</DatePicker>

// Controlled date picker
const [date, setDate] = useState(parseDate('2024-01-15'));
<DatePicker value={date} onChange={setDate}>
  <Label>Start Date</Label>
  <DatePickerInput />
</DatePicker>

// Date picker with year range
<DatePicker>
  <Label>Birth Date</Label>
  <DatePickerInput yearRange={{ start: 1900, end: 2024 }} />
</DatePicker>
```

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

### Basic Heading Example

Source: https://github.com/zaichaopan/react-aria-components-tailwind-starter/blob/master/stories/Heading.mdx

Demonstrates the basic usage of the Heading component. Use the `level` prop to set the heading level, defaulting to 1.

```jsx
import { Heading } from "@/components/ui/heading";

<Heading>This is a heading</Heading>
<Heading level={2}>This is an h2</Heading>
<Heading displayLevel={3}>This is an h3 displayed as h1</Heading>
```

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

### Segment Tabs Example

Source: https://github.com/zaichaopan/react-aria-components-tailwind-starter/blob/master/stories/Tabs.mdx

Introduces Segment Tabs, a variation that uses segmented controls for navigation.

```javascript
<Canvas of={TabsStories.SegmentTabs} />
```

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

### Implement Checkbox Components

Source: https://context7.com/zaichaopan/react-aria-components-tailwind-starter/llms.txt

Examples of basic, described, card-variant, and controlled checkbox implementations.

```tsx
import {
  CheckboxGroup,
  Checkboxes,
  Checkbox,
  CheckboxField
} from './checkbox';
import { Label, Description } from './field';

// Basic checkbox group
<CheckboxGroup>
  <Label>Notifications</Label>
  <Checkboxes>
    <Checkbox value="email">Email notifications</Checkbox>
    <Checkbox value="sms">SMS notifications</Checkbox>
    <Checkbox value="push">Push notifications</Checkbox>
  </Checkboxes>
</CheckboxGroup>

// Checkbox with description
<CheckboxField>
  <Checkbox>
    <Label>Marketing emails</Label>
    <Description>
      Receive emails about new products and features.
    </Description>
  </Checkbox>
</CheckboxField>

// Card variant checkbox group
<CheckboxGroup variant="card" orientation="horizontal">
  <Label>Select plan features</Label>
  <Checkboxes>
    <Checkbox value="analytics">
      <Icon><ChartIcon /></Icon>
      Analytics
    </Checkbox>
    <Checkbox value="reports">
      <Icon><ReportIcon /></Icon>
      Reports
    </Checkbox>
  </Checkboxes>
</CheckboxGroup>

// Controlled checkbox
const [isChecked, setIsChecked] = useState(false);
<Checkbox isSelected={isChecked} onChange={setIsChecked}>
  Accept terms and conditions
</Checkbox>
```

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

### Implement RadioGroup Components

Source: https://context7.com/zaichaopan/react-aria-components-tailwind-starter/llms.txt

Examples of basic, described, segment-variant, and card-variant radio groups.

```tsx
import { RadioGroup, Radios, Radio, RadioField } from './radio-group';
import { Label, Description } from './field';

// Basic radio group
<RadioGroup>
  <Label>Shipping method</Label>
  <Radios>
    <Radio value="standard">Standard (5-7 days)</Radio>
    <Radio value="express">Express (2-3 days)</Radio>
    <Radio value="overnight">Overnight</Radio>
  </Radios>
</RadioGroup>

// Radio with description
<RadioGroup>
  <Label>Plan</Label>
  <Radios>
    <RadioField>
      <Radio value="free">Free</Radio>
      <Description>Up to 5 projects</Description>
    </RadioField>
    <RadioField>
      <Radio value="pro">Pro - $10/month</Radio>
      <Description>Unlimited projects</Description>
    </RadioField>
  </Radios>
</RadioGroup>

// Segment variant (like iOS segmented control)
<RadioGroup variant="segment" orientation="horizontal">
  <Label>View</Label>
  <Radios>
    <Radio value="list">List</Radio>
    <Radio value="grid">Grid</Radio>
    <Radio value="board">Board</Radio>
  </Radios>
</RadioGroup>

// Card variant
<RadioGroup variant="card" orientation="horizontal">
  <Label>Select size</Label>
  <Radios>
    <Radio value="sm">Small</Radio>
    <Radio value="md">Medium</Radio>
    <Radio value="lg">Large</Radio>
  </Radios>
</RadioGroup>
```

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

### Mobile Friendly Tabs Example

Source: https://github.com/zaichaopan/react-aria-components-tailwind-starter/blob/master/stories/Tabs.mdx

Provides a responsive Tabs component that supports scrolling on mobile devices or can display a selector.

```javascript
### Mobile friendly tabs

You can scroll tablist on mobile. If this is not what you want, you can show a selector on mobile. Please resize the screen to test.

<Canvas of={TabsStories.MobilFriendlyTabs} />
```

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

### Pill Tabs Example

Source: https://github.com/zaichaopan/react-aria-components-tailwind-starter/blob/master/stories/Tabs.mdx

Presents a 'pill' style for Tabs, offering a distinct visual appearance for navigation elements.

```javascript
<Canvas of={TabsStories.PillTabs} />
```

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

### Import Storybook Meta and Canvas

Source: https://github.com/zaichaopan/react-aria-components-tailwind-starter/blob/master/stories/Icon.mdx

Imports necessary components from Storybook for documentation and displaying examples. This is boilerplate for Storybook stories.

```javascript
import { Meta, Canvas } from '@storybook/addon-docs/blocks';

import * as IconStories from './Icon.stories';

<Meta of={IconStories} />
```

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

### Pagination Component Storybook Integration

Source: https://github.com/zaichaopan/react-aria-components-tailwind-starter/blob/master/stories/Pagination.mdx

Imports the Pagination stories and renders the basic example using the Canvas component.

```jsx
import { Meta, Canvas } from '@storybook/addon-docs/blocks';

import * as PaginationStories from './Pagination.stories';

<Meta of={PaginationStories} />

# Pagination

<Canvas of={PaginationStories.BasicExample} />
```

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

### Complete Form Example

Source: https://context7.com/zaichaopan/react-aria-components-tailwind-starter/llms.txt

An accessible form using `Form` and field components like `TextField`, `Label`, `Input`, `TextArea`, `Description`, and `FieldError`. Includes basic validation (`isRequired`) and a submit button.

```tsx
import { Form } from './form';
import {
  TextField,
  Label,
  Input,
  TextArea,
  Description,
  FieldError
} from './field';

// Complete form example
<Form onSubmit={handleSubmit}>
  <TextField isRequired>
    <Label>Email</Label>
    <Input type="email" placeholder="Enter your email" />
    <Description>We'll never share your email.</Description>
    <FieldError />
  </TextField>

  <TextField isRequired>
    <Label hint="required">Password</Label>
    <Input type="password" />
    <FieldError />
  </TextField>

  <TextField>
    <Label hint="optional">Bio</Label>
    <TextArea rows={4} placeholder="Tell us about yourself" />
  </TextField>

  <Button type="submit">Submit</Button>
</Form>
```

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

### Vertical Pill Tabs with Accent Background Example

Source: https://github.com/zaichaopan/react-aria-components-tailwind-starter/blob/master/stories/Tabs.mdx

Demonstrates vertical pill tabs with an applied accent background for emphasis.

```javascript
<Canvas of={TabsStories.VerticalPillTabsWithAccentBackground} />
```

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

### Vertical Pill Tabs Example

Source: https://github.com/zaichaopan/react-aria-components-tailwind-starter/blob/master/stories/Tabs.mdx

Combines the 'pill' style with a vertical orientation for Tabs.

```javascript
<Canvas of={TabsStories.VerticalPillTabs} />
```

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

### Vertical Pill Tabs with Accent Color Example

Source: https://github.com/zaichaopan/react-aria-components-tailwind-starter/blob/master/stories/Tabs.mdx

Shows vertical pill tabs styled with a specific accent color.

```javascript
<Canvas of={TabsStories.VerticalPillTabsWithAccentColor} />
```

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

### Single Selection with Icon, Description, and Shortcut

Source: https://github.com/zaichaopan/react-aria-components-tailwind-starter/blob/master/stories/Menu.mdx

Demonstrates single selection menu items with icons, descriptions, and shortcut hints.

```jsx
import { Menu, MenuItem, MenuTrigger, MenuPopover } from 'react-aria-components';
import { Button } from './Button';
import {Icon} from './Icon';

<MenuTrigger>
  <Button variant="outline">Select One</Button>
  <MenuPopover>
    <Menu sectionMode="single" defaultSelectedKey="open">
      <MenuItem id="new">
        <Icon slot="start">new</Icon>
        New
        <div slot="description">Create a new file</div>
        <div slot="end">Ctrl+N</div>
      </MenuItem>
      <MenuItem id="open">
        <Icon slot="start">open</Icon>
        Open
        <div slot="description">Open an existing file</div>
        <div slot="end">Ctrl+O</div>
      </MenuItem>
      <MenuItem id="save">
        <Icon slot="start">save</Icon>
        Save
        <div slot="description">Save the current file</div>
        <div slot="end">Ctrl+S</div>
      </MenuItem>
    </Menu>
  </MenuPopover>
</MenuTrigger>
```

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

### Create Dialog and Modal overlays

Source: https://context7.com/zaichaopan/react-aria-components-tailwind-starter/llms.txt

Shows how to use DialogTrigger, Modal, and various Dialog sub-components to create accessible modals, alerts, and drawers.

```tsx
import { Modal } from './modal';
import {
  Dialog,
  DialogTrigger,
  DialogHeader,
  DialogBody,
  DialogFooter,
  DialogTitle,
  DialogCloseButton
} from './dialog';
import { Button } from './button';

// Basic dialog with trigger
<DialogTrigger>
  <Button>Edit Profile</Button>
  <Modal size="md">
    <Dialog>
      <DialogHeader>Edit Profile</DialogHeader>
      <DialogCloseButton />
      <DialogBody>
        <Text>Make changes to your profile here.</Text>
        <Form id="edit-profile-form">
          <TextField isRequired>
            <Label>Name</Label>
            <Input />
            <FieldError />
          </TextField>
        </Form>
      </DialogBody>
      <DialogFooter>
        <DialogCloseButton>Cancel</DialogCloseButton>
        <Button form="edit-profile-form" type="submit">
          Save Changes
        </Button>
      </DialogFooter>
    </Dialog>
  </Modal>
</DialogTrigger>

// Controlled alert dialog
const [isOpen, setIsOpen] = useState(false);

<Button color="red" onPress={() => setIsOpen(true)}>
  Revoke Access
</Button>
<Modal isOpen={isOpen} onOpenChange={setIsOpen}>
  <Dialog alert>
    <DialogHeader>Revoke Access</DialogHeader>
    <DialogBody>
      Are you sure? This action cannot be undone.
    </DialogBody>
    <DialogFooter>
      <DialogCloseButton>Cancel</DialogCloseButton>
      <Button color="red" onPress={() => setIsOpen(false)}>
        Revoke
      </Button>
    </DialogFooter>
  </Dialog>
</Modal>

// Drawer dialog
<DialogTrigger>
  <Button>Open Drawer</Button>
  <Modal drawer size="sm" placement="right">
    <Dialog>
      <DialogHeader>Settings</DialogHeader>
      <DialogCloseButton />
      <DialogBody>Drawer content here</DialogBody>
    </Dialog>
  </Modal>
</DialogTrigger>

// Modal sizes: 'xs' | 'sm' | 'md' | 'lg' | 'xl' | '2xl' | '3xl' | '4xl' | '5xl' | 'fullWidth'
```

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

### Item with Shortcut Hints and Descriptions

Source: https://github.com/zaichaopan/react-aria-components-tailwind-starter/blob/master/stories/Menu.mdx

Combines shortcut hints and descriptive text for menu items.

```jsx
import { Menu, MenuItem, MenuTrigger, MenuPopover } from 'react-aria-components';
import { Button } from './Button';

<MenuTrigger>
  <Button variant="outline">Menu</Button>
  <MenuPopover>
    <Menu>
      <MenuItem id="new">
        New
        <div slot="description">Create a new file</div>
        <div slot="end">Ctrl+N</div>
      </MenuItem>
      <MenuItem id="open">
        Open
        <div slot="description">Open an existing file</div>
        <div slot="end">Ctrl+O</div>
      </MenuItem>
      <MenuItem id="save">
        Save
        <div slot="description">Save the current file</div>
        <div slot="end">Ctrl+S</div>
      </MenuItem>
    </Menu>
  </MenuPopover>
</MenuTrigger>
```

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

### Command Palette Implementation

Source: https://github.com/zaichaopan/react-aria-components-tailwind-starter/blob/master/stories/Autocomplete.mdx

Displays a command palette interface for quick navigation or command execution.

```jsx
<Canvas of={AutocompleteStories.CommandPalette} />
```

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

### Item with Icon, Shortcut Hints, and Descriptions

Source: https://github.com/zaichaopan/react-aria-components-tailwind-starter/blob/master/stories/Menu.mdx

A comprehensive menu item including an icon, description, and shortcut hint.

```jsx
import { Menu, MenuItem, MenuTrigger, MenuPopover } from 'react-aria-components';
import { Button } from './Button';
import {Icon} from './Icon';

<MenuTrigger>
  <Button variant="outline">Menu</Button>
  <MenuPopover>
    <Menu>
      <MenuItem id="new">
        <Icon slot="start">new</Icon>
        New
        <div slot="description">Create a new file</div>
        <div slot="end">Ctrl+N</div>
      </MenuItem>
      <MenuItem id="open">
        <Icon slot="start">open</Icon>
        Open
        <div slot="description">Open an existing file</div>
        <div slot="end">Ctrl+O</div>
      </MenuItem>
      <MenuItem id="save">
        <Icon slot="start">save</Icon>
        Save
        <div slot="description">Save the current file</div>
        <div slot="end">Ctrl+S</div>
      </MenuItem>
    </Menu>
  </MenuPopover>
</MenuTrigger>
```

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

### Item with Shortcut Hints

Source: https://github.com/zaichaopan/react-aria-components-tailwind-starter/blob/master/stories/Menu.mdx

Adds keyboard shortcut hints to menu items.

```jsx
import { Menu, MenuItem, MenuTrigger, MenuPopover } from 'react-aria-components';
import { Button } from './Button';

<MenuTrigger>
  <Button variant="outline">Menu</Button>
  <MenuPopover>
    <Menu>
      <MenuItem id="new">New<div slot="end">Ctrl+N</div></MenuItem>
      <MenuItem id="open">Open<div slot="end">Ctrl+O</div></MenuItem>
      <MenuItem id="save">Save<div slot="end">Ctrl+S</div></MenuItem>
    </Menu>
  </MenuPopover>
</MenuTrigger>
```

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

### Basic Button Usage

Source: https://github.com/zaichaopan/react-aria-components-tailwind-starter/blob/master/stories/Button.mdx

Displays the default button implementation.

```jsx
<Canvas of={ButtonStories.BasicExample} />
```

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

### Configure Toast Notifications

Source: https://context7.com/zaichaopan/react-aria-components-tailwind-starter/llms.txt

Demonstrates how to register the global toast region and trigger various types of notifications.

```tsx
import { GlobalToastRegion } from './toast/toast-region';
import { toast } from './toast/toast-queue';

// Add GlobalToastRegion to your app root
function App() {
  return (
    <>
      <YourContent />
      <GlobalToastRegion aria-label="Notifications" />
    </>
  );
}

// Show toasts from anywhere
// Info toast
toast.add({
  type: 'info',
  title: 'Update Available',
  description: 'A new version is ready to install.',
}, { timeout: 5000 });

// Success toast
toast.add({
  type: 'success',
  title: 'Payment Successful',
  description: 'Your payment has been processed.',
  dismissable: true,
});

// Error toast
toast.add({
  type: 'error',
  title: 'Upload Failed',
  description: 'Please try again later.',
});

// Warning toast
toast.add({
  type: 'warning',
  title: 'Low Storage',
  description: 'You are running low on storage space.',
});

// Toast positions: 'top-left' | 'top-center' | 'top-right' | 'bottom-left' | 'bottom-center' | 'bottom-right'
toast.add({
  title: 'Notification',
  description: 'This appears in the top right',
  position: 'top-right',
});

// Inline toast with action
toast.add({
  inline: true,
  type: 'success',
  title: 'File uploaded',
  description: 'View your file in the gallery.',
  action: <Button size="sm">View</Button>,
});
```

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

### Initial Fallback

Source: https://github.com/zaichaopan/react-aria-components-tailwind-starter/blob/master/stories/Avatar.mdx

Generates initials from the alt prop when the image source is missing.

```jsx
<Canvas of={AvatarStories.InitialFallbacks} />
```

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

### Notification Badge on Buttons

Source: https://github.com/zaichaopan/react-aria-components-tailwind-starter/blob/master/stories/NotificationBadge.mdx

Integrates notification badges with buttons to indicate status or counts. This example assumes the NotificationBadgeStories.NotificationBadgeOnButtons story is properly defined.

```javascript
<Canvas of={NotificationBadgeStories.NotificationBadgeOnButtons} />
```

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

### Check Icon Placement

Source: https://github.com/zaichaopan/react-aria-components-tailwind-starter/blob/master/stories/Menu.mdx

Demonstrates different placements for the check icon in selection menus.

```jsx
import { Menu, MenuItem, MenuTrigger, MenuPopover } from 'react-aria-components';
import { Button } from './Button';
import { CheckIcon } from './CheckIcon';

<MenuTrigger>
  <Button variant="outline">Check Icon Placement</Button>
  <MenuPopover>
    <Menu sectionMode="multiple" defaultSelectedKeys={['new']}>
      <MenuItem id="new"><CheckIcon slot="start" />New</MenuItem>
      <MenuItem id="open"><CheckIcon slot="end" />Open</MenuItem>
      <MenuItem id="save"><CheckIcon slot="start" />Save</MenuItem>
    </Menu>
  </MenuPopover>
</MenuTrigger>
```

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

### Callout Descriptions

Source: https://github.com/zaichaopan/react-aria-components-tailwind-starter/blob/master/stories/Callout.mdx

Demonstrates the use of descriptions within a callout.

```jsx
<Canvas of={CalloutStories.CalloutDescriptions} />
```

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

### Button Customization

Source: https://github.com/zaichaopan/react-aria-components-tailwind-starter/blob/master/stories/Button.mdx

Demonstrates full style customization using Tailwind CSS classes.

```jsx
<Canvas of={ButtonStories.ButtonCustomization} />
```

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

### Basic Text Usage

Source: https://github.com/zaichaopan/react-aria-components-tailwind-starter/blob/master/stories/Text.mdx

Renders standard text, emphasized text, and links within an interface.

```jsx
<Canvas of={TextStories.BasicExample} />
```

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

### Item as Link

Source: https://github.com/zaichaopan/react-aria-components-tailwind-starter/blob/master/stories/Menu.mdx

Renders a menu item as a hyperlink using the 'href' prop on MenuItem.

```jsx
import { Menu, MenuItem, MenuTrigger, MenuPopover } from 'react-aria-components';
import { Button } from './Button';

<MenuTrigger>
  <Button variant="outline">Menu</Button>
  <MenuPopover>
    <Menu>
      <MenuItem href="/home">Home</MenuItem>
      <MenuItem href="/about">About</MenuItem>
    </Menu>
  </MenuPopover>
</MenuTrigger>
```

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

### Implement Button variants and states in React

Source: https://context7.com/zaichaopan/react-aria-components-tailwind-starter/llms.txt

Demonstrates usage of Button, ButtonGroup, and ToggleButton components with various props for styling, sizing, and state management.

```tsx
import { Button, ButtonGroup, ToggleButton } from './button';
import { Icon } from './icon';
import { TrashIcon } from 'lucide-react';

// Basic buttons with variants
<Button>Submit</Button>
<Button variant="outline">Cancel</Button>
<Button variant="plain">Plain Button</Button>
<Button variant="link">Link Style</Button>

// Button sizes
<Button size="lg">Large</Button>
<Button size="sm">Small</Button>

// Button colors
<Button color="green">Success</Button>
<Button color="red">Delete</Button>

// Icon-only button
<Button isIconOnly color="red">
  <Icon aria-label="Delete">
    <TrashIcon />
  </Icon>
</Button>

// Button with icon
<Button>
  <Icon><CloudUploadIcon /></Icon>
  Deploy
</Button>

// Loading/pending state
<Button isPending={isLoading} pendingLabel="Saving...">
  Save Changes
</Button>

// Disabled with tooltip
<Button
  isDisabled
  allowTooltipOnDisabled
  tooltip="You don't have permission"
>
  Edit
</Button>

// Button groups
<ButtonGroup>
  <Button variant="outline">Oldest</Button>
  <Button variant="outline">Newest</Button>
  <Button variant="outline">Top</Button>
</ButtonGroup>

// Toggle button
const [isSelected, setIsSelected] = useState(false);
<ToggleButton
  isSelected={isSelected}
  onChange={setIsSelected}
  variant={isSelected ? 'solid' : 'outline'}
>
  Pin
</ToggleButton>
```

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

### Storybook Meta Configuration

Source: https://github.com/zaichaopan/react-aria-components-tailwind-starter/blob/master/stories/layouts/Authentication.mdx

Configures Storybook's meta information for authentication stories. Ensure stories are correctly imported.

```javascript
import {Meta, Canvas } from '@storybook/addon-docs/blocks';

import * as AuthenticationStories from './Authentication.stories';

<Meta of={AuthenticationStories} />
```

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

### Open on Input Focus

Source: https://github.com/zaichaopan/react-aria-components-tailwind-starter/blob/master/stories/Combobox.mdx

Combobox configured to automatically open the menu when the input receives focus.

```jsx
<Canvas of={ComboboxStories.OpenOnInputFocus} />
```

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

### Sign Up Storybook Canvas

Source: https://github.com/zaichaopan/react-aria-components-tailwind-starter/blob/master/stories/layouts/Authentication.mdx

Renders the Sign Up component within a Storybook canvas. This is used for visual testing and documentation.

```javascript
<Canvas of={AuthenticationStories.SignUp} />
```

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

### Item with Descriptions

Source: https://github.com/zaichaopan/react-aria-components-tailwind-starter/blob/master/stories/Menu.mdx

Displays menu items with additional descriptive text.

```jsx
import { Menu, MenuItem, MenuTrigger, MenuPopover } from 'react-aria-components';
import { Button } from './Button';

<MenuTrigger>
  <Button variant="outline">Menu</Button>
  <MenuPopover>
    <Menu>
      <MenuItem id="new">New<div slot="description">Create a new file</div></MenuItem>
      <MenuItem id="open">Open<div slot="description">Open an existing file</div></MenuItem>
      <MenuItem id="save">Save<div slot="description">Save the current file</div></MenuItem>
    </Menu>
  </MenuPopover>
</MenuTrigger>
```

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

### Callout Titles

Source: https://github.com/zaichaopan/react-aria-components-tailwind-starter/blob/master/stories/Callout.mdx

Demonstrates the use of titles within a callout.

```jsx
<Canvas of={CalloutStories.CalloutTitles} />
```
Tokens:
Raw