This product was not featured by Product Hunt yet. It will not be visible on their landing page and won't be ranked (cannot win product of the day regardless of upvotes).
Gamification UI Kit by Trophy
Open-source React components for gamification interfaces
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.
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.
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.
Which component gets the most customization requests so far, achievements or leaderboards?
About Gamification UI Kit by Trophy on Product Hunt
“Open-source React components for gamification interfaces”
Gamification UI Kit by Trophy was submitted on Product Hunt and earned 29 upvotes and 3 comments, placing #30 on the daily leaderboard. 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.
Gamification UI Kit by Trophy was featured in User Experience (366k followers), Developer Tools (514k followers), GitHub (41.3k followers) and Design (5.2k followers) on Product Hunt. Together, these topics include over 128.1k products, making this a competitive space to launch in.
Who hunted Gamification UI Kit by Trophy?
Gamification UI Kit by Trophy was hunted by Charlie Hopkins-Brinicombe. A “hunter” on Product Hunt is the community member who submits a product to the platform — uploading the images, the link, and tagging the makers behind it. Hunters typically write the first comment explaining why a product is worth attention, and their followers are notified the moment they post. Around 79% of featured launches on Product Hunt are self-hunted by their makers, but a well-known hunter still acts as a signal of quality to the rest of the community. See the full all-time top hunters leaderboard to discover who is shaping the Product Hunt ecosystem.
Want to see how Gamification UI Kit by Trophy stacked up against nearby launches in real time? Check out the live launch dashboard for upvote speed charts, proximity comparisons, and more analytics.
Charlie Hopkins-Brinicombe
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