# Badge Shimmer New — React Badge Component

> A small "New" label whose text catches a passing highlight on a loop while a tiny spark twinkles beside it.

- Category: [Badges](https://pixelpapa.com/components/badges.md)
- Tags: badge, new, shimmer, label, loop
- Dependencies: lucide-react (plus React and Tailwind CSS v4)
- Last updated: 2026-11-13
- Live preview: https://pixelpapa.com/components/badges/badge-shimmer-new

## Install

```bash
npx shadcn@latest add "https://pixelpapa.com/r/badge-shimmer-new.json"
```

The file is written to `components/pixelpapa/badge-shimmer-new.tsx`. To install manually, run `npm install lucide-react` and copy the source below into your project. It imports `cn` from `@/lib/utils`, which every shadcn project has.

## Source

```tsx
"use client";

import { Activity, ChartColumn, ScrollText, Workflow, type LucideIcon } from "lucide-react";
import type { CSSProperties, ReactNode } from "react";
import { cn } from "@/lib/utils";

type ShimmerBadgeProps = {
  children: ReactNode;
  /** Any CSS colour. The tint, border and text are derived from it. */
  color?: string;
  /** Show the twinkling spark. */
  spark?: boolean;
  /** Seconds per shimmer cycle. */
  speed?: number;
  className?: string;
};

export function ShimmerBadge({ children, color = "var(--primary)", spark = true, speed = 2.8, className }: ShimmerBadgeProps) {
  return (
    <span
      style={{ "--pp-c": color } as CSSProperties}
      className={cn(
        "inline-flex items-center gap-1 rounded-full border border-[color-mix(in_oklch,var(--pp-c)_28%,transparent)] bg-[color-mix(in_oklch,var(--pp-c)_10%,transparent)] px-2 py-0.5 text-[11px] leading-4 font-semibold tracking-wide uppercase",
        className,
      )}
    >
      <style>{`
        @keyframes pp-badge-shimmer-new-pass { 0% { background-position: 100% 0; } 55%, 100% { background-position: -100% 0; } }
        @keyframes pp-badge-shimmer-new-twinkle { 0%, 100% { transform: scale(.55) rotate(0deg); opacity: .5; } 50% { transform: scale(1) rotate(90deg); opacity: 1; } }
      `}</style>
      {spark && (
        <svg
          aria-hidden
          viewBox="0 0 12 12"
          className="size-2.5 fill-[var(--pp-c)] motion-reduce:animate-none"
          style={{ animation: `pp-badge-shimmer-new-twinkle ${speed / 2}s ease-in-out infinite` }}
        >
          <path d="M6 0c.4 3.2 2.8 5.6 6 6-3.2.4-5.6 2.8-6 6-.4-3.2-2.8-5.6-6-6 3.2-.4 5.6-2.8 6-6z" />
        </svg>
      )}
      {/* The highlight is a lighter stop inside a wide gradient clipped to the glyphs. */}
      <span
        className="bg-clip-text text-transparent motion-reduce:animate-none"
        style={{
          backgroundImage:
            "linear-gradient(100deg, var(--pp-c) 40%, color-mix(in oklch, var(--pp-c) 25%, white) 50%, var(--pp-c) 60%)",
          backgroundSize: "200% 100%",
          animation: `pp-badge-shimmer-new-pass ${speed}s ease-in-out infinite`,
        }}
      >
        {children}
      </span>
    </span>
  );
}

const nav: { label: string; icon: LucideIcon; badge?: ReactNode; active?: boolean }[] = [
  { label: "Overview", icon: ChartColumn, active: true },
  { label: "Automations", icon: Workflow, badge: <ShimmerBadge>New</ShimmerBadge> },
  {
    label: "Live traces",
    icon: Activity,
    badge: (
      <ShimmerBadge color="var(--chart-3)" spark={false} speed={3.6}>
        Beta
      </ShimmerBadge>
    ),
  },
  { label: "Audit log", icon: ScrollText },
];

export default function BadgeShimmerNewDemo() {
  return (
    <div className="flex w-full max-w-xl flex-col items-center gap-7 sm:flex-row sm:justify-center sm:gap-10">
      <nav aria-label="Workspace" className="w-60 rounded-2xl border border-border bg-card p-2">
        {nav.map((item) => (
          <a
            key={item.label}
            href="#"
            onClick={(e) => e.preventDefault()}
            className={cn(
              "flex h-9 items-center gap-2.5 rounded-lg px-2.5 text-sm transition-colors",
              item.active ? "bg-muted font-medium text-foreground" : "text-muted-foreground hover:bg-muted/60 hover:text-foreground",
            )}
          >
            <item.icon className="size-4" />
            <span className="flex-1">{item.label}</span>
            {item.badge}
          </a>
        ))}
      </nav>
      <div className="flex flex-col items-start gap-3">
        <ShimmerBadge className="px-2.5 py-1 text-xs">New</ShimmerBadge>
        <ShimmerBadge color="oklch(0.72 0.16 60)" className="px-2.5 py-1 text-xs">
          Limited offer
        </ShimmerBadge>
        <ShimmerBadge color="var(--chart-5)" speed={3.4} className="px-2.5 py-1 text-xs">
          Just shipped
        </ShimmerBadge>
      </div>
    </div>
  );
}
```

## AI prompt

```text
Add the "Badge Shimmer New" component from PixelPapa UI to this project.

What it is: A small "New" label whose text catches a passing highlight on a loop while a tiny spark twinkles beside it.
Category: Badges. Depends on: lucide-react.

1. Install it with the shadcn CLI:
   npx shadcn@latest add "https://pixelpapa.com/r/badge-shimmer-new.json"
   (If the CLI is unavailable, fetch that URL, write files[0].content to components/pixelpapa/badge-shimmer-new.tsx and install the listed dependencies.)
2. Import it from "@/components/pixelpapa/badge-shimmer-new" and place it where I describe below.
3. Keep its animation timings and accessibility attributes. Replace the demo copy and data with content that fits my product, and use my existing theme tokens (bg-background, text-foreground, bg-primary, border-border) rather than hard-coded colours.

Where to use it: <describe the page and position here>
```

## More badges

- [Badge Count Pop](https://pixelpapa.com/components/badges/badge-count-pop.md) (Pro): A notification count that bumps with a spring whenever it changes, rolls the digits in the direction of the change and pops out at zero.
- [Badge Dismissible Tags](https://pixelpapa.com/components/badges/badge-dismissible-tags.md) (Pro): Removable tags that blur and shrink away while their neighbours glide into the gap with a layout spring.
- [Badge Gradient Outline](https://pixelpapa.com/components/badges/badge-gradient-outline.md): Pill badges with a hairline gradient border and matching gradient text; on hover the colours slide through the outline and a soft tint fills the pill.
- [Badge Status Pulse](https://pixelpapa.com/components/badges/badge-status-pulse.md): Status badges with a live dot per state: a calm sonar ring for healthy, a breathing glow for degraded, urgent double rings for down and an orbiting arc for deploying.
- [Badge Trend Delta](https://pixelpapa.com/components/badges/badge-trend-delta.md) (Pro): A delta badge that flips its arrow with a spring, cross-fades between green and red and rolls the figure whenever the value changes sign or size.
- [Badge Verified Seal](https://pixelpapa.com/components/badges/badge-verified-seal.md) (Pro): A scalloped verification seal that spins in on a spring, draws its check stroke, takes a single sheen and then keeps turning slowly. Hover replays it.