Border Beam
Installation
Run the following command:
npx magicui-cli add border-beamUpdate tailwind.config.js
Add the following animations to your tailwind.config.js file:
tailwind.config.js
/** @type {import('tailwindcss').Config} */
module.exports = {
theme: {
extend: {
animation: {
"border-beam": "border-beam calc(var(--duration)*1s) infinite linear",
},
keyframes: {
"border-beam": {
"100%": {
"offset-distance": "100%",
},
},
},
},
},
};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 |