@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.
Install this registry
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 curl -s https://ui.trophy.so/r/registry.json Components
18 totalnpx shadcn@latest add https://ui.trophy.so/r/index.json 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 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 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 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 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 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 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 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 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 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 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 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 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 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 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 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 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