### Install HeroUI dependencies

Source: https://www.heroui.com/docs/react/getting-started/quick-start

Commands to install the required HeroUI styles and React packages using various package managers.

```npm
npm i @heroui/styles @heroui/react
```

```pnpm
pnpm add @heroui/styles @heroui/react
```

```yarn
yarn add @heroui/styles @heroui/react
```

```bun
bun add @heroui/styles @heroui/react
```

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

### JavaScript Navigation Links - Getting Started

Source: https://www.heroui.com/docs/react/migration/dropdown

This JavaScript array contains navigation links for the 'Getting Started' section of the documentation. It includes links to quick start guides, design principles, and specific feature pages like 'llms-txt'.

```javascript
self.__next_f.push([1, "87:[\"/docs/react/getting-started\",\"/docs/react/getting-started/quick-start\",\"/docs/react/getting-started/design-principles\",\"/showcase\",\"https://herouiv3.featurebase.app/roadmap\",\"https://www.figma.com/community/file/1546526812159103429\",\"/docs/react/getting-started/colors\",\"/docs/react/getting-started/theming\",\"/docs/react/getting-started/styling\",\"/docs/react/getting-started/animation\",\"/docs/react/getting-started/composition\",\"/docs/react/getting-started/llms-txt\",\"/docs/react/getting-started/mcp-server\",\"/docs/react/getting-started/agent-skills\",\"/docs/react/getting-started/agents-md\"]"]) 
```

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

### Native Getting Started Navigation Links

Source: https://www.heroui.com/docs/native/components/card

This snippet contains an array of strings representing navigation links for the Native 'Getting Started' section of the documentation. It includes links to quick start guides, design principles, and other foundational topics.

```javascript
self.__next_f.push([
  1,
  "8b:[\"/docs/native/getting-started\",\"/docs/native/getting-started/quick-start\",\"/docs/native/getting-started/design-principles\",\"https://herouinative.featurebase.app/roadmap\",\"https://www.figma.com/community/file/1546526812159103429\",\"/docs/native/getting-started/provider\",\"/docs/native/getting-started/portal\",\"/docs/native/getting-started/colors\",\"/docs/native/getting-started/theming\",\"/docs/native/getting-started/styling\",\"/docs/native/getting-started/animation\",\"/docs/native/getting-started/composition\",\"/docs/native/getting-started/llms-txt\",\"/docs/native/getting-started/mcp-server\",\"/docs/native/getting-started/agent-skills\",\"/docs/native/getting-started/agents-md\"\
])
```

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

### Install HeroUI with bun

Source: https://www.heroui.com/docs/react/getting-started/quick-start

Installs the HeroUI styles and React components using the bun package manager. This command adds the necessary dependencies to your project's `package.json` file.

```bash
bun add @heroui/styles @heroui/react
```

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

### Configuration Example for HeroUI Themes and Plugins

Source: https://www.heroui.com/docs/react/migration/styling

This snippet demonstrates how to configure themes and plugins for the HeroUI library. It shows the basic structure for defining theme colors and plugin arrays. This configuration is typically used in a project's main setup file.

```javascript
plugins: [
]
heroui(
  themes: {
    light: {
      colors: {
        primary: {
          DEFAULT: "#006FEE",
        },
      },
    }
  }
)

```

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

### Install HeroUI Native Dependencies

Source: https://www.heroui.com/docs/native/getting-started/quick-start

Command to install essential React Native libraries and utility packages required for HeroUI Native.

```bash
bun add react-native-reanimated@^4.1.1 react-native-gesture-handler@^2.28.0 react-native-worklets@^0.5.1 react-native-safe-area-context@^5.6.0 react-native-svg@^15.12.1 tailwind-variants@^3.2.2 tailwind-merge@^3.4.0
```

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

### Install HeroUI with yarn

Source: https://www.heroui.com/docs/react/getting-started/quick-start

Installs the HeroUI styles and React components using the yarn package manager. This command adds the necessary dependencies to your project's `package.json` file.

```bash
yarn add @heroui/styles @heroui/react
```

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

### Install HeroUI with npm

Source: https://www.heroui.com/docs/react/getting-started/quick-start

Installs the HeroUI styles and React components using the npm package manager. This command adds the necessary dependencies to your project's `package.json` file.

```bash
npm i @heroui/styles @heroui/react
```

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

### Install HeroUI with pnpm

Source: https://www.heroui.com/docs/react/getting-started/quick-start

Installs the HeroUI styles and React components using the pnpm package manager. This command adds the necessary dependencies to your project's `package.json` file.

```bash
pnpm add @heroui/styles @heroui/react
```

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

### Initialize App Entry Point

Source: https://www.heroui.com/docs/native/getting-started/quick-start

Basic setup for importing HeroUI Native and GestureHandlerRootView in a React Native application.

```javascript
import { GestureHandlerRootView } from 'react-native-gesture-handler';

export default function App() {
  // App initialization logic
}
```

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

### Implement HeroUI component

Source: https://www.heroui.com/docs/react/getting-started/quick-start

Basic example of importing and using a HeroUI Button component within a React application.

```jsx
import { Button } from '@heroui/react';

function App() {
  return (
    <Button>
      My Button
    </Button>
  );
}
```

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

### Avatar Size and Color Migration Example

Source: https://www.heroui.com/docs/react/migration/avatar

Shows a migration example for the Avatar component, demonstrating how to apply `size` and `color` props in v3, corresponding to v2 usage.

```jsx
// v2
// <Avatar size="md" color="primary" src="..." name="John" />

// v3
<Avatar size="md" color="accent">
  <Avatar.Image src="..." alt="John" />
  <Avatar.Fallback>J</Avatar.Fallback>
</Avatar>
```

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

### Install HeroUI Native (npm, pnpm, yarn, bun)

Source: https://www.heroui.com/docs/native/getting-started/quick-start

Installs the core HeroUI Native package using various package managers. Ensure you have the correct package manager installed.

