HeroUI

https://heroui.com/en/docs
Admin
HeroUI is an open-source UI component library built on React, Tailwind CSS, and React Aria...
Tokens:829,605
Snippets:7,782
Trust Score:9.6
Update:2 weeks ago
Show doc for...
Tokens:
Raw
### Custom Value Scale example setup

Source: https://heroui.com/en/docs/components/progress-bar

Starts a custom value scale example that uses minValue, maxValue, and formatOptions. The code is incomplete and requires additional JSX to render properly.

```javascript
"use client";

import {Label, ListBox, NumberField, ProgressBar, Select, Separator} from "@heroui/react";
import {useState} from "react";

```

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

### Toast Setup example

Source: https://heroui.com/en/docs/components/toast

Setup example showing how to render the Toast.Provider in the root of your app and trigger a toast.

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

function App() {
  return (
    <div>
      <Toast.Provider />
      <Button onPress={() => toast("Simple message")}>
        Show toast
      </Button>
    </div>
  );
}
```

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

### Basic DatePicker component setup

Source: https://heroui.com/en/docs/components/date-picker

Starts a basic DatePicker example with the 'use client' directive and imports. The component function is incomplete in the source.

```jsx
"use client";

import {Calendar, DateField, DatePicker, Label} from "@heroui/react";

