Features
React Ui
React UI components
Install bun add @iconical/presencekit and import components from @iconical/presencekit/react-ui.
imports.tsxtsx
"use client";
import {
ActivityArtwork, ActivityCard, ConnectionStatus,
LivePresenceCard, LiveTeamCards, PresenceProfileCard, SpotifyCard,
} from "@iconical/presencekit/react-ui";Which component should I use?
| Component | Required data / props | What it displays |
|---|---|---|
LivePresenceCard | userId | Fetches/subscribes and displays a user card |
LiveTeamCards | userIds | Fetches/subscribes and displays approved users |
PresenceProfileCard | result | Presents an already available PresenceResult |
SpotifyCard | track | Presents Spotify now-playing data |
ActivityCard | activity | Presents one activity with artwork and details |
ActivityArtwork | activity | Image with alternate URL and monogram fallback |
ConnectionStatus | None | Live shared-connection mode and count |
Ready-made live card
LivePresenceCard.tsxtsx
<LivePresenceCard
userId="123456789012345678"
transport="auto"
theme={{ accent: "#ac1c23", border: "#3334" }}
loadingFallback={<p>Connecting…</p>}
errorFallback={<p>Presence unavailable.</p>}
/>Roster
LiveTeamCards.tsxtsx
<LiveTeamCards
userIds={["123456789012345678", "234567890123456789"]}
theme={{ accent: "#ac1c23" }}
/>Render from existing data
ActivityCards.tsxtsx
<PresenceProfileCard result={data} />
<SpotifyCard track={data.spotify} />
{data.presence?.activities.map((activity, index) => (
<ActivityCard key={activity.id ?? index} activity={activity} />
))}Theming and customization
Cards accept optional theme fields (accent, background, foreground, muted, border) plus className, style, and footer. They also support CSS custom properties such as --presence-accent, --presence-background, and --presence-radius.
LivePresenceCard/LiveTeamCards accept hook options (transport, intervalMs, enabled) and custom loading/error fallbacks. Use the underlying React hooks when you need a completely custom layout.
ActivityArtwork can be used independently and tries alternate images before showing an initials tile; see artwork.
Was this page helpful?