Shine Border

cardfrom MagicUI Effects

Shine Border

AI Usage Rules

Use ShineBorder to add an animated gradient border that rotates around a container. Requires animate-shine keyframe. Great for highlighting featured cards or premium content. Use color array for multi-color gradients.

Code Template

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

interface ShineBorderProps extends React.ComponentProps<"div"> {
  borderRadius?: number
  borderWidth?: number
  duration?: number
  color?: string | string[]
}

export function ShineBorder({ borderRadius = 8, borderWidth = 1, duration = 14, color = "#fff", className, children, ...props }: ShineBorderProps) {
  return (
    <div
      style={{
        "--border-radius": `${borderRadius}px`,
        "--border-width": `${borderWidth}px`,
        "--duration": `${duration}s`,
        "--mask-linear-gradient": `linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0)`,
        "--background-radial-gradient": `radial-gradient(transparent, transparent, ${Array.isArray(color) ? color.join(",") : color}, transparent, transparent)`,
      } as React.CSSProperties}
      className={cn(
        "relative grid place-items-center rounded-[var(--border-radius)] bg-white p-3 text-black dark:bg-black dark:text-white",
        "before:pointer-events-none before:absolute before:inset-0 before:size-full before:rounded-[var(--border-radius)] before:p-[var(--border-width)] before:[background-image:var(--background-radial-gradient)] before:[background-size:300%_300%] before:animate-shine before:[mask-composite:exclude] before:[mask:var(--mask-linear-gradient)]",
        className
      )}
      {...props}
    >
      {children}
    </div>
  )
}

Props Schema

Property	Type	Default
color	string	—
duration	number	—
borderWidth	number	—
borderRadius	number	—

View raw JSON schema

{
  "type": "object",
  "properties": {
    "color": {
      "type": "string"
    },
    "duration": {
      "type": "number"
    },
    "borderWidth": {
      "type": "number"
    },
    "borderRadius": {
      "type": "number"
    }
  }
}