Styled Badges

Component 10

About

A set of five decorative status/label badges (dot indicator, gradient fill, glow, live pulse, and gradient outline) themed on design tokens, with a reduced-motion-aware pulsing animation for live indicators.

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

Code

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

Usage.tsx

import {
  DotBadge,
  GradientBadge,
  GlowBadge,
  PulseBadge,
  OutlineBadge,
} from "@/components/ui/badges-styled";

export default function BadgesStyledDemo() {
  return (
    <div className="flex flex-wrap items-center gap-3 p-6">
      <DotBadge>Active</DotBadge>
      <GradientBadge>New</GradientBadge>
      <GlowBadge>Live</GlowBadge>
      <PulseBadge>Recording</PulseBadge>
      <OutlineBadge>Beta</OutlineBadge>
    </div>
  );
}