A team directory with initials avatars, presence dots, role badges, a keyboard-friendly row menu and a search field with an animated empty state.
npx shadcn@latest add https://hyperblur.dev/r/people-list.jsonWorks in any React project set up with the shadcn CLI. The file lands in components/hyperblur/people-list.tsx.
import { PeopleList } from "@/components/hyperblur/people-list"
<PeopleList onAction={(action, person) => console.log(action, person.name)} />| Prop | Type | Default | Description |
|---|---|---|---|
| people | { id: string; name: string; email: string; role: string; status?: "online" | "away" | "offline" }[] | defaultPeople | People to list. Avatar color is derived from the name. Owner and Admin roles get a colored badge. |
| searchable | boolean | true | Show the search field above the rows. It filters by name, email and role. |
| placeholder | string | "Search people" | Placeholder and accessible label of the search field. |
| accent | string | "#2f7bff" | Accent color used for focus rings and the open-row highlight. |
| onAction | (action: "edit" | "invite" | "remove", person: Person) => void | Called when a menu item is chosen. Remove also takes the row out of the list and Invite adds an Invited chip. |