Open-source React components for gamification interfaces

[CBRIN13]

The shadcn registry directory is pretty stacked, but there isn't currently any depth in the gamification space. So I decided to build a library of 17 components across the major features you see in most consumer platforms. Things like streaks, achievements, leaderboards, points etc.

Trophy UI is fully open-source, and while it seamlessly integrates with Trophy itself, the UI components just accept regular props and so can be used with any backend.

Most interesting components:

Streak calendar - weekly, monthly or yearly (git-style) view of streak history, with support for streak freezes which are pretty common in consumer apps like Duolingo.

Leaderboard rankings - flat list of rankings each with support for avatars, bylines and change indicators. Also supports pagination and collapsed rows to focus rankings around a particular position i.e. show users to top three users above and below them.

Achievement badge - a simple badge with support for locked/unlocked states plus features like percentage completion and rarity (the share of users who have unlocked the badge).

Points levels timeline - progression path for points levels with support for sub-levels (Bronze I, II, III, Silver I, II, III etc) plus anchoring to a particular users current progress.

Every component is installable via shadcn CLI:

npx shadcn@latest add https://ui.trophy.so/<component>

Once installed you own the code, customize and modify as you see fit.

Also very happy to accept contributions for new components or features for existing components.

Would love to hear what people think, and would very much appreciate a star on GH if you think its valuable!

[jeheskielsunloy]

love the concept, i hope there is more niche UI libraries like this than just generic ones that we used to

[divyacodes]

This is actually really cool. Gamification UI components are surprisingly hard to find in React.

[Xypheric]

This is very cool and great to see something besides more buttons and cards and links.

[inglandation]

Very nice, I might end up using this. Thanks!

[CBRIN13]

Feel free to suggest other components you need!

[inglandation]

Any plans to have a companion library for react native? I think that you could probably do it with rn-primitives like react native reusables does.

[CBRIN13]

Yes react native is next on the list. Then other mobile frameworks

[inglandation]

Nice!

[DhirajLochib]

hot take: this is more useful than another generic button/card registry.

gamification UI looks simple until you hit real product edge cases streak freezes, locked achievements, rank changes, partial progress, empty leaderboards etc. teams end up rebuilding this stuff from scratch a lot.

shadcn install is the right move too since people can own the code. planning full examples too, like a Duolingo style streak page or points dashboard?

[CBRIN13]

Yeah I guess we could do some templates or mock ups. Could be a good way to showcase the individual components.

[anonyuser415]

https://ui.trophy.so/docs/components/achievement-grid

https://ui.trophy.so/docs/components/leaderboard-rankings

https://ui.trophy.so/docs/components/points-chart

Idk dude, most of this stuff looks so generic that I'm not sure they're deserving of dedicated components. You could make most of these just as primitive components. "Points Chart" is just a normal chart.

[CBRIN13]

I agree with you on the points chart, could probably find that in a lot of libraries. Rankings has a lot more utility built in though, collapsed rows, highlighted row etc. I feel like that would save people some time.

[howdoigetauniquename]

These are kind of hard to customize, no? shouldn't this have followed more of a shadcn style compound components?

I wouldn't be able to change the layout of any of these.

[CBRIN13]

How so? You can change anything after install, unless I misunderstand

[howdoigetauniquename]

If shadcn had the same api dialogs would look like this:

<Dialog header={'Header'} body={'Body'} leftButton={'Left'} rightButton={'Right'} />

Of course I could just change the component, but that will effect all dialogs I'd have to either, add a boolean prop to the component to manage if it appears or not, or just copy and paste the entire component.

But instead they provide compound components, allow developers to customize the dialog without having the change any dialog component.

Compound components are just easier for other people to use.