### Native Getting Started Navigation Links

Source: https://heroui.com/docs/native/getting-started/animation

This snippet contains an array of URLs for the Native getting started documentation, including quick start guides, design principles, and setup instructions. It facilitates navigation within the Native platform's initial setup phase. No external dependencies are required.

```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\"]\n"])
```

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

### Navigation Links for Getting Started in JavaScript

Source: https://heroui.com/docs/react/migration/button-group

This JavaScript array contains a list of URLs related to the 'getting started' section of the documentation. It includes links to general getting started guides, quick start tutorials, design principles, and specific topics like colors, theming, and styling.

```javascript
self.__next_f.push([
  1,
  "/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"
]);
```

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

### Install HeroUI Native Core Packages (npm)

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

Installs the main HeroUI Native package using npm. This is the first step in integrating the UI library into your project.

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

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

### Component Usage Example

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

This example illustrates how to use components within the HeroUI library. It highlights the importance of import order, specifically mentioning that Tailwind CSS should be imported first.

```javascript
// Ensure Tailwind CSS is imported first
// Example usage of a HeroUI component would follow here.
```

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

### Install HeroUI Native dependencies

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

Installs the core peer dependencies required for HeroUI Native functionality, including animation, gesture, and layout context libraries.

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

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

### Granular Exports Example (JavaScript)

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

This example demonstrates how to import specific components using granular exports to reduce bundle size. It assumes the library provides these individual component exports.

```javascript
// Granular imports - use when you need only a few components
import Button from "@/components/ui/button";
import Input from "@/components/ui/input";
import Card from "@/components/ui/card";
import Label from "@/components/ui/label";
import Checkbox from "@/components/ui/checkbox";
import RadioGroup from "@/components/ui/radio-group";
```

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

### HeroUI Native Getting Started Routes

Source: https://heroui.com/docs/components/checkbox

This snippet lists the navigation routes for the 'Getting Started' section of the HeroUI Native documentation. It includes links to core concepts, providers, portals, styling, and advanced features like LLMs and agents.

```javascript
self.__next_f.push([
  1,
  "8c:[\"/docs/native/getting-started\",\"/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 Native via Package Managers

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

Commands to add the heroui-native dependency to a project using different package managers. Choose the command corresponding to your preferred tool.

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

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

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

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

### Install Mandatory Peer Dependencies (npm)

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

Installs essential peer dependencies required for HeroUI Native, including reanimated, gesture-handler, and styling utilities, using npm.

```bash
npm install 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 Mandatory Peer Dependencies (bun)

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

Installs essential peer dependencies required for HeroUI Native, including reanimated, gesture-handler, and styling utilities, using bun.

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

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

### Initialize App Component

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

Basic setup for a React Native application using HeroUI, including the required GestureHandlerRootView wrapper.

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

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

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

### Install HeroUI Packages with npm, pnpm, yarn, or bun

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

This snippet provides commands to install HeroUI packages using various package managers. It includes examples for npm, pnpm, yarn, and bun, specifying the installation of '@heroui/styles@beta' and '@heroui/react@beta'.

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

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

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

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

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

### Example AI Assistant Prompt for Component Information

Source: https://heroui.com/docs/native/getting-started/mcp-server

This example prompt shows how to query the AI assistant for information about specific HeroUI Native components, such as listing available components or getting details about a particular component.

```text
"Show me all HeroUI Native components"
```

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

### Install Mandatory Peer Dependencies (pnpm)

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

Installs essential peer dependencies required for HeroUI Native, including reanimated, gesture-handler, and styling utilities, using pnpm.

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

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

### Implement HeroUI components

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

Example of importing and using a HeroUI component within a React functional component.

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

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

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

### Setup Native Provider and Gesture Handler

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

This code snippet demonstrates how to wrap your application with HeroUINativeProvider and GestureHandlerRootView. These are essential for the proper functioning of native components within the HeroUI framework. Ensure these are correctly implemented to avoid runtime errors.

```javascript
import { HeroUINativeProvider } from '@heroicons/react/native';
import { GestureHandlerRootView } from 'react-native-gesture-handler';

// ... your app setup

<HeroUINativeProvider>
  <GestureHandlerRootView style={{ flex: 1 }}>
    {/* Your application components */}
  </GestureHandlerRootView>
</HeroUINativeProvider>
```

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

### Example AI Assistant Prompt for HeroUI Native

Source: https://heroui.com/docs/native/getting-started/mcp-server

