### Setup for Badge Size Examples Source: https://www.heroui.com/en/docs/react/components/badge Imports Avatar and Badge components and defines an avatar URL, preparing the environment for showcasing various badge sizes. ```javascript import {Avatar, Badge} from "@heroui/react"; const AVATAR_URL = "https://heroui-assets.nyc3.cdn.digitaloceanspaces.com/avatars/green.jpg"; export function BadgeSizes() { ``` -------------------------------- ### Setup for Badge Placement Examples Source: https://www.heroui.com/en/docs/react/components/badge Imports Avatar and Badge components and defines an avatar URL, establishing the context for illustrating badge placement options. ```javascript import {Avatar, Badge} from "@heroui/react"; const AVATAR_URL = "https://heroui-assets.nyc3.cdn.digitaloceanspaces.com/avatars/green.jpg"; export function BadgePlacements() { ``` -------------------------------- ### Setup for Badge Color Examples Source: https://www.heroui.com/en/docs/react/components/badge Imports Avatar and Badge components and defines a common avatar URL, setting up the context for demonstrating different badge colors. ```javascript import {Avatar, Badge} from "@heroui/react"; const AVATAR_URL = "https://heroui-assets.nyc3.cdn.digitaloceanspaces.com/avatars/green.jpg"; export function BadgeColors() { ``` -------------------------------- ### Install HeroUI React Package Source: https://www.heroui.com/en/docs/react/components/typography Install the HeroUI React library using pnpm to get access to its components. ```bash pnpm add @heroui/react ``` -------------------------------- ### Import Snippet Component (v2) and Installation Command Source: https://www.heroui.com/en/docs/react/migration/snippet This snippet shows the v2 import for the `Snippet` component and the npm installation command, useful for understanding the previous setup. ```javascript import { Snippet } from "@heroui/react"; ``` ```bash npm install @heroui/react ``` -------------------------------- ### HeroUI CLI env Command Example Output Source: https://www.heroui.com/en/docs/react/getting-started/cli An example of the detailed output from the `heroui env` command, listing installed HeroUI packages and system environment details. ```plaintext HeroUI CLI Current installed packages: ╭──────────────────────────────────────────────────────────────────────────────────────╮ │ Package │ Version │ Status │ Docs │ │──────────────────────────────────────────────────────────────────────────────────────│ │ @heroui/react │ 3.0.0 🚀latest │ stable │ https://heroui.com │ │ @heroui/styles │ 3.0.0 🚀latest │ stable │ https://heroui.com │ ╰──────────────────────────────────────────────────────────────────────────────────────╯ Environment Info: System: OS: darwin CPU: arm64 Binaries: Node: v25.8.1 ``` -------------------------------- ### Navigate to Project and Install Dependencies (npm) Source: https://www.heroui.com/en/docs/react/getting-started/cli After creating a new project, use these commands to enter the project directory and install its dependencies with npm. ```bash cd my-heroui-app ``` ```bash npm install ``` -------------------------------- ### Install HeroUI Packages Source: https://www.heroui.com/en/docs/react/getting-started/cli Install @heroui/react and @heroui/styles along with their peer dependencies into your project. ```bash heroui install [options] ``` -------------------------------- ### Controlled Input Component Setup Source: https://www.heroui.com/en/docs/react/components/input Shows the initial setup for a controlled Input component, including the `use client` directive for client-side rendering. ```javascript "use client"; import {Input} from "@heroui/react"; import React from "react"; ``` -------------------------------- ### Install next-themes with bun Source: https://www.heroui.com/en/docs/react/getting-started/dark-mode Use this command to install the `next-themes` library for theme persistence and system preference support in Next.js applications. ```bun bun add next-themes ``` -------------------------------- ### Basic HeroUI Drawer Component Setup Source: https://www.heroui.com/en/docs/react/releases/v3-0-0 This snippet demonstrates the initial setup for using HeroUI's Button and Drawer components to create an overlay. ```javascript import {Button, Drawer} from "@heroui/react"; export function Basic() { return ( ``` -------------------------------- ### Install next-themes with npm Source: https://www.heroui.com/en/docs/react/getting-started/dark-mode Use this command to install the `next-themes` library for theme persistence and system preference support in Next.js applications. ```npm npm i next-themes ``` -------------------------------- ### Basic ComboBox Component Setup Source: https://www.heroui.com/en/docs/react/components/combo-box Initial setup for a ComboBox component, importing necessary elements like Button, Form, and Input from `@heroui/react`. ```javascript "use client"; import {Button, ComboBox, FieldError, Form, Input, Label, ListBox, Surface} from "@heroui/react"; export function OnSurface() { ``` -------------------------------- ### Install HeroUI and Dependencies Source: https://www.heroui.com/en/docs/react/getting-started/quick-start Installs the core HeroUI styles and React components using various package managers. ```shell npm i @heroui/styles @heroui/react ``` ```shell pnpm add @heroui/styles @heroui/react ``` ```shell yarn add @heroui/styles @heroui/react ``` ```shell bun add @heroui/styles @heroui/react ``` -------------------------------- ### Basic HeroUI Color Components Setup Source: https://www.heroui.com/en/docs/react/releases/v3-0-0 This snippet demonstrates the initial setup for using HeroUI's ColorArea, ColorPicker, ColorSlider, ColorSwatch, and Label components. ```javascript import {ColorArea, ColorPicker, ColorSlider, ColorSwatch, Label} from "@heroui/react"; export function Basic() { return ( ``` -------------------------------- ### Basic HeroUI Tabs Component Setup Source: https://www.heroui.com/en/docs/react/releases/v3-0-0 This snippet provides the initial setup for using HeroUI's Tabs component for navigation. ```javascript import {Tabs} from "@heroui/react"; export function Basic() { return ( ``` -------------------------------- ### Install HeroUI React and Styles Beta Source: https://www.heroui.com/en/docs/react/releases/v3-0-0-beta-3 Commands to install the beta versions of HeroUI React components and styles packages using various JavaScript package managers. ```npm npm i @heroui/styles@beta @heroui/react@beta ``` ```pnpm pnpm add @heroui/styles@beta @heroui/react@beta ``` ```yarn yarn add @heroui/styles@beta @heroui/react@beta ``` ```bun bun add @heroui/styles@beta @heroui/react@beta ``` -------------------------------- ### Install next-themes with yarn Source: https://www.heroui.com/en/docs/react/getting-started/dark-mode Use this command to install the `next-themes` library for theme persistence and system preference support in Next.js applications. ```yarn yarn add next-themes ``` -------------------------------- ### Install HeroUI React Package Source: https://www.heroui.com/cn/docs/react/migration/snippet Use this command to install the HeroUI React package via npm. ```bash npm install @heroui/react ``` -------------------------------- ### Install next-themes with pnpm Source: https://www.heroui.com/en/docs/react/getting-started/dark-mode Use this command to install the `next-themes` library for theme persistence and system preference support in Next.js applications. ```pnpm pnpm add next-themes ``` -------------------------------- ### Install HeroUI CLI Globally with npm Source: https://www.heroui.com/en/docs/react/getting-started/cli Use this command to install the HeroUI CLI globally on your system using npm. ```npm npm install heroui-cli@latest -g ``` -------------------------------- ### List Installed HeroUI Packages Source: https://www.heroui.com/en/docs/react/getting-started/cli Display a list of currently installed HeroUI packages (@heroui/react, @heroui/styles) in your project. ```bash heroui list [options] ``` -------------------------------- ### TagGroup Selection Modes Setup Source: https://www.heroui.com/en/docs/react/components/tag-group This snippet demonstrates the imports and setup for configuring a TagGroup to support single or multiple selection modes. ```javascript "use client"; import type {Key} from "@heroui/react"; import {Description, Label, Tag, TagGroup} from "@heroui/react"; ``` -------------------------------- ### Install HeroUI React Package with Shell Prompt Source: https://www.heroui.com/en/docs/react/migration/snippet Use this command to install the HeroUI React library via npm, including the common shell prompt prefix. ```bash $ npm install @heroui/react ``` -------------------------------- ### Install HeroUI Native Components Source: https://www.heroui.com/en/docs/react/releases/v3-0-0 Install the HeroUI Native library using different package managers for React Native projects. ```bash npm install heroui-native ``` ```bash pnpm add heroui-native ``` ```bash yarn add heroui-native ``` ```bash bun add heroui-native ``` -------------------------------- ### Client-Side Pagination Component Setup in React Source: https://www.heroui.com/en/docs/react/components/pagination Initial setup for client-side React components using the Pagination component, including the necessary imports and useState hook for state management. ```javascript "use client"; import {Pagination} from "@heroui/react"; import {useState} from "react"; ``` -------------------------------- ### v2 Complete Code Component Example Source: https://www.heroui.com/en/docs/react/migration/code A full example demonstrating the usage of the HeroUI v2 `Code` component with various colors and sizes. ```jsx import { Code } from "@heroui/react"; export default function App() { return ( `

