Achievement Unlocked

Component 18

About

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

Code

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

Usage.tsx

import { useState } from "react"
import { AchievementUnlocked } from "@/components/ui/achievement-unlocked"

export default function DemoOne() {
  const [open, setOpen] = useState(false)

  return (
    <>
      <button
        type="button"
        onClick={() => setOpen(true)}
        className="rounded-lg border bg-background px-4 py-2 text-sm font-medium text-foreground transition-colors hover:bg-muted"
      >
        Unlock achievement
      </button>
      <AchievementUnlocked
        achievement={{
          id: "task-champion",
          name: "Task Champion",
          description: "Complete a task 30 days in a row. Congratulations!!",
          unlockedAt: new Date().toISOString(),
        }}
        open={open}
        onOpenChange={setOpen}
        secondaryActionLabel="Share"
        onSecondaryActionClick={() => {
          navigator.share?.({
            title: "I unlocked Task Champion!",
            text: "Complete a task 30 days in a row. Congratulations!!",
            url: window.location.href,
          })
        }}
      />
    </>
  )
}