Create eye-catching containers with animated shining borders using CSS gradients.
Installation
npx shadcn@latest add @magicui/shine-border
Required CSS
Add this animation to your global CSS:
@theme inline {
--animate-shine: shine var(--duration) infinite linear;
@keyframes shine {
0% {
background-position: 0% 0%;
}
50% {
background-position: 100% 100%;
}
to {
background-position: 0% 0%;
}
}
}
import { ShineBorder } from "@/components/ui/shine-border"
export default function Example() {
return (
<div className="relative h-[500px] w-full overflow-hidden rounded-xl">
<ShineBorder shineColor="#FF6900" />
{/* Your content here */}
</div>
)
}
Width of the border in pixels
Duration of the shine animation in seconds
shineColor
string | string[]
default:"'#000000'"
Color(s) of the border. Can be a single color or array for gradients
Additional CSS classes to apply
Examples
Monotone Border
<ShineBorder shineColor="#8B5CF6" />
Multi-color Gradient
<ShineBorder shineColor={["#8B5CF6", "#EC4899", "#EF4444"]} />
Custom Duration
<ShineBorder duration={8} shineColor="#3B82F6" />
Features
- Smooth radial gradient animation
- Support for single or multiple colors
- Customizable border width and speed
- Works with rounded corners
- Absolute positioning for easy layering
Credits
Created by unnamed-lab