Points Badge

The Points Badge is a lightweight gamification readout for points and XP totals—use it anywhere gamification scores need a compact header. Compose with Points Chart or Points Levels List when users need headline totals plus deeper progress gamification elsewhere in the layout.

Installation

npx shadcn@latest add https://ui.trophy.so/points-badge

Usage

Import the component:

import { PointsBadge } from "@/components/ui/points-badge"

Examples

Basic Usage

<PointsBadge name="XP" total={2500} />

Sizes

Available in three sizes: sm, default, and lg.

<PointsBadge name="XP" total={1250} size="sm" />
<PointsBadge name="XP" total={1250} size="default" />
<PointsBadge name="XP" total={1250} size="lg" />

With Trophy

Use the Trophy SDK to fetch the user's points total server-side:

import { TrophyApiClient } from '@trophyso/node';

const trophy = new TrophyApiClient({
  apiKey: 'YOUR_API_KEY'
});

const response = await trophy.users.points("user-id", "points-system-key");

Then pass the response into PointsBadge props in your UI layer:

<PointsBadge
  name={response.name}
  badgeUrl={response.badgeUrl}
  total={response.total}
/>

API Reference

Props