A notification bell that swings on a damped pendulum with a lagging clapper every time the count goes up. Drag it sideways to swing it by hand. The badge digits roll like an odometer.
Deploy #482 finished in 41s
Drag the bell sideways to swing it.
npx shadcn@latest add https://hyperblur.dev/r/micro-notify-bell.jsonWorks in any React project set up with the shadcn CLI. The file lands in components/hyperblur/micro-notify-bell.tsx.
import { MicroNotifyBell } from "@/components/hyperblur/micro-notify-bell"
<MicroNotifyBell count={unread} onOpen={() => setInboxOpen(true)} onCountChange={setUnread} />| Prop | Type | Default | Description |
|---|---|---|---|
| count | number | Controlled unread count. Pair with onCountChange. | |
| defaultCount | number | 3 | Initial count when uncontrolled. |
| max | number | 99 | Highest number shown before a plus sign. |
| size | number | 46 | Button size in pixels. |
| accent | string | "#ff4d5e" | Badge, ring and focus color. |
| label | string | "Notifications" | Accessible name. The unread count is appended. |
| clearOnOpen | boolean | true | Reset the count to zero on click. |
| idle | boolean | false | Add a notification every few seconds until the pointer arrives. |
| onCountChange | (count: number) => void | Called when the count changes from inside the component. | |
| onOpen | () => void | Called on click, not after a drag. | |
| className / style / ...rest | ButtonHTMLAttributes<HTMLButtonElement> | Forwarded to the bell button. |