Team showcasePro

• Type: Block

• Page: https://ui.xzero.co.uk/components/blocks/team-showcase

• Markdown: https://ui.xzero.co.uk/components/blocks/team-showcase/markdown

• Access: Xzero Pro

• Registry id: team-showcase

• Source file: registry/blocks/team-showcase/team-showcase.tsx

• Built from: Avatar, Button, Motion

• Keywords: react team section, meet the team, team page, about us team grid, team profiles, staff showcase

Use this when people behind a product deserve a clear introduction. Supply accurate profiles, portraits, and destinations.

When to use

• About or company pages that introduce the team with portraits.
• Sections that need one of four layouts: gallery, filmstrip, directory, or spotlight.

When not to use

• 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

Register both Xzero UI namespaces in your project's components.json:

{
  "registries": {
    "@xzero-ui": "https://mcp.xzero.co.uk/r/{name}.json",
    "@xzero-ui-pro": "https://mcp.xzero.co.uk/r/pro/{name}.json"
  }
}

npx shadcn@4.23.0 add @xzero-ui-pro/team-showcase

Install xzero-foundation once, and import @/components/xzero/foundation.css in your app root. No Xzero token is used by this snapshot. For sample portraits, photos, fonts, or logos, download https://mcp.xzero.co.uk/install-assets.mjs and run node xzero-install-assets.mjs <receiving-project>.

Usage

import { TeamShowcase } from "@/components/xzero/blocks/team-showcase/team-showcase";

export function About() {
  return (
    <TeamShowcase
      variant="spotlight"
      onPersonSelect={(person) => router.push("/team/" + person.id)}
    />
  );
}

Examples

Directory layout

<TeamShowcase
  variant="directory"
  onPersonSelect={(person) => track("team_profile_open", { id: person.id })}
/>

API reference

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.

Prop	Type	Default	Description
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.

Accessibility

• 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".

Motion

• Profiles crossfade and expand in place when selection changes.
• Reduced motion removes offsets and height animation.

Responsive behavior

• 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.

Performance

• 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

• 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 Xzero CopyButton and SegmentedControl.

Related

• Team directory: Searchable people, team filters, and a focused profile panel.
• Studio perspectives: Portrait led editorial stories with a focused reading state.
• Team members: A members list where typed emails turn into chips and fly into pending invites as seats roll.
• Avatar: A compact identity marker for people and accounts.

Guidance for AI tools

Blocks are complete, self-contained screens with sample data. Replace the sample data and connect the callbacks described above. Follow the declared prop types and do not invent props. Keep keyboard access, reduced motion support, and both light and dark themes intact when adapting it.

Full library index: https://ui.xzero.co.uk/llms.txt