Magic Button

A pushable 3D button with rainbow edge animation and solid front face.

Installation

pnpm dlx shadcn@latest add "https://godui.design/r/magic-button.json"

tsx

import { MagicButton } from "@/components/godui/magic-button";

tsx

<MagicButton variant="default">Push me</MagicButton>

Set rainbow={false} for a static 3D edge that uses the variant color instead of the animated gradient.

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

Hold Confirm Button

Press and hold to confirm a destructive action — a radial fill commits at 100%, releasing early cancels.

Magnetic Button

A button whose content is magnetically pulled toward the cursor within a sensor range, springing back on exit.