Shine Border

An animated shine that runs along the border of its container. Animation lives in a companion CSS file — no globals edit required.

Default

Multi-stop shineColor array on a login card. Parent needs relative overflow-hidden.

Loading…

Installation

CLI

npx @sonojs/ui@latest add shine-border

Usage

shine-border.tsx

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

export function Example() {
  return (
    <div className="relative h-[500px] w-full overflow-hidden rounded-lg border">
      <ShineBorder />
    </div>
  )
}

Props

Prop	Type	Default	Description
className	string	-	Classes on the shine overlay.
duration	number	14	Animation duration in seconds.
shineColor	string · string[]	"#000000"	Border shine color, or a gradient stop list.
borderWidth	number	1	Border width in pixels.
style	React.CSSProperties	-	Additional inline styles on the overlay.