Member Profile Card React component
A team directory with a rich profile card: pick someone from the list and see their status, local time, bio, stats and skills, follow them, message or copy their email, book a free slot for a meeting, and jump to their manager or teammates.
About the Member Profile Card component
Member Profile Card turns a team list into a useful directory. Choose a person and their card shows who they are, whether they're around, what time it is for them and what they work on.
The card is made for getting in touch: message them, copy their email, or open Meet to pick one of their free slots and book it. Manager and teammate rows move you through the org one person at a time, and Follow keeps their updates in your feed.
When to use it
Use it in team directories, workspace member pages, people search results and anywhere a name should open a richer profile.
For a large company directory with search and filters, use People Directory Table and open this card from a row.
Installation
Add the Member Profile Card component to your project with the shadcn CLI. It lands in components/member-profile-card.tsx as plain React + Tailwind CSS source you own and can edit.
npx shadcn@latest add @reactframe/member-profile-cardOr copy the source by hand and install its dependencies:
npm install motion clsx tailwind-mergeProps
<MemberProfileCard /> accepts 6 props, all optional.
| Prop | Type | Default |
|---|---|---|
| members | Member[] | MEMBERS |
| defaultId | string | "mia" |
| onMessage | (member: Member) => void | — |
| onBook | (member: Member, slot: string) => void | — |
| theme | "dark" | "light" | "dark" |
| className | string | — |
- membersMember[]Default: MEMBERS
- defaultIdstringDefault: "mia"
- onMessage(member: Member) => void
- onBook(member: Member, slot: string) => void
- theme"dark" | "light"Default: "dark"
- classNamestring
npm dependencies
Installed for you by the shadcn CLI.
Member Profile Card FAQ
- Where do the free slots come from?
- The demo shows four fixed slots with a couple marked busy. Fetch real availability from your calendar integration and pass it in; onBook receives the person and the chosen slot.
- How are manager and reports worked out?
- From managerId. The card shows who the person reports to, their direct reports, or teammates with the same manager when they have no reports.
- Can I hide the team list?
- Yes. Pass a single member and remove the nav, or render the card inside a popover next to a name elsewhere in your app.
- Does the local time update?
- The demo uses a fixed time string so server and browser render the same. Compute it from the person's time zone on the client after mount if you want it live.
- Is it accessible?
- The list is a nav with aria-current on the selected person, Follow is a toggle button, Meet expands with aria-expanded, slots are a radiogroup with busy times disabled, and confirmations are announced.
