Border Beam

Animated border highlight effect.

• 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.