Item: People

A grouped list of people. Separators start where the text starts, whatever sits in the media slot, so they line up under the names.

Preet Suthar

@preetsuthar17

Emil Kowalski

@emilkowalski

Guillermo Rauch

@rauchg

Lee Robinson

@leerob

import { IconPlus } from "@tabler/icons-react"

import { Avatar, AvatarFallback, AvatarImage } from "@/components/ui/avatar"
import { Button } from "@/components/ui/button"
import {
  Item,
  ItemActions,
  ItemContent,
  ItemDescription,
  ItemGroup,
  ItemMedia,
  ItemTitle,
} from "@/components/ui/item"

const people = [
  { handle: "preetsuthar17", name: "Preet Suthar" },
  { handle: "emilkowalski", name: "Emil Kowalski" },
  { handle: "rauchg", name: "Guillermo Rauch" },
  { handle: "leerob", name: "Lee Robinson" },
]

export function ItemPeople() {
  return (
    <ItemGroup variant="grouped" className="max-w-sm">
      {people.map((person) => (
        <Item key={person.handle} size="sm">
          <ItemMedia>
            <Avatar size="lg">
              <AvatarImage
                src={`https://github.com/${person.handle}.png`}
                alt=""
              />
              <AvatarFallback>
                {person.name
                  .split(" ")
                  .map((part) => part[0])
                  .join("")}
              </AvatarFallback>
            </Avatar>
          </ItemMedia>
          <ItemContent>
            <ItemTitle>{person.name}</ItemTitle>
            <ItemDescription>@{person.handle}</ItemDescription>
          </ItemContent>
          <ItemActions>
            <Button
              variant="ghost"
              size="icon-sm"

              aria-label={`Invite ${person.name}`}
            >
              <IconPlus />
            </Button>
          </ItemActions>
        </Item>
      ))}
    </ItemGroup>
  )
}

Add this example

This adds the example as components/examples/item/people.tsx, together with the Item component and the HextaUI theme tokens it needs.

pnpm dlx shadcn@latest add https://hextaui.com/r/item-people.json

To add only the component, follow the Item installation.

Props in this example

The Item props this example sets, from the API reference.

Item

Prop	Type	Default
`size`	`"default" \| "sm" \| "xs"`	`"default"`

ItemGroup

Prop	Type	Default
`variant`grouped puts items on one surface with automatic separators.	`"default" \| "grouped"`	`"default"`

Every prop is in the Item API reference.

More Item examples

See them all, with keyboard support and accessibility notes, on the Item page.