A bookmark ribbon that drops into a tray with a bounce and a squash, next to a rolling saved counter.
Essay / 8 min read
In praise of slow software
Why great tools feel unhurried.
npx shadcn@latest add https://hyperblur.dev/r/like-bookmark.jsonWorks in any React project set up with the shadcn CLI. The file lands in components/hyperblur/like-bookmark.tsx.
import { LikeBookmark } from "@/components/hyperblur/like-bookmark"
<LikeBookmark count={1204} onSavedChange={(saved, count) => console.log(saved, count)} />| Prop | Type | Default | Description |
|---|---|---|---|
| count | number | 0 | Total count at the initial saved state. Saving adds one to it, unsaving takes it back. |
| saved | boolean | Controlled saved state. Pair with onSavedChange. | |
| defaultSaved | boolean | false | Initial saved state when uncontrolled. |
| onSavedChange | (saved: boolean, count: number) => void | Called on every toggle with the new saved state and the new count. | |
| color | string | "#7fb3ff" | Ribbon and tray highlight color when saved. |
| size | number | 22 | Icon width in pixels. The button and count scale with it. |
| label | string | "Save" | Accessible name of the toggle button. |
| noun | string | "saved" | Word shown after the count. Pass an empty string to hide it. |