Border Beam
Displays an animated border effect with a glowing beam around the content that adapts to the size of the container.
Displays an animated border effect with a glowing beam
Installation
npx shadcn@latest add https://badtz-ui.com/r/border-beam.jsonInstall the following dependencies:
npm install clsx tailwind-merge motionAdd the utils file to the @/lib folder
import { ClassValue, clsx } from "clsx";
import { twMerge } from "tailwind-merge";
export function cn(...inputs: ClassValue[]) {
return twMerge(clsx(inputs));
}Copy and paste the following code into your project.
Component: border-beam
Update the import paths to match your project setup.
Usage
import { BorderBeam } from "@/components/ui/border-beam";<div className="relative rounded-lg shadow-sm">
<BorderBeam lightColor="#FAFAFA" lightWidth={350} duration={8} />
<div className="h-full w-full py-4 px-6 max-w-72 space-y-2">
<h3 className="font-gilroy text-2xl">Border Beam</h3>
<p className="text-sm">
This card showcases a dynamic border beam effect, adding a subtle,
animated glow around the edges.
</p>
</div>
</div>Props
border-beam props.
Type information not available
Credits
This component is inspired by Resend