Skip to main content
  • Location: sabo/src/components/ui/border-beam.tsx
Border Beam: a focused highlight sweeping along the border (spotlight). Different from Shine Border which is a uniform shimmer; use Beam when you want a more noticeable, directional accent.

​
When to use

  • Add a directional accent to a card/container border.
  • Use for hero cards or highlighted sections where motion can help focus.

​
Usage

sabo/src/components/ui/border-beam.tsx
import { BorderBeam } from "@/components/ui/border-beam";

export function Example() {
  return (
    <div className="relative rounded-xl border p-6">
      <div className="relative z-10">Content</div>
      <BorderBeam size={60} borderWidth={2} />
    </div>
  );
}

​
Key props

​
size
number
default:"50"
Beam size (px). Larger values create a wider highlight.
​
duration
number
default:"6"
Time in seconds for one full sweep.
​
colorFrom
string
default:"#ffaa40"
Start color for the gradient beam.
​
colorTo
string
default:"#9c40ff"
End color for the gradient beam.
​
borderWidth
number
default:"1"
Overlay border thickness (px).
​
reverse
boolean
default:"false"
Sweep direction.

​
Styling tip

  • Parent must be relative with a rounded radius; the beam mirrors the parent’s shape.
  • Keep borderWidth small and colors subtle to avoid overpowering content.