import { cn } from "@/lib/utils"; import { Tooltip, TooltipContent, TooltipProvider, TooltipTrigger, } from "@/components/ui/tooltip"; import { Button } from "@/components/ui/button"; interface DiscordOnlineProps { guildId: string; // Discord server ID to fetch presence count for inviteURL?: string; // Optional custom invite URL className?: string; label?: string; // Optional label for the tooltip (default: "members online in our Discord") } async function getPresenceCount(guildId: string): Promise { try { const res = await fetch( `https://discord.com/api/guilds/${guildId}/widget.json`, { next: { revalidate: 60 } }, ); if (!res.ok) return 0; const data = (await res.json()) as { presence_count?: number }; return Number(data?.presence_count) || 0; } catch { return 0; } } export async function DiscordOnline({ guildId, inviteURL, className, label = "members online in our Discord", }: DiscordOnlineProps) { const count = await getPresenceCount(guildId); return ( {count.toLocaleString()} {label} ); }

Prop	Type	Default	Description
guildId	`string`	`-`	Target Discord Guild ID
inviteURL	`string`	`-`	Target Discord Guild Invite URL
label	`string`	`-`	Label to display
className	`string`	`-`	Optional Class name to style the component

Discord Online

Preview

Installation

Usage

Import the component

Use like this

Props

Dependencies

Become a Sponsor