Gamification UI Kit by Trophy
Open-source React components for gamification interfaces
36 followers
Open-source React components for gamification interfaces
36 followers
Trophy's Gamification UI Kit is an open-source library of gamification UI components built on shadcn/ui and Tailwind. Drop-in React components for streaks, achievements, leaderboards, and points systems, ready to copy and customize.
Free
Launch Team / Built With
Dropbox SignSimple, secure eSignatures for the way your team works.
Promoted
Hey Product Hunt community!
At Trophy we power gamification for 1M+ users. Since we launched 1.0 back in January we've been hard at work solving the most difficult challenges with running backend gamification infrastructure at scale.
Now we're excited to turn our attention to the frontend part of the picture with our open-source UI library.
Our gamification UI kit is a collection of 17 React components built with TailwindCSS and distributed as a shadcn/ui registry.
Components
Streaks: weekly views, monthly calendars and git-style yearly displays with native support for streak freezes.
Points: charts, level progressions, awards history and booster announcements.
Leaderboards: podium and rankings with support for pagination, rank change indicators and highlighted and collapsed rows for emphasising current user position.
Achievements: badge lists and grids with native support for locked/unlocked states, progress, and rarity.
Installation
Install any component with a single command:
Customization
All components are installed directly in your codebase (no dependencies to manage), customize anything and everything.
Contributing
We're very happy to accept contributions from the community, please raise a PR and leave a star on GitHub!
Thanks so much!
Jason & Charlie
Co-Founders of Trophy
Open-source React components for gamification: Shipping the UI layer on top of a backend that already powers 1M+ users is a smart sequencing. With everything living in the user's codebase (shadcn/Tailwind, no external deps), how do you handle keeping components updated after they've been ejected/customized? The classic copy-in tradeoff — curious how you think about it.
@mateusz_gierlach Thanks for the comment Mateusz! Since all components sit within your own codebase updates from upstream aren't really an option. We'll be keeping our source components up to date over time, but there's no option for updating components that have already been installed. You're right - it's a trade-off but generally we think it's one more and more frontend teams are willing to make!
Which component gets the most customization requests so far, achievements or leaderboards?