A share total with odometer digits, a breakdown bar by channel and a chip per channel with its own count. Sharing rolls both numbers, grows the segment and floats a +1 from the chip.
How we cut deploys to 90 seconds
6 min read
npx shadcn@latest add https://hyperblur.dev/r/social-share-counter.jsonWorks in any React project set up with the shadcn CLI. The file lands in components/hyperblur/social-share-counter.tsx.
import { SocialShareCounter } from "@/components/hyperblur/social-share-counter"
<SocialShareCounter counts={{ x: 120, linkedin: 48, facebook: 12, link: 30 }} onShare={(id) => share(id)} />| Prop | Type | Default | Description |
|---|---|---|---|
| providers | Array<SocialProviderId | { id: string; label?: string; icon?: ReactNode; color?: string }> | ["x", "linkedin", "facebook", "link"] | Channels in display order. The id link copies the url to the clipboard. Pass an object for a custom label, icon or color. |
| counts | Record<string, number> | { x: 4812, linkedin: 2307, facebook: 961, link: 1204 } | Starting count per channel id. The total is their sum. |
| label | string | "shares" | Word after the total. |
| url | string | "https://northwind.app/blog/shipping-faster" | Link copied by the link channel. |
| locale | string | "en-US" | Locale for number formatting. |
| onShare | (provider: string, total: number) => void | Called with the channel id and the new total. |