A grid of teammate cards with presence dots that pulse when online, status notes, a typing indicator, local times and message and call actions, filtered by a status switch and a search field.
4 online2 away1 busy1 offline
npx shadcn@latest add https://hyperblur.dev/r/profile-team-presence.jsonWorks in any React project set up with the shadcn CLI. The file lands in components/hyperblur/profile-team-presence.tsx.
import { ProfileTeamPresence } from "@/components/hyperblur/profile-team-presence"
<ProfileTeamPresence onMessage={(m) => console.log(m.name)} />| Prop | Type | Default | Description |
|---|---|---|---|
| title | string | "Who is around" | Section heading. |
| subtitle | ReactNode | Replaces the status counts under the heading. | |
| members | { name; role; status: "online" | "away" | "busy" | "offline"; note; localTime; city; hue; typing? }[] | 8 members | Teammates. typing shows the animated dots. |
| defaultFilter | "all" | "online" | "away" | "busy" | "offline" | "all" | Status filter on first render. |
| onMessage | (member: ProfilePresenceMember) => void | Called by the message button. | |
| onCall | (member: ProfilePresenceMember) => void | Called by the call button. Disabled for busy and offline members. | |
| accent | string | "#10b981" | Online dot and action hover color. |
| className | string | "" | Extra classes for the section element. |
| style | CSSProperties | Inline styles merged after the accent variable. |