An achievement badge with locked and unlocked states, progress rings, and rarity levels.
ReactTailwind
Trophy UI
Gamification components for React from Trophy: achievement badges and cards, leaderboards and podiums, points levels and boosts, XP charts, and streak badges, cards and calendars.
17 published items
Trophy
17 published items
A profile card with achievement totals, featured badges, and a scrollable badge list.
ReactTailwind
A responsive badge gallery with progress and rarity states across breakpoints.
ReactTailwind
A vertical achievement list with icons, descriptions, and optional progress.
ReactTailwind
A celebration dialog for a newly unlocked achievement with a badge and share actions.
ReactTailwindFeedback
A leaderboard card combining a date range, podium, and ranked participant list.
ReactTailwind
Playful
A top-three podium with crowns, avatars, scores, and rank positions.
ReactTailwindList
A ranked participant list with avatars, scores, bylines, and crown highlights.
ReactTailwind
A dated activity feed for point awards, totals, and trigger types.
ReactTailwind
Minimal
A compact badge for displaying point or currency-style totals.
ReactTailwindBadge
Minimal
A multiplier callout with an optional countdown for time-limited point boosts.
ReactTailwindFeedback
A Recharts time series for tracking point trends, campaigns, and seasonality.
ReactTailwind
A tiered level list with thresholds and optional progress between levels.
ReactTailwind
Timeline
A vertical progression timeline with levels, sub-levels, thresholds, and current progress.
ReactTailwind
Minimal
A compact streak counter for daily, weekly, monthly, or yearly periods.
ReactTailwindBadge
Calendar
Week, month, and contribution-style calendars for streak history and freeze days.
ReactTailwind
A streak summary card with the current run, longest record, and optional rules.
ReactTailwind