Unlumen Glowing Badge

Component

About

Status badge with a soft glow and animated pulse from Unlumen UI.

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

Code

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

Usage.tsx

"use client";

import { GlowingBadge } from "@/components/ui/unlumen-glowing-badge";

export function GlowingBadgeDemo({
  variant = "success",
  pulse = true,
  dot = true,
}: {
  variant?: "default" | "success" | "warning" | "error" | "info";
  pulse?: boolean;
  dot?: boolean;
}) {
  return (
    <div className="flex flex-wrap items-center justify-center gap-3 p-8">
      <GlowingBadge variant="success" pulse={pulse} dot={dot}>
        Live
      </GlowingBadge>
      <GlowingBadge variant="neutral" pulse={pulse} dot={dot}>
        Ghost
      </GlowingBadge>
      <GlowingBadge variant="info" pulse={pulse} dot={dot}>
        In Progress
      </GlowingBadge>
      <GlowingBadge variant="warning" pulse={pulse} dot={dot}>
        Pending
      </GlowingBadge>
      <GlowingBadge variant="error" pulse={pulse} dot={dot}>
        Offline
      </GlowingBadge>
      <GlowingBadge variant="default" pulse={pulse} dot={dot}>
        Draft
      </GlowingBadge>
    </div>
  );
}
export default GlowingBadgeDemo;