GitHub

Points Boost

React callout for points multipliers and limited-time boosts. Supports optional countdown for near-ending gamification campaigns. Built on shadcn/ui + Tailwind. Open source.

Points Boost highlights time-bound gamification incentives like double XP weekends, referral multipliers, or seasonal bonuses with optional countdowns. Drop it above leaderboards, checkout, or task lists where gamification UI should nudge action without changing underlying points logic.

Double Points Weekendx2

Earn extra points for all tracked actions

Activate boost

Installation

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

Usage

Import the component:

import { PointsBoost } from "@/components/ui/points-boost"
<PointsBoost
  boost={{
    name: "Double Points Weekend",
    status: "active",
    description: "Earn extra points for all tracked actions",
    multiplier: 2,
  }}
  cta={{
    link: "#",
    text: "Activate boost",
  }}
/>

Examples

Basic

Double Points Weekendx2

Earn extra points for all tracked actions

Activate boost
<PointsBoost
  boost={{
    name: "Double Points Weekend",
    status: "active",
    description: "Earn extra points for all tracked actions",
    multiplier: 2,
  }}
  cta={{
    link: "#",
    text: "Activate boost",
  }}
/>

Countdown

Pass endDate to enable the countdown label.

Limited-Time Points Boostx3

Boost expires soon, activate now to maximize your points

Ends in 11h 29m 35sActivate now
<PointsBoost
  boost={{
    name: "Limited-Time Points Boost",
    status: "active",
    description: "Boost expires soon — activate now to maximize your points.",
    multiplier: 3,
    endDate: new Date(
      Date.now() + 1000 * 60 * 60 * 11 + 1000 * 60 * 29 + 1000 * 36
    ).toISOString(),
  }}
  cta={{
    link: "#",
    text: "Activate now",
  }}
/>

With Trophy

Use the Trophy SDK to fetch boosts for a points system server-side:

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

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

const response = await trophy.points.boosts("points-system-key");

Then pass and transform the response into PointsBoost props in your UI layer. Trophy’s status field (active, scheduled, or finished) tells you whether the boost is live, upcoming, or over; map end to this component’s optional endDate for the countdown.

const activeOrScheduledBoost = (response.boosts ?? [])[0]

const boost = activeOrScheduledBoost && {
  name: activeOrScheduledBoost.name,
  status: activeOrScheduledBoost.status,
  multiplier: activeOrScheduledBoost.multiplier,
  endDate: activeOrScheduledBoost.end ?? undefined,
}

{
  boost ? (
    <PointsBoost boost={boost} cta={{ link: "/rewards", text: "View boost" }} />
  ) : null
}

API Reference

Props

PropTypeDefaultDescription
boostPointsBoostDataRequiredBoost content configuration
ctaPointsBoostCtaRequiredCall-to-action link config

Types

type PointsBoostStatus = "active" | "scheduled" | "finished"

interface PointsBoostCta {
  link: string
  text: string
}

interface PointsBoostData {
  name: string
  status: PointsBoostStatus
  description?: string
  multiplier: number
  endDate?: string | Date
}
Raise an issue Contribute