```bash
npm install heroui-native
```

```bash
pnpm add heroui-native
```

```bash
yarn add heroui-native
```

```bash
bun add heroui-native
```

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

### Basic Modal Usage Example (React)

Source: https://www.heroui.com/docs/react/migration/modal

Provides a basic example of how to use the HeroUI Modal component in a React application. It shows how to render a Modal, a Button to trigger it, and a Modal.Backdrop and Modal.Container for structure.

```jsx
<Modal>
  <Button>Open Modal</Button>
  <Modal.Backdrop />
  <Modal.Container />
</Modal>
```

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

### Tooltip Content Configuration Examples (React)

Source: https://www.heroui.com/docs/react/migration/tooltip

Demonstrates how to configure Tooltip content with and without arrows, and with different placements and offsets in v2 and v3 using React.

```jsx
    {/* With arrow */}
    <Tooltip content="I am a tooltip" showArrow>
      <Button>Hover me</Button>
    </Tooltip>
    
    {/* With placement */}
    <Tooltip content="Tooltip" placement="bottom">
      <Button>Hover me</Button>
    </Tooltip>
    
    {/* With offset */}
    <Tooltip content="Tooltip" offset={12}>
      <Button>Hover me</Button>
    </Tooltip>
```

```jsx
    {/* With arrow */}
    <Tooltip delay={0}>
      <Tooltip.Trigger>
        <Button>Hover me</Button>
      </Tooltip.Trigger>
      <Tooltip.Content showArrow>
        <Tooltip.Arrow />
        <p>I am a tooltip</p>
      </Tooltip.Content>
    </Tooltip>
    
    {/* With placement */}
    <Tooltip delay={0}>
      <Tooltip.Trigger>
        <Button>Hover me</Button>
      </Tooltip.Trigger>
      <Tooltip.Content placement="bottom">
        <p>Tooltip</p>
      </Tooltip.Content>
    </Tooltip>
    
    {/* With offset */}
    <Tooltip delay={0}>
      <Tooltip.Trigger>
        <Button>Hover me</Button>
      </Tooltip.Trigger>
      <Tooltip.Content offset={12}>
        <p>Tooltip</p>
      </Tooltip.Content>
    </Tooltip>
```

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

### Custom Fallback Migration Example (with Icon)

Source: https://www.heroui.com/docs/react/migration/avatar

Provides a migration example for custom fallbacks, specifically using an icon. It shows how to transition from v2's `fallback` prop to v3's `<Avatar.Fallback />` component.

```jsx
// v2
// import { Icon } from "@iconify/react";
// 
// <Avatar 
//   src="https://broken-url.com/image.jpg"
//   showFallback
//   fallback={<Icon icon="mdi:account" />} 
// />

// v3
import { Icon } from "@iconify/react";

<Avatar>
  <Avatar.Image 
    src="https://broken-url.com/image.jpg" 
    alt="User"
  />
  <Avatar.Fallback>
    <Icon icon="mdi:account" />
  </Avatar.Fallback>
</Avatar>
```

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

### Migration Examples Section in JavaScript

Source: https://www.heroui.com/docs/react/migration/drawer

This snippet defines a 'Migration Examples' section, likely for demonstrating how to migrate code or data. It includes a heading, an anchor link, and an SVG icon, typical for documentation sections.

```javascript
a6:[\"$\",\"h2\",null,{\"className\":\"flex scroll-m-28 flex-row items-center gap-2\",\"id\":\"migration-examples\",\"children\":[[\"$\",\"a\",null,{\"data-card\":\"\",\"href\":\"#migration-examples\",\"className\":\"peer\",\"children\":\"Migration Examples\"}],[\"$\",\"svg\",null,{\"ref\":\"$undefined\",\"xmlns\":\"http://www.w3.org/2000/svg\",\"width\":24,\"height\":24,\"viewBox\":\"0 0 24 24\",\"fill\":\"none\",\"stroke\":\"currentColor\",\"strokeWidth\":2,\"strokeLinecap\":\"round\",\"strokeLinejoin\":\"round\",\"aria-hidden\":true,\"className\":\"size-3.5 shrink-0 text-fd-muted-foreground opacity-0 transition-opacity peer-hover:opacity-100\",\"children\":[[[\"$\",\"path\",\"1cjeqo\",{\"d\":\"M10 13a5 5 0 0 0 7.54.54l3-3a5 5 0 0 0-7.07-7.07l-1.72 1.71\"}],[\"$\",\"path\",\"19qd67\",{\"d\":\"M14 11a5 5 0 0 0-7.54-.54l-3 3a5 5 0 0 0 7.07 7.07l1.71-1.71\"}]],\"$undefined\" ]}]}]}
```

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

### Install HeroUI Dependencies

Source: https://www.heroui.com/docs/native/getting-started/quick-start

Commands to install the required peer dependencies and utility libraries for HeroUI using package managers. It is recommended to use the exact versions specified to ensure project stability.

```bash
pnpm add react-native-reanimated@^4.1.1 react-native-gesture-handler@^2.28.0 react-native-worklets@^0.5.1 react-native-safe-area-context@^5.6.0 react-native-svg@^15.12.1 tailwind-variants@^3.2.2 tailwind-merge@^3.4.0
```

```bash
yarn add react-native-reanimated@^4.1.1 react-native-gesture-handler@^2.28.0 react-native-worklets@^0.5.1 react-native-safe-area-context@^5.6.0 react-native-svg@^15.12.1 tailwind-variants@^3.2.2 tailwind-merge@^3.4.0
```

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

### HeroUI Card Component Example (JSX)

Source: https://www.heroui.com/docs/react/migration/card

Demonstrates the basic usage of the HeroUI Card component in JSX. It shows how to import and render the Card component, along with an example of passing custom class names for styling.

```jsx
import { Card } from "@heroUI/react";

<Card
  classNames={{
    base: "custom-base",
    header: "custom-header",
  }}
/>
```

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