export function Basic() {
```

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

### TagGroup Sizes Example Setup

Source: https://heroui.com/en/docs/components/tag-group

Client component for TagGroup sizes example, importing Label, Tag, and TagGroup.

```javascript
"use client";

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

export function TagGroupSizes() {

```

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

### Pagination Client Component Setup

Source: https://heroui.com/en/docs/components/pagination

Client component setup for Pagination examples, importing Pagination and useState.

```javascript
"use client";

import {Pagination} from "@heroui/react";
import {useState} from "react";


```

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

### Pagination Custom Icons Example Setup

Source: https://heroui.com/en/docs/components/pagination

Client component setup for the Custom Icons example, importing Icon from @iconify/react to replace default chevron icons.

```javascript
"use client";

import {Pagination} from "@heroui/react";
import {Icon} from "@iconify/react";
import {useState} from "react";

```

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

### TagGroup Client Setup

Source: https://heroui.com/en/docs/components/tag-group

Client component setup for TagGroup examples, importing icons and components.

```javascript
"use client";

import {PlanetEarth, Rocket, ShoppingBag, SquareArticle} from "@gravity-ui/icons";
import {Tag, TagGroup} from "@heroui/react";


```

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

### Alignment Example

Source: https://heroui.com/en/docs/react/components/tabs

Tabs with align prop set to start. The full example is truncated in the source.

```jsx
import {Tabs} from "@heroui/react";

export function VerticalAlignment() {
  return (
    <Tabs align="start" className="w-full max-w-lg" orientation="vertical" variant="secondary">
```

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

### Strategy A: pnpm aliases setup and imports

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

Setup for Strategy A: install v3 packages with pnpm aliases, then import v2 components from @heroui/react and v3 components from @heroui-v3/react.

```json
{
  "dependencies": {
    "@heroui/react": "2.8.6",
    "@heroui/theme": "2.4.24",
    "@heroui-v3/react": "npm:@heroui/react@latest",
    "@heroui-v3/styles": "npm:@heroui/styles@latest"
  }
}
```

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

```javascript
import {Button} from "@heroui-v3/react"; // v3
```

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

### Table pagination example setup

Source: https://heroui.com/en/docs/react/releases/v3-0-0-beta-8

Sets up a client component for the Table pagination example, importing Pagination, Table, useMemo, and useState. The code is truncated in the source with an 'Expand code' button.

```jsx
"use client";

import {Pagination, Table} from "@heroui/react";
import {useMemo, useState} from "react";
```

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

### TagGroup Variants Example Setup

Source: https://heroui.com/en/docs/components/tag-group

Client component for TagGroup variants example, importing Label, Tag, and TagGroup.

```javascript
"use client";

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

export function TagGroupVariants() {

```

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

### Interactive CloseButton Setup

Source: https://heroui.com/en/docs/components/close-button

Interactive example setup: imports the CloseButton and useState, with a 'use client' directive for Next.js App Router.

```javascript
"use client";

import {CloseButton} from "@heroui/react";
import {useState} from "react";


```

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

### AlertDialog size support setup

Source: https://heroui.com/en/docs/react/releases/v3-0-0-beta-4

Setup for the AlertDialog size support example, allowing control of dialog size (Xs, Sm, Md, Lg, Cover).

```jsx
"use client";

import {Rocket} from "@gravity-ui/icons";
import {AlertDialog, Button} from "@heroui/react";
```

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

### CLI usage examples for create-heroui-native-app

Source: https://heroui.com/en/docs/native/releases/cli-v1-0-0

Examples of create-heroui-native-app invocations covering interactive, partially interactive, and fully non-interactive modes. The last example uses --skip-install and --skip-git to scaffold without installing dependencies or initializing git.

```bash
# Fully interactive — prompts for both project name and template
npx create-heroui-native-app@latest

# Project name supplied, template picker still shown
npx create-heroui-native-app@latest my-app

# Fully non-interactive
npx create-heroui-native-app@latest my-app --expo

# Tabs template, install with pnpm
npx create-heroui-native-app@latest my-app --expo-tabs --use-pnpm

# Scaffold only, no install, no git
npx create-heroui-native-app@latest my-app --expo --skip-install --skip-git
```

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

### Form example client component imports

Source: https://heroui.com/en/docs/components/form

Client component setup for a form example using HeroUI components and Gravity UI icons.

```javascript
"use client";

import {Check} from "@gravity-ui/icons";
import {Button, Description, FieldError, Form, Input, Label, TextField} from "@heroui/react";


```

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

### Link icon placement

Source: https://heroui.com/en/docs/components/link

Example showing how to place the icon at the start or end of the link.

```jsx
import {Link} from "@heroui/react";

export function LinkIconPlacement() {
  return (
    <div className="flex flex-col gap-3">
```

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

### Import Typography and start a Primitives layout

Source: https://heroui.com/en/docs/react/components/typography

Shows how to import the Typography component and start building a layout with the convenience primitives. The snippet is truncated in the source; the full example is not shown.

```jsx
import {Typography} from "@heroui/react";

export const Primitives = () => {
  return (
    <div className="flex max-w-xl flex-col gap-4">

```

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

### Year Picker Component Setup

Source: https://heroui.com/en/docs/react/components/calendar

Imports the Calendar component and defines the YearPicker function component. This is the start of the year picker example.

```jsx
"use client";

import {Calendar} from "@heroui/react";

export function YearPicker() {

```

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

### Start the local server with npm

Source: https://heroui.com/en/docs/react/getting-started/cli

Starts the local development server using npm.

```bash
npm run dev
```

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

### Basic Breadcrumbs component setup

Source: https://heroui.com/en/docs/components/breadcrumbs

Starts a basic Breadcrumbs example component. The code is truncated with an 'Expand code' button in the source.

```javascript
"use client";

import {Breadcrumbs} from "@heroui/react";

export default function BreadcrumbsBasic() {
```

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

### Open Modal basic example

Source: https://heroui.com/en/docs/components/modal

Basic setup for opening a modal with a button. Includes the 'use client' directive and imports for the Rocket icon, Button, and Modal.

```javascript
"use client";

import {Rocket} from "@gravity-ui/icons";
import {Button, Modal} from "@heroui/react";


```

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

### ColorField FullWidth Example

Source: https://heroui.com/en/docs/components/color-field

Starts the FullWidth example, demonstrating a full-width ColorField. The code is truncated in the source.

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

export function FullWidth() {
  return (
    <div className="w-[400px] space-y-4">
```

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

### Toast Placements example

Source: https://heroui.com/en/docs/components/toast

Client-side example demonstrating how to set toast placements using ToastQueue and ToastVariants.

```javascript
"use client";

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

import {Button, Toast, ToastQueue} from "@heroui/react";
```

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

### ColorField Disabled Example

Source: https://heroui.com/en/docs/components/color-field

Starts the Disabled example, showing a disabled ColorField. The code is truncated in the source.

```jsx
"use client";

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

export function Disabled() {
```

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

### Features and Add-ons Example

Source: https://heroui.com/en/docs/react/components/checkbox-group

An example with icons from @gravity-ui/icons and clsx for styling.

```jsx
import {Bell, Comment, Envelope} from "@gravity-ui/icons";
import {Checkbox, CheckboxGroup, Description, Label} from "@heroui/react";
import clsx from "clsx";

export function FeaturesAndAddOns() {
```

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

### ColorField Required Example

Source: https://heroui.com/en/docs/components/color-field

Starts the Required example, demonstrating a required ColorField. The code is truncated in the source.

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

export function Required() {
  return (
    <div className="flex flex-col gap-4">
```

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

### Initialize a new HeroUI project

Source: https://heroui.com/en/docs/react/getting-started/cli

Runs the init command to initialize a new HeroUI project. Options include -t for template and -p for package manager.

```bash
heroui init [options]
```

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

### ColorField WithDescription Example

Source: https://heroui.com/en/docs/components/color-field

Starts the WithDescription example, showing ColorField with a description. The code is truncated in the source.

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

export function WithDescription() {
  return (
    <div className="flex flex-col gap-4">
```

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

### Install next-themes with bun

Source: https://heroui.com/en/docs/handbook/dark-mode

Install next-themes using bun as an alternative to npm.

```bash
bun add next-themes
```

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

### Promise & Loading example

Source: https://heroui.com/en/docs/components/toast

Client-side example showing how to handle promise-based loading states with toast.

```javascript
"use client";

import {Button, toast} from "@heroui/react";

const uploadFile = (): Promise<{filename: string; size: number}> => {
```

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

### Install @heroui/styles with bun

Source: https://heroui.com/en/docs/react/getting-started/frameworks

Install the styles package using bun.

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

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

### FieldError Usage Setup

Source: https://heroui.com/en/docs/components/field-error

Client-side setup for the FieldError usage example, importing required components and useState.

```javascript
"use client";

import {FieldError, Input, Label, TextField} from "@heroui/react";
import {useState} from "react";


```

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

### Controlled example imports (partial)

Source: https://heroui.com/en/docs/components/disclosure-group

Partial import block for the controlled example, showing icons and the start of the Button import.

```javascript
"use client";

import {ChevronDown, ChevronUp, QrCode} from "@gravity-ui/icons";
import {
  Button,
```

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

### LinkButton Example

Source: https://heroui.com/en/docs/native/components/link-button

A complete example showing a sign-up form with a terms agreement checkbox and inline link buttons.

```jsx
import { Button, Checkbox, ControlField, LinkButton } from 'heroui-native';
import React from 'react';
import { Alert, View } from 'react-native';

export default function LinkButtonExample() {
  const [isAgreed, setIsAgreed] = React.useState(false);

  const handleTermsPress = () => Alert.alert('Terms', 'Navigate to Terms');
  const handlePrivacyPress = () =>
    Alert.alert('Privacy', 'Navigate to Privacy Policy');

  return (
    <View className="flex-1 px-5 items-center justify-center">
      <View className="w-full max-w-xs gap-6">
        <ControlField
          isSelected={isAgreed}
          onSelectedChange={setIsAgreed}
          className="items-start"
        >
          <ControlField.Indicator>
            <Checkbox className="mt-0.5" />
          </ControlField.Indicator>
          <View className="flex-row flex-wrap flex-1">
            <Text className="text-sm text-muted">I agree to the </Text>
            <LinkButton size="sm" onPress={handleTermsPress}>
              <LinkButton.Label className="text-accent">
                Terms of Service
              </LinkButton.Label>
            </LinkButton>
            <Text className="text-sm text-muted"> and </Text>
            <LinkButton size="sm" onPress={handlePrivacyPress}>
              <LinkButton.Label className="text-accent">
                Privacy Policy
              </LinkButton.Label>
            </LinkButton>
          </View>
        </ControlField>
        <Button isDisabled={!isAgreed}>Sign up</Button>
      </View>
    </View>
  );
}
```

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

### Custom Queues example

Source: https://heroui.com/en/docs/components/toast

Client-side example showing how to create custom toast queues with maximum limits.

```javascript
"use client";

import {Button, Toast, ToastQueue} from "@heroui/react";

export function CustomQueue() {
```

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

### WithCustomIcon CloseButton Example

Source: https://heroui.com/en/docs/components/close-button

Custom icon example: imports icons from @gravity-ui/icons and starts a WithCustomIcon component that uses CloseButton.

```javascript
import {CircleXmark, Xmark} from "@gravity-ui/icons";
import {CloseButton} from "@heroui/react";

export function WithCustomIcon() {
  return (

```

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

### TagGroup Disabled Example Setup

Source: https://heroui.com/en/docs/components/tag-group

Client component for TagGroup disabled example, importing Description, Label, Tag, and TagGroup.

```javascript
"use client";

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

export function TagGroupDisabled() {

```

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

### Breadcrumbs disabled state example

Source: https://heroui.com/en/docs/components/breadcrumbs

Starts an example for the disabled state of Breadcrumbs. The code is truncated with an 'Expand code' button in the source.

```javascript
"use client";

import {Breadcrumbs} from "@heroui/react";

export default function BreadcrumbsDisabled() {
```

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

### Install HeroUI v3.0.0-beta.8

Source: https://heroui.com/en/docs/react/releases/v3-0-0-beta-8

Install the beta versions of @heroui/styles and @heroui/react using npm, pnpm, yarn, or bun. Choose the command matching your package manager.

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

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

### Install next-themes with npm

Source: https://heroui.com/en/docs/handbook/dark-mode

Install next-themes using npm for theme persistence and system preference support in Next.js.

```bash
npm i next-themes
```

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

### ColorField Validation Example

Source: https://heroui.com/en/docs/components/color-field

Starts the Validation example, using isInvalid together with FieldError to surface validation messages. The code is truncated in the source.

```jsx
import {ColorField, FieldError, Label} from "@heroui/react";

export function Invalid() {
  return (
    <div className="flex flex-col gap-4">
```

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

### Autocomplete Disabled Example (truncated)

Source: https://heroui.com/en/docs/components/autocomplete

Starts a client component example for the Disabled variant. The code is truncated in the source with an 'Expand code' button.

```javascript
"use client";

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

export function Disabled() {

```

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

### TagGroup Sizes Example

Source: https://heroui.com/en/docs/react/components/tag-group

Starter code for the Sizes example, showing the import and function signature.

```javascript
"use client";

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

export function TagGroupSizes() {
```

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

### Autocomplete Required Example (truncated)

Source: https://heroui.com/en/docs/components/autocomplete

Starts a client component example for the Required variant. The code is truncated in the source with an 'Expand code' button.

```javascript
"use client";

import {
  Autocomplete,
  Button,

```

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

### v3 Toast with Title and Description

Source: https://heroui.com/en/docs/react/migration/toast

v3 example using toast.success() with description.

```jsx
import { toast } from "@heroui/react";

toast.success("Success", {
  description: "Your changes have been saved"
});
```

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

### Autocomplete Usage Example (truncated)

Source: https://heroui.com/en/docs/components/autocomplete

Starts a client component example for the Autocomplete component. The code is truncated in the source with an 'Expand code' button.

```javascript
"use client";

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

import {

```

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

### Show toast example

Source: https://heroui.com/en/docs/components/toast

A client-side example demonstrating how to show a toast using the toast function and a Button component.

```javascript
"use client";

import {Persons} from "@gravity-ui/icons";
import {Button, toast} from "@heroui/react";


```

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

### Default Card Example

Source: https://heroui.com/en/docs/components/card

Default card example with imports and component function start. The full code is truncated with an 'Expand code' button.

```jsx
import {CircleDollar} from "@gravity-ui/icons";
import {Card, Link} from "@heroui/react";

export function Default() {
  return (

```

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

### Breadcrumbs custom separator example

Source: https://heroui.com/en/docs/components/breadcrumbs

Starts an example for customizing the separator between breadcrumb items. The code is truncated with an 'Expand code' button in the source.

```javascript
"use client";

import {Breadcrumbs} from "@heroui/react";

export default function BreadcrumbsCustomSeparator() {
```

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

### Install dependencies with bun

Source: https://heroui.com/en/docs/react/getting-started/cli

Installs dependencies for the created project using bun.

```bash
cd my-heroui-app && bun install
```

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

### Install HeroUI Native with bun

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

Install the latest beta version of heroui-native using bun.

```bash
bun add heroui-native@beta
```

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

### HeroUI Code Component Complete Example

Source: https://heroui.com/en/docs/react/migration/code

Complete example using the HeroUI Code component with color and size props. Requires installing @heroui/react.

```jsx
import { Code } from "@heroui/react";

export default function App() {
  return (
    <div className="space-y-4">
      <p>
        Install HeroUI with <Code>npm install @heroui/react</Code>
      </p>
      <div className="flex gap-2">
        <Code color="primary">Primary</Code>
        <Code color="success">Success</Code>
        <Code color="warning">Warning</Code>
        <Code color="danger">Danger</Code>
      </div>
      <div className="flex gap-2 items-center">
        <Code size="sm">Small</Code>
        <Code size="md">Medium</Code>
        <Code size="lg">Large</Code>
      </div>
    </div>
  );
}
```

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

### Autocomplete component example (truncated)

Source: https://heroui.com/en/docs/react/releases/v3-0-0-beta-4

Starts the Autocomplete component example. The code is truncated in the source with an 'Expand code' button, so only the initial lines are visible.

```tsx
"use client";

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

import {
```
Tokens:
Raw