Shine Border

Animated conic-gradient border with a multi-stop color sweep. Uses @property for smooth angle interpolation.

Shine Border

Warm tones

Installation

Run the CLI

$npx particleui-cli add shine-border

Usage

TSX

import { ShineBorder } from "@/components/ui/shine-border"

export default function Example() {
  return (
    <ShineBorder className="w-64 p-6 flex items-center justify-center">
      <p className="font-semibold">Shine Border</p>
    </ShineBorder>
  )
}

Props

Prop	Type	Default	Required
shineColor	string \| string[]	`["oklch(78% 0.17 200)"`	no
duration	number	`8`	no
borderWidth	number	`1`	no

Details

Source filecomponents/ui/shine-border.tsx

Typeui

Categoriescards, particles

npm dependencies

Registry deps

Claude skill—