Introducing Magic UI Pro - 50+ blocks and templates to build beautiful landing pages in minutes.

Border Beam

Border Beam

An animated beam of light which travels along the border of its container.

Border Beam


Run the following command:

npx magicui-cli add border-beam

Update tailwind.config.js

Add the following animations to your tailwind.config.js file:

/** @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%",


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 />


Border Beam

classNamestringCustom class to apply to the component-
sizenumberSize of the beam300
durationnumberDuration of the animation15
anchornumberAnchor point of the beam90
borderWidthnumberWidth of the beam1.5
colorFromstringStart color of the beam#ffaa40
colorTostringEnd color of the beam#9c40ff
delaynumberDelay before the animation starts0


  • Credit to @linear where I first saw this effect.
  • Credit to @jh3yy for sharing his implementation of this effect.