A Subscribe button that settles into Subscribed and slides out a bell that rings, with a menu for all uploads, highlights only, no notifications or unsubscribe. The bell glyph changes with the chosen mode.
Fieldwork
Weekly build logs
npx shadcn@latest add https://hyperblur.dev/r/social-subscribe-bell.jsonWorks in any React project set up with the shadcn CLI. The file lands in components/hyperblur/social-subscribe-bell.tsx.
import { SocialSubscribeBell } from "@/components/hyperblur/social-subscribe-bell"
<SocialSubscribeBell count={48213} onModeChange={(mode) => savePrefs(mode)} />| Prop | Type | Default | Description |
|---|---|---|---|
| subscribed | boolean | Controlled subscribed state. Pair with onSubscribedChange. | |
| defaultSubscribed | boolean | false | Initial subscribed state when uncontrolled. |
| onSubscribedChange | (subscribed: boolean) => void | Called on subscribe and on unsubscribe from the menu. | |
| mode | "all" | "personalized" | "none" | Controlled notification mode. Pair with onModeChange. | |
| defaultMode | "all" | "personalized" | "none" | "all" | Initial notification mode when uncontrolled. |
| onModeChange | (mode: "all" | "personalized" | "none") => void | Called when a mode is picked in the menu. | |
| count | number | 48213 | Subscriber count at the initial state. Subscribing adds one. |
| locale | string | "en-US" | Locale for number formatting. |
| accent | string | "#ff4d4f" | Color of the Subscribe button and the active mode dot. |
| subscribeLabel | string | "Subscribe" | Text before subscribing. |
| subscribedLabel | string | "Subscribed" | Text after subscribing. |
| countLabel | string | "subscribers" | Word after the count. |