Features
React Ui
Install bun add @iconical/presencekit and import components from @iconical/presencekit/react-ui.
"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 |
|---|---|---|
|
| Fetches/subscribes and displays a user card |
|
| Fetches/subscribes and displays approved users |
|
| Presents an already available |
|
| Presents Spotify now-playing data |
|
| Presents one activity with artwork and details |
|
| Image with alternate URL and monogram fallback |
| None | Live shared-connection mode and count |
Ready-made live card
LivePresenceCard
PresenceKit · React UI
Live results are only available for Discord users who enabled PresenceKit sharing.
Roster
LiveTeamCards
PresenceKit · React UI
Live results are only available for Discord users who enabled PresenceKit sharing.
Render from existing data
<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?