This is an example of a natural language prompt that can be used with an AI assistant configured with the HeroUI Native MCP server. It demonstrates how to ask for installation help.

```text
"Help me install HeroUI Native in my Expo app"
```

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

### Add HeroUI Packages with bun

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

This snippet illustrates how to add the @heroui/styles and @heroui/react packages to your project using the bun package manager. Make sure bun is installed and accessible in your system.

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

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

### Basic Drawer Usage Example

Source: https://heroui.com/docs/react/components/drawer

A simple example showcasing how to render a basic Drawer component. This serves as a starting point for integrating drawers into your application's UI.

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

export function Basic() {
  return (
    <Drawer>
      {/* Drawer content goes here */}
    </Drawer>
  );
}
```

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

### Console Logging Example

Source: https://heroui.com/docs/react/migration/chip

Demonstrates how to log messages to the console. This snippet is language-agnostic in its representation but implies a JavaScript environment.

```javascript
console.log("close")
```

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

### Install HeroUI Migration Script

Source: https://heroui.com/docs/react/migration/agent-skills

A shell command to download and execute the HeroUI v3 installation script. This script automates the setup process for migrating existing projects.

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

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

### Component Usage Example

Source: https://heroui.com/docs/react/migration/user

A basic implementation example showing how to instantiate a User component with a name property.

```jsx
// Usage
<User name="..." />
```

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

### Install Heroui Native MCP with npx

Source: https://heroui.com/docs/native/getting-started/mcp-server

This command installs the Heroui Native MCP globally using npx. It's a quick way to get started with the MCP. Ensure you have Node.js and npm installed.

```bash
npx heroui-native mcp add -y @heroui/native-mcp@latest
```

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

### Kbd Instructional Text Example

Source: https://heroui.com/docs/components/kbd

Provides an example of using the Kbd component within instructional text, such as listing quick actions with their corresponding shortcuts like 'Open search: ⌘K'.

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

export function InstructionalText() {
  return (
    <div className="space-y-3">
      <div className="flex items-center justify-between">
        <span>• Open search:</span>
        <Kbd><Kbd.Abbr title="Command">⌘</Kbd.Abbr><Kbd.Content>K</Kbd.Content></Kbd>
      </div>
      <div className="flex items-center justify-between">
        <span>• Toggle sidebar:</span>
        <Kbd><Kbd.Abbr title="Command">⌘</Kbd.Abbr><Kbd.Content>B</Kbd.Content></Kbd>
      </div>
      <div className="flex items-center justify-between">
        <span>• New file:</span>
        <Kbd><Kbd.Abbr title="Command">⌘</Kbd.Abbr><Kbd.Content>N</Kbd.Content></Kbd>
      </div>
      <div className="flex items-center justify-between">
        <span>• Quick save:</span>
        <Kbd><Kbd.Abbr title="Command">⌘</Kbd.Abbr><Kbd.Content>S</Kbd.Content></Kbd>
      </div>
    </div>
  );
}
```

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

### Install Mandatory Peer Dependencies (yarn)

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

Installs essential peer dependencies required for HeroUI Native, including reanimated, gesture-handler, and styling utilities, using yarn.

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

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

### Install HeroUI Native using curl

Source: https://heroui.com/native/llms-full.txt

This command-line snippet shows how to install the HeroUI Native library using curl. It fetches an installation script from a specified URL and executes it to set up the library.

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

```

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

### Example AI Assistant Prompt for Component Usage

Source: https://heroui.com/docs/native/getting-started/mcp-server

This example prompt illustrates how to request a usage example for a HeroUI Native component from the AI assistant, facilitating quicker implementation and understanding.

```text
"Give me an example of using the Card component"
```

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

### Kbd Instructional Text Example

Source: https://heroui.com/docs/react/components/kbd

Provides an example of using the Kbd component within instructional text for 'Quick Actions', such as opening search (⌘K), toggling sidebar (⌘B), new file (⌘N), and quick save (⌘S).

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

export function InstructionalText() {
  return (
    <div className="space-y-3">
      <p>• Open search: <Kbd><Kbd.Abbr title="Command">⌘</Kbd.Abbr><Kbd.Content>K</Kbd.Content></Kbd></p>
      <p>• Toggle sidebar: <Kbd><Kbd.Abbr title="Command">⌘</Kbd.Abbr><Kbd.Content>B</Kbd.Content></Kbd></p>
      <p>• New file: <Kbd><Kbd.Abbr title="Command">⌘</Kbd.Abbr><Kbd.Content>N</Kbd.Content></Kbd></p>
      <p>• Quick save: <Kbd><Kbd.Abbr title="Command">⌘</Kbd.Abbr><Kbd.Content>S</Kbd.Content></Kbd></p>
    </div>
  );
}
```

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

