https://github.com/radiumcoders/Evil-Buttons
shadcn/ui registry of playful, highly animated button components with evil aesthetics and killing interactions.
https://github.com/radiumcoders/Evil-Buttons
8bit animated buttons framer-motion motion nextjs react reusable-components shadcn-ui tailwindcss
Last synced: 19 days ago
JSON representation
shadcn/ui registry of playful, highly animated button components with evil aesthetics and killing interactions.
- Host: GitHub
- URL: https://github.com/radiumcoders/Evil-Buttons
- Owner: radiumcoders
- License: apache-2.0
- Created: 2026-04-28T14:33:06.000Z (2 months ago)
- Default Branch: main
- Last Pushed: 2026-06-06T16:58:42.000Z (about 1 month ago)
- Last Synced: 2026-06-06T17:22:00.858Z (about 1 month ago)
- Topics: 8bit, animated, buttons, framer-motion, motion, nextjs, react, reusable-components, shadcn-ui, tailwindcss
- Language: TypeScript
- Homepage: https://evilbuttons.com
- Size: 1.3 MB
- Stars: 40
- Watchers: 0
- Forks: 10
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
- Contributing: CONTRIBUTING.md
- License: LICENSE
- Agents: AGENTS.md
Awesome Lists containing this project
README
# 😈 Evil Buttons
A [shadcn/ui](https://ui.shadcn.com) registry featuring a collection of animated components built with [Motion](https://motion.dev/). Each component is designed to add punchy, interactive feedback to your UI with minimal setup.
### Github
## Features
- **Animated Components** - Motion-powered buttons and logos with hover, tap, and state animations
- **Buttons & Logos** - Interactive components for any UI need
- **shadcn Registry** - Install components directly via the shadcn CLI
- **Type-Safe** - Full TypeScript support
- **Tailwind CSS** - Styled with Tailwind for easy customization
- **Dark Mode Ready** - Components support light/dark themes out of the box
## Quick Start
Install any component from the registry using the shadcn CLI:
```bash
npx shadcn@latest add @evilbuttons/click-powerup
```
## Documentation
Visit [evilbuttons.com](https://evilbuttons.com) for:
- Live component previews
- Installation commands
- Usage examples and code snippets
## Development
### Prerequisites
- pnpm (recommended)
### Setup
```bash
# Clone the repository
git clone https://github.com/radiumcoders/evil-buttons.git
cd evil-buttons
# Install dependencies
pnpm install
# Run development server
pnpm dev
```
Open [http://localhost:3000](http://localhost:3000) to view the docs site.
### Building the Registry
```bash
pnpm registry:build
```
This generates the registry JSON files in `public/r/`.
## Project Structure
```
evil-buttons/
├── app/ # Next.js app router
│ ├── docs/ # Documentation pages
│ ├── globals.css # Global styles
│ └── layout.tsx # Root layout
├── components/
│ ├── evil-buttons/ # Registry components
│ │ └── click-powerup.tsx
│ └── ... # Docs UI components
├── content/
│ └── docs/ # MDX documentation
├── public/r/ # Registry JSON files
├── scripts/
│ └── build-registry.mjs # Registry builder
└── components.json # shadcn configuration
```
## Contributing
Contributions are welcome! To add a new component:
1. Create your component in `components/evil-buttons/` (buttons or logo subdirectories)
2. Add documentation in `content/docs/`
3. Update `scripts/build-registry.mjs` to include your component
4. Run `pnpm registry:build` to generate registry files
## Star History
[](https://repostars.dev/?repos=radiumcoders%2FEvil-Buttons&theme=sakura)
## License
Apache-2.0 license
---
Built by [Radium Coders](https://radiumcoders.com) with an 🪓