Stop Rebuilding UI

Shadcn.io is not affiliated with official shadcn/ui

React Achievement Badges Carousel Block

Animated gamification achievement badge carousel slider for React and Next.js with badge names, point values, rarity chips, earned indicators, progress percentages, and staggered entrance animations using shadcn/ui Carousel, framer-motion, and Tailwind CSS

Showcase gamification achievements with this animated badge carousel. Each card displays a badge name, description, point value with tabular number formatting, rarity tier chip (Common, Rare, Epic, or Legendary), earned/locked status indicator, and completion progress percentage. Built with TypeScript, shadcn/ui Carousel, framer-motion, and Tailwind CSS for React and Next.js projects.

Loading...
Scroll to load preview

Installation

Install
Pro block

FAQ

Last updated on March 17, 2026

Was this page helpful?

Sign in to leave feedback.