Beacon Badge

Component 2

About

A status badge with a customizable pulsing beacon dot and a blur-reveal animated text label.

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

Code

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

Usage.tsx

import BeaconBadge from "@/components/ui/beacon-badge";

export default function BeaconBadgeDemo() {
  return (
    <div className="flex min-h-[300px] w-full flex-col items-center justify-center gap-6">
      <BeaconBadge label="50+ Components Available" beconColor="blue" />
      <BeaconBadge
        label="All Systems Operational"
        beconColor="green"
        revealDirection="left"
      />
      <BeaconBadge
        label="Maintenance In Progress"
        beconColor="orange"
        border="lg"
        revealDirection="down"
      />
    </div>
  );
}