Achievement badge

Component 26

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 SeriesProgress() {
  return (
    <div className="flex items-center gap-4">
      <AchievementBadge
        achievement={{
          id: "1",
          name: "Consistency I",
          trigger: "streak",
          achievedAt: "2024-01-01T00:00:00Z",
        }}
      />
      <AchievementBadge
        achievement={{
          id: "2",
          name: "Consistency II",
          trigger: "streak",
          achievedAt: "2024-02-01T00:00:00Z",
          progress: 60,
        }}
      />
      <AchievementBadge
        achievement={{
          id: "3",
          name: "Consistency III",
          trigger: "streak",
          achievedAt: null,
        }}
      />
    </div>
  )
}