LED

Component

About

A tiny colored status lamp (live, waiting, failed, link, off) with animated gestures like flicker, breathe or blink, meant to sit beside a text label such as a status badge or sync indicator.

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

Code

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

Usage.tsx

import { Led } from "@/components/ui/led";

const moments = [
  { label: "SYNCING", kind: "waiting", gesture: "breathe" },
  { label: "SYNCED", kind: "live", gesture: "flicker" },
  { label: "SYNC FAILED", kind: "failed", gesture: "blink2" },
  { label: "STARTING", kind: "live", gesture: "rise" },
] as const;

export default function LedDemo() {
  return (
    <div className="flex min-h-[320px] w-full items-center justify-center bg-background p-10">
      <div className="flex flex-wrap items-center justify-center gap-3">
        {moments.map((m) => (
          <span
            key={m.label}
            className="inline-flex items-center gap-2 rounded-full border border-border bg-muted/40 px-3 py-1.5"
          >
            <Led kind={m.kind} gesture={m.gesture} />
            <span className="text-xs font-medium tracking-wide text-muted-foreground">
              {m.label}
            </span>
          </span>
        ))}
      </div>
    </div>
  );
}