ShineBorder
Wraps any card or container with an animated conic-gradient border that rotates continuously. Supports single or multi-stop color palettes.
import { ShineBorder } from "@animui/ui"Basic
Shine Border Card
Animated conic-gradient border
Multi-color
Pass an array to color for a multi-stop gradient shine.
Multi-color shine
Three-stop gradient
Props
| Prop | Type | Default | Description |
|---|---|---|---|
children | ReactNode | — | Content rendered inside the border. |
color | string | string[] | ["#7c3aed","#3b82f6","#06b6d4"] | One or more color stops for the shine gradient. |
duration | number | 4 | Full rotation cycle duration in seconds. |
borderWidth | number | 2 | Border thickness in pixels. |
className | string | — | Additional classes for the outer wrapper. |