Follower Counter

Cards 33

About

Here is follower counter card

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

Code

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

Usage.tsx

// demo.tsx
import * as React from "react";
import FollowerMilestone, { type PhotoType } from "@/components/ui/follower-counter";
import { RotateCcw } from "lucide-react";

const FollowerMilestoneDemo = () => {
  const PHOTOS: PhotoType[] = [
    {
      title: "Photo-1",
      src: "https://cdn.21st.dev/assets/mirror/81/8127305bb71e97dd77be10b37f2bc655ee403dcfc2bc249c9bd3d558170a4a79.jpg",
    },
    {
      title: "Photo-2",
      src: "https://cdn.21st.dev/assets/mirror/1c/1ce9b09e72b4353300778ac7d516465c76830a8d2e8381e4eadc165d389a73fb.jpg",
    },
    {
      title: "Photo-3",
      src: "https://cdn.21st.dev/assets/mirror/5f/5f8d7c2a107f9c6e2cad9e695142a3040346edb7018941c19342f979f9dc7e8f.jpg",
    },
    {
      title: "Photo-4",
      src: "https://cdn.21st.dev/assets/mirror/c3/c37fc08275e0109c680e8f9e5200ad4c50d225399e146c3fc73bb70f8a4d35c2.jpg",
    },
    {
      title: "Photo-5",
      src: "https://cdn.21st.dev/assets/mirror/8f/8ff93999d28e249a332085e63bf49f80212523e7f7a424ba2a84c705cf210763.jpg",
    },
    {
      title: "Photo-6",
      src: "https://cdn.21st.dev/assets/mirror/dc/dc4ac0f8a35fe45760d4c7c18867ab7e96f8f53e038206c6b13e21d1e8f584d3.jpg",
    },
    {
      title: "Photo-7",
      src: "https://cdn.21st.dev/assets/mirror/0f/0f96f37d18cb143a1dee90fe80198df61c877f095d09fe2cabcc2c71ee4b7ea0.jpg",
    },
    {
      title: "Photo-8",
      src: "https://cdn.21st.dev/assets/mirror/9e/9e49f3ca8f7366611522a575455e42cb83473957ae28b3ac101a29f56f909929.jpg",
    },
  ];

  const [key, setKey] = React.useState(0);
  const handleReload = () => setKey((prev) => prev + 1);

  return (
    <div className="relative flex min-h-[700px] w-full items-center justify-center overflow-hidden bg-white px-4 py-10 dark:bg-white md:min-h-[500px]">
      <FollowerMilestone
        key={key}
        targetCount={5000}
        photos={PHOTOS}
        headerText="Thanks for"
        footerText="Followers !"
      />
      <button
        onClick={handleReload}
        className="absolute bottom-4 right-4 rounded-full bg-zinc-900 p-3 text-white shadow-md transition-transform duration-300 active:scale-90 dark:bg-zinc-900"
      >
        <RotateCcw />
      </button>
    </div>
  );
};

export { FollowerMilestoneDemo as DemoOne };