Border Beam
Installation
npx shadcn@latest add "https://magicui.design/r/border-beam"Usage
Just place the border beam component inside a div with relative positioning, width, and height. You will notice the beam automatically moves around the perimeter of it's container.
import { BorderBeam } from "@/components/magicui/border-beam.tsx";
export default async function App() {
return (
<div className="relative h-[200px] w-[200px] rounded-xl">
<BorderBeam />
</div>
);
}Props
Border Beam
| Prop | Type | Description | Default |
|---|---|---|---|
| className | string | Custom class to apply to the component | - |
| size | number | Size of the beam | 300 |
| duration | number | Duration of the animation | 15 |
| anchor | number | Anchor point of the beam | 90 |
| borderWidth | number | Width of the beam | 1.5 |
| colorFrom | string | Start color of the beam | #ffaa40 |
| colorTo | string | End color of the beam | #9c40ff |
| delay | number | Delay before the animation starts | 0 |