Shine Border

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.

​When to use

​Usage

​Key props

​Styling tip

When to use

Usage

Key props

Styling tip