### Basic Drawer Usage Example

Source: https://heroui.com/docs/components/drawer

Shows a simple implementation of the Drawer component, typically used to trigger its opening with a Button.

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

export function Basic() {
  return (
    <Drawer>
      <Button>Open Drawer</Button>
    </Drawer>
  );
}
```

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

### RangeCalendar v2 Configuration (JavaScript)

Source: https://heroui.com/docs/react/migration/range-calendar

Illustrates the configuration of the RangeCalendar component in HeroUI v2, which was primarily managed through props. This example shows a typical setup before migration.

```javascript
import { RangeCalendar } from "@heroui/v2/range-calendar";

<RangeCalendar
  startDate={new Date()}
  endDate={new Date(Date.now() + 7 * 24 * 60 * 60 * 1000)}
  onChange={(start, end) => {
    console.log("Selected range:", start, end);
  }}
  // ... other props
/>;
```

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

### Add HeroUI Packages with yarn

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

This snippet shows how to add the @heroui/styles and @heroui/react packages to your project using the yarn package manager. Verify that yarn is installed and set up in your project.

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

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

### Add HeroUI Packages with pnpm

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

This snippet demonstrates how to add the @heroui/styles and @heroui/react packages to your project using the pnpm package manager. Ensure pnpm is installed and configured in your environment.

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

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

### Description Component Usage Example (JavaScript)

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

Demonstrates how to import and use the Description component from HeroUI, along with TextField. This example showcases basic component integration.

```javascript
import { Description, TextField } from "@heroui/native";

// Example usage within a React component:
<Description>
  <TextField />
</Description>
```

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

### Install HeroUI Styles and React Packages (Bun)

Source: https://heroui.com/docs/releases/v3-0-0-beta-7

This command demonstrates how to install the necessary HeroUI packages, specifically `@heroui/styles` and `@heroui/react`, using the Bun package manager. It installs beta versions of the packages, which may contain pre-release features or changes.

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

```

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

### React ListBox Component: Single Selection Example

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

This snippet demonstrates how to implement a single selection functionality within a React ListBox component. It utilizes the `useState` hook to manage the selected item. Ensure 'react' is installed as a dependency.

```jsx
import { useState } from 'react';

// ... component definition ...

// Single selection
const [singleSelected] = useState([]);
```

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

### Importing and Initializing HeroUI Components

Source: https://heroui.com/docs/react/migration/autocomplete

Demonstrates how to import necessary components and hooks from @heroui/react and initialize the useFilter hook for search sensitivity.

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

