# Shine Border

An animated border highlight that sweeps around a rounded container, accepting a single shine color or a multi-color gradient.

- Category: Effects & Animation
- License: MIT
- Page: https://www.saasuji.com/components/shine-border
- Install: npx shadcn@latest add https://www.saasuji.com/r/shine-border.json

## Props

| Prop | Type | Default | Description |
| --- | --- | --- | --- |
| borderWidth | `number` | `1` | Width of the border in pixels. |
| duration | `number` | `14` | Seconds for one full shine animation cycle. |
| shineColor | `string | string[]` | `"#000000"` | Single color or array of colors used for the animated highlight. |
| className | `string` | — | Additional classes merged onto the shine element. |
| style | `React.CSSProperties` | — | Inline styles merged onto the shine element. |
| ...props | `React.HTMLAttributes<HTMLDivElement>` | — | All remaining div attributes are forwarded to the shine element. |

## Source

```tsx
"use client"

import * as React from "react"

import { cn } from "@/lib/utils"

interface ShineBorderProps extends React.HTMLAttributes<HTMLDivElement> {
  /**
   * Width of the border in pixels
   * @default 1
   */
  borderWidth?: number
  /**
   * Duration of the animation in seconds
   * @default 14
   */
  duration?: number
  /**
   * Color of the border, can be a single color or an array of colors
   * @default "#000000"
   */
  shineColor?: string | string[]
}

/**
 * Shine Border
 *
 * An animated background border effect component with configurable properties.
 */
export function ShineBorder({
  borderWidth = 1,
  duration = 14,
  shineColor = "#000000",
  className,
  style,
  ...props
}: ShineBorderProps) {
  return (
    <div
      style={
        {
          "--border-width": `${borderWidth}px`,
          "--duration": `${duration}s`,
          backgroundImage: `radial-gradient(transparent,transparent, ${
            Array.isArray(shineColor) ? shineColor.join(",") : shineColor
          },transparent,transparent)`,
          backgroundSize: "300% 300%",
          mask: `linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0)`,
          WebkitMask: `linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0)`,
          WebkitMaskComposite: "xor",
          maskComposite: "exclude",
          padding: "var(--border-width)",
          ...style,
        } as React.CSSProperties
      }
      className={cn(
        "motion-safe:animate-shine pointer-events-none absolute inset-0 size-full rounded-[inherit] will-change-[background-position]",
        className
      )}
      {...props}
    />
  )
}

```