Evil Buttons

Overview

Evil Buttons is a shadcn/ui registry packed with 31 interactive, heavily animated button components wearing an evil aesthetic. Built by Radium Coders with Motion (Framer Motion) and Tailwind, every button ships with live previews, copy-paste docs, and one-command CLI installs. It is the antidote to boring primary CTAs.

Key Features

• Killing Interactions: Hold-to-delete with charging feedback, glitch text corruption, dither-style retro effects, and the infamous EvilEye — micro-interactions that make users actually want to click.
• shadcn Registry Native: npx shadcn@latest add @evilbuttons/frame-button drops typed, styled source into your project. No runtime dependency lock-in.
• Production-Grade Foundations: Each component is accessible React + Tailwind + Motion under the hood — the evil skin sits on solid engineering.
• Playground-First Docs: Live documentation lets you feel every interaction before committing a single line of code.

Installation & Quick Start

npx shadcn@latest add @evilbuttons/frame-button

import { FrameButton } from "@/components/ui/frame-button";

export function DeployDoom() {
  return <FrameButton onClick={() => launch()}>DEPLOY</FrameButton>;
}

Why Choose Evil Buttons?

1. Developer-Portfolios & Dev Tools: Where personality is the product — launch pages, hackathon demos, internal tools that need soul.
2. Motion Patterns as Reference: Even if you never ship an evil button, the source is a masterclass in Motion choreography — hold gestures, glitch loops, cursor tracking.
3. Not For: Banking dashboards, medical software, or any UI where whimsy undermines trust.