Border Beam

Cards 63

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";

export default function BorderBeamBasic() {
  return (
    <BorderBeam className="w-full max-w-70 rounded-2xl">
      <div className="bg-background border-border text-foreground-intense flex min-h-32 items-center justify-center rounded-2xl border px-6 text-center text-sm font-medium">
        Syncing your workspace
      </div>
    </BorderBeam>
  );
}