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

# Shine Border

> Shiny animated border effect.

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

<Frame>
  <div className="rounded-xl" style={{ overflow: "hidden", border: "1px solid #e5e7eb" }}>
    <iframe
      className="w-full"
      style={{ height: "160px", pointerEvents: "none" }}
      title="Shine Border"
      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,system-ui}
.card{position:relative;padding:20px 28px;border-radius:16px;background:#fff}
.card::before{content:'';position:absolute;inset:-2px;border-radius:18px;padding:2px;background:linear-gradient(90deg,#e5e7eb, #111827, #e5e7eb);-webkit-mask:linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);-webkit-mask-composite:xor;mask-composite:exclude;animation:shine 2.5s linear infinite}
@keyframes shine{from{background-position:-200px 0}to{background-position:200px 0}}
</style></head><body>
<div class='card'>Shiny border</div>
</body></html>`}
    />
  </div>
</Frame>

## When to use

* Highlight a card or CTA with a minimal, tasteful shimmer.
* Prefer for gentle emphasis; use Border Beam for a more pronounced sweep.

## Usage

```tsx sabo/src/components/ui/shine-border.tsx theme={null}
import { ShineBorder } from "@/components/ui/shine-border";

export function Example() {
  return (
    <div className="relative rounded-xl border p-6">
      <div className="relative z-10">Content</div>
      <ShineBorder
        borderWidth={2}
        duration={10}
        shineColor={["#3B82F6", "#8B5CF6", "#6366F1"]}
      />
    </div>
  );
}
```

## Key props

<ParamField path="borderWidth" type="number" default="1">
  Width of the border in pixels.
</ParamField>

<ParamField path="duration" type="number" default="14">
  Animation duration in seconds for one shimmer cycle.
</ParamField>

<ParamField path="shineColor" type="string | string[]" default="'#000000'">
  Color(s) for the shimmer effect. Can be a single color or array of colors for gradient.
</ParamField>

<ParamField path="className" type="string">
  Additional CSS classes applied to the div element.
</ParamField>

<ParamField path="style" type="React.CSSProperties">
  Inline styles applied to the div element.
</ParamField>

## Styling tip

* Works best on white/solid surfaces with rounded corners (`rounded-xl`).
* Keep animation speed moderate to avoid distraction.