### Utility Class Migration Example

Source: https://www.heroui.com/docs/react/migration/styling

A code block demonstrating the syntax for HeroUI utility classes. This snippet is intended for use within MDX-based documentation environments.

```html
<div class="mdx-code-block shiki">
  <code>
    <span class="line">
      <span><</span>
    </span>
  </code>
</div>
```

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

### HeroUI Installation (npm, pnpm, yarn, bun)

Source: https://www.heroui.com/docs/react/releases/v3-0-0-beta-6

Commands to install HeroUI v3.0.0-beta.6 using different package managers. This includes installing both the styles and react packages with the beta tag.

```bash
npm i @heroui/styles@beta @heroui/react@beta
```

```bash
pnpm add @heroui/styles@beta @heroui/react@beta
```

```bash
yarn add @heroui/styles@beta @heroui/react@beta
```

```bash
bun add @heroui/styles@beta @heroui/react@beta
```

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

### Implementing HeroUI Input with Description and Validation

Source: https://www.heroui.com/docs/react/migration/input

This snippet shows how to use the HeroUI Input component. It includes examples of adding a description to guide users and configuring validation states with error messages.

```jsx
<Input 
  description="We'll never share your email" 
  label="Email" 
  type="email" 
/>

<Input 
  errorMessage="Please enter a valid email" 
  isInvalid 
  label="Email" 
/>
```

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

### Popover Content Configuration Examples (v2 vs v3)

Source: https://www.heroui.com/docs/react/migration/popover

Demonstrates how to configure Popover content, including arrows and placement, comparing v2 and v3 syntax. v3 offers more granular control with dedicated components.

```jsx
<Popover showArrow>
  <PopoverTrigger><Button>Open</Button></PopoverTrigger>
  <PopoverContent><div>Content</div></PopoverContent>
</Popover>

<Popover placement="top">
  <PopoverTrigger><Button>Open</Button></PopoverTrigger>
  <PopoverContent><div>Content</div></PopoverContent>
</Popover>

<Popover offset={10}>
  <PopoverTrigger><Button>Open</Button></PopoverTrigger>
  <PopoverContent><div>Content</div></PopoverContent>
</Popover>
```

```jsx
<Popover>
  <Button>Open</Button>
  <Popover.Content placement="top">
    <Popover.Dialog>
      <Popover.Arrow />
      <div>Content</div>
    </Popover.Dialog>
  </Popover.Content>
</Popover>

<Popover>
  <Button>Open</Button>
  <Popover.Content offset={10}>
    <Popover.Dialog>
      <div>Content</div>
    </Popover.Dialog>
  </Popover.Content>
</Popover>
```

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

### Starting the HeroUI Migration Server

Source: https://www.heroui.com/docs/react/migration/mcp-server

Instructions on how to initiate the HeroUI migration server after configuring the .vscode/mcp.json file. This action activates the AI assistant for project migration tasks.

```markdown
After adding the configuration, open `.vscode/mcp.json` and click **Start** next to the heroui-migration server.
```

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

### Install HeroUI Packages (bun)

Source: https://www.heroui.com/docs/react/releases/v3-0-0-beta-2

Command to install the beta versions of HeroUI styles and React components using bun. Bun is a fast, all-in-one JavaScript runtime and toolkit.

```bash
bun add @heroui/styles@beta @heroui/react@beta
```

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

### Install HeroUI Packages (npm)

Source: https://www.heroui.com/docs/react/releases/v3-0-0-beta-2

Command to install the beta versions of HeroUI styles and React components using npm. This is the standard way to add HeroUI to a project for testing pre-release features.

```bash
npm i @heroui/styles@beta @heroui/react@beta
```

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

### Configure Table State and Sorting

Source: https://www.heroui.com/docs/react/components/table

Demonstrates how to initialize table state with pagination and sorting, and how to derive a sort descriptor using the useMemo hook.

```javascript
getSortedRowModel();

initialState: {
  pagination: {
    pageSize: PAGE_SIZE
  }
};

onSortingChange: setSorting,
state: {sorting},
});

const sortDescriptor = useMemo(() => toSortDescriptor(sorting), [sorting]);

const {pageIndex} = table.getState().pagination;
const pageCount = ...
```

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

### Wrap App with HeroUINativeProvider and GestureHandlerRootView

Source: https://www.heroui.com/docs/native/getting-started/quick-start

This snippet demonstrates how to correctly wrap your React Native application with `HeroUINativeProvider` and `GestureHandlerRootView`. This setup is crucial for the proper functioning of HeroUI Native components and gesture handling. Ensure `react-native-gesture-handler` is installed.

```javascript
import { HeroUINativeProvider } from 'heroui-native';
import { GestureHandlerRootView } from 'react-native-gesture-handler';

export default function App() {
  return (
    <GestureHandlerRootView style={{ flex: 1 }}>
      <HeroUINativeProvider>{/* Your app content */}</HeroUINativeProvider>
    </GestureHandlerRootView>
  );
}
```

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

### Install HeroUI using curl

Source: https://www.heroui.com/docs/native/getting-started/agent-skills

This snippet shows how to install HeroUI using the curl command. It pipes the output to bash for execution. Ensure you have curl and bash installed.

```shell
curl -fsSL https://v3.heroui.com/install | bash -s
```

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

### Use a HeroUI Native Button Component

Source: https://www.heroui.com/docs/native/getting-started/quick-start

This example shows how to import and use the `Button` component from `heroui-native` within a React Native application. It includes basic styling and an `onPress` handler. This requires the `heroui-native` library to be installed and configured.

```javascript
import { Button } from 'heroui-native';
import { View } from 'react-native';

export default function MyComponent() {
  return (
    <View className="flex-1 justify-center items-center bg-background">
      <Button onPress={() => console.log('Pressed!')}>Get Started</Button>
    </View>
  );
}
```

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

