Shine Border

PreviousNext

Renders an animated neon gradient border around any child content. The border is drawn using a masked overlay with CSS animations — no Tailwind or external CSS required. Supports customization of radius, width, speed, and colors.

Installation

pnpm dlx shadcn@latest add https://ui.dalim.in/r/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>