shine-border-default
Shine Border
"use client"
import { ShineBorder } from "@/components/ui/backgrounds/shine-border"
export function DemoOne() {
return (
<div className="relative flex h-[500px] w-full flex-col items-center justify-center overflow-hidden rounded-xl border">
<ShineBorder
borderRadius={30}
borderWidth={6}
duration={30}
className="h-[400px] w-full px-10"
>
<h1 className="text-xl">Shine Border</h1>
</ShineBorder>
</div>
)
}
pnpm dlx shadcn@latest add "https://ui.dalim.in/r/shine-border-default.json"Installation
pnpm dlx shadcn@latest add https://ui.dalim.in/r/styles/default/shine-border.json
Usage
import { ShineBorder } from "@/components/ui/shine-border"<div className="relative h-screen w-full overflow-hidden">
<ShineBorder borderRadius={12} borderWidth={3} duration={10}>
<span style={{ color: "white", fontSize: 20 }}>Neon Glow ✨</span>
</ShineBorder>
</div>API Reference
| Prop | Type | Default | Description |
|---|---|---|---|
borderRadius | number | 8 | Corner radius of the bordered container, in pixels. |
borderWidth | number | 1 | Thickness of the border, in pixels. |
duration | number | 14 | Duration of one full shine animation cycle (in seconds). |
color | string | string[] | Neon palette (["#ff00ff", "#00ffff", "#ff3131", "#00ff00", "#ffea00", "#ff6ec7", "#39ff14", "#ff8300", "#7df9ff", "#fe019a"]) | Single CSS color string or array of colors used for the animated border. |
className | string | – | Optional CSS class for wrapper. |
children | React.ReactNode | – | Content inside the bordered container. |