### Navigation Links for React Documentation

Source: https://www.heroui.com/docs/react/getting-started/llms-txt

This snippet defines an array of navigation links used in the React documentation. It includes links to getting started guides, components, releases, and migration information. These links are crucial for organizing and accessing different sections of the documentation.

```javascript
self.__next_f.push([1,"87:[\"/docs/react/getting-started\",\"/docs/react/getting-started/quick-start\",\"/docs/react/getting-started/design-principles\",\"/showcase\",\"https://herouiv3.featurebase.app/roadmap\",\"https://www.figma.com/community/file/1546526812159103429\",\"/docs/react/getting-started/colors\",\"/docs/react/getting-started/theming\",\"/docs/react/getting-started/styling\",\"/docs/react/getting-started/animation\",\"/docs/react/getting-started/composition\",\"/docs/react/getting-started/llms-txt\",\"/docs/react/getting-started/mcp-server\",\"/docs/react/getting-started/agent-skills\",\"/docs/react/getting-started/agents-md\"]\n")
```

```javascript
self.__next_f.push([1,"88:[\"/docs/react/components\",\"/docs/react/components/accordion\",\"/docs/react/components/alert\",\"/docs/react/components/alert-dialog\",\"/docs/react/components/autocomplete\",\"/docs/react/components/avatar\",\"/docs/react/components/badge\",\"/docs/react/components/breadcrumbs\",\"/docs/react/components/button\",\"/docs/react/components/button-group\",\"/docs/react/components/calendar\",\"/docs/react/components/card\",\"/docs/react/components/checkbox\",\"/docs/react/components/checkbox-group\",\"/docs/react/components/chip\",\"/docs/react/components/close-button\",\"/docs/react/components/color-area\",\"/docs/react/components/color-field\",\"/docs/react/components/color-slider\",\"/docs/react/components/color-swatch\",\"/docs/react/components/color-swatch-picker\",\"/docs/react/components/color-picker\",\"/docs/react/components/combo-box\",\"/docs/react/components/date-field\",\"/docs/react/components/date-picker\",\"/docs/react/components/date-range-picker\",\"/docs/react/components/description\",\"/docs/react/components/disclosure\",\"/docs/react/components/disclosure-group\",\"/docs/react/components/drawer\",\"/docs/react/components/dropdown\",\"/docs/react/components/error-message\",\"/docs/react/components/field-error\",\"/docs/react/components/fieldset\",\"/docs/react/components/form\",\"/docs/react/components/input\",\"/docs/react/components/input-group\",\"/docs/react/components/input-otp\",\"/docs/react/components/kbd\",\"/docs/react/components/label\",\"/docs/react/components/link\",\"/docs/react/components/list-box\",\"/docs/react/components/meter\",\"/docs/react/components/modal\",\"/docs/react/components/number-field\",\"/docs/react/components/pagination\",\"/docs/react/components/popover\",\"/docs/react/components/progress-bar\",\"/docs/react/components/progress-circle\",\"/docs/react/components/radio-group\",\"/docs/react/components/range-calendar\",\"/docs/react/components/scroll-shadow\",\"/docs/react/components/search-field\",\"/docs/react/components/select\",\"/docs/react/components/separator\",\"/docs/react/components/skeleton\",\"/docs/react/components/slider\",\"/docs/react/components/spinner\",\"/docs/react/components/surface\",\"/docs/react/components/switch\",\"/docs/react/components/table\",\"/docs/react/components/tabs\",\"/docs/react/components/tag-group\",\"/docs/react/components/text-field\",\"/docs/react/components/text-area\",\"/docs/react/components/time-field\",\"/docs/react/components/toast\",\"/docs/react/components/toolbar\",\"/docs/react/components/toggle-button\",\"/docs/react/components/toggle-button-group\",\"/docs/react/components/tooltip\"]\n")
```

```javascript
self.__next_f.push([1,"89:[\"/docs/react/releases\",\"/docs/react/releases/v3-0-0\",\"/docs/react/releases/v3-0-0-rc-1\",\"/docs/react/releases/v3-0-0-beta-8\",\"/docs/react/releases/v3-0-0-beta-7\",\"/docs/react/releases/v3-0-0-beta-6\",\"/docs/react/releases#v300-beta5\",\"/docs/react/releases/v3-0-0-beta-4\",\"/docs/react/releases/v3-0-0-beta-3\",\"/docs/react/releases/v3-0-0-beta-2\",\"/docs/react/releases/v3-0-0-beta-1\",\"/docs/react/releases/v3-0-0-alpha-35\",\"/docs/react/releases/v3-0-0-alpha-34\",\"/docs/react/releases/v3-0-0-alpha-33\",\"/docs/react/releases/v3-0-0-alpha-32\"]\n")
```

```javascript
self.__next_f.push([1,"8a:[\"/docs/react/migration\",\"/docs/react/migration/mcp-server\",\"/docs/react/migration/agent-skills\"]\n")
```

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

### AlertDialog Example (React)

Source: https://www.heroui.com/docs/react/releases/v3-0-0-beta-2

A basic example of using the AlertDialog component from HeroUI React. It demonstrates how to import and render the AlertDialog and a Button, typically used to trigger the dialog.

```jsx
"use client";
    
    import {AlertDialog, Button} from "@heroui/react";
    
    export function Default() {

```

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

### Run Lint Command Examples

Source: https://www.heroui.com/docs/react/migration/agent-guide-full

These commands are used to check code quality and identify potential issues during the styling migration. They help maintain code standards and catch errors.

```bash
eslint
```

```bash
biome check
```

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

### ComboBox InputGroup and Input Example (React)

Source: https://www.heroui.com/docs/react/releases/v3-0-0-beta-2

This snippet illustrates the structure of a ComboBox component, specifically focusing on its InputGroup and Input elements. It includes an example of a placeholder for searching animals.