Install HeroUI with `npm install @heroui/react`

`Primary` `Success` `Warning` `Danger`

`Small` `Medium` `Large`

` ); } ``` -------------------------------- ### Install HeroUI Migration Skills using curl Source: https://www.heroui.com/en/docs/react/migration/agent-skills Use this command to install HeroUI Migration Skills directly via a curl script. ```bash curl -fsSL https://heroui.com/install | bash -s heroui-migration ``` -------------------------------- ### React Calendar with Custom Icons Setup Source: https://www.heroui.com/en/docs/react/components/calendar Initial setup for a React Calendar component, enabling custom icon rendering. Requires the 'use client' directive for client-side functionality. ```javascript "use client"; import {Calendar} from "@heroui/react"; export function CustomIcons() { ``` -------------------------------- ### Accordion with Subtitle and Start Content in HeroUI v2 Source: https://www.heroui.com/en/docs/react/migration/accordion Example of an Accordion item in HeroUI v2, showing how to include a subtitle and start content. ```javascript import { Icon } from "@iconify/react"; } > Content here ``` -------------------------------- ### Initialize a New HeroUI Project Source: https://www.heroui.com/en/docs/react/getting-started/cli Use the `init` command to set up a new HeroUI project with necessary configurations. ```bash heroui init [options] ``` -------------------------------- ### Install Project Dependencies with Various Package Managers Source: https://www.heroui.com/en/docs/react/getting-started/cli Install project dependencies using different package managers after navigating into the project directory. Choose the command relevant to your project's package manager. ```bash cd my-heroui-app && npm install ``` ```bash cd my-heroui-app && pnpm install ``` ```bash cd my-heroui-app && yarn install ``` ```bash cd my-heroui-app && bun install ``` -------------------------------- ### Start Local Development Server Source: https://www.heroui.com/en/docs/react/getting-started/cli Run the development server to preview your HeroUI project locally. ```bash npm run dev ``` -------------------------------- ### Full Navbar Example Migration (HeroUI v2 to v3) Source: https://www.heroui.com/cn/docs/react/migration/navbar Migrating a complete Navbar example, including brand, content, and mobile menu, from HeroUI v2 to v3, using native HTML and Tailwind CSS for a fully custom implementation. ```jsx import { Navbar, NavbarBrand, NavbarContent, NavbarItem, NavbarMenu, NavbarMenuItem, NavbarMenuToggle, Link, Button, } from "@heroui/react"; import { useState } from "react"; export default function App() { const [isMenuOpen, setIsMenuOpen] = useState(false); const menuItems = [ "Features", "Dashboard", "Pricing", "Team", "Integrations", "Settings", "Help & Feedback", "Log Out", ]; return (

