Back
Border Beam
Satu Visual ComponentNew
A beam of light that travels around a container's border.
Border Beam
Installation
Add it with the CLI:
Terminal
$
Or open the Code tab above and copy it in manually — it relies on the standard cn() helper from @/lib/utils.
Usage
Drop <BorderBeam /> inside a relative, rounded, overflow-hidden container.
Props
| Prop | Type | Default | Description |
|---|---|---|---|
| size | number | 120 | Beam length, px. |
| duration | number | 5 | Seconds per loop. |
| colorFrom | string | #a78bfa | Beam start color. |
| colorTo | string | #22d3ee | Beam end color. |
Requirements
No external npm dependencies. ✨
Add this to your Tailwind config:
tailwind.config.ts
// theme.extend
animation: { "border-beam": "border-beam calc(var(--duration,4s)) linear infinite" },
keyframes: { "border-beam": { "100%": { "offset-distance": "100%" } } },