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 | Default | Description |
|---|---|---|---|
className | string | - | Custom class to apply to the component |
size | number | 300 | Size of the beam |
duration | number | 15 | Duration of the animation |
anchor | number | 90 | Anchor point of the beam |
borderWidth | number | 1.5 | Width of the beam |
colorFrom | string | #ffaa40 | Start color of the beam |
colorTo | string | #9c40ff | End color of the beam |
delay | number | 0 | Delay before the animation starts |