Border Beam
StableAn animated rotating border gradient for highlighting elements.
Examples
Basic Usage
Scanning sector...
tsx
<div className="relative flex h-[200px] w-full max-w-[32rem] items-center justify-center rounded-xl bg-slate-950/50">
<span className="text-sm text-slate-400">Scanning sector...</span>
<BorderBeam size={200} duration={8} />
</div>Cyberpunk Variants
Predefined color variants: neon, purple, destructive, green.
Neon
Purple
Destructive
Green (Reverse)
tsx
<div className="grid grid-cols-2 gap-4">
<div className="relative rounded-lg p-6 bg-slate-900/50"><BorderBeam variant="neon" /></div>
<div className="relative rounded-lg p-6 bg-slate-900/50"><BorderBeam variant="purple" /></div>
<div className="relative rounded-lg p-6 bg-slate-900/50"><BorderBeam variant="destructive" /></div>
<div className="relative rounded-lg p-6 bg-slate-900/50"><BorderBeam variant="green" reverse /></div>
</div>API Reference
| Property | Description | Type | Default |
|---|---|---|---|
| size | Size / arc angle of the beam in degrees. | number | 90 |
| duration | Duration of the animation in seconds. | number | 6 |
| delay | Delay of the animation in seconds. | number | 0 |
| borderWidth | Width of the border beam in pixels. | number | 1.5 |
| variant | Predefined color gradient variants. | "neon" | "purple" | "destructive" | "green" | - |
| reverse | Reverses the direction of the rotation. | boolean | false |
| colorFrom | Starting color of custom gradient. | string | "#ffffff" |
| colorTo | Ending color of custom gradient. | string | "transparent" |