PresenceBookmarks
Shows stacked user avatars indicating who is present on a cell
A component for displaying real-time presence indicators on notebook cells. Shows stacked user avatars with colored rings and hover cards for user details.
Installation
npx shadcn@latest add @nteract/presence-bookmarksNew to @nteract? pnpm dlx shadcn@latest registry add @nteract
Copy from nteract/elements.
Requires the avatar and hover-card primitives.
Usage
import { PresenceBookmarks, type User } from "@/components/cell/PresenceBookmarks"
const users: User[] = [
{ id: "1", name: "Alice Chen", picture: "https://...", color: "#ef4444" },
{ id: "2", name: "Bob Smith", color: "#3b82f6" },
]
export function CellPresence() {
return <PresenceBookmarks users={users} />
}Examples
Basic Usage
Shows user avatars with colored rings. Hover over an avatar to see user details.
const users = [
{ id: "1", name: "Alice Chen", picture: "...", color: "#ef4444" },
{ id: "2", name: "Bob Smith", picture: "...", color: "#3b82f6" },
{ id: "3", name: "Carol Davis", picture: "...", color: "#22c55e" },
]
<PresenceBookmarks users={users} />Overflow Indicator
When users exceed the limit, a "+N" indicator shows remaining count.
+2
<PresenceBookmarks users={users} limit={5} />Custom Limit
Adjust the number of visible avatars with the limit prop.
+4
<PresenceBookmarks users={users} limit={3} />Without Colors
Users without a color property display with a subtle border instead.
const users = [
{ id: "1", name: "Alice Chen", picture: "..." },
{ id: "2", name: "Bob Smith", picture: "..." },
]
<PresenceBookmarks users={users} />Custom Hover Content
Use renderUserContent to customize what displays in the hover card.
<PresenceBookmarks
users={users}
renderUserContent={(user) => (
<div className="flex flex-col gap-2">
<p className="font-semibold">{user.name}</p>
<p className="text-xs text-muted-foreground">
Currently editing this cell
</p>
</div>
)}
/>Props
PresenceBookmarks
| Prop | Type | Default | Description |
|---|---|---|---|
users | User[] | — | Array of users to display |
limit | number | 5 | Maximum number of avatars to show before overflow |
className | string | — | Additional CSS classes |
renderUserContent | (user: User) => ReactNode | — | Custom render function for hover card content |
User
| Property | Type | Required | Description |
|---|---|---|---|
id | string | Yes | Unique identifier for the user |
name | string | Yes | Display name |
picture | string | No | URL to user's avatar image |
color | string | No | CSS color for the ring around the avatar |