Shine Border

A div with an animated border effect. It uses a radial gradient for the shine and applies a mask to create the border look. Use it to add a subtle animated border to any element.

byMagic UI

Installation

terminal

pnpm dlx layro-cli add @magicuidesign/shine-border

npx layro-cli add @magicuidesign/shine-border

npx layro-cli add @magicuidesign/shine-border

bunx layro-cli add @magicuidesign/shine-border

New project? Start with init. Writes third-party code and installs packages with scripts off.

Code

Demo

"use client"

import * as React from "react"

import { cn } from "@/lib/utils"

interface ShineBorderProps extends React.HTMLAttributes<HTMLDivElement> {
  /**
   * Width of the border in pixels
   * @default 1
   */
  borderWidth?: number
  /**
   * Duration of the animation in seconds