Team Directory
A searchable grid of member cards with avatar, role, team badge, and online status dot for finding people across the workspace.
A searchable grid of member cards with avatar, role, team badge, and online status dot for finding people across the workspace.
Search blocks by description or jump to a page.
The source for every Application block is included with Basic and Pro. Pick a plan to copy the code.
Already purchased? Log in
Team Directory is the workspace people-finder: a search bar with a filter button, then a three-column grid of six member cards. Each card shows avatar, name, role, a team Badge (Engineering, Design, Product), and a status dot that distinguishes online, away, and offline with foreground opacity rather than raw color tokens. The header pairs the panel title with the count, 6 members across all teams, and an Invite member action.
Members are one flat array; status display maps to statusClasses and statusLabel records keyed by the status union. The status dot ring ensures the dot reads clearly over any card background color.
Reach for this block on a people directory or team admin page, wired to your members endpoint. Connect the search input and Filter button to client-side filtering or a query param.
A natural flow around it on an Application Pro page:
Before
After
One strong use is the workspace member grid. Other directory layouts:
Tip: status dots are presence, not permission; pair them with a last-active time in the tooltip so absence of green is not alarming.