GitHub

Achievement Card

React achievement card with totals, featured badges, and scrollable lists for profile and progress surfaces. Fits achievement UI examples in SaaS, consumer and community products. Open source, built on shadcn/ui + Tailwind.

The Achievement Card summarizes achievement gamification for a user—headline stats, spotlighted badges, and scrollable collections without leaving the card, suited to profile and progress hubs in gamification-heavy products.

4

Badges Unlocked

8% of usersWellness God
24% of users10 day streak
5% of usersChatbot King

All Achievements

Wellness God

Meditate 30 days in a row

10 day streak

Open app for 10 days

60%

Chatbot King

Chat with AI 500 times

Fully Hydrated Bro

Drink 5,000L of water total

32%

Installation

npx shadcn@latest add https://ui.trophy.so/achievement-card

Usage

import { AchievementCard } from "@/components/ui/achievement-card"
<AchievementCard
  highlightedAchievements={[
    {
      id: "highlight-1",
      name: "Wellness God",
      trigger: "streak",
      achievedAt: "2024-01-01T00:00:00Z",
      rarity: 8,
    },
    {
      id: "highlight-2",
      name: "10 day streak",
      trigger: "streak",
      achievedAt: "2024-01-01T00:00:00Z",
      rarity: 24,
    },
    {
      id: "highlight-3",
      name: "Chatbot King",
      trigger: "api",
      achievedAt: "2024-01-01T00:00:00Z",
      rarity: 5,
    },
  ]}
  achievements={[
    {
      id: "list-1",
      name: "10 day streak",
      description: "Open app for 10 days",
      trigger: "streak",
      achievedAt: "2024-01-01T00:00:00Z",
      progress: 60,
    },
    {
      id: "list-2",
      name: "Fully Hydrated Bro",
      description: "Drink 5,000L of water total",
      trigger: "metric",
      achievedAt: "2024-01-01T00:00:00Z",
      progress: 32,
    },
  ]}
/>

Examples

Basic Usage

4

Badges Unlocked

8% of usersWellness God
24% of users10 day streak
5% of usersChatbot King

All Achievements

Wellness God

Meditate 30 days in a row

10 day streak

Open app for 10 days

60%

Chatbot King

Chat with AI 500 times

Fully Hydrated Bro

Drink 5,000L of water total

32%
<AchievementCard
  highlightedAchievements={[
    {
      id: "highlight-1",
      name: "Wellness God",
      trigger: "streak",
      achievedAt: "2024-01-01T00:00:00Z",
      rarity: 8,
    },
    {
      id: "highlight-2",
      name: "10 day streak",
      trigger: "streak",
      achievedAt: "2024-01-01T00:00:00Z",
      rarity: 24,
    },
    {
      id: "highlight-3",
      name: "Chatbot King",
      trigger: "api",
      achievedAt: "2024-01-01T00:00:00Z",
      rarity: 5,
    },
  ]}
  achievements={[
    {
      id: "list-1",
      name: "10 day streak",
      description: "Open app for 10 days",
      trigger: "streak",
      achievedAt: "2024-01-01T00:00:00Z",
      progress: 60,
    },
    {
      id: "list-2",
      name: "Fully Hydrated Bro",
      description: "Drink 5,000L of water total",
      trigger: "metric",
      achievedAt: "2024-01-01T00:00:00Z",
      progress: 32,
    },
  ]}
/>

With Trophy

Use the Trophy SDK to fetch a user's achievements server-side:

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

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

const response = await trophy.users.achievements("user-id");

Then pass and transform the response into AchievementCard props in your UI layer:

const achievements = response
const highlightedAchievements = achievements.slice(0, 3)

<AchievementCard
  highlightedAchievements={highlightedAchievements}
  achievements={achievements}
/>

API Reference

PropTypeDefaultDescription
highlightedAchievementsUserAchievement[]RequiredSeparate featured achievements shown in the top section
achievementsUserAchievement[]RequiredList achievements rendered in the lower section and used for totals
badgeSize"sm" | "default" | "lg""default"Badge size used by the lower list
lockedStyle"grayscale" | "silhouette" | "hidden""grayscale"Locked row presentation in the embedded AchievementList
onAchievementClick(achievement) => void-Click handler for badges and list rows
Raise an issue Contribute