║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║

---

title: Shine Border date: 2024-05-25 description: Shine border is an animated background border effect. author: unnamed-lab published: true

<ComponentPreview name="shine-border-demo" />

Installation

<Tabs defaultValue="cli"> <TabsList> <TabsTrigger value="cli">CLI</TabsTrigger> <TabsTrigger value="manual">Manual</TabsTrigger> </TabsList> <TabsContent value="cli">

npx shadcn@latest add @magicui/shine-border

</TabsContent> <TabsContent value="manual"> <Steps>

<Step>Copy and paste the following code into your project.</Step>

<ComponentSource name="shine-border" />

<Step>Update the import paths to match your project setup.</Step>

<Step>Add the required CSS animations</Step>

Add the following animations to your global CSS file.

@theme inline {
  --animate-shine: shine var(--duration) infinite linear;

  @keyframes shine {
    0% {
      background-position: 0% 0%;
    }
    50% {
      background-position: 100% 100%;
    }
    to {
      background-position: 0% 0%;
    }
  }
}

</Steps> </TabsContent> </Tabs>

Examples

Monotone

<ComponentPreview name="shine-border-demo-2" />

Usage

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

<div className="relative h-[500px] w-full overflow-hidden">
  <ShineBorder />
</div>

Props

| Prop | Type | Default | Description | | ------------- | --------------------- | ----------- | ------------------------------------------------------------------- | | className | string | - | The class name to be applied to the component. | | duration | number | 14 | Defines the animation duration to be applied on the shining border. | | shineColor | string \| string[] | "#000000" | Color of the border, can be a single color or an array of colors. | | borderWidth | number | 1 | Width of the border in pixels. | | style | React.CSSProperties | - | Additional styles to be applied to the component. |

║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║