Badge List

Component

About

An achievement badge grid that displays earned and locked badges with a pop-in reveal animation and a shine sweep on unlocked items.

Built with React and Tailwind. Copy the prompt and paste it into Claude Code, Cursor or Lovable: your agent adds Badge List to your project and fits it to your theme.

Code

How Badge List is used: the demo's code. The component's own source comes with a free account.

Usage.tsx

import { BadgeList, type BadgeAward } from "@/components/ui/badge-list";

const badges: BadgeAward[] = [
  { id: "vip", label: "VIP", earned: true },
  { id: "locked", label: "Locked", earned: false },
];

export default function BadgeListDemo() {
  return (
    <div className="flex w-full max-w-sm items-center justify-center bg-background p-8">
      <BadgeList badges={badges} />
    </div>
  );
}