ComponentsChangelogPro

    Getting Started

    Animated Cards

    Components

    Backgrounds

    3d & Shaders

    Text Animations

    Buttons

    Docs
    Border Beam

    Border Beam

    Displays an animated border effect with a glowing beam around the content that adapts to the size of the container.

    Loading...

    Installation

    Install dependencies

    npm install

    npm install clsx tailwind-merge

    Add utils file

    lib/utils.ts

    import { ClassValue, clsx } from "clsx";
    import { twMerge } from "tailwind-merge";
     
    export function cn(...inputs: ClassValue[]) {
      return twMerge(clsx(inputs));
    }

    Add the following code in 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) linear infinite",
          },
          keyframes: {
            "border-beam": {
              "0%": { "offset-distance": "0%" },
              "100%": { "offset-distance": "100%" },
            },
          },
        },
      },
    };

    Copy the source code

    border-beam.tsx

    "use client";
     
    import React, { useRef, useEffect, CSSProperties } from "react";
    import { cn } from "@/lib/utils";
     
    interface BorderBeamProps {
      children?: React.ReactNode;
      lightWidth?: number;
      duration?: number;
      lightColor?: string;
      className?: string;
      [key: string]: any;
    }
     
    export default function BorderBeam({
      children,
      lightWidth = 200,
      duration = 10,
      lightColor = "#FAFAFA",
      className,
      ...props
    }: BorderBeamProps) {
      const pathRef = useRef<HTMLDivElement>(null);
     
      const updatePath = () => {
        if (pathRef.current) {
          const div = pathRef.current;
          div.style.setProperty(
            "--path",
            `path("M 0 0 H ${div.offsetWidth} V ${div.offsetHeight} H 0 V 0")`
          );
        }
      };
     
      useEffect(() => {
        updatePath();
        window.addEventListener("resize", updatePath);
     
        return () => {
          window.removeEventListener("resize", updatePath);
        };
      }, []);
     
      return (
        <div
          style={{
            "--duration": duration,
            "--light-width": `${lightWidth}px`,
            "--light-color": lightColor,
            isolation: "isolate",
          } as CSSProperties}
          ref={pathRef}
          className={cn(
            "absolute rounded-[inherit] z-0 w-full h-full overflow-hidden after:content-[''] after:absolute after:inset-[2px] dark:after:bg-black after:bg-white after:rounded-[inherit]",
            "before:absolute before:inset-0 before:rounded-[inherit] before:border-2 before:border-black/5 dark:before:border-white/20",
            className
          )}
          {...props}
        >
          <div
            className="absolute aspect-square inset-0 animate-border-beam bg-[radial-gradient(ellipse_at_center,var(--light-color),transparent,transparent)]"
            style={{
              offsetPath: "var(--path)",
              offsetDistance: "0%",
              width: "var(--light-width)",
            }}
          />
        </div>
      );
    }

    Props

    PropTypeDescriptionDefault
    lightWidthNumberDefines the width of the light beam in pixels.200
    durationNumberThe duration of the animation in seconds.10
    lightColorStringSpecifies the color of the light beam."#FAFAFA"
    childrenReact.ReactNodeThe content inside the "BorderBeam" component.-
    classNameStringAdditional custom classes for styling the component.-

    Credits

  1. This component is inspired by Resend