An upvote button whose count rolls digit by digit like a mechanical odometer, starting from the ones and settling with a small overshoot. Voting fires the arrow through the top of its tile and floats a +1.
Tidewave
Open source session replay
npx shadcn@latest add https://hyperblur.dev/r/button-odometer.jsonWorks in any React project set up with the shadcn CLI. The file lands in components/hyperblur/button-odometer.tsx.
import { ButtonOdometer } from "@/components/hyperblur/button-odometer"
<ButtonOdometer defaultCount={1284} onVoteChange={(voted, count) => console.log(voted, count)} />| Prop | Type | Default | Description |
|---|---|---|---|
| count | number | undefined | Controlled vote count. |
| defaultCount | number | 1284 | Initial count when uncontrolled. |
| voted | boolean | undefined | Controlled voted state. |
| defaultVoted | boolean | false | Initial voted state when uncontrolled. |
| onVoteChange | (voted: boolean, count: number) => void | undefined | Called with the new state and count after each press. |
| label | string | "Upvote" | Caption above the number and part of the accessible name. |
| locale | string | "en-US" | Locale used to group the digits. |
| accent | string | "#ff6b3d" | Color of the voted state, the arrow tile and the +1. |