Charlie Hopkins-Brinicombe

Launching today: Gamification ui kit by Trophy

Hey Trophy community!

Since we launched Trophy 1.0 back in January we've been hard at work solving the most difficult challenges with running backend gamification infrastructure at scale.

Today we're excited to turn our attention to the frontend part of the picture with the launch of our open-source UI library.

Appreciate any support!


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:

npx shadcn@latest add https://ui.trophy.so/&am...>

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

44 views

Add a comment

Replies

Best
Ethan Marshall

@charlie_hb Have any teams used this in a way you didn't anticipate?

Bryan Williamson

this looks really polished. I’ve worked on products where gamification was an afterthought, and it often created inconsistencies.

Malani Willa

Great launch! I’ve always believed good gamification is less about points and badges and more about creating meaningful user motivation.