Features

Widgets

React Widgets and Theming

ℹ️

React-only UI exports

The widgets are optional React components. Vue, Svelte and other projects can render their own UI with the core SDK.

The optional @iconical/presence/react-ui entrypoint includes small React components for showing approved Discord presence without having to design every card from scratch. They use inline styles and do not ship a global stylesheet.

Widget questions

Available components

Component	Purpose
`LivePresenceCard`	Connected, auto-updating profile and activity card
`LiveTeamCards`	Consent-filtered team roster
`PresenceProfileCard`	Render a supplied `PresenceResult` without fetching
`ActivityCard`	Display a game/activity and artwork fallback
`SpotifyCard`	Display currently playing Spotify track and progress
`ConnectionStatus`	Show aggregate connection mode and count

Step 1 — Render a live profile

example.tsxtsx

"use client";

import { LivePresenceCard } from "@iconical/presence/react-ui";

export function DiscordProfile() {
  return (
    <LivePresenceCard
      userId="123456789012345678"
      theme={{
        accent: "#ac1c23",
        background: "#171717",
        foreground: "#ffffff",
        muted: "#a3a3a3",
        border: "#383838",
      }}
      style={{ maxWidth: 380 }}
      footer={<small>Powered by PresenceKit</small>}
    />
  );
}

Replace the ID with a user who has approved /confirm. The component handles fetching, automatic transport selection and unmount cleanup. It accepts optional loadingFallback and errorFallback React nodes.

Step 2 — Render a team

example.tsxtsx

"use client";
import { LiveTeamCards, ConnectionStatus } from "@iconical/presence/react-ui";

export function TeamPanel() {
  return (
    <section>
      <ConnectionStatus />
      <LiveTeamCards
        userIds={["123456789012345678", "222222222222222222"]}
        theme={{ accent: "#ac1c23" }}
      />
    </section>
  );
}

Only eligible members appear. Both widgets reuse the shared browser-tab manager.

Customize appearance

Set theme, className, style, and an optional footer slot. A parent can also provide CSS variables:

styles.csscss

.presence-demo {
  --presence-accent: #ac1c23;
  --presence-background: #151515;
  --presence-foreground: #fafafa;
  --presence-muted: #a3a3a3;
  --presence-border: #333333;
  --presence-radius: 14px;
  --presence-padding: 16px;
  --presence-gap: 10px;
}

The component theme values can override these CSS variables. External image and link URLs must use HTTPS. ActivityCard and PresenceProfileCard support artworkOverrides keyed by Discord application ID.

Build your own UI

All widgets are optional. Use core methods and typed results for custom React components or for other frameworks. See API reference, Artwork, and Shared connections.

Was this page helpful?

Spotify Frameworks