Team showcase
ProAn image led team introduction with profiles that open in place.
Live block · sample data
- About or company pages that introduce the team with portraits.
- Sections that need one of four layouts: gallery, filmstrip, directory, or spotlight.
- Use team-directory for an internal, searchable people list.
- Use team-members for managing members and roles.
- Use testimonial-stage for quotes from customers.
Installation
Pro source and install commands unlock with a Pro plan.
Usage
Use this when people behind a product deserve a clear introduction. Supply accurate profiles, portraits, and destinations.
example.tsx
import { TeamShowcase } from "@/components/arc/blocks/team-showcase/team-showcase"; export function About() { return ( <TeamShowcase variant="spotlight" onPersonSelect={(person) => router.push("/team/" + person.id)} /> );}Directory layout
example.tsx
<TeamShowcase variant="directory" onPersonSelect={(person) => track("team_profile_open", { id: person.id })}/>API reference
2 parts. The first is the root.
TeamShowcase
An image-led team section in four layouts, with profiles that open in place and copyable sample contact details. People and portraits are sample data.
PropTypeDefaultDescription
variant"gallery" | "filmstrip" | "directory" | "spotlight""gallery"Layout of the section.onPersonSelect(person: { id: string; name: string; role: string }) => void–Called when a person is chosen. Receives the full sample person object.TeamShowcaseReview
Demo wrapper with a SegmentedControl to switch variants. Use it for previews only.
No props.
- Selection buttons use aria-pressed; the directory rows use aria-expanded with aria-controls.
- Profile changes are announced in aria-live regions.
- Copy buttons are labeled per person, such as "Copy Maya's email".
- Profiles crossfade and expand in place when selection changes.
- Reduced motion removes offsets and height animation.
- It is a container query root, so layouts adapt to the section width, not the viewport.
- At 760px container width the header stacks and details move under the photos.
- At 440px the gallery and filmstrip become horizontal snap scrollers and spotlight stacks the photo under the copy.
- Portraits load through next/image with fill and per-layout sizes.
- The selected person is scrolled into view with a smooth scroll that becomes instant under reduced motion.
Notes for AI
Give your coding assistant the Markdown reference instead of screenshots.
- Use on an about or company page to introduce the team.
- Replace the people array and portraits; remove the demo contact details if they should not be public.
- Render TeamShowcase with a fixed variant; TeamShowcaseReview exists for the docs preview.
- Composes Arc CopyButton and SegmentedControl.
The full library index for assistants is at /llms.txt.