ItemGroupExample() — ui Function Reference

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

Function tsx DocumentationAtlas Changelog

Entity Profile

DocumentationAtlas→ Changelog→ ItemGroupExample() — ui Function Reference

Dependency Diagram

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

Relationship Graph

Source Code

apps/v4/examples/radix/item-group.tsx lines 34–58

export function ItemGroupExample() {
  return (
    <ItemGroup className="max-w-sm">
      {people.map((person, index) => (
        <Item key={person.username} variant="outline">
          <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>
      ))}
    </ItemGroup>
  )
}