Shine Border

PreviousNext

Example showing a simple shine-border.

Docs
aliimamexample

Preview

Loading preview…
registry/default/example/backgrounds/shine-border/shine-border-default.tsx
"use client"

import { ShineBorder } from "@/registry/default/components/shine-border"

export default function DemoOne() {
  return (
    <div className="relative flex h-[600px] w-5xl 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>
  )
}

Installation

npx shadcn@latest add @aliimam/shine-border-default

Usage

import { ShineBorderDefault } from "@/components/shine-border-default"
<ShineBorderDefault />