Gamification component library
Prebuilt UI for streaks, achievements, leaderboards, points, and related progression patterns helps teams add gamification without designing each surface from scratch.
Gamification UI Kit by Trophy
Gamification UI Kit by Trophy is an open-source React component library for adding streaks, achievements, leaderboards, points, and other gamification UI to React and Next.js apps. It is built on shadcn/ui and Tailwind CSS and is installed through the shadcn registry.
Overview
Gamification UI Kit by Trophy is an open-source React component library for building gamified product experiences. It focuses on common engagement patterns such as streaks, achievements, leaderboards, points, and progress views, with components that can be copied into a project and customized locally.
The kit is built on shadcn/ui and Tailwind CSS and is distributed through the shadcn registry. The docs describe a client-side React workflow for React 18+ and Next.js projects, with installation through `npx shadcn@latest add https://ui.trophy.so/component-name` and local ownership of the resulting components.
Core capabilities
CLI-based copy-and-install workflow
Components are delivered through the shadcn registry and installed with a single CLI command, which fits projects already using the shadcn workflow.
shadcn/ui and Tailwind foundation
The library is built on shadcn/ui and Tailwind CSS, so the resulting components follow the same styling and composition model as the rest of a shadcn-based app.
Local customization
Each component lives in the app codebase, making it straightforward to adjust layout, styling, labels, and behavior to match a product’s design system.
Composable component surface
The docs and examples show both standalone surfaces such as Streak Card and Achievement Badge and composable higher-level patterns such as achievement cards, grids, leaderboards, and points timelines.
Practical uses
Habit tracking and streaks
Add a streak calendar, streak badge, or streak card to motivate daily or weekly habit completion in a fitness, learning, or productivity product.
Achievement systems
Show unlocked and locked badges, progress, and rarity so users can see how close they are to the next milestone.
Leaderboards
Display rankings, podiums, and leaderboard cards when you want to surface competition or peer comparison inside the product.
Points and leveling
Track points, awards, levels, and progression timelines for products that need a visible reward loop tied to user actions.
Custom in-app gamification UI
Start from the shipped components and adapt them locally when the team wants shadcn-style React UI instead of a hosted gamification platform.
Pros and Cons
Pros
- Open source and MIT licensed, which makes the library usable in personal and production projects.
- Single-command installation through the shadcn CLI keeps adoption lightweight.
- Local component ownership makes it easy to customize copy, layout, and styling.
- The library covers multiple gamification patterns instead of only one widget type.
Cons
- The docs assume a project already set up with shadcn/ui conventions and Tailwind v4+; it is not a plug-and-play hosted UI service.
- The public site does not publish pricing details, and the `/pricing` page currently returns a 404.
FAQ
What does Trophy’s Gamification UI Kit provide?
It is a React component library for gamification UI, with components such as streaks, achievements, leaderboards, and points. The docs show components can be added through the shadcn registry with the CLI command `npx shadcn@latest add https://ui.trophy.so/component-name`.
What do I need in my project to use it?
The docs describe the kit as built on shadcn/ui and Tailwind CSS, with prerequisites for React 18+, Tailwind v4+, and an existing shadcn/ui project structure. The components are client-side React components.
How is it used in a project?
The source shows examples for React and Next.js projects. The components are installed into your codebase, then imported from your local component files for further customization.
Is there pricing information on the site?
The site describes the library as open source and MIT licensed, and the pricing page currently returns a 404 rather than a published pricing plan.
Quick Facts
- Category
- Developer Tool
- Platform
- React and Next.js
- Foundation
- shadcn/ui and Tailwind CSS
- License
- MIT
- Distribution
- shadcn registry / CLI add command
- Website
- ui.trophy.so
Gamification UI Kit by Trophy Alternativen
ByteAsk
ByteAsk is a terminal-first AI coding agent for C and C++ that edits repositories and verifies changes with the real compiler, debugger, sanitizers, and tests before showing a diff. It offers a free tier plus paid plans, with editor connectors and zero-retention handling described in the source.
CreateOS Sandbox
CreateOS Sandbox is an isolated compute environment for running code and agent workloads inside Firecracker micro-VMs. It is designed for workflows that need machine-level isolation, private networking between sandboxes, and programmatic control through SDK, CLI, or MCP.
hob
hob is an independent workspace for coding agents that keeps agent sessions, terminals, history, and follow-up work organized around the tools and providers you already use. It is aimed at developers who want local control over routing, history, and workspace structure rather than a bundled model stack.
Ably Chat
Ably Chat is a chat API platform for building custom realtime chat applications. It supports room-based messaging, typing indicators, presence, reactions, and message updates, with usage-based pricing options for different deployment stages.
Make Real
Make Real is a Next.js app that turns hand-drawn wireframes into working HTML prototypes using the tldraw SDK and AI models. It helps users sketch on a canvas, generate code, and review the result in an embedded preview.
Manta AI
Manta AI is an autonomous web app testing tool for teams that want to map application behavior, catch regressions, and generate tests without writing scripts or maintaining selectors. It works from a URL and supports plain-English test flows, run results with screenshots, and scheduled or deployment-triggered checks.