Like Burst

FreeSample

A pressed-state toggle with a springy icon, particle burst and rolling count. The celebration is decorative; the state change is not.

Community Inspired

buttons
toggle
social

Customize

Accent

Radius12px

Motion

Speed

These controls show a few ways to adapt it. The source is fully editable.

Install

Not published yet

npx shadcn@latest add @uicoolkit/like-burst

Install commands go live when this item ships to the registry.

Dependencies

motion

Use with an agent

Copy a prompt with this component, your current preview settings and links to its docs.

Add the UICoolKit "Like Burst" component (like-burst) to this project.
Docs: https://uicoolkit.com/components/like-burst
Agent docs: https://uicoolkit.com/components/like-burst.md
Install: npx shadcn@latest add @uicoolkit/like-burst
Preview settings to match: accent Ember, radius 12px, motion on.
Use the documented props and className hooks rather than editing internals, and wire it to this app's real state.
(Note: this is a sample item from the UICoolKit website shell and is not published yet.)

like-burst.tsx

<LikeBurst
  pressed={liked}
  onPressedChange={setLiked}
  count={128}
/>

Prop	Type	Default
`pressed` Controlled pressed state.	`boolean`	`—`
`onPressedChange` Called when the user toggles.	`(pressed: boolean) => void`	`—`
`count` Optional count, animated as digits roll.	`number`	`—`
`particles` Particle count, or false for none.	`number \| false`	`8`
`className` Merged onto the root after defaults, so consumer styles win.	`string`	`—`
`motion` Disable animation or tune duration, easing and spring values. Reduced motion is honored by default.	`boolean \| MotionOptions`	`true`

Every part accepts className, and consumer classes are merged last so they win. Control state from your own data, replace any content, and tune or disable motion.

A substantially restyled instance

<LikeBurst
  className="rounded-none border-2 border-black bg-yellow-300 font-mono"
  motion={{ duration: 0.2 }}
/>