```jsx
<ComboBox.InputGroup>
  <Input placeholder="Search animals..." />
</ComboBox.InputGroup>
<ComboBox.Trigger />
```

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

### Example AI Assistant Queries for HeroUI Migration

Source: https://www.heroui.com/docs/react/migration/mcp-server

A list of example questions to ask the AI assistant for assistance with migrating HeroUI components from version 2 to version 3. These queries cover various aspects of the migration process.

```markdown
Once configured, ask your AI assistant questions like:
* "Help me migrate Button from HeroUI v2 to v3"
* "Get the full migration workflow for my project"
* "What are the Checkbox migration changes?"
* "Show me the migration guide for Card and Modal"
* "Get the styling migration guide"
```

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

### Install HeroUI dependencies

Source: https://www.heroui.com/docs/react/releases/v3-0-0-beta-6

Commands to install the core HeroUI packages using different package managers. These commands add the required styles and react components to your project.

```bash
npm i @heroui/styles@beta @heroui/react@beta
```

```bash
pnpm add @heroui/styles@beta @heroui/react@beta
```

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

### JavaScript: Calculate Start Index

Source: https://www.heroui.com/docs/react/components/table

This code calculates the starting index for a given page in a paginated list. It multiplies the current `pageIndex` by the `PAGE_SIZE` and adds 1 to get the correct starting position, assuming a 1-based index for pages.

```javascript
const start = pageIndex * PAGE_SIZE + 1;
```

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

### TagGroup Component Example

Source: https://www.heroui.com/docs/react/releases/v3-0-0-beta-3

Demonstrates the TagGroup component, which provides a focusable list of tags with support for keyboard navigation, selection, and removal. This example shows how to integrate it with Label and Description components. Requires @heroui/react.

```javascript
"use client";

import type {Key} from "@heroui/react";

import {Description, Label, Tag, TagGroup} from "@heroui/react";

export function Basic() {
  const tags: Key[] = ["News", "Travel"];
  return (
    <TagGroup
      label="Required Categories"
      description="Select at least one category"
      selectedKeys={tags}
    >
      <Tag>News</Tag>
      <Tag>Travel</Tag>
      <Tag>Gaming</Tag>
      <Tag>Shopping</Tag>
    </TagGroup>
  );
}
```

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

### Install HeroUI Packages (pnpm)

Source: https://www.heroui.com/docs/react/releases/v3-0-0-beta-2

Command to install the beta versions of HeroUI styles and React components using pnpm. This package manager is known for its efficiency and speed.

```bash
pnpm add @heroui/styles@beta @heroui/react@beta
```

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

### Full Avatar Implementation Example

Source: https://www.heroui.com/docs/native/components/avatar

A complete example demonstrating how to map over a data array to render multiple Avatars with dynamic initials and styling.

```jsx
import { Avatar } from 'heroui-native';
import { View } from 'react-native';

export default function AvatarExample() {
  const users = [
    { id: 1, image: 'https://example.com/user1.jpg', name: 'John Doe' },
    { id: 2, image: 'https://example.com/user2.jpg', name: 'Jane Smith' },
  ];

  return (
    <View className="flex-row gap-4">
      {users.map((user) => (
        <Avatar key={user.id} size="lg" color="accent">
          <Avatar.Image source={{ uri: user.image }} />
          <Avatar.Fallback>
            {user.name.split(' ').map((n) => n[0]).join('')}
          </Avatar.Fallback>
        </Avatar>
      ))}
    </View>
  );
}
```

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

### HeroUI Button Component Example

Source: https://www.heroui.com/docs/react/releases/v3-0-0-beta-6

Demonstrates the basic usage of the Button component from HeroUI. This example shows how to render a button with specified size, variant, and an onPress event handler that triggers a toast notification.

```javascript
import { Button, toast } from '@heroUI/react';

// ... other imports and setup

<Button
  size="sm"
  variant="secondary"
  onPress={() => toast.info("You have 2 credits left")}
  actionProps={{ children: "Upgrade", onPress: noop }}
  description="Get a paid plan for more credits"
/>
```

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

### ComboBox Example (React)

Source: https://www.heroui.com/docs/react/releases/v3-0-0-beta-2

An example showcasing the ComboBox component from HeroUI React. This snippet illustrates the import of ComboBox, Input, Label, and ListBox, commonly used together for an interactive dropdown selection.

```jsx
"use client";
    
    import {ComboBox, Input, Label, ListBox} from "@heroui/react";
    
    export function Default() {

```

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

### Dropdown Example (React)

Source: https://www.heroui.com/docs/react/releases/v3-0-0-beta-2

A simple example of the Dropdown component in HeroUI React. It shows the import of Dropdown, Button, and Label, which are typically used to create a customizable dropdown menu.

```jsx
"use client";
    
    import {Button, Dropdown, Label} from "@heroui/react";
    
    export function Default() {

```

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

### Install HeroUI Packages (yarn)

Source: https://www.heroui.com/docs/react/releases/v3-0-0-beta-2

Command to install the beta versions of HeroUI styles and React components using yarn. Yarn is another popular package manager for JavaScript projects.

```bash
yarn add @heroui/styles@beta @heroui/react@beta
```

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

### Initialize Toast Provider

Source: https://www.heroui.com/docs/react/releases/v3-0-0-beta-6

Example of initializing the Toast provider component within the application structure.

```jsx
<Toast.Provider />
```

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

### Importing Input Component

Source: https://www.heroui.com/docs/react/migration/input

Demonstrates the basic import syntax for the Input primitive component in HeroUI.

```javascript
import { Input } from "@heroui/react";
```

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

### React Header Component Example

Source: https://www.heroui.com/docs/react/migration/listbox

Provides an example of a React Header component, potentially used for section titles or important information displays. This snippet includes example content like 'Danger zone'.

