Achievement badge

Cards 10

About

This is achievement badge

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

Code

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

Usage.tsx

import { AchievementBadge } from "@/components/ui/achievement-badge"

export default function ClickableAchievement() {
  return (
    <AchievementBadge
      achievement={{
        id: "4",
        name: "Consistency I",
        trigger: "streak",
        achievedAt: "2024-01-01T00:00:00Z",
        progress: 28,
      }}
      onAchievementClick={(a) => alert(`Clicked: ${a.name}`)}
    />
  )
}