Team directoryPro

• Type: Block

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

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

• Access: Xzero Pro

• Registry id: team-directory

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

• Built from: Input, Avatar, Button, Motion

• Keywords: react team directory, employee directory, people search, staff directory ui, company directory, team list with profile

Use this when people need to browse a team and find contact details. Replace the sample people and portraits with your own directory data.

When to use

• An internal directory where people search colleagues and copy contact details.
• Team pages with department filters and a profile pane.

When not to use

• Use team-members to manage roles and invitations.
• Use team-showcase for a public, image-led team section.
• Use customers-table for large tabular people data.

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-directory

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 { TeamDirectory } from "@/components/xzero/blocks/team-directory/team-directory";

export function PeoplePage() {
  const router = useRouter();
  return <TeamDirectory onPersonSelect={(person) => router.push("/people/" + person.id)} />;
}

API reference

TeamDirectory

A searchable people list with Design, Engineering, and Operations filters (each with a count), availability, and a profile pane with focus, location, time zone, and a copyable email. People and portraits are sample data in the file.

Prop	Type	Default	Description
onPersonSelect	(person: { id: string; name: string; team: "Design" | "Engineering" | "Operations" }) => void	–	Called when a person is chosen from the list.

Accessibility

• Filter buttons are a labelled group with aria-pressed; person rows are buttons with aria-pressed.
• Escape in the search field clears the query.
• The profile pane is polite live content, so selection changes are announced.
• Copy success and failure are announced through role="status".

Motion

• The filter highlight and the row selection highlight glide with shared layoutIds on the morph spring.
• Filtered rows close their gaps with position layout animation and fade in or out.
• The profile pane fades up 4px when the person changes.
• Reduced motion removes layout animation and offsets and turns off CSS transitions.

Responsive behavior

• Container queries on the block: below 640px the copy button becomes icon-only; below 500px the profile pane moves under the list; below 400px the header stacks, search fills the width, and filter counts hide.

Performance

• Search and filters run in memory on every keystroke, and rows are not virtualized.
• For hundreds of people, filter on the server and paginate before passing data in.

Notes for AI

• Use for an internal directory or team page where people need contact details.
• Replace the people array, the Team union, and portrait paths with your directory data.
• Composes Xzero Avatar.

Related

• Team members: A members list where typed emails turn into chips and fly into pending invites as seats roll.
• Team showcase: An image led team introduction with profiles that open in place.
• Search field: A recognizable search entry point with clear affordances.
• 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