Shine Border

Shiny animated border effect.

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