Skip to main content
  • Location: sabo/src/components/ui/shine-border.tsx

​
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

sabo/src/components/ui/shine-border.tsx
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

​
borderWidth
number
default:"1"
Width of the border in pixels.
​
duration
number
default:"14"
Animation duration in seconds for one shimmer cycle.
​
shineColor
string | string[]
default:"'#000000'"
Color(s) for the shimmer effect. Can be a single color or array of colors for gradient.
​
className
string
Additional CSS classes applied to the div element.
​
style
React.CSSProperties
Inline styles applied to the div element.

​
Styling tip

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