A star toggle that spins, sprays a burst of tiny stars and shows an Added to favorites chip that fades on its own.
Night Drive
Kestrel Arcade / 3:42
npx shadcn@latest add https://hyperblur.dev/r/like-star-favorite.jsonWorks in any React project set up with the shadcn CLI. The file lands in components/hyperblur/like-star-favorite.tsx.
import { LikeStarFavorite } from "@/components/hyperblur/like-star-favorite"
<LikeStarFavorite onActiveChange={(active) => console.log(active)} />| Prop | Type | Default | Description |
|---|---|---|---|
| active | boolean | Controlled favorite state. Pair with onActiveChange. | |
| defaultActive | boolean | false | Initial favorite state when uncontrolled. |
| onActiveChange | (active: boolean) => void | Called on every toggle with the new state. | |
| color | string | "#ffc83d" | Star and particle color. |
| size | number | 24 | Star size in pixels. The round button is 1.7 times larger. |
| label | string | "Favorite" | Accessible name of the toggle button. |
| toast | string | "Added to favorites" | Text of the chip shown when the star turns on. |
| showToast | boolean | true | Show the chip when the star turns on by click. |
| toastSide | "right" | "left" | "top" | "right" | Side of the button where the chip appears. |