Getting Started
Blocks
Components
Device Mocks
Special Effects
Animations
Text Animations
Buttons
import { ShimmerButton } from "@/registry/magicui/shimmer-button";
export function ShimmerButtonDemo() {
return (
<ShimmerButton className="shadow-2xl">
<span className="whitespace-pre-wrap text-center text-sm font-medium leading-none tracking-tight text-white dark:from-white dark:to-slate-900/10 lg:text-lg">
Shimmer Button
</span>
</ShimmerButton>
);
}
Installation
pnpm dlx shadcn@latest add @magicui/shimmer-button
Usage
import { ShimmerButton } from "@/components/magicui/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