Border Beam

Cards 11

About

An animated glowing comet that travels around an element's border, used to draw attention to cards, buttons, or loading states.

Built with React and Tailwind. Copy the prompt and paste it into Claude Code, Cursor or Lovable: your agent adds Border Beam to your project and fits it to your theme.

Code

How Border Beam is used: the demo's code. The component's own source comes with a free account.

Usage.tsx

import { BorderBeam } from "@/components/ui/border-beam";

const CARD =
  "bg-background border-border text-foreground flex min-h-28 items-center justify-center rounded-2xl border px-5 text-center text-sm";

const DELAYS = [0, -2, -4];

export default function BorderBeamStagger() {
  return (
    <div className="flex flex-wrap items-center justify-center gap-6">
      {DELAYS.map((delay) => (
        <BorderBeam key={delay} className="w-40 rounded-2xl" delay={delay}>
          <div className={CARD}>delay={delay}</div>
        </BorderBeam>
      ))}
    </div>
  );
}