Patterns
People grid tile
View in FigmaPeople-directory tile — searchable, paginated cards from flat employee records, CMS-serializable throughout.
Install
npx shadcn@latest add @alix/peopleGridTilePreview
Amelia Ward
Managing Director
Daniel Cho
Director
Maya Iqbal
Senior Vice President
Elliot Price
Director
Nora Shah
Managing Director
Hugo Martin
Senior Vice President
Priya Lane
Director
Caleb Brooks
Managing Director
Elena Rossi
Vice President
Jonah Lee
Director
Sofia Bennett
Senior Vice President
Miles Carter
Vice President
Usage
import PeopleGridTile, { type PeopleGridTileProps } from "@/components/peopleGridTile";
const fromCMS: PeopleGridTileProps = await getPeopleGridTile();
<PeopleGridTile {...fromCMS} />
<PeopleGridTile
people={[
{
name: "Amelia Ward",
jobTitle: "Managing Director",
location: "London",
profileHref: "/people/amelia-ward",
email: "amelia.ward@example.com",
profilePicture: { src: "/people/amelia-ward.jpg", alt: "Amelia Ward" },
},
]}
searchPlaceholder="Search people"
/>Examples
A single page of results
With fewer than a page of people the tile hides the pager entirely; searchPlaceholder names the audience.
Amelia Ward
Managing Director
Daniel Cho
Director
Maya Iqbal
Senior Vice President
Elliot Price
Director
Nora Shah
Managing Director
Hugo Martin
Senior Vice President
<PeopleGridTile
people={team} // six advisors — one page, so no pagination renders
searchPlaceholder="Search advisors"
/>Add capability and location facets
When visitors need to filter as well as search, compose PeopleGrid — it wraps the same EmployeeCards with faceted filters.
Narrow your search
Capability
Location
Amelia Ward
Managing Director
Daniel Cho
Director
Maya Iqbal
Senior Vice President
Elliot Price
Director
Nora Shah
Managing Director
Hugo Martin
Senior Vice President
Priya Lane
Director
Caleb Brooks
Managing Director
Elena Rossi
Vice President
Jonah Lee
Director
Sofia Bennett
Senior Vice President
Miles Carter
Vice President
<PeopleGrid
people={people}
filters={[
{
title: "Capability",
options: [
{ text: "Restructuring", value: "restructuring" },
{ text: "Transactions", value: "transactions" },
],
},
{
title: "Location",
options: [
{ text: "London", value: "london" },
{ text: "New York", value: "new-york" },
],
},
]}
/>When to use it
Use it for
- A self-contained team or leadership directory that searches and paginates the moment you drop your list in.
- Practice or office pages where visitors scan people by name, title, or location.
- Setting searchPlaceholder to name the audience, e.g. "Search advisors".
Reach for something else
- Directories that also need capability or location facets — use PeopleGrid instead.
- A single person's profile card with contact links — use EmployeeCard instead.
- Server-side search or paging over large datasets — replace the marked client seam, or compose Grid and Pagination directly.
Props
| Prop | Type | Default | Description |
|---|---|---|---|
| people | EmployeeCardProps[] | — | Flat employee records rendered as cards, searched and paginated in the tile. |
| EmployeeCardProps | { name: string; jobTitle: string; location: string; profileHref: string; linkedIn?: string; email?: string; profilePicture: { src: string; alt: string } } | — | Serializable person data. `profileHref` should come from a stable slug or id, not the display name. |
| searchPlaceholder | string | "Search" | Placeholder text for the client-side search input. |
| escape hatch | compose lower layer | — | For server-side search or pagination, replace the marked client-side block in the installed file or compose Grid and Pagination directly. |