A creator chip where the avatar itself is the follow button: the plus badge spins into a check, a ring draws around the photo, sparks fly out and the follower count rolls up. Clicking again unfollows.
npx shadcn@latest add https://hyperblur.dev/r/social-follow-avatar.jsonWorks in any React project set up with the shadcn CLI. The file lands in components/hyperblur/social-follow-avatar.tsx.
import { SocialFollowAvatar } from "@/components/hyperblur/social-follow-avatar"
<SocialFollowAvatar name="Maya Okafor" handle="@mayamakes" initials="MO" count={2480} />| Prop | Type | Default | Description |
|---|---|---|---|
| name | string | "Maya Okafor" | Display name. Also used in the accessible name of the button. |
| handle | string | "@mayamakes" | Handle shown under the name. |
| initials | string | "MO" | Initials drawn on the avatar. |
| colors | [string, string] | ["#ff8a5b", "#d6336c"] | Two colors of the avatar gradient. |
| count | number | 2480 | Follower count at the initial state. Following adds one. |
| countLabel | string | "followers" | Word after the count. |
| following | boolean | Controlled state. Pair with onFollowChange. | |
| defaultFollowing | boolean | false | Initial state when uncontrolled. |
| onFollowChange | (following: boolean, count: number) => void | Called on every toggle with the new state and count. | |
| accent | string | "#2f7bff" | Color of the badge, ring and Following tag. |
| locale | string | "en-US" | Locale for number formatting. |