# Gamify Achievements

Course badges with study streak and completed modules.

- id: `gamify-achievements`
- Page: https://agentic-ui-kit.com/components/gamify-achievements
- Live preview: https://agentic-ui-kit.com/live/component/gamify-achievements

## Install

```bash
agentic-ui add gamify-achievements
npx shadcn@4.17.0 add @agentic-ui/gamify-achievements
```

## Metadata

- **Level:** block
- **Category:** block
- **Installable in:** Radix UI (registry variant new-york)
- **Capabilities:** progress-tracking, threshold-unlock, claim-reward, state-badges, empty-state, error-state
- **Intents:** track-status, explore-detail
- **Suits domains:** education, saas, marketing, hr, personal-productivity
- **Interaction:** claim-unlock, keyboard-activation
- **Screen role:** overview
- **Density:** medium
- **Dark mode:** yes
- **Use it for:** Course badges with study streak and completed modules, Onboarding milestones of a SaaS workspace, Team recognition for reviews or deliveries
- **Avoid when:** Progress is a continuous magnitude without discrete achievements, The flow is linear by steps and calls for a stepper
- **Preserve when adapting:** threshold-progress-model, unlock-affordance, state-vocabulary
- **Replace when adapting:** achievement-copy, icons, domain-thresholds
- **Adaptation effort:** low
- **Coupling:** low
- **Quality score:** 8.9/10
- **Quality breakdown:** visual 8/10, responsive 9/10, accessibility 9/10, code 9/10
- **Uses primitives:** badge, button, progress
- **Registry dependencies:** lib-primitives