Trophy UI

Trophy UI: Gamification Components Built on shadcn/ui

Trophy UI, published as the Gamification UI Kit by Trophy, is an open-source component library built on shadcn/ui and Tailwind CSS for adding gamification features to React apps. It covers streaks, achievements, leaderboards, points, XP charts, event banners and similar patterns. Components are served from a shadcn registry, so you can install one component or the whole set with the shadcn CLI and own the resulting code. The kit expects React 18 or later, Tailwind CSS v4 and an initialized shadcn/ui project, and it uses semantic theme tokens for styling. It is MIT licensed and built by Trophy.

Features:

• Streaks: Streak badges and related components for tracking consecutive activity.
• Achievements: Components for showing earned achievements and progress.
• Leaderboards: Leaderboard cards for ranking users by points or tiers.
• Points and XP Charts: Charts that show points progress over selectable time ranges.
• shadcn Registry: Install with npx shadcn@latest add https://ui.trophy.so/<component> or add everything at once.
• Semantic Theme Tokens: Styling follows theme tokens so components match your design.
• Tailwind CSS v4: Built for projects using Tailwind CSS v4 and shadcn/ui.