Passport Stamp Grid

Component

About

A grid of circular passport-style stamps that shows unlocked and locked achievements, each labeled with a country code and date.

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

Code

How Passport Stamp Grid is used: the demo's code. The component's own source comes with a free account.

Usage.tsx

import { PassportStampGrid } from "@/components/ui/passport-stamp-grid";

export default function PassportStampGridDemo() {
  return (
    <div className="flex w-full max-w-sm items-center justify-center p-8">
      <PassportStampGrid
        columns={3}
        stamps={[
          { id: "1", country: "TR", date: "JUN 26", color: "#e11d48" },
          { id: "2", country: "DE", date: "JUL 02", color: "#2563eb" },
          { id: "3", country: "JP", date: "AUG 14", color: "#16a34a" },
          { id: "4", country: "FR", date: "SEP 09", color: "#9333ea" },
          { id: "5", country: "??", date: "—", unlocked: false },
          { id: "6", country: "??", date: "—", unlocked: false },
        ]}
      />
    </div>
  );
}