Magic Button
A pushable 3D button with rainbow edge animation and solid front face.
Installation
pnpm dlx shadcn@latest add @godui/magic-buttonRequires the @godui namespace in your components.json (one-time setup):
{ "registries": { "@godui": "https://godui.design/r/{name}.json" }}Usage
import { MagicButton } from "@/components/godui/magic-button";<MagicButton variant="default">Push me</MagicButton>Examples
Sizes
Without rainbow
Set rainbow={false} for a static 3D edge that uses the variant color instead of the animated gradient.
Disabled
Props
| Prop | Type | Default | Description |
|---|---|---|---|
variant | "default" | "secondary" | "default" | Front face color scheme |
size | "sm" | "default" | "lg" | "default" | Button padding and text size |
rainbow | boolean | true | Animate the 3D edge and shadow with a rainbow gradient |