GitHub

Introduction

Gamification UI Kit by Trophy is a free, open-source gamification UI kit for React and Next.js—copy-paste streak, achievement, leaderboard, and points components via the shadcn registry. Built on shadcn/ui and Tailwind CSS.

Trophy's Gamification UI Kit is a component library built on top of shadcn/ui that helps you build gamification experiences faster. It provides pre-built components for streaks, achievements, leaderboards, points, and more.

Components are available via the shadcn CLI:

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

For example, to install the Streak Badge component:

npx shadcn@latest add https://ui.trophy.so/streak-badge

Prerequisites

  • React 18+ — Components are client-side React.
  • Tailwind v4+ — Styling is Tailwind utility classes. Configure Tailwind so those classes compile, and add the semantic theme tokens Trophy expects (or map them to your design system).
  • shadcn/ui structure — Maintain a project that already follows the shadcn/ui setup (components.json, aliases, and optional src/ layout).

All Components

Raise an issue Contribute