Gamification UI Kit by Trophy<br>Search documentation...Search...CtrlK

GitHub

Gamification UI Kit by TrophyGamification UI Kit by Trophy

Trophy's Gamification UI Kit is an open-source library of gamification UI components built on shadcn/ui and Tailwind CSS. Drop-in React components for streaks, achievements, leaderboards, points, and more — ready to copy and customize.<br>svg]:px-2.5" href="/docs">Get Startedsvg]:px-2.5" href="/docs/components">View Components

19,845

XP

12daysstreak

250 tasks

11% of users1,000 tasks

Your points progress<br>Last 7 daysLast 4 weeksLast 3 monthsLast 6 monthsLast 12 months

0-499<br>Beginner<br>500-999<br>Novice<br>1,000-1,499<br>Intermediate<br>1,500-1,999<br>Professional<br>2,000-2,499<br>Expert<br>2,500-2,999<br>Master<br>3,000-3,499<br>Grand Master<br>3,500+<br>Enlightened

Ava Turner<br>Diamond

286.9k

Leo Harrison<br>Platinum

281.4k

Rowan Elijah<br>Platinum

274.5k

Emma Johnson<br>Gold

216.7k

Sophia Miller<br>Gold

187.1k

10<br>Daniel Brown<br>Gold

179.7k

Show102550100<br>Page 1 of 1

Double XP Weekendx2<br>Enjoy double XP on all activity this weekend.

Ends in 47h 59m 59ssvg]:px-2.5">Do something

May 19, 20262,016+2,016

May 18, 20261,922-94

May 12, 20261,787-135

Apr 21, 20261,657-130

Feb 18, 20261,586-71

Dec 20, 20251,481-105

Oct 21, 20251,355-126

Sep 1, 20251,235-120

Unlock achievement

Leo Harrison2,8142

Ava Turner2,8691

Rowan Elijah2,7453

250 tasks<br>Complete 250 tasks

23%

Gamification UI Components for React<br>Trophy's Gamification UI Kit gives you production-ready gamification components — streak trackers, achievement badges, leaderboards, points displays, and more. Built on shadcn/ui and Tailwind CSS, every component is open source, fully customizable, and installs with a single CLI command into any React or Next.js project.

Everything You Need to Ship Gamification<br>Four categories of components covering the most impactful gamification patterns — all composable, accessible, and theme-aware.<br>Streak Components<br>Keep users coming back with streak tracking UI. Display daily streaks, streak calendars, and streak badges that motivate consistent engagement.<br>Streak CardStreak CalendarStreak Badge<br>Achievement Components<br>Celebrate milestones with achievement badges, unlock animations, and achievement grids. Give users a sense of progress and accomplishment.<br>Achievement BadgeAchievement CardAchievement GridAchievement ListAchievement Unlocked<br>Leaderboard Components<br>Drive competition with leaderboard rankings, podium displays, and leaderboard cards. Show users where they stand among peers.<br>Leaderboard RankingsLeaderboard PodiumLeaderboard Card<br>Points & Levels Components<br>Reward actions with points badges, level timelines, points charts, and boost indicators. Build complete progression systems.<br>Points BadgePoints AwardsPoints BoostPoints ChartPoints Levels ListPoints Levels Timeline

Built for Developers<br>One-Command Install<br>Add any component to your project with a single CLI command. No extra dependencies to manage.

Fully Customizable<br>Every component lives in your codebase. Tweak styles, layout, and behavior to match your brand.

Open Source<br>MIT licensed and community-driven. Use in personal projects or production apps without restrictions.