---
name: "@trophy-ui"
slug: "trophy-ui"
description: "Open-source gamification UI component library built on shadcn/ui and Tailwind CSS v4, maintained by Trophy. Provides ready-made components for streaks (StreakBadge), achievements (Achievement), leaderboards (LeaderboardCard), points, XP charts (PointsChart), levels, and event banners. Components are pulled individually via the shadcn CLI using Trophy's registry URL. Requires React 18+, Tailwind CSS v4, and an initialized shadcn/ui project. Free and MIT-licensed. Use for: SaaS apps, learning platforms, or consumer products adding gamification mechanics (streaks, XP, leaderboards) that need prebuilt, themeable display components rather than building from scratch."
category: "Niche/single-purpose"
tags: ["cards", "charts", "dashboard", "design-system", "forms", "gaming", "overlays", "saas", "theming"]
framework: "react"
license: "MIT"
author: "trophyso"
website: "https://ui.trophy.so"
github: "https://github.com/trophyso/ui"
registry: "https://ui.trophy.so/r/registry.json"
pro: false
pro_url: null
github_stars: 109
component_count: 18
generated_at: "2026-07-28T08:00:50.948Z"
---

# @trophy-ui

Open-source gamification UI component library built on shadcn/ui and Tailwind CSS v4, maintained by Trophy. Provides ready-made components for streaks (StreakBadge), achievements (Achievement), leaderboards (LeaderboardCard), points, XP charts (PointsChart), levels, and event banners. Components are pulled individually via the shadcn CLI using Trophy's registry URL. Requires React 18+, Tailwind CSS v4, and an initialized shadcn/ui project. Free and MIT-licensed. Use for: SaaS apps, learning platforms, or consumer products adding gamification mechanics (streaks, XP, leaderboards) that need prebuilt, themeable display components rather than building from scratch.

## Links

- Website: https://ui.trophy.so
- GitHub: https://github.com/trophyso/ui
- Registry JSON: https://ui.trophy.so/r/registry.json
- Directory page: https://sh4dcn.vercel.app/registry/trophy-ui
- This file: https://sh4dcn.vercel.app/md/trophy-ui.md

## Install

```sh
# add the whole registry (shadcn CLI)
npx shadcn@latest add https://ui.trophy.so/r/registry.json
pnpm dlx shadcn@latest add https://ui.trophy.so/r/registry.json
bunx shadcn@latest add https://ui.trophy.so/r/registry.json
# clone the source repo
git clone https://github.com/trophyso/ui.git
# fetch the raw registry index
curl -s https://ui.trophy.so/r/registry.json
```

## Components (18)

| name | type | description | install |
| --- | --- | --- | --- |
| index | registry:style | — | `npx shadcn@latest add https://ui.trophy.so/r/index.json` |
| streak-badge | registry:ui | React streak counter UI in a compact badge supporting daily, weekly, monthly or yearly streaks. Built on shadcn/ui + Tailwind. Open source. | `npx shadcn@latest add https://ui.trophy.so/r/streak-badge.json` |
| streak-calendar | registry:ui | React streak calendar for gamification—week, month, and git-style grids to visualize consistency. Native support for streak freezes. Ideal streak UI design for… | `npx shadcn@latest add https://ui.trophy.so/r/streak-calendar.json` |
| streak-card | registry:ui | Full streak UI card for React. Daily streak display, longest streak record with optional section for streak rules. Built on shadcn/ui + Tailwind. Open source. | `npx shadcn@latest add https://ui.trophy.so/r/streak-card.json` |
| achievement-badge | registry:ui | Open source React achievement badge component with locked/unlocked states, progress rings and rarity support. Use for achievement UI design and collections. Bu… | `npx shadcn@latest add https://ui.trophy.so/r/achievement-badge.json` |
| achievement-grid | registry:ui | Responsive React achievement grid for displaying collections of badges with progress and rarity across breakpoints. Ideal achievement UI design for galleries a… | `npx shadcn@latest add https://ui.trophy.so/r/achievement-grid.json` |
| achievement-list | registry:ui | Vertical React achievement list with icons, descriptions, and optional progress for dense achievement UI. Complements grids and cards in gamification dashboard… | `npx shadcn@latest add https://ui.trophy.so/r/achievement-list.json` |
| achievement-unlocked | registry:ui | Celebratory React dialog for newly unlocked achievements with headline, badge, and share actions. Use for unlock moments, level up animations and more. Built o… | `npx shadcn@latest add https://ui.trophy.so/r/achievement-unlocked.json` |
| achievement-card | registry:ui | React achievement card with totals, featured badges, and scrollable lists for profile and progress surfaces. Fits achievement UI examples in SaaS, consumer and… | `npx shadcn@latest add https://ui.trophy.so/r/achievement-card.json` |
| leaderboard-rankings | registry:ui | React leaderboard rankings list—avatars, scores, bylines, and crown highlights for full tables. Open-source leaderboard UI for games, communities, and SaaS cha… | `npx shadcn@latest add https://ui.trophy.so/r/leaderboard-rankings.json` |
| leaderboard-podium | registry:ui | Top-three React leaderboard podium with crowns, avatars, and ranks for competitive gamification. Leaderboard UI component for highlights and recap screens. Bui… | `npx shadcn@latest add https://ui.trophy.so/r/leaderboard-podium.json` |
| leaderboard-card | registry:ui | React leaderboard component that composes title, date range, podium, and rankings—one card for competitive gamification UIs. Fits Next.js and React apps. Built… | `npx shadcn@latest add https://ui.trophy.so/r/leaderboard-card.json` |
| points-badge | registry:ui | Compact React points badge for totals and currency-style scores in gamification UIs. Fits XP-style displays alongside charts and lists. Built on shadcn/ui + Ta… | `npx shadcn@latest add https://ui.trophy.so/r/points-badge.json` |
| points-chart | registry:ui | React chart for points over time. Displays trends, campaigns, and seasonality in gamification analytics views. Complements badges and levels. Built on Recharts… | `npx shadcn@latest add https://ui.trophy.so/r/points-chart.json` |
| points-awards | registry:ui | React points activity feed with dated events, totals, and trigger types for gamification timelines. Useful for XP and currency ledgers in dashboards. Built on … | `npx shadcn@latest add https://ui.trophy.so/r/points-awards.json` |
| points-levels-timeline | registry:ui | Vertical React timeline for level progression. Supports sub-levels, thresholds, and level progress for gamification roadmaps. Complements Points Levels List. B… | `npx shadcn@latest add https://ui.trophy.so/r/points-levels-timeline.json` |
| points-levels-list | registry:ui | React levels list with optional progress bar between tiers. Built on shadcn/ui + Tailwind. Open source. | `npx shadcn@latest add https://ui.trophy.so/r/points-levels-list.json` |
| points-boost | registry:ui | React callout for points multipliers and limited-time boosts. Supports optional countdown for near-ending gamification campaigns. Built on shadcn/ui + Tailwind… | `npx shadcn@latest add https://ui.trophy.so/r/points-boost.json` |

## For AI agents

```text
You are adding components from @trophy-ui to a shadcn-compatible project.
1. Read this file (https://sh4dcn.vercel.app/md/trophy-ui.md) for the component list.
2. Fetch the machine-readable index: https://ui.trophy.so/r/registry.json
3. Install a single component with its install command from the table above.
4. Full structured record: https://sh4dcn.vercel.app/json (library slug: trophy-ui).
```