Discord Badge
Live Discord server badge showing server name and online count with the Discord icon.
class-variance-authority
Loading...
Installation
$ shadcn add @jalco/discord-badgeUsage
import { DiscordBadge } from "@/components/discord-badge"<DiscordBadge serverId="your-server-id" />Async server component — fetches server info from the Discord widget API at build time, cached 1 hour via ISR.
Layouts
Inline
Compact pill showing the Discord icon and server name. The default layout.
Default
Tailwind CSS
Discord variant
Tailwind CSS
With online
Tailwind CSS3.2K online
Card
Feature card showing server name and online count.
API Reference
DiscordBadge
PropType
Notes
- Widget required. The target Discord server must have the widget enabled in Server Settings → Widget. If the widget is disabled, the badge returns
null. - Online count only. The public widget API only exposes online/presence count, not total members. Total member count requires a bot token — pass it manually via
data.memberCountif you have it from another source. - ISR caching. Server data is cached for 1 hour via
next.revalidate. No API key or bot token required. - Pre-fetched data. Pass the
dataprop to skip the API call — useful for static builds or when fetching data separately.