ItemGroupExample() — ui Function Reference

Architecture documentation for the ItemGroupExample() function in item-group.tsx from the ui codebase.

Function tsx ComponentRegistry ChartRegistry

Entity Profile

ComponentRegistry→ ChartRegistry→ ItemGroupExample() — ui Function Reference

Dependency Diagram

graph TD
  61bba85b_c3b1_fc17_635b_979e427c084c["ItemGroupExample()"]
  5bec9550_b096_69f3_ae83_b4a632e604b9["item-group.tsx"]
  61bba85b_c3b1_fc17_635b_979e427c084c -->|defined in| 5bec9550_b096_69f3_ae83_b4a632e604b9
  style 61bba85b_c3b1_fc17_635b_979e427c084c fill:#6366f1,stroke:#818cf8,color:#fff

Relationship Graph

Source Code

apps/v4/registry/new-york-v4/examples/item-group.tsx lines 39–68

export default function ItemGroupExample() {
  return (
    <div className="flex w-full max-w-md flex-col gap-6">
      <ItemGroup>
        {people.map((person, index) => (
          <React.Fragment key={person.username}>
            <Item>
              <ItemMedia>
                <Avatar>
                  <AvatarImage src={person.avatar} className="grayscale" />
                  <AvatarFallback>{person.username.charAt(0)}</AvatarFallback>
                </Avatar>
              </ItemMedia>
              <ItemContent className="gap-1">
                <ItemTitle>{person.username}</ItemTitle>
                <ItemDescription>{person.email}</ItemDescription>
              </ItemContent>
              <ItemActions>
                <Button variant="ghost" size="icon" className="rounded-full">
                  <PlusIcon />
                </Button>
              </ItemActions>
            </Item>
            {index !== people.length - 1 && <ItemSeparator />}
          </React.Fragment>
        ))}
      </ItemGroup>
    </div>
  )
}