A Follow button joined to the follower count, where following rolls the digits up by one and slides your avatar into the front of the stack. The label flips to Following with a check that draws itself.
Lena Vargas
Design engineer. Writing about motion and type.
npx shadcn@latest add https://hyperblur.dev/r/social-follow-count.jsonWorks in any React project set up with the shadcn CLI. The file lands in components/hyperblur/social-follow-count.tsx.
import { SocialFollowCount } from "@/components/hyperblur/social-follow-count"
<SocialFollowCount count={12839} onFollowChange={(on, count) => save(on)} />| Prop | Type | Default | Description |
|---|---|---|---|
| following | boolean | Controlled state. When controlled, count is shown as given. | |
| defaultFollowing | boolean | false | Initial state when uncontrolled. |
| onFollowChange | (following: boolean, count: number) => void | Called on every toggle with the new state and count. | |
| count | number | 12839 | Follower count at the initial state. Following adds one, unfollowing takes it back. |
| avatars | string[] | ["MR", "JS", "AK"] | Initials of up to three recent followers shown in the stack. |
| viewerInitials | string | "AM" | Initials of the signed-in user, added to the stack on follow. |
| accent | string | "#2f7bff" | Color of the Follow button and the viewer avatar. |
| locale | string | "en-US" | Locale for number formatting. |
| labels | { follow?: string; following?: string; followers?: string } | { follow: "Follow", following: "Following", followers: "followers" } | Button texts and the word after the count. |
| disabled | boolean | false | Disables the button. |