export default function App() {
  const { contains } = useFilter({ sensitivity: "base" });
  // Component logic follows...
```

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

### Starting the HeroUI Migration

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

Instructions on how to initiate the migration process after configuring the `.vscode/mcp.json` file. This involves clicking the 'Start' button next to the heroui-migration server.

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

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

### HeroUI React Navigation Tabs

Source: https://heroui.com/docs/components/checkbox

This snippet defines the navigation tabs for the HeroUI React documentation. It includes links to 'Getting Started', 'Components', 'Releases', 'Migration', and 'Native Getting Started', along with associated icons and descriptions for each tab.

```javascript
self.__next_f.push([
  1,
  "84:[\"$\",\"$L86\",null,{\"className\":\"h-10 overflow-x-auto border-b px-6\",\"data-header-tabs\":\"\",\"children\":[\"$\",\"$L60\",null,{\"className\":\"hidden md:flex\"}],\"filterByPathname\":true,\"options\":[{\"url\":\"/docs/react/getting-started\",\"title\":[\"$\",\"div\",null,{\"aria-label\":\"Getting Started\",\"className\":\"flex items-center gap-2\",\"children\":[\"$0:f:0:1:0:props:children:1:props:children:props:children:0:props:children:props:children:props:tree:children:0:children:0:icon\",[\"$\",\"span\",null,{\"children\":\"Getting Started\"}]]}],\"icon\":\"$0:f:0:1:0:props:children:1:props:children:props:children:0:props:children:props:children:props:tree:children:0:children:0:icon\",\"unlisted\":\"$undefined\",\"description\":\"Get started with HeroUI v3\",\"urls\":\"$W87\"},{\"url\":\"/docs/react/components\",\"title\":[\"$\",\"div\",null,{\"aria-label\":\"Components\",\"className\":\"flex items-center gap-2\",\"children\":[\"$10\",[\"$\",\"span\",null,{\"children\":\"Components\"}]]}],\"icon\":\"$10\",\"unlisted\":\"$undefined\",\"description\":\"HeroUI React components\",\"urls\":\"$W88\"},{\"url\":\"/docs/react/releases\",\"title\":[\"$\",\"div\",null,{\"aria-label\":\"Releases\",\"className\":\"flex items-center gap-2\",\"children\":[\"$27\",[\"$\",\"span\",null,{\"children\":\"Releases\"}]]}],\"icon\":\"$27\",\"unlisted\":\"$undefined\",\"description\":\"HeroUI v3 Release Notes\",\"urls\":\"$W89\"},{\"url\":\"/docs/react/migration\",\"title\":[\"$\",\"div\",null,{\"aria-label\":\"Migration\",\"className\":\"flex items-center gap-2\",\"children\":[\"$28\",[\"$\",\"span\",null,{\"children\":\"Migration\"}]]}],\"icon\":\"$28\",\"unlisted\":\"$undefined\",\"description\":\"Complete guide to migrate your HeroUI v2 application to v3\",\"urls\":\"$W8a\"},{\"url\":\"/docs/native/getting-started\",\"title\":[\"$\",\"div\",null,{\"aria-label\":\"Getting Started\",\"className\":\"flex items-center gap-2\",\"children\":[\"$29\",[\"$\",\"span\",null,{\"children\":\"Getting Started\"}]]}],\"icon\":\"$29\",\"unlisted\":\"$undefined\",\"description\":\"Get started with HeroUI Native\",\"urls\":\"$W8b\"},{\"url\":\"/docs/nat
```

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

### Quick Install: HeroUI React and Styles (npm)

Source: https://heroui.com/llms-patterns.txt

Provides the npm command to install the necessary HeroUI packages for React and styling. This is the first step in integrating HeroUI into a React project.

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

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

### Custom Input Component Example

Source: https://heroui.com/docs/components/input

An example demonstrating how to create a custom input component using HeroUI.

```APIDOC
## Custom Input Component Example

### Description
Example of creating a custom input component with HeroUI, integrating validation and error handling.

### Method
N/A (Client-side component)

### Endpoint
N/A (Client-side component)

### Parameters
For validation props like `isInvalid`, `isRequired`, and error handling, use `Input` with `Input.Error` as a child component.

### Request Example
```javascript
import React from 'react';
import { Input } from '@heroui/react';

function CustomInput() {
  return (
    <div className="flex flex-col gap-2">
      <Input type="text" placeholder="Enter your email" label="Email" required />
      <Input type="password" placeholder="Enter your password" label="Password" />
    </div>
  );
}
```

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

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

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

### Vertical Slider Example

Source: https://heroui.com/docs/components/slider

Provides an example of a vertically oriented Slider component. This setup is typically used within a flex container to control its height.

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

export function Vertical() {
  return (
    <div className="flex h-64 items-center justify-center">

```

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

### ColorField with Description Example

Source: https://heroui.com/llms-full.txt

Shows how to use the ColorField component with descriptive text to guide users. It includes examples of setting default colors and names for the input fields.

```tsx
import {ColorField, Description, Label} from "@heroui/react";

export function WithDescription() {
  return (
    <div className="flex flex-col gap-4">
      <ColorField className="w-[280px]" defaultValue="#3B82F6" name="color">
        <Label>Primary Color</Label>
        <ColorField.Group>
          <ColorField.Input />
        </ColorField.Group>
        <Description>Enter your brand's primary color</Description>
      </ColorField>
      <ColorField className="w-[280px]" defaultValue="#F59E0B" name="accent-color">
        <Label>Accent Color</Label>
        <ColorField.Group>
          <ColorField.Input />
        </ColorField.Group>
        <Description>Used for highlights and CTAs</Description>
      </ColorField>
    </div>
  );
}
```

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

### Example AI Migration Queries

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

Examples of questions you can ask the AI assistant to help with your HeroUI migration. These queries cover various aspects of the migration process, from general workflows to specific component changes.

```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\"
```