Activity with Number Flow

Buttons 124

About

A component of social media sharing buttons with Number Flow animations

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

Code

How Activity with Number Flow is used: the demo's code. The component's own source comes with a free account.

Usage.tsx

import { useState } from "react"
import { Activity } from "@/components/ui/activity-with-number-flow"


function ActivityDemo() {
  const [stats, setStats] = useState({
    likes: 1523,
    reposts: 284,
    views: 15794,
    bookmarks: 432,
    liked: false,
    reposted: false,
    bookmarked: false,
  })

  const handleLike = () => {
    setStats(prev => ({
      ...prev,
      likes: prev.liked ? prev.likes - 1 : prev.likes + 1,
      liked: !prev.liked
    }))
  }

  const handleRepost = () => {
    setStats(prev => ({
      ...prev,
      reposts: prev.reposted ? prev.reposts - 1 : prev.reposts + 1,
      reposted: !prev.reposted
    }))
  }

  const handleBookmark = () => {
    setStats(prev => ({
      ...prev,
      bookmarks: prev.bookmarked ? prev.bookmarks - 1 : prev.bookmarks + 1,
      bookmarked: !prev.bookmarked
    }))
  }

  return (
    <div className="w-full max-w-xl rounded-lg border border-zinc-200 p-4 dark:border-zinc-800">
      <div className="mb-4 h-48 rounded-md bg-zinc-100 dark:bg-zinc-800" />
      <Activity 
        likes={stats.likes}
        reposts={stats.reposts}
        views={stats.views}
        bookmarks={stats.bookmarks}
        liked={stats.liked}
        reposted={stats.reposted}
        bookmarked={stats.bookmarked}
        onLike={handleLike}
        onRepost={handleRepost}
        onBookmark={handleBookmark}
      />
    </div>
  )
}

export default { ActivityDemo };