Launching today
Gamification UI Kit by Trophy
Open-source React components for gamification interfaces
14 followers
Open-source React components for gamification interfaces
14 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.
Trophy 1.0
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