Achievement badge

Cards 13

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 Rarity() {
  return (
    <AchievementBadge
      achievement={{
        id: "3",
        name: "Legendary Streak",
        trigger: "streak",
        achievedAt: "2024-06-01T00:00:00Z",
        rarity: 4,
      }}
    />
  )
}