ClickPowerUp is a little arcade cabinet of a button. Hovering arms it: a dark panel wipes across the hatched face and the corner brackets spread out. Pressing snaps the brackets in, and releasing powers it up: an accent flash floods the face, the brackets burst outward, and the label pops.
Preview
Props
Install
Add the item with the shadcn CLI.
npx shadcn@latest add @evilbuttons/click-powerupUsage
import { ClickPowerUp } from "@/components/evil-buttons/click-powerup";
export function ButtonDemo() {
return (
<ClickPowerUp onClick={() => console.log("Powered up")}>
Launch
</ClickPowerUp>
);
}Variants
Custom accent
Swap the flash color and hold it a little longer.
Props
The component spreads native button props and forwards its ref to the button.
| Prop | Type | Default | Description |
|---|---|---|---|
children | React.ReactNode | - | The button label or content. |
tapDuration | number | 500 | Milliseconds the powered-up flash lasts after a click. |
accentColor | string | "#2CD4BD" | Color of the powered-up flash. |
onClick | (event) => void | - | Fired on every click. |
className | string | - | Extra classes passed to the button. |
Notes
- The brackets, panel, and label all run off one
rest/hover/tap/poweredvariant state, so they stay in sync. - The surface and brackets use
foregroundandbackgroundtokens, so it works in light and dark themes. - Touch skips the hover state, so a tap goes straight to the press animation.
Registry
The registry item includes components/evil-buttons/click-powerup.tsx and installs motion, clsx, and tailwind-merge as dependencies. The component imports cn from @/lib/utils, matching the project alias in components.json.