Team
v1.0.20Updated 19 Oct 2026Team / people section with portrait cards, bios and social links. Copy-paste block; baked-in demo content (edit the JSX to customise).
Preview
Live · 12 stories▸Why this is recommendedteampeopleaboutmembers+3
Team — grid.
- ✓About pages
- ✓Company / careers pages
- ✓Marketing pages
- Grid, with-bio, compact and with-socials layouts
- Photo + name + role per member
- members is the one prop that drives every layout, and it defaults to [] - a team member is a named human being, so we ship none rather than eight invented colleagues on the consumer own about page (condo69 fb_bc8045e2 / fb_f8fba1de)
- FIXED: TeamWithDepartments used to slice the roster BY INDEX (TEAM.slice(2, 4), [TEAM[1], TEAM[6]]), so a shorter list produced undefined members and one person appeared in two departments. Departments now carry their own people, and any falsy member is filtered out before render
- Every social icon renders only for a key holding a real URL; a member with none shows no row. All of them used to be href-hash
- TeamHiringCta renders NO button until hiringHref or onHiringClick is given - it used to be a dead anchor
- Every block renders correctly for 0, 1 and many members, and no block silently truncates the caller roster
- ✕In-app team rosters (use a data table)
Install
Ask your agent, or call the MCP tool directly. The resolved bundle is written into your project.
Usage
Tick variants in the left menu — each adds a tab with that variant’s real story source, the same code the preview above renders.
Props
classNameOptional wrapper class override
—labelsOverride every built-in display string across the team family (eyebrows, headings, subcopy, department and CTA chrome, aria-labels) for i18n or white-labelling. Merged over DEFAULT_TEAM_LABELS.
—membersThe people to show: [{ name, role, bio?, avatarUrl?, socials? }] where socials holds real URLs / mailtos. One prop drives every layout. Defaults to [] - a default roster would introduce eight people who do not work at the consumer company. With none, a block shows labels.emptyMembers. MCP feedback fb_bc8045e2 / fb_f8fba1de.
—departmentsTeamWithDepartments only: the org chart grouped BY THE CALLER, each group carrying its own people. Nothing is derived from `members` by index any more - the old slice arithmetic produced undefined members on a shorter roster and listed one person twice. Defaults to [].
—hiringHrefTeamHiringCta only: where the open-seat button goes, your careers page. Until this (or onHiringClick) is given the button renders NOTHING; it used to be a dead anchor that looked clickable.
—onHiringClickTeamHiringCta only: what the open-seat button does. Safe to combine with hiringHref (it fires before navigation); on its own it makes the button a real type=button.
—linkComponentThe host app link component for every anchor these blocks render - the social icons and the hiring CTA. Defaults to a plain anchor, which in a routed app reloads the whole document (fb_bf7dc63a).
—