Data Display

AchievementCard

Achievement card with title, description, points, difficulty badge (easy/normal/hard/extreme), progress, criteria tooltip.

Grid variant
First steps10
Listen to your first track
easy1/1
Marathon50
Listen to 100 tracks in a month
normal32/100
Collector100
Unlock 5 achievements
hard2/5
Legend500
Complete all extreme achievements
extreme
List variant
First steps
Listen to your first track
easy101/1
Marathon
Listen to 100 tracks in a month
normal5032/100
Collector
Unlock 5 achievements
hard1002/5
With criteria and hint
Genre Explorer25
Listen to 5 different genres
normal2/5
Usage
import { AchievementCard } from '@pulsesync/uikit'

<AchievementCard
  title="First steps"
  description="Listen to your first track"
  points={10}
  difficulty="easy"
  progressTotal={1}
  progressCompleted={1}
  variant="grid"
/>