Gumtree UI
  • Docs
  • Forge
  • ContributorGrid

ContributorGrid

A grid of square contributor avatars with a '+N more' overflow indicator.

Import

import { ContributorGrid } from "@gumtree/ui/forge/ContributorGrid";

Props

PropTypeDefaultDescription
contributors*Contributor[]-Array of { name, avatarUrl?, placeholder?, color?, href? }
overflownumber-Number of additional contributors not shown

Examples

With Overflow

A grid showing some contributors with a '+N more' indicator.

B
A
B
C
D
E
+4
<ContributorGrid
  contributors={[
    { name: "brendan", placeholder: "B" },
    { name: "alice", placeholder: "A" },
    { name: "bob", placeholder: "B" },
    { name: "carol", placeholder: "C" },
    { name: "dave", placeholder: "D" },
    { name: "eve", placeholder: "E" },
  ]}
  overflow={4}
/>

Small Set

A small team with no overflow.

A
B
<ContributorGrid
  contributors={[
    { name: "alice", placeholder: "A" },
    { name: "bob", placeholder: "B" },
  ]}
/>