```jsx
1cf:["$","span",null,{\"className\":\"line\",\"children\":[["$","span",null,{\"style\":{\"--shiki-light\":\"#24292E\",\"--shiki-dark\":\"#E1E4E8\"},\"children\":\" \u003c\"}],["$","span",null,{\"style\":{\"--shiki-light\":\"#005CC5\",\"--shiki-dark\":\"#79B8FF\"},\"children\":\"Header\"}],["$","span",null,{\"style\":{\"--shiki-light\":\"#24292E\",\"--shiki-dark\":\"#E1E4E8\"},\"children\":\"\u003eDanger zone\u003c/\"}],["$","span",null,{\"style\":{\"--shiki-light\":\"#005CC5\",\"--shiki-dark\":\"#79B8FF\"},\"children\":\"Header\"}],["$","span",null,{\"style\":{\"--shiki-light\":\"#24292E\",\"--shiki-dark\":\"#E1E4E8\"},\"children\":\"\u003e\"}]]}]
```

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

### POST /get_component_migration_guides

Source: https://www.heroui.com/docs/react/migration/mcp-server

Retrieves specific migration guides for individual components.

```APIDOC
## POST /get_component_migration_guides

### Description
Get migration guides for specific components to assist with refactoring.

### Method
POST

### Endpoint
/get_component_migration_guides

### Parameters
#### Request Body
- **components** (array) - Required - List of components to migrate (e.g., ["button", "card"]).

### Request Example
{
  "components": ["button", "card"]
}

### Response
#### Success Response (200)
- **guides** (object) - A map of component names to their respective migration instructions.

#### Response Example
{
  "button": "Replace existing button props with HeroUI Button props..."
}
```

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

### v2 useDisclosure Hook API and Example

Source: https://www.heroui.com/docs/react/migration/hooks

Details the API of the `useDisclosure` hook in v2, which manages overlay component state, and provides an example of its usage with a Modal.

```javascript
const {isOpen, onOpen, onClose, onOpenChange, isControlled, getButtonProps, getDisclosureProps} = useDisclosure({
  isOpen?: boolean;
  defaultOpen?: boolean;
  onClose?(): void;
  onOpen?(): void;
  onChange?(isOpen: boolean | undefined): void;
  id?: string;
});
```

```jsx
import { Modal, ModalContent, ModalHeader, ModalBody, ModalFooter, Button, useDisclosure } from "@heroui/react";

export default function App() {
  const {isOpen, onOpen, onOpenChange} = useDisclosure();

  return (
    <>
      <Button onPress={onOpen}>Open Modal</Button>
      <Modal isOpen={isOpen} onOpenChange={onOpenChange}>
        <ModalContent>
          <ModalHeader>Title</ModalHeader>
          <ModalBody>Content</ModalBody>
          <ModalFooter>
            <Button onPress={onOpenChange}>Close</Button>
          </ModalFooter>
        </ModalContent>
      </Modal>
    </>
  );
}
```

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

### SearchField Component Example

Source: https://www.heroui.com/docs/react/releases/v3-0-0-beta-3

Provides an example of the SearchField component, which includes a built-in search icon and clear button. This component is designed for search input and requires the @heroui/react library.

```javascript
import {Label, SearchField} from "@heroui/react";

export function Basic() {
  return (
    <SearchField name="search">
      <Label>Search</Label>
    </SearchField>
  );
}
```

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

### Implement AlertDialog and Modal components

Source: https://www.heroui.com/docs/react/releases/v3-0-0-beta-3

Demonstrates the structural implementation of HeroUI AlertDialog and Modal components. These examples show how to wrap content using Backdrop and Container sub-components with the 'opaque' variant.

```jsx
<AlertDialog.Backdrop backdropVariant="opaque">
  <AlertDialog.Container>
    {/* content */}
  </AlertDialog.Container>
</AlertDialog.Backdrop>

<Modal.Backdrop variant="opaque">
  <Modal.Container>
    {/* content */}
  </Modal.Container>
</Modal.Backdrop>
```

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

### Code Block Implementation

Source: https://www.heroui.com/docs/react/releases/v3-0-0-beta-6

Example of a structured code block component used for displaying documentation snippets.

```javascript
// Before
// Implementation logic goes here
```

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

### Accordion with Subtitle and Start Content (React)

Source: https://www.heroui.com/docs/react/migration/accordion

Demonstrates how to use the Accordion component with a subtitle and a start content element, typically an icon. This functionality is available in both v2 and v3 of the component.

```jsx
import { Icon } from "@iconify/react";

<Accordion>
  <AccordionItem 
    key="1"
    title="Accordion 1"
    subtitle="Press to expand"
    startContent={<Icon icon="gravity-ui:box" />}
  >
    Content here
  </AccordionItem>
</Accordion>
```

```jsx
import { Icon } from "@iconify/react";

<Accordion>
  <Accordion.Item id="1">
    <Accordion.Heading>
      <Accordion.Trigger>
        <Icon icon="gravity-ui:box" className="mr-2" />
        <div className="flex flex-col">
          <span>Accordion 1</span>
          <span className="text-sm text-muted">Press to expand</span>
        </div>
        <Accordion.Indicator />
      </Accordion.Trigger>
    </Accordion.Heading>
    <Accordion.Panel>
      <Accordion.Body>Content here</Accordion.Body>
    </Accordion.Panel>
  </Accordion.Item>
</Accordion>
```

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

### Install v3 Packages with pnpm Aliases

Source: https://www.heroui.com/docs/react/migration/incremental-migration

This snippet demonstrates how to install v3 packages using pnpm aliases. This approach allows for the coexistence of both v2 and v3 versions of the packages within the same project.

```bash
pnpm install @heroui/react@npm:heroui-react-v3
@heroui/button@npm:heroui-button-v3
@heroui/card@npm:heroui-card-v3
```

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

### HeroUI Component Markup Examples

Source: https://www.heroui.com/docs/react/releases/v3-0-0-beta-3

A collection of JSX snippets for HeroUI components including buttons, separators, and icon-only configurations. These snippets illustrate the standard syntax for rendering UI elements in a React-based environment.

