Team directory
ProSearchable people, team filters, and a focused profile panel.
Live block · sample data
- An internal directory where people search colleagues and copy contact details.
- Team pages with department filters and a profile pane.
- 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
Pro source and install commands unlock with a Pro plan.
Usage
Use this when people need to browse a team and find contact details. Replace the sample people and portraits with your own directory data.
example.tsx
import { TeamDirectory } from "@/components/arc/blocks/team-directory/team-directory"; export function PeoplePage() { const router = useRouter(); return <TeamDirectory onPersonSelect={(person) => router.push("/people/" + person.id)} />;}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.
PropTypeDefaultDescription
onPersonSelect(person: { id: string; name: string; team: "Design" | "Engineering" | "Operations" }) => void–Called when a person is chosen from the list.- 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".
- 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.
- 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.
- 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
Give your coding assistant the Markdown reference instead of screenshots.
- 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 Arc Avatar.
The full library index for assistants is at /llms.txt.
