Compact List
A dense list of user profiles with avatar, name, role, and quick actions per row. Fits admin tables and directories where space stays tight.
A dense list of user profiles with avatar, name, role, and quick actions per row. Fits admin tables and directories where space stays tight.
Search blocks by description or jump to a page.
Compact List is a dense member directory. A "Team Members" heading sits above an "Add Member" button in a header row, then a card below holds a divided list of rows, one per user. Each row shows an avatar, a truncated name and email on the left, and on the right a status badge, a last-active timestamp, a role badge, and a three-dot dropdown menu. The dropdown contains Message, Edit, and Permissions actions, plus a destructive Remove option separated at the bottom.
The list is driven by an array of user objects, so you can add or remove members freely. The status badge renders in three visual states (filled, secondary, outline) depending on whether a member is active, away, or offline. The header, the action labels in the dropdown, and every piece of copy are all independent and safe to change without touching the layout.
Reach for this block on any admin or settings page inside a project management workspace where you need to show who is on the workspace and let managers act on individual members without leaving the screen. It fits tighter than a full profile grid when the list is long, and it fits better than a plain table when you need quick per-row actions rather than bulk selection.
A natural flow around it on an Application page:
Before
After
Each row holds the details that matter most in a shared workspace context:
Tip: keep the member list to a single page worth of rows and add pagination or a search input above the card once the list grows past roughly twenty members.