Gradient Border
A container with a rotating multi-colour border and an optional blurred halo.
css@property2 files · 70 locdeps: clsx, tailwind-merge
Installation
With the shadcn CLI, pointing at this platform’s registry:
npx shadcn@latest add https://opusui.131199999.xyz/r/gradient-border.jsonOr offline, straight from your opus55 checkout (copies every file it needs):
node ../tailwind_component/opus55/scripts/add.mjs gradient-borderUsage
import { GradientBorder } from "@/components/opus/effects/gradient-border";
<GradientBorder className="rounded-2xl"><div className="p-6">…</div></GradientBorder>API
| Prop | Type | Default | Description |
|---|---|---|---|
| colors | string[] | — | Gradient stops (repeat the first at the end for a seamless loop). |
| width | number | 1.5 | Border thickness (px). |
| duration | number | 4 | Seconds per rotation (0 = static). |
| glow | number | 0.5 | Halo opacity. |