ACME

 Features Dashboard Pricing Login {menuItems.map((item, index) => ( {item} ))} ); } ``` ```jsx import { useState } from "react"; import { Link, Button } from "@heroui/react"; export default function App() { const [isMenuOpen, setIsMenuOpen] = useState(false); const menuItems = [ "Features", "Dashboard", "Pricing", "Team", "Integrations", "Settings", "Help & Feedback", "Log Out", ]; return ( ); } ``` -------------------------------- ### Accordion with Subtitle and Start Content in HeroUI v3 Source: https://www.heroui.com/en/docs/react/migration/accordion Example of an Accordion item in HeroUI v3, demonstrating how to structure content including a subtitle and start content within the new component anatomy. ```javascript import { Icon } from "@iconify/react";Accordion 1 Press to expand Content here ``` -------------------------------- ### HeroUI v3 useOverlayState Hook Example Source: https://www.heroui.com/en/docs/react/migration/hooks An example demonstrating the usage of the useOverlayState hook in HeroUI v3 with a Modal component, showing the new API methods. ```jsx import { Modal, Button, useOverlayState } from "@heroui/react"; export default function App() { const state = useOverlayState(); return ( <> {({close}) => ( <> Title Content )} ); } ``` -------------------------------- ### Basic HeroUI Toast Notification Setup Source: https://www.heroui.com/en/docs/react/releases/v3-0-0 This snippet shows the initial setup for using HeroUI's toast notification system and Button component in a client component. ```javascript "use client"; import {Persons} from "@gravity-ui/icons"; import {Button, toast} from "@heroui/react"; ``` -------------------------------- ### TagGroup Disabled State Setup Source: https://www.heroui.com/en/docs/react/components/tag-group This example prepares a TagGroup where individual tags can be disabled using the `disabledKeys` prop. ```javascript "use client"; import {Description, Label, Tag, TagGroup} from "@heroui/react"; export function TagGroupDisabled() { ``` -------------------------------- ### Basic HeroUI Calendar Component Setup Source: https://www.heroui.com/en/docs/react/releases/v3-0-0 This snippet shows the initial setup for using HeroUI's Calendar, DateField, DatePicker, and Label components in a React client component. ```javascript "use client"; import {Calendar, DateField, DatePicker, Label} from "@heroui/react"; export function Basic() { ``` -------------------------------- ### DateInput with Start and End Content in HeroUI v2 Source: https://www.heroui.com/cn/docs/react/migration/dateinput Example of adding `startContent` and `endContent` to the `DateInput` component in HeroUI v2. ```jsx } label="Date" name="date" startContent={} /> ``` -------------------------------- ### TagGroup with Error Message Setup Source: https://www.heroui.com/en/docs/react/components/tag-group This example prepares a TagGroup to display an error message, useful for providing validation feedback to the user. ```javascript "use client"; import type {Key} from "@heroui/react"; import {Description, ErrorMessage, Label, Tag, TagGroup} from "@heroui/react"; ``` -------------------------------- ### HeroUI v2 Text Utility Example Source: https://www.heroui.com/en/docs/react/migration/styling This example shows a typical text structure in HeroUI v2, likely representing content that would be styled by utility classes. ```text Title ===== Description Helper ``` -------------------------------- ### Initialize Project with HeroUI CLI Source: https://www.heroui.com/en/docs/react/getting-started/frameworks Use the HeroUI CLI to create a new project. This command works for both Next.js and Vite, prompting you to select the desired framework template. ```bash npx heroui-cli@latest init ``` -------------------------------- ### Basic InputOTP Usage Source: https://www.heroui.com/en/docs/react/components/input-otp This example demonstrates a basic `InputOTP` component for account verification, including a label and a resend link. ```javascript import {InputOTP, Label, Link} from "@heroui/react"; export function Basic() { return (
We've sent a code to a****@gmail.com Didn't receive a code? Resend
); } ``` -------------------------------- ### HeroUI v3 Card Basic and Detailed Structure Example (JSX) Source: https://www.heroui.com/cn/docs/react/migration/card This snippet demonstrates two HeroUI v3 Card structures: a basic layout using Card.Header, Card.Content, and Card.Footer, and a more complex example incorporating Card.Title and Card.Description within the header. ```jsx {/* Basic structure */} Header Body content Footer {/* With title and description */} Daily Mix 12 Tracks Album cover

Available soon.

 ``` -------------------------------- ### Switch with Start/End Content in HeroUI v3 Source: https://www.heroui.com/cn/docs/react/migration/switch Example of a Switch component in HeroUI v3 with custom start and end content, directly customizing the control. ```jsx ``` -------------------------------- ### Setting Up Toast Provider and Showing a Simple Toast Source: https://www.heroui.com/en/docs/react/components/toast Render the Toast.Provider at the root of your application and use the `toast` function to display a basic message. ```javascript import { Toast, Button, toast } from '@heroui/react'; function App() { return ( ); } ``` -------------------------------- ### Full Component Migration Example from Spacer to Tailwind CSS Source: https://www.heroui.com/cn/docs/react/migration/spacer This comprehensive example demonstrates migrating a component that heavily uses the HeroUI v2 Spacer to its HeroUI v3 equivalent, utilizing Tailwind CSS `gap` and margin utilities for layout and spacing. ```jsx import { Spacer, Button } from "@heroui/react"; export default function App() { return (

Title

Description text

); } ``` ```jsx import { Button } from "@heroui/react"; export default function App() { return (

Title

Description text

); } ``` -------------------------------- ### DateField with Start/End Content in v2 and v3 Source: https://www.heroui.com/en/docs/react/migration/dateinput These examples show how to add start and end content to the DateField. In v3, this is achieved using DateInputGroup.Prefix and DateInputGroup.Suffix child components. ```jsx } label="Date" name="date" startContent={} /> ``` ```jsx Date {(segment) => } ``` -------------------------------- ### Basic RangeCalendar Usage Source: https://www.heroui.com/en/docs/react/components/range-calendar This snippet demonstrates the initial setup for using the RangeCalendar component within a React client component. The example is truncated and requires further implementation for full functionality. ```javascript "use client"; import {RangeCalendar} from "@heroui/react"; export function Basic() { ``` -------------------------------- ### Using DateValue Types with DateField (React) Source: https://www.heroui.com/en/docs/react/components/date-field This example shows how to initialize DateValue types for the DateField, including parsing a date string and getting the current date based on the local time zone. ```javascript import {parseDate, today, getLocalTimeZone} from '@internationalized/date'; // Parse from string const date = parseDate('2024-01-15'); // Today's date const todayDate = today(getLocalTimeZone()); // Use in DateField {/* ... ``` -------------------------------- ### ColorSwatchPicker Sizes Setup Source: https://www.heroui.com/en/docs/react/components/color-swatch-picker Includes imports, a color array, and size definitions for showcasing different ColorSwatchPicker sizes from extra small to extra large. ```javascript import {ColorSwatchPicker} from "@heroui/react"; const colors = ["#F43F5E", "#D946EF", "#8B5CF6", "#3B82F6", "#06B6D4", "#10B981", "#84CC16"]; const sizes = ["xs", "sm", "md", "lg", "xl"] as const; ``` -------------------------------- ### Install HeroUI React Agent Skill via cURL Source: https://www.heroui.com/en/docs/react/getting-started/agent-skills Use this command to install the HeroUI React agent skill directly from the HeroUI installation script. ```bash curl -fsSL https://heroui.com/install | bash -s heroui-react ``` -------------------------------- ### Basic Pagination Implementation (v3) Source: https://www.heroui.com/en/docs/react/migration/pagination Demonstrates a basic pagination setup in v3, manually composing page links using `useState` for page management. ```javascript import { useState } from "react"; import { Pagination } from "@heroui/react"; const [page, setPage] = useState(1); const totalPages = 10; {Array.from({ length: totalPages }, (_, i) => i + 1).map((p) => ( setPage(p)}> {p} ))} ``` -------------------------------- ### Using Kbd Component in Instructional Text Lists Source: https://www.heroui.com/en/docs/react/components/kbd Demonstrates how to use Kbd components within list items to present quick actions and their corresponding keyboard shortcuts. ```jsx import {Kbd} from "@heroui/react"; export function InstructionalText() { return ( ); } ``` -------------------------------- ### Basic Drawer Usage (React) Source: https://www.heroui.com/en/docs/react/components/drawer Demonstrates the basic structure for rendering a Drawer component, typically opened by a Button. ```javascript import {Button, Drawer} from "@heroui/react"; export function Basic() { return ( ``` -------------------------------- ### DateField Variants Component Setup Source: https://www.heroui.com/en/docs/react/components/date-field Initial setup for a React component demonstrating the primary and secondary visual variants of the DateField.Group. ```javascript "use client"; import {DateField, Label} from "@heroui/react"; export function Variants() { ``` -------------------------------- ### HeroUI v2 useDisclosure Hook Example Source: https://www.heroui.com/en/docs/react/migration/hooks An example demonstrating the usage of the useDisclosure hook in HeroUI v2 with a Modal component. ```jsx import { Modal, ModalContent, ModalHeader, ModalBody, ModalFooter, Button, useDisclosure } from "@heroui/react"; export default function App() { const {isOpen, onOpen, onOpenChange} = useDisclosure(); return ( <> Title Content ); } ``` -------------------------------- ### Download HeroUI v2 to v3 Migration Docs for AI Agents Source: https://www.heroui.com/en/docs/react/migration/agents-md Use this command to download HeroUI v2 to v3 migration documentation into your project for AI assistants to reference. ```bash npx heroui-cli@latest agents-md --migration ``` -------------------------------- ### v2 Code Component Variants Example Source: https://www.heroui.com/en/docs/react/migration/code Example of how color and size variants were applied to the `Code` component in HeroUI v2. ```jsx {/* Colors */} `Primary code` `Success code` {/* Sizes */} `Medium code` ``` -------------------------------- ### Using HeroUI Button with Simple Component Patterns Source: https://www.heroui.com/en/docs/react/getting-started/composition Illustrates the recommended way to use simple HeroUI components like Button, including options with and without `.Root` and named exports. ```jsx import { Button } from '@heroui/react'; // Recommended - no .Root needed Click me // Or with .Root Click me // Or named export import { ButtonRoot } from '@heroui/react'; Click me ``` -------------------------------- ### TimeField Form Example Type Imports Source: https://www.heroui.com/en/docs/react/components/time-field Imports `Time` type from `@internationalized/date` and `Clock` icon for a form example with validation. ```javascript "use client"; import type {Time} from "@internationalized/date"; import {Clock} from "@gravity-ui/icons"; ``` -------------------------------- ### Form Example Imports for ColorField in React Source: https://www.heroui.com/en/docs/react/components/color-field Imports required components and types for a complete form example using `ColorField`. ```javascript "use client"; import type {Color} from "@heroui/react"; import {Button, ColorField, ColorSwatch, Description, Form, Label} from "@heroui/react"; ``` -------------------------------- ### Vertical Slider Example in HeroUI v3 Source: https://www.heroui.com/cn/docs/react/migration/slider This example shows how to implement a vertical slider in HeroUI v3, including a label. ```jsx ``` -------------------------------- ### TagGroup Sizes Setup Source: https://www.heroui.com/en/docs/react/components/tag-group This snippet prepares a TagGroup component to demonstrate different size options (Small, Medium, Large). ```javascript "use client"; import {Label, Tag, TagGroup} from "@heroui/react"; export function TagGroupSizes() { ``` -------------------------------- ### Basic RadioGroup Usage Example Source: https://www.heroui.com/en/docs/react/components/radio-group Demonstrates a basic implementation of the RadioGroup component for selecting a plan, including Label and Description components. ```javascript import {Description, Label, Radio, RadioGroup} from "@heroui/react"; export function Basic() { return ( ``` -------------------------------- ### Download HeroUI Migration Docs to a Specific Output File Source: https://www.heroui.com/en/docs/react/migration/agents-md Specify an output file for the downloaded migration documentation using the `--output` flag. ```bash npx heroui-cli@latest agents-md --migration --output AGENTS.md ``` -------------------------------- ### Basic Input Usage Source: https://www.heroui.com/en/docs/react/components/input Demonstrates the basic implementation of the Input component without any specific props. ```javascript import {Input} from "@heroui/react"; export function Basic() { return ; } ``` -------------------------------- ### Basic SearchField Composition with Sub-components Source: https://www.heroui.com/en/docs/react/components/search-field This example demonstrates how to build a SearchField using its individual composition components like Label, SearchField.Group, SearchField.Input, SearchField.SearchIcon, SearchField.ClearButton, Description, and FieldError. ```jsx Enter keywords to search Search query is required ``` -------------------------------- ### Controlled DateInput Setup in HeroUI v2 Source: https://www.heroui.com/cn/docs/react/migration/dateinput Initial setup for a controlled `DateInput` component in HeroUI v2, including state management. ```jsx import { parseDate } from "@internationalized/date"; import { useState } from "react"; const [value, setValue] = useState(null); ``` -------------------------------- ### ColorSwatchPicker Variants Setup Source: https://www.heroui.com/en/docs/react/components/color-swatch-picker Provides the necessary imports and color array definition for demonstrating ColorSwatchPicker variants like circle and square shapes. ```javascript import {ColorSwatchPicker} from "@heroui/react"; const colors = ["#F43F5E", "#D946EF", "#8B5CF6", "#3B82F6", "#06B6D4", "#10B981", "#84CC16"]; export function Variants() { ``` -------------------------------- ### Basic Modal Title Example Source: https://www.heroui.com/en/docs/react/migration/modal A simple example showing a basic modal title, potentially used within a modal component. ```plaintext Modal Title ``` -------------------------------- ### Modal Anatomy Example Source: https://www.heroui.com/en/docs/react/components/modal This example illustrates the basic structure of the Modal component, including placeholders for optional close buttons and icons. ```javascript import {Modal, Button} from "@heroui/react"; export default () => ( Open Modal {/* Optional: Close button */} {/* Optional: Icon */} ); ``` -------------------------------- ### Download React Docs for AI Agents Source: https://www.heroui.com/en/docs/react/getting-started/cli Downloads only React-specific HeroUI documentation and saves it to `AGENTS.md` for AI coding agents. ```bash heroui agents-md --react --output AGENTS.md ``` -------------------------------- ### DateRangePicker in a Form Example with React Source: https://www.heroui.com/en/docs/react/components/date-range-picker Provides an example of integrating the DateRangePicker component within a form for selecting check-in and check-out dates. ```javascript "use client"; import type {DateValue} from "@internationalized/date"; import { ``` -------------------------------- ### Accordion v3 Controlled State Example Source: https://www.heroui.com/cn/docs/react/migration/accordion This example demonstrates the controlled state management for the v3 Accordion, using `expandedKeys` and `onExpandedChange`. ```tsx import { useState } from "react"; import { Accordion } from "@heroui/react"; import type { Key } from "@heroui/react"; const [expandedKeys, setExpandedKeys] = useState>(new Set(["1"])); Item 1 Content 1 Item 2 Content 2 ``` -------------------------------- ### Basic Migration from useDisclosure (v2) to useOverlayState (v3) Source: https://www.heroui.com/en/docs/react/migration/hooks This snippet illustrates the basic migration from useDisclosure in v2 to useOverlayState in v3, highlighting the change from destructuring callbacks to using methods on a state object. ```jsx const {isOpen, onOpen, onClose, onOpenChange} = useDisclosure(); ``` ```jsx const state = useOverlayState(); // Use state.open(), state.close(), state.toggle(), state.setOpen(boolean) ``` -------------------------------- ### Download Native Docs for AI Agents Source: https://www.heroui.com/en/docs/react/getting-started/cli Downloads only Native-specific HeroUI documentation and saves it to `CLAUDE.md` for AI coding assistants. ```bash heroui agents-md --native --output CLAUDE.md ``` -------------------------------- ### Display HeroUI CLI Available Commands Source: https://www.heroui.com/en/docs/react/getting-started/cli Run this command after installation to view all available HeroUI CLI commands and options. ```bash heroui ``` -------------------------------- ### Basic TagGroup Usage Setup Source: https://www.heroui.com/en/docs/react/components/tag-group This snippet shows the necessary imports for a basic TagGroup implementation, including icons from @gravity-ui/icons. ```javascript "use client"; import {PlanetEarth, Rocket, ShoppingBag, SquareArticle} from "@gravity-ui/icons"; import {Tag, TagGroup} from "@heroui/react"; ``` -------------------------------- ### Using Kbd.Key for Text Content in HeroUI v3 Source: https://www.heroui.com/cn/docs/react/migration/kbd This example shows how to wrap key text content using the `Kbd.Key` subcomponent in HeroUI v3. ```jsx {/* Using Kbd.Key */} K ``` -------------------------------- ### Creating a Clickable User Component (v3) Source: https://www.heroui.com/en/docs/react/migration/user Demonstrates how to create a clickable user component using a button, incorporating `Avatar` and custom styling for focus. ```jsx ``` -------------------------------- ### Client-Side Setup for Controlled ColorField Component Source: https://www.heroui.com/en/docs/react/components/color-field Provides the client-side setup for a controlled ColorField component, allowing its value to be managed by external state or other components. ```javascript "use client"; import type {Color} from "@heroui/react"; import {Button, ColorField, ColorSwatch, Description, Label, parseColor} from "@heroui/react"; ``` -------------------------------- ### Controlled DateField Setup in HeroUI v3 Source: https://www.heroui.com/cn/docs/react/migration/dateinput Initial setup for a controlled `DateField` component in HeroUI v3, including state management and type import. ```jsx import type { DateValue } from "@internationalized/date"; import { useState } from "react"; const [value, setValue] = useState(null); Date {(segment) => } ``` -------------------------------- ### InputOTP pasteTransformer Prop Example Source: https://www.heroui.com/en/docs/react/migration/input-otp Example of using the 'pasteTransformer' prop to clean pasted text, specifically removing hyphens from a pasted code string. ```jsx text.replace(/-/g, "")} > ``` -------------------------------- ### v3 Manual Composition with Link Description Source: https://www.heroui.com/en/docs/react/migration/user Illustrates the v3 approach for including a linked description, using `Avatar`, `Link`, and manual layout. ```javascript import { Avatar, Link } from "@heroui/react";

Junior Garcia

@jrgarciadev
``` -------------------------------- ### Controlled Slider Example in HeroUI v3 Source: https://www.heroui.com/cn/docs/react/migration/slider This example demonstrates a controlled Slider component in HeroUI v3, showing how to manage its value and display a label. ```jsx import { useState } from "react"; const [value, setValue] = useState(25); ``` -------------------------------- ### Rendering a List of Users (v3) Source: https://www.heroui.com/en/docs/react/migration/user Example of rendering a list of users using the v3 composition pattern with `Avatar` and text elements. ```jsx ``` -------------------------------- ### Controlled Slider Example in HeroUI v2 Source: https://www.heroui.com/cn/docs/react/migration/slider This example shows how to implement a controlled Slider component in HeroUI v2, managing its value with React state. ```jsx import { useState } from "react"; const [value, setValue] = useState(25); ``` -------------------------------- ### Basic Skeleton Usage in React Source: https://www.heroui.com/en/docs/react/components/skeleton This example demonstrates a basic implementation of the Skeleton component to show a simple loading state for general content. ```javascript import {Skeleton} from "@heroui/react"; export function Basic() { return (
); } ``` -------------------------------- ### Accordion v2 Controlled State Example Source: https://www.heroui.com/cn/docs/react/migration/accordion This example shows how to manage the controlled state of the Accordion component in HeroUI v2 using `selectedKeys` and `onSelectionChange`. ```jsx import { useState } from "react"; import { Accordion, AccordionItem } from "@heroui/react"; const [selectedKeys, setSelectedKeys] = useState(new Set(["1"])); Content 1 Content 2 ``` -------------------------------- ### Migrating Card Structure from v2 to v3 Source: https://www.heroui.com/en/docs/react/migration/card Provides examples of migrating Card structures, showing both a basic v3 Card and one with `Card.Title` and `Card.Description`. ```html {/* Basic structure */} Header Body content Footer {/* With title and description */} Daily Mix 12 Tracks

Some content

 Listen now ``` -------------------------------- ### Run HeroUI CLI without Global Installation using npx Source: https://www.heroui.com/en/docs/react/getting-started/cli Execute this command to use the HeroUI CLI via npx without a global installation. ```npm npx heroui-cli@latest ```