Sections
People grid
View in FigmaThe people directory section — flat person records with tag filters and client-side faceted filtering.
Install
npx shadcn@latest add @alix/peopleGridPreview
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
Usage
import PeopleGrid, { type PeopleGridProps } from "@/components/peopleGrid";
const fromCMS: PeopleGridProps = await getPeopleDirectory();
<PeopleGrid {...fromCMS} />
<PeopleGrid
filters={[
{
title: "Capability",
options: [
{ text: "Restructuring", value: "restructuring" },
{ text: "Transactions", value: "transactions" },
],
},
]}
people={[
{
name: "Amelia Ward",
jobTitle: "Managing Director",
location: "London",
profileHref: "/people/amelia-ward",
profilePicture: { src: "/people/amelia-ward.jpg", alt: "Amelia Ward" },
tags: ["restructuring"],
},
]}
/>Examples
Filtering on a single facet
One filter category is enough — a capability rail beside the grid, ANDing nothing and ORing within the one facet.
Narrow your search
Capability
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={team}
filters={[
{
title: "Capability",
options: [
{ text: "Restructuring", value: "restructuring" },
{ text: "Transactions", value: "transactions" },
{ text: "Performance", value: "performance" },
{ text: "Investigations", value: "investigations" },
],
},
]}
/>Drop the facets for a plain grid
When there's nothing to filter by, skip the sidebar and compose PeopleGridTile directly — search, grid, and pagination without the rail.
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
import PeopleGridTile from "@/components/peopleGridTile";
<PeopleGridTile people={team} searchPlaceholder="Search advisors" />When to use it
Use it for
- The people directory of a firm-size team — a faceted filter rail beside a searchable, paginated grid.
- Any collection filtered by tags a person carries: capability, location, or practice, ANDed across categories.
- CMS-fed people data — flat records with a tags array spread straight from the query.
Reach for something else
- A grid with no facets to filter by — compose PeopleGridTile directly for just search and paging.
- A single person's card outside a collection — use EmployeeCard.
- Server-scale directories where filtering can't happen client-side — replace the marked filter seam with a server query.
Props
| Prop | Type | Default | Description |
|---|---|---|---|
| people | (EmployeeCardProps & { tags: string[] })[] | — | Flat person records plus filter tag values. The block filters this array before rendering PeopleGridTile. |
| filters | { title: string; options: { text: string; value: string }[] }[] | — | Filter categories and options. Option `value` must match the strings stored in each person's `tags` array. |
| EmployeeCardProps | { name: string; jobTitle: string; location: string; profileHref: string; linkedIn?: string; email?: string; profilePicture: { src: string; alt: string } } | — | Serializable card data for each person. |
| filter behavior | client-side AND/OR | — | ANDs across categories and ORs within a category. Replace the marked block for server-side filtering at scale. |
| escape hatch | compose lower layer | — | For server-side facets or custom paging, compose List, PeopleGridTile, Grid, and Pagination directly. |