```jsx
<TextAlignRight />
<Button />
<Button isIconOnly />
<ButtonGroup.Separator />
<TextAlignJustify />
</Button>
</ButtonGroup>
</div>
```

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

### InputOTP Component Usage Example

Source: https://www.heroui.com/docs/native/components/input-otp

Example demonstrating how to use the InputOTP component. This snippet shows the basic import and invocation of the `useInputOTP` hook, which is essential for managing the OTP input's state and behavior.

```javascript
import { useInputOTP } from "some-library";

// ... inside your component
const { /* ... OTP related states and functions */ } = useInputOTP();
```

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

### Modal Component Structure Example (JSX)

Source: https://www.heroui.com/docs/react/migration/modal

This snippet provides a more complete example of a modal component's structure, combining dialog, header, heading, and body elements.

```jsx
<Modal.Dialog>
  <Modal.Header>
    <Modal.Heading>Title</Modal.Heading>
  </Modal.Header>
  <Modal.Body>
    Content
  </Modal.Body>
</Modal.Dialog>
```

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

### ErrorMessage Component Example

Source: https://www.heroui.com/docs/react/releases/v3-0-0-beta-3

Shows how to use the ErrorMessage component for displaying error messages, particularly in non-form contexts. This example also includes Label and TagGroup components, demonstrating their integration. Requires @heroui/react.

```javascript
"use client";

import type {Key} from "@heroui/react";

import {Description, ErrorMessage, Label, Tag, TagGroup} from "@heroui/react";

export function Basic() {
  const tags: Key[] = ["News", "Travel"];
  return (
    <TagGroup
      label="Required Categories"
      description="Select at least one category"
      errorMessage="Please select at least one category"
      selectedKeys={tags}
    >
      <Tag>News</Tag>
      <Tag>Travel</Tag>
      <Tag>Gaming</Tag>
      <Tag>Shopping</Tag>
    </TagGroup>
  );
}
```

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

### AlertDialog Component Example (React)

Source: https://www.heroui.com/docs/react/releases/v3-0-0-beta-2

This snippet shows the structure of an AlertDialog component, including its backdrop and main content. It's likely part of a larger UI library or framework.

```jsx
<AlertDialog.Backdrop />
<AlertDialog>
  {/* AlertDialog content */}
</AlertDialog>
```

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

### Example LLMs.txt Content for HeroUI

Source: https://www.heroui.com/docs/native/releases/beta-11

This snippet demonstrates the structure and content of an LLMs.txt file designed to help AI assistants understand HeroUI v3 components. It includes component names, descriptions, and usage examples. This file acts as a knowledge base for the AI.

```text
{
  "$id": "root:react/getting-started/(ui-for-agents)/llms-txt.mdx",
  "type": "page",
  "name": "LLMs.txt",
  "description": "Enable AI assistants like Claude, Cursor, and Windsurf to understand HeroUI v3",
  "icon": "$undefined",
  "url": "/docs/react/getting-started/llms-txt",
  "$ref": {
    "file": "react/getting-started/(ui-for-agents)/llms-txt.mdx"
  }
}
```

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

### Informational Text for Code Examples

Source: https://www.heroui.com/docs/native/components/search-field

This snippet provides contextual information for code examples, guiding users to find more resources. It's a simple paragraph element used for supplementary text.

```jsx
b4:[\"$\",\"p\",null,{\"children\":[\"You can find more examples in the \",\"$L13f\",\".\"]}]
```

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

### Import Components from @heroui/react (JavaScript)

Source: https://www.heroui.com/docs/react/releases/v3-0-0-beta-3

This snippet demonstrates importing Tag and TagGroup components from the '@heroui/react' library. Ensure the library is installed before use.

```javascript
import { Tag, TagGroup} from "@heroui/react";
```

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

### Date Input with Start and End Content (React)

Source: https://www.heroui.com/docs/react/migration/dateinput

Shows how to add custom content, such as icons, at the start and end of the DateInput and DateField components. This can be used for visual cues or interactive elements.

```jsx
<DateInput
  endContent={<CalendarIcon />}
  label="Date"
  name="date"
  startContent={<CalendarIcon />}
/>
```

```jsx
<DateField className="w-[256px]" name="date">
  <Label>Date</Label>
  <DateInputGroup>
    <DateInputGroup.Prefix>
      <CalendarIcon />
    </DateInputGroup.Prefix>
    <DateInputGroup.Input>
      {(segment) => <DateInputGroup.Segment segment={segment} />}
    </DateInputGroup.Input>
    <DateInputGroup.Suffix>
      <CalendarIcon />
    </DateInputGroup.Suffix>
  </DateInputGroup>
</DateField>
```

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

### Install v3 Main Package and v2 Component Packages (Strategy B)

Source: https://www.heroui.com/docs/react/migration/incremental-migration

Installs the v3 main package alongside specific v2 component packages. This is part of Strategy B for migration.

```json
{
  "dependencies": {
    "@heroui/react": "latest", // v3
    "@heroui/styles": "latest", // v3
    "@heroui/button": "2.8.6", // v2
    "@heroui/card": "2.8.6", // v2
    // ... other v2 component packages as needed
  }
}
```

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

### Git Rebase and Merge Operation Example

Source: https://www.heroui.com/docs/react/releases/v3-0-0-beta-3

Illustrates the process of rebasing and merging commits from one branch to another. This snippet likely represents a command-line interface or a script demonstrating Git operations. It shows the textual output of such an operation, including commit descriptions and branch names.

