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}`)}
/>
)
}