> ## Documentation Index
> Fetch the complete documentation index at: https://docs.getsabo.com/llms.txt
> Use this file to discover all available pages before exploring further.

# Border Beam

> Animated border highlight effect.

* **Location**: `sabo/src/components/ui/border-beam.tsx`

<Frame>
  <div className="rounded-xl" style={{ overflow: "hidden", border: "1px solid #e5e7eb" }}>
    <iframe
      className="w-full"
      style={{ height: "160px", pointerEvents: "none" }}
      title="Border Beam"
      loading="lazy"
      scrolling="no"
      srcDoc={`<!doctype html><html><head><meta charset='utf-8'/><meta name='viewport' content='width=device-width,initial-scale=1'/><style>
  body{margin:0;background:#ffffff;display:flex;align-items:center;justify-content:center;height:140px;font-family:ui-sans-serif}
  .wrap{position:relative;width:360px;height:110px}
  svg{position:absolute;left:0;right:0;top:50%;transform:translateY(-50%)}
  .base{stroke:#e5e7eb;stroke-width:2;fill:#fff}
  .beam{stroke:url(https://mintlify.s3.us-west-1.amazonaws.com/aristotechnologiesinc/customization-guides/ui/magic-ui#grad);stroke-width:2;fill:none;stroke-linecap:round;stroke-dasharray:36 600;animation:dash 3s linear infinite}
  @keyframes dash{to{stroke-dashoffset:-660}}
  .label{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);color:#111827;font-size:14px;font-weight:600}
</style></head><body>
  <div class='wrap'>
    <svg viewBox="0 0 360 110" preserveAspectRatio="none">
      <defs>
        <linearGradient id="grad" x1="0" y1="0" x2="1" y2="0">
          <stop offset="0%" stop-color="#111827" stop-opacity="0"/>
          <stop offset="50%" stop-color="#111827" stop-opacity="0.95"/>
          <stop offset="100%" stop-color="#111827" stop-opacity="0"/>
        </linearGradient>
      </defs>
      <rect x="6" y="6" width="348" height="98" rx="16" class="base"/>
      <rect x="6" y="6" width="348" height="98" rx="16" class="beam"/>
    </svg>
    <div class='label'>Border beam</div>
  </div>
</body></html>`}
    />
  </div>
</Frame>

<Info>
  Border Beam: a focused highlight sweeping along the border (spotlight). Different from <code>Shine Border</code> which is a uniform shimmer; use Beam when you want a more noticeable, directional accent.
</Info>

## 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

```tsx sabo/src/components/ui/border-beam.tsx theme={null}
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

<ParamField path="size" type="number" default="50">
  Beam size (px). Larger values create a wider highlight.
</ParamField>

<ParamField path="duration" type="number" default="6">
  Time in seconds for one full sweep.
</ParamField>

<ParamField path="colorFrom" type="string" default="#ffaa40">
  Start color for the gradient beam.
</ParamField>

<ParamField path="colorTo" type="string" default="#9c40ff">
  End color for the gradient beam.
</ParamField>

<ParamField path="borderWidth" type="number" default="1">
  Overlay border thickness (px).
</ParamField>

<ParamField path="reverse" type="boolean" default="false">
  Sweep direction.
</ParamField>

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