HeroUI ListBox

Component 1

About

HeroUI v3 ListBox — an accessible, keyboard-navigable list of selectable options with single and multiple selection, sections with headers, per-item labels, descriptions, avatars and keyboard-shortcut hints, disabled items, custom selection indicators, controlled selection state, custom render functions, and windowed virtualization for large datasets. A thin re-export of the genuine @heroui/react package with @heroui/styles, so consumers install and render the real HeroUI primitive.

Built with React and Tailwind. Copy the prompt and paste it into Claude Code, Cursor or Lovable: your agent adds HeroUI ListBox to your project and fits it to your theme.

Code

How HeroUI ListBox is used: the demo's code. The component's own source comes with a free account.

Usage.tsx

"use client"

import {
  Description,
  Label,
  ListBox,
  ListLayout,
  Virtualizer,
} from "@/components/ui/heroui-list-box"

interface User {
  id: number
  name: string
  email: string
}

export default function Virtualization() {
  const firstNames = [
    "Emma",
    "Liam",
    "Olivia",
    "Noah",
    "Ava",
    "James",
    "Sophia",
    "Oliver",
    "Isabella",
    "Lucas",
    "Mia",
    "Ethan",
    "Charlotte",
    "Mason",
    "Amelia",
    "Logan",
    "Harper",
    "Alexander",
    "Ella",
    "Benjamin",
  ]

  const lastNames = [
    "Smith",
    "Johnson",
    "Williams",
    "Brown",
    "Jones",
    "Garcia",
    "Miller",
    "Davis",
    "Rodriguez",
    "Martinez",
    "Anderson",
    "Taylor",
    "Thomas",
    "Jackson",
    "White",
    "Harris",
    "Clark",
    "Lewis",
    "Robinson",
    "Walker",
  ]

  function generateUsers(n: number): User[] {
    const users: User[] = []

    for (let i = 0; i < n; i++) {
      const firstName = firstNames[i % firstNames.length]
      const lastName =
        lastNames[Math.floor(i / firstNames.length) % lastNames.length]
      const name = `${firstName} ${lastName}`

      users.push({
        email: `${firstName?.toLowerCase()}.${lastName?.toLowerCase()}@acme.com`,
        id: i + 1,
        name,
      })
    }

    return users
  }

  const users = generateUsers(1000)

  return (
    <Virtualizer layout={ListLayout} layoutOptions={{ rowHeight: 50 }}>
      <ListBox
        aria-label="Virtualized list with 1000 items"
        className="h-[400px] w-[300px] overflow-y-auto"
        items={users}
      >
        {(user) => (
          <ListBox.Item id={user.id} textValue={user.name}>
            <div className="flex flex-col">
              <Label>{user.name}</Label>
              <Description>{user.email}</Description>
            </div>
            <ListBox.ItemIndicator />
          </ListBox.Item>
        )}
      </ListBox>
    </Virtualizer>
  )
}