Achievement badge

Cards 3

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 LockedState() {
  return (
    <AchievementBadge
      achievement={{
        id: "2",
        name: "Consistency II",
        trigger: "streak",
        achievedAt: null,
      }}
    />
  )
}