```text
23b:["$","span","span-58",{"className":"line","children":[["$","span","span-0",{"style":{"--shiki-light":"#6F42C1","--shiki-dark":"#B392F0"},"children":" textValue"}],["$","span","span-1",{"style":{"--shiki-light":"#D73A49","--shiki-dark":"#F97583"},"children":"="}],["$","span","span-2",{"style":{"--shiki-light":"#032F62","--shiki-dark":"#9ECBFF"},"children":"\\"Rebase and merge\\""}]]}]
23c:["$","span","span-59",{"className":"line","children":["$","span","span-0",{"style":{"--shiki-light":"#24292E","--shiki-dark":"#E1E4E8"},"children":" >"}]}]
23d:["$","span","span-60",{"className":"line","children":[["$","span","span-0",{"style":{"--shiki-light":"#24292E","--shiki-dark":"#E1E4E8"},"children":" <"}],["$","span","span-1",{"style":{"--shiki-light":"#005CC5","--shiki-dark":"#79B8FF"},"children":"Label"}],["$","span","span-2",{"style":{"--shiki-light":"#24292E","--shiki-dark":"#E1E4E8"},"children":">Rebase and merge<"}],["$","span","span-3",{"style":{"--shiki-light":"#005CC5","--shiki-dark":"#79B8FF"},"children":"Label"}],["$","span","span-4",{"style":{"--shiki-light":"#24292E","--shiki-dark":"#E1E4E8"},"children":">"}]]}]
23e:["$","span","span-61",{"className":"line","children":[["$","span","span-0",{"style":{"--shiki-light":"#24292E","--shiki-dark":"#E1E4E8"},"children":" <"}],["$","span","span-1",{"style":{"--shiki-light":"#005CC5","--shiki-dark":"#79B8FF"},"children":"Description"}],["$","span","span-2",{"style":{"--shiki-light":"#24292E","--shiki-dark":"#E1E4E8"},"children":">"}]]}]
23f:["$","span","span-62",{"className":"line","children":["$","span","span-0",{"style":{"--shiki-light":"#24292E","--shiki-dark":"#E1E4E8"},"children":" The 14 commits from this branch will be rebased and added to the base branch"}]}]
240:["$","span","span-63",{"className":"line","children":[["$","span","span-0",{"style":{"--shiki-light":"#24292E","--shiki-dark":"#E1E4E8"},"children":" </"}],["$","span","span-1",{"style":{"--shiki-light":"#005CC5","--shiki-dark":"#79B8FF"},"children":"Description"}],["$","span","span-2",{"style":{"--shiki-light":"#24292E","--shiki-dark":"#E1E4E8"},"children":" >"}]]}]
241:["$","span","span-64",{"className":"line","children":[["$","span","span-0",{"style":{"--shiki-light":"#24292E","--shiki-dark":"#E1E4E8"},"children":" </"}],["$","span","span-1",{"style":{"--shiki-light":"#005CC5","--shiki-dark":"#79B8FF"},"children":"Dropdown.Item"}],["$","span","span-2",{"style":{"--shiki-light":"#24292E","--shiki-dark":"#E1E4E8"},"children":" >"}]]}]
242:["$","span","span-65",{"className":"line","children":[["$","span","span-0",{"style":{"--shiki-light":"#24292E","--shiki-dark":"#E1E4E8"},"children":" </"}],["$","span","span-1",{"style":{"--shiki-light":"#005CC5","--shiki-dark":"#79B8FF"},"children":"Dropdown.Menu"}],["$","span","span-2",{"style":{"--shiki-light":"#24292E","--shiki-dark":"#E1E4E8"},"children":" >"}]]}]
243:["$","span","span-66",{"className":"line","children":[["$","span","span-0",{"style":{"--shiki-light":"#24292E","--shiki-dark":"#E1E4E8"},"children":" </"}],["$","span","span-1",{"style":{"--shiki-light":"#005CC5","--shiki-dark":"#79B8FF"},"children":"Dropdown.Popover"}],["$","span","span-2",{"style":{"--shiki-light":"#24292E","--shiki-dark":"#E1E4E8"},"children":" >"}]]}]
244:["$","span","span-67",{"className":"line","children":[["$","span","span-0",{"style":{"--shiki-light":"#24292E","--shiki-dark":"#E1E4E8"},"children":" </"}],["$","span
```

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

### Migrate CSS Surface Variables

Source: https://www.heroui.com/docs/react/releases/v3-0-0-beta-6

Example showing the transition from deprecated surface variables to updated alternatives. This snippet demonstrates the syntax for applying these variables within a CSS rule.

```css
/* Before */
.element {
  background: var(--color-on-surface);
  color: var(--color-on-surface-foreground);
}
```

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

### ButtonGroup Component Example

Source: https://www.heroui.com/docs/react/releases/v3-0-0-beta-3

Demonstrates the usage of the ButtonGroup component for grouping related buttons with consistent styling. This component is part of the HeroUI library and requires no external dependencies beyond React.

```javascript
import {
  ButtonGroup,
  Button
} from "@heroui/react";

export function Basic() {
  return (
    <ButtonGroup>
      <Button variant="outline">Cancel</Button>
      <Button>Submit</Button>
    </ButtonGroup>
  );
}
```

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

### Initialize HeroUI AGENTS.md via CLI

Source: https://www.heroui.com/docs/react/getting-started/agents-md

Commands to download HeroUI v3 React documentation for AI agents. Users can specify the output file path to integrate documentation into their development environment.

```bash
npx heroui-cli@latest agents-md --react
```

```bash
npx heroui-cli@latest agents-md --react --output AGENTS.md
```

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

### Animated Styles Guide Comments

Source: https://www.heroui.com/docs/native/releases/beta-10

Adds comprehensive comments and documentation to the Animated Styles Guide. Improves understanding and usability of animation features with enhanced code examples and explanations.

```javascript
// Animated Styles Guide Comments Example

// This function demonstrates a fade-in animation.
// It takes a duration and an optional delay.
const fadeIn = (duration = 300, delay = 0) => ({
  opacity: 1,
  transition: `opacity ${duration}ms ease-in-out ${delay}ms`
});

// Usage example within a component:
// const animatedStyle = fadeIn(500, 100);
// <div style={animatedStyle}>Fading In...</div>
```