Getting Started
Components
Special Effects
Animations
Text Animations
Backgrounds
import { ShimmerButton } from "@/registry/magicui/shimmer-button"
export function ShimmerButtonDemo() {
return (
<ShimmerButton className="shadow-2xl">
<span className="text-center text-sm leading-none font-medium tracking-tight whitespace-pre-wrap text-white lg:text-lg dark:from-white dark:to-slate-900/10">
Shimmer Button
</span>
</ShimmerButton>
)
}
Installation
pnpm dlx shadcn@latest add @magicui/shimmer-button
Usage
import { ShimmerButton } from "@/components/ui/shimmer-button"
<ShimmerButton>Shimmer Button</ShimmerButton>
Props
Prop | Type | Default | Description |
---|---|---|---|
shimmerColor | string | #ffffff | The color of the shimmer |
shimmerSize | string | 0.05em | The size of the shimmer |
borderRadius | string | 100px | The border radius of the button |
shimmerDuration | string | 3s | The duration of the spark animation |
background | string | rgba(0, 0, 0, 1) | The background of the button |
className | string | undefined | The class name of the button |
children | React.ReactNode | undefined | The children of the button |
Credits
Credit to @jh3yy for the inspiration behind this component.
Limited Time Offer
Ship Faster with Magic UI ProMagic UI Pro
Stop building from scratch.
Get 8 production-ready templates and 50+ premium components that your users will love.
Next.js 15 + TypeScript ready
Copy, paste, customize in minutes
Save 100+ hours of development