BuyBuy Agentic UI Kit

Gamify Achievements

Course badges with study streak and completed modules.

Full screen Try a theme

What it's for

Course badges with study streak and completed modules.
Onboarding milestones of a SaaS workspace.
Team recognition for reviews or deliveries.

Includes

Progress tracking
Threshold unlock
Claim reward
State badges
Empty state
Error state

Works with

Radix UI primitives (the registry variant it ships in)
React 19, Next.js App Router and Tailwind CSS 4, installed with the shadcn CLI
Your theme tokens, in light and dark mode

Install

Included with Agentic UI Kit (one-time license). Install needs your license key: see pricing · connect your project.

Agentic UI CLI

agentic-ui add gamify-achievements

Installs through shadcn and adapts the component to your design tokens.

shadcn CLI

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

Used in

A standalone component: drop it into any screen.

Type: Block
Variants: Radix UI
Themes: Light and dark
Widths: Preview it at desktop, tablet and mobile widths above.

npm packages: None beyond your project's React and Next.js
Registry dependencies: lib-primitives
Files: 1 file
components/agentic-ui/gamify